smoothly 1.0.0-alpha.21 → 1.0.0-alpha.211

package/dist/collection/components/input/select/index.js

@@ -0,0 +1,452 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyInputSelect {
+  constructor() {
+    this.items = [];
+    this.name = "selected";
+    this.color = undefined;
+    this.looks = "plain";
+    this.type = undefined;
+    this.showSelected = true;
+    this.initialPrompt = undefined;
+    this.initialValue = undefined;
+    this.menuHeight = undefined;
+    this.opened = false;
+    this.selectedElement = undefined;
+    this.missing = false;
+    this.filter = "";
+  }
+  componentWillLoad() {
+    this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+  }
+  async reset() {
+    var _a;
+    this.selectedElement = undefined;
+    if (this.mainElement) {
+      this.mainElement.innerHTML = (_a = this.initialPrompt) !== null && _a !== void 0 ? _a : "(none)";
+    }
+  }
+  onSelectedChange(value, old) {
+    if (old)
+      old.selected = false;
+    this.smoothlySelect.emit(value === null || value === void 0 ? void 0 : value.value);
+    this.smoothlyInput.emit({ [this.name]: value === null || value === void 0 ? void 0 : value.value });
+  }
+  async onFilterChange(value) {
+    value = value.toLowerCase();
+    if (!(await Promise.all(this.items.map(item => item.filter(value)))).some(r => r)) {
+      this.missing = true;
+      this.items.forEach(el => el.filter(""));
+    }
+    else
+      this.missing = false;
+  }
+  onClick(event) {
+    event.stopPropagation();
+    this.opened = !this.opened;
+  }
+  onItemSelect(event) {
+    this.selectedElement && (this.selectedElement.hidden = false);
+    this.selectedElement = event.target;
+    !this.showSelected && (this.selectedElement.hidden = true);
+    if (this.mainElement)
+      this.mainElement.innerHTML = this.selectedElement.innerHTML;
+  }
+  onClosed() {
+    if (!this.opened) {
+      const marked = this.items.find(item => item.marked);
+      if (marked)
+        marked.marked = false;
+    }
+  }
+  onKeyDown(event) {
+    event.stopPropagation();
+    if (event.key != "Tab" && !event.ctrlKey && !event.metaKey)
+      event.preventDefault();
+    if (this.opened) {
+      switch (event.key) {
+        case "ArrowUp":
+          this.move(-1);
+          break;
+        case "ArrowDown":
+          this.move(1);
+          break;
+        case "Escape":
+          if (this.filter == "")
+            this.opened = false;
+          this.filter = "";
+          break;
+        case "Backspace":
+          this.filter = this.filter.slice(0, -1);
+          break;
+        case "Enter":
+          const result = this.items.find(item => item.marked);
+          if (result === null || result === void 0 ? void 0 : result.value)
+            result.selected = true;
+          this.opened = false;
+          this.filter = "";
+          break;
+        case "Tab":
+          this.opened = false;
+          break;
+        default:
+          if (event.key.length == 1)
+            this.filter += event.key;
+          break;
+      }
+    }
+    else {
+      switch (event.key) {
+        case "Enter":
+        case " ":
+          this.opened = true;
+          break;
+        case "ArrowDown":
+          this.opened = true;
+          this.move(0);
+          break;
+        case "ArrowUp":
+          this.opened = true;
+          this.move(-1);
+          break;
+        case "Tab":
+          break;
+        default:
+          this.opened = true;
+          if (event.key.length == 1)
+            this.filter += event.key;
+          break;
+      }
+    }
+  }
+  move(direction) {
+    let markedIndex = this.items.findIndex(item => item.marked);
+    if (markedIndex == -1)
+      markedIndex = this.items.findIndex(item => item.selected);
+    if (this.items[markedIndex])
+      this.items[markedIndex].marked = false;
+    if (markedIndex == -1)
+      markedIndex = 0;
+    do {
+      markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
+    } while (this.items[markedIndex].hidden);
+    this.items[markedIndex].marked = true;
+    this.items[markedIndex].focus();
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { tabIndex: 0, class: (_a = (this.missing ? "missing" : this.type)) !== null && _a !== void 0 ? _a : "" }, h("main", { ref: element => (this.mainElement = element) }, (_b = this.initialPrompt) !== null && _b !== void 0 ? _b : "(none)"), this.filter.length != 0 ? (h("aside", { ref: element => (this.aside = element) }, this.filter, h("button", { onClick: e => {
+        e.stopPropagation();
+        this.filter = "";
+      } }, h("smoothly-icon", { name: "close", size: "small" })))) : undefined, this.opened ? h("section", { onClick: () => (this.opened = true) }) : [], h("div", { class: this.opened ? "" : "hidden" }, h("nav", null, h("slot", null)))));
+  }
+  componentDidRender() {
+    var _a, _b, _c;
+    const items = [];
+    const children = this.element.querySelectorAll("div > nav > smoothly-item");
+    for (let i = 0; i < children.length; i++) {
+      const node = children.item(i);
+      if (isItem(node)) {
+        items.push(node);
+        node.value == this.initialValue && this.mainElement && !this.selectedElement && (node.selected = true);
+      }
+    }
+    this.items = items;
+    if (this.menuHeight)
+      (_a = this.element) === null || _a === void 0 ? void 0 : _a.style.setProperty("--menu-height", !this.menuHeight.endsWith("items") || !this.items.length
+        ? this.menuHeight
+        : `${this.items[0].clientHeight * +((_c = (_b = this.menuHeight.match(/^(\d+(\.\d+)?|\.\d+)/g)) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : "10")}px`);
+  }
+  static get is() { return "smoothly-input-select"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "\"selected\""
+      },
+      "color": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true
+      },
+      "looks": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../Looks"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "looks",
+        "reflect": true,
+        "defaultValue": "\"plain\""
+      },
+      "type": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"icon\"",
+          "resolved": "\"icon\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true
+      },
+      "showSelected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-selected",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "initialPrompt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initial-prompt",
+        "reflect": false
+      },
+      "initialValue": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "unknown",
+          "resolved": "unknown",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "menuHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "`${number}${\"items\" | \"rem\" | \"px\" | \"vh\"}`",
+          "resolved": "`${number}items` | `${number}px` | `${number}rem` | `${number}vh` | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "menu-height",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "opened": {},
+      "selectedElement": {},
+      "missing": {},
+      "filter": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlySelect",
+        "name": "smoothlySelect",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "unknown",
+          "resolved": "unknown",
+          "references": {}
+        }
+      }, {
+        "method": "smoothlyInput",
+        "name": "smoothlyInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Data",
+          "resolved": "{ [name: string]: Value | Data; }",
+          "references": {
+            "Data": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyInputLooks",
+        "name": "smoothlyInputLooks",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(looks: Looks, color: Color) => void",
+          "resolved": "(looks: \"line\" | \"grid\" | \"plain\" | \"border\" | \"transparent\", color: \"success\" | \"default\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\" | \"danger\" | \"light\" | \"medium\" | \"dark\") => void",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../Looks"
+            },
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "selectedElement",
+        "methodName": "onSelectedChange"
+      }, {
+        "propName": "filter",
+        "methodName": "onFilterChange"
+      }, {
+        "propName": "opened",
+        "methodName": "onClosed"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyItemSelect",
+        "method": "onItemSelect",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "onKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+function isItem(value) {
+  return (typeof value == "object" &&
+    (typeof value.selected == "boolean" || value.selected == undefined) &&
+    typeof value.filter == "function");
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/input/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/select/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Data } from \"../../../model\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n@Component({\n\ttag: \"smoothly-input-select\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputSelect implements Input {\n\t@Element() element: HTMLSmoothlyInputSelectElement\n\t@Prop() name = \"selected\"\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true, mutable: true }) type?: \"icon\"\n\t@Prop({ reflect: true, mutable: true }) showSelected?: boolean = true\n\t@Prop() initialPrompt?: string\n\t@Prop() initialValue?: unknown\n\t@Prop() menuHeight?: `${number}${\"items\" | \"rem\" | \"px\" | \"vh\"}`\n\t@State() opened = false\n\titems: HTMLSmoothlyItemElement[] = []\n\t@State() selectedElement?: HTMLSmoothlyItemElement\n\t@State() missing = false\n\tmainElement?: HTMLElement\n\t@State() filter = \"\"\n\t@Event() smoothlySelect: EventEmitter<unknown>\n\t@Event() smoothlyInput: EventEmitter<Data>\n\taside?: HTMLElement\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t}\n\n\t@Method()\n\tasync reset() {\n\t\tthis.selectedElement = undefined\n\t\tif (this.mainElement) {\n\t\t\t//reset to the same value as it started with\n\t\t\tthis.mainElement.innerHTML = this.initialPrompt ?? \"(none)\"\n\t\t}\n\t}\n\n\t@Watch(\"selectedElement\")\n\tonSelectedChange(value: HTMLSmoothlyItemElement | undefined, old: HTMLSmoothlyItemElement | undefined) {\n\t\tif (old)\n\t\t\told.selected = false\n\t\tthis.smoothlySelect.emit(value?.value)\n\t\tthis.smoothlyInput.emit({ [this.name]: value?.value })\n\t}\n\t@Watch(\"filter\")\n\tasync onFilterChange(value: string) {\n\t\tvalue = value.toLowerCase()\n\t\tif (!(await Promise.all(this.items.map(item => item.filter(value)))).some(r => r)) {\n\t\t\tthis.missing = true\n\t\t\tthis.items.forEach(el => el.filter(\"\"))\n\t\t} else\n\t\t\tthis.missing = false\n\t}\n\t@Listen(\"click\")\n\tonClick(event: UIEvent) {\n\t\tevent.stopPropagation()\n\t\tthis.opened = !this.opened\n\t}\n\t@Listen(\"smoothlyItemSelect\")\n\tonItemSelect(event: Event) {\n\t\tthis.selectedElement && (this.selectedElement.hidden = false)\n\t\tthis.selectedElement = event.target as HTMLSmoothlyItemElement\n\t\t!this.showSelected && (this.selectedElement.hidden = true)\n\t\tif (this.mainElement)\n\t\t\tthis.mainElement.innerHTML = this.selectedElement.innerHTML\n\t}\n\t@Watch(\"opened\")\n\tonClosed() {\n\t\tif (!this.opened) {\n\t\t\tconst marked = this.items.find(item => item.marked)\n\t\t\tif (marked)\n\t\t\t\tmarked.marked = false\n\t\t}\n\t}\n\n\t@Listen(\"keydown\")\n\tonKeyDown(event: KeyboardEvent) {\n\t\tevent.stopPropagation()\n\t\tif (event.key != \"Tab\" && !event.ctrlKey && !event.metaKey)\n\t\t\tevent.preventDefault()\n\t\tif (this.opened) {\n\t\t\tswitch (event.key) {\n\t\t\t\tcase \"ArrowUp\":\n\t\t\t\t\tthis.move(-1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"ArrowDown\":\n\t\t\t\t\tthis.move(1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Escape\":\n\t\t\t\t\tif (this.filter == \"\")\n\t\t\t\t\t\tthis.opened = false\n\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Backspace\":\n\t\t\t\t\tthis.filter = this.filter.slice(0, -1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Enter\":\n\t\t\t\t\tconst result = this.items.find(item => item.marked)\n\t\t\t\t\tif (result?.value)\n\t\t\t\t\t\tresult.selected = true\n\t\t\t\t\tthis.opened = false\n\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Tab\":\n\t\t\t\t\tthis.opened = false\n\t\t\t\t\tbreak\n\t\t\t\tdefault:\n\t\t\t\t\tif (event.key.length == 1)\n\t\t\t\t\t\tthis.filter += event.key\n\t\t\t\t\tbreak\n\t\t\t}\n\t\t} else {\n\t\t\tswitch (event.key) {\n\t\t\t\tcase \"Enter\":\n\t\t\t\tcase \" \":\n\t\t\t\t\tthis.opened = true\n\t\t\t\t\tbreak\n\t\t\t\tcase \"ArrowDown\":\n\t\t\t\t\tthis.opened = true\n\t\t\t\t\tthis.move(0)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"ArrowUp\":\n\t\t\t\t\tthis.opened = true\n\t\t\t\t\tthis.move(-1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Tab\":\n\t\t\t\t\tbreak\n\t\t\t\tdefault:\n\t\t\t\t\tthis.opened = true\n\t\t\t\t\tif (event.key.length == 1)\n\t\t\t\t\t\tthis.filter += event.key\n\t\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\tprivate move(direction: -1 | 0 | 1): void {\n\t\tlet markedIndex = this.items.findIndex(item => item.marked)\n\t\tif (markedIndex == -1)\n\t\t\tmarkedIndex = this.items.findIndex(item => item.selected)\n\t\tif (this.items[markedIndex])\n\t\t\tthis.items[markedIndex].marked = false\n\t\tif (markedIndex == -1)\n\t\t\tmarkedIndex = 0\n\t\tdo {\n\t\t\tmarkedIndex = (markedIndex + direction + this.items.length) % this.items.length\n\t\t} while (this.items[markedIndex].hidden)\n\t\tthis.items[markedIndex].marked = true\n\t\tthis.items[markedIndex].focus()\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabIndex={0} class={(this.missing ? \"missing\" : this.type) ?? \"\"}>\n\t\t\t\t<main ref={element => (this.mainElement = element)}>{this.initialPrompt ?? \"(none)\"}</main>\n\t\t\t\t{this.filter.length != 0 ? (\n\t\t\t\t\t<aside ref={element => (this.aside = element)}>\n\t\t\t\t\t\t{this.filter}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={e => {\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t<smoothly-icon name=\"close\" size=\"small\"></smoothly-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</aside>\n\t\t\t\t) : undefined}\n\t\t\t\t{this.opened ? <section onClick={() => (this.opened = true)}></section> : []}\n\t\t\t\t<div class={this.opened ? \"\" : \"hidden\"}>\n\t\t\t\t\t<nav>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</nav>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\tcomponentDidRender() {\n\t\tconst items: HTMLSmoothlyItemElement[] = []\n\t\tconst children = this.element.querySelectorAll(\"div > nav > smoothly-item\")\n\t\tfor (let i = 0; i < children.length; i++) {\n\t\t\tconst node = children.item(i)\n\t\t\tif (isItem(node)) {\n\t\t\t\titems.push(node)\n\t\t\t\tnode.value == this.initialValue && this.mainElement && !this.selectedElement && (node.selected = true)\n\t\t\t}\n\t\t}\n\t\tthis.items = items\n\t\tif (this.menuHeight)\n\t\t\tthis.element?.style.setProperty(\n\t\t\t\t\"--menu-height\",\n\t\t\t\t!this.menuHeight.endsWith(\"items\") || !this.items.length\n\t\t\t\t\t? this.menuHeight\n\t\t\t\t\t: `${this.items[0].clientHeight * +(this.menuHeight.match(/^(\\d+(\\.\\d+)?|\\.\\d+)/g)?.[0] ?? \"10\")}px`\n\t\t\t)\n\t}\n}\nfunction isItem(value: HTMLSmoothlyItemElement | any): value is HTMLSmoothlyItemElement {\n\treturn (\n\t\ttypeof value == \"object\" &&\n\t\t(typeof value.selected == \"boolean\" || value.selected == undefined) &&\n\t\ttypeof value.filter == \"function\"\n\t)\n}\n"]}

