godown 2.6.2 → 2.7.1

package/web-components/input/search-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/search-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate, svgSearch } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst defineName = \"search-input\";\n\nconst cssScope = createScope(defineName);\n\n/**\n * SearchInput used for search behavior.\n */\n@define(defineName)\nexport class SearchInput extends InputElement {\n  /**\n   * Query selectors.\n   */\n  @property() query = \"\";\n  /**\n   * Target selectors.\n   */\n  @property() target = \"\";\n  /**\n   * Enable infer.\n   */\n  @property({ type: Boolean }) infer = false;\n  /**\n   * Float result.\n   */\n  @property({ type: Boolean, reflect: true }) float = false;\n  /**\n   * Form action.\n   */\n  @property() action = \"\";\n  /**\n   * Form method.\n   */\n  @property() method: \"get\" | \"post\" = \"get\";\n  /**\n   * Form name.\n   */\n  @property() name = \"q\";\n\n  @query(\"input\") _input!: HTMLInputElement;\n\n  static styles = [\n    InputElement.styles,\n    css`\n      :host {\n        ${cssScope}--width:var(${cssvarValues.input}--width);\n        ${cssScope}--input-padding: 0 0 0 .35em;\n        width: var(${cssvarValues.input}--width);\n        margin: var(${cssvarValues.input}-outline-width);\n        border-radius: var(${cssvarValues.input}--radius);\n        background: var(${cssvarValues.input}--background);\n      }\n\n      div {\n        padding: var(${cssScope}--input-padding);\n        height: var(${cssvarValues.input}--height);\n        flex: 1;\n        display: flex;\n        z-index: 2;\n      }\n\n      form {\n        min-height: 100%;\n        outline: 0.145em solid transparent;\n        display: flex;\n        flex-direction: column;\n        border-radius: inherit;\n        padding: 0;\n        width: 100%;\n        margin: 0;\n        position: relative;\n        overflow: hidden;\n      }\n\n      :host([float]) form {\n        overflow: visible;\n      }\n\n      :host(:focus) form {\n        outline: var(${cssvarValues.input}--outline);\n      }\n\n      ul {\n        list-style: none;\n        width: 100%;\n        pointer-events: none;\n        border-radius: inherit;\n        z-index: 2;\n      }\n\n      :host([float]) ul {\n        background: var(${cssvarValues.input}--background);\n        padding-top: 1.5em;\n        position: absolute;\n        z-index: 1;\n        top: 0;\n      }\n\n      :host([float]:focus) form {\n        outline: none;\n      }\n\n      :host([float]:focus) ul {\n        outline: var(${cssvarValues.input}--outline);\n      }\n\n      button,\n      input {\n        background: none;\n      }\n\n      button {\n        width: 1.8em;\n        height: inherit;\n      }\n\n      input {\n        flex: 1;\n        min-width: 0;\n        box-sizing: border-box;\n      }\n\n      svg {\n        height: 100%;\n        padding: 1px;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<form action=\"${this.action}\" method=\"${this.method}\">\n      <div>\n        <input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" name=\"${this.name}\" @focus=\"${this._handleInput}\" @input=\"${this._handleInput}\" title=\"\" placeholder=\"${this.pla}\" />\n        <button @click=\"${this._handleSubmit}\">${htmlSlot(\"search\", svgSearch(), this)}</button>\n      </div>\n      <ul>\n        ${htmlSlot()}\n      </ul>\n    </form>`;\n  }\n\n  protected _handleSubmit(e: Event) {\n    if (!this.action) {\n      e.preventDefault();\n    }\n    this.dispatchEvent(new CustomEvent(\"submit\", { detail: this.value }));\n  }\n\n  protected _handleInput(e: Event) {\n    e.stopPropagation();\n    const value: string = this.targetValue(e);\n    if (value === this.value) {\n      return;\n    }\n    this.value = value;\n    if (this.compositing) {\n      return;\n    }\n    if (this.target && this.query) {\n      this.searchElements(this.value);\n    }\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n  }\n\n  searchElements(s: string) {\n    const targetElement = document.body.querySelector(this.target);\n    const queryElementsCollection = document.body.querySelectorAll(this.query);\n    if (!targetElement) {\n      return;\n    }\n    targetElement.replaceChildren();\n    if (s && queryElementsCollection.length) {\n      for (const e of queryElementsCollection) {\n        if (e.textContent.includes(this.value)) {\n          targetElement.appendChild(e.cloneNode(true));\n        }\n      }\n    }\n  }\n}\n\nexport default SearchInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"search-input\": SearchInput;\n  }\n}\n"]}
+{"version":3,"file":"search-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/search-input.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,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEjE,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,MAAM,QAAQ,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAEzC;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QACL;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QACvB;;WAEG;QACS,WAAM,GAAG,EAAE,CAAC;QACxB;;WAEG;QAC0B,UAAK,GAAG,KAAK,CAAC;QAC3C;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;QAC1D;;WAEG;QACS,WAAM,GAAG,EAAE,CAAC;QACxB;;WAEG;QACS,WAAM,GAAmB,KAAK,CAAC;QAC3C;;WAEG;QACS,SAAI,GAAG,GAAG,CAAC;IA+IzB,CAAC;IAnDW,MAAM;QACd,OAAO,IAAI,CAAA,iBAAiB,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,MAAM;;yBAE1C,IAAI,CAAC,KAAK,iBAAiB,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,YAAY,aAAa,IAAI,CAAC,YAAY,2BAA2B,IAAI,CAAC,GAAG;0BAC3J,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC;;;UAG5E,QAAQ,EAAE;;YAER,CAAC;IACX,CAAC;IAES,aAAa,CAAC,CAAQ;QAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;IAES,YAAY,CAAC,CAAQ;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,KAAK,GAAW,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACpG,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,cAAc,CAAC,CAAS;QACtB,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,MAAM,uBAAuB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3E,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,aAAa,CAAC,eAAe,EAAE,CAAC;QAChC,IAAI,CAAC,IAAI,uBAAuB,CAAC,MAAM,EAAE,CAAC;YACxC,KAAK,MAAM,CAAC,IAAI,uBAAuB,EAAE,CAAC;gBACxC,IAAI,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;oBACvC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC/C,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;;AA1IM,kBAAM,GAAG;IACd,WAAW,CAAC,MAAM;IAClB,GAAG,CAAA;;UAEG,QAAQ,eAAe,YAAY,CAAC,KAAK;UACzC,QAAQ;qBACG,YAAY,CAAC,KAAK;sBACjB,YAAY,CAAC,KAAK;6BACX,YAAY,CAAC,KAAK;0BACrB,YAAY,CAAC,KAAK;;;;uBAIrB,QAAQ;sBACT,YAAY,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwBjB,YAAY,CAAC,KAAK;;;;;;;;;;;;0BAYf,YAAY,CAAC,KAAK;;;;;;;;;;;;uBAYrB,YAAY,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;KAuBpC;CACgB,AAtFN,CAsFO;AAlHR;IAAX,QAAQ,EAAE;0CAAY;AAIX;IAAX,QAAQ,EAAE;2CAAa;AAIK;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAe;AAIC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAI9C;IAAX,QAAQ,EAAE;2CAAa;AAIZ;IAAX,QAAQ,EAAE;2CAAgC;AAI/B;IAAX,QAAQ,EAAE;yCAAY;AAEP;IAAf,KAAK,CAAC,OAAO,CAAC;2CAA2B;AA9B/B,WAAW;IADvB,MAAM,CAAC,UAAU,CAAC;GACN,WAAW,CA2KvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate, svgSearch } from \"../../lib/templates.js\";\nimport { GodownInput } from \"../../supers/input.js\";\nimport { createScope, cssvarValues } from \"../../supers/root.js\";\n\nconst defineName = \"search-input\";\n\nconst cssScope = createScope(defineName);\n\n/**\n * {@linkcode SearchInput}  used for search behavior.\n */\n@define(defineName)\nexport class SearchInput extends GodownInput {\n  /**\n   * Query selectors.\n   */\n  @property() query = \"\";\n  /**\n   * Target selectors.\n   */\n  @property() target = \"\";\n  /**\n   * Enable infer.\n   */\n  @property({ type: Boolean }) infer = false;\n  /**\n   * Float result.\n   */\n  @property({ type: Boolean, reflect: true }) float = false;\n  /**\n   * Form action.\n   */\n  @property() action = \"\";\n  /**\n   * Form method.\n   */\n  @property() method: \"get\" | \"post\" = \"get\";\n  /**\n   * Form name.\n   */\n  @property() name = \"q\";\n\n  @query(\"input\") _input!: HTMLInputElement;\n\n  static styles = [\n    GodownInput.styles,\n    css`\n      :host {\n        ${cssScope}--width:var(${cssvarValues.input}--width);\n        ${cssScope}--input-padding: 0 0 0 .35em;\n        width: var(${cssvarValues.input}--width);\n        margin: var(${cssvarValues.input}-outline-width);\n        border-radius: var(${cssvarValues.input}--radius);\n        background: var(${cssvarValues.input}--background);\n      }\n\n      div {\n        padding: var(${cssScope}--input-padding);\n        height: var(${cssvarValues.input}--height);\n        flex: 1;\n        display: flex;\n        z-index: 2;\n      }\n\n      form {\n        min-height: 100%;\n        outline: 0.145em solid transparent;\n        display: flex;\n        flex-direction: column;\n        border-radius: inherit;\n        padding: 0;\n        width: 100%;\n        margin: 0;\n        position: relative;\n        overflow: hidden;\n      }\n\n      :host([float]) form {\n        overflow: visible;\n      }\n\n      :host(:focus) form {\n        outline: var(${cssvarValues.input}--outline);\n      }\n\n      ul {\n        list-style: none;\n        width: 100%;\n        pointer-events: none;\n        border-radius: inherit;\n        z-index: 2;\n      }\n\n      :host([float]) ul {\n        background: var(${cssvarValues.input}--background);\n        padding-top: 1.5em;\n        position: absolute;\n        z-index: 1;\n        top: 0;\n      }\n\n      :host([float]:focus) form {\n        outline: none;\n      }\n\n      :host([float]:focus) ul {\n        outline: var(${cssvarValues.input}--outline);\n      }\n\n      button,\n      input {\n        background: none;\n      }\n\n      button {\n        width: 1.8em;\n        height: inherit;\n      }\n\n      input {\n        flex: 1;\n        min-width: 0;\n        box-sizing: border-box;\n      }\n\n      svg {\n        height: 100%;\n        padding: 1px;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<form action=\"${this.action}\" method=\"${this.method}\">\n      <div>\n        <input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" name=\"${this.name}\" @focus=\"${this._handleInput}\" @input=\"${this._handleInput}\" title=\"\" placeholder=\"${this.pla}\" />\n        <button @click=\"${this._handleSubmit}\">${htmlSlot(\"search\", svgSearch(), this)}</button>\n      </div>\n      <ul>\n        ${htmlSlot()}\n      </ul>\n    </form>`;\n  }\n\n  protected _handleSubmit(e: Event) {\n    if (!this.action) {\n      e.preventDefault();\n    }\n    this.dispatchEvent(new CustomEvent(\"submit\", { detail: this.value }));\n  }\n\n  protected _handleInput(e: Event) {\n    e.stopPropagation();\n    const value: string = this.targetValue(e);\n    if (value === this.value) {\n      return;\n    }\n    this.value = value;\n    if (this.compositing) {\n      return;\n    }\n    if (this.target && this.query) {\n      this.searchElements(this.value);\n    }\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n  }\n\n  searchElements(s: string) {\n    const targetElement = document.body.querySelector(this.target);\n    const queryElementsCollection = document.body.querySelectorAll(this.query);\n    if (!targetElement) {\n      return;\n    }\n    targetElement.replaceChildren();\n    if (s && queryElementsCollection.length) {\n      for (const e of queryElementsCollection) {\n        if (e.textContent.includes(this.value)) {\n          targetElement.appendChild(e.cloneNode(true));\n        }\n      }\n    }\n  }\n}\n\nexport default SearchInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"search-input\": SearchInput;\n    \"g-search-input\": SearchInput;\n  }\n}\n"]}

