godown 2.6.0 → 2.6.2

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

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { css, html, property, query } from "../../deps.js";
-import { ifValue } from "../../lib/directives.js";
 import { htmlSlot, svgDeltaSmooth } from "../../lib/templates.js";
-import { define } from "../../root.js";
+import { createScope, cssvarValues, define } from "../../root.js";
 import { OpenableElement } from "./open.js";
 const defineName = "open-details";
+const cssvarScope = createScope(defineName);
 /**
  * OpenDetails similar to details.
  */
@@ -20,29 +20,11 @@ let OpenDetails = class OpenDetails extends OpenableElement {
          */
         this.reverse = false;
     }
-    static { this.styles = [
-        OpenableElement.styles,
-        css `
-      i {
-        height: 1.2em;
-        min-width: 1.2em;
-        aspect-ratio: 1/1;
-        display: flex;
-        margin-left: auto;
-        -webkit-backface-visibility: hidden;
-        backface-visibility: hidden;
-      }
-
-      :host([open]) i {
-        transform: rotate(-90deg) !important;
-      }
-    `,
-    ]; }
     render() {
         return html `<dl>
-      <dt @click="${this._handelClick}" style="flex-direction:row${ifValue(this.reverse, "-reverse")}">
+      <dt @click="${this._handelClick}">
         <span> ${this.summary || htmlSlot("summary")} </span>
-        <i style="transform: rotate(${ifValue(this.reverse, "-18")}0deg);"> ${this.renderIcon()} </i>
+        <i>${this.renderIcon()}</i>
       </dt>
       <dd>
         <section>${htmlSlot()}</section>
@@ -61,6 +43,75 @@ let OpenDetails = class OpenDetails extends OpenableElement {
         }
     }
 };
+OpenDetails.styles = [
+    OpenableElement.styles,
+    css `
+      :host {
+        color: var(${cssvarValues.text});
+        ${cssvarScope}--icon-deg-open: -90deg;
+        ${cssvarScope}--icon-deg: 0deg;
+        ${cssvarScope}--summary-direction: row;
+      }
+      span {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+      }
+
+      dl {
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+
+      dt {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        background: inherit;
+        align-items: center;
+        height: 100%;
+        flex-direction: var(${cssvarScope}--summary-direction);
+      }
+
+      dd {
+        overflow: hidden;
+        display: grid;
+        grid-template-rows: 0fr;
+      }
+
+      * {
+        transition: inherit;
+      }
+
+      section {
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      i {
+        height: 1em;
+        wdith: 1em;
+        display: flex;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform: rotate(var(${cssvarScope}--icon-deg));
+      }
+
+      :host([open]) dd {
+        grid-template-rows: 1fr;
+      }
+
+      :host([float]) dd {
+        top: 100%;
+        position: absolute;
+      }
+
+      :host([open]) i {
+        transform: rotate(var(${cssvarScope}--icon-deg-open));
+      }
+    `,
+];
 __decorate([
     property({ type: Boolean })
 ], OpenDetails.prototype, "fill", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"open-details.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-details.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAqB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;QACL;;WAEG;QAC0B,SAAI,GAAG,KAAK,CAAC;QAC1C;;WAEG;QAC0B,YAAO,GAAG,KAAK,CAAC;IA+C/C,CAAC;aA3CQ,WAAM,GAAG;QACd,eAAe,CAAC,MAAM;QACtB,GAAG,CAAA;;;;;;;;;;;;;;KAcF;KACgB,AAjBN,CAiBO;IAEV,MAAM;QACd,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,YAAY,8BAA8B,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC;iBACnF,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC;sCACd,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE;;;mBAG5E,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;;AAlD4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAc;AAIb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAiB;AAEhC;IAAZ,KAAK,CAAC,IAAI,CAAC;wCAA0B;AAV3B,WAAW;IADvB,MAAM,CAAC,UAAU,CAAC;GACN,WAAW,CAuDvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot, type HTMLTemplate, svgDeltaSmooth } from \"../../lib/templates.js\";\nimport { define } from \"../../root.js\";\nimport { OpenableElement } from \"./open.js\";\n\nconst defineName = \"open-details\";\n\n/**\n * OpenDetails similar to details.\n */\n@define(defineName)\nexport class OpenDetails extends OpenableElement {\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    OpenableElement.styles,\n    css`\n      i {\n        height: 1.2em;\n        min-width: 1.2em;\n        aspect-ratio: 1/1;\n        display: flex;\n        margin-left: auto;\n        -webkit-backface-visibility: hidden;\n        backface-visibility: hidden;\n      }\n\n      :host([open]) i {\n        transform: rotate(-90deg) !important;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<dl>\n      <dt @click=\"${this._handelClick}\" style=\"flex-direction:row${ifValue(this.reverse, \"-reverse\")}\">\n        <span> ${this.summary || htmlSlot(\"summary\")} </span>\n        <i style=\"transform: rotate(${ifValue(this.reverse, \"-18\")}0deg);\"> ${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 OpenDetails;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-details\": OpenDetails;\n  }\n}\n"]}
+{"version":3,"file":"open-details.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-details.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAqB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;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,kBAAM,GAAG;IACd,eAAe,CAAC,MAAM;IACtB,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;yCAAc;AAIb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAiB;AAEhC;IAAZ,KAAK,CAAC,IAAI,CAAC;wCAA0B;AAV3B,WAAW;IADvB,MAAM,CAAC,UAAU,CAAC;GACN,WAAW,CA0GvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate, svgDeltaSmooth } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define } from \"../../root.js\";\nimport { OpenableElement } from \"./open.js\";\n\nconst defineName = \"open-details\";\n\nconst cssvarScope = createScope(defineName);\n\n/**\n * OpenDetails similar to details.\n */\n@define(defineName)\nexport class OpenDetails extends OpenableElement {\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    OpenableElement.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 OpenDetails;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-details\": OpenDetails;\n  }\n}\n"]}

package/web-components/open/open-dialog.d.ts

@@ -1,19 +1,15 @@
-import { type PropertyValueMap } from "../../deps.js";
+import { CSSResultGroup } from "../../deps.js";
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../root.js";
-type Direction5 = "left" | "center" | "right" | "top" | "bottom";
+import OpenableElement, { Direction9 } from "./open.js";
 /**
  * OpenDialog similar to dialog.
  */
-export declare class OpenDialog extends GodownElement {
+export declare class OpenDialog extends OpenableElement {
+    direction: Direction9;
     /**
      * Enable modal.
      */
     modal: boolean;
-    /**
-     * Whether this element is activated.
-     */
-    open: boolean;
     /**
      * Enable scale.
      */
@@ -26,18 +22,11 @@ export declare class OpenDialog extends GodownElement {
      * Exit key, which can be multiple.
      */
     key: string;
-    /**
-     * The direction in which it appears.
-     */
-    direction: Direction5;
     _div: HTMLDivElement;
-    static styles: import("lit").CSSResult[];
+    static styles: CSSResultGroup;
     protected render(): HTMLTemplate;
     connectedCallback(): void;
-    show(): void;
     showModal(): void;
-    close(): void;
-    protected updated(changedProperties: PropertyValueMap<this>): void;
     protected _handleWheel(e: any): void;
     protected _handleKeydown(e: KeyboardEvent): void;
     protected _handelSubmit(e: SubmitEvent): void;

package/web-components/open/open-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"open-dialog.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,gBAAgB,EAAS,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAwB,aAAa,EAAE,MAAM,eAAe,CAAC;AAEpE,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAIjE;;GAEG;AACH,qBACa,UAAW,SAAQ,aAAa;IAC3C;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IACyC,IAAI,UAAS;IACzD;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,GAAG,SAAY;IAC3C;;OAEG;IACyB,SAAS,EAAE,UAAU,CAAY;IAE/C,IAAI,EAAE,cAAc,CAAC;IAEnC,MAAM,CAAC,MAAM,4BA6EX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAMhC,iBAAiB;IAcjB,IAAI;IAIJ,SAAS;IAKT,KAAK;IAIL,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAO3D,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG;IAgB7B,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAOzC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,WAAW;CAKvC;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"open-dialog.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAyB,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,eAAe,EAAE,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIxD;;GAEG;AACH,qBACa,UAAW,SAAQ,eAAe;IAC7C,SAAS,EAAE,UAAU,CAAY;IACjC;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,GAAG,SAAY;IAE7B,IAAI,EAAE,cAAc,CAAC;IAEnC,MAAM,CAAC,MAAM,EAAE,cAAc,CAkG3B;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAIhC,iBAAiB;IAcjB,SAAS;IAKT,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG;IAU7B,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAOzC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,WAAW;CAKvC;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/web-components/open/open-dialog.js

@@ -1,21 +1,20 @@
 import { __decorate } from "tslib";
 import { css, html, property, query } from "../../deps.js";
-import { cssvarValues, define, GodownElement } from "../../root.js";
+import { htmlSlot } from "../../lib/templates.js";
+import { cssvar, cssvarValues, define } from "../../root.js";
+import OpenableElement from "./open.js";
 const defineName = "open-dialog";
 /**
  * OpenDialog similar to dialog.
  */
-let OpenDialog = class OpenDialog extends GodownElement {
+let OpenDialog = class OpenDialog extends OpenableElement {
     constructor() {
         super(...arguments);
+        this.direction = "center";
         /**
          * Enable modal.
          */
         this.modal = false;
-        /**
-         * Whether this element is activated.
-         */
-        this.open = false;
         /**
          * Enable scale.
          */
@@ -23,19 +22,70 @@ let OpenDialog = class OpenDialog extends GodownElement {
         /**
          * Scale gap.
          */
-        this.gap = 0.1;
+        this.gap = 0.2;
         /**
          * Exit key, which can be multiple.
          */
         this.key = "Escape";
-        /**
-         * The direction in which it appears.
-         */
-        this.direction = "center";
     }
-    static { this.styles = [
-        css `
+    render() {
+        return html `<div style="--s:1" class="${this.direction}">${htmlSlot()}</div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEvent(this, "submit", this._handelSubmit);
+        if (this.scale && this.direction === "center") {
+            this.addEvent(this, "wheel", this._handleWheel);
+        }
+        if (this.key) {
+            this.addEvent(document, "keydown", this._handleKeydown.bind(this));
+        }
+        if (this.open) {
+            this.show();
+        }
+    }
+    showModal() {
+        this.modal = true;
+        this.show();
+    }
+    _handleWheel(e) {
+        let scale = Number(this._div.style.getPropertyValue("--s"));
+        if (e.deltaY > 0) {
+            scale -= this.gap;
+        }
+        else {
+            scale += this.gap;
+        }
+        this._div.style.setProperty("--s", `${scale}`);
+    }
+    _handleKeydown(e) {
+        const keys = this.key.split(/[^a-zA-Z0-9]/).filter((s) => s);
+        if (keys.includes(e.key) || keys.includes(e.code)) {
+            this.close();
+        }
+    }
+    _handelSubmit(e) {
+        if (e.target.method === "dialog") {
+            this.close();
+        }
+    }
+};
+OpenDialog.styles = [
+    OpenableElement.styles,
+    css `
+      :host {
+        display: block;
+        transition:
+          all 0.3s ease-in-out,
+          color 0s,
+          background 0s;
+        height: fit-content;
+      }
+    `,
+    css `
       :host {
+        ${cssvar}--background: rgb(var(${cssvarValues.mainRGB}) / 0%);
+        ${cssvar}--background-modal: rgb(var(${cssvarValues.mainRGB}) / 15%);
         position: fixed;
         height: 100%;
         width: 100%;
@@ -46,7 +96,7 @@ let OpenDialog = class OpenDialog extends GodownElement {
         transition: all 0.3s;
         display: flex;
         visibility: hidden;
-        background: rgb(${cssvarValues.mainRGB} / 0%);
+        background: var(${cssvar}--background);
         pointer-events: none;
       }
 
@@ -57,7 +107,7 @@ let OpenDialog = class OpenDialog extends GodownElement {
       :host([open][modal]) {
         pointer-events: all;
         backdrop-filter: blur(0.25px);
-        background: rgb(${cssvarValues.mainRGB} / 20%);
+        background: var(${cssvar}--background-modal);
       }
 
       :host([open]) slot {
@@ -70,6 +120,7 @@ let OpenDialog = class OpenDialog extends GodownElement {
         width: 100%;
         display: flex;
         transition: inherit;
+        transform: scale(var(--s));
       }
 
       slot {
@@ -82,103 +133,45 @@ let OpenDialog = class OpenDialog extends GodownElement {
         pointer-events: all;
       }
 
-      .center {
-        transform: translateY(-15%);
+      div {
+        position: relative;
       }
 
-      .top {
-        width: 100%;
-        margin-top: 0;
-        transform: translateY(-15%);
+      slot {
+        position: absolute;
       }
 
-      .right {
-        height: 100%;
-        margin-right: 0;
-        transform: translateX(15%);
+      [class^="top"] slot {
+        top: 0;
       }
 
-      .bottom {
-        width: 100%;
-        margin-bottom: 0;
-        transform: translateY(15%);
+      [class^="bottom"] slot {
+        bottom: 0;
       }
 
-      .left {
-        height: 100%;
-        margin-left: 0;
-        transform: translateX(-15%);
+      [class$="right"] slot {
+        right: 0%;
+      }
+
+      [class$="left"] slot {
+        left: 0%;
+      }
+
+      div[class$="center"],
+      .top,
+      .left,
+      .right,
+      .bottom {
+        align-items: center;
+        justify-content: center;
+        align-items: center;
+        justify-content: center;
       }
     `,
-    ]; }
-    render() {
-        return html `<div>
-      <slot class="${this.direction}"></slot>
-    </div>`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEvent(this, "submit", this._handelSubmit);
-        if (this.scale) {
-            this.addEvent(this, "wheel", this._handleWheel);
-        }
-        if (this.key) {
-            this.addEvent(document, "keydown", this._handleKeydown.bind(this));
-        }
-        if (this.open) {
-            this.show();
-        }
-    }
-    show() {
-        this.open = true;
-    }
-    showModal() {
-        this.modal = true;
-        this.show();
-    }
-    close() {
-        this.open = false;
-    }
-    updated(changedProperties) {
-        const hasOpen = changedProperties.has("open");
-        if (hasOpen) {
-            this.dispatchEvent(new CustomEvent(this.open ? "open" : "close"));
-        }
-    }
-    _handleWheel(e) {
-        if (this.scale) {
-            const s = this._div.style.transform.match(/scale\((.*)\)/);
-            let scale = 1;
-            if (s) {
-                scale = Number(s[1]);
-            }
-            if (e.deltaY > 0) {
-                scale -= this.gap;
-            }
-            else {
-                scale += this.gap;
-            }
-            this._div.style.transform = `scale(${scale})`;
-        }
-    }
-    _handleKeydown(e) {
-        const keys = this.key.split(/[^a-zA-Z0-9]/).filter((s) => s);
-        if (keys.includes(e.key) || keys.includes(e.code)) {
-            this.close();
-        }
-    }
-    _handelSubmit(e) {
-        if (e.target.method === "dialog") {
-            this.close();
-        }
-    }
-};
+];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], OpenDialog.prototype, "modal", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], OpenDialog.prototype, "open", void 0);
 __decorate([
     property({ type: Boolean })
 ], OpenDialog.prototype, "scale", void 0);
@@ -188,9 +181,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OpenDialog.prototype, "key", void 0);
-__decorate([
-    property({ type: String })
-], OpenDialog.prototype, "direction", void 0);
 __decorate([
     query("div")
 ], OpenDialog.prototype, "_div", void 0);