package/dist/collection/components/input/select/style.css

@@ -0,0 +1,104 @@
+:host {
+	box-sizing: border-box;
+}
+:host[looks="border"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="border"] {
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="border"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
+:host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="line"] {
+	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="line"][readonly]{
+	border-bottom: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
+:host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="grid"] {
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
+}
+:host[looks="grid"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px;
+}
+:host[looks="transparent"] {
+	border: none;
+}
+:host[looks="transparent"]:not(:focus-within) {
+	background-color: transparent;
+}
+:host[looks="transparent"]:not(:focus-within) input {
+	background: transparent;
+}
+:host[looks="transparent"]:focus-within {
+	outline: 1px solid rgb(var(--smoothly-color-contrast));
+
+}
+
+
+:host {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+}
+
+:host.icon {
+	width: fit-content;
+	flex-direction: column;
+}
+
+:host>main,
+:host>main>* {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	cursor: default;
+}
+
+:host.icon>main,
+:host.icon>main>* {
+	padding: 0.5em;
+}
+
+:host>div>nav {
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	z-index: 10;
+	height: var(--menu-height, unset);
+	overflow-y: scroll;
+}
+
+:host>aside {
+	position: absolute;
+	top: 0;
+	left: 5em;
+	z-index: 10;
+	background-color: rgb(var(--smoothly-tertiary-color));
+	color: rgb(var(--smoothly-tertiary-contrast));
+	height: 1.25rem;
+	border-radius: 0.3rem;
+	padding: 0.3rem;
+	display: flex;
+	align-items: center;
+}
+
+:host().missing>aside {
+	background-color: rgb(var(--smoothly-warning-color));
+	color: rgb(var(--smoothly-warning-contrast));
+}
+
+.hidden {
+	display: none;
+}
+
+:host>section {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	width: 100vw;
+	height: 100vh;
+	z-index: 10;
+}

