godown 2.7.7 → 3.0.0-canary.1

package/dev/components/details.js

@@ -0,0 +1,115 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { scopePrefix } from "../core/global-style.js";
+import SuperOpenable from "../core/super-openable.js";
+const protoName = "details";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Details} similar to <details>.
+ *
+ * @category display
+ */
+let Details = class Details extends SuperOpenable {
+    constructor() {
+        super(...arguments);
+        /**
+         * If it is true, the summary event scope will fill the element.
+         */
+        this.fill = false;
+        /**
+         * Summary text.
+         */
+        this.summary = "";
+    }
+    render() {
+        return html `<dl part="root">
+      <dt part="title" @click="${this._handelClick}">
+        <span part="summary">${this.summary || htmlSlot("summary")} </span>
+        <span><i part="icon">${svgCaretDown()}</i></span>
+      </dt>
+      <dd part="details" @click=${this.fill ? () => this.toggle() : null}>
+        <div style="min-height: 0;">${htmlSlot()}</div>
+      </dd>
+    </dl>`;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], Details.prototype, "fill", void 0);
+__decorate([
+    property()
+], Details.prototype, "summary", void 0);
+__decorate([
+    query("dd")
+], Details.prototype, "_dd", void 0);
+Details = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}--icon-deg-open: 0deg;
+      ${cssScope}--icon-deg-close: 90deg;
+      ${cssScope}--icon-deg: 0deg;
+      ${cssScope}--icon-space: 0.3em;
+      ${cssScope}--summary-direction: row;
+      ${cssScope}--transition: .3s;
+      height: fit-content;
+      display: block;
+      transition: var(${cssScope}--transition);
+    }
+
+    dl {
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+
+    dt {
+      height: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      background: inherit;
+      align-items: center;
+      flex-direction: var(${cssScope}--summary-direction);
+    }
+
+    dd {
+      display: grid;
+      overflow: hidden;
+      grid-template-rows: 0fr;
+      transition: var(${cssScope}--transition);
+      transition-property: grid-template-rows;
+    }
+
+    i {
+      display: flex;
+      backface-visibility: hidden;
+      padding: var(${cssScope}--icon-space);
+      transition: var(${cssScope}--transition);
+      transform: rotate(var(${cssScope}--icon-deg));
+    }
+
+    :host([open]) dd {
+      grid-template-rows: 1fr;
+    }
+
+    :host([float]) dd {
+      top: 100%;
+      position: absolute;
+    }
+
+    i {
+      transform: rotate(var(${cssScope}--icon-deg-close));
+    }
+    :host([open]) i {
+      transform: rotate(var(${cssScope}--icon-deg-open));
+    }
+  `)
+], Details);
+export default Details;
+//# sourceMappingURL=details.js.map

package/dev/components/details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.js","sourceRoot":"","sources":["../../src/components/details.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,YAAY,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,aAAa,MAAM,2BAA2B,CAAC;AAEtD,MAAM,SAAS,GAAG,SAAS,CAAC;AAE5B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;GAIG;AAiEH,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,aAAa;IAAnC;;QACE;;WAEG;QAEH,SAAI,GAAG,KAAK,CAAC;QACb;;WAEG;QAEH,YAAO,GAAG,EAAE,CAAC;IAgBf,CAAC;IAXW,MAAM;QACd,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,YAAY;+BACnB,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC;+BACnC,YAAY,EAAE;;kCAEX,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI;sCAClC,QAAQ,EAAE;;UAEtC,CAAC;IACT,CAAC;CACF,CAAA;AArBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACf;AAKb;IADC,QAAQ,EAAE;wCACE;AAGb;IADC,KAAK,CAAC,IAAI,CAAC;oCACa;AAbrB,OAAO;IAhEZ,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CACL,GAAG,CAAA;;QAEG,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;;;wBAGQ,QAAQ;;;;;;;;;;;;;;;;4BAgBJ,QAAQ;;;;;;;wBAOZ,QAAQ;;;;;;;qBAOX,QAAQ;wBACL,QAAQ;8BACF,QAAQ;;;;;;;;;;;;;8BAaR,QAAQ;;;8BAGR,QAAQ;;GAEnC,CACF;GACK,OAAO,CA0BZ;AAED,eAAe,OAAO,CAAC"}

package/dev/components/dialog.d.ts

@@ -0,0 +1,33 @@
+import { HandlerEvent } from "@godown/element";
+import SuperOpenable, { type Direction9 } from "../core/super-openable.js";
+/**
+ * {@linkcode Dialog} similar to <dialog>.
+ *
+ * Like dialog, it listens for submit events and closes itself when the target method is "dialog".
+ *
+ * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed
+ *
+ * @category feedback
+ */
+declare class Dialog extends SuperOpenable {
+    direction: Direction9;
+    /**
+     * Enable modal, blocking event penetration.
+     */
+    modal: boolean;
+    /**
+     * Close key.
+     */
+    key: string;
+    private _modalInvoke;
+    protected render(): import("lit").TemplateResult<1>;
+    showModal(): void;
+    private _submitEvent;
+    private _keydownEvent;
+    protected updated(): void;
+    protected _handleKeydown(e: KeyboardEvent): void;
+    protected _handelSubmit(e: HandlerEvent<HTMLFormElement>): void;
+    close(): void;
+}
+export default Dialog;
+//# sourceMappingURL=dialog.d.ts.map

package/dev/components/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQ/C,OAAO,aAAa,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAK3E;;;;;;;;GAQG;AACH,cAkEM,MAAO,SAAQ,aAAa;IAEhC,SAAS,EAAE,UAAU,CAAY;IACjC;;OAEG;IAEH,KAAK,UAAS;IACd;;OAEG;IAEH,GAAG,SAAY;IAEf,OAAO,CAAC,YAAY,CAAU;IAE9B,SAAS,CAAC,MAAM;IAOhB,SAAS;IAQT,OAAO,CAAC,YAAY,CAAiD;IACrE,OAAO,CAAC,aAAa,CAAiD;IAEtE,SAAS,CAAC,OAAO;IAYjB,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAQzC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,YAAY,CAAC,eAAe,CAAC;IAMxD,KAAK;CAON;AAED,eAAe,MAAM,CAAC"}

package/dev/components/dialog.js

@@ -0,0 +1,154 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import SuperOpenable from "../core/super-openable.js";
+const protoName = "dialog";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Dialog} similar to <dialog>.
+ *
+ * Like dialog, it listens for submit events and closes itself when the target method is "dialog".
+ *
+ * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed
+ *
+ * @category feedback
+ */
+let Dialog = class Dialog extends SuperOpenable {
+    constructor() {
+        super(...arguments);
+        this.direction = "center";
+        /**
+         * Enable modal, blocking event penetration.
+         */
+        this.modal = false;
+        /**
+         * Close key.
+         */
+        this.key = "Escape";
+    }
+    render() {
+        return html `<div part="root">
+      <div part="modal"></div>
+      <div part="container" direction="${this.direction}">${htmlSlot()}</div>
+    </div>`;
+    }
+    showModal() {
+        if (!this.modal) {
+            this.modal = true;
+            this._modalInvoke = true;
+        }
+        this.show();
+    }
+    updated() {
+        if (this.open) {
+            this._submitEvent = this.events.add(this, "submit", this._handelSubmit);
+            if (this.key) {
+                this._keydownEvent = this.events.add(document, "keydown", this._handleKeydown.bind(this));
+            }
+        }
+        else {
+            this._submitEvent = this.events.remove(this, "submit", this._submitEvent);
+            this._keydownEvent = this.events.remove(document, "keydown", this._keydownEvent);
+        }
+    }
+    _handleKeydown(e) {
+        e.preventDefault();
+        const keys = this.key.split(/[\s,]/);
+        if (keys.includes(e.key) || keys.includes(e.code)) {
+            this.close();
+        }
+    }
+    _handelSubmit(e) {
+        if (e.target.method === "dialog") {
+            this.close();
+        }
+    }
+    close() {
+        if (this._modalInvoke) {
+            this.modal = false;
+            this._modalInvoke = false;
+        }
+        this.open = false;
+    }
+};
+__decorate([
+    property()
+], Dialog.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Dialog.prototype, "modal", void 0);
+__decorate([
+    property()
+], Dialog.prototype, "key", void 0);
+Dialog = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}--background: none;
+      ${cssScope}--background-modal: var(${cssGlobalVars.background});
+      ${cssScope}--opacity-modal: 0.2;
+      background: var(${cssScope}--background);
+      pointer-events: none;
+      visibility: hidden;
+      position: fixed;
+      z-index: 1;
+      inset:0;
+    }
+
+    :host([open]) {
+      visibility: visible;
+    }
+
+    :host([open][modal]) [part="modal"] {
+      pointer-events: all;
+      visibility: visible;
+      opacity: var(${cssScope}--opacity-modal);
+
+    }
+
+    [part="modal"] {
+      visibility: hidden;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      background: var(${cssScope}--background-modal);
+    }
+
+    [part="root"] {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [direction] {
+      pointer-events: all;
+      position: absolute;
+    }
+
+    [direction^="top"] {
+      top: 0;
+    }
+
+    [direction^="bottom"] {
+      bottom: 0;
+    }
+
+    [direction$="right"] {
+      right: 0%;
+    }
+
+    [direction$="left"] {
+      left: 0%;
+    }
+  `)
+], Dialog);
+export default Dialog;
+//# sourceMappingURL=dialog.js.map

