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

package/dist/collection/components/radio-button/item/style.css

@@ -1,85 +0,0 @@
-smoothly-radio-button[decoration=radio] :host {
-	transition: 0.2s;
-}
-
-smoothly-radio-button[decoration=radio] :host > header {
-	padding: 0.5rem;
-}
-
-smoothly-radio-button[decoration=radio] :host > header > smoothly-icon {
-	display: none;
-}
-smoothly-radio-button[decoration=radio] :host[selected] > header {
-	color: rgb(var(--smoothly-secondary-contrast));
-	background: rgb(var(--smoothly-secondary-color));
-}
-
-smoothly-radio-button[decoration=radio] ::slotted([slot=expansion])::before {
-	content: unset;
-}
-
-@media screen and (min-width: 900px) {
-	smoothly-radio-button[decoration=radio] :host:hover {
-		background: rgb(var(--smoothly-secondary-shade));
-		cursor: pointer;
-	}
-}
-
-smoothly-radio-button[decoration=button] :host {
-padding: 0.3rem;
-}
-
-smoothly-radio-button[decoration=button] :host > header > smoothly-icon {
-	margin-right: 0.5rem;
-	border-radius: 100%;
-	font-size: 1.3rem;
-	display: flex;
-}
-
-smoothly-radio-button[decoration=button] ::slotted([slot=expansion]) {
-	background: rgb(var(--smoothly-secondary-color));
-	color: rgb(var(--smoothly-secondary-contrast));
-	border-radius: 5px;
-	margin-top: 0.5rem;
-}
-
-smoothly-radio-button[decoration=button] ::slotted([slot=expansion])::before {
-	content: "\25B2";
-	position: absolute;
-	top: -0.8rem;
-	left: 3rem;
-	color: rgb(var(--smoothly-secondary-color));
-}
-
-@media screen and (min-width: 900px){
-	smoothly-radio-button[decoration=button] :host > header:hover > smoothly-icon {
-		cursor: pointer;
-	}
-	smoothly-radio-button[deselectable] :host[selected] > header:hover > smoothly-icon {
-		cursor: pointer;
-	}
-}
-
-
-:host {
-	display: block;
-}
-
-:host > header {
-	display: flex;
-	align-items: center;
-}
-
-::slotted([slot=expansion]) {
-	display: none;
-	background: rgb(var(--smoothly-secondary-tint));
-	color: rgb(var(--smoothly-secondary-contrast));
-	padding: 0;
-	position: relative;
-	transition: 0.1s;
-}
-
-[selected]::slotted([slot=expansion]) {
-	display: block;
-	padding: 0.5rem;
-}

package/dist/collection/components/radio-group/index.js

@@ -1,43 +0,0 @@
-import { h } from "@stencil/core";
-export class SmoothlyToggleGroup {
-  constructor() {
-    this.orientation = "horizontal";
-  }
-  render() {
-    return h("slot", null);
-  }
-  static get is() { return "smoothly-radio-group"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["style.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["style.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "orientation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"horizontal\" | \"vertical\"",
-          "resolved": "\"horizontal\" | \"vertical\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "orientation",
-        "reflect": true,
-        "defaultValue": "\"horizontal\""
-      }
-    };
-  }
-}
-//# sourceMappingURL=index.js.map

package/dist/collection/components/radio-group/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAMlD,MAAM,OAAO,mBAAmB;;uBACoC,YAAY;;EAC/E,MAAM;IACL,OAAO,eAAa,CAAA;EACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-radio-group\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyToggleGroup {\n\t@Prop({ reflect: true }) orientation?: \"horizontal\" | \"vertical\" = \"horizontal\"\n\trender() {\n\t\treturn <slot></slot>\n\t}\n}\n"]}

package/dist/collection/components/radio-group/style.css