package/web-components/open/open-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"open-dialog.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property, type PropertyValueMap, query } from \"../../deps.js\";\nimport { type HTMLTemplate } from \"../../lib/templates.js\";\nimport { cssvarValues, define, GodownElement } from \"../../root.js\";\n\ntype Direction5 = \"left\" | \"center\" | \"right\" | \"top\" | \"bottom\";\n\nconst defineName = \"open-dialog\";\n\n/**\n * OpenDialog similar to dialog.\n */\n@define(defineName)\nexport class OpenDialog extends GodownElement {\n  /**\n   * Enable modal.\n   */\n  @property({ type: Boolean, reflect: true }) modal = false;\n  /**\n   * Whether this element is activated.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /**\n   * Enable scale.\n   */\n  @property({ type: Boolean }) scale = false;\n  /**\n   * Scale gap.\n   */\n  @property({ type: Number }) gap = 0.1;\n  /**\n   * Exit key, which can be multiple.\n   */\n  @property({ type: String }) key = \"Escape\";\n  /**\n   * The direction in which it appears.\n   */\n  @property({ type: String }) direction: Direction5 = \"center\";\n\n  @query(\"div\") _div: HTMLDivElement;\n\n  static styles = [\n    css`\n      :host {\n        position: fixed;\n        height: 100%;\n        width: 100%;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        transition: all 0.3s;\n        display: flex;\n        visibility: hidden;\n        background: rgb(${cssvarValues.mainRGB} / 0%);\n        pointer-events: none;\n      }\n\n      :host([open]) {\n        visibility: visible;\n      }\n\n      :host([open][modal]) {\n        pointer-events: all;\n        backdrop-filter: blur(0.25px);\n        background: rgb(${cssvarValues.mainRGB} / 20%);\n      }\n\n      :host([open]) slot {\n        opacity: 1 !important;\n        transform: translateY(0) translateX(0) !important;\n      }\n\n      div {\n        height: 100%;\n        width: 100%;\n        display: flex;\n        transition: inherit;\n      }\n\n      slot {\n        display: block;\n        width: fit-content;\n        height: fit-content;\n        margin: auto;\n        opacity: 0;\n        transition: inherit;\n        pointer-events: all;\n      }\n\n      .center {\n        transform: translateY(-15%);\n      }\n\n      .top {\n        width: 100%;\n        margin-top: 0;\n        transform: translateY(-15%);\n      }\n\n      .right {\n        height: 100%;\n        margin-right: 0;\n        transform: translateX(15%);\n      }\n\n      .bottom {\n        width: 100%;\n        margin-bottom: 0;\n        transform: translateY(15%);\n      }\n\n      .left {\n        height: 100%;\n        margin-left: 0;\n        transform: translateX(-15%);\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`<div>\n      <slot class=\"${this.direction}\"></slot>\n    </div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEvent(this, \"submit\", this._handelSubmit);\n    if (this.scale) {\n      this.addEvent(this, \"wheel\", this._handleWheel);\n    }\n    if (this.key) {\n      this.addEvent(document, \"keydown\", this._handleKeydown.bind(this));\n    }\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  show() {\n    this.open = true;\n  }\n\n  showModal() {\n    this.modal = true;\n    this.show();\n  }\n\n  close() {\n    this.open = false;\n  }\n\n  protected updated(changedProperties: PropertyValueMap<this>) {\n    const hasOpen = changedProperties.has(\"open\");\n    if (hasOpen) {\n      this.dispatchEvent(new CustomEvent(this.open ? \"open\" : \"close\"));\n    }\n  }\n\n  protected _handleWheel(e: any) {\n    if (this.scale) {\n      const s = this._div.style.transform.match(/scale\\((.*)\\)/);\n      let scale = 1;\n      if (s) {\n        scale = Number(s[1]);\n      }\n      if (e.deltaY > 0) {\n        scale -= this.gap;\n      } else {\n        scale += this.gap;\n      }\n      this._div.style.transform = `scale(${scale})`;\n    }\n  }\n\n  protected _handleKeydown(e: KeyboardEvent) {\n    const keys = this.key.split(/[^a-zA-Z0-9]/).filter((s) => s);\n    if (keys.includes(e.key) || keys.includes(e.code)) {\n      this.close();\n    }\n  }\n\n  protected _handelSubmit(e: SubmitEvent) {\n    if ((e.target as HTMLFormElement).method === \"dialog\") {\n      this.close();\n    }\n  }\n}\n\nexport default OpenDialog;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-dialog\": OpenDialog;\n  }\n}\n"]}
+{"version":3,"file":"open-dialog.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { cssvar, cssvarValues, define } from \"../../root.js\";\nimport OpenableElement, { Direction9 } from \"./open.js\";\n\nconst defineName = \"open-dialog\";\n\n/**\n * OpenDialog similar to dialog.\n */\n@define(defineName)\nexport class OpenDialog extends OpenableElement {\n  direction: Direction9 = \"center\";\n  /**\n   * Enable modal.\n   */\n  @property({ type: Boolean, reflect: true }) modal = false;\n  /**\n   * Enable scale.\n   */\n  @property({ type: Boolean }) scale = false;\n  /**\n   * Scale gap.\n   */\n  @property({ type: Number }) gap = 0.2;\n  /**\n   * Exit key, which can be multiple.\n   */\n  @property({ type: String }) key = \"Escape\";\n\n  @query(\"div\") _div: HTMLDivElement;\n\n  static styles: CSSResultGroup = [\n    OpenableElement.styles,\n    css`\n      :host {\n        display: block;\n        transition:\n          all 0.3s ease-in-out,\n          color 0s,\n          background 0s;\n        height: fit-content;\n      }\n    `,\n    css`\n      :host {\n        ${cssvar}--background: rgb(var(${cssvarValues.mainRGB}) / 0%);\n        ${cssvar}--background-modal: rgb(var(${cssvarValues.mainRGB}) / 15%);\n        position: fixed;\n        height: 100%;\n        width: 100%;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        transition: all 0.3s;\n        display: flex;\n        visibility: hidden;\n        background: var(${cssvar}--background);\n        pointer-events: none;\n      }\n\n      :host([open]) {\n        visibility: visible;\n      }\n\n      :host([open][modal]) {\n        pointer-events: all;\n        backdrop-filter: blur(0.25px);\n        background: var(${cssvar}--background-modal);\n      }\n\n      :host([open]) slot {\n        opacity: 1 !important;\n        transform: translateY(0) translateX(0) !important;\n      }\n\n      div {\n        height: 100%;\n        width: 100%;\n        display: flex;\n        transition: inherit;\n        transform: scale(var(--s));\n      }\n\n      slot {\n        display: block;\n        width: fit-content;\n        height: fit-content;\n        margin: auto;\n        opacity: 0;\n        transition: inherit;\n        pointer-events: all;\n      }\n\n      div {\n        position: relative;\n      }\n\n      slot {\n        position: absolute;\n      }\n\n      [class^=\"top\"] slot {\n        top: 0;\n      }\n\n      [class^=\"bottom\"] slot {\n        bottom: 0;\n      }\n\n      [class$=\"right\"] slot {\n        right: 0%;\n      }\n\n      [class$=\"left\"] slot {\n        left: 0%;\n      }\n\n      div[class$=\"center\"],\n      .top,\n      .left,\n      .right,\n      .bottom {\n        align-items: center;\n        justify-content: center;\n        align-items: center;\n        justify-content: center;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`<div style=\"--s:1\" class=\"${this.direction}\">${htmlSlot()}</div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEvent(this, \"submit\", this._handelSubmit);\n    if (this.scale && this.direction === \"center\") {\n      this.addEvent(this, \"wheel\", this._handleWheel);\n    }\n    if (this.key) {\n      this.addEvent(document, \"keydown\", this._handleKeydown.bind(this));\n    }\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  showModal() {\n    this.modal = true;\n    this.show();\n  }\n\n  protected _handleWheel(e: any) {\n    let scale = Number(this._div.style.getPropertyValue(\"--s\"));\n    if (e.deltaY > 0) {\n      scale -= this.gap;\n    } else {\n      scale += this.gap;\n    }\n    this._div.style.setProperty(\"--s\", `${scale}`);\n  }\n\n  protected _handleKeydown(e: KeyboardEvent) {\n    const keys = this.key.split(/[^a-zA-Z0-9]/).filter((s) => s);\n    if (keys.includes(e.key) || keys.includes(e.code)) {\n      this.close();\n    }\n  }\n\n  protected _handelSubmit(e: SubmitEvent) {\n    if ((e.target as HTMLFormElement).method === \"dialog\") {\n      this.close();\n    }\n  }\n}\n\nexport default OpenDialog;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-dialog\": OpenDialog;\n  }\n}\n"]}

