godown 2.6.2 → 2.7.1

package/web-components/{a/avatar-a.js → avatar/avatar.js}

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { css, html, ifDefined, property } from "../../deps.js";
+import { css, html, ifDefined, property } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot } from "../../lib/templates.js";
-import { createScope, define } from "../../root.js";
-import SuperA from "./super-a.js";
-const defineName = "avatar-a";
+import GodownAnchor from "../../supers/anchor.js";
+import { createScope } from "../../supers/root.js";
+const defineName = "avatar";
 const cssvarScope = createScope(defineName);
 /**
- * AvatarAnchor renders the avatar or name and has a href.
+ * {@linkcode Avatar} renders the avatar or name and has a href.
  */
-let AvatarA = class AvatarA extends SuperA {
+let Avatar = class Avatar extends GodownAnchor {
     constructor() {
         super(...arguments);
         /**
@@ -24,11 +25,11 @@ let AvatarA = class AvatarA extends SuperA {
          */
         this.href = undefined;
         /**
-         * If the image is not available, the {@linkcode AvatarA.avaName} will be displayed.
+         * If the image is not available, the {@linkcode Avatar.avaName} will be displayed.
          */
         this.name = "";
         /**
-         * If there is a value, the {@linkcode AvatarA.avaMore} will be displayed.
+         * If there is a value, the {@linkcode Avatar.avaMore} will be displayed.
          */
         this.more = 0;
     }
@@ -69,7 +70,7 @@ let AvatarA = class AvatarA extends SuperA {
         }
     }
 };