package/web-components/input/select-input.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 { InputElement } from "./input.js";
+import { GodownInput } from "../../supers/input.js";
 /**
- * SelectInput select matched elements.
+ * {@linkcode SelectInput} select matched elements.
  */
-export declare class SelectInput extends InputElement {
+export declare class SelectInput extends GodownInput {
     /**
      * Open content.
      */
@@ -45,6 +45,7 @@ export default SelectInput;
 declare global {
     interface HTMLElementTagNameMap {
         "select-input": SelectInput;
+        "g-select-input": SelectInput;
     }
 }
 //# sourceMappingURL=select-input.d.ts.map

package/web-components/input/select-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/select-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,wBAAwB,CAAC;AAErF,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1C;;GAEG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C;;OAEG;IACyC,IAAI,UAAS;IACzD;;OAEG;IACyC,IAAI,UAAS;IACzD;;OAEG;IACwB,KAAK,QAAM;IACtC;;OAEG;IACS,IAAI,SAAY;IAC5B;;OAEG;IACwB,IAAI,EAAE,MAAM,EAAE,CAAM;IAE/C,MAAM,CAAC,MAAM,iBAuFO;IAEpB,IAAI,QAAQ,QAEX;IAEe,MAAM,EAAE,gBAAgB,CAAC;IACzB,MAAM,EAAE,gBAAgB,CAAC;IAEzC,SAAS,CAAC,MAAM,IAAI,YAAY;IAiBhC,OAAO,CAAC,UAAU;IAqBlB,SAAS,CAAC,WAAW;IAOrB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAK5B,iBAAiB;IAIjB,cAAc,CAAC,MAAM,EAAE,OAAO;IAI9B,SAAS,CAAC,YAAY;IAgCtB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IA4CnC,SAAS,CAAC,YAAY;IAuCtB,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAI5C,KAAK;CAcN;AAED,eAAe,WAAW,CAAC;AAM3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"select-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/select-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,gBAAgB,CAAC;AAGjF,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKpD;;GAEG;AACH,qBACa,WAAY,SAAQ,WAAW;IAC1C;;OAEG;IACyC,IAAI,UAAS;IACzD;;OAEG;IACyC,IAAI,UAAS;IACzD;;OAEG;IACwB,KAAK,QAAM;IACtC;;OAEG;IACS,IAAI,SAAY;IAC5B;;OAEG;IACwB,IAAI,EAAE,MAAM,EAAE,CAAM;IAE/C,MAAM,CAAC,MAAM,iBAuFO;IAEpB,IAAI,QAAQ,QAEX;IAEe,MAAM,EAAE,gBAAgB,CAAC;IACzB,MAAM,EAAE,gBAAgB,CAAC;IAEzC,SAAS,CAAC,MAAM,IAAI,YAAY;IAiBhC,OAAO,CAAC,UAAU;IAqBlB,SAAS,CAAC,WAAW;IAOrB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAK5B,iBAAiB;IAIjB,cAAc,CAAC,MAAM,EAAE,OAAO;IAI9B,SAAS,CAAC,YAAY;IAgCtB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IA4CnC,SAAS,CAAC,YAAY;IAuCtB,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAI5C,KAAK;CAcN;AAED,eAAe,WAAW,CAAC;AAM3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;QAC5B,gBAAgB,EAAE,WAAW,CAAC;KAC/B;CACF"}

package/web-components/input/select-input.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, svgDelta, svgX } from "../../lib/templates.js";
-import { cssvarValues, define, GodownElement } from "../../root.js";
-import { InputElement } from "./input.js";
+import { GodownInput } from "../../supers/input.js";
+import { cssvarValues, GodownElement } from "../../supers/root.js";
 const defineName = "select-input";
 /**
- * SelectInput select matched elements.
+ * {@linkcode SelectInput} select matched elements.
  */
