smoothly 1.1.1-alpha.146 → 1.1.1-alpha.147

package/dist/cjs/smoothly-app_104.cjs.entry.js

@@ -3947,7 +3947,7 @@ const SmoothlyDisplayDemo = class {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '981d927dd034873a0c36bc98a887fea27f717404', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: 'd116719276616e1499ce706035e41401bf24477f', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '9956b3d4ca39563a2a019338dbfefaf5facdba31', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '93c01dd82919ce76755263db981a5d112f70c08d', overlay: true, size: "small" }))), index.h("fieldset", { key: '57666c3ac265d20b860bd225fb338f766ef2ebac' }, index.h("h2", { key: '51887a6803a5b13f13701175ea4751923ba7e8d7' }, "Smoothly summary"), index.h("smoothly-summary", { key: 'db9e4317fcea8be0e1a723ab547e52d2a11c7f1c' }, index.h("p", { key: 'e31fe597e31d8131467ea944b28c8cb18ef77497', slot: "summary" }, "Some title"), index.h("p", { key: 'ee741a139ff3b04dea3584e8a27f84dc0bd86404', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'd72678d925adc404afc7b5e99c421e2471ab6eb3', size: "large" }, index.h("p", { key: '7b64002e6e674482febc1507d1816067f5a6062d', slot: "summary" }, "Some title"), index.h("p", { key: '52423a3649a9e32399c6fea263ea453e0f82c827', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'b5bec7b331e12cffb7a49f4139fcbd6ec7c39988', color: "danger", fill: "clear" }, index.h("div", { key: '457868fab1156ff33b8ae36980e301c82f1e9b63', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: '5b65b3bb3814c7269e8725d9206e4515b8a56a04' }, "Person"), index.h("smoothly-icon", { key: '677f454f217e36d2758e49d2126c7dafc7a57327', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '60740ef253e3658d2b22db1f40f08cf4dfdf5759', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '99564aff37e38d2b365f9118b924f0e069f6ba9d', color: "danger", fill: "clear", open: true }, index.h("p", { key: '6901a8f41268ea856deae2f586545c76ce64a065', slot: "summary" }, "Some other title"), index.h("p", { key: '656d2da51ba9308a57f4bdb3572f335fc1b1200a', slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")), index.h("h2", { key: '31bab1f24aca280e3cd26502c2d637c71f8a1118' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))))),
+                } })), index.h("div", { key: '981d927dd034873a0c36bc98a887fea27f717404', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: 'd116719276616e1499ce706035e41401bf24477f', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '9956b3d4ca39563a2a019338dbfefaf5facdba31', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '93c01dd82919ce76755263db981a5d112f70c08d', overlay: true, size: "small" }))), index.h("fieldset", { key: '57666c3ac265d20b860bd225fb338f766ef2ebac' }, index.h("h2", { key: '51887a6803a5b13f13701175ea4751923ba7e8d7' }, "Smoothly summary"), index.h("smoothly-summary", { key: 'db9e4317fcea8be0e1a723ab547e52d2a11c7f1c' }, index.h("p", { key: 'e31fe597e31d8131467ea944b28c8cb18ef77497', slot: "summary" }, "Some title"), index.h("p", { key: 'ee741a139ff3b04dea3584e8a27f84dc0bd86404', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'd72678d925adc404afc7b5e99c421e2471ab6eb3', size: "large" }, index.h("p", { key: '7b64002e6e674482febc1507d1816067f5a6062d', slot: "summary" }, "Some title"), index.h("p", { key: '52423a3649a9e32399c6fea263ea453e0f82c827', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'b5bec7b331e12cffb7a49f4139fcbd6ec7c39988', color: "danger", fill: "clear" }, index.h("div", { key: '457868fab1156ff33b8ae36980e301c82f1e9b63', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: '5b65b3bb3814c7269e8725d9206e4515b8a56a04' }, "Person"), index.h("smoothly-icon", { key: '677f454f217e36d2758e49d2126c7dafc7a57327', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '60740ef253e3658d2b22db1f40f08cf4dfdf5759', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '99564aff37e38d2b365f9118b924f0e069f6ba9d', color: "danger", fill: "clear", open: true }, index.h("p", { key: '6901a8f41268ea856deae2f586545c76ce64a065', slot: "summary" }, "Some other title"), index.h("p", { key: '656d2da51ba9308a57f4bdb3572f335fc1b1200a', slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")), index.h("h2", { key: '31bab1f24aca280e3cd26502c2d637c71f8a1118' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: '4f8815355148200bd39feca00bdef34021769a1f', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
         ];
     }
 };
@@ -3974,7 +3974,7 @@ const SmoothlyDisplayDemoJson = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '0d5a8670046816e3b60b55a49229a5c3ba6f1330' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (index.h(index.Host, { key: '67b8c263dfe7d72e1072ba3d630ea74f0a05788a' }, [0, 1, 3, undefined].map(colapseDepth => [
             index.h("div", null, "collapseDepth=", colapseDepth !== null && colapseDepth !== void 0 ? colapseDepth : "undefined"),
             index.h("div", null, index.h("smoothly-display", { type: "json", value: json, collapseDepth: colapseDepth })),
         ])));
@@ -4009,7 +4009,7 @@ const SmoothlyDisplayJson = class {
         this.collapseDepth = undefined;
     }
     render() {
-        return index.h(JsonValue, { key: '1006f580eed81d1b36893203b9508cc8aa582e49', value: this.value, collapseDepth: this.collapseDepth });
+        return index.h(JsonValue, { key: '4794f1dc5f6a104cc37ef15d6ff54650c2e162e6', value: this.value, collapseDepth: this.collapseDepth });
     }
 };
 SmoothlyDisplayJson.style = SmoothlyDisplayJsonStyle0;
@@ -4043,9 +4043,9 @@ const SmoothlyDisplayJsonObject = class {
     }
     render() {
         const nextCollapseDepth = typeof this.collapseDepth == "number" ? Math.max(this.collapseDepth - 1, 0) : undefined;
-        return (index.h(index.Host, { key: '7aa822b43d97af15da1c4b3430273c1811a99fd8', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '229a50034d6f54b7c3d9d59773ebe2b2314fb22b', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: 'e2198ffc8ad806cdc8568ab49e5207dc489cc7e4', class: "content" }, Array.isArray(this.value)
+        return (index.h(index.Host, { key: '096aba61e52c82b8fbddfa73b76ad5378898997b', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '23b082be0c70e647b622f876ce92a91aebcdfcd5', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: '851efa46e336cdcd39eb20b08106b37cf3189c53', class: "content" }, Array.isArray(this.value)
             ? this.value.map((v, index$1) => (index.h("div", { class: "indent" }, index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index$1 < this.length - 1 ? "," : "")))
-            : Object.entries(this.value).map(([k, v], index$1) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index$1 < this.length - 1 ? "," : "")))), index.h("span", { key: 'a1a21544d17a5ea8570fc55e52b1c94d4edf9482' }, this.closeBracket)));
+            : Object.entries(this.value).map(([k, v], index$1) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index$1 < this.length - 1 ? "," : "")))), index.h("span", { key: 'ee54800c2f1fda284a332e02e5abe81a4b7e766c' }, this.closeBracket)));
     }
 };
 SmoothlyDisplayJsonObject.style = SmoothlyDisplayJsonObjectStyle0;
@@ -4059,7 +4059,7 @@ const SmoothlyDisplayJsonPrimitive = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: 'e8d3cd2df3330468c9f8f70e46f8789fa79c709a', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return index.h(index.Host, { key: '7fb3f1eae3a5a4e958aff79b218347ad089810cd', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
 };
 SmoothlyDisplayJsonPrimitive.style = SmoothlyDisplayJsonPrimitiveStyle0;
@@ -4073,7 +4073,7 @@ const SmoothlyDisplayJsonRecordKey = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: 'a064552963175c7c9d933ee1c322dc19d8bf2bff' }, "\"", this.value, "\"");
+        return index.h(index.Host, { key: 'e7e589428127bdfdc3a226523417e256788003f9' }, "\"", this.value, "\"");
     }
 };
 SmoothlyDisplayJsonRecordKey.style = SmoothlyDisplayJsonRecordKeyStyle0;
@@ -7102,11 +7102,11 @@ const SmoothlyFilter = class {
         this.filters.forEach(update => update(this.criteria));
     }
     render() {
-        return (index.h(index.Host, { key: 'e6115858c76bebfe2d4ee5d699c096f5266fe47a' }, index.h("slot", { key: '4fda9e7dc2f61f65691f6b479258a3ffa82912b2', name: "bar" }), index.h("smoothly-filter-field", { key: '942c420295db41999c6551548c9189473858fcd4', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '4b608253fb485c9c4c5137920d98b251d18f4886', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
+        return (index.h(index.Host, { key: '458866acba458b727749aab418c5d07b009f0886' }, index.h("slot", { key: '6deb9fb89f67c8adc89c88b67762b3200953ed29', name: "bar" }), index.h("smoothly-filter-field", { key: 'f3c3c18a6385b7abfeb82ec2320312f0a13f439e', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '5e7586e48cd66190af3d48ab013c1af4ff006acf', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
                 this.clear();
-            } })), index.h("div", { key: '435c8ba897a7051ae06538871a51b2b2425dfb8d', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: '36704f51f24007563ccc3556c693fda85f8b7a33', name: "detail" })), index.h("smoothly-icon", { key: '8747fe7235cb6cfab170ea37c7da377344e913ef', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
+            } })), index.h("div", { key: '742d3c1ab86806412d5ab95bf19249feffb2cd35', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'e8837329167c794efbcbb255ca9c50def503ef3f', name: "detail" })), index.h("smoothly-icon", { key: '0ebf30bb6797347fa77dec156f48c4b0a9d22e89', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
                 this.expanded = !this.expanded;
-            } }), index.h("div", { key: 'fe319ccb3e013591d3615c7eb0fa0b85e3e04f3e', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
+            } }), index.h("div", { key: '31f476a863f44affca3c643529331e769f9658a0', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
     }
 };
 SmoothlyFilter.style = SmoothlyFilterStyle0;
@@ -7129,7 +7129,7 @@ const SmoothlyFilterField = class {
         this.smoothlyFilterField.emit(parse$2((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""));
     }
     render() {
-        return (index.h(index.Host, { key: 'f862d99050860afc8a31ff76a277174a9b30208e', onKeyDown: (e) => e.key == "Enter" && this.filterFieldEmit() }, index.h("smoothly-input", { key: '34b053837d67c857bd575512143d4c334c28ab02', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => {
+        return (index.h(index.Host, { key: '193bf2818e15324d19c9b775d2fcd621f97993c3', onKeyDown: (e) => e.key == "Enter" && this.filterFieldEmit() }, index.h("smoothly-input", { key: 'af427b9aa62eb3821c4f4c515e91540e4077cca2', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => {
                 e.stopPropagation();
                 this.filterFieldEmit();
             }, onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => {
@@ -7208,7 +7208,7 @@ const SmoothlyFilterInput = class {
             (rest.length == 0 || (!!criteria.criteria && this.findInstanceOf(criteria.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-input", { key: '30bb1458f4824a887c342364e1caed6ede33e23f', name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, this.label, index.h("slot", { key: '0ecb4b0c1eb8129d93ee2a066e74abcc1b77568b' })));
+        return (index.h("smoothly-input", { key: '90646ba0c33a81236352bc130c9139d652473b64', name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, this.label, index.h("slot", { key: 'f6ba39d46857fb3ac409c9ae4cc404b0dca9a7bd' })));
     }
 };
 SmoothlyFilterInput.style = SmoothlyFilterInputStyle0;
@@ -7317,7 +7317,7 @@ const SmoothlyFilterSelect = class {
         return result && this.property.split(".").reduceRight((r, e) => property(e, r), result);
     }
     render() {
-        return (index.h("smoothly-input-select", { key: '7ae9928e80c12151cf0565c25742882ab9e58b8a', ref: e => (this.selectElement = e), name: this.property, looks: this.looks, multiple: this.multiple, menuHeight: this.menuHeight, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyItemSelect: e => e.stopPropagation(), onSmoothlyInput: e => this.selectHandler(e) }, this.label && (index.h("span", { key: 'b312b8873cb50ad55de7ec2e7ad70d2799d08346', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: 'c68e541981ac0714557f981bedd4ea27b35561d1', name: "items" })));
+        return (index.h("smoothly-input-select", { key: 'be42267aa9e53f52d199e8d70bb3ed64c38ae311', ref: e => (this.selectElement = e), name: this.property, looks: this.looks, multiple: this.multiple, menuHeight: this.menuHeight, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyItemSelect: e => e.stopPropagation(), onSmoothlyInput: e => this.selectHandler(e) }, this.label && (index.h("span", { key: '0e27e0ad06234c7047faf7f48d3bd82aea2f1d92', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '258556e9627f3d47d558d10abf7cac85ff095eb8', name: "items" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -7401,7 +7401,7 @@ const SmoothlyFilterToggle = class {
             (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-icon", { key: '3b3246598b37bf7c3c4e67304fb82bade6ab8adb', fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
+        return (index.h("smoothly-icon", { key: '2fc0a0d6ad73406cacdb79964618ec4a97f7cfdf', fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
     }
 };
 SmoothlyFilterToggle.style = SmoothlyFilterToggleStyle0;
@@ -8379,7 +8379,7 @@ const SmoothlyForm = class {
         await Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue()));
     }
     render() {
-        return (index.h(index.Host, { key: '8db2bd988a6d36741f2db6c2e7a54bc5afa9f940' }, index.h("smoothly-spinner", { key: '0d17aa5f230cad7f94ed4adadb76091d8aef81e5', overlay: true, hidden: !this.processing }), index.h("form", { key: '09fab657f7f2d09eca3346ab65f6dbe6ad3fdf37', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '97b089bde361133677f7848a0825e3fa6b1b5991' }, index.h("slot", { key: 'ce538fca925a608658ff6ddcb39e14b01a193fc1' })), index.h("div", { key: '2632d3fe7777acafaa402a937407e8bee9f59e0f' }, index.h("slot", { key: '9e14ffef6ead8b8859dc29da3726b348bb85a0ca', name: "clear" }), index.h("slot", { key: 'ded085da1c9059c448e136f2d92611c9ac8232af', name: "edit" }), index.h("slot", { key: '779b97b5e85d94cf9f3b055ff6bdf6ec11432181', name: "reset" }), index.h("slot", { key: '48d4b972be33e58de7bfd715f7ee9e9f1cfaaf31', name: "delete" }), index.h("slot", { key: 'ceaa9ab1727f375ac9efc533f4545321bb64e7b1', name: "submit" })))));
+        return (index.h(index.Host, { key: '1a524d344f4e96bbd82465cdc0a662aa0b39b9f8' }, index.h("smoothly-spinner", { key: '3ac7c01348773d733991fd1837cdaf7fd52c27d9', overlay: true, hidden: !this.processing }), index.h("form", { key: 'f6a329007e5f55614f28c956903b49d58a34892a', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: 'cb19476cd18641ac502f2e0b0907b48edd2cd6cb' }, index.h("slot", { key: '9f9f83491c65062ea2abfb100cab25ac8dff66fd' })), index.h("div", { key: 'cc83dc1583d2d0d83e4b99a536a145b9b3568e3d' }, index.h("slot", { key: '583965a5650563d3e8348a55d2a05eb4c417c690', name: "clear" }), index.h("slot", { key: 'e31490e7bd2c236f62f4d4498300be888adf2c1f', name: "edit" }), index.h("slot", { key: '4122acc0fa1def0f76c4887014f3882aea92e730', name: "reset" }), index.h("slot", { key: '2b94def3df3f8769b4e65794230f5c80b28581f6', name: "delete" }), index.h("slot", { key: '05438afe57cd9acddc20a65577ac9dd1fa71dff9', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8397,7 +8397,7 @@ const SmoothlyFormDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '1b4468fe32c69b78470e0c3d39508dcc12e59eca' }, index.h("div", { key: '1d4344b19b23b14f73220d803dea3fe25f576f2e' }, index.h("smoothly-form-demo-all", { key: 'ee7b9be4176a62df662208c548e34f7bb021e95b' }), index.h("smoothly-form-demo-card", { key: 'e9c692ae3a7e90b27f43711ed2f52767d57a11dc' }), index.h("smoothly-form-demo-login", { key: '45ada807b5ad8d8f0d4b753ba33237eba9a0449a' }), index.h("smoothly-form-demo-prices", { key: 'aeb25e7728c1a3fbf3164c0d94a0e7e3c0259357' }), index.h("smoothly-form-demo-typed", { key: '2b03551712066aced3168a11df6ba2f5535f789a' }), index.h("smoothly-form-demo-transparent", { key: 'a8d2f1b06fff90a17a008881a37e63ff931754a4' }), index.h("smoothly-form-demo-controlled", { key: 'b758e30f18f7e0036c5a80afd1c560eb53797563' }))));
+        return (index.h(index.Host, { key: '8e9b91eba4771356a02e26aa874149e9aec1e49e' }, index.h("div", { key: '322a7b8c4053c5307e09aedc034aec3bd58cfa40' }, index.h("smoothly-form-demo-all", { key: '36cff0fce86410559185639407888e064aa7f6f5' }), index.h("smoothly-form-demo-card", { key: 'cd342e77feb8e16fe9dbdfdae6d5c524ff6a171f' }), index.h("smoothly-form-demo-login", { key: 'effff1fb3a2f20cd235419090c2e35c5241d326c' }), index.h("smoothly-form-demo-prices", { key: '1a129ff9fa249e1c504a3da741c07d882d98ed70' }), index.h("smoothly-form-demo-typed", { key: '9909f61532b5481036b832ab9831cc14268c9b9c' }), index.h("smoothly-form-demo-transparent", { key: 'f2373dbe5692072c831d4ad55b111a23a0270e3f' }), index.h("smoothly-form-demo-controlled", { key: '11b19333d78d1a274c2c9c905661885997d11304' }))));
     }
 };
 SmoothlyFormDemo.style = SmoothlyFormDemoStyle0;
@@ -8407,9 +8407,9 @@ const SmoothlyFormDemoAll = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '8161528625746be4d7bdf2a19ab2798f8037d761' }, index.h("h2", { key: 'dba8cc361df02911c6fee00fb764d68d3013438b' }, "All inputs"), index.h("smoothly-form", { key: 'a6477020eab0ff9471208e885780af7a82a19678', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
+        return (index.h(index.Host, { key: '5b1bc88d46eb325d1f6759f9aa104447fdba9c53' }, index.h("h2", { key: '0928c61810039c6330b5dc5563cd992ba8e2bf03' }, "All inputs"), index.h("smoothly-form", { key: '829e07ab5cb3bcf096676a90522fb5e13094331c', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
                 Object.entries(e.detail.value).forEach(([key, value]) => console.log(key, value));
-            } }, index.h("smoothly-input", { key: 'd0613105fbe7cce643d359a35fa8347d7c323a59', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '0890e44676a00003d231ca181abe01ed839b8360', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: 'eb6bc3905a978bb9c4cf65a4eb67dedc32a31c69', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '482fb0ff7390b72c0348918a53dd7dca924a120d', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '044e5abcc61c0eff2b7eb18784bc6e050386d4b1', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '211355370ac5922d6de2ee66d5804fb9bcad8fbd', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '224ec6ac5c2245966ddb13615905e3aadb418513', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '45a22ff2dc560de2cacad5ba058e38a72466f007', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '41690d8b91d6c942389a6f7c3333889dbdce9d80', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'c3e5b852194378fec7aa020ea13f51087e593ead', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '84533f804ba46ea78ec0d0a49929164023c6151a', name: "color" }, "Color"), index.h("smoothly-input-select", { key: 'ae10b8400dad1585b09cb300a767be8d47465424', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '11d5921c2a6b3c1f0d31743c793af497c065b5f9', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '5f8166be03cee8f532ef279f6d8f0f643344c777', value: "1" }, "January"), index.h("smoothly-item", { key: 'f2184a3f1db06d61ed2aa79929d76c54bf02b9b6', value: "2" }, "February"), index.h("smoothly-item", { key: '123f67da16de33e2f17b08faf04a291dbb1118f0', value: "3" }, "March"), index.h("smoothly-item", { key: '9d76cb9617a193e9ccafb07027aa8fd1c3ae6c44', value: "4" }, "April"), index.h("smoothly-item", { key: '78604f9cbee16913409608b161e0974cea2057e5', value: "5" }, "May"), index.h("smoothly-item", { key: 'b6437c48949e2ac7abc7d8339a2b8b9b6268c97c', value: "6" }, "June"), index.h("smoothly-item", { key: 'cd2e74bc98fa77f0feb5a85571a568af25a6e4cd', value: "7" }, "July"), index.h("smoothly-item", { key: 'f6c97e88c489bd9a095a1aed577ec5ac68d344d3', value: "8" }, "August"), index.h("smoothly-item", { key: 'cc75458f4e29ff7c51e3ef9df5e117f93163748a', value: "9" }, "September"), index.h("smoothly-item", { key: '094082ba5f4335f24bb5821ac17d104266456bad', value: "10" }, "October"), index.h("smoothly-item", { key: '8d7fd6ba2e66c15be3b562b451eaaaf44253180f', value: "11" }, "November"), index.h("smoothly-item", { key: '6bb3716795df10af4b660b43299fba4715c4fca9', value: "12" }, "December")), index.h("smoothly-input-select", { key: 'c8f1dac282eff77bb0ec0703a4587fffb9a9f493', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'c655ae892e78a2938e52edfcbdef41669499cba3', value: "folder", selected: true }, index.h("smoothly-icon", { key: '9bf51d6c025e592f83a961e9be73711e7e416848', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '093a8cb1bd895879e54965c8910453931d3bbd80', value: "camera" }, index.h("smoothly-icon", { key: 'a0db627b712e6ccde5a352be52d9c76f81be61d5', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '24ec22440fb2642dcf4ba1002b3eef1c58397a31', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '641b30f4b4b99a5333fbfd8b72118562b08ce604', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: 'c00ac33cee5f87996915aceeefa2d2ac7ff7e072', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '34657d96629f78db3ea552d618140b1db1aef13d', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: 'd6250b5635f193e2c8bfaa833166814d5f55651c', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: '6c933cd635fd628f026f3cd081990b69dda199e3', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: 'c61cab86edbb1ef3be966cc721e223759192d76d', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: 'ec5595885bb1ec85973419b37a61b3c6c7d1b0cc', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '574f09b443f9fef4945822bab8f91b227e6295f5', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '00351f40468a6d93adcbbb430ad8ecd6ca941a68', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '1eb29cb7a3585d75f0b1d33dce7596527ea7daec', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: 'f18dc11f65ae8bfc859cac02af618359525741f2', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: 'ecba545cc65bf9d11ef7bb909ad676dcba4e7f2f', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '849e63f948458baf0c4f607bda2cd1e73ad95aa9', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: 'fb57de452ce636e131347b5a35659019f3f9016f', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: '29fa6dc36242de8b79acc97576588754803c0b02', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '7967355b8667d127fb3580e733992eaf6159451a', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '59638a657381756d95471abac5b347e7fc929bd8', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+            } }, index.h("smoothly-input", { key: 'c57af39d12e2fc2bd3878c06ee001b8e587c5914', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: 'e484f16b1bccb153520c0da638d01be237a19aec', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '25f0fd2f253503b5309f9483e9bf77f70cd4ffcd', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '528598d2165eb97924bdebec39a6e7532274d684', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: 'ecd8ab8839606172e507c1dad041e7d978bd1d74', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'd166633decd9f8f7774a0085f4551af1ad0c097b', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '29fbdfd0663980deb38a5381240b819874df1091', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'd9afc26a03117b392c85bf38c3c1d60406e3ed57', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '1096404e06bd86919b51de37a2ba2a46b2c1ef0d', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '27ffc7a3f5f47f9879289db358c231334d0d973b', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '0d4dcc27ddd36b9959a636671d990c8f831c15bc', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '317bcb3a33aa6aa87e0afa50ffae52fe7c79aadf', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '09be5d8a8424ca39a178b83e15366b482a02a54e', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '83683920e6d973dee76ce47dfa9ac6149aa2798b', value: "1" }, "January"), index.h("smoothly-item", { key: 'da89d4cfb1eba88414a161106570413db3f6f3ab', value: "2" }, "February"), index.h("smoothly-item", { key: 'dd55727b781b3e39121698d30311bea6428a6399', value: "3" }, "March"), index.h("smoothly-item", { key: 'ca129ff3060ed6cc0eb6da7df04e90aded9413e4', value: "4" }, "April"), index.h("smoothly-item", { key: 'b5cdf99c707914c69acb45d91a58e588d42a4fae', value: "5" }, "May"), index.h("smoothly-item", { key: 'f8dc16d5691c8dff7093b22229bc061115d44946', value: "6" }, "June"), index.h("smoothly-item", { key: '2c77173ebcdc5029351da1933cee902ec1920f24', value: "7" }, "July"), index.h("smoothly-item", { key: 'adae63c07b616b0c18f2585200d39d4080bc381a', value: "8" }, "August"), index.h("smoothly-item", { key: 'dab480e420608e3efddd41f563ec3db49002f689', value: "9" }, "September"), index.h("smoothly-item", { key: '169e1aac1356fd70d5ef92731dd0e38bae8fadcc', value: "10" }, "October"), index.h("smoothly-item", { key: '7f1f789247ea356d38f984023eb61370c6a6b6ca', value: "11" }, "November"), index.h("smoothly-item", { key: '70f2e6e0bb85c779e7bb2a76e583e94809374935', value: "12" }, "December")), index.h("smoothly-input-select", { key: '846329c1550748ca85119fdb6bb552648101e596', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'c3c40c55452b0bddd3aea1518b4f6a34c3ae2b5e', value: "folder", selected: true }, index.h("smoothly-icon", { key: '205e27a9075d35f330425175dcaa2830ed242095', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '9fce3a089ed369df589e0d9f6ede5a2e39d359d1', value: "camera" }, index.h("smoothly-icon", { key: '0dea0d80ca801460a59ecdf2f3e5c33b69be6079', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '506302997f1e0957b123755b9adc94a123d772fe', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: 'a592181429e0b3429dea2bd12136cca9ed98d232', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: 'ed6e6265f2dbf862bb6530a7d04d638cce1f0060', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '0ced09d0e24768129b1e61ab4557092ba870b866', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: 'a6bf136337523090b00ca72ca0639b140a115db9', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: 'e2f5e7df79460e87c77c38e30e38f0d55c44e189', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: '17213f5fa529fdfd807e9929c59c991dbaefd039', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '7ecf488f9468cf489fea150bf405893ecfe43807', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '01231ceee7dd9e2a2f0b616e3c219bc63bb149f1', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: 'a07f94767e668bc7f67a925e5c579944fb63adf6', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '0ccee92b4ed72ae8dbed0574725d2e1799db0b39', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: 'ed5ab7501e7e377daf7579566104fc9244068a8b', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '81d7547b1bd97806ffd5eae0c62b4ead926f0605', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '3a77fd68eb2c8d72e63a789ed9140a05d5630c88', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '854fa539903c6bc46a5aa74829dbce51962f4b2e', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'cbff2bde426a93640d3877776b90a9abe81b3548', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'c6a6b8be6fc1b106db457c999269542f201eef9b', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '659b26fc4e34164fdd126ed99075f6a046c1b643', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
 
@@ -8418,7 +8418,7 @@ const SmoothlyFormDemoCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '57b56226d6b3b90c71ba9053b7f04d06065036d3' }, index.h("h2", { key: '21d1942a63eb993fce7af43c497f4a9423f39570' }, "Card"), index.h("smoothly-form", { key: '06e93fdfd516895422ed37539b94ad05d5b48f4a', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: '78520608d9be25c4e59d671c64f810c5cbd75f2a', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: '6b0bcc7287e8c955f40aa4b81c2f335ce60894cd', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: 'ea987f6436efdcfaaea589222b7462d58de2fbe7', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '7b00dc99b5aaa5d78b5375fb62a4e085cad8d729', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '090ec06ec57e09f2af8ea3820b0aededc630451e', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '139d35fa0a27e5a806250953e3f2948615728b8b', type: "text", name: "name.last" }, "Last Name"))));
+        return (index.h(index.Host, { key: '47195c9bf0bcc9d20b48c685f03385de2e5ef02b' }, index.h("h2", { key: 'df631bed31c4c34bdd8eb119ba5b847cda758ad4' }, "Card"), index.h("smoothly-form", { key: 'd902aad47820dfc5a54108b68b4bb830277ddc55', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: '5ae987514be9a4730c20872d046bd68a08c41f7e', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: '1d332279c0350c71a13e2699b7cfee5b48a8169a', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: '4bfe7a747a3ab8c41bb5a9bcadc5f5f6fdad9d89', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '34a78bdf782e94f42a69c7a511326949ecb1b8af', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '29be80f384b7e12d9ac8b7362016475fb8201a1f', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '770fc11bbec27a21dadc03a37714f2812c036dff', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
 
@@ -8454,7 +8454,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '7a91fe422da41e2a8dd2b491e5cae2f7a524fbaa' }, index.h("h2", { key: 'f65eb3c4c83131bd4fb0d24d9980a2c112f955e2' }, "Controlled"), index.h("smoothly-form", { key: '397a7726c91dc6af93512538bce9b94793170d46', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '37c0e715b0d58d448c281bab9e3b1563220023c1', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '305d2d99e7ec0334ff4d185051a5bf076ef2f5bc', name: "currency" }, index.h("span", { key: '2aa1f0736f03a0dfdb8090d6007d10c652b3c8ad', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'ce72c401ecee7ffeb5775272039a676275c2f029' }, "Dummy"), index.h("smoothly-input-month", { key: '404160663e7622d6c78d9330bf22431aab3a31ec', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '081c2e7a83fa62c518e84234b6772827df6f62ac', slot: "year-label" }, "Year"), index.h("span", { key: '570911a6c35267d2af005480522aa46eb58a4fd6', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: 'a3691c84a83727a820c5ca43c83fa0237440f8fd', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: 'dc7364156fd00718843a501985e889978da8e5c5', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: '8d0212c27fca2e3f53990feac6a14a7e887af246', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: '1bcd38471713a8afa961ed597a07411f6638ddee' }, index.h("h2", { key: 'f806c0c0d39afc6ff7bca878da657b3a3ab77f63' }, "Controlled"), index.h("smoothly-form", { key: '3a5414b6d5a1bf0b6159bfc1512a665a1f92edce', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '5161bab53687eb6d90b10f5983c076e74f6c744b', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '6ac17b9e3f4efafe39e88daa8e6fc18720485498', name: "currency" }, index.h("span", { key: '8ccc12bf463b9627c4035358be04939f236df184', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'ccb77033defcde0b063f60135e9e7a9183bb8b08' }, "Dummy"), index.h("smoothly-input-month", { key: '6f2dbda9d17ddb459a97c633f51f3a4b752804b0', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '8933f9098e1c6578e9e3d0d55c3c3a93ca9c6c1a', slot: "year-label" }, "Year"), index.h("span", { key: 'e075bd951a7a916683de20514727e2a1eb718134', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '330ceace31d763e25c22e1d8f6e7026ecf000898', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: 'ea69209b61c1da214c85d20da49e144eed137cb3', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: 'df9ec9fac71403a322dfe7fc8fcdb95e0bff65db', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8466,7 +8466,7 @@ const SmoothlyFormDemoLogin = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '0dac23c30332121972ed575119819c54345852b1' }, index.h("h2", { key: 'e910f885ec2bde8ce1a27b52feca4ca023ed9957' }, "Login"), index.h("smoothly-form", { key: 'd72e22c0fd8798bc58a8c1d3856cd2afe73af49f', looks: "border" }, index.h("smoothly-input", { key: '426b1483cb1f6cf224d75dcd9c985f002989dd03', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '0d74bc8426598393539143f6ffcecc62f61a6a12', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: '1103c5fd164ecacf394dad6f41855e7494de987d', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '51e2419d9e2fc7f49287d3fbbbc88a355fe02552', slot: "submit" }))));
+        return (index.h(index.Host, { key: '639bda96dd035eacf22c4526a3a3bb76a213d884' }, index.h("h2", { key: '9f680c0b96b5e6bd02b5e86ced43be843ed6a86d' }, "Login"), index.h("smoothly-form", { key: 'ddd6f872bd0f65d7f932c500369ece5b5bd50402', looks: "border" }, index.h("smoothly-input", { key: '8c704bdd4b100086f80b1146cbd026e8f2fac31a', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '87af6011fcf3b3697cfa545436b6a400fa9ff879', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: 'd77311b95bb6a0e0fc5d0b9f7cc6ce577fa09ad4', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '295f3fe294307e0419c4103381b2d81c9ea6ba38', slot: "submit" }))));
     }
 };
 
@@ -8475,7 +8475,7 @@ const SmoothlyFormDemoPrices = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e32e4f3e3b14e56d6f82973b191f063cb33fb9c6' }, index.h("h2", { key: '69ccce1493c2eebedd770f03175420e954dd5823' }, "Prices"), index.h("smoothly-form", { key: '24b78da1af9fca9775334c62fb3e2cbe2079dd4c', looks: "line" }, index.h("smoothly-input", { key: 'ca6e2911020bd2c449ed43df1b5d703aa6af1b27', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '44f3afa1718d70de2147aca2ce074bb57b907577', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: 'bb6acb4a7cce272a7db759676a7134a65075869a', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '977f058bab293356fc3c0fa773b4303e826494d2', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '00ec3f88326ad2556ab0f819186c317e1d394214', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: 'bd3a76200aaf540f763a66626fef305a4b9bd367', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '10162d5db8f16995fafc68a2ea6dd826b95769a9', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '2b73e8035b78a53653744bf65d29ff7f66de7080', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'd805ffac8f4d1a201179c44420dcdd5da089cb90', slot: "submit" }))));
+        return (index.h(index.Host, { key: '3588d149bdee689dedeb5859fd6035c6a3fdbc9a' }, index.h("h2", { key: 'b626c1463eb6a06336f6dcdc1abf07c9896fca9b' }, "Prices"), index.h("smoothly-form", { key: 'beaf96d11b0f05cf5cfb5743d3da87074801519a', looks: "line" }, index.h("smoothly-input", { key: '9664b6c8b1be216db19930de654202ebf14fe726', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '9e97b011290d63c3d6ad4b8fb219e9ac8e6cdd21', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: 'df8740122ba61fb0005c7137ae6dbe34436ae32b', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '039a52e93ebaf28f21eca1ece69239c32d34689c', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: 'cbea0f482e6febe04756823fdd3e732ab45b799f', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '64880156e5fe1b7614fc934ecfac0d723c783ce5', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '8c98bc75a27ada8d0ed55e418cb78d82267757d1', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '552640bf5c548a676bc7593f4230f28cab516402', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '164a8764cbdb915f69bc73677cba7e33bb88d942', slot: "submit" }))));
     }
 };
 
@@ -8484,7 +8484,7 @@ const SmoothlyFormDemoTransparent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '13db21011b1d9a99f2010db9a813edb83d61e889' }, index.h("h2", { key: '7aad4c19a05438f37613f8f8b8729f4bc8eecb44' }, "Transparent"), index.h("smoothly-form", { key: '371bdc7320e74afd0d2d1395aadbfd89570c140e', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: 'd8abb039483646b884eb63829cbbc67218d83732', name: "file" }, index.h("span", { key: 'f22df78ec07e3149d5e1de814a15c6f378d28728', slot: "label" }, "File"), index.h("smoothly-icon", { key: '153fed553f15aedc74c0ba7a5776855955fb349f', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '665199023a15e98b8e3c705c493e13dd215d712b', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '4881f7f29c266c2a0b8b55e48a3444ce87087a8d' }, "Date"), index.h("smoothly-input-date-range", { key: '46e0ce6be2f723fc67f749fe57037fb8438a0d8f' }, "Date Range"), index.h("smoothly-input-select", { key: '516be600d94aa56be38c3437428666f8c3f12fd8', name: "transport" }, index.h("smoothly-item", { key: 'd5a017a5e0348637207c857a0df8483c02de7fad', value: "plane" }, index.h("smoothly-icon", { key: '8ee716b676bcfdd1a1084a4c88c6fd163c50ebfb', name: "airplane-outline" })), index.h("smoothly-item", { key: 'e5dbfbb46973c50742779e9cd722aee51a3e7ed0', value: "car" }, index.h("smoothly-icon", { key: 'd8df99b37d6ec12a545a0d80a5effc42751de288', name: "car-outline" })), index.h("smoothly-item", { key: '184c8f96da2b32e6f4ff028d955846cbf9dbe9ab', value: "bus", selected: true }, index.h("smoothly-icon", { key: '27898d612ace09c64fb3af89d100451603859800', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: 'f867b67da3c9f6d4c5678a52f41d5f8e34c24337', icon: "checkbox-outline" }))));
+        return (index.h(index.Host, { key: '66afad7ad7724d0bc421469645f29e54cffbd706' }, index.h("h2", { key: '04135fe894d302fe1608971fc3ffbbc8dce71dbc' }, "Transparent"), index.h("smoothly-form", { key: '91912db020dd04c75ec7d2693f452f03af268389', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '89579f31d8341c9083a526f439aac64f323d6e06', name: "file" }, index.h("span", { key: '6367fde988fc5f41a66e202601817d60b4b4de5d', slot: "label" }, "File"), index.h("smoothly-icon", { key: '93b21f563a02a1ce803b2e630f78ed17e4c7e57e', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '01cbeaf1f36f49f8ded974f6f7d112f1b0d4b4e8', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: 'a6a1d029837e66970af6b5ba6c06b1e897541fdc' }, "Date"), index.h("smoothly-input-date-range", { key: '30c0b074e4554bd11f20cc8f5a5efff1b24c3521' }, "Date Range"), index.h("smoothly-input-select", { key: '80633731937a1ec995fbcefdf3a672a0f75fef59', name: "transport" }, index.h("smoothly-item", { key: '682ba620a8881f37bbf0d614742328ba38e36bd6', value: "plane" }, index.h("smoothly-icon", { key: 'b24f3a11fa3a1b529edb7baa300bd69ca95e0158', name: "airplane-outline" })), index.h("smoothly-item", { key: 'd3ed32aaa5ef2bddcb41c07ea955f7e6c81d5470', value: "car" }, index.h("smoothly-icon", { key: '4b7dd48a9778f11c3e2718a0e4b30659cdd701cd', name: "car-outline" })), index.h("smoothly-item", { key: '961da81363e2ead96ea4fc37928eec567d9ff82b', value: "bus", selected: true }, index.h("smoothly-icon", { key: '199cc916e3365f0c36da44188b17c1e596f1fb40', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: 'f58549d1386158517937d1ca283e427d74bbe8f5', icon: "checkbox-outline" }))));
     }
 };
 
@@ -8506,7 +8506,7 @@ const SmoothlyFormDemoTyped = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'fc99cc0a4b7c3cb3b6adb9b9aa1fd539cf58006d' }, index.h("h2", { key: '5a62ce15de04c18a549f2de53f2388865db20dbc' }, "Typed Contact"), index.h("smoothly-form", { key: '5a6d2173c99ef1a3f46dfe2ea62524bd11ddc316', validator: Contact.type }, index.h("smoothly-input", { key: '62f55ae258b766bd7a0f94e9b885b8aac35da686', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'be98a426f2b872a8ae513a3b91fc1e5e04324bfd', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: 'c3aab7020b238ac3cd3167369be72fc02e35527e', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: 'dbc3571a46360d04d1f4bbfdb4951a62c9f12ba5', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '0f2f99c3a72c0ea704503bebda1ab69b7ad600c0', name: "country" }, index.h("span", { key: '2072689d5fe22e6e6d0884fdeca4ba039ef788f8', slot: "label" }, "Country"), TimeZone.Alpha2.types.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '0c797685fc235a62dc6a985a34c4a6a04095f28f', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: '281cf5a8060b5ccb0b3794fba49815c456425fda', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '9fcb4a965a2c3f2dc946181f0218dbc97776ae7a', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: '842c62c2e43b1eb4d382f8ccde736c48013307ae' }, index.h("h2", { key: '095c6ba60767e0bd2745e1555ea5bfe624c9635c' }, "Typed Contact"), index.h("smoothly-form", { key: 'c75bbadc9928aa8fafc87ab0538d4e14b070fe86', validator: Contact.type }, index.h("smoothly-input", { key: '43adf13f874649f9bd6b802d8bf51db6bfaeb341', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '15c965b10be91520721c68c857344d922c28b133', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '3197ff7b0dd15a1111de745a2017aa0cce4e1d1b', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: 'e05a89b6158a1e7aa0345f72e348c0144f53199b', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '77bfbf3e5406fe151cd89e721397d7051c3f0028', name: "country" }, index.h("span", { key: '51ec1831e36b50798615fdc3f07099bf164371f9', slot: "label" }, "Country"), TimeZone.Alpha2.types.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '90cf06aa7bfd65e3549b68ee6350e3a3e20279bd', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: '250c407286bbb671e119681a4fa0f7e82cdd3567', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '119ab1442610a6c2cf8ece2d778383f79cd80f84', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = SmoothlyFormDemoTypedStyle0;
@@ -8604,7 +8604,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index.h(index.Host, { key: '49bec1bcd092744258f706b940d6ba201bfe6429', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index.h(index.Host, { key: '194390ecf06b81ed0bd7da30cdc27e1e58ea1afb', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8624,7 +8624,7 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (index.h(index.Host, { key: 'b5075210f818fb563017b3bc9d77e403088c5f3b' }, index.h("h2", { key: 'd60fd3aa532071aabd49dd82349fc3013c32d6bb' }, "Filter and Variants"), index.h("smoothly-form", { key: 'df6f3ef469ab98142223e43cb27926b9ca3c08d4', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: 'a1f181d49979d5293d8f0bc24052d5540455775e', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '9b5575b033434ed719e8c2821a3ff58c30e357b3', name: "variant" }, index.h("span", { key: 'd65b7e1797602966bce4a3f33d7688f66d22b8f5', slot: "label" }, "Variant"), index.h("smoothly-item", { key: 'f9ee2d941d06c112a4280ef90f0b413ebf656f85', value: "outline" }, "outline"), index.h("smoothly-item", { key: 'c5bdb5cbc8fca5a3e1285c4d2bca48ffc27f9442', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: 'a5ed6cdcf1236eceaf19f6006ed962fff1136e74', slot: "end" }))), index.h("h2", { key: '00ed8ca8f0f6156ae066c47b71b0eb9b6a28b17b' }, "Props"), index.h("smoothly-form", { key: 'ff5b618bd86d7e770762782c78341539bcec75bd', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: 'd0ffed246a9f44b9273076abe2e984cf5f2eccfe', name: "color" }, index.h("span", { key: '38c8bddbddb5be2e8c46932aa1b305491a4f7a3c', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '18b5fa078b503c9f2d9130b93288d9d4d8876808', slot: "end" })), index.h("smoothly-input-select", { key: '7b941cc7d46c799235ed389a6a6c36bcdc899827', name: "flip" }, index.h("span", { key: 'c942610a6af29375e43987bd7c26c0f4ab36fe96', slot: "label" }, "Flip"), index.h("smoothly-item", { key: 'ba165b993bafc8564460aaa8c272b32fbfea4dae', value: "x" }, "x"), index.h("smoothly-item", { key: '18ff9888c43f12de485dd8143a0d517c68795c85', value: "y" }, "y"), index.h("smoothly-input-clear", { key: 'd78ccd17290bde416d8d676162dd37e25a167d79', slot: "end" })), index.h("smoothly-input-select", { key: '525e59ab634081bda5bf1e2e335b0db8c86aa515', name: "size" }, index.h("span", { key: 'ebccb0f4c76101e04b00ae21c2b3e5edd4da690f', slot: "label" }, "Size"), index.h("smoothly-item", { key: 'afe443791c5e3a67ef38b4f5cd9a00c90adb2fd9', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: 'a3c747455b60b93c65a7c9416a7e5b66c8cfdbe7', value: "small" }, "small"), index.h("smoothly-item", { key: 'ae57bd40727642eb474848ecae9134c491977179', value: "medium" }, "medium"), index.h("smoothly-item", { key: 'bee66916e0f0a7effbfc56dcaa4d41d19d911829', value: "large" }, "large"), index.h("smoothly-input-clear", { key: '1a69d2a5f02b7475f22295a150006a00ec7565e7', slot: "end" })), index.h("smoothly-input-range", { key: 'ec7642b1bccd2922dc6a0ca6809205405718e0a4', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '7f46f7fede468bcd0c0b8fa119adbb7cb0484e41', slot: "end" }))), index.h("h1", { key: 'c7770b8b83c97a9a1bdf93cfdf41cef7becb2f11' }, "Icons"), index.h("div", { key: 'cd28e50b1e1ee6a448b16522a193c0137aa83395', class: "icons" }, [
+        return (index.h(index.Host, { key: 'de03646f08a66820466640aacb918b061025654b' }, index.h("h2", { key: '7749354312e720a5e7ea9dad8a727129f78bd4c4' }, "Filter and Variants"), index.h("smoothly-form", { key: 'fcb3f5e9b5e366d3f998198953c0ce3eacb61e14', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: 'fb1eb4418fcad15db9a78d9b0275f5a9d5ee86ed', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: 'ae5e480bcdb9886ebe533aa277bba6229a16144d', name: "variant" }, index.h("span", { key: '11846ad1787874c738d6875e6f3e0e1d0448bd7a', slot: "label" }, "Variant"), index.h("smoothly-item", { key: '9249acd2dfc76baa4f939e440de1c2a997728b0a', value: "outline" }, "outline"), index.h("smoothly-item", { key: 'b6ba636adbd9884bc7008c4e8e839a7a9b24a306', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: 'ebe4db622341b92e5d17731e882cf56ab9f40ee6', slot: "end" }))), index.h("h2", { key: 'a250971d17fc6df2213137c13a35111d59fbb813' }, "Props"), index.h("smoothly-form", { key: '8b3ba3c3cbbfadfd602ab06bd4d19f6e405b8fec', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: '9d8ace6de0c524aa77992704421397bbdda60c0b', name: "color" }, index.h("span", { key: '043d7335321eb4ad71efb7457b26d64fab5ece61', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: 'd7c1fc68fcc2d469af849816d7f217924c7a9289', slot: "end" })), index.h("smoothly-input-select", { key: '8fd2a3eef5e16785f2c0a8504b8d1b495f6da796', name: "flip" }, index.h("span", { key: 'b43d966896ab155530056e2436f1b164f97d517e', slot: "label" }, "Flip"), index.h("smoothly-item", { key: '0342aa8451ba8a963e5c0a6ac078a0673d41ae2b', value: "x" }, "x"), index.h("smoothly-item", { key: 'add077522e669bb3e5bf94d44d4e01f391311209', value: "y" }, "y"), index.h("smoothly-input-clear", { key: 'c352384c1b298de9cf5936f8d5f5e5f55cfcf460', slot: "end" })), index.h("smoothly-input-select", { key: 'f89aaca590f6a5dbf178df3667930794557f6b11', name: "size" }, index.h("span", { key: 'd3ebf40f0265bde3a6f58773f9c2edb4e683650f', slot: "label" }, "Size"), index.h("smoothly-item", { key: 'd1a2a521e17cd3eae0f7f005744abbb966d63da5', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '442378b7ac1dc5b41117e85ff82df5a4da98ba1f', value: "small" }, "small"), index.h("smoothly-item", { key: '71c9336343e2fc2ac0e1d9ac8d50717d103f8475', value: "medium" }, "medium"), index.h("smoothly-item", { key: '83e5069bdd3a019e547325ae96ebcd3b9e2d9124', value: "large" }, "large"), index.h("smoothly-input-clear", { key: 'cd8e812d41c8d32856c72eee68d4d3109d89b8ca', slot: "end" })), index.h("smoothly-input-range", { key: 'ff353a87b7ac9b44f9ff5a579431b51bc7e4dcfd', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '90702b9028d7c38b9d4033d643d8f05edbdf38f0', slot: "end" }))), index.h("h1", { key: '22777f315a2a9d7b0a01a8b5ecba070b5c883cc4' }, "Icons"), index.h("div", { key: '47a36af4c6a7fe687e50c0cec9c47a9b2da53a74', class: "icons" }, [
             ...Scrollable.Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),
@@ -8898,10 +8898,10 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (index.h(index.Host, { key: '102a79826fbd94c20706c57edf720bed5e5f5955', class: {
+        return (index.h(index.Host, { key: 'fa35410fcdce7a426822c2b8d3b2cef313ce7a3f', class: {
                 "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "",
                 invalid: !!this.invalid,
-            }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '73f7a9644e1c7a21024da254aa466177b7384b68', name: "start" }), index.h("div", { key: '57794c3c882d031c8ec72352e80fb7f4f93258df' }, index.h("input", { key: 'b0b5e63efb83c48449034686bdb3fcd703bd156a', color: this.color, name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, inputmode: (_d = this.state) === null || _d === void 0 ? void 0 : _d.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_e = this.state) === null || _e === void 0 ? void 0 : _e.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern) && ((_g = this.state) === null || _g === void 0 ? void 0 : _g.pattern.source), value: (_h = this.state) === null || _h === void 0 ? void 0 : _h.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { key: '842f25036ac8553d496196f27dfcfb70828118c5', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'e7b53446371776783029f3f88a918902537de64f' })), index.h("smoothly-icon", { key: '08bb54f7da7870f01299970011e193f2c66921a8', name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '815adbc27facde011d4f7612634e115ecff1d5bc', name: "end" })));
+            }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '2e8d379086d3bd101a45b60a74993a6c23ec81a4', name: "start" }), index.h("div", { key: '0f3e19cd27f4e9966c564c852f7370642d5624a5' }, index.h("input", { key: 'a593e2a4335207ccfa4e8bcf69641bad6be8b6ce', color: this.color, name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, inputmode: (_d = this.state) === null || _d === void 0 ? void 0 : _d.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_e = this.state) === null || _e === void 0 ? void 0 : _e.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern) && ((_g = this.state) === null || _g === void 0 ? void 0 : _g.pattern.source), value: (_h = this.state) === null || _h === void 0 ? void 0 : _h.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { key: 'cd5d27a9803c99ce6cacd7e88571a54675196221', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'be2b5a809f6ac9879adff491a4cdb7bf0920f05e' })), index.h("smoothly-icon", { key: '7a859cd346c574532858ff32c426e2bec62259a8', name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '12bba7be7c0d466ffd087532334cd80ae2efaaa7', name: "end" })));
     }
     static get watchers() { return {
         "currency": ["typeChange", "onCurrency"],
@@ -8973,7 +8973,7 @@ const SmoothlyInputCheckbox = class {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: 'a4d2b1536735268498128c427701c5a43d9db83e', onClick: () => this.inputHandler() }, index.h("input", { key: '6686fe73fe7a349ed4e391f90b7c9d9b7d6aafcd', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: 'b02c92c0dc37759efb99a553db9a41f522f9e76b', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '317b14039a27eb6dc6fb3b002b61d3c1fe0cc0fd' }, index.h("slot", { key: 'adef65ba4451bfd065385a6ed1ea999e8be27b4e' }))));
+        return (index.h(index.Host, { key: 'd577235670937f8d918c148222a26351c005e247', onClick: () => this.inputHandler() }, index.h("input", { key: '01ae037c0e30264cd108fc5bc8a7049af35be1d8', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: 'efd24ae66b5489814637c40f4731672201b6e0a2', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '986ae2920b07e9b3349d0a0628343d7d4967ad5e' }, index.h("slot", { key: '958090ff9c3821804fcfd4b3ddefa81d407f4927' }))));
     }
     static get watchers() { return {
         "checked": ["elementCheck"]
@@ -9022,7 +9022,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'd411edd825c1e8fcac12e4d5080ff35256c8b14c', title: this.tooltip }, index.h("smoothly-button", { key: 'be710bb150f4c2bde4405b839ef3fac510a4f7a4', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '6b3cb43e6365e09b398eff0642a7ae68ddc64d13' }), index.h("smoothly-icon", { key: '5942ec5ead4247940ce444ad3504779b1109a304', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: '88632cd738466bd27deaf376fa4824135df4b8f4', title: this.tooltip }, index.h("smoothly-button", { key: '40eca9fdb86f2d1274bbe1fb74baf05c9d70eeaf', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '63d3db8b1ce6566b04e08838c6684a82c10b4e69' }), index.h("smoothly-icon", { key: 'efefab0cd174dff1248cac789f92937cb689b38a', name: "close", size: "tiny" }))));
     }
 };
 SmoothlyInputClear.style = SmoothlyInputClearStyle0;
@@ -9172,7 +9172,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: 'f41ed020ed9b6ef9009e722b6cf1a4828f38987b', style: {
+        return (index.h(index.Host, { key: 'fe3fa79a1537d5ab9bf48b6078306193d0566352', style: {
                 "--hexCode": this.value,
                 "--rgb-r": `${Math.round((_a = this.rgb.r) !== null && _a !== void 0 ? _a : 0)}`,
                 "--rgb-g": `${Math.round((_b = this.rgb.g) !== null && _b !== void 0 ? _b : 0)}`,
@@ -9181,7 +9181,7 @@ const SmoothlyInputColor = class {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, index.h("smoothly-input", { key: '8eb1b0295940116951fcd4cd7c28d5898ea282d5', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'abf902751a8b55b776c1609830aafb5355ba37c3' })), index.h("div", { key: '8cea7592d8e024cdf278e3cedc6db6649de91117', class: "color-sample" }), index.h("smoothly-icon", { key: '60591e7df9b318cad9a4999bb93bb8ad9b0dc411', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), this.open && !this.readonly && (index.h("div", { key: 'df84ce622ad29ff8ef2a0ea699b8f6de6c1b0598', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '9777e50a6d3c5001e0f69c8acda3c89e3cf7cb22', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
+            } }, index.h("smoothly-input", { key: '3eeab7db8aaa97518f0a47fb40cb16e531ad833f', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: '90a5f931879c30fb03dfb930fe6d7abc86e02c8a' })), index.h("div", { key: 'cb3f6c27d6fc217b3debc43261e05afba0f722cf', class: "color-sample" }), index.h("smoothly-icon", { key: 'c4ae88419adf864934c9f1f775d9aeb3d2765a12', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), this.open && !this.readonly && (index.h("div", { key: 'ed0b30fefe5562083a58c7bb1b97f1c0f0aab172', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '374cad1d0cf0fc19d9186789e211b811f5b67fcf', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9195,7 +9195,7 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'bf7ba5a03fea69e6a5ee2396a5a3dcc405215a17' }, index.h("h2", { key: '58524e073c4fef1856c34acba49b1cb1046a1b96' }, "Color"), index.h("smoothly-input-color", { key: 'd8418c53f6bba06bd0d133bf74552ea8987e1637', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: '4d2fa041ad2749a80f5dc6936ba902b76f53f861' }, index.h("h2", { key: 'e8674eb8671a063a127b5b27227610a59e2d5140' }, "Color"), index.h("smoothly-input-color", { key: 'e1f0e015c60f1bb1935d21eb144ea1c8d9a8bf1c', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
@@ -9276,13 +9276,13 @@ const SmoothlyInputDate = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '0ce370402a7b7fbaa50748ecfa9dc7a290e0abf6' }, index.h("smoothly-input", { key: 'de44b9247e94c29789e3f32f5a0d9de78884c8f8', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'd3827330c2da5c3f301bcc8b8b8402a252774ca9' }, index.h("smoothly-input", { key: '773de864e0497e05c9724f43208a04b303e3863f', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, index.h("slot", { key: '4e9a562b23312a24aa685007295f415844c800ee' })), index.h("span", { key: 'ec5a3478bfea8d24a969c78f9e1db7d113061dfe', class: "icons" }, index.h("slot", { key: '1bba99895c923bff29a329eef742de01a169d72b', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '3954a92781471d65bd08cedf7ee037402dc3571c' }, index.h("smoothly-calendar", { key: '88cf33a742512a07d555637c29fc94e7c0c465b1', doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), onSmoothlyValueChange: event => {
+            } }, index.h("slot", { key: 'f04f4b6e993af5de364645c4cff8ec16d959070c' })), index.h("span", { key: '2fee5214bdffdb4fcfb252f0c81502a2b931ae9d', class: "icons" }, index.h("slot", { key: '5d227274f59677e7bc94371a858e32d29cbf1443', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: 'c1bfe1b3b2173b0a9c134142db7448c9c07c095a' }, index.h("smoothly-calendar", { key: 'a5c16fb8cd93c384bd89256678db4c58df6646b3', doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, index.h("div", { key: '4eae27d052880b393e73a84d76b0b5f4c3773e13', slot: "year-label" }, index.h("slot", { key: '52862ff20bdd07d24b236f534db5d42f16935b52', name: "year-label" })), index.h("div", { key: '8ed609583a1ddde853d3c43a364e87bd8255cd1e', slot: "month-label" }, index.h("slot", { key: '58ffa3219119629c1973948221a8cb9d3edd32b1', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: 'd656ba7994cd1bb23b968ecb630d6b05f82bcafc', slot: "year-label" }, index.h("slot", { key: 'b7df37fb80c5e48f6995fe4cb293179162623194', name: "year-label" })), index.h("div", { key: 'f033e3011bc709782045243bf13e2d08d941ed24', slot: "month-label" }, index.h("slot", { key: '87e7701f16d1e96a7820ffde9eddedc1d8ff5dbb', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9376,12 +9376,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: 'ac38c70b3fda7c1f70a2f0dcf84a2a24d07f8a9b', tabindex: 0 }, index.h("section", { key: 'dbf1ce8b3e65a8760ac860fece92cc7c2ba4315d', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '428014f542526c04be1bec0ac39da1fa133a60dd', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (index.h(index.Host, { key: '04c0a70b608c0e68e87a9b9460ca9d4351f0b392', tabindex: 0 }, index.h("section", { key: 'b81dc5ba00d1fa99cd2193ddf90bfda9e0476f03', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: 'edbf9ea2bc332079227ec5c32d655df193a2b959', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
                 ? `${format(this.start, "date", locale)} — ${format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, index.h("slot", { key: '74d6f5ece790a622870c2c7b791b7a59269c81a9' }))), index.h("span", { key: '52ded6b1dfc3bbc893b971e261a7b22921ad39a0', class: "icons" }, index.h("slot", { key: 'c84a7826cb5bedd53e7dd1bc4c258be276441f81', name: "end" })), this.open && (index.h("nav", { key: 'db9f95213b1456bf17f28368d51dd9a42837caf0' }, index.h("smoothly-calendar", { key: 'b1f8175067ceaa046b19558a23e037b94b9f458d', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: '90eb36bad4cc6c10a428948ac251d85acd551ea7' }))), index.h("span", { key: 'e470df989e431a0afb75b5dc0e765237491da37d', class: "icons" }, index.h("slot", { key: 'ada0ad58b6c5dd9cf1011befa947bd1d13eaab05', name: "end" })), this.open && (index.h("nav", { key: '3d6bd1fa7846e0bfed025f65ab4dd38e66f36dee' }, index.h("smoothly-calendar", { key: 'ea38b77d63eef0da563817825de3c3162118c70a', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9411,17 +9411,17 @@ const SmoothlyInputDemo = class {
         this.duration = { hours: 8 };
     }
     render() {
-        return (index.h(index.Host, { key: '4fd6d865364d27de3738bf6aac81f3cf4f37d41e' }, index.h("smoothly-input-demo-standard", { key: '3d4ba861f257b200fec4955729ccf287ae0e991c' }), index.h("div", { key: '6b00479b025cee489ee764e7958629deab4c47cd', class: "inputs" }, index.h("h2", { key: '1fd26c9a01d1225ddac75bdb0e31ef4aa05aa9e5' }, "Calendar"), index.h("smoothly-input-date", { key: '4be7918d952aeb92fcac2f54739579a6b522849c', name: "some-date" }, "Calendar"), index.h("h2", { key: '07564730bb786d9229dc2c41f3a04bddf6e011b2' }, "Date Range"), index.h("smoothly-input-date-range", { key: '6cb5b8acc5e85e8900fd74683d1bf8a7dcf6c8c9', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-date-range", { key: '21add4548d381cbec8734c6ab2db782a10bf97b1', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index.h("smoothly-input-reset", { key: 'b26fb109be1f6297741031b5b34ec801a048397c', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '302da401baef7f7374f0067f2fd6615d230260f6', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (index.h(index.Host, { key: 'cb8bed8c81d0cedf2a0133d4848c8b6e3a47367a' }, index.h("smoothly-input-demo-standard", { key: '87014de0269087db2137397b99bbef0405b1e7b7' }), index.h("div", { key: '65052c184164add678155eb8bea4e270c3dac854', class: "inputs" }, index.h("h2", { key: '708b48f20466a1d285084beb8e496bfc0950af70' }, "Calendar"), index.h("smoothly-input-date", { key: '2141134c71bee68102e5710ef96416511a74ed49', name: "some-date" }, "Calendar"), index.h("h2", { key: '3e93f4c59bfd09ce7a1876749eda088fefb3c5ba' }, "Date Range"), index.h("smoothly-input-date-range", { key: '1f67bd5bfcf03ff06997be32382f81ce5e30fa80', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-date-range", { key: '2a4c19433eac56546c339c0cb1bdc7cb2ddc8e40', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index.h("smoothly-input-reset", { key: '8cff3ee7dd205de7e16910b7a41c94afbfaa8aea', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '6efab3090f637694dcfcac25d7e609ef1ef3dbdb', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
                 "--padding": "0 0.75em",
                 "--input-width": "12ch",
-            } }, index.h("smoothly-input-clear", { key: '5a7c661d3501833ef40a9719388d0d377cd1182e', slot: "end", size: "icon" })), index.h("h2", { key: '2957a012d3a96245a16bfb33095be62e4cf50843' }, "Date"), index.h("smoothly-input-date", { key: 'cf02cf410daf9ee55446f7f2cfc69155b79e0345' }, "Date"), index.h("smoothly-input-date", { key: '16ceccc04d22ddedae96671c579c65ca93863fce', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '129dfd68eb95c2028e459cf207ff566a2af61738', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '8908eb3521985075017dceb2577425ba07d0be28', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '1c9477e255750c246c394c90787c1030f0c2cfb1', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '21604d1cbd43ffc9e5b0a05749c83965f875796d', slot: "end", size: "icon" })), index.h("h2", { key: '975900f4c2cf6ba28882d927f782b1ab6a3aa1dc' }, "Select"), index.h("div", { key: '7594cd8dd00ce2ff853bfb9572920eebe03b3931', class: "select-div" }, index.h("smoothly-input-select", { key: '27071d6823591eb102c96da1f240accaf495ac54', name: "select-dessert", looks: "border" }, index.h("label", { key: '699758c0c620c549f81facc0840fc23ab5b93531', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: 'bcf576505ed1bf87542ecd34c4e3de9aa58061b2', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: 'a92e747ae9bcb569536332f7b121fa1dd2047960', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: 'fe633ba93f49b410a6ec49a551ce2078740aec72', value: "3" }, "Cookie"), index.h("smoothly-item", { key: '3d14d945906d71bb91a2ce4fb2f1bc7005bd0942', value: "4" }, "Croissant"), index.h("smoothly-item", { key: 'fbf417d09f07979c62cc758d5f96a8621f73ba54', value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '8a3a6511a867d50ee1ff4b30acb555f91c32b583', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '0c0028d6c47cb939280d4169924f7447787a0698', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: 'eaf975fb7b9f717edfb31250ff793fa6c1e8bc5a', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '231e26c0ad6c8e0d93d4cf6644b3cc6c54c6e3c1', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '6e95f3e73829f568306b8e61faea9467dd0782e9', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '6d486c501edf979107e746a2af879587c581558d', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: 'ac8e98d02fa92253640fe445ff8d149805cbabb6', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: 'c00b7dacc162f437b112ff8b27a643d6028b9718', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: 'cae49dde9e14e302721112fd30c1743344027cd1', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '65bcbe71db584492e5bf924d6fda8fce78c269e8', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: 'c0f983f1b29debb3a882f09e56baf3df090af219', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '69aa5700967bcbf0da413997668d22a3c709a1ca', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '0b8e0058b09855d66a746e2044b8519e315d5cd2', value: "narwhal" }, "Narwhal"), index.h("smoothly-item", { key: 'd641473ed6a4445d02efa1781ffbf08fa18d08fd', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '8ce52062d9b094f01090c5ca3663dfbb61609271', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'e972616696bb4f86523c5d57fa98d31d194dabf8', value: "folder", selected: true }, index.h("smoothly-icon", { key: '733c617a65fd2a460f5c1d6465203b7e2f2edadc', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'd218f330089f8a14295a5ae844f632b5085e64ac', value: "camera" }, index.h("smoothly-icon", { key: 'f3de5f4889163c534c4c08f165623d9b8777ee33', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: '10817ec0e2cf3636585574f08a5311c7866f15ba', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'af99927136ad179683a77fa1323edefce3283294', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'ce04798826edb63c93445b2bea942f23b9bb7ff7', value: "1" }, "January"), index.h("smoothly-item", { key: '93bb7fe39ef45b2a7c950db9e6a74961e1f46367', value: "2" }, "February"), index.h("smoothly-item", { key: '8f68805377430fab2d70dca2db6cefd71f6ce28e', value: "3" }, "March"), index.h("smoothly-item", { key: '45db2eab7001b746f3f89625492f4913cadd2293', value: "4" }, "April"), index.h("smoothly-item", { key: '435563510a216de4dfdf2893ffdc1f5f3b15dcad', value: "5" }, "May"), index.h("smoothly-item", { key: '4459f5e251b6b01e6cb731100d219a174e3e79a5', value: "6" }, "June"), index.h("smoothly-item", { key: '8b1c3f44c9038ad3602789e1e05c96735541a3ca', value: "7" }, "July"), index.h("smoothly-item", { key: '2c2de9c5a23ed85f12169b1a82e1e1142a8d8060', value: "8" }, "August"), index.h("smoothly-item", { key: 'aa73dae7ce0a0b938608a1938611bbf4a7a75792', value: "9" }, "September"), index.h("smoothly-item", { key: '2a06134e8692f70c60dbf4e87eacb116f9b00d81', value: "10" }, "October"), index.h("smoothly-item", { key: '7ee4aefae0552020294bebabbe254ed5accaaf1d', value: "11" }, "November"), index.h("smoothly-item", { key: '3fc47a509696820435dc78e546e1172e8e7c92c9', value: "12" }, "December"))), index.h("h2", { key: '57149f0eeeb22988ee4521e1ec090d0d8c956a6b' }, "Duration"), index.h("smoothly-input", { key: '23e0c50f1c26be0da47f0852520890ac7824b891', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+            } }, index.h("smoothly-input-clear", { key: 'ca464dc098e550f168beac0c607653f075a159ec', slot: "end", size: "icon" })), index.h("h2", { key: '3cb8d930d0fc9d05fa114907078c995b6e99bc9f' }, "Date"), index.h("smoothly-input-date", { key: 'e1867e106b2ce4ce39d341abfe263aff6e3a07f8' }, "Date"), index.h("smoothly-input-date", { key: '2d0b8298b626d73556ae7964409d0983787e01e9', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '605e557136bb5be7397c301cf59f8893fde3dac7', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '3061698cc9916e6431b1995d1479d7f2a1a0c48a', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: 'f725d67152a3670cf5a46ea6bd485691d454226c', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '8afdd3abfe3bf6b3573f5cd1076e6e3cb2483737', slot: "end", size: "icon" })), index.h("h2", { key: '434f1b92da71a75cd66be78bb473df034a995449' }, "Select"), index.h("div", { key: 'bb2d79eadf96a3984a98618a9056d0d73c6eb26f', class: "select-div" }, index.h("smoothly-input-select", { key: '1ab4eb0ba2b2bfb0ba1176383df2ce2ff26cf0f2', name: "select-dessert", looks: "border" }, index.h("label", { key: 'ce33fa7e607c31e441ee19b4fd02e774ad7c6fe8', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '4ad23d1cd53b1d0bef153dafba86086da9c10fd7', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '2e4ff9481c9948a2e645d4d1fa3b402b254b4e68', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '45a2ba913ad20f628f3d598b0d21e41515089ea3', value: "3" }, "Cookie"), index.h("smoothly-item", { key: 'c62f073a3ec00c1a00e30fb780ae4c047021338e', value: "4" }, "Croissant"), index.h("smoothly-item", { key: 'd632a1c50aab900ec0f94b54045a91e663d9f4d8', value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: 'ae26ae96b93d8a4161ad18dac46cc7682c232363', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '0a98860381ee0bba84fa2b11f9708baed83f0ad3', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '606d7d32da4f1d82f7db1a655004cbed42f3ab90', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '918b1f7c247e8f2508ee18bfa8edb398d03a081e', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '2014f83662c86e10f83c534f9131c29dc9b508a0', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '87bfa437cd64073ea3d4a87d201e6d46443c95c0', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '1ece0ed47f4604f6c673cb7816c9ececc4c2fe3d', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '3e9e774ec0efb89dffaf84198fa09983756c2444', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '5b407842b6d78f7532b207504059d93997c34c4f', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '7c6a33ea8f0fc1ffa46b2258096789ee590a54f6', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: 'af333d32ded44922f7f7f03461299b2ff5f46fbb', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: 'd9f4bc595f117ea71c87c40a277645a5200326cb', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '7daff6722e9d36073b0b782e0a03f8f2d094a87d', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: 'a90508c8118251ecc72ffd75e57dd7cd3a3bf6a9', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'ef0378e5ceb333af60383ac193ff4ab39603798e', value: "folder", selected: true }, index.h("smoothly-icon", { key: '1d5df8923da5c465137dfd11e940b7131645267e', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'a0e8e033eafe42fc4c8bdc7cf3699684fd539a9b', value: "camera" }, index.h("smoothly-icon", { key: 'a1401d942d46e186c4c1548510c1745c88c6f089', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: '761d72114c7296481adf3e14b53f3d8ee6796792', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '5e10e1e3a7a4b33a8a320c703a7170aeb73e95d5', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '9751aea20aaa4cb2a30ae1d6873c074be8bd11a5', value: "1" }, "January"), index.h("smoothly-item", { key: 'fe27fe5eca2126b8c997f7c29c2b4b0f5576d692', value: "2" }, "February"), index.h("smoothly-item", { key: '94f2cfc6b7b7cc3ecfbf336bd82b2d3cd9abe9a7', value: "3" }, "March"), index.h("smoothly-item", { key: 'fa0e0bf00a722cb9806998c25ec473d25a720b26', value: "4" }, "April"), index.h("smoothly-item", { key: '91e4f2c25d76a3c8b9b89672e9ce2a51162f13fd', value: "5" }, "May"), index.h("smoothly-item", { key: 'a8c802cf285714e1b53453b459367360c17de9bc', value: "6" }, "June"), index.h("smoothly-item", { key: '47dc2fa358a304dacda076445953706c4332abe4', value: "7" }, "July"), index.h("smoothly-item", { key: '198c07d2e1529684d373f6be12f3deba6c54259b', value: "8" }, "August"), index.h("smoothly-item", { key: 'ad41dd51b3e174fef095f4e559cc2a0fda841a70', value: "9" }, "September"), index.h("smoothly-item", { key: '28f3edd561c318c7d28a8a06e66a286c641609b1', value: "10" }, "October"), index.h("smoothly-item", { key: '673c4dbd5c7f69bcc62e04cc3b011766648b2042', value: "11" }, "November"), index.h("smoothly-item", { key: 'b4680088759db1b86bb49f9933e64594ff23f2be', value: "12" }, "December"))), index.h("h2", { key: 'ca29826fcf24163490523d1f85da64cd7cd0aa60' }, "Duration"), index.h("smoothly-input", { key: '1ed4a1d42b25e1689d93a58a7c21157d5159d2f2', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), index.h("smoothly-input", { key: '712421b1f9b5274aae494b9e3df8546d61444946', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), index.h("smoothly-input", { key: '318c8c16b139157dfc686910441f9aabe1abd1d3', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), index.h("h2", { key: '70eb8f00e09ef84dde5d7ff5a24cc35f59709392' }, "Identifiers"), index.h("smoothly-input", { key: '2acc3363d2304a70e1608fe826090cad00051459', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: 'f855c3c0ed7bfdc529692b77d00f139431eb7203', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: 'c9eed218136eec20afbe5ed9e5f13b323a712953', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '3631b6420f7a79dc477e7ecce74049d6ae44238d', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'bba085cf744c083bcc4090ecc830ffdef8b7e604', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '60c91e1da96bac01d02ba59c7c4103b359b9be9b' }, "Input Alternatives"), index.h("smoothly-input", { key: '7c141781358d370737de88f486d29539133bd19e', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '5add9f0de24ac9194bf3045690079076c3cbdb2d', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: 'eb0db72f5d9bfce0fd78e82042fb0dd3e937a356', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'fd4fb6b298f556e1a725c869bab2dd7a196c35ca', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '92897a9c139dc9a23e823572840b11504a515c3c', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '80f13aeaba2e79b97490a4b03673ee226d2babc2', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '8743307d7c43a4ab22a271fc0bfb1867460a33a7', placeholder: "test" }), index.h("smoothly-input-submit", { key: '0377db9ad17dbc152dfb5354282ce69ada74b066', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: 'f2846bb01d3f6ad8a1413f1855ee324723f44895' }, "Smoothly checkboxes"), index.h("div", { key: '4a2b867253db9f56c07903dfb4b6e5733adca5c8', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'b11511028dc8afa29b9e52eb898f6c4457e3934c', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: 'df24187122b84c401df38340a39eeea158216cb6', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '9ae4e59a667e71dde259db0162f2eccac870d6d6', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: 'a680bc27567a930b197ef588e4dc7dee0d4cf868', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '0c48886a343e48301fce770faf401d5df4157566', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '54a766e76900726fabf5c9f8a86931bd9b916270', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'ba4fd20839208638bc5aacdb89fc82b83c53c2e0' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: 'c690708232193ab8ea50bf3b63b7271a24f6bf93', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '200034a8ba52317a484e727826f60f4afa953750', name: "checkmark-circle", slot: "start" }), index.h("label", { key: 'bc3eb763db23e34c05868451a7d433ae70f4105f', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '4f793a64c6820dc3ec6635183ba02edf565185e8', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '50fbb59af30591bd86d755ccba854437245d3a97', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '1a58c9542b4462b7378bb575cdcbbb1c65667b7f', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '8697c71a8cb59b8be83c67e67f247977fc47f591', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'b93e80e6ea47ad6c33953d3aa4d0ec98d3363fef', name: "radioSecondInput" }, index.h("label", { key: 'ea5977c231305e1cd257e58023f5c84cd90d5adc', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '5e3533e10f2a01b57260bb03694c56d74de6d34c', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'a509910712fe94e41839fd1c0686df32297e6ddf', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '16a44693447b38ec6ee98594807452344b3f2e83', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '6f82fce6d4007ac4cec09108878022c93d301b6a', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '74f24460eca0b0afc4e34e811c5ce8c04199463d', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '66812004370c2bec8465891bcec65fad2e8c80c9', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: 'bb1a1dad23de20b23989d7e2d91c85e403f550e8' }), index.h("smoothly-input-color-demo", { key: 'c633ee86a453e7779c4361037d369d6fe0f20a82' }), index.h("smoothly-input-price-demo", { key: '912568f5390a6320b087b49795882aed0507aea8' }), index.h("smoothly-back-to-top", { key: '1983c5bb1ebe0cccc45d07345f31167b085af704' }))));
+            } }, "Duration"), index.h("h2", { key: '85867f1a5dabcad6aca5604b9e1a66afd0a6692f' }, "Identifiers"), index.h("smoothly-input", { key: 'a822018f98698cd16cb4f56207e898faaa9788c5', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '10cf5ce6f446e1cd50ef6bebc98d25cecaad7b44', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '15a310ed952d163ac475f68eb0240f3b05bf67c1', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '1a7bf1dca390eb9c7ce59c84d7ac516123220ab8', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '9e6380cd6bee92fac22c7d20e53cd58c35928191', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '9d65166d949ddf94acd17400b37de0ae041d85e1' }, "Input Alternatives"), index.h("smoothly-input", { key: '9c66623e85777da9b18a88cf35fcb12d923cacc0', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '721a0e8bd60bf3811677edf73f7f79e994c8dcef', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '998ad785f2de1b1d74915c5d97ee75803a6cece3', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '9718735cb519b9c098cbc790bb7cbbc87f5376aa', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '0f1f1fb205a40e25c592f05f23516a54f4d701ba', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'edfc146790a625aa6a9aae1bf18446e5936809d4', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '24cb4dccf794f1fdb3c97ff8991abcfb9bc1022b', placeholder: "test" }), index.h("smoothly-input-submit", { key: '54ab58468f95ed5a7268b93f47a07e7be045dd2e', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '6bc57f0cacb5c867f55942e54c984d2c68e9dd2f' }, "Smoothly checkboxes"), index.h("div", { key: '9d11d0d661fc67d0f467559ebb52667984a0f935', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'ebe130d5a0f6d7ba1bba3781b49f1531f90c8bc5', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: 'cfb912d265e11c17dc6557eac372042983ced9a5', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '035ad1db33415bab44a2e333071835d39ee675b7', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '191b4015f72005f36f238201f4521b61b0aef86e', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '6c5e350b3744d688cdc3978d89946b8a223757e7', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: 'ba93e0985a043de8e28c2fd8ceba97d568f7f6d3', name: "third-checkbox" }, "3rd")), index.h("h4", { key: '07455e160ee5dbb8937c229ee78025df2b994d52' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '280396c5ac4e8ecdafd29364d47693057d2b25c1', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '4bb0e3370785eeb968fe7b3c0d52ff84428d71b7', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '62b79d0746d712b125ee347015e5f4f9362a5256', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'f3995fd7a97acdbd840a7882f1276c12a7f2279f', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '7566943fcb9d394f02ed05d3bf9343129ba56495', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '16b4d2950bda657462e1dadeef30081788c7e5a5', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '359be9b2da907bbdccfd004459df4981b45ce7f7', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'cb4a47a12cf83d720925ae179caed0824f8a155d', name: "radioSecondInput" }, index.h("label", { key: '27a0cb9c6d2f596e52f11fa02743f30ae5ef1d32', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'd991b43726c87dc4d1aca8d2b182ea75bead7139', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'd7abaa14efbba51c74f4bcc1ec51634fddf610e9', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '3e2be20b6fe8512492701e46072118d387e72a55', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: 'ffc276f1896fac44562bc543136e8cf34a90a70d', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'bac29e29dfa57b91f6e9b8eba5dccafd0aeb5877', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '9d754ab61acdd7ee38be11f6b8851a62d41d66cd', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: 'cb2478c65422771003ee71e52271bf303d0b680b' }), index.h("smoothly-input-color-demo", { key: '8213b949de93a9e268e2e825037be4a3ec14a143' }), index.h("smoothly-input-price-demo", { key: '3421b41005ae9cc59a8166c0a171fe3ac1b372b2' }), index.h("smoothly-back-to-top", { key: '6bd3c1cde9f25c5760e33531495287fea254d81c' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -10399,9 +10399,10 @@ const SmoothlyLabel = class {
         this.shape = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'df31a75eb247b30b4c62ebef8e4973edead402d1', title: this.description, style: {
-                "--hue": this.hue.toString(),
-            } }, index.h("slot", { key: '5330840546cd8918e68848526a0a87e8b4305f6e' })));
+        var _a;
+        return (index.h(index.Host, { key: '6cdc68d0f95555309d0f6cf354808f2f01fa7e3f', title: this.description, style: {
+                "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
+            } }, index.h("slot", { key: '11c028fced6240553cccd24bc5118c38f70c20fb' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;