smoothly 1.0.0-alpha.21 → 1.0.0-alpha.210

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/lazy/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,CAAC,EAAE,IAAI,EAAO,IAAI,EAAS,MAAM,eAAe,CAAA;AAOzF,MAAM,OAAO,YAAY;;gBACQ,KAAK;;;EAGrC,eAAe,CAAC,KAA0B;IACzC,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;EACjB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,YAAM,IAAI,EAAC,QAAQ,GAAG;MACtB,0BAAoB,kBAAkB,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAI;MACvE,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,EAAC,IAAI,CAAC,OAAO,OAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;MACnF,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, FunctionalComponent, h, Host, JSX, Prop, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-lazy\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyLazy {\n\t@Prop({ mutable: true }) show = false\n\t@Prop() content?: JSX.Element | FunctionalComponent\n\n\tloadMoreHandler(event: CustomEvent<string>): void {\n\t\tevent.stopPropagation()\n\t\tthis.show = true\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot name=\"before\" />\n\t\t\t\t<smoothly-load-more onSmoothlyLoadMore={e => this.loadMoreHandler(e)} />\n\t\t\t\t{this.show && (typeof this.content == \"function\" ? <this.content /> : this.content)}\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/{radio → load-more}/index.js

@@ -1,23 +1,25 @@
-import { h } from "@stencil/core";
-export class SmoothlyRadio {
+import { h, Host } from "@stencil/core";
+export class LoadMore {
   constructor() {
-    this.name = undefined;
-    this.value = undefined;
-    this.checked = undefined;
-    this.tabIndex = undefined;
+    this.offset = "0";
+    this.name = "";
+    this.multiple = false;
   }
-  async onInput(e) {
-    if (e.target && e.target.value && (this.checked = e.target.checked))
-      this.smoothlySelected.emit({ name: this.name, value: this.value });
-    return true;
+  componentWillLoad() {
+    const observer = new IntersectionObserver((entries, observer) => this.observationHandler(observer, entries));
+    observer.observe(this.element);
+  }
+  observationHandler(observer, entries) {
+    var _a, _b;
+    if ((_b = (_a = entries.find(entry => entry.target == this.element)) === null || _a === void 0 ? void 0 : _a.intersectionRatio) !== null && _b !== void 0 ? _b : 0) {
+      this.smoothlyLoadMore.emit(this.name);
+      !this.multiple && (observer.unobserve(this.element), observer.disconnect());
+    }
   }
   render() {
-    return [
-      h("input", { type: "radio", name: this.name, id: this.value, tabindex: this.tabIndex, checked: this.checked, value: this.value, onChange: e => this.onInput(e) }),
-      h("label", { htmlFor: this.value }, h("slot", null)),
-    ];
+    return h(Host, { style: { "--offset": `${this.offset}` } });
   }
-  static get is() { return "smoothly-radio"; }
+  static get is() { return "smoothly-load-more"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -31,7 +33,7 @@ export class SmoothlyRadio {
   }
   static get properties() {
     return {
-      "name": {
+      "offset": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -45,10 +47,11 @@ export class SmoothlyRadio {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
-        "reflect": false
+        "attribute": "offset",
+        "reflect": false,
+        "defaultValue": "\"0\""
       },
-      "value": {
+      "name": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -62,12 +65,13 @@ export class SmoothlyRadio {
           "tags": [],
           "text": ""
         },
-        "attribute": "value",
-        "reflect": false
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "checked": {
+      "multiple": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -79,32 +83,16 @@ export class SmoothlyRadio {
           "tags": [],
           "text": ""
         },
-        "attribute": "checked",
-        "reflect": true
-      },
-      "tabIndex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tab-index",
-        "reflect": false
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get events() {
     return [{
-        "method": "smoothlySelected",
-        "name": "smoothlySelected",
+        "method": "smoothlyLoadMore",
+        "name": "smoothlyLoadMore",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -113,11 +101,12 @@ export class SmoothlyRadio {
           "text": ""
         },
         "complexType": {
-          "original": "{ name: string; value: string }",
-          "resolved": "{ name: string; value: string; }",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         }
       }];
   }
+  static get elementRef() { return "element"; }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/load-more/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/load-more/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAS,MAAM,eAAe,CAAA;AAOhH,MAAM,OAAO,QAAQ;;kBAEH,GAAG;gBACL,EAAE;oBACE,KAAK;;EAGxB,iBAAiB;IAChB,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;IAC5G,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC/B,CAAC;EAED,kBAAkB,CAAC,QAA8B,EAAE,OAAoC;;IACtF,IAAI,MAAA,MAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,0CAAE,iBAAiB,mCAAI,CAAC,EAAE;MAChF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAA;KAC3E;EACF,CAAC;EAED,MAAM;IACL,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,GAAI,CAAA;EACzD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, ComponentWillLoad, Element, Event, EventEmitter, h, Host, Prop, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-load-more\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class LoadMore implements ComponentWillLoad {\n\t@Element() element: HTMLSmoothlyLoadMoreElement\n\t@Prop() offset = \"0\"\n\t@Prop() name = \"\"\n\t@Prop() multiple = false\n\t@Event() smoothlyLoadMore: EventEmitter<string>\n\n\tcomponentWillLoad(): void {\n\t\tconst observer = new IntersectionObserver((entries, observer) => this.observationHandler(observer, entries))\n\t\tobserver.observe(this.element)\n\t}\n\n\tobservationHandler(observer: IntersectionObserver, entries: IntersectionObserverEntry[]): void {\n\t\tif (entries.find(entry => entry.target == this.element)?.intersectionRatio ?? 0) {\n\t\t\tthis.smoothlyLoadMore.emit(this.name)\n\t\t\t!this.multiple && (observer.unobserve(this.element), observer.disconnect())\n\t\t}\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn <Host style={{ \"--offset\": `${this.offset}` }} />\n\t}\n}\n"]}

package/dist/collection/components/load-more/style.css

@@ -0,0 +1,5 @@
+:host {
+	display: block;
+	position: relative;
+	top: var(--offset,)
+}

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

@@ -2,33 +2,34 @@ import { h, Host } from "@stencil/core";
 export class Notification {
   constructor() {
     this.listener = notice => {
-      console.log("changed: ", notice);
       if (notice.state == "closed")
         this.remove.emit(notice);
       else
         this.tick = {};
     };
     this.notice = undefined;
+    this.closable = true;
+    this.icon = false;
     this.tick = {};
   }
-  get color() {
+  get properties() {
     let result;
     switch (this.notice.state) {
       case "delayed":
       case "warning":
-        result = "warning";
+        result = ["warning", "warning-outline"];
         break;
       case "success":
-        result = "success";
+        result = ["success", "checkmark-circle"];
         break;
       case "executing":
-        result = "light";
+        result = ["light", "hourglass-outline"];
         break;
       case "failed":
-        result = "danger";
+        result = ["danger", "alert-circle"];
         break;
       default:
-        result = "light";
+        result = ["light", undefined];
         break;
     }
     return result;
@@ -48,7 +49,7 @@ export class Notification {
     this.onUpdatedNotice(this.notice);
   }
   render() {
-    return (h(Host, { color: this.color, fill: "solid" }, h("smoothly-trigger", { fill: "clear", name: "close" }, h("smoothly-icon", { name: "close-circle-outline" })), h("p", null, this.notice.message)));
+    return (h(Host, { color: this.properties[0], fill: "solid" }, this.closable ? (h("smoothly-trigger", { fill: "clear", name: "close" }, h("smoothly-icon", { name: "close-circle-outline" }))) : (""), h("span", { class: this.icon ? "icon" : "clean" }, this.icon ? h("smoothly-icon", { name: this.properties[1] }) : "", h("p", null, this.notice.message))));
   }
   static get is() { return "smoothly-notification"; }
   static get encapsulation() { return "scoped"; }
@@ -83,6 +84,42 @@ export class Notification {
           "tags": [],
           "text": ""
         }
+      },
+      "closable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "closable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "icon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/notification/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAQnG,MAAM,OAAO,YAAY;;IAIhB,aAAQ,GAAoB,MAAM,CAAC,EAAE;MAC5C,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;MAChC,IAAI,MAAM,CAAC,KAAK,IAAI,QAAQ;QAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;;QAExB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;IAChB,CAAC,CAAA;;gBARe,EAAE;;EASlB,IAAY,KAAK;IAChB,IAAI,MAAa,CAAA;IACjB,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;MAC1B,KAAK,SAAS,CAAC;MACf,KAAK,SAAS;QACb,MAAM,GAAG,SAAS,CAAA;QAClB,MAAK;MACN,KAAK,SAAS;QACb,MAAM,GAAG,SAAS,CAAA;QAClB,MAAK;MACN,KAAK,WAAW;QACf,MAAM,GAAG,OAAO,CAAA;QAChB,MAAK;MACN,KAAK,QAAQ;QACZ,MAAM,GAAG,QAAQ,CAAA;QACjB,MAAK;MACN;QACC,MAAM,GAAG,OAAO,CAAA;QAChB,MAAK;KACN;IACD,OAAO,MAAM,CAAA;EACd,CAAC;EAED,SAAS,CAAC,KAA2B;IACpC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,OAAO,EAAE;MACjC,KAAK,CAAC,eAAe,EAAE,CAAA;MACvB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;KACnB;EACF,CAAC;EAGD,eAAe,CAAC,QAAgB,EAAE,QAAiB;IAClD,IAAI,QAAQ;MACX,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACjC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EAC/B,CAAC;EACD,gBAAgB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;EAClC,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,OAAO;MACpC,wBAAkB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;QAC1C,qBAAe,IAAI,EAAC,sBAAsB,GAAiB,CACzC;MACnB,aAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAK,CACtB,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Notice, Trigger } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-notification\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Notification {\n\t@Prop() notice: Notice\n\t@State() tick = {}\n\t@Event() remove: EventEmitter<Notice>\n\tprivate listener: Notice.Listener = notice => {\n\t\tconsole.log(\"changed: \", notice)\n\t\tif (notice.state == \"closed\")\n\t\t\tthis.remove.emit(notice)\n\t\telse\n\t\t\tthis.tick = {}\n\t}\n\tprivate get color(): Color {\n\t\tlet result: Color\n\t\tswitch (this.notice.state) {\n\t\t\tcase \"delayed\":\n\t\t\tcase \"warning\":\n\t\t\t\tresult = \"warning\"\n\t\t\t\tbreak\n\t\t\tcase \"success\":\n\t\t\t\tresult = \"success\"\n\t\t\t\tbreak\n\t\t\tcase \"executing\":\n\t\t\t\tresult = \"light\"\n\t\t\t\tbreak\n\t\t\tcase \"failed\":\n\t\t\t\tresult = \"danger\"\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tresult = \"light\"\n\t\t\t\tbreak\n\t\t}\n\t\treturn result\n\t}\n\t@Listen(\"trigger\")\n\tonTrigger(event: CustomEvent<Trigger>) {\n\t\tif (event.detail.name == \"close\") {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.notice.close()\n\t\t}\n\t}\n\n\t@Watch(\"notice\")\n\tonUpdatedNotice(newValue: Notice, oldValue?: Notice) {\n\t\tif (oldValue)\n\t\t\toldValue.unlisten(this.listener)\n\t\tnewValue.listen(this.listener)\n\t}\n\tcomponentDidLoad() {\n\t\tthis.onUpdatedNotice(this.notice)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host color={this.color} fill=\"solid\">\n\t\t\t\t<smoothly-trigger fill=\"clear\" name=\"close\">\n\t\t\t\t\t<smoothly-icon name=\"close-circle-outline\"></smoothly-icon>\n\t\t\t\t</smoothly-trigger>\n\t\t\t\t<p>{this.notice.message}</p>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/notification/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AASnG,MAAM,OAAO,YAAY;;IAMhB,aAAQ,GAAoB,MAAM,CAAC,EAAE;MAC5C,IAAI,MAAM,CAAC,KAAK,IAAI,QAAQ;QAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;;QAExB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;IAChB,CAAC,CAAA;;oBATkB,IAAI;gBACR,KAAK;gBACJ,EAAE;;EAQlB,IAAY,UAAU;IACrB,IAAI,MAAiC,CAAA;IACrC,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;MAC1B,KAAK,SAAS,CAAC;MACf,KAAK,SAAS;QACb,MAAM,GAAG,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;QACvC,MAAK;MACN,KAAK,SAAS;QACb,MAAM,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAA;QACxC,MAAK;MACN,KAAK,WAAW;QACf,MAAM,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAA;QACvC,MAAK;MACN,KAAK,QAAQ;QACZ,MAAM,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;QACnC,MAAK;MACN;QACC,MAAM,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QAC7B,MAAK;KACN;IACD,OAAO,MAAM,CAAA;EACd,CAAC;EAGD,SAAS,CAAC,KAA2B;IACpC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,OAAO,EAAE;MACjC,KAAK,CAAC,eAAe,EAAE,CAAA;MACvB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;KACnB;EACF,CAAC;EAGD,eAAe,CAAC,QAAgB,EAAE,QAAiB;IAClD,IAAI,QAAQ;MACX,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACjC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EAC/B,CAAC;EACD,gBAAgB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;EAClC,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO;MAC3C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,wBAAkB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;QAC1C,qBAAe,IAAI,EAAC,sBAAsB,GAAiB,CACzC,CACnB,CAAC,CAAC,CAAC,CACH,EAAE,CACF;MACD,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QACvC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAe,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAkB,CAAC,CAAC,CAAC,EAAE;QAC3E,aAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAK,CACtB,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Notice, Trigger } from \"../../model\"\nimport { Icon } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-notification\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Notification {\n\t@Prop() notice: Notice\n\t@Prop() closable = true\n\t@Prop() icon = false\n\t@State() tick = {}\n\t@Event() remove: EventEmitter<Notice>\n\tprivate listener: Notice.Listener = notice => {\n\t\tif (notice.state == \"closed\")\n\t\t\tthis.remove.emit(notice)\n\t\telse\n\t\t\tthis.tick = {}\n\t}\n\tprivate get properties(): [Color, Icon | undefined] {\n\t\tlet result: [Color, Icon | undefined]\n\t\tswitch (this.notice.state) {\n\t\t\tcase \"delayed\":\n\t\t\tcase \"warning\":\n\t\t\t\tresult = [\"warning\", \"warning-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"success\":\n\t\t\t\tresult = [\"success\", \"checkmark-circle\"]\n\t\t\t\tbreak\n\t\t\tcase \"executing\":\n\t\t\t\tresult = [\"light\", \"hourglass-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"failed\":\n\t\t\t\tresult = [\"danger\", \"alert-circle\"]\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tresult = [\"light\", undefined]\n\t\t\t\tbreak\n\t\t}\n\t\treturn result\n\t}\n\n\t@Listen(\"trigger\")\n\tonTrigger(event: CustomEvent<Trigger>) {\n\t\tif (event.detail.name == \"close\") {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.notice.close()\n\t\t}\n\t}\n\n\t@Watch(\"notice\")\n\tonUpdatedNotice(newValue: Notice, oldValue?: Notice) {\n\t\tif (oldValue)\n\t\t\toldValue.unlisten(this.listener)\n\t\tnewValue.listen(this.listener)\n\t}\n\tcomponentDidLoad() {\n\t\tthis.onUpdatedNotice(this.notice)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host color={this.properties[0]} fill=\"solid\">\n\t\t\t\t{this.closable ? (\n\t\t\t\t\t<smoothly-trigger fill=\"clear\" name=\"close\">\n\t\t\t\t\t\t<smoothly-icon name=\"close-circle-outline\"></smoothly-icon>\n\t\t\t\t\t</smoothly-trigger>\n\t\t\t\t) : (\n\t\t\t\t\t\"\"\n\t\t\t\t)}\n\t\t\t\t<span class={this.icon ? \"icon\" : \"clean\"}>\n\t\t\t\t\t{this.icon ? <smoothly-icon name={this.properties[1]}></smoothly-icon> : \"\"}\n\t\t\t\t\t<p>{this.notice.message}</p>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,14 +1,38 @@
 :host {
 	display: block;
-	min-width: 32.6%;
+	width: 30em;
 	min-height: 3em;
 	border-radius: 5px;
 	margin: 0.5em;
 }
+.clean {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0.5em 1em;
+}
+.icon {
+	display: grid;
+	width: 100%;
+	grid-template-columns: 1fr 5fr;
+}
+.icon > p{
+	padding-right: 1em;
+}
+:host > span > p {
+	text-align: left;
+}
 :host[hidden] {
 	display: none;
 }
+smoothly-icon {
+	left: 0;
+	font-size: 1.2em;
+	align-self: center;
+	justify-self: center;
+}
 smoothly-trigger {
+	font-size: 0.5em;
 	float: right;
 	text-align: right;
 	margin-right: 0.2em;

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

@@ -8,11 +8,9 @@
 	display: flex;
 	flex-wrap: wrap-reverse;
 	align-content: stretch;
-	justify-content: flex-start;
 	position: fixed;
-	bottom: 3em;
+	bottom: 3rem;
 	left: 0;
 	text-align: center;
-	width: 100%;
 	z-index: 100;
 }

package/dist/collection/components/picker/demo/index.js

@@ -0,0 +1,91 @@
+import { h, Host } from "@stencil/core";
+import { Notice } from "../../../model";
+function validateEmail(email) {
+  return email.match(/^.+@.+/) ? true : { result: false, notice: Notice.failed("That is not an email") };
+}
+export class SmoothlyPickerDemo {
+  constructor() {
+    this.users = {
+      "giovani@rocket.com": "giovani doe",
+      "jessie@rocket.com": "jessie doe",
+      "james@rocket.com": "james doe",
+    };
+    this.counter = 3;
+    this.data = {
+      message: "hello world",
+      emails: [{ value: "jessie@rocket.com" }, { value: "james@rocket.com" }],
+      options: [
+        { value: "giovani@rocket.com" },
+        { value: "john@example.com" },
+        { value: "jane@example.com" },
+        { value: "jack@example.com" },
+        { value: "jessica@example.com" },
+        { value: "julia@example.com" },
+        { value: "jayden@example.com" },
+        { value: "jake@example.com" },
+        { value: "jamie@example.com" },
+        { value: "jasmine@example.com" },
+      ],
+    };
+    this.change = undefined;
+  }
+  inputHandler(event) {
+    if (this.change) {
+      this.change = Object.assign(Object.assign({}, this.change), event.detail);
+      console.log("demo input", this.change);
+    }
+  }
+  submitHandler(event) {
+    console.log("submitted", event.detail);
+  }
+  clickHandler() {
+    var _a, _b;
+    if (!this.change)
+      (_a = this.controls) === null || _a === void 0 ? void 0 : _a.remember();
+    else
+      (_b = this.controls) === null || _b === void 0 ? void 0 : _b.restore();
+    this.change = this.change ? undefined : Object.assign(Object.assign({}, this.data), { emails: [...this.data.emails] });
+  }
+  loadedHandler(event) {
+    this.controls = event.detail;
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, null, h("div", null, h("smoothly-button", { onClick: () => (this.counter += 1) }, "Add one"), h("smoothly-button", { onClick: () => (this.counter -= 1) }, "Remove one"), h("smoothly-picker", { class: "counter", key: Array.from({ length: this.counter }).toString(), name: "counter", multiple: true, mutable: true }, Array.from({ length: this.counter }).map((_, index) => (h("smoothly-picker-option", { value: index, selected: index < this.counter - 1 }, index))), h("span", { slot: "search" }, "Search"), h("button", { slot: "child", class: "counter-button" }, h("smoothly-icon", { name: "add-outline" })))), h("h5", null, "Controlled input"), h("smoothly-button", { color: "secondary", onClick: () => this.clickHandler() }, !this.change ? "start edit" : "end edit"), h("smoothly-form", { class: "controlled", looks: "line", onSmoothlyFormInput: e => this.inputHandler(e) }, h("smoothly-input", { readonly: !this.change, name: "message", value: this.data.message }, "Message"), h("smoothly-picker", { name: "emails", mutable: true, multiple: true, readonly: !this.change, validator: validateEmail, onSmoothlyPickerLoaded: e => this.loadedHandler(e) }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-add-outline" }), ((_b = (_a = this.change) === null || _a === void 0 ? void 0 : _a.emails) !== null && _b !== void 0 ? _b : this.data.emails).map(email => {
+      var _a;
+      return (h("smoothly-picker-option", { key: email.value, value: email, selected: true, search: [(_a = this.users[email.value]) !== null && _a !== void 0 ? _a : []].flat() }, h("span", null, this.users[email.value]), h("span", { slot: "label" }, email.value), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
+    }), this.data.options.map(email => {
+      var _a;
+      return (h("smoothly-picker-option", { key: email.value, value: email, search: [(_a = this.users[email.value]) !== null && _a !== void 0 ? _a : []].flat() }, h("span", null, this.users[email.value]), h("span", { slot: "label" }, email.value), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
+    })), h("smoothly-input-clear", { slot: "submit", type: "form", color: "danger", fill: "solid" }, "Clear"), h("smoothly-button", { slot: "submit", color: "secondary", onClick: () => { var _a; return (_a = this.controls) === null || _a === void 0 ? void 0 : _a.clear(); } }, "Removed added by mutation"), h("smoothly-submit", { size: "icon", slot: "submit" }, h("smoothly-icon", { name: "checkmark-circle" }))), h("h5", null, "uncontrolled inputs"), h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), h("smoothly-submit", { slot: "submit" }, "Submit"), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-picker", { name: "shape" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish"))), h("smoothly-picker", { looks: "border", name: "icon", multiple: true }, h("span", { slot: "label" }, "Icon"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle", required: true }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" })), h("smoothly-picker-option", { value: "airplane" }, h("span", { slot: "label" }, "Airplane"), h("smoothly-icon", { size: "tiny", name: "airplane-outline" })), h("smoothly-picker-option", { value: "alarm" }, h("span", { slot: "label" }, "Alarm"), h("smoothly-icon", { size: "tiny", name: "alarm-outline" })), h("smoothly-picker-option", { value: "archive" }, h("span", { slot: "label" }, "Archive"), h("smoothly-icon", { size: "tiny", name: "archive-outline" })), h("smoothly-picker-option", { value: "bag" }, h("span", { slot: "label" }, "Bag"), h("smoothly-icon", { size: "tiny", name: "bag-outline" })), h("smoothly-picker-option", { value: "cafe" }, h("span", { slot: "label" }, "Cafe"), h("smoothly-icon", { size: "tiny", name: "cafe-outline" })), h("smoothly-picker-option", { value: "disc" }, h("span", { slot: "label" }, "Disc"), h("smoothly-icon", { size: "tiny", name: "disc-outline" })), h("smoothly-picker-option", { value: "earth" }, h("span", { slot: "label" }, "Earth"), h("smoothly-icon", { size: "tiny", name: "earth-outline" })), h("smoothly-picker-option", { value: "fast-food" }, h("span", { slot: "label" }, "Fast food"), h("smoothly-icon", { size: "tiny", name: "fast-food-outline" })))));
+  }
+  static get is() { return "smoothly-picker-demo"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get states() {
+    return {
+      "counter": {},
+      "data": {},
+      "change": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "smoothlyFormSubmit",
+        "method": "submitHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/picker/demo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, State } from \"@stencil/core\"\nimport { Data, Notice } from \"../../../model\"\nimport { Controls } from \"../menu\"\n\nfunction validateEmail(email: string) {\n\treturn email.match(/^.+@.+/) ? true : { result: false, notice: Notice.failed(\"That is not an email\") }\n}\n\n@Component({\n\ttag: \"smoothly-picker-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPickerDemo {\n\tprivate controls?: Controls\n\tprivate users: Record<string, string | undefined> = {\n\t\t\"giovani@rocket.com\": \"giovani doe\",\n\t\t\"jessie@rocket.com\": \"jessie doe\",\n\t\t\"james@rocket.com\": \"james doe\",\n\t}\n\t@State() counter = 3\n\t@State() data = {\n\t\tmessage: \"hello world\",\n\t\temails: [{ value: \"jessie@rocket.com\" }, { value: \"james@rocket.com\" }],\n\t\toptions: [\n\t\t\t{ value: \"giovani@rocket.com\" },\n\t\t\t{ value: \"john@example.com\" },\n\t\t\t{ value: \"jane@example.com\" },\n\t\t\t{ value: \"jack@example.com\" },\n\t\t\t{ value: \"jessica@example.com\" },\n\t\t\t{ value: \"julia@example.com\" },\n\t\t\t{ value: \"jayden@example.com\" },\n\t\t\t{ value: \"jake@example.com\" },\n\t\t\t{ value: \"jamie@example.com\" },\n\t\t\t{ value: \"jasmine@example.com\" },\n\t\t],\n\t}\n\t@State() change?: SmoothlyPickerDemo[\"data\"]\n\tinputHandler(event: CustomEvent<Data>) {\n\t\tif (this.change) {\n\t\t\tthis.change = {\n\t\t\t\t...this.change,\n\t\t\t\t...event.detail,\n\t\t\t}\n\t\t\tconsole.log(\"demo input\", this.change)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: CustomEvent<Data>) {\n\t\tconsole.log(\"submitted\", event.detail)\n\t}\n\tclickHandler() {\n\t\tif (!this.change)\n\t\t\tthis.controls?.remember()\n\t\telse\n\t\t\tthis.controls?.restore()\n\t\tthis.change = this.change ? undefined : { ...this.data, emails: [...this.data.emails] }\n\t}\n\tloadedHandler(event: CustomEvent<Controls>) {\n\t\tthis.controls = event.detail\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button onClick={() => (this.counter += 1)}>Add one</smoothly-button>\n\t\t\t\t\t<smoothly-button onClick={() => (this.counter -= 1)}>Remove one</smoothly-button>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tclass={\"counter\"}\n\t\t\t\t\t\tkey={Array.from({ length: this.counter }).toString()}\n\t\t\t\t\t\tname=\"counter\"\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\tmutable>\n\t\t\t\t\t\t{Array.from({ length: this.counter }).map((_, index) => (\n\t\t\t\t\t\t\t<smoothly-picker-option value={index} selected={index < this.counter - 1}>\n\t\t\t\t\t\t\t\t{index}\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<button slot=\"child\" class={\"counter-button\"}>\n\t\t\t\t\t\t\t<smoothly-icon name={\"add-outline\"} />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t</div>\n\n\t\t\t\t<h5>Controlled input</h5>\n\t\t\t\t<smoothly-button color={\"secondary\"} onClick={() => this.clickHandler()}>\n\t\t\t\t\t{!this.change ? \"start edit\" : \"end edit\"}\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-form class={\"controlled\"} looks=\"line\" onSmoothlyFormInput={e => this.inputHandler(e)}>\n\t\t\t\t\t<smoothly-input readonly={!this.change} name=\"message\" value={this.data.message}>\n\t\t\t\t\t\tMessage\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tname=\"emails\"\n\t\t\t\t\t\tmutable\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\treadonly={!this.change}\n\t\t\t\t\t\tvalidator={validateEmail}\n\t\t\t\t\t\tonSmoothlyPickerLoaded={e => this.loadedHandler(e)}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-add-outline\" />\n\t\t\t\t\t\t{(this.change?.emails ?? this.data.emails).map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option\n\t\t\t\t\t\t\t\tkey={email.value}\n\t\t\t\t\t\t\t\tvalue={email}\n\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\tsearch={[this.users[email.value] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email.value]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email.value}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{this.data.options.map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email.value} value={email} search={[this.users[email.value] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email.value]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email.value}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-input-clear slot={\"submit\"} type=\"form\" color=\"danger\" fill=\"solid\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-button slot={\"submit\"} color={\"secondary\"} onClick={() => this.controls?.clear()}>\n\t\t\t\t\t\tRemoved added by mutation\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-submit size=\"icon\" slot=\"submit\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" />\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\n\t\t\t\t<h5>uncontrolled inputs</h5>\n\t\t\t\t<smoothly-form onSmoothlyFormSubmit={e => console.log(\"submitted\", e.detail)} looks=\"line\">\n\t\t\t\t\t<smoothly-input name=\"purpose\" type=\"text\">\n\t\t\t\t\t\tPurpose\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker multiple mutable name=\"emails\" validator={validateEmail}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"james@rocket.com\"}>james@rocket.com</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"jessie@rocket.com\"}>\n\t\t\t\t\t\t\tjessie@rocket.com\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"giovanni@rocket.com\"}>giovanni@rocket.com</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-picker name=\"shape\">\n\t\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-picker multiple readonly name=\"animals\">\n\t\t\t\t\t\t<span slot=\"label\">Animals</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"cat\"}>\n\t\t\t\t\t\t\tCat\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"dog\"}>Dog</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"fish\"}>Fish</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<smoothly-picker looks=\"border\" name=\"icon\" multiple>\n\t\t\t\t\t<span slot=\"label\">Icon</span>\n\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t<smoothly-picker-option value={\"circle\"} required>\n\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"airplane\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Airplane</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"airplane-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"alarm\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Alarm</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"alarm-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"archive\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Archive</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"archive-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"bag\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Bag</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"bag-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cafe\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cafe</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cafe-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"disc\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Disc</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"disc-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"earth\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Earth</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"earth-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"fast-food\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Fast food</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"fast-food-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t</smoothly-picker>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/picker/demo/style.css

@@ -0,0 +1,30 @@
+:host {
+	display: flex;
+	flex-direction: column;
+}
+:host smoothly-form {
+	max-width: 50rem;
+}
+:host .counter {
+	position: relative;
+	width: 3rem;
+	height: 3rem;
+}
+:host .counter-button {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 0;
+	margin: 0;
+	height: 3rem;
+	width: 3rem;
+	background-color: inherit;
+	border: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+:host .controlled smoothly-input:not([readonly]),
+:host .controlled smoothly-picker:not([readonly]) {
+	outline: 1px solid rgb(var(--smoothly-success-color));
+}