package/dev/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/components/dialog.ts"],"names":[],"mappings":"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"}

package/dev/components/divider.d.ts

@@ -0,0 +1,17 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Divider} similar to <hr>.
+ *
+ * This component does not render content.
+ *
+ * @category layout
+ */
+declare class Divider extends GlobalStyle {
+    /**
+     * Vertical display.
+     */
+    vertical: boolean;
+    connectedCallback(): void;
+}
+export default Divider;
+//# sourceMappingURL=divider.d.ts.map

package/dev/components/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/components/divider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;;;GAMG;AACH,cAgBM,OAAQ,SAAQ,WAAW;IAC/B;;OAEG;IAEH,QAAQ,UAAS;IAEjB,iBAAiB;CAGlB;AAED,eAAe,OAAO,CAAC"}

package/dev/components/divider.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { godown, styles } from "@godown/element/decorators/index.js";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+import { GlobalStyle } from "../core/global-style.js";
+const protoName = "divider";
+/**
+ * {@linkcode Divider} similar to <hr>.
+ *
+ * This component does not render content.
+ *
+ * @category layout
+ */
+let Divider = class Divider extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * Vertical display.
+         */
+        this.vertical = false;
+    }
+    connectedCallback() {
+        this.createRenderRoot();
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Divider.prototype, "vertical", void 0);
+Divider = __decorate([
+    godown(protoName),
+    styles(css `
+  :host{
+    width: 100%;
+    height: .05em;
+    margin: auto;
+    display: block;
+    background: currentColor;
+  }
+  :host([vertical]) {
+    width: .05em;
+    height: max(1em, 100%);
+  }
+  `)
+], Divider);
+export default Divider;
+//# sourceMappingURL=divider.js.map