@@ -1,36 +0,0 @@
-smoothly-radio-group {
-	display: flex;
-	position: relative;
-	/* stylelint-disable-next-line declaration-no-important */
-	color: none !important;
-	/* stylelint-disable-next-line declaration-no-important */
-	background: none !important;
-	margin: 0.5em 0;
-}
-smoothly-radio-group[hidden] {
-	display: none;
-}
-smoothly-radio-group[orientation=vertical] *:not(:first-of-type) > input[type=radio] ~ label {
-	border-top: none;
-}
-smoothly-radio-group:not([orientation=vertical]) *:not(:first-of-type) > input[type=radio] ~ label {
-	border-left: none;
-}
-smoothly-radio-group[orientation=vertical] {
-	flex-direction: column;
-}
-smoothly-radio-group[orientation=vertical] :first-of-type > input[type=radio] ~ label {
-	border-radius: 4px 4px 0 0;
-}
-smoothly-radio-group[orientation=vertical] :last-of-type > input[type=radio] ~ label {
-	border-radius: 0 0 4px 4px;
-}
-smoothly-radio-group:not([orientation=vertical]) {
-	flex-direction: row;
-}
-smoothly-radio-group:not([orientation=vertical]) :first-of-type > input[type=radio] ~ label {
-	border-radius: 4px 0 0 4px;
-}
-smoothly-radio-group:not([orientation=vertical]) :last-of-type > input[type=radio] ~ label {
-	border-radius: 0 4px 4px 0;
-}

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

@@ -1,108 +0,0 @@
-import { h } from "@stencil/core";
-export class SmoothlySelect {
-  constructor() {
-    this.identifier = undefined;
-    this.background = undefined;
-    this.value = undefined;
-  }
-  optionSelected() {
-    if (this.selectElement)
-      this.selectionChanged.emit({ identifier: this.identifier, value: (this.value = this.selectElement.value) });
-  }
-  componentDidLoad() {
-    var _a;
-    if (this.selectElement)
-      this.value = (_a = this.selectElement) === null || _a === void 0 ? void 0 : _a.value;
-  }
-  render() {
-    return [
-      h("select", { ref: e => (this.selectElement = e), id: this.identifier, onChange: () => this.optionSelected(), style: { background: this.background } }, h("slot", null)),
-    ];
-  }
-  static get is() { return "smoothly-select"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["style.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["style.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "background": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "background",
-        "reflect": true
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "selectionChanged",
-        "name": "selectionChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ identifier: string; value: string }",
-          "resolved": "{ identifier: string; value: string; }",
-          "references": {}
-        }
-      }];
-  }
-}
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOvE,MAAM,OAAO,cAAc;;;;;;EAM1B,cAAc;IACb,IAAI,IAAI,CAAC,aAAa;MACrB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;EAC7G,CAAC;EACD,gBAAgB;;IACf,IAAI,IAAI,CAAC,aAAa;MACrB,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,CAAA;EACxC,CAAC;EAED,MAAM;IACL,OAAO;MACN,cACC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,EAClC,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,EACrC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;QACtC,eAAa,CACL;KACT,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-select\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlySelect {\n\t@Prop() identifier: string\n\t@Prop({ reflect: true }) background?: string\n\tprivate selectElement?: HTMLSelectElement\n\t@Prop({ mutable: true }) value: string\n\t@Event() selectionChanged!: EventEmitter<{ identifier: string; value: string }>\n\toptionSelected() {\n\t\tif (this.selectElement)\n\t\t\tthis.selectionChanged.emit({ identifier: this.identifier, value: (this.value = this.selectElement.value) })\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.selectElement)\n\t\t\tthis.value = this.selectElement?.value\n\t}\n\n\trender() {\n\t\treturn [\n\t\t\t<select\n\t\t\t\tref={e => (this.selectElement = e)}\n\t\t\t\tid={this.identifier}\n\t\t\t\tonChange={() => this.optionSelected()}\n\t\t\t\tstyle={{ background: this.background }}>\n\t\t\t\t<slot></slot>\n\t\t\t</select>,\n\t\t]\n\t}\n}\n"]}

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

@@ -1,20 +0,0 @@
-:host {
-	display: block;
-}
-:host[hidden] {
-	display: none;
-}
-select {
-	min-width: 1.5em;
-	padding-top: 0.5em;
-	border: none;
-	-webkit-appearance: none;
-	background-color: rgb(var(--smoothly-color));
-	padding: 0.3em;
-}
-select > option {
-	background-color: inherit;
-}
-select:focus {
-	outline: none;
-}