-let SelectInput = class SelectInput extends InputElement {
+let SelectInput = class SelectInput extends GodownInput {
     constructor() {
         super(...arguments);
         /**
@@ -222,7 +223,7 @@ let SelectInput = class SelectInput extends InputElement {
     }
 };
 SelectInput.styles = [
-    InputElement.styles,
+    GodownInput.styles,
     css `
       :host {
         background: var(${cssvarValues.input}--background);

package/web-components/input/select-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/select-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot, type HTMLTemplate, svgDelta, svgX } from \"../../lib/templates.js\";\nimport { cssvarValues, define, GodownElement } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst defineName = \"select-input\";\n\n/**\n * SelectInput select matched elements.\n */\n@define(defineName)\nexport class SelectInput extends InputElement {\n  /**\n   * Open content.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /**\n   * Only a single option is allowed.\n   */\n  @property({ type: Boolean, reflect: true }) only = false;\n  /**\n   * Selected values.\n   */\n  @property({ type: Array }) value = [];\n  /**\n   * Input name.\n   */\n  @property() name = \"select\";\n  /**\n   * Selected texts.\n   */\n  @property({ type: Array }) text: string[] = [];\n\n  static styles = [\n    InputElement.styles,\n    css`\n      :host {\n        background: var(${cssvarValues.input}--background);\n        margin: var(${cssvarValues.input}--outline-width);\n        outline: var(${cssvarValues.input}--outline-width) solid transparent;\n        height: var(${cssvarValues.input}--height);\n        width: var(${cssvarValues.input}--width);\n        border-radius: var(${cssvarValues.input}--radius);\n      }\n\n      :host([open]) {\n        outline-color: var(${cssvarValues.input}--outline-color);\n      }\n\n      input {\n        padding: 0 0 0 0.25em;\n        background: none;\n        cursor: inherit;\n        height: 100%;\n        width: 100%;\n        box-sizing: border-box;\n        border: inherit;\n        outline: none;\n        border-radius: inherit;\n        flex: 1;\n      }\n\n      div {\n        display: inline-flex;\n        position: relative;\n        width: 100%;\n        border-radius: inherit;\n        z-index: inherit;\n      }\n\n      label svg {\n        height: 100%;\n      }\n\n      aside {\n        margin-top: 1px;\n        position: absolute;\n        top: 100%;\n        width: 100%;\n        visibility: hidden;\n        z-index: 1;\n        border-radius: inherit;\n      }\n\n      section {\n        max-width: calc(100% - 1.2em);\n        height: 100%;\n        overflow: hidden;\n        pointer-events: none;\n        border-radius: inherit;\n        z-index: inherit;\n      }\n\n      i.selected-item {\n        background: var(${cssvarValues.input}--true);\n        border-radius: inherit;\n        height: 100%;\n        float: left;\n        display: inline-flex;\n        font-style: normal;\n        align-items: center;\n        padding-left: 0.1em;\n        margin-left: 0.065em;\n      }\n\n      i:first-child {\n        margin-left: 0;\n      }\n\n      i.selected-item svg {\n        width: 1em;\n        padding: 0 0.12em;\n        height: 0.8em;\n        pointer-events: all;\n      }\n\n      aside[open] {\n        visibility: visible;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  get assigned() {\n    return super.assigned as any;\n  }\n\n  @query(\"input\") _input: HTMLInputElement;\n  @query(\"aside\") _aside: HTMLInputElement;\n\n  protected render(): HTMLTemplate {\n    return html` <div>\n      <section>${this.renderList()}</section>\n      <input\n        ?autofocus=\"${this.autofocus}\"\n        id=\"input\"\n        @focus=\"${() => {\n          this.open = true;\n        }}\"\n        @input=\"${this._handleInput}\"\n        placeholder=\"${this.pla}\"\n      />\n      <label for=\"input\"> ${ifValue(this.children.length > 0, svgDelta())}</label>\n      <aside ?open=\"${this.open}\">${htmlSlot()}</aside>\n    </div>`;\n  }\n\n  private renderList(): HTMLTemplate[] {\n    const itemTemplates = [];\n    if (this.value.length) {\n      for (const i in this.value) {\n        itemTemplates.push(\n          html`<i class=\"selected-item\">\n            ${this.text[i] || this.value[i]}\n            <div\n              @click=\"${() => {\n                this.select(this.value[i]);\n              }}\"\n            >\n              ${svgX()}\n            </div>\n          </i>`,\n        );\n      }\n    }\n    return itemTemplates;\n  }\n\n  protected _focusCheck() {\n    if (this.autofocus) {\n      this._input?.focus();\n      this.open = true;\n    }\n  }\n\n  focus(options?: FocusOptions) {\n    this._input?.focus(options);\n    this.open = true;\n  }\n\n  connectedCallback() {\n    GodownElement.prototype.connectedCallback.call(this);\n  }\n\n  getOptionValue(option: Element) {\n    return (option as HTMLOptionElement).value || option.getAttribute(\"value\");\n  }\n\n  protected firstUpdated() {\n    const defs = this.def.split(\";\");\n    defs\n      .filter((i) => i.trim())\n      .forEach((i) => {\n        this.select(i);\n      });\n    this._focusCheck();\n    const CLICK = \"click\";\n    (this.assigned as HTMLElement[]).forEach((option: HTMLElement) => {\n      if (this.getOptionValue(option)) {\n        this.addEvent(option, CLICK, () => {\n          this.select(this.getOptionValue(option), option.textContent);\n        });\n      } else if (option.children) {\n        [...option.children].forEach((option: HTMLElement) => {\n          this.addEvent(option, CLICK, () => {\n            this.select(this.getOptionValue(option), option.textContent);\n          });\n        });\n      }\n    });\n    this.addEvent(this, \"change\", () => {\n      this.open = !this.only;\n    });\n    this.addEvent(document, CLICK, (e) => {\n      if (!this.contains(e.target as Node)) {\n        this.open = false;\n      }\n    });\n  }\n\n  select(value: string, text?: string) {\n    if (text === undefined || text === null) {\n      this.assigned.some((option: HTMLElement) => {\n        const optionValue = this.getOptionValue(option);\n        if (optionValue) {\n          if (optionValue === value) {\n            text = option.textContent;\n            return true;\n          }\n        } else if (option.children) {\n          return [...option.children].some((subOption) => {\n            const subOptionValue = this.getOptionValue(subOption);\n            if (subOptionValue === value) {\n              text = subOption.textContent;\n              return true;\n            }\n            return false;\n          });\n        }\n        return false;\n      });\n    }\n    if (this.value.includes(value)) {\n      if (!this.only) {\n        this.value = this.value.filter((v) => v !== value);\n        this.text = this.text.filter((v) => v !== text);\n      } else {\n        this.value = [];\n        this.text = [];\n      }\n    } else {\n      if (!this.only) {\n        this.value.push(value);\n        this.text.push(text);\n      } else {\n        this.value = [value];\n        this.text = [text];\n      }\n    }\n    this._input.value = \"\";\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.namevalue() }));\n    this.requestUpdate();\n  }\n\n  protected _handleInput() {\n    const BLOCK = \"block\";\n    const NONE = \"none\";\n    let value = this._input.value.trim();\n    if (!this.only && value.includes(\";\")) {\n      value = value.split(\";\").pop().trim();\n    }\n    this.assigned.forEach((option) => {\n      if (this.getOptionValue(option)) {\n        option.style.display = BLOCK;\n      }\n      if (option.children) {\n        option.style.display = BLOCK;\n        [...option.children].forEach((subOption) => {\n          subOption.style.display = BLOCK;\n        });\n      }\n    });\n    if (value) {\n      this.assigned.forEach((option) => {\n        const optionValue = this.getOptionValue(option);\n        if (optionValue) {\n          const isMatch = includesIgnoreCase(optionValue, value) || includesIgnoreCase(option.innerText, value);\n          option.style.display = isMatch ? BLOCK : NONE;\n        } else if (option.children) {\n          [...option.children].forEach((subOption) => {\n            const subOptionValue = this.getOptionValue(subOption);\n            const isSubMatch = includesIgnoreCase(subOptionValue, value) || includesIgnoreCase(subOption.innerText, value);\n            subOption.style.display = isSubMatch ? BLOCK : NONE;\n          });\n          if ([...option.children].filter((option) => option.style.display === BLOCK).length === 0) {\n            option.style.display = NONE;\n          }\n        }\n      });\n    }\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.namevalue() }));\n  }\n\n  namevalue(): [string, any[]] | [string, any] {\n    return [this.name, this.only ? this.value[0] : this.value];\n  }\n\n  reset() {\n    this.value = [];\n    this.text = [];\n    this._input.value = \"\";\n    if (this.def) {\n      const defs = this.def.split(\";\");\n      const defToSelect = this.only ? [defs[0]] : defs;\n      defToSelect\n        .filter((def) => def.trim())\n        .forEach((def) => {\n          this.select(def.trim(), null);\n        });\n    }\n  }\n}\n\nexport default SelectInput;\n\nfunction includesIgnoreCase(a: string, b: string): boolean {\n  return a.toLowerCase().includes(b.toLowerCase());\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"select-input\": SelectInput;\n  }\n}\n"]}
+{"version":3,"file":"select-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/select-input.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, svgDelta, svgX } from \"../../lib/templates.js\";\nimport { GodownInput } from \"../../supers/input.js\";\nimport { cssvarValues, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"select-input\";\n\n/**\n * {@linkcode SelectInput} select matched elements.\n */\n@define(defineName)\nexport class SelectInput extends GodownInput {\n  /**\n   * Open content.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /**\n   * Only a single option is allowed.\n   */\n  @property({ type: Boolean, reflect: true }) only = false;\n  /**\n   * Selected values.\n   */\n  @property({ type: Array }) value = [];\n  /**\n   * Input name.\n   */\n  @property() name = \"select\";\n  /**\n   * Selected texts.\n   */\n  @property({ type: Array }) text: string[] = [];\n\n  static styles = [\n    GodownInput.styles,\n    css`\n      :host {\n        background: var(${cssvarValues.input}--background);\n        margin: var(${cssvarValues.input}--outline-width);\n        outline: var(${cssvarValues.input}--outline-width) solid transparent;\n        height: var(${cssvarValues.input}--height);\n        width: var(${cssvarValues.input}--width);\n        border-radius: var(${cssvarValues.input}--radius);\n      }\n\n      :host([open]) {\n        outline-color: var(${cssvarValues.input}--outline-color);\n      }\n\n      input {\n        padding: 0 0 0 0.25em;\n        background: none;\n        cursor: inherit;\n        height: 100%;\n        width: 100%;\n        box-sizing: border-box;\n        border: inherit;\n        outline: none;\n        border-radius: inherit;\n        flex: 1;\n      }\n\n      div {\n        display: inline-flex;\n        position: relative;\n        width: 100%;\n        border-radius: inherit;\n        z-index: inherit;\n      }\n\n      label svg {\n        height: 100%;\n      }\n\n      aside {\n        margin-top: 1px;\n        position: absolute;\n        top: 100%;\n        width: 100%;\n        visibility: hidden;\n        z-index: 1;\n        border-radius: inherit;\n      }\n\n      section {\n        max-width: calc(100% - 1.2em);\n        height: 100%;\n        overflow: hidden;\n        pointer-events: none;\n        border-radius: inherit;\n        z-index: inherit;\n      }\n\n      i.selected-item {\n        background: var(${cssvarValues.input}--true);\n        border-radius: inherit;\n        height: 100%;\n        float: left;\n        display: inline-flex;\n        font-style: normal;\n        align-items: center;\n        padding-left: 0.1em;\n        margin-left: 0.065em;\n      }\n\n      i:first-child {\n        margin-left: 0;\n      }\n\n      i.selected-item svg {\n        width: 1em;\n        padding: 0 0.12em;\n        height: 0.8em;\n        pointer-events: all;\n      }\n\n      aside[open] {\n        visibility: visible;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  get assigned() {\n    return super.assigned as any;\n  }\n\n  @query(\"input\") _input: HTMLInputElement;\n  @query(\"aside\") _aside: HTMLInputElement;\n\n  protected render(): HTMLTemplate {\n    return html` <div>\n      <section>${this.renderList()}</section>\n      <input\n        ?autofocus=\"${this.autofocus}\"\n        id=\"input\"\n        @focus=\"${() => {\n          this.open = true;\n        }}\"\n        @input=\"${this._handleInput}\"\n        placeholder=\"${this.pla}\"\n      />\n      <label for=\"input\"> ${ifValue(this.children.length > 0, svgDelta())}</label>\n      <aside ?open=\"${this.open}\">${htmlSlot()}</aside>\n    </div>`;\n  }\n\n  private renderList(): HTMLTemplate[] {\n    const itemTemplates = [];\n    if (this.value.length) {\n      for (const i in this.value) {\n        itemTemplates.push(\n          html`<i class=\"selected-item\">\n            ${this.text[i] || this.value[i]}\n            <div\n              @click=\"${() => {\n                this.select(this.value[i]);\n              }}\"\n            >\n              ${svgX()}\n            </div>\n          </i>`,\n        );\n      }\n    }\n    return itemTemplates;\n  }\n\n  protected _focusCheck() {\n    if (this.autofocus) {\n      this._input?.focus();\n      this.open = true;\n    }\n  }\n\n  focus(options?: FocusOptions) {\n    this._input?.focus(options);\n    this.open = true;\n  }\n\n  connectedCallback() {\n    GodownElement.prototype.connectedCallback.call(this);\n  }\n\n  getOptionValue(option: Element) {\n    return (option as HTMLOptionElement).value || option.getAttribute(\"value\");\n  }\n\n  protected firstUpdated() {\n    const defs = this.def.split(\";\");\n    defs\n      .filter((i) => i.trim())\n      .forEach((i) => {\n        this.select(i);\n      });\n    this._focusCheck();\n    const CLICK = \"click\";\n    (this.assigned as HTMLElement[]).forEach((option: HTMLElement) => {\n      if (this.getOptionValue(option)) {\n        this.addEvent(option, CLICK, () => {\n          this.select(this.getOptionValue(option), option.textContent);\n        });\n      } else if (option.children) {\n        [...option.children].forEach((option: HTMLElement) => {\n          this.addEvent(option, CLICK, () => {\n            this.select(this.getOptionValue(option), option.textContent);\n          });\n        });\n      }\n    });\n    this.addEvent(this, \"change\", () => {\n      this.open = !this.only;\n    });\n    this.addEvent(document, CLICK, (e) => {\n      if (!this.contains(e.target as Node)) {\n        this.open = false;\n      }\n    });\n  }\n\n  select(value: string, text?: string) {\n    if (text === undefined || text === null) {\n      this.assigned.some((option: HTMLElement) => {\n        const optionValue = this.getOptionValue(option);\n        if (optionValue) {\n          if (optionValue === value) {\n            text = option.textContent;\n            return true;\n          }\n        } else if (option.children) {\n          return [...option.children].some((subOption) => {\n            const subOptionValue = this.getOptionValue(subOption);\n            if (subOptionValue === value) {\n              text = subOption.textContent;\n              return true;\n            }\n            return false;\n          });\n        }\n        return false;\n      });\n    }\n    if (this.value.includes(value)) {\n      if (!this.only) {\n        this.value = this.value.filter((v) => v !== value);\n        this.text = this.text.filter((v) => v !== text);\n      } else {\n        this.value = [];\n        this.text = [];\n      }\n    } else {\n      if (!this.only) {\n        this.value.push(value);\n        this.text.push(text);\n      } else {\n        this.value = [value];\n        this.text = [text];\n      }\n    }\n    this._input.value = \"\";\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.namevalue() }));\n    this.requestUpdate();\n  }\n\n  protected _handleInput() {\n    const BLOCK = \"block\";\n    const NONE = \"none\";\n    let value = this._input.value.trim();\n    if (!this.only && value.includes(\";\")) {\n      value = value.split(\";\").pop().trim();\n    }\n    this.assigned.forEach((option) => {\n      if (this.getOptionValue(option)) {\n        option.style.display = BLOCK;\n      }\n      if (option.children) {\n        option.style.display = BLOCK;\n        [...option.children].forEach((subOption) => {\n          subOption.style.display = BLOCK;\n        });\n      }\n    });\n    if (value) {\n      this.assigned.forEach((option) => {\n        const optionValue = this.getOptionValue(option);\n        if (optionValue) {\n          const isMatch = includesIgnoreCase(optionValue, value) || includesIgnoreCase(option.innerText, value);\n          option.style.display = isMatch ? BLOCK : NONE;\n        } else if (option.children) {\n          [...option.children].forEach((subOption) => {\n            const subOptionValue = this.getOptionValue(subOption);\n            const isSubMatch = includesIgnoreCase(subOptionValue, value) || includesIgnoreCase(subOption.innerText, value);\n            subOption.style.display = isSubMatch ? BLOCK : NONE;\n          });\n          if ([...option.children].filter((option) => option.style.display === BLOCK).length === 0) {\n            option.style.display = NONE;\n          }\n        }\n      });\n    }\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.namevalue() }));\n  }\n\n  namevalue(): [string, any[]] | [string, any] {\n    return [this.name, this.only ? this.value[0] : this.value];\n  }\n\n  reset() {\n    this.value = [];\n    this.text = [];\n    this._input.value = \"\";\n    if (this.def) {\n      const defs = this.def.split(\";\");\n      const defToSelect = this.only ? [defs[0]] : defs;\n      defToSelect\n        .filter((def) => def.trim())\n        .forEach((def) => {\n          this.select(def.trim(), null);\n        });\n    }\n  }\n}\n\nexport default SelectInput;\n\nfunction includesIgnoreCase(a: string, b: string): boolean {\n  return a.toLowerCase().includes(b.toLowerCase());\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"select-input\": SelectInput;\n    \"g-select-input\": SelectInput;\n  }\n}\n"]}

package/web-components/input/split-input.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 { InputElement } from "./input.js";
+import { GodownInput } from "../../supers/input.js";
 /**
- * SplitInput renders multiple inputs.
+ * {@linkcode SplitInput } renders multiple inputs.
  */
-export declare class SplitInput extends InputElement {
+export declare class SplitInput extends GodownInput {
     /**
      * The number of simulated input boxes.
      */
@@ -30,6 +30,7 @@ export default SplitInput;
 declare global {
     interface HTMLElementTagNameMap {
         "split-input": SplitInput;
+        "g-split-input": SplitInput;
     }
 }
 //# sourceMappingURL=split-input.d.ts.map

package/web-components/input/split-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/split-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAmC,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAQ1C;;GAEG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACyB,KAAK,SAAM;IAEvB,MAAM,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACtD,OAAO,SAAK;IACZ,YAAY,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAErC,MAAM,CAAC,MAAM,iBAkDO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAWhC,SAAS,CAAC,YAAY;IAiBtB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IA4BpC,KAAK;IAIL,OAAO,CAAC,CAAC,SAAe;IAQxB,IAAI,CAAC,CAAC,SAAe;IAKrB,KAAK;CASN;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"split-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/split-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAmC,MAAM,gBAAgB,CAAC;AAE3F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AASpD;;GAEG;AACH,qBACa,UAAW,SAAQ,WAAW;IACzC;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACyB,KAAK,SAAM;IAEvB,MAAM,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACtD,OAAO,SAAK;IACZ,YAAY,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAErC,MAAM,CAAC,MAAM,iBAkDO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAWhC,SAAS,CAAC,YAAY;IAiBtB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IA4BpC,KAAK;IAIL,OAAO,CAAC,CAAC,SAAe;IAQxB,IAAI,CAAC,CAAC,SAAe;IAKrB,KAAK;CASN;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;QAC1B,eAAe,EAAE,UAAU,CAAC;KAC7B;CACF"}

package/web-components/input/split-input.js

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { css, html, property, query, queryAll } from "../../deps.js";
-import { createScope, cssvarValues, define } from "../../root.js";
-import { InputElement } from "./input.js";
+import { css, html, property, query, queryAll } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
+import { GodownInput } from "../../supers/input.js";
+import { createScope, cssvarValues } from "../../supers/root.js";
 const FOCUS = "focus";
 const defineName = "split-input";
 const cssScope = createScope(defineName);
 /**
- * SplitInput renders multiple inputs.
+ * {@linkcode SplitInput } renders multiple inputs.
  */
-let SplitInput = class SplitInput extends InputElement {
+let SplitInput = class SplitInput extends GodownInput {
     constructor() {
         super(...arguments);
         /**
@@ -103,7 +104,7 @@ let SplitInput = class SplitInput extends InputElement {
     }
 };
 SplitInput.styles = [
-    InputElement.styles,
+    GodownInput.styles,
     css `
       :host {
         ${cssScope}--outline: .15em solid var( ${cssvarValues.input}--outline-color);

package/web-components/input/split-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/split-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query, queryAll } from \"../../deps.js\";\nimport { type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst FOCUS = \"focus\";\n\nconst defineName = \"split-input\";\n\nconst cssScope = createScope(defineName);\n\n/**\n * SplitInput renders multiple inputs.\n */\n@define(defineName)\nexport class SplitInput extends InputElement {\n  /**\n   * The number of simulated input boxes.\n   */\n  @property({ type: Number }) max = 6;\n  /**\n   * Active index.\n   */\n  @property({ type: Number }) index = -1;\n\n  @query(\"input\") _input: HTMLInputElement;\n  @queryAll(\"span\") _spans: NodeListOf<HTMLSpanElement>;\n  current = 0;\n  currentValue: (string | null)[] = [];\n\n  static styles = [\n    InputElement.styles,\n    css`\n      :host {\n        ${cssScope}--outline: .15em solid var( ${cssvarValues.input}--outline-color);\n        margin: var(${cssvarValues.input}--outline-width);\n        width: fit-content;\n        border-radius: 1px;\n      }\n\n      * {\n        font-size: 1em;\n        border-radius: inherit;\n      }\n\n      div {\n        vertical-align: top;\n        position: relative;\n        display: inline-flex;\n        gap: 0.25em;\n      }\n\n      span {\n        box-sizing: content-box;\n        vertical-align: top;\n        display: inline-flex;\n        width: 1.45em;\n        height: 1.45em;\n        pointer-events: all;\n      }\n\n      i {\n        height: inherit;\n        width: 100%;\n        z-index: 1;\n        background-color: var(${cssvarValues.input}--false);\n        text-align: center;\n      }\n\n      input {\n        position: absolute;\n        opacity: 0;\n        left: 0;\n        top: 0;\n      }\n\n      .focus i {\n        outline: var(${cssScope}--outline);\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`\n      <div>\n        ${Array(this.max)\n          .fill(0)\n          .map(() => html`<span><i></i></span>`)}\n        <input @input=\"${this._handleInput}\" />\n      </div>\n    `;\n  }\n\n  protected firstUpdated() {\n    this.currentValue = this.value.split(\"\").concat(Array(this.max - this.value.length).fill(null));\n    this.current = this.index < 0 || this.index > this.max ? this.currentValue.indexOf(null) : this.index;\n    this._spans.forEach((span, index) => {\n      this.addEvent(span, \"click\", () => {\n        this.current = index;\n        this.focusAt();\n        this._input.focus();\n      });\n    });\n    this.addEvent(document, \"click\", (e) => {\n      if (!this.contains(e.target as Node)) {\n        this.blur();\n      }\n    });\n  }\n\n  protected _handleInput(e: InputEvent) {\n    if (e.data === null) {\n      if (this.currentValue[this.current] !== null) {\n        this.currentValue[this.current] = null;\n      } else {\n        this.currentValue[this.current - 1] = null;\n        this.current = this.current - 1 < 0 ? 0 : this.current - 1;\n      }\n    } else {\n      this.currentValue[this.current] = e.data;\n      if (this.current + 1 >= this.max) {\n        this.current = this.currentValue.indexOf(null);\n        if (this.current === -1) {\n          this.blur();\n        }\n      } else {\n        this.current += 1;\n      }\n    }\n    this.focus();\n    this._spans.forEach((span, index) => {\n      span.querySelector(\"i\").innerText = this.currentValue[index] || \"\";\n    });\n    this.value = this.currentValue.join(\"\");\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n  }\n\n  focus() {\n    this.focusAt();\n  }\n\n  focusAt(i = this.current) {\n    this._spans.forEach((span) => {\n      span.classList.remove(FOCUS);\n    });\n    this._spans[i]?.classList.add(FOCUS);\n    this._input.value = \"\";\n  }\n\n  blur(i = this.current) {\n    this._spans[i]?.classList.remove(FOCUS);\n    this._input.blur();\n  }\n\n  reset() {\n    this.currentValue = Array(this.max).fill(null);\n    this.current = 0;\n    this._spans.forEach((span) => {\n      span.querySelector(\"i\").innerText = \"\";\n    });\n    this.value = \"\";\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value }));\n  }\n}\n\nexport default SplitInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"split-input\": SplitInput;\n  }\n}\n"]}
+{"version":3,"file":"split-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/split-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC3F,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEjE,MAAM,KAAK,GAAG,OAAO,CAAC;AAEtB,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,MAAM,QAAQ,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAEzC;;GAEG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;QACL;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QACpC;;WAEG;QACyB,UAAK,GAAG,CAAC,CAAC,CAAC;QAIvC,YAAO,GAAG,CAAC,CAAC;QACZ,iBAAY,GAAsB,EAAE,CAAC;IAwIvC,CAAC;IAlFW,MAAM;QACd,OAAO,IAAI,CAAA;;UAEL,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;aACd,IAAI,CAAC,CAAC,CAAC;aACP,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA,sBAAsB,CAAC;yBACvB,IAAI,CAAC,YAAY;;KAErC,CAAC;IACJ,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAChG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACtG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE;gBAChC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,IAAI,CAAC,OAAO,EAAE,CAAC;gBACf,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACtB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACrC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;gBACrC,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAES,YAAY,CAAC,CAAa;QAClC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC7C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;gBAC3C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;YAC7D,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;YACzC,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;gBACjC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBAC/C,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC;oBACxB,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;YACpB,CAAC;QACH,CAAC;QACD,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAClC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACrE,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACpG,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,KAAK;QACH,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO;QACtB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IACzB,CAAC;IAED,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO;QACnB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACjB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;;AArIM,iBAAM,GAAG;IACd,WAAW,CAAC,MAAM;IAClB,GAAG,CAAA;;UAEG,QAAQ,+BAA+B,YAAY,CAAC,KAAK;sBAC7C,YAAY,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8BR,YAAY,CAAC,KAAK;;;;;;;;;;;;uBAY3B,QAAQ;;KAE1B;CACgB,AAlDN,CAkDO;AA7DQ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAS;AAIR;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAY;AAEvB;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AACvB;IAAjB,QAAQ,CAAC,MAAM,CAAC;0CAAqC;AAX3C,UAAU;IADtB,MAAM,CAAC,UAAU,CAAC;GACN,UAAU,CAqJtB;;AAED,eAAe,UAAU,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, query, queryAll } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { type HTMLTemplate } from \"../../lib/templates.js\";\nimport { GodownInput } from \"../../supers/input.js\";\nimport { createScope, cssvarValues } from \"../../supers/root.js\";\n\nconst FOCUS = \"focus\";\n\nconst defineName = \"split-input\";\n\nconst cssScope = createScope(defineName);\n\n/**\n * {@linkcode SplitInput } renders multiple inputs.\n */\n@define(defineName)\nexport class SplitInput extends GodownInput {\n  /**\n   * The number of simulated input boxes.\n   */\n  @property({ type: Number }) max = 6;\n  /**\n   * Active index.\n   */\n  @property({ type: Number }) index = -1;\n\n  @query(\"input\") _input: HTMLInputElement;\n  @queryAll(\"span\") _spans: NodeListOf<HTMLSpanElement>;\n  current = 0;\n  currentValue: (string | null)[] = [];\n\n  static styles = [\n    GodownInput.styles,\n    css`\n      :host {\n        ${cssScope}--outline: .15em solid var( ${cssvarValues.input}--outline-color);\n        margin: var(${cssvarValues.input}--outline-width);\n        width: fit-content;\n        border-radius: 1px;\n      }\n\n      * {\n        font-size: 1em;\n        border-radius: inherit;\n      }\n\n      div {\n        vertical-align: top;\n        position: relative;\n        display: inline-flex;\n        gap: 0.25em;\n      }\n\n      span {\n        box-sizing: content-box;\n        vertical-align: top;\n        display: inline-flex;\n        width: 1.45em;\n        height: 1.45em;\n        pointer-events: all;\n      }\n\n      i {\n        height: inherit;\n        width: 100%;\n        z-index: 1;\n        background-color: var(${cssvarValues.input}--false);\n        text-align: center;\n      }\n\n      input {\n        position: absolute;\n        opacity: 0;\n        left: 0;\n        top: 0;\n      }\n\n      .focus i {\n        outline: var(${cssScope}--outline);\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`\n      <div>\n        ${Array(this.max)\n          .fill(0)\n          .map(() => html`<span><i></i></span>`)}\n        <input @input=\"${this._handleInput}\" />\n      </div>\n    `;\n  }\n\n  protected firstUpdated() {\n    this.currentValue = this.value.split(\"\").concat(Array(this.max - this.value.length).fill(null));\n    this.current = this.index < 0 || this.index > this.max ? this.currentValue.indexOf(null) : this.index;\n    this._spans.forEach((span, index) => {\n      this.addEvent(span, \"click\", () => {\n        this.current = index;\n        this.focusAt();\n        this._input.focus();\n      });\n    });\n    this.addEvent(document, \"click\", (e) => {\n      if (!this.contains(e.target as Node)) {\n        this.blur();\n      }\n    });\n  }\n\n  protected _handleInput(e: InputEvent) {\n    if (e.data === null) {\n      if (this.currentValue[this.current] !== null) {\n        this.currentValue[this.current] = null;\n      } else {\n        this.currentValue[this.current - 1] = null;\n        this.current = this.current - 1 < 0 ? 0 : this.current - 1;\n      }\n    } else {\n      this.currentValue[this.current] = e.data;\n      if (this.current + 1 >= this.max) {\n        this.current = this.currentValue.indexOf(null);\n        if (this.current === -1) {\n          this.blur();\n        }\n      } else {\n        this.current += 1;\n      }\n    }\n    this.focus();\n    this._spans.forEach((span, index) => {\n      span.querySelector(\"i\").innerText = this.currentValue[index] || \"\";\n    });\n    this.value = this.currentValue.join(\"\");\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n  }\n\n  focus() {\n    this.focusAt();\n  }\n\n  focusAt(i = this.current) {\n    this._spans.forEach((span) => {\n      span.classList.remove(FOCUS);\n    });\n    this._spans[i]?.classList.add(FOCUS);\n    this._input.value = \"\";\n  }\n\n  blur(i = this.current) {\n    this._spans[i]?.classList.remove(FOCUS);\n    this._input.blur();\n  }\n\n  reset() {\n    this.currentValue = Array(this.max).fill(null);\n    this.current = 0;\n    this._spans.forEach((span) => {\n      span.querySelector(\"i\").innerText = \"\";\n    });\n    this.value = \"\";\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value }));\n  }\n}\n\nexport default SplitInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"split-input\": SplitInput;\n    \"g-split-input\": SplitInput;\n  }\n}\n"]}

package/web-components/input/switch-input.d.ts

@@ -1,12 +1,12 @@
-import { type CSSResultGroup } from "../../deps.js";
+import { type CSSResultGroup } from "../../.deps.js";
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { InputElement } from "./input.js";
+import { GodownInput } from "../../supers/input.js";
 /**
- * Switch renders a switch.
+ * {@linkcode SwitchInput } renders a switch.
  *
  * Inspired by Steam.
  */
-export declare class SwitchInput extends InputElement {
+export declare class SwitchInput extends GodownInput {
     /**
      * Border style.
      */
@@ -43,6 +43,7 @@ export default SwitchInput;
 declare global {
     interface HTMLElementTagNameMap {
         "switch-input": SwitchInput;
+        "g-switch-input": SwitchInput;
     }
 }
 //# sourceMappingURL=switch-input.d.ts.map

package/web-components/input/switch-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/switch-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,eAAe,CAAC;AAChF,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAM1C;;;;GAIG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C;;OAEG;IACS,IAAI,EAAE,KAAK,GAAG,MAAM,CAAU;IAC1C;;OAEG;IAC0B,OAAO,UAAS;IAC7C;;OAEG;IAC0B,QAAQ,UAAS;IAC9C;;OAEG;IACS,GAAG,SAAW;IAC1B;;OAEG;IACS,IAAI,SAAc;IAC9B;;OAEG;IACS,KAAK,SAAQ;IAET,MAAM,EAAE,gBAAgB,CAAC;IAEzC,MAAM,CAAC,MAAM,iBA4HO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAWhC,KAAK;IAKL,iBAAiB;IASjB,SAAS,CAAC,aAAa;IAMvB,SAAS,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;CAG/B;AAED,eAAe,WAAW,CAAC;AAE3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"switch-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/switch-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,gBAAgB,CAAC;AAEjF,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAOpD;;;;GAIG;AACH,qBACa,WAAY,SAAQ,WAAW;IAC1C;;OAEG;IACS,IAAI,EAAE,KAAK,GAAG,MAAM,CAAU;IAC1C;;OAEG;IAC0B,OAAO,UAAS;IAC7C;;OAEG;IAC0B,QAAQ,UAAS;IAC9C;;OAEG;IACS,GAAG,SAAW;IAC1B;;OAEG;IACS,IAAI,SAAc;IAC9B;;OAEG;IACS,KAAK,SAAQ;IAET,MAAM,EAAE,gBAAgB,CAAC;IAEzC,MAAM,CAAC,MAAM,iBA4HO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAWhC,KAAK;IAKL,iBAAiB;IASjB,SAAS,CAAC,aAAa;IAMvB,SAAS,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;CAG/B;AAED,eAAe,WAAW,CAAC;AAE3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;QAC5B,gBAAgB,EAAE,WAAW,CAAC;KAC/B;CACF"}

package/web-components/input/switch-input.js

@@ -1,16 +1,17 @@
 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 } from "../../lib/templates.js";
-import { createScope, cssvarValues, define } from "../../root.js";
-import { InputElement } from "./input.js";
+import { GodownInput } from "../../supers/input.js";
+import { createScope, cssvarValues } from "../../supers/root.js";
 const defineName = "switch-input";
 const cssScope = createScope(defineName);
 /**
- * Switch renders a switch.
+ * {@linkcode SwitchInput } renders a switch.
  *
  * Inspired by Steam.
  */
-let SwitchInput = class SwitchInput extends InputElement {
+let SwitchInput = class SwitchInput extends GodownInput {
     constructor() {
         super(...arguments);
         /**
@@ -71,7 +72,7 @@ let SwitchInput = class SwitchInput extends InputElement {
     }
 };
 SwitchInput.styles = [
-    InputElement.styles,
+    GodownInput.styles,
     css `
       :host {
         ${cssScope}--width: 3em;

package/web-components/input/switch-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/switch-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst defineName = \"switch-input\";\n\nconst cssScope = createScope(defineName);\n\n/**\n * Switch renders a switch.\n *\n * Inspired by Steam.\n */\n@define(defineName)\nexport class SwitchInput extends InputElement {\n  /**\n   * Border style.\n   */\n  @property() base: \"fat\" | \"rect\" = \"rect\";\n  /**\n   * Whether this element is selected or not.\n   */\n  @property({ type: Boolean }) checked = false;\n  /**\n   * Whether this element is disabled or not.\n   */\n  @property({ type: Boolean }) disabled = false;\n  /**\n   * Parsed by JSON.parse to checked.\n   */\n  @property() def = \"false\";\n  /**\n   * Input name.\n   */\n  @property() name = \"checkbox\";\n  /**\n   * Input value.\n   */\n  @property() value = \"on\";\n\n  @query(\"input\") _input: HTMLInputElement;\n\n  static styles = [\n    InputElement.styles,\n    css`\n      :host {\n        ${cssScope}--width: 3em;\n        ${cssScope}--height: calc(var(${cssScope}--width) / 2);\n        width: var(${cssScope}--width);\n        height: var(${cssScope}--height);\n      }\n\n      :host,\n      span {\n        display: inline-flex;\n        font-size: inherit;\n        position: relative;\n        align-items: center;\n        border-radius: inherit;\n      }\n\n      span {\n        width: inherit;\n        height: inherit;\n      }\n\n      input {\n        width: inherit;\n        height: inherit;\n        margin: 0;\n        outline: none;\n        appearance: none;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        position: relative;\n        font-size: inherit;\n        background: var(${cssvarValues.input}--false);\n        border-radius: inherit;\n        transition: all 0.3s;\n      }\n\n      aside {\n        pointer-events: none;\n        transition: 0.3s;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n        font-size: inherit;\n        overflow: hidden;\n        border-radius: inherit;\n      }\n\n      aside div {\n        height: 100%;\n      }\n\n      input[disabled] ~ aside {\n        filter: brightness(0.87);\n      }\n\n      .rect div.always {\n        display: none;\n      }\n\n      .always {\n        position: absolute;\n      }\n\n      .rect aside {\n        height: 100%;\n        width: 100%;\n        left: 0;\n      }\n\n      .rect .true,\n      .rect .false {\n        width: 50%;\n        text-align: center;\n        transition: all 0.3s;\n      }\n\n      .rect input:checked ~ aside div.true,\n      .rect .false {\n        background-color: var(${cssvarValues.input}--true);\n      }\n\n      .rect input:checked ~ aside div.false,\n      .rect .true {\n        background: var(${cssvarValues.input}--false);\n      }\n\n      .fat aside {\n        width: 1.2em;\n        height: 1.2em;\n        border-radius: 50%;\n        background: var(${cssvarValues.input}--control);\n        transition: 0.3s;\n        left: 0.15em;\n        top: 0.15em;\n        bottom: 0.15em;\n      }\n\n      .fat {\n        border-radius: 0.75em;\n      }\n\n      .fat input:checked {\n        background: var(${cssvarValues.input}--true);\n      }\n\n      .fat input:checked ~ aside {\n        left: calc(100% - 0.15em - 1.2em);\n        right: 0.15em;\n      }\n\n      .fat input:checked ~ aside div.true,\n      .fat div.false {\n        display: block;\n      }\n\n      .fat input:checked ~ aside div.false,\n      .fat div.true {\n        display: none;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<span class=\"${this.base}\">\n      <input @change=\"${this._handleChange}\" ?disabled=\"${this.disabled}\" ?checked=\"${this.checked}\" name=\"${this.name}\" type=\"checkbox\" />\n      <aside>\n        <div class=\"false\"><slot name=\"false\"></slot></div>\n        <div class=\"always\">${htmlSlot()}<slot name=\"always\"></slot></div>\n        <div class=\"true\"><slot name=\"true\"></slot></div>\n      </aside>\n    </span>`;\n  }\n\n  reset() {\n    this.checked = this.def === \"true\";\n    this._input.checked = this.checked;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.checked) {\n      this.def = \"true\";\n    } else if (this.def === \"true\") {\n      this.checked = true;\n    }\n  }\n\n  protected _handleChange() {\n    this.checked = this._input.checked;\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.checked, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.checked, composed: true }));\n  }\n\n  namevalue(): [string, boolean] {\n    return [this.name, this.checked];\n  }\n}\n\nexport default SwitchInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"switch-input\": SwitchInput;\n  }\n}\n"]}
+{"version":3,"file":"switch-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/switch-input.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 { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { GodownInput } from \"../../supers/input.js\";\nimport { createScope, cssvarValues } from \"../../supers/root.js\";\n\nconst defineName = \"switch-input\";\n\nconst cssScope = createScope(defineName);\n\n/**\n * {@linkcode SwitchInput } renders a switch.\n *\n * Inspired by Steam.\n */\n@define(defineName)\nexport class SwitchInput extends GodownInput {\n  /**\n   * Border style.\n   */\n  @property() base: \"fat\" | \"rect\" = \"rect\";\n  /**\n   * Whether this element is selected or not.\n   */\n  @property({ type: Boolean }) checked = false;\n  /**\n   * Whether this element is disabled or not.\n   */\n  @property({ type: Boolean }) disabled = false;\n  /**\n   * Parsed by JSON.parse to checked.\n   */\n  @property() def = \"false\";\n  /**\n   * Input name.\n   */\n  @property() name = \"checkbox\";\n  /**\n   * Input value.\n   */\n  @property() value = \"on\";\n\n  @query(\"input\") _input: HTMLInputElement;\n\n  static styles = [\n    GodownInput.styles,\n    css`\n      :host {\n        ${cssScope}--width: 3em;\n        ${cssScope}--height: calc(var(${cssScope}--width) / 2);\n        width: var(${cssScope}--width);\n        height: var(${cssScope}--height);\n      }\n\n      :host,\n      span {\n        display: inline-flex;\n        font-size: inherit;\n        position: relative;\n        align-items: center;\n        border-radius: inherit;\n      }\n\n      span {\n        width: inherit;\n        height: inherit;\n      }\n\n      input {\n        width: inherit;\n        height: inherit;\n        margin: 0;\n        outline: none;\n        appearance: none;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        position: relative;\n        font-size: inherit;\n        background: var(${cssvarValues.input}--false);\n        border-radius: inherit;\n        transition: all 0.3s;\n      }\n\n      aside {\n        pointer-events: none;\n        transition: 0.3s;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n        font-size: inherit;\n        overflow: hidden;\n        border-radius: inherit;\n      }\n\n      aside div {\n        height: 100%;\n      }\n\n      input[disabled] ~ aside {\n        filter: brightness(0.87);\n      }\n\n      .rect div.always {\n        display: none;\n      }\n\n      .always {\n        position: absolute;\n      }\n\n      .rect aside {\n        height: 100%;\n        width: 100%;\n        left: 0;\n      }\n\n      .rect .true,\n      .rect .false {\n        width: 50%;\n        text-align: center;\n        transition: all 0.3s;\n      }\n\n      .rect input:checked ~ aside div.true,\n      .rect .false {\n        background-color: var(${cssvarValues.input}--true);\n      }\n\n      .rect input:checked ~ aside div.false,\n      .rect .true {\n        background: var(${cssvarValues.input}--false);\n      }\n\n      .fat aside {\n        width: 1.2em;\n        height: 1.2em;\n        border-radius: 50%;\n        background: var(${cssvarValues.input}--control);\n        transition: 0.3s;\n        left: 0.15em;\n        top: 0.15em;\n        bottom: 0.15em;\n      }\n\n      .fat {\n        border-radius: 0.75em;\n      }\n\n      .fat input:checked {\n        background: var(${cssvarValues.input}--true);\n      }\n\n      .fat input:checked ~ aside {\n        left: calc(100% - 0.15em - 1.2em);\n        right: 0.15em;\n      }\n\n      .fat input:checked ~ aside div.true,\n      .fat div.false {\n        display: block;\n      }\n\n      .fat input:checked ~ aside div.false,\n      .fat div.true {\n        display: none;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<span class=\"${this.base}\">\n      <input @change=\"${this._handleChange}\" ?disabled=\"${this.disabled}\" ?checked=\"${this.checked}\" name=\"${this.name}\" type=\"checkbox\" />\n      <aside>\n        <div class=\"false\"><slot name=\"false\"></slot></div>\n        <div class=\"always\">${htmlSlot()}<slot name=\"always\"></slot></div>\n        <div class=\"true\"><slot name=\"true\"></slot></div>\n      </aside>\n    </span>`;\n  }\n\n  reset() {\n    this.checked = this.def === \"true\";\n    this._input.checked = this.checked;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.checked) {\n      this.def = \"true\";\n    } else if (this.def === \"true\") {\n      this.checked = true;\n    }\n  }\n\n  protected _handleChange() {\n    this.checked = this._input.checked;\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.checked, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.checked, composed: true }));\n  }\n\n  namevalue(): [string, boolean] {\n    return [this.name, this.checked];\n  }\n}\n\nexport default SwitchInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"switch-input\": SwitchInput;\n    \"g-switch-input\": SwitchInput;\n  }\n}\n"]}

package/web-components/layout/divider.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLTemplate } from "../../lib/templates.js";
+import { GodownElement } from "../../supers/root.js";
+/**
+ * {@linkcode Divider} similar to hr.
+ */
+export declare class Divider extends GodownElement {
+    /**
+     * Enable vertical.
+     */
+    v: boolean;
+    static styles: import("lit").CSSResult[];
+    protected render(): HTMLTemplate;
+}
+export default Divider;
+declare global {
+    interface HTMLElementTagNameMap {
+        "divider-line": Divider;
+        "div-line": Divider;
+        "g-divider": Divider;
+    }
+}
+//# sourceMappingURL=divider.d.ts.map

package/web-components/layout/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/divider.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAe,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAKlE;;GAEG;AACH,qBACa,OAAQ,SAAQ,aAAa;IACxC;;OAEG;IAC0B,CAAC,UAAS;IAEvC,MAAM,CAAC,MAAM,4BAiDX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;CAOjC;AAED,eAAe,OAAO,CAAC;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,OAAO,CAAC;QACxB,UAAU,EAAE,OAAO,CAAC;QACpB,WAAW,EAAE,OAAO,CAAC;KACtB;CACF"}

package/web-components/layout/{divider-line.js → divider.js}

@@ -1,13 +1,14 @@
 import { __decorate } from "tslib";
-import { css, html, property } from "../../deps.js";
+import { css, html, property } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot } from "../../lib/templates.js";
-import { createScope, define, GodownElement } from "../../root.js";
-const defineName = "divider-line";
+import { createScope, GodownElement } from "../../supers/root.js";
+const defineName = "divider";
 const cssvarScope = createScope(defineName);
 /**
- * DividerLine similar to hr.
+ * {@linkcode Divider} similar to hr.
  */
-let DividerLine = class DividerLine extends GodownElement {
+let Divider = class Divider extends GodownElement {
     constructor() {
         super(...arguments);
         /**
@@ -23,7 +24,7 @@ let DividerLine = class DividerLine extends GodownElement {
     </div>`;
     }
 };
-DividerLine.styles = [
+Divider.styles = [
     css `
       :host {
         ${cssvarScope}--before-length: auto;
@@ -75,10 +76,10 @@ DividerLine.styles = [
 ];
 __decorate([
     property({ type: Boolean })
-], DividerLine.prototype, "v", void 0);
-DividerLine = __decorate([
+], Divider.prototype, "v", void 0);
+Divider = __decorate([
     define(defineName)
-], DividerLine);
-export { DividerLine };
-export default DividerLine;
-//# sourceMappingURL=divider-line.js.map
+], Divider);
+export { Divider };
+export default Divider;
+//# sourceMappingURL=divider.js.map

package/web-components/layout/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/divider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAElE,MAAM,UAAU,GAAG,SAAS,CAAC;AAC7B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,aAAa;IAAnC;;QACL;;WAEG;QAC0B,MAAC,GAAG,KAAK,CAAC;IA4DzC,CAAC;IAPW,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QAEvC,QAAQ,EAAE;;WAEP,CAAC;IACV,CAAC;;AAzDM,cAAM,GAAG;IACd,GAAG,CAAA;;UAEG,WAAW;UACX,WAAW;UACX,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA4BC,WAAW;yBACR,WAAW;;;sBAGd,WAAW;yBACR,WAAW;;;qBAGf,WAAW;0BACN,WAAW;;;qBAGhB,WAAW;0BACN,WAAW;;KAEhC;CACF,AAjDY,CAiDX;AAnD2B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCAAW;AAJ5B,OAAO;IADnB,MAAM,CAAC,UAAU,CAAC;GACN,OAAO,CAgEnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["import { css, html, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"divider\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Divider} similar to hr.\n */\n@define(defineName)\nexport class Divider extends GodownElement {\n  /**\n   * Enable vertical.\n   */\n  @property({ type: Boolean }) v = false;\n\n  static styles = [\n    css`\n      :host {\n        ${cssvarScope}--before-length: auto;\n        ${cssvarScope}--after-length: auto;\n        ${cssvarScope}--breadth: .125em;\n        display: block;\n        color: currentColor;\n        background: none;\n      }\n\n      div {\n        display: flex;\n        align-items: center;\n        border-radius: inherit;\n        width: 100%;\n      }\n\n      hr {\n        border-radius: inherit;\n        margin: 0;\n        border: 0;\n        flex: 1;\n        background: currentColor;\n      }\n\n      .v {\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .before {\n        height: var(${cssvarScope}--breadth);\n        max-width: var(${cssvarScope}--before-length);\n      }\n      .after {\n        height: var(${cssvarScope}--breadth);\n        max-width: var(${cssvarScope}--after-length);\n      }\n      .v .before {\n        width: var(${cssvarScope}--breadth);\n        max-height: var(${cssvarScope}--before-length);\n      }\n      .v .after {\n        width: var(${cssvarScope}--breadth);\n        max-height: var(${cssvarScope}--after-length);\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`<div class=\"${this.v ? \"v\" : \"\"}\">\n      <hr class=\"before\" />\n      ${htmlSlot()}\n      <hr class=\"after\" />\n    </div>`;\n  }\n}\n\nexport default Divider;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"divider-line\": Divider;\n    \"div-line\": Divider;\n    \"g-divider\": Divider;\n  }\n}\n"]}

package/web-components/layout/flex-flow.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../root.js";
+import { GodownElement } from "../../supers/root.js";
 /**
- * FlexFlow controls the flex layout based on the width of the screen.
+ * {@linkcode FlexFlow} controls the flex layout based on the width of the screen.
  */
 export declare class FlexFlow extends GodownElement {
     /**
@@ -19,6 +19,7 @@ export default FlexFlow;
 declare global {
     interface HTMLElementTagNameMap {
         "flex-flow": FlexFlow;
+        "g-flex-flow": FlexFlow;
     }
 }
 //# sourceMappingURL=flex-flow.d.ts.map

package/web-components/layout/flex-flow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flex-flow.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/flex-flow.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAU,aAAa,EAAE,MAAM,eAAe,CAAC;AAItD;;GAEG;AACH,qBACa,QAAS,SAAQ,aAAa;IACzC;;OAEG;IACS,QAAQ,SAA8B;IAClD;;OAEG;IACS,MAAM,SAAW;IAE7B,MAAM,CAAC,MAAM,4BAMX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;CAUjC;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"flex-flow.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/flex-flow.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIrD;;GAEG;AACH,qBACa,QAAS,SAAQ,aAAa;IACzC;;OAEG;IACS,QAAQ,SAA8B;IAClD;;OAEG;IACS,MAAM,SAAW;IAE7B,MAAM,CAAC,MAAM,4BAMX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;CAUjC;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;QACtB,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}

package/web-components/layout/flex-flow.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
-import { css, html, property } from "../../deps.js";
+import { css, html, property } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot, htmlStyle } from "../../lib/templates.js";
-import { define, GodownElement } from "../../root.js";
+import { GodownElement } from "../../supers/root.js";
 const defineName = "flex-flow";
 /**
- * FlexFlow controls the flex layout based on the width of the screen.
+ * {@linkcode FlexFlow} controls the flex layout based on the width of the screen.
  */
 let FlexFlow = class FlexFlow extends GodownElement {
     constructor() {

package/web-components/layout/flex-flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex-flow.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/flex-flow.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAqB,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,UAAU,GAAG,WAAW,CAAC;AAE/B;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,aAAQ,GAAG,0BAA0B,CAAC;QAClD;;WAEG;QACS,WAAM,GAAG,OAAO,CAAC;IAoB/B,CAAC;IAVW,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QACzC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,aAAa,IAAI,QAAQ,CAAC;QAChE,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,IAAI,QAAQ,CAAC;QACtD,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC;QACjC,MAAM,KAAK,GAAG,wBAAwB,aAAa,cAAc,QAAQ,uBAAuB,CAAC,0BAA0B,cAAc,cAAc,SAAS,GAAG,CAAC;QACpK,OAAO,IAAI,CAAA,GAAG,QAAQ,EAAE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACjD,CAAC;;AAjBM,eAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AAZU;IAAX,QAAQ,EAAE;0CAAuC;AAItC;IAAX,QAAQ,EAAE;wCAAkB;AARlB,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CA4BpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { css, html, property } from \"../../deps.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"flex-flow\";\n\n/**\n * FlexFlow controls the flex layout based on the width of the screen.\n */\n@define(defineName)\nexport class FlexFlow extends GodownElement {\n  /**\n   * The flex-flow behavior.\n   */\n  @property() flexflow = \"row nowrap column nowrap\";\n  /**\n   * The width of the screen for the position change.\n   */\n  @property() mobile = \"720px\";\n\n  static styles = [\n    css`\n      :host {\n        display: flex !important;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    const flexflow = this.flexflow.split(/\\s+/);\n    const flexDirection = flexflow[0] || \"row\";\n    const flexWrap = flexflow[1] || \"nowrap\";\n    const flexDirectionM = flexflow[2] || flexDirection || \"column\";\n    const flexWrapM = flexflow[3] || flexWrap || \"nowrap\";\n    const m = this.mobile || \"720px\";\n    const style = `:host{flex-direction:${flexDirection};flex-wrap:${flexWrap};}@media(max-width: ${m}){:host{flex-direction:${flexDirectionM};flex-wrap:${flexWrapM}}`;\n    return html`${htmlSlot()} ${htmlStyle(style)}`;\n  }\n}\n\nexport default FlexFlow;\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"flex-flow\": FlexFlow;\n  }\n}\n"]}
+{"version":3,"file":"flex-flow.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/flex-flow.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAqB,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,UAAU,GAAG,WAAW,CAAC;AAE/B;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,aAAQ,GAAG,0BAA0B,CAAC;QAClD;;WAEG;QACS,WAAM,GAAG,OAAO,CAAC;IAoB/B,CAAC;IAVW,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QACzC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,aAAa,IAAI,QAAQ,CAAC;QAChE,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,IAAI,QAAQ,CAAC;QACtD,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC;QACjC,MAAM,KAAK,GAAG,wBAAwB,aAAa,cAAc,QAAQ,uBAAuB,CAAC,0BAA0B,cAAc,cAAc,SAAS,GAAG,CAAC;QACpK,OAAO,IAAI,CAAA,GAAG,QAAQ,EAAE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACjD,CAAC;;AAjBM,eAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AAZU;IAAX,QAAQ,EAAE;0CAAuC;AAItC;IAAX,QAAQ,EAAE;wCAAkB;AARlB,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CA4BpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { css, html, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"flex-flow\";\n\n/**\n * {@linkcode FlexFlow} controls the flex layout based on the width of the screen.\n */\n@define(defineName)\nexport class FlexFlow extends GodownElement {\n  /**\n   * The flex-flow behavior.\n   */\n  @property() flexflow = \"row nowrap column nowrap\";\n  /**\n   * The width of the screen for the position change.\n   */\n  @property() mobile = \"720px\";\n\n  static styles = [\n    css`\n      :host {\n        display: flex !important;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    const flexflow = this.flexflow.split(/\\s+/);\n    const flexDirection = flexflow[0] || \"row\";\n    const flexWrap = flexflow[1] || \"nowrap\";\n    const flexDirectionM = flexflow[2] || flexDirection || \"column\";\n    const flexWrapM = flexflow[3] || flexWrap || \"nowrap\";\n    const m = this.mobile || \"720px\";\n    const style = `:host{flex-direction:${flexDirection};flex-wrap:${flexWrap};}@media(max-width: ${m}){:host{flex-direction:${flexDirectionM};flex-wrap:${flexWrapM}}`;\n    return html`${htmlSlot()} ${htmlStyle(style)}`;\n  }\n}\n\nexport default FlexFlow;\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"flex-flow\": FlexFlow;\n    \"g-flex-flow\": FlexFlow;\n  }\n}\n"]}

package/web-components/layout/nav-layout.d.ts

@@ -1,8 +1,8 @@
-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";
 /**
- * NavLayout renders a navigation, an optional top header, an optional bottom footer.
+ * {@linkcode NavLayout} renders a navigation, an optional top header, an optional bottom footer.
  *
  * @slot - The main content of the layout.
  *
@@ -32,6 +32,7 @@ export default NavLayout;
 declare global {
     interface HTMLElementTagNameMap {
         "nav-layout": NavLayout;
+        "g-nav-layout": NavLayout;
     }
 }
 //# sourceMappingURL=nav-layout.d.ts.map

package/web-components/layout/nav-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-layout.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/nav-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAQ,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAqC,aAAa,EAAE,MAAM,eAAe,CAAC;AAKjF;;;;;;;;;;GAUG;AACH,qBACa,SAAU,SAAQ,aAAa;IAC1C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEf,MAAM,CAAC,MAAM,iBAoCO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;CAMjC;AAED,eAAe,SAAS,CAAC;AAEzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"nav-layout.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/nav-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAQ,MAAM,gBAAgB,CAAC;AAEhE,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAA6B,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAKhF;;;;;;;;;;GAUG;AACH,qBACa,SAAU,SAAQ,aAAa;IAC1C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEf,MAAM,CAAC,MAAM,iBAoCO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;CAMjC;AAED,eAAe,SAAS,CAAC;AAEzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;QACxB,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/web-components/layout/nav-layout.js

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
-import { css, html } from "../../deps.js";
+import { css, html } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot } from "../../lib/templates.js";
-import { createScope, cssvarValues, define, GodownElement } from "../../root.js";
+import { createScope, cssvarValues, GodownElement } from "../../supers/root.js";
 const defineName = "nav-layout";
 const cssvarScope = createScope(defineName);
 /**
- * NavLayout renders a navigation, an optional top header, an optional bottom footer.
+ * {@linkcode NavLayout} renders a navigation, an optional top header, an optional bottom footer.
  *
  * @slot - The main content of the layout.
  *