package/dev/components/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/components/divider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,SAAS,GAAG,SAAS,CAAC;AAE5B;;;;;;GAMG;AAiBH,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QACE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;IAKnB,CAAC;IAHC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;CACF,CAAA;AALC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC1B;AALb,OAAO;IAhBZ,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CACL,GAAG,CAAA;;;;;;;;;;;;GAYF,CACF;GACK,OAAO,CAUZ;AAED,eAAe,OAAO,CAAC"}

package/dev/components/dragbox.d.ts

@@ -0,0 +1,40 @@
+import { EventListenerFunc } from "@godown/element/tools/events.js";
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Dragbox} does not extend beyond the range of {@linkcode Dragbox.offsetsWidth} and {@linkcode Dragbox.offsetsHeight}.
+ *
+ * @category wrapper
+ */
+declare class Dragbox extends GlobalStyle {
+    /**
+     * Width of (`this.offsetParent` or `document.body`).
+     */
+    get offsetsWidth(): number;
+    /**
+     * Height of (`this.offsetParent` or `document.body`).
+     */
+    get offsetsHeight(): number;
+    drag: boolean;
+    t: number;
+    l: number;
+    cx: number;
+    cy: number;
+    /**
+     * Position x.
+     */
+    x: string;
+    /**
+     * Position y.
+     */
+    y: string;
+    protected render(): import("lit").TemplateResult<1>;
+    protected firstUpdated(): void;
+    protected _handleDragStart(e: MouseEvent): void;
+    _handleMouseMove: EventListenerFunc;
+    _handleMouseLeave: EventListenerFunc;
+    protected _handleDragEnd(): void;
+    protected _handleDrag(e: MouseEvent): void;
+    reset(): void;
+}
+export default Dragbox;
+//# sourceMappingURL=dragbox.d.ts.map