-AvatarA.styles = [
+Avatar.styles = [
     css `
       :host {
         ${cssvarScope}--ava: 1.5em;
@@ -113,22 +114,22 @@ AvatarA.styles = [
 ];
 __decorate([
     property()
-], AvatarA.prototype, "src", void 0);
+], Avatar.prototype, "src", void 0);
 __decorate([
     property()
-], AvatarA.prototype, "def", void 0);
+], Avatar.prototype, "def", void 0);
 __decorate([
     property()
-], AvatarA.prototype, "href", void 0);
+], Avatar.prototype, "href", void 0);
 __decorate([
     property()
-], AvatarA.prototype, "name", void 0);
+], Avatar.prototype, "name", void 0);
 __decorate([
     property({ type: Number })
-], AvatarA.prototype, "more", void 0);
-AvatarA = __decorate([
+], Avatar.prototype, "more", void 0);
+Avatar = __decorate([
     define(defineName)
-], AvatarA);
-export { AvatarA };
-export default AvatarA;
-//# sourceMappingURL=avatar-a.js.map
+], Avatar);
+export { Avatar };
+export default Avatar;
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/avatar/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,UAAU,GAAG,QAAQ,CAAC;AAC5B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,YAAY;IAAjC;;QACL;;WAEG;QACS,QAAG,GAA8B,EAAE,CAAC;QAChD;;WAEG;QACS,QAAG,GAAW,SAAS,CAAC;QACpC;;WAEG;QACS,SAAI,GAAG,SAAS,CAAC;QAC7B;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QACtB;;WAEG;QACyB,SAAI,GAAG,CAAC,CAAC;IAoFvC,CAAC;IAvCW,MAAM;QACd,OAAO,IAAI,CAAA;iBACE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,QAAQ,CAAC,MAAM,CAAC;QACvE,QAAQ,EAAE;KACb,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA,SAAS,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;QAC9C,CAAC;QACD,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,OAAO,IAAI,CAAA,aAAa,IAAI,CAAC,GAAG,YAAY,IAAI,CAAC,UAAU,YAAY,CAAC;QAC1E,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA,SAAS,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;QAC9C,CAAC;QACD,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;YAClB,OAAO,GAAG,CAAC;QACb,CAAC;QACD,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;IACnD,CAAC;IAED,OAAO;QACL,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACnC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IAED,UAAU,CAAC,CAAa;QACtB,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACZ,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAChD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;QACvB,CAAC;IACH,CAAC;;AAjFM,aAAM,GAAG;IACd,GAAG,CAAA;;UAEG,WAAW;;;;;;;;;;;;;;;sBAeC,WAAW;qBACZ,WAAW;;;;;;;;;;;;;;;;;;;;;KAqB3B;CACF,AAzCY,CAyCX;AA3DU;IAAX,QAAQ,EAAE;mCAAqC;AAIpC;IAAX,QAAQ,EAAE;mCAAyB;AAIxB;IAAX,QAAQ,EAAE;oCAAkB;AAIjB;IAAX,QAAQ,EAAE;oCAAW;AAIM;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAU;AApB1B,MAAM;IADlB,MAAM,CAAC,UAAU,CAAC;GACN,MAAM,CAwGlB;;AAED,eAAe,MAAM,CAAC","sourcesContent":["import { css, html, ifDefined, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport GodownAnchor from \"../../supers/anchor.js\";\nimport { createScope } from \"../../supers/root.js\";\n\nconst defineName = \"avatar\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Avatar} renders the avatar or name and has a href.\n */\n@define(defineName)\nexport class Avatar extends GodownAnchor {\n  /**\n   * Image src.\n   */\n  @property() src: string | undefined | null = \"\";\n  /**\n   * Default image src.\n   */\n  @property() def: string = undefined;\n  /**\n   * Link href.\n   */\n  @property() href = undefined;\n  /**\n   * If the image is not available, the {@linkcode Avatar.avaName} will be displayed.\n   */\n  @property() name = \"\";\n  /**\n   * If there is a value, the {@linkcode Avatar.avaMore} will be displayed.\n   */\n  @property({ type: Number }) more = 0;\n\n  static styles = [\n    css`\n      :host {\n        ${cssvarScope}--ava: 1.5em;\n        display: inline-flex;\n        align-items: center;\n      }\n\n      * {\n        border-radius: inherit;\n      }\n\n      img {\n        width: 100%;\n        height: 100%;\n      }\n\n      a {\n        height: var(${cssvarScope}--ava);\n        width: var(${cssvarScope}--ava);\n        color: inherit;\n        display: flex;\n        position: relative;\n        align-items: inherit;\n      }\n\n      span {\n        position: absolute;\n        width: 100%;\n        text-align: center;\n      }\n\n      slot[name=\"mask\"] {\n        position: absolute;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`\n      <a href=\"${ifDefined(this.href)}\"> ${this.renderAva()} ${htmlSlot(\"mask\")} </a>\n      ${htmlSlot()}\n    `;\n  }\n\n  private renderAva(): HTMLTemplate {\n    if (this.more) {\n      return html`<span>${this.avaMore()}</span>`;\n    }\n    if (this.src) {\n      return html`<img src=\"${this.src}\" @error=${this.imgOnError} alt=\"\" />`;\n    }\n    if (this.name) {\n      return html`<span>${this.avaName()}</span>`;\n    }\n    return htmlSlot(\"avatar\");\n  }\n\n  avaMore(): string | number {\n    if (this.more < 0) {\n      return \"+\";\n    }\n    return (this.more > 99 ? \"99\" : this.more) + \"+\";\n  }\n\n  avaName(): string {\n    const name = this.name.slice(0, 2);\n    return name[0].toUpperCase() + name.slice(1);\n  }\n\n  imgOnError(e: ErrorEvent) {\n    if (this.def) {\n      (e.target as HTMLImageElement).src = this.def;\n    } else {\n      this.src = undefined;\n    }\n  }\n}\n\nexport default Avatar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"avatar-a\": Avatar;\n    \"g-avatar\": Avatar;\n  }\n}\n"]}

package/web-components/button/{base-button.d.ts → button.d.ts}

@@ -1,5 +1,5 @@
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../root.js";
+import { GodownElement } from "../../supers/root.js";
 declare const colors: {
     black: string[];
     gary: string[];
@@ -11,11 +11,11 @@ declare const colors: {
 };
 type Colors = keyof typeof colors;
 /**
- * BaseButton.
+ * {@linkcode Button}.
  *
  * Inspired by Next-ui.
  */
-export declare class BaseButton extends GodownElement {
+export declare class Button extends GodownElement {
     /**
      * Whether to disable this element.
      */
@@ -32,10 +32,6 @@ export declare class BaseButton extends GodownElement {
      * Enables rounded corners to appear capsule shaped.
      */
     radius: boolean;
-    /**
-     * Enables scale when mousedown.
-     */
-    scale: boolean;
     /**
      * The primary color.
      */
@@ -71,10 +67,11 @@ export declare class BaseButton extends GodownElement {
      */
     nextColor(): Colors | string;
 }
-export default BaseButton;
+export default Button;
 declare global {
     interface HTMLElementTagNameMap {
-        "base-button": BaseButton;
+        "base-button": Button;
+        "g-button": Button;
     }
 }
-//# sourceMappingURL=base-button.d.ts.map
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/button/button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAe,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAYlE,QAAA,MAAM,MAAM;;;;;;;;CA2CX,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AAElC;;;;GAIG;AACH,qBACa,MAAO,SAAQ,aAAa;IACvC;;OAEG;IACyC,QAAQ,UAAS;IAC7D;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IACyC,MAAM,UAAS;IAC3D;;OAEG;IACyC,MAAM,UAAS;IAC3D;;OAEG;IACS,KAAK,EAAE,MAAM,GAAG,MAAM,CAAW;IAC7C;;OAEG;IACS,IAAI,SAAM;IAEV,EAAE,EAAE,WAAW,CAAC;IACd,IAAI,EAAE,iBAAiB,CAAC;IAEtC,MAAM,CAAC,MAAM,4BAmHX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAShC,KAAK;IAOL,IAAI;IAIJ,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAgBpC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAYpC;;;;;;;;;;;;;;;OAeG;IACH,SAAS,IAAI,MAAM,GAAG,MAAM;CAG7B;AAED,eAAe,MAAM,CAAC;AAEtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,MAAM,CAAC;QACtB,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}

package/web-components/button/{base-button.js → button.js}

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { css, html, property, query, unsafeCSS } from "../../deps.js";
+import { css, html, property, query, unsafeCSS } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot } from "../../lib/templates.js";
 import { constructCSS } from "../../lib/utils.js";
-import { createScope, define, GodownElement } from "../../root.js";
-const defineName = "base-button";
+import { createScope, GodownElement } from "../../supers/root.js";
+const defineName = "button";
 const cssvarScope = createScope(defineName);
 const shadow1 = "-2px 2px 5px -2px";
 const shadow2 = "2px -2px 5px -2px";
@@ -56,11 +57,11 @@ const colors = {
     ],
 };
 /**
- * BaseButton.
+ * {@linkcode Button}.
  *
  * Inspired by Next-ui.
  */
-let BaseButton = class BaseButton extends GodownElement {
+let Button = class Button extends GodownElement {
     constructor() {
         super(...arguments);
         /**
@@ -79,10 +80,6 @@ let BaseButton = class BaseButton extends GodownElement {
          * Enables rounded corners to appear capsule shaped.
          */
         this.radius = false;
-        /**
-         * Enables scale when mousedown.
-         */
-        this.scale = false;
         /**
          * The primary color.
          */
@@ -110,21 +107,7 @@ let BaseButton = class BaseButton extends GodownElement {
         this.active = false;
     }
     firstUpdated() {
-        if (this.scale) {
-            this.addEvent(this, "mousedown", this.focus);
-            this.addEvent(this, "mouseup", (e) => {
-                if (this.disabled) {
-                    return;
-                }
-                this.blur();
-                this._handleModal(e);
-            });
-            this.addEvent(this, "mouseleave", this.blur);
-            return;
-        }
-        else {
-            this.addEvent(document, "click", this._handelClick.bind(this));
-        }
+        this.addEvent(document, "click", this._handelClick.bind(this));
     }
     _handleModal(e) {
         const a = this._div.offsetHeight + 1;
@@ -173,7 +156,7 @@ let BaseButton = class BaseButton extends GodownElement {
         return this.color;
     }
 };
-BaseButton.styles = [
+Button.styles = [
     unsafeCSS(constructCSS(vars, colors, (raw) => `[color=${raw}]`, (k, v) => `${cssvarScope}--${k}:${v}`)),
     css `
       :host {
@@ -196,14 +179,10 @@ BaseButton.styles = [
         cursor: not-allowed;
       }
 
-      :host([active][scale]) div {
+      :host(:active) div {
         scale: var(${cssvarScope}--focus-scale);
       }
 
-      slot {
-        display: flow-root;
-      }
-
       div {
         background: var(${cssvarScope}--background);
         box-shadow: var(${cssvarScope}--box-shadow);
@@ -288,34 +267,31 @@ BaseButton.styles = [
 ];
 __decorate([
     property({ type: Boolean, reflect: true })
-], BaseButton.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], BaseButton.prototype, "ghost", void 0);
+], Button.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], BaseButton.prototype, "active", void 0);
+], Button.prototype, "ghost", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], BaseButton.prototype, "radius", void 0);
+], Button.prototype, "active", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], BaseButton.prototype, "scale", void 0);
+], Button.prototype, "radius", void 0);
 __decorate([
     property()
-], BaseButton.prototype, "color", void 0);
+], Button.prototype, "color", void 0);
 __decorate([
     property()
-], BaseButton.prototype, "text", void 0);
+], Button.prototype, "text", void 0);
 __decorate([
     query("b")
-], BaseButton.prototype, "_b", void 0);
+], Button.prototype, "_b", void 0);
 __decorate([
     query("div")
-], BaseButton.prototype, "_div", void 0);
-BaseButton = __decorate([
+], Button.prototype, "_div", void 0);
+Button = __decorate([
     define(defineName)
-], BaseButton);
-export { BaseButton };
-export default BaseButton;
-//# sourceMappingURL=base-button.js.map
+], Button);
+export { Button };
+export default Button;
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property, query, unsafeCSS } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { constructCSS } from \"../../lib/utils.js\";\nimport { createScope, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"button\";\nconst cssvarScope = createScope(defineName);\n\nconst shadow1 = \"-2px 2px 5px -2px\";\nconst shadow2 = \"2px -2px 5px -2px\";\nconst linearGradient = \"linear-gradient\";\nconst fff = \"#fff\";\nconst _000 = \"#000\";\n\nconst vars = [\"color\", \"background\", \"box-shadow\", \"ghost-color\"];\nconst colors = {\n  black: [\n    fff, //\n    `${linearGradient}(45deg, rgb(30 30 30), rgb(65 65 65))`,\n    `${shadow1} rgb(0 0 0 / 20%), ${shadow2} rgb(99 99 99 / 20%)`,\n    \"rgb(22 20 20)\",\n  ],\n  gary: [\n    fff, //\n    `${linearGradient}(45deg, rgb(65 65 65),  rgb(100 100 100))`,\n    `${shadow1} rgb(0 0 0 / 20%), ${shadow2} rgb(99 99 99 / 20%)`,\n    \"rgb(56 56 56)\",\n  ],\n  white: [\n    _000, //\n    `${linearGradient}(45deg, rgb(225 225 225), rgb(240 240 240))`,\n    `${shadow1} rgb(255 255 255 / 20%), ${shadow2} rgb(165 165 165 / 20%)`,\n    \"rgb(212 212 212)\",\n  ],\n  red: [\n    fff, //\n    `${linearGradient}(45deg, rgb(215 57 68), rgb(250 141 106))`,\n    `${shadow1} rgb(181 35 44 / 20%), ${shadow2} rgb(234 130 174 / 20%)`,\n    \"rgb(214 11 23)\",\n  ],\n  green: [\n    _000, //\n    `${linearGradient}(45deg, rgb(21 206 71), rgb(99 253 122))`,\n    `${shadow1} rgb(63 179 69 / 20%), ${shadow2} rgb(136 225 142 / 20%)`,\n    \"rgb(60 214 68)\",\n  ],\n  blue: [\n    fff, //\n    `${linearGradient}(45deg, rgb(14 143 255), rgb(121 211 255))`,\n    `${shadow1} rgb(92 182 255 / 20%), ${shadow2} rgb(135 232 222 / 20%)`,\n    \"rgb(42 141 221)\",\n  ],\n  yellow: [\n    _000, //\n    `${linearGradient}(45deg, rgb(255 190 54), rgb(255 249 68))`,\n    `${shadow1} rgb(214 203 55 / 20%), ${shadow2} rgb(202 203 137 / 20%)`,\n    \"rgb(255 235 59)\",\n  ],\n};\n\ntype Colors = keyof typeof colors;\n\n/**\n * {@linkcode Button}.\n *\n * Inspired by Next-ui.\n */\n@define(defineName)\nexport class Button extends GodownElement {\n  /**\n   * Whether to disable this element.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**\n   * Invert font and background color.\n   */\n  @property({ type: Boolean, reflect: true }) ghost = false;\n  /**\n   * Whether this element is active or not.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n  /**\n   * Enables rounded corners to appear capsule shaped.\n   */\n  @property({ type: Boolean, reflect: true }) radius = false;\n  /**\n   * The primary color.\n   */\n  @property() color: \"none\" | Colors = \"black\";\n  /**\n   * Text inside.\n   */\n  @property() text = \"\";\n\n  @query(\"b\") _b: HTMLElement;\n  @query(\"div\") _div: HTMLButtonElement;\n\n  static styles = [\n    unsafeCSS(\n      constructCSS(\n        vars,\n        colors,\n        (raw) => `[color=${raw}]`,\n        (k, v) => `${cssvarScope}--${k}:${v}`,\n      ),\n    ),\n    css`\n      :host {\n        ${cssvarScope}--padding: .075em .25em;\n        ${cssvarScope}--deg: .075em .25em;\n        ${cssvarScope}--ghost-width: .09em;\n        ${cssvarScope}--modal-opacity: .15;\n        ${cssvarScope}--modal-opacity-end: 0;\n        ${cssvarScope}--modal-animation-duration: 1s;\n        ${cssvarScope}--focus-scale: .975;\n        transition: 0.1s;\n        display: flex;\n        width: fit-content;\n        border-radius: 0.25em;\n        cursor: pointer;\n        background: none !important;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n      }\n\n      :host(:active) div {\n        scale: var(${cssvarScope}--focus-scale);\n      }\n\n      div {\n        background: var(${cssvarScope}--background);\n        box-shadow: var(${cssvarScope}--box-shadow);\n        color: var(${cssvarScope}--color, inherit);\n        width: 100%;\n        height: 100%;\n        position: relative;\n        overflow: hidden;\n        border-radius: inherit;\n        transition-duration: inherit;\n        transition-property: scale;\n        pointer-events: none;\n      }\n\n      b {\n        pointer-events: none;\n        transform: translate(-50%, -50%);\n        position: absolute;\n        visibility: hidden;\n      }\n\n      p {\n        padding: var(${cssvarScope}--padding);\n        margin: 0;\n        user-select: none;\n        transition: 0;\n      }\n\n      :host([ghost]) p {\n        background-image: var(${cssvarScope}--background);\n        margin: calc(-1 * var(${cssvarScope}--ghost-width));\n        background-clip: text;\n        -webkit-background-clip: text;\n        color: transparent;\n      }\n\n      :host([ghost]) div {\n        background: transparent;\n        border: var(${cssvarScope}--ghost-width) solid var(${cssvarScope}--ghost-color);\n      }\n\n      :host([radius]) {\n        border-radius: calc(infinity * 1px);\n        ${cssvarScope}--padding: .075em .5em;\n      }\n    `,\n    css`\n      i {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        border-radius: 50%;\n        transform: translate(0, 0);\n        background: currentColor;\n        opacity: var(${cssvarScope}--modal-opacity-end);\n        visibility: visible;\n        animation-duration: min(var(${cssvarScope}--modal-animation-duration), 2s);\n      }\n\n      :host([ghost]) i {\n        background: var(${cssvarScope}--ghost-color);\n      }\n\n      @keyframes i {\n        0% {\n          transform: scale(0);\n          opacity: var(${cssvarScope}--modal-opacity);\n        }\n        80% {\n          transform: scale(1);\n        }\n        100% {\n          opacity: var(${cssvarScope}--modal-opacity-end);\n        }\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`\n      <div color=\"${this.nextColor()}\">\n        <b></b>\n        <p>${this.text || htmlSlot()}</p>\n      </div>\n    `;\n  }\n\n  focus() {\n    if (this.disabled) {\n      return;\n    }\n    this.active = true;\n  }\n\n  blur() {\n    this.active = false;\n  }\n\n  protected firstUpdated() {\n    this.addEvent(document, \"click\", this._handelClick.bind(this));\n  }\n\n  protected _handleModal(e: MouseEvent) {\n    const a = this._div.offsetHeight + 1;\n    const b = this._div.offsetWidth + 1;\n    const size = `${Math.sqrt(a * a + b * b) * 2}px`;\n    const translate = `translate(calc(-50% + ${e.offsetX}px), calc(-50% + ${e.offsetY}px))`;\n    this._b.style.width = size;\n    this._b.style.height = size;\n    this._b.style.transform = translate;\n    const i = document.createElement(\"i\");\n    i.style.animationName = \"i\";\n    this._b.appendChild(i);\n    setTimeout(() => {\n      i.remove();\n    }, 2000);\n  }\n\n  protected _handelClick(e: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n    if (e.target === this) {\n      this._handleModal(e);\n      this.focus();\n    } else {\n      this.blur();\n    }\n  }\n\n  /**\n   * Get the color to render, default is this.color.\n   *\n   * @returns New color.\n   *\n   * Colors can be set for different states.\n   *\n   * The matching selector is `[color=COLOR]`.\n   *\n   * @example\n   * ```ts\n   * button.adoptStyles(\"[color=COLOR1]{...}\")\n   * button.adoptStyles(\"[color=COLOR2]{...}\")\n   * button.nextColor = () => state ? COLOR1 : COLOR2\n   * ```\n   */\n  nextColor(): Colors | string {\n    return this.color;\n  }\n}\n\nexport default Button;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"base-button\": Button;\n    \"g-button\": Button;\n  }\n}\n"]}

package/web-components/{items/card-item.d.ts → card/card.d.ts}

@@ -1,10 +1,10 @@
-import { type CSSResultGroup } from "../../deps.js";
+import { type CSSResultGroup } from "../../.deps.js";
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../root.js";
+import { GodownElement } from "../../supers/root.js";
 /**
- * CardItem renders a card.
+ * {@linkcode Card} renders a card.
  */
-export declare class CardItem extends GodownElement {
+export declare class Card extends GodownElement {
     /**
      * Enable rotate.
      */
@@ -24,10 +24,11 @@ export declare class CardItem extends GodownElement {
      */
     protected _drawRotate(e: MouseEvent): void;
 }
-export default CardItem;
+export default Card;
 declare global {
     interface HTMLElementTagNameMap {
-        "card-item": CardItem;
+        "card-item": Card;
+        "g-card": Card;
     }
 }
-//# sourceMappingURL=card-item.d.ts.map
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +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"}

package/web-components/{items/card-item.js → card/card.js}

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../deps.js";
+import { css, html, property, query } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { ifValue } from "../../lib/directives.js";
 import { htmlSlot } from "../../lib/templates.js";
-import { createScope, cssvarValues, define, GodownElement } from "../../root.js";
-const defineName = "card-item";
+import { createScope, cssvarValues, GodownElement } from "../../supers/root.js";
+const defineName = "card";
 const cssvarScope = createScope(defineName);
 /**
- * CardItem renders a card.
+ * {@linkcode Card} renders a card.
  */
-let CardItem = class CardItem extends GodownElement {
+let Card = class Card extends GodownElement {
     constructor() {
         super(...arguments);
         /**
@@ -63,7 +64,7 @@ let CardItem = class CardItem extends GodownElement {
         this._main.style.transition = "none";
     }
 };
-CardItem.styles = [
+Card.styles = [
     GodownElement.styles,
     css `
       :host {
@@ -134,16 +135,16 @@ CardItem.styles = [
 ];
 __decorate([
     property({ type: Boolean })
-], CardItem.prototype, "rotate", void 0);
+], Card.prototype, "rotate", void 0);
 __decorate([
     query("main")
-], CardItem.prototype, "_main", void 0);
+], Card.prototype, "_main", void 0);
 __decorate([
     query("aside")
-], CardItem.prototype, "_aside", void 0);
-CardItem = __decorate([
+], Card.prototype, "_aside", void 0);
+Card = __decorate([
     define(defineName)
-], CardItem);
-export { CardItem };
-export default CardItem;
-//# sourceMappingURL=card-item.js.map
+], Card);
+export { Card };
+export default Card;
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +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"]}

package/web-components/carousel/{carousel-slider.d.ts → carousel.d.ts}

@@ -1,9 +1,9 @@
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../root.js";
+import { GodownElement } from "../../supers/root.js";
 /**
- * CarouselSlider rotates child elements.
+ * {@linkcode Carousel} rotates child elements.
  */
-export declare class CarouselSlider extends GodownElement {
+export declare class Carousel extends GodownElement {
     /**
      * The index of the element is displayed for the first time.
      */
@@ -29,10 +29,12 @@ export declare class CarouselSlider extends GodownElement {
     next(): void;
     prev(): void;
 }
-export default CarouselSlider;
+export default Carousel;
 declare global {
     interface HTMLElementTagNameMap {
-        "carousel-slider": CarouselSlider;
+        "carousel-slider": Carousel;
+        "rotation-pool": Carousel;
+        "g-carousel": Carousel;
     }
 }
-//# sourceMappingURL=carousel-slider.d.ts.map
+//# sourceMappingURL=carousel.d.ts.map

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

@@ -0,0 +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"}

package/web-components/carousel/{carousel-slider.js → carousel.js}

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../deps.js";
+import { css, html, property, query } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot, htmlStyle, svgArrow } from "../../lib/templates.js";
-import { define } from "../../root.js";
-import { GodownElement } from "../../root.js";
-const defineName = "carousel-slider";
+import { GodownElement } from "../../supers/root.js";
+const defineName = "carousel";
 /**
- * CarouselSlider rotates child elements.
+ * {@linkcode Carousel} rotates child elements.
  */
-let CarouselSlider = class CarouselSlider extends GodownElement {
+let Carousel = class Carousel extends GodownElement {
     constructor() {
         super(...arguments);
         /**
@@ -99,7 +99,7 @@ let CarouselSlider = class CarouselSlider extends GodownElement {
         }
     }
 };
-CarouselSlider.styles = [
+Carousel.styles = [
     css `
       :host {
         display: block;
@@ -171,19 +171,19 @@ CarouselSlider.styles = [
 ];
 __decorate([
     property({ type: Number })
-], CarouselSlider.prototype, "index", void 0);
+], Carousel.prototype, "index", void 0);
 __decorate([
     property({ type: Number })
-], CarouselSlider.prototype, "autochange", void 0);
+], Carousel.prototype, "autochange", void 0);
 __decorate([
     property()
-], CarouselSlider.prototype, "width", void 0);
+], Carousel.prototype, "width", void 0);
 __decorate([
     query("section")
-], CarouselSlider.prototype, "_section", void 0);
-CarouselSlider = __decorate([
+], Carousel.prototype, "_section", void 0);
+Carousel = __decorate([
     define(defineName)
-], CarouselSlider);
-export { CarouselSlider };
-export default CarouselSlider;
-//# sourceMappingURL=carousel-slider.js.map
+], Carousel);
+export { Carousel };
+export default Carousel;
+//# sourceMappingURL=carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/carousel/carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property, query } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate, svgArrow } from \"../../lib/templates.js\";\nimport { GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"carousel\";\n\n/**\n * {@linkcode Carousel} rotates child elements.\n */\n@define(defineName)\nexport class Carousel extends GodownElement {\n  /**\n   * The index of the element is displayed for the first time.\n   */\n  @property({ type: Number }) index = 0;\n  /**\n   * If autochangee > 0, the rotation will be automated.\n   */\n  @property({ type: Number }) autochange = 0;\n  /**\n   * Width.\n   */\n  @property() width = \"\";\n\n  @query(\"section\") _section: HTMLElement;\n  intervalID: number;\n  _clone: HTMLElement[] = [];\n\n  static styles = [\n    css`\n      :host {\n        display: block;\n        transition: all 0.2s;\n      }\n\n      div {\n        overflow: hidden;\n      }\n\n      div,\n      section {\n        width: 100%;\n        display: flex;\n        position: relative;\n        transition: inherit;\n      }\n\n      a {\n        position: absolute;\n        height: 100%;\n        width: fit-content;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n      }\n\n      .prev {\n        left: 0;\n      }\n\n      .prev svg {\n        transform: rotate(180deg);\n      }\n\n      .next {\n        right: 0;\n      }\n\n      i {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: 0.3s;\n        width: 2em;\n        height: 100%;\n      }\n\n      svg {\n        flex: 1;\n        max-height: 100%;\n        max-width: 100%;\n      }\n\n      a:hover i {\n        background-color: #0000001a;\n        width: 2.2em;\n      }\n\n      i svg path {\n        stroke-width: 4;\n      }\n\n      slot::slotted(*) {\n        flex-shrink: 0 !important;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    const style = this.width && `:host{width:${this.width.split(\";\")[0]};}`;\n    return html`<div>\n      <a class=\"prev\" @click=\"${this.prev}\">${this.renderA(\"pre\")}</a>\n      <section>${htmlSlot()}</section>\n      ${htmlStyle(style)}\n      <a class=\"next\" @click=\"${this.next}\">${this.renderA(\"suf\")}</a>\n    </div>`;\n  }\n\n  private renderA(slot: string): HTMLTemplate {\n    if (this.querySelector(`[slot=${slot}]`)) {\n      return htmlSlot(slot);\n    }\n    return html`<i>${svgArrow()}</i>`;\n  }\n\n  remount(index?: number) {\n    super.remount(undefined);\n    if (index !== undefined) {\n      this.show(index);\n    }\n  }\n\n  protected firstUpdated() {\n    if (this.assigned.length) {\n      if (!this.width) {\n        this.width = `${this.assigned[0].offsetWidth}px`;\n      }\n      if (this._clone.length) {\n        this._clone.forEach((element) => element.remove());\n        this._clone = [];\n      }\n      const last = this.assigned[0].cloneNode(true) as HTMLElement;\n      const first = this.assigned[this.assigned.length - 1].cloneNode(true) as HTMLElement;\n      first.style.marginLeft = \"-100%\";\n      this._clone.push(first, last);\n      this.appendChild(last);\n      this.insertBefore(first, this.firstElementChild);\n      this.show(this.index);\n    }\n    if (this.autochange) {\n      this.intervalID = setInterval(() => {\n        this.next();\n      }, this.autochange);\n    }\n  }\n\n  disconnectedCallback() {\n    clearInterval(this.intervalID);\n  }\n\n  show(i: number) {\n    this.index = i;\n    this._section.style.transform = `translateX(-${i}00%)`;\n    this._section.style.transition = \"inherit\";\n  }\n\n  next() {\n    if (this.index === this.assigned.length - 3) {\n      this._section.style.transform = `translateX(100%)`;\n      this._section.style.transition = \"none\";\n      this._section.getBoundingClientRect();\n      this.show(0);\n    } else {\n      this.show(this.index + 1);\n    }\n  }\n\n  prev() {\n    if (this.index === 0) {\n      this._section.style.transform = `translateX(-${this.assigned.length - 2}00%)`;\n      this._section.style.transition = `none`;\n      this._section.getBoundingClientRect();\n      this.show(this.assigned.length - 3);\n    } else {\n      this.show(this.index - 1);\n    }\n  }\n}\n\nexport default Carousel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"carousel-slider\": Carousel;\n    \"rotation-pool\": Carousel;\n    \"g-carousel\": Carousel;\n  }\n}\n"]}

package/web-components/{open/open-details.d.ts → details/details.d.ts}

@@ -1,10 +1,10 @@
-import { type CSSResultGroup } from "../../deps.js";
+import { type CSSResultGroup } from "../../.deps.js";
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { OpenableElement } from "./open.js";
+import { GodownOpenable } from "../../supers/openable.js";
 /**
- * OpenDetails similar to details.
+ * {@linkcode Details} similar to details.
  */
-export declare class OpenDetails extends OpenableElement {
+export declare class Details extends GodownOpenable {
     /**
      * If it is true, the summary event scope will fill the element.
      */
@@ -19,10 +19,11 @@ export declare class OpenDetails extends OpenableElement {
     private renderIcon;
     protected firstUpdated(): void;
 }
-export default OpenDetails;
+export default Details;
 declare global {
     interface HTMLElementTagNameMap {
-        "open-details": OpenDetails;
+        "open-details": Details;
+        "g-details": Details;
     }
 }
-//# sourceMappingURL=open-details.d.ts.map
+//# sourceMappingURL=details.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"details.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/details/details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,gBAAgB,CAAC;AAEjF,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAO1D;;GAEG;AACH,qBACa,OAAQ,SAAQ,cAAc;IACzC;;OAEG;IAC0B,IAAI,UAAS;IAC1C;;OAEG;IAC0B,OAAO,UAAS;IAEhC,GAAG,EAAE,mBAAmB,CAAC;IAEtC,MAAM,CAAC,MAAM,iBAoEO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAYhC,OAAO,CAAC,UAAU;IAOlB,SAAS,CAAC,YAAY;CAKvB;AAED,eAAe,OAAO,CAAC;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,OAAO,CAAC;QACxB,WAAW,EAAE,OAAO,CAAC;KACtB;CACF"}

package/web-components/{open/open-details.js → details/details.js}

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../deps.js";
+import { css, html, property, query } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot, svgDeltaSmooth } from "../../lib/templates.js";
-import { createScope, cssvarValues, define } from "../../root.js";
-import { OpenableElement } from "./open.js";
-const defineName = "open-details";
+import { GodownOpenable } from "../../supers/openable.js";
+import { createScope, cssvarValues } from "../../supers/root.js";
+const defineName = "details";
 const cssvarScope = createScope(defineName);
 /**
- * OpenDetails similar to details.
+ * {@linkcode Details} similar to details.
  */
-let OpenDetails = class OpenDetails extends OpenableElement {
+let Details = class Details extends GodownOpenable {
     constructor() {
         super(...arguments);
         /**
@@ -43,8 +44,8 @@ let OpenDetails = class OpenDetails extends OpenableElement {
         }
     }
 };
-OpenDetails.styles = [
-    OpenableElement.styles,
+Details.styles = [
+    GodownOpenable.styles,
     css `
       :host {
         color: var(${cssvarValues.text});
@@ -114,16 +115,16 @@ OpenDetails.styles = [
 ];
 __decorate([
     property({ type: Boolean })
-], OpenDetails.prototype, "fill", void 0);
+], Details.prototype, "fill", void 0);
 __decorate([
     property({ type: Boolean })
-], OpenDetails.prototype, "reverse", void 0);
+], Details.prototype, "reverse", void 0);
 __decorate([
     query("dd")
-], OpenDetails.prototype, "_dd", void 0);
-OpenDetails = __decorate([
+], Details.prototype, "_dd", void 0);
+Details = __decorate([
     define(defineName)
-], OpenDetails);
-export { OpenDetails };
-export default OpenDetails;
-//# sourceMappingURL=open-details.js.map
+], Details);
+export { Details };
+export default Details;
+//# sourceMappingURL=details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"details.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/details/details.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,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEjE,MAAM,UAAU,GAAG,SAAS,CAAC;AAE7B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,cAAc;IAApC;;QACL;;WAEG;QAC0B,SAAI,GAAG,KAAK,CAAC;QAC1C;;WAEG;QAC0B,YAAO,GAAG,KAAK,CAAC;IAkG/C,CAAC;IAxBW,MAAM;QACd,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,YAAY;iBACpB,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC;aACvC,IAAI,CAAC,UAAU,EAAE;;;mBAGX,QAAQ,EAAE;;UAEnB,CAAC;IACT,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE,CAAC;YAC1C,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC;QACD,OAAO,cAAc,EAAE,CAAC;IAC1B,CAAC;IAES,YAAY;QACpB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;;AA7FM,cAAM,GAAG;IACd,cAAc,CAAC,MAAM;IACrB,GAAG,CAAA;;qBAEc,YAAY,CAAC,IAAI;UAC5B,WAAW;UACX,WAAW;UACX,WAAW;;;;;;;;;;;;;;;;;;;;;8BAqBS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;gCAwBT,WAAW;;;;;;;;;;;;;gCAaX,WAAW;;KAEtC;CACgB,AApEN,CAoEO;AA5ES;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAAc;AAIb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAEhC;IAAZ,KAAK,CAAC,IAAI,CAAC;oCAA0B;AAV3B,OAAO;IADnB,MAAM,CAAC,UAAU,CAAC;GACN,OAAO,CA0GnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate, svgDeltaSmooth } from \"../../lib/templates.js\";\nimport { GodownOpenable } from \"../../supers/openable.js\";\nimport { createScope, cssvarValues } from \"../../supers/root.js\";\n\nconst defineName = \"details\";\n\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Details} similar to details.\n */\n@define(defineName)\nexport class Details extends GodownOpenable {\n  /**\n   * If it is true, the summary event scope will fill the element.\n   */\n  @property({ type: Boolean }) fill = false;\n  /**\n   * Reverse summary.\n   */\n  @property({ type: Boolean }) reverse = false;\n\n  @query(\"dd\") _dd: HTMLDataListElement;\n\n  static styles = [\n    GodownOpenable.styles,\n    css`\n      :host {\n        color: var(${cssvarValues.text});\n        ${cssvarScope}--icon-deg-open: -90deg;\n        ${cssvarScope}--icon-deg: 0deg;\n        ${cssvarScope}--summary-direction: row;\n      }\n      span {\n        display: inline-flex;\n        align-items: center;\n        white-space: nowrap;\n      }\n\n      dl {\n        height: 100%;\n        position: relative;\n        overflow: hidden;\n      }\n\n      dt {\n        display: flex;\n        flex-wrap: nowrap;\n        justify-content: space-between;\n        background: inherit;\n        align-items: center;\n        height: 100%;\n        flex-direction: var(${cssvarScope}--summary-direction);\n      }\n\n      dd {\n        overflow: hidden;\n        display: grid;\n        grid-template-rows: 0fr;\n      }\n\n      * {\n        transition: inherit;\n      }\n\n      section {\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      i {\n        height: 1em;\n        wdith: 1em;\n        display: flex;\n        -webkit-backface-visibility: hidden;\n        backface-visibility: hidden;\n        transform: rotate(var(${cssvarScope}--icon-deg));\n      }\n\n      :host([open]) dd {\n        grid-template-rows: 1fr;\n      }\n\n      :host([float]) dd {\n        top: 100%;\n        position: absolute;\n      }\n\n      :host([open]) i {\n        transform: rotate(var(${cssvarScope}--icon-deg-open));\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<dl>\n      <dt @click=\"${this._handelClick}\">\n        <span> ${this.summary || htmlSlot(\"summary\")} </span>\n        <i>${this.renderIcon()}</i>\n      </dt>\n      <dd>\n        <section>${htmlSlot()}</section>\n      </dd>\n    </dl>`;\n  }\n\n  private renderIcon(): HTMLTemplate {\n    if (this.querySelector(\"slot[name=icon]\")) {\n      return htmlSlot(\"icon\");\n    }\n    return svgDeltaSmooth();\n  }\n\n  protected firstUpdated() {\n    if (this.fill) {\n      this.addEvent(this._dd, \"click\", () => this.toggle());\n    }\n  }\n}\n\nexport default Details;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-details\": Details;\n    \"g-details\": Details;\n  }\n}\n"]}