package/web-components/open/open-offset.d.ts

@@ -8,7 +8,6 @@ import { type Direction4, OpenableElement } from "./open.js";
  */
 export declare class OpenOffset extends OpenableElement {
     direction: Direction4;
-    private _span;
     private _balancer;
     static styles: CSSResultGroup;
     protected render(): HTMLTemplate;

package/web-components/open/open-offset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"open-offset.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-offset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAe,MAAM,eAAe,CAAC;AACtE,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGrE,OAAO,EAAE,KAAK,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI7D;;;;GAIG;AACH,qBACa,UAAW,SAAQ,eAAe;IAC7C,SAAS,EAAE,UAAU,CAAC;IAEP,OAAO,CAAC,KAAK,CAAc;IAC1B,OAAO,CAAC,SAAS,CAAc;IAE/C,MAAM,CAAC,MAAM,iBAiDO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAOhC,iBAAiB;cAKD,YAAY;IAM5B,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAQpC,SAAS,CAAC,aAAa;IAKvB,MAAM;CA2BP;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"open-offset.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-offset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAe,MAAM,eAAe,CAAC;AACtE,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGrE,OAAO,EAAE,KAAK,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI7D;;;;GAIG;AACH,qBACa,UAAW,SAAQ,eAAe;IAC7C,SAAS,EAAE,UAAU,CAAC;IAEN,OAAO,CAAC,SAAS,CAAc;IAE/C,MAAM,CAAC,MAAM,iBAiDO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAOhC,iBAAiB;cAKD,YAAY;IAM5B,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAQpC,SAAS,CAAC,aAAa;IAKvB,MAAM;CA2BP;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/web-components/open/open-offset.js

@@ -11,56 +11,6 @@ const defineName = "open-offset";
  * Content can be opened in 4 directions.
  */
 let OpenOffset = class OpenOffset extends OpenableElement {
-    static { this.styles = [
-        css `
-      :host {
-        display: block;
-        height: fit-content;
-        width: fit-content;
-      }
-
-      span {
-        user-select: none;
-      }
-
-      main {
-        height: inherit;
-        width: inherit;
-        display: flex;
-        position: relative;
-        align-items: center;
-      }
-
-      aside {
-        background-color: inherit;
-        visibility: hidden;
-        top: 100%;
-        z-index: 1;
-      }
-
-      :host([open]) aside {
-        visibility: visible;
-      }
-
-      :host([float]) aside {
-        position: absolute;
-      }
-    `,
-        css `
-      .left {
-        flex-direction: row-reverse;
-      }
-      .right {
-        flex-direction: row;
-      }
-      .top {
-        flex-direction: column-reverse;
-      }
-      .bottom {
-        flex-direction: column;
-      }
-    `,
-    ]; }
     render() {
         return html `<main class="${this.direction || "bottom"}">
       <span>${this.summary || htmlSlot("summary")}</span>
@@ -119,9 +69,56 @@ let OpenOffset = class OpenOffset extends OpenableElement {
         }
     }
 };
-__decorate([
-    query("span")
-], OpenOffset.prototype, "_span", void 0);
+OpenOffset.styles = [
+    css `
+      :host {
+        display: block;
+        height: fit-content;
+        width: fit-content;
+      }
+
+      span {
+        user-select: none;
+      }
+
+      main {
+        height: inherit;
+        width: inherit;
+        display: flex;
+        position: relative;
+        align-items: center;
+      }
+
+      aside {
+        background-color: inherit;
+        visibility: hidden;
+        top: 100%;
+        z-index: 1;
+      }
+
+      :host([open]) aside {
+        visibility: visible;
+      }
+
+      :host([float]) aside {
+        position: absolute;
+      }
+    `,
+    css `
+      .left {
+        flex-direction: row-reverse;
+      }
+      .right {
+        flex-direction: row;
+      }
+      .top {
+        flex-direction: column-reverse;
+      }
+      .bottom {
+        flex-direction: column;
+      }
+    `,
+];
 __decorate([
     query("aside")
 ], OpenOffset.prototype, "_balancer", void 0);

package/web-components/open/open-offset.js.map

@@ -1 +1 @@
-{"version":3,"file":"open-offset.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-offset.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { debounce } from \"../../lib/utils.js\";\nimport { define } from \"../../root.js\";\nimport { type Direction4, OpenableElement } from \"./open.js\";\n\nconst defineName = \"open-offset\";\n\n/**\n * OpenOffset will calculate a lateral offset to try to keep the content within the allowable range.\n *\n * Content can be opened in 4 directions.\n */\n@define(defineName)\nexport class OpenOffset extends OpenableElement {\n  direction: Direction4;\n\n  @query(\"span\") private _span: HTMLElement;\n  @query(\"aside\") private _balancer: HTMLElement;\n\n  static styles = [\n    css`\n      :host {\n        display: block;\n        height: fit-content;\n        width: fit-content;\n      }\n\n      span {\n        user-select: none;\n      }\n\n      main {\n        height: inherit;\n        width: inherit;\n        display: flex;\n        position: relative;\n        align-items: center;\n      }\n\n      aside {\n        background-color: inherit;\n        visibility: hidden;\n        top: 100%;\n        z-index: 1;\n      }\n\n      :host([open]) aside {\n        visibility: visible;\n      }\n\n      :host([float]) aside {\n        position: absolute;\n      }\n    `,\n    css`\n      .left {\n        flex-direction: row-reverse;\n      }\n      .right {\n        flex-direction: row;\n      }\n      .top {\n        flex-direction: column-reverse;\n      }\n      .bottom {\n        flex-direction: column;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<main class=\"${this.direction || \"bottom\"}\">\n      <span>${this.summary || htmlSlot(\"summary\")}</span>\n      <aside>${htmlSlot()}</aside>\n    </main>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEvent(window, \"resize\", debounce(this._handelResize.bind(this), 500));\n  }\n\n  protected async firstUpdated() {\n    await this.updateComplete;\n    this.addEvent(document, \"click\", this._handelClick.bind(this));\n    this.resize();\n  }\n\n  protected _handelClick(e: MouseEvent) {\n    if (e.target === this) {\n      this.show();\n    } else if (!this.contains(e.target as HTMLElement)) {\n      this.close();\n    }\n  }\n\n  protected _handelResize() {\n    this._balancer.style.transform = \"none\";\n    this.resize();\n  }\n\n  resize() {\n    if (!this._balancer) {\n      return;\n    }\n    const offsets = this.offsetParent?.getBoundingClientRect() || document.body.getBoundingClientRect();\n    const { left, right, top, bottom, height } = this._balancer.getBoundingClientRect();\n    if (this.direction === \"left\" || this.direction === \"right\") {\n      if (top < offsets.y) {\n        const topTranslate = -top;\n        this._balancer.style.transform = `translateY(${topTranslate}px)`;\n      }\n      if (bottom > offsets.bottom) {\n        const bottomTranslate = offsets.height - (top + height);\n        this._balancer.style.transform = `translateY(${bottomTranslate}px)`;\n      }\n    } else {\n      if (right > offsets.right) {\n        const rightTranslate = offsets.width - (right - offsets.x);\n        this._balancer.style.transform = `translateX(${rightTranslate}px)`;\n      } else if (left < 0) {\n        const leftTranslate = -left;\n        this._balancer.style.transform = `translateX(${leftTranslate}px)`;\n      } else {\n        this._balancer.style.transform = \"\";\n      }\n    }\n  }\n}\n\nexport default OpenOffset;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-offset\": OpenOffset;\n  }\n}\n"]}
+{"version":3,"file":"open-offset.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-offset.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { debounce } from \"../../lib/utils.js\";\nimport { define } from \"../../root.js\";\nimport { type Direction4, OpenableElement } from \"./open.js\";\n\nconst defineName = \"open-offset\";\n\n/**\n * OpenOffset will calculate a lateral offset to try to keep the content within the allowable range.\n *\n * Content can be opened in 4 directions.\n */\n@define(defineName)\nexport class OpenOffset extends OpenableElement {\n  direction: Direction4;\n\n  @query(\"aside\") private _balancer: HTMLElement;\n\n  static styles = [\n    css`\n      :host {\n        display: block;\n        height: fit-content;\n        width: fit-content;\n      }\n\n      span {\n        user-select: none;\n      }\n\n      main {\n        height: inherit;\n        width: inherit;\n        display: flex;\n        position: relative;\n        align-items: center;\n      }\n\n      aside {\n        background-color: inherit;\n        visibility: hidden;\n        top: 100%;\n        z-index: 1;\n      }\n\n      :host([open]) aside {\n        visibility: visible;\n      }\n\n      :host([float]) aside {\n        position: absolute;\n      }\n    `,\n    css`\n      .left {\n        flex-direction: row-reverse;\n      }\n      .right {\n        flex-direction: row;\n      }\n      .top {\n        flex-direction: column-reverse;\n      }\n      .bottom {\n        flex-direction: column;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<main class=\"${this.direction || \"bottom\"}\">\n      <span>${this.summary || htmlSlot(\"summary\")}</span>\n      <aside>${htmlSlot()}</aside>\n    </main>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEvent(window, \"resize\", debounce(this._handelResize.bind(this), 500));\n  }\n\n  protected async firstUpdated() {\n    await this.updateComplete;\n    this.addEvent(document, \"click\", this._handelClick.bind(this));\n    this.resize();\n  }\n\n  protected _handelClick(e: MouseEvent) {\n    if (e.target === this) {\n      this.show();\n    } else if (!this.contains(e.target as HTMLElement)) {\n      this.close();\n    }\n  }\n\n  protected _handelResize() {\n    this._balancer.style.transform = \"none\";\n    this.resize();\n  }\n\n  resize() {\n    if (!this._balancer) {\n      return;\n    }\n    const offsets = this.offsetParent?.getBoundingClientRect() || document.body.getBoundingClientRect();\n    const { left, right, top, bottom, height } = this._balancer.getBoundingClientRect();\n    if (this.direction === \"left\" || this.direction === \"right\") {\n      if (top < offsets.y) {\n        const topTranslate = -top;\n        this._balancer.style.transform = `translateY(${topTranslate}px)`;\n      }\n      if (bottom > offsets.bottom) {\n        const bottomTranslate = offsets.height - (top + height);\n        this._balancer.style.transform = `translateY(${bottomTranslate}px)`;\n      }\n    } else {\n      if (right > offsets.right) {\n        const rightTranslate = offsets.width - (right - offsets.x);\n        this._balancer.style.transform = `translateX(${rightTranslate}px)`;\n      } else if (left < 0) {\n        const leftTranslate = -left;\n        this._balancer.style.transform = `translateX(${leftTranslate}px)`;\n      } else {\n        this._balancer.style.transform = \"\";\n      }\n    }\n  }\n}\n\nexport default OpenOffset;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-offset\": OpenOffset;\n  }\n}\n"]}