package/dev/components/dragbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragbox.d.ts","sourceRoot":"","sources":["../../src/components/dragbox.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAIpE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;GAIG;AACH,cAcM,OAAQ,SAAQ,WAAW;IAC/B;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,EAAE,OAAO,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IAEH,CAAC,SAAU;IACX;;OAEG;IAEH,CAAC,SAAU;IAEX,SAAS,CAAC,MAAM;IAIhB,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,UAAU;IAUxC,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,iBAAiB,EAAE,iBAAiB,CAAC;IAErC,SAAS,CAAC,cAAc;IAMxB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;IAuBnC,KAAK;CAWN;AAED,eAAe,OAAO,CAAC"}

package/{web-components/wrapper → dev/components}/dragbox.js

@@ -1,14 +1,17 @@
 import { __decorate } from "tslib";
-import { css, html, property } from "../../_deps.js";
-import { godown } from "../../decorators/godown.js";
-import styles from "../../decorators/styles.js";
-import { htmlSlot } from "../../lib/directives.js";
-import { GodownElement } from "../../proto/godown-element.js";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { GlobalStyle } from "../core/global-style.js";
 const protoName = "dragbox";
 /**
  * {@linkcode Dragbox} does not extend beyond the range of {@linkcode Dragbox.offsetsWidth} and {@linkcode Dragbox.offsetsHeight}.
+ *
+ * @category wrapper
  */