package/dist/collection/components/selector/index.js

@@ -1,234 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class Selector {
-  constructor() {
-    this.items = [];
-    this.initialPrompt = undefined;
-    this.opened = false;
-    this.selectedElement = undefined;
-    this.missing = false;
-    this.filter = "";
-  }
-  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.selected.emit(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;
-  }
-  onItemSelected(event) {
-    this.selectedElement = event.target;
-    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();
-    event.preventDefault();
-    if (this.opened) {
-      let direction = 0;
-      switch (event.key) {
-        case "ArrowUp":
-          direction = -1;
-          break;
-        case "ArrowDown":
-          direction = 1;
-          break;
-        case "Escape":
-          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;
-        default:
-          if (event.key.length == 1)
-            this.filter += event.key;
-          break;
-      }
-      this.move(direction);
-    }
-    else if (event.key == "Enter")
-      this.opened = true;
-  }
-  move(direction) {
-    if (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;
-      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;
-    return (h(Host, { tabIndex: 2, class: this.missing ? "missing" : "" }, h("main", { ref: element => (this.mainElement = element) }, (_a = this.initialPrompt) !== null && _a !== void 0 ? _a : "(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() {
-    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);
-    }
-    this.items = items;
-  }
-  static get is() { return "smoothly-selector"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["style.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["style.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "initialPrompt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "initial-prompt",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "opened": {},
-      "selectedElement": {},
-      "missing": {},
-      "filter": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "selected",
-        "name": "selected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  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": "itemSelected",
-        "method": "onItemSelected",
-        "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/selector/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/selector/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\n@Component({\n\ttag: \"smoothly-selector\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Selector {\n\t@Element() element: HTMLSmoothlySelectorElement\n\t@Prop() initialPrompt?: string\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() selected: EventEmitter<any>\n\taside?: HTMLElement\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.selected.emit(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(\"itemSelected\")\n\tonItemSelected(event: Event) {\n\t\tthis.selectedElement = event.target as HTMLSmoothlyItemElement\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\tevent.preventDefault()\n\t\tif (this.opened) {\n\t\t\tlet direction: -1 | 0 | 1 = 0\n\t\t\tswitch (event.key) {\n\t\t\t\tcase \"ArrowUp\":\n\t\t\t\t\tdirection = -1\n\t\t\t\t\tbreak\n\t\t\t\tcase \"ArrowDown\":\n\t\t\t\t\tdirection = 1\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Escape\":\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\t}\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\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\tthis.move(direction)\n\t\t} else if (event.key == \"Enter\")\n\t\t\tthis.opened = true\n\t}\n\tprivate move(direction: -1 | 0 | 1): void {\n\t\tif (direction) {\n\t\t\tlet markedIndex = this.items.findIndex(item => item.marked)\n\t\t\tif (markedIndex == -1)\n\t\t\t\tmarkedIndex = this.items.findIndex(item => item.selected)\n\t\t\tif (this.items[markedIndex])\n\t\t\t\tthis.items[markedIndex].marked = false\n\t\t\tdo {\n\t\t\t\tmarkedIndex = (markedIndex + direction + this.items.length) % this.items.length\n\t\t\t} while (this.items[markedIndex].hidden)\n\t\t\tthis.items[markedIndex].marked = true\n\t\t\tthis.items[markedIndex].focus()\n\t\t}\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabIndex={2} class={this.missing ? \"missing\" : \"\"}>\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}\n\t\tthis.items = items\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/selector/style.css

@@ -1,46 +0,0 @@
-:host {
-	position: relative;
-	height: 100%;
-}
-:host > main,
-:host > main > * {
-	height: 100%;
-	display: flex;
-	align-items: center;
-}
-: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-contast));
-}
-.hidden {
-	display: none;
-}
-:host > section {
-	position: fixed;
-	top: 0px;
-	left: 0px;
-	width: 100vw;
-	height: 100vh;
-	z-index: 10;
-}