package/dist/collection/components/input/style.css

@@ -1,3 +1,42 @@
+:host {
+	box-sizing: border-box;
+}
+:host[looks="border"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="border"] {
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="border"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
+:host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="line"] {
+	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="line"][readonly]{
+	border-bottom: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
+:host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="grid"] {
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
+}
+:host[looks="grid"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px;
+}
+:host[looks="transparent"] {
+	border: none;
+}
+:host[looks="transparent"]:not(:focus-within) {
+	background-color: transparent;
+}
+:host[looks="transparent"]:not(:focus-within) input {
+	background: transparent;
+}
+:host[looks="transparent"]:focus-within {
+	outline: 1px solid rgb(var(--smoothly-color-contrast));
+
+}
+
+
 :host {
 	display: flex;
 	align-items: center;
@@ -5,8 +44,8 @@
 	font-weight: var(--smoothly-font-weight);
 	padding: 0 0.4em;
 	overflow: hidden;
-	background-color: rgb(var(--background-color));
-	color: rgb(var(--text-color, var(--smoothly-default-contrast)));
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+	color: rgb(var(--text-color, var(--smoothly-color-contrast)));
 }
 :host[hidden] {
 	display: none;
@@ -23,7 +62,6 @@ label {
 	position: absolute;
 	left: 0;
 	top: 0.6em;
-	color: rgb(var(--text-color, var(--smoothly-default-contrast)));
 	opacity: 0.8;
 	user-select: none;
 	cursor: inherit;
@@ -41,13 +79,12 @@ input {
 	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
-	background: none;
 	border: 0;
 	z-index: 1;
 	position: relative;
 	font-size: 1rem;
 	font-family: var(--smoothly-font-family);
-	background-color: rgb(var(--background-color));
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
 }
 smoothly-icon {
 	display: none;
@@ -63,9 +100,9 @@ input:invalid + label + smoothly-icon {
 	z-index: 1;
 	pointer-events: none;
 }
-:host[placeholder] > div > label,
+:host:not([readonly]):not(.has-value)[placeholder] > div > label,
 :host.has-value > div > label,
-:host:focus-within > div > label {
+:host:not([readonly]):not(.has-value):focus-within > div > label {
 	top: 0.4em;
 	transform: scale(0.6);
 }
@@ -76,10 +113,10 @@ input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
-	box-shadow: 0 0 0 40em rgb(var(--background-color)) inset;
-	-webkit-box-shadow: 0 0 0 40em rgb(var(--background-color)) inset;
+	box-shadow: 0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;
+	-webkit-box-shadow: 0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;
 }
 input:-webkit-autofill,
 input:-webkit-autofill + label {
-	-webkit-text-fill-color: rgb(var(--text-color, var(--smoothly-default-contrast)));
+	-webkit-text-fill-color: rgb(var(--text-color, var(--smoothly-color-contrast)));
 }