-let Dragbox = class Dragbox extends GodownElement {
+let Dragbox = class Dragbox extends GlobalStyle {
     constructor() {
         super(...arguments);
         /**
@@ -20,6 +23,18 @@ let Dragbox = class Dragbox extends GodownElement {
          */
         this.y = "auto";
     }
+    /**
+     * Width of (`this.offsetParent` or `document.body`).
+     */
+    get offsetsWidth() {
+        return this.offsetParent?.clientWidth ?? document.body.offsetWidth;
+    }
+    /**
+     * Height of (`this.offsetParent` or `document.body`).
+     */
+    get offsetsHeight() {
+        return this.offsetParent?.clientHeight ?? document.body.offsetHeight;
+    }
     render() {
         return html `<div @mousedown="${this._handleDragStart}" @mouseup="${this._handleDragEnd}">${htmlSlot()}</div>`;
     }
@@ -32,13 +47,13 @@ let Dragbox = class Dragbox extends GodownElement {
         this.t = this.offsetTop;
         this.l = this.offsetLeft;
         this.drag = true;
-        this.mouseMoveEvent = this.addEvent(document, "mousemove", this._handleDrag.bind(this));
-        this.mouseLeaveEvent = this.addEvent(document, "mouseleave", this._handleDragEnd.bind(this));
+        this._handleMouseMove = this.events.add(document, "mousemove", this._handleDrag.bind(this));
+        this._handleMouseLeave = this.events.add(document, "mouseleave", this._handleDragEnd.bind(this));
     }
     _handleDragEnd() {
         this.drag = false;
-        this.removeEvent(document, "mousemove", this.mouseMoveEvent);
-        this.removeEvent(document, "mouseleave", this.mouseLeaveEvent);
+        this.events.remove(document, "mousemove", this._handleMouseMove);
+        this.events.remove(document, "mouseleave", this._handleMouseLeave);
     }
     _handleDrag(e) {
         if (!this.drag) {
@@ -86,8 +101,7 @@ __decorate([
 ], Dragbox.prototype, "y", void 0);
 Dragbox = __decorate([
     godown(protoName),
-    styles([
-        css `
+    styles(css `
     :host {
       position: absolute;
       display: block;
@@ -97,9 +111,7 @@ Dragbox = __decorate([
       -webkit-user-select: none;
       user-select: none;
     }
-  `,
-    ])
+  `)
 ], Dragbox);
-export { Dragbox };
 export default Dragbox;
 //# sourceMappingURL=dragbox.js.map

package/dev/components/dragbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragbox.js","sourceRoot":"","sources":["../../src/components/dragbox.ts"],"names":[],"mappings":"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"}

package/dev/components/flex.d.ts

@@ -0,0 +1,31 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Flex} provides flex layout.
+ *
+ * @category layout
+ */
+declare class Flex extends GlobalStyle {
+    /**
+     * CSS property `flex-flow` (`flex-direction flex-wrap`).
+     */
+    flexFlow: string;
+    /**
+     * CSS property `gap`.
+     */
+    gap: string;
+    /**
+     * CSS property `justify-content`.
+     */
+    content: string;
+    /**
+     * CSS property `align-items`.
+     */
+    items: string;
+    /**
+     * If true, set flex-direction to "column".
+     */
+    vertical: boolean;
+    protected render(): import("lit").TemplateResult<1>[];
+}
+export default Flex;
+//# sourceMappingURL=flex.d.ts.map

package/dev/components/flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../src/components/flex.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;GAIG;AACH,cAEM,IAAK,SAAQ,WAAW;IAC5B;;OAEG;IAEH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IAEH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,MAAM;CAgBjB;AAED,eAAe,IAAI,CAAC"}

package/dev/components/flex.js

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { htmlStyle } from "@godown/element/directives/html-style.js";
+import { joinRules } from "@godown/element/tools/css.js";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+import { GlobalStyle } from "../core/global-style.js";
+const protoName = "flex";
+/**
+ * {@linkcode Flex} provides flex layout.
+ *
+ * @category layout
+ */
+let Flex = class Flex extends GlobalStyle {
+    render() {
+        return [
+            htmlSlot(),
+            htmlStyle(joinRules({
+                ":host": {
+                    gap: this.gap,
+                    "flex-flow": this.flexFlow,
+                    "flex-direction": this.vertical && "column",
+                    "align-items": this.items,
+                    "justify-content": this.content,
+                },
+            })),
+        ];
+    }
+};
+__decorate([
+    property({ attribute: "flex-flow" })
+], Flex.prototype, "flexFlow", void 0);
+__decorate([
+    property()
+], Flex.prototype, "gap", void 0);
+__decorate([
+    property()
+], Flex.prototype, "content", void 0);
+__decorate([
+    property()
+], Flex.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean })
+], Flex.prototype, "vertical", void 0);
+Flex = __decorate([
+    godown(protoName),
+    styles(css `:host {display:flex;}`)
+], Flex);
+export default Flex;
+//# sourceMappingURL=flex.js.map

package/dev/components/flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/components/flex.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB;;;;GAIG;AAGH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,WAAW;IA2BlB,MAAM;QACd,OAAO;YACL,QAAQ,EAAE;YACV,SAAS,CACP,SAAS,CAAC;gBACR,OAAO,EAAE;oBACP,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,WAAW,EAAE,IAAI,CAAC,QAAQ;oBAC1B,gBAAgB,EAAE,IAAI,CAAC,QAAQ,IAAI,QAAQ;oBAC3C,aAAa,EAAE,IAAI,CAAC,KAAK;oBACzB,iBAAiB,EAAE,IAAI,CAAC,OAAO;iBAChC;aACF,CAAC,CACH;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAtCC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;sCACpB;AAKjB;IADC,QAAQ,EAAE;iCACC;AAKZ;IADC,QAAQ,EAAE;qCACK;AAKhB;IADC,QAAQ,EAAE;mCACG;AAKd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACV;AAzBd,IAAI;IAFT,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA,uBAAuB,CAAC;GAC7B,IAAI,CA2CT;AAED,eAAe,IAAI,CAAC"}

package/dev/components/form.d.ts

@@ -0,0 +1,24 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Form} Gets child element key-value object,
+ * which will be nested if the child element is the same as this element.
+ *
+ * @slot - Child elements.
+ *
+ * @category form
+ */
+declare class Form<T = object> extends GlobalStyle {
+    name: string;
+    get value(): T;
+    nameValue: () => [string, T];
+    protected render(): import("lit").TemplateResult<1>;
+    reset(): void;
+    namevalue(): [string, T];
+    static buildValue(elements: (Element & {
+        name?: string;
+        value?: unknown;
+        namevalue?: () => [string, unknown];
+    })[]): Record<string, any>;
+}
+export default Form;
+//# sourceMappingURL=form.d.ts.map

package/dev/components/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/components/form.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;;;;GAOG;AACH,cAQM,IAAI,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,WAAW;IAExC,IAAI,SAAM;IACV,IAAI,KAAK,IAAI,CAAC,CAEb;IAED,SAAS,QAiBI,CAAC,MAAM,EAAE,CAAC,CAAC,CAjBG;IAE3B,SAAS,CAAC,MAAM;IAIhB,KAAK;IAWL,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAIxB,MAAM,CAAC,UAAU,CACf,QAAQ,EAAE,CAAC,OAAO,GAAG;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACrC,CAAC,EAAE,GACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAoBvB;AAED,eAAe,IAAI,CAAC"}