godown 2.7.5 → 2.7.6

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

@@ -1,15 +1,17 @@
 import { __decorate } from "tslib";
-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";
+import { css, html, property, query, queryAll } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import GodownSuperInput from "../../proto/super-input.js";
+import { createScope, cssGlobalVars } from "../../styles/global.js";
+import { inputStyle } from "../../styles/inputStyle.js";
 const FOCUS = "focus";
-const defineName = "split-input";
-const cssScope = createScope(defineName);
+const protoName = "split-input";
+const cssScope = createScope(protoName);
 /**
  * {@linkcode SplitInput } renders multiple inputs.
  */
-let SplitInput = class SplitInput extends GodownInput {
+let SplitInput = class SplitInput extends GodownSuperInput {
     constructor() {
         super(...arguments);
         /**
@@ -25,11 +27,18 @@ let SplitInput = class SplitInput extends GodownInput {
     }
     render() {
         return html `
-      <div>
+      <div part="root">
         ${Array(this.max)
             .fill(0)
-            .map(() => html `<span><i></i></span>`)}
-        <input @input="${this._handleInput}" />
+            .map(() => html `<span part="outline"><i part="inside"></i></span>`)}
+        <input
+          part="input"
+          id="${this.makeId}"
+          @blur=${() => {
+            this.blurAt(this.current);
+        }}
+          @input="${this._handleInput}"
+        />
       </div>
     `;
     }
@@ -39,15 +48,10 @@ let SplitInput = class SplitInput extends GodownInput {
         this._spans.forEach((span, index) => {
             this.addEvent(span, "click", () => {
                 this.current = index;
-                this.focusAt();
+                this.focusAt(this.current);
                 this._input.focus();
             });
         });
-        this.addEvent(document, "click", (e) => {
-            if (!this.contains(e.target)) {
-                this.blur();
-            }
-        });
     }
     _handleInput(e) {
         if (e.data === null) {
@@ -64,7 +68,7 @@ let SplitInput = class SplitInput extends GodownInput {
             if (this.current + 1 >= this.max) {
                 this.current = this.currentValue.indexOf(null);
                 if (this.current === -1) {
-                    this.blur();
+                    this.blurAt(this.current);
                 }
             }
             else {
@@ -80,16 +84,19 @@ let SplitInput = class SplitInput extends GodownInput {
         this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
     }
     focus() {
-        this.focusAt();
+        this.focusAt(this.current);
     }
-    focusAt(i = this.current) {
+    focusAt(i) {
         this._spans.forEach((span) => {
             span.classList.remove(FOCUS);
         });
         this._spans[i]?.classList.add(FOCUS);
         this._input.value = "";
     }
-    blur(i = this.current) {
+    blur() {
+        this.blurAt(this.current);
+    }
+    blurAt(i) {
         this._spans[i]?.classList.remove(FOCUS);
         this._input.blur();
     }
@@ -103,57 +110,6 @@ let SplitInput = class SplitInput extends GodownInput {
         this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
     }
 };
-SplitInput.styles = [
-    GodownInput.styles,
-    css `
-      :host {
-        ${cssScope}--outline: .15em solid var( ${cssvarValues.input}--outline-color);
-        margin: var(${cssvarValues.input}--outline-width);
-        width: fit-content;
-        border-radius: 1px;
-      }
-
-      * {
-        font-size: 1em;
-        border-radius: inherit;
-      }
-
-      div {
-        vertical-align: top;
-        position: relative;
-        display: inline-flex;
-        gap: 0.25em;
-      }
-
-      span {
-        box-sizing: content-box;
-        vertical-align: top;
-        display: inline-flex;
-        width: 1.45em;
-        height: 1.45em;
-        pointer-events: all;
-      }
-
-      i {
-        height: inherit;
-        width: 100%;
-        z-index: 1;
-        background-color: var(${cssvarValues.input}--false);
-        text-align: center;
-      }
-
-      input {
-        position: absolute;
-        opacity: 0;
-        left: 0;
-        top: 0;
-      }
-
-      .focus i {
-        outline: var(${cssScope}--outline);
-      }
-    `,
-];
 __decorate([
     property({ type: Number })
 ], SplitInput.prototype, "max", void 0);
@@ -167,7 +123,61 @@ __decorate([
     queryAll("span")
 ], SplitInput.prototype, "_spans", void 0);
 SplitInput = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        inputStyle,
+        css `
+    :host {
+      --${cssScope}--outline: .15em solid var( --${cssGlobalVars.input}--outline-color);
+      margin: var(--${cssGlobalVars.input}--outline-width);
+      color: var(--${cssGlobalVars.foreground});
+      display: inline-block;
+      width: -moz-fit-content;
+      width: fit-content;
+      border-radius: 1px;
+    }
+
+    * {
+      font-size: 1em;
+      border-radius: inherit;
+    }
+
+    div {
+      gap: 0.25em;
+      position: relative;
+      vertical-align: top;
+      display: inline-flex;
+    }
+
+    span {
+      width: 1.45em;
+      height: 1.45em;
+      vertical-align: top;
+      display: inline-flex;
+      box-sizing: content-box;
+    }
+
+    i {
+      z-index: 1;
+      width: 100%;
+      height: inherit;
+      text-align: center;
+      background-color: var(--${cssGlobalVars.input}--background);
+    }
+
+    input {
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      background: none;
+      position: absolute;
+    }
+
+    .focus i {
+      outline: var(--${cssScope}--outline);
+    }
+  `,
+    ])
 ], SplitInput);
 export { SplitInput };
 export default SplitInput;

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 { 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"]}
+{"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, html, property, query, queryAll } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { type HTMLEvent } from \"../../proto/godown-element\";\nimport GodownSuperInput from \"../../proto/super-input.js\";\nimport { createScope, cssGlobalVars } from \"../../styles/global.js\";\nimport { inputStyle } from \"../../styles/inputStyle.js\";\n\nconst FOCUS = \"focus\";\n\nconst protoName = \"split-input\";\n\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode SplitInput } renders multiple inputs.\n */\n@godown(protoName)\n@styles([\n  inputStyle,\n  css`\n    :host {\n      --${cssScope}--outline: .15em solid var( --${cssGlobalVars.input}--outline-color);\n      margin: var(--${cssGlobalVars.input}--outline-width);\n      color: var(--${cssGlobalVars.foreground});\n      display: inline-block;\n      width: -moz-fit-content;\n      width: fit-content;\n      border-radius: 1px;\n    }\n\n    * {\n      font-size: 1em;\n      border-radius: inherit;\n    }\n\n    div {\n      gap: 0.25em;\n      position: relative;\n      vertical-align: top;\n      display: inline-flex;\n    }\n\n    span {\n      width: 1.45em;\n      height: 1.45em;\n      vertical-align: top;\n      display: inline-flex;\n      box-sizing: content-box;\n    }\n\n    i {\n      z-index: 1;\n      width: 100%;\n      height: inherit;\n      text-align: center;\n      background-color: var(--${cssGlobalVars.input}--background);\n    }\n\n    input {\n      width: 100%;\n      height: 100%;\n      opacity: 0;\n      background: none;\n      position: absolute;\n    }\n\n    .focus i {\n      outline: var(--${cssScope}--outline);\n    }\n  `,\n])\nexport class SplitInput extends GodownSuperInput {\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  protected render() {\n    return html`\n      <div part=\"root\">\n        ${Array(this.max)\n          .fill(0)\n          .map(() => html`<span part=\"outline\"><i part=\"inside\"></i></span>`)}\n        <input\n          part=\"input\"\n          id=\"${this.makeId}\"\n          @blur=${() => {\n            this.blurAt(this.current);\n          }}\n          @input=\"${this._handleInput}\"\n        />\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(this.current);\n        this._input.focus();\n      });\n    });\n  }\n\n  protected _handleInput(e: HTMLEvent<HTMLInputElement>) {\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 as string;\n      if (this.current + 1 >= this.max) {\n        this.current = this.currentValue.indexOf(null);\n        if (this.current === -1) {\n          this.blurAt(this.current);\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(this.current);\n  }\n\n  focusAt(i: number) {\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() {\n    this.blurAt(this.current);\n  }\n\n  blurAt(i: number) {\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"]}

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

@@ -1,6 +1,4 @@
-import { type CSSResultGroup } from "../../.deps.js";
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownInput } from "../../supers/input.js";
+import GodownInput from "../../proto/super-input.js";
 /**
  * {@linkcode SwitchInput } renders a switch.
  *
@@ -8,9 +6,13 @@ import { GodownInput } from "../../supers/input.js";
  */
 export declare class SwitchInput extends GodownInput {
     /**
-     * Border style.
+     * @deprecated
      */
     base: "fat" | "rect";
+    /**
+     * Border style.
+     */
+    round: boolean;
     /**
      * Whether this element is selected or not.
      */
@@ -22,28 +24,17 @@ export declare class SwitchInput extends GodownInput {
     /**
      * Parsed by JSON.parse to checked.
      */
-    def: string;
-    /**
-     * Input name.
-     */
-    name: string;
+    default: string;
     /**
      * Input value.
      */
     value: string;
     _input: HTMLInputElement;
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate;
+    protected render(): import("lit").TemplateResult<1>;
     reset(): void;
     connectedCallback(): void;
     protected _handleChange(): void;
     namevalue(): [string, boolean];
 }
 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,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"}
+{"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":"AAGA,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAMrD;;;;GAIG;AACH,qBA0Fa,WAAY,SAAQ,WAAW;IAC1C;;OAEG;IACH,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB;;OAEG;IAEyC,KAAK,UAAS;IAC1D;;OAEG;IACyC,OAAO,UAAS;IAC5D;;OAEG;IACyC,QAAQ,UAAS;IAC7D;;OAEG;IACS,OAAO,SAAW;IAC9B;;OAEG;IACS,KAAK,SAAQ;IAET,MAAM,EAAE,gBAAgB,CAAC;IAEzC,SAAS,CAAC,MAAM;IAiBhB,KAAK;IAKL,iBAAiB;IAUjB,SAAS,CAAC,aAAa;IAMvB,SAAS,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;CAG/B;AAED,eAAe,WAAW,CAAC"}

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

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot } from "../../lib/templates.js";
-import { GodownInput } from "../../supers/input.js";
-import { createScope, cssvarValues } from "../../supers/root.js";
-const defineName = "switch-input";
-const cssScope = createScope(defineName);
+import { css, html, property, query } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import GodownInput from "../../proto/super-input.js";
+import { cssGlobalVars } from "../../styles/global.js";
+import { inputStyle } from "../../styles/inputStyle.js";
+const protoName = "switch-input";
 /**
  * {@linkcode SwitchInput } renders a switch.
  *
@@ -17,7 +17,8 @@ let SwitchInput = class SwitchInput extends GodownInput {
         /**
          * Border style.
          */
-        this.base = "rect";
+        // @property() variant: "fat" | "rect" = "rect";
+        this.round = false;
         /**
          * Whether this element is selected or not.
          */
@@ -29,36 +30,38 @@ let SwitchInput = class SwitchInput extends GodownInput {
         /**
          * Parsed by JSON.parse to checked.
          */
-        this.def = "false";
-        /**
-         * Input name.
-         */
-        this.name = "checkbox";
+        this.default = "false";
         /**
          * Input value.
          */
         this.value = "on";
     }
     render() {
-        return html `<span class="${this.base}">
-      <input @change="${this._handleChange}" ?disabled="${this.disabled}" ?checked="${this.checked}" name="${this.name}" type="checkbox" />
-      <aside>
-        <div class="false"><slot name="false"></slot></div>
-        <div class="always">${htmlSlot()}<slot name="always"></slot></div>
-        <div class="true"><slot name="true"></slot></div>
-      </aside>
-    </span>`;
+        return html `<div part="root" class="${this.round ? "round" : "rect"}">
+      <input
+        part="input"
+        @change="${this._handleChange}"
+        ?disabled="${this.disabled}"
+        ?checked="${this.checked}"
+        name="${this.name}"
+        id="${this.makeId}"
+        type="checkbox"
+      />
+      <span>
+        <i class="${this.checked}"><i></i></i>
+      </span>
+    </div>`;
     }
     reset() {
-        this.checked = this.def === "true";
+        this.checked = this.default === "true";
         this._input.checked = this.checked;
     }
     connectedCallback() {
         super.connectedCallback();
         if (this.checked) {
-            this.def = "true";
+            this.default = "true";
         }
-        else if (this.def === "true") {
+        if (this.default === "true") {
             this.checked = true;
         }
     }
@@ -71,146 +74,18 @@ let SwitchInput = class SwitchInput extends GodownInput {
         return [this.name, this.checked];
     }
 };
-SwitchInput.styles = [
-    GodownInput.styles,
-    css `
-      :host {
-        ${cssScope}--width: 3em;
-        ${cssScope}--height: calc(var(${cssScope}--width) / 2);
-        width: var(${cssScope}--width);
-        height: var(${cssScope}--height);
-      }
-
-      :host,
-      span {
-        display: inline-flex;
-        font-size: inherit;
-        position: relative;
-        align-items: center;
-        border-radius: inherit;
-      }
-
-      span {
-        width: inherit;
-        height: inherit;
-      }
-
-      input {
-        width: inherit;
-        height: inherit;
-        margin: 0;
-        outline: none;
-        appearance: none;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        position: relative;
-        font-size: inherit;
-        background: var(${cssvarValues.input}--false);
-        border-radius: inherit;
-        transition: all 0.3s;
-      }
-
-      aside {
-        pointer-events: none;
-        transition: 0.3s;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        font-size: inherit;
-        overflow: hidden;
-        border-radius: inherit;
-      }
-
-      aside div {
-        height: 100%;
-      }
-
-      input[disabled] ~ aside {
-        filter: brightness(0.87);
-      }
-
-      .rect div.always {
-        display: none;
-      }
-
-      .always {
-        position: absolute;
-      }
-
-      .rect aside {
-        height: 100%;
-        width: 100%;
-        left: 0;
-      }
-
-      .rect .true,
-      .rect .false {
-        width: 50%;
-        text-align: center;
-        transition: all 0.3s;
-      }
-
-      .rect input:checked ~ aside div.true,
-      .rect .false {
-        background-color: var(${cssvarValues.input}--true);
-      }
-
-      .rect input:checked ~ aside div.false,
-      .rect .true {
-        background: var(${cssvarValues.input}--false);
-      }
-
-      .fat aside {
-        width: 1.2em;
-        height: 1.2em;
-        border-radius: 50%;
-        background: var(${cssvarValues.input}--control);
-        transition: 0.3s;
-        left: 0.15em;
-        top: 0.15em;
-        bottom: 0.15em;
-      }
-
-      .fat {
-        border-radius: 0.75em;
-      }
-
-      .fat input:checked {
-        background: var(${cssvarValues.input}--true);
-      }
-
-      .fat input:checked ~ aside {
-        left: calc(100% - 0.15em - 1.2em);
-        right: 0.15em;
-      }
-
-      .fat input:checked ~ aside div.true,
-      .fat div.false {
-        display: block;
-      }
-
-      .fat input:checked ~ aside div.false,
-      .fat div.true {
-        display: none;
-      }
-    `,
-];
 __decorate([
-    property()
-], SwitchInput.prototype, "base", void 0);
+    property({ type: Boolean, reflect: true })
+], SwitchInput.prototype, "round", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SwitchInput.prototype, "checked", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SwitchInput.prototype, "disabled", void 0);
 __decorate([
     property()
-], SwitchInput.prototype, "def", void 0);
-__decorate([
-    property()
-], SwitchInput.prototype, "name", void 0);
+], SwitchInput.prototype, "default", void 0);
 __decorate([
     property()
 ], SwitchInput.prototype, "value", void 0);
@@ -218,7 +93,96 @@ __decorate([
     query("input")
 ], SwitchInput.prototype, "_input", void 0);
 SwitchInput = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        inputStyle,
+        css `
+    :host {
+      --${cssGlobalVars.input}--width: 3em;
+      --${cssGlobalVars.input}--height: calc(var(--${cssGlobalVars.input}--width) / 2);
+      --${cssGlobalVars.input}--gap: calc(var(--${cssGlobalVars.input}--width) / 25);
+      --${cssGlobalVars.input}--transition: all .25s ease-in-out;
+      background: var(--${cssGlobalVars.input}--background);
+      width: var(--${cssGlobalVars.input}--width);
+      height: var(--${cssGlobalVars.input}--height);
+      display: inline-block;
+      vertical-align: bottom;
+    }
+
+    [part="root"],
+    span,
+    i {
+      transition: var(--${cssGlobalVars.input}--transition);
+    }
+
+    [part="root"] {
+      border-radius: inherit;
+      position: relative;
+      height: inherit;
+    }
+
+    [part="root"],
+    input,
+    i {
+      width: 100%;
+    }
+
+    input {
+      margin: 0;
+      height: 100%;
+      outline: none;
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+    }
+
+    span {
+      height: 100%;
+      display: inline-flex;
+      position: absolute;
+      left: 0;
+      width: 50%;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+
+    :host([round]) {
+      border-radius: calc(var(--${cssGlobalVars.input}--height) / 2);
+    }
+
+    :host([checked]) span {
+      transform: translateX(100%);
+    }
+
+    .rect * {
+      border-radius: inherit;
+    }
+
+    .rect .true {
+      background: var(--${cssGlobalVars.input}--true);
+    }
+
+    .rect .false {
+      background: var(--${cssGlobalVars.input}--false);
+    }
+
+    .round i {
+      border-radius: 100%;
+      margin: var(--${cssGlobalVars.input}--gap);
+      background: var(--${cssGlobalVars.input}--control);
+      width: calc(var(--${cssGlobalVars.input}--height) - var(--${cssGlobalVars.input}--gap) * 2);
+      height: calc(var(--${cssGlobalVars.input}--height) - var(--${cssGlobalVars.input}--gap) * 2);
+    }
+
+    .round {
+      background: var(--${cssGlobalVars.input}--false);
+    }
+
+    :host([checked]) .round {
+      background: var(--${cssGlobalVars.input}--true);
+    }
+  `,
+    ])
 ], SwitchInput);
 export { SwitchInput };
 export default SwitchInput;