npm - smoothly - Versions diffs - 1.69.0 → 1.71.0 - Mend

smoothly 1.69.0 → 1.71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (455) hide show

package/dist/cjs/smoothly-app_103.cjs.entry.js CHANGED Viewed

@@ -2134,7 +2134,7 @@ const SmoothlyInputDateRangeText = class {
             1: undefined,
             2: undefined,
         };
-        this.locale = navigator.language;
+        this.locale = getLocale();
         this.readonly = undefined;
         this.disabled = undefined;
         this.invalid = undefined;
@@ -2306,7 +2306,7 @@ const SmoothlyInputDateRangeText = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '53b01c856b0b14e08e57d9025e4026638f60e695', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat$1.Order.toArray(this.order).map((part, index$1) => {
+        return (index.h(index.Host, { key: 'f4fdae0e9a38401271697dc64583a442dbc63eb1', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat$1.Order.toArray(this.order).map((part, index$1) => {
             var _a;
             return (index.h("span", { onClick: () => !this.readonly && !this.disabled && this.setFocus(index$1) }, index.h("span", { class: {
                     "smoothly-date-text-part": true,
@@ -4325,7 +4325,7 @@ const SmoothlyDisplayDemo = class {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '88dae76ba4f26b5ba5dab790d030efd2740a9c3a', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: 'ea74d644a344b2347888a609a72b20ac5c8651df', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '64d9ade2587010213832e33830c5eeca985c7480', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '494f01fde3c846454bfa32681895b2253db373a4', overlay: true, size: "small" }))), index.h("fieldset", { key: '6629bd3d32263860e046c756bd0f392c51f25be0' }, index.h("h2", { key: '33d110238af08bfc80a06d55b93cc128cc3a4d50' }, "Smoothly summary"), index.h("smoothly-summary", { key: '5439e9671227547e17576d921bd4d193184310ae' }, index.h("p", { key: 'ee434e3b68b0a4826aa8116f31e97d7dc49d775d', slot: "summary" }, "Some title"), index.h("p", { key: 'd62fb2938d4e03b22730c56e39adcf8877824dca', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'a254ceaa12fc7d8b57fced16fd28acba12415d8d', size: "large" }, index.h("p", { key: '67d23f28c4c7f3c742ed0a1a587e7e03e1586f0d', slot: "summary" }, "Some title"), index.h("p", { key: '8f8932f73895d093fae78bf69d4d22c668c07bd2', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '7aaba204bdf00d513db7f18a1a471da9da233783', color: "danger", fill: "clear" }, index.h("div", { key: '6ee39cdb298258214483de9791ccf3dc198e3fc5', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: '47f78e51e1f6b16dc65aa2da3fb4fd5a34b52133' }, "Person"), index.h("smoothly-icon", { key: 'bff84058d5e586bc1bc122415fa5e5ae48cae850', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '74e21d10c0cb9dd9cf65dbfe877274b531b99daa', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '4f128356a3938a0e20feb9ad2ea5d0c5220b0246', color: "danger", fill: "clear", open: true }, index.h("p", { key: '3bdc2d15f3c0beb0dcf2fac3dbf6738e02c37dc8', slot: "summary" }, "Some other title"), index.h("p", { key: '9e1952336e8e4eecc3c520d6ef2790d3b724fe72', 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: '1e42dee31207a08f6384bc43a4009fe40cbb2281' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: 'a9f6e7d6259d7e52db3e489e857c108b4fba0382', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
+                } })), index.h("div", { key: '88dae76ba4f26b5ba5dab790d030efd2740a9c3a', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: 'ea74d644a344b2347888a609a72b20ac5c8651df', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '64d9ade2587010213832e33830c5eeca985c7480', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '494f01fde3c846454bfa32681895b2253db373a4', overlay: true, size: "small" }))), index.h("fieldset", { key: '6629bd3d32263860e046c756bd0f392c51f25be0' }, index.h("h2", { key: '33d110238af08bfc80a06d55b93cc128cc3a4d50' }, "Smoothly summary"), index.h("smoothly-summary", { key: '5439e9671227547e17576d921bd4d193184310ae' }, index.h("span", { key: '5aa376de959eac730f1731a9d1abaa7c9b2906e2', slot: "summary" }, "Some title"), index.h("smoothly-summary", { key: '0f3c9220d9317c54c53037b25b92374ee64b8b3b', slot: "content" }, index.h("div", { key: 'aa1dc04d09749f3c125eac38fdd59b15f990871e', slot: "summary" }, "Some other title"), index.h("div", { key: '327cbe85e798cbd7b5a6a96acb0d62db4486b6e2', 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("smoothly-summary", { key: '34df179fe11e57724c204fc7faa92b6dd3d2c312' }, index.h("div", { key: 'bc7f0348eba69ce4b5ec090c3132152829cd2bdb', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: 'e46943da2844edc16d8c93e99f2a421668af34cf' }, "Person"), index.h("smoothly-icon", { key: 'b677ed1036743b2994003c0b4d8573124fa30407', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '8a22ac8f00f37ce9b4d90978d329daef975a2856', slot: "content" }, "Some person information.")), index.h("h2", { key: '52120c774608c56017e1b8479631be4019449516' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: '16fba37231ff5ef8859a05e1d7b138ce27ba2769', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
         ];
     }
 };
@@ -4352,7 +4352,7 @@ const SmoothlyDisplayDemoJson = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f1a41157b7bcdf9c02f55c100f38ba118014c85b' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (index.h(index.Host, { key: 'c459dfb0ab28ba6c9ec1be1f334398200800cf56' }, [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 })),
         ])));
@@ -4387,7 +4387,7 @@ const SmoothlyDisplayJson = class {
         this.collapseDepth = undefined;
     }
     render() {
-        return index.h(JsonValue, { key: '131e760c15a82c6bb11f2cf60173174ca8dd44fe', value: this.value, collapseDepth: this.collapseDepth });
+        return index.h(JsonValue, { key: 'dc8824ed92fdfde3a318f0449eb531600678000f', value: this.value, collapseDepth: this.collapseDepth });
     }
 };
 SmoothlyDisplayJson.style = SmoothlyDisplayJsonStyle0;
@@ -4421,9 +4421,9 @@ const SmoothlyDisplayJsonObject = class {
     }
     render() {
         const nextCollapseDepth = typeof this.collapseDepth == "number" ? Math.max(this.collapseDepth - 1, 0) : undefined;
-        return (index.h(index.Host, { key: 'cd8b1fc958041c8d1f6e71757ad21c046fcc3048', class: { empty: this.empty, open: this.open } }, index.h("span", { key: 'a741957e165377e8e898fe087d5550890f7af07e', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: 'ddd54c1609276b989a504e99a416d68ab6762208', class: "content" }, Array.isArray(this.value)
+        return (index.h(index.Host, { key: 'd8c5fd222b4cbe393ccd7e5fe13ec04bff9c5614', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '56070a9821ec22233a1a53614bf062234b5e1645', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: '9fb7f10b2c330e486270e875bc3adff84066aa23', class: "content" }, Array.isArray(this.value)
             ? this.value.map(v => (index.h("div", { class: "indent" }, index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))
-            : Object.entries(this.value).map(([k, v]) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))), index.h("span", { key: '49dfd0d4606f6e263834d6ca6584d285197ed89e', class: "close-bracket" }, this.closeBracket)));
+            : Object.entries(this.value).map(([k, v]) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))), index.h("span", { key: 'dbc0412cec64f81e0bd88c48d7299ed8f0143feb', class: "close-bracket" }, this.closeBracket)));
     }
 };
 SmoothlyDisplayJsonObject.style = SmoothlyDisplayJsonObjectStyle0;
@@ -4437,7 +4437,7 @@ const SmoothlyDisplayJsonPrimitive = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '49511754687e0d51dcac9ef0a4dc91da66838cac', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return index.h(index.Host, { key: '0e8d894d5b03272d4df6b648eef111b4efe5b236', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
 };
 SmoothlyDisplayJsonPrimitive.style = SmoothlyDisplayJsonPrimitiveStyle0;
@@ -4451,7 +4451,7 @@ const SmoothlyDisplayJsonRecordKey = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: 'e1c4b34a42b5dd555b065b40ead5d631d4d10b37' }, "\"", this.value, "\"");
+        return index.h(index.Host, { key: '2a03b569bedb742a25108741886a5a781f31a703' }, "\"", this.value, "\"");
     }
 };
 SmoothlyDisplayJsonRecordKey.style = SmoothlyDisplayJsonRecordKeyStyle0;
@@ -7480,11 +7480,11 @@ const SmoothlyFilter = class {
         this.filters.forEach(update => update(this.criteria));
     }
     render() {
-        return (index.h(index.Host, { key: '6d2925d77e427d1b8daf5d6e3e6e02c4347ed6df' }, index.h("slot", { key: '5008ec9f161df30ecfd56c25373e6451b48376ab', name: "bar" }), index.h("smoothly-filter-field", { key: '8cd73196884334207516a6a39a8fccf1274262cb', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: 'ee51102ab15a114e7046862a50cef9e4637acd80', name: "close", tooltip: "Clear all filters", size: "small", onClick: () => {
+        return (index.h(index.Host, { key: 'd80c4372569f616eec9d9dce3c02910f3c9220bd' }, index.h("slot", { key: '896325f5ecf8bc018125513533528a207a2774bf', name: "bar" }), index.h("smoothly-filter-field", { key: '77384e4d304861bafef0f505bf2451963670f625', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '2fbde76c1523e7f04b3838e9375efcf280321402', name: "close", tooltip: "Clear all filters", size: "small", onClick: () => {
                 this.clear();
-            } })), index.h("div", { key: '8884f65d57a7ed98632df2166240e71769bbea81', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'f6e3d49b1bdf7f4d63cdc0295b531eb723ffd438', name: "detail" })), index.h("smoothly-icon", { key: 'bb5e310f1d5cbf04c0b8b3b363c858b956b763b6', name: this.expanded ? "options" : "options-outline", tooltip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
+            } })), index.h("div", { key: '396ed6dd80fac7e7d6fcd7691c8c79fc037042fc', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'fb80eb35ca23cfeed30d3e50398b177a75556d0b', name: "detail" })), index.h("smoothly-icon", { key: '1203589fd5c9fe219c88fb208c7d7242d778fe1d', name: this.expanded ? "options" : "options-outline", tooltip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
                 this.expanded = !this.expanded;
-            } }), index.h("div", { key: 'ffd363e53604152eba2d90bd6dfe08a9e0c96bd8', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
+            } }), index.h("div", { key: '559ae34826c02ec0e1c3d83809513eff71eb0db2', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
     }
 };
 SmoothlyFilter.style = SmoothlyFilterStyle0;
@@ -7511,7 +7511,7 @@ const SmoothlyFilterField = class {
         this.value = event.detail.filter;
     }
     render() {
-        return (index.h(index.Host, { key: 'deb052d0a91cc6fd849dc5eff41de9dd2f586d6b' }, index.h("smoothly-input", { key: 'b8b8398eefa3dd2ab2f754a84ac5c5ee01db5c4f', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyKeydown: e => {
+        return (index.h(index.Host, { key: '5cc4e4b4f143253b8db39e8a6adcdaf3d0e952d8' }, index.h("smoothly-input", { key: '64e515c9069eb50deaf4a07f5a5af04ca1605eb5', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyKeydown: e => {
                 e.stopPropagation();
                 e.detail.key == "Enter" && this.filterFieldEmit();
             }, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => {
@@ -7591,7 +7591,7 @@ const SmoothlyFilterInput = class {
             (rest.length == 0 || (!!criteria.criteria && this.findInstanceOf(criteria.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-input", { key: 'dcdcf65e2456c0f1dc2e7f166f5b97284da86ece', 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: '2c358098ad7fc6fd230e562351dd721755db9f96' })));
+        return (index.h("smoothly-input", { key: '8e71fe5e757acf5ee4a4c09cb0fcb8d3121fd7c6', 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: 'ad5b42ba26c59a18c099b139387dab43c2afa695' })));
     }
 };
 SmoothlyFilterInput.style = SmoothlyFilterInputStyle0;
@@ -7700,7 +7700,7 @@ const SmoothlyFilterSelect = class {
         return result && this.property.split(".").reduceRight((r, e) => property(e, r), result);
     }
     render() {
-        return (index.h("smoothly-input-select", { key: '31555db35062b72b3c76225972d8aca0c2e00ceb', 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: 'e77cfc0ea0380a47db47867dd85dbf43446c2c2b', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '4a98d4aff03c942e97c5b602cc01f5b8dd1ccf0f', name: "items" })));
+        return (index.h("smoothly-input-select", { key: '6d72b38daa8c61d5c80a1f658c0056368409692e', 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: '35be4b286aa305a609c1f13feb854880a2ce9db5', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '9a70e72ad7bcf911da188136ff161431e73191e0', name: "items" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -7784,7 +7784,7 @@ const SmoothlyFilterToggle = class {
             (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-icon", { key: '7014f80026c5118a95a278be45dce1df51e8fb25', 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: '8e99d15e7835225602da2540570d484bb86eed6a', 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;
@@ -8838,7 +8838,7 @@ const SmoothlyFormDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a35ea2be54c7330f3e7c2d7f64c4579ed48b70ff' }, index.h("div", { key: '22fc32244417a20b0f3ba0d598bca7e15e6d4e66' }, index.h("smoothly-form-demo-all", { key: 'adb4582761d66be87de85d38334d0644fb10726d' }), index.h("smoothly-form-demo-pet", { key: 'ebed70d483e430772a04677c2549df2cff841fa2' }), index.h("smoothly-form-demo-card", { key: '05ee0b54fc2db3ddf7925c8bf3a0bd33ee7a7cc6' }), index.h("smoothly-form-demo-login", { key: '63755550a7b44c55c2c07ab0111bec145204b814' }), index.h("smoothly-form-demo-prices", { key: '2bb04e58340156e5741cdc8aadfb7f4db7723af6' }), index.h("smoothly-form-demo-typed", { key: 'ed385a174f6e84031a85ba5f5339251b91e18b0b' }), index.h("smoothly-form-demo-transparent", { key: 'bcc94e93a50e979c4f4265fb04db4237d06f0cce' }), index.h("smoothly-form-demo-date", { key: 'ece8bc437afc832dff509c644aaad77b431a95d8' }), index.h("smoothly-form-demo-schedule", { key: 'bc8859379be7fb08723bf2dc639e2ed31a510006' }), index.h("smoothly-form-demo-date-range", { key: 'd3f32aa95cbaa45eb43d4e48f76a43f6e1e72b14' }), index.h("smoothly-form-demo-controlled", { key: 'ead216008b41f31673f6c6ef1ee2cdf406a0b114' }))));
+        return (index.h(index.Host, { key: 'c520f9686d30f0f54e5a7b85a6411c7a6c4c8e26' }, index.h("div", { key: '218bccd1eb09e6c14499c064eb08b16acedab2b8' }, index.h("smoothly-form-demo-all", { key: '77aa11539755efb250357dff60c864437cbeee2d' }), index.h("smoothly-form-demo-pet", { key: 'd3d014e2fa8bedbcb28a74e7ae4f86eb5d8b4325' }), index.h("smoothly-form-demo-card", { key: '7b5483970827a684367a5ed8df45eb4dfbfacbdb' }), index.h("smoothly-form-demo-login", { key: 'e46120b15dc4f00622c6a3bb3608386c26978d94' }), index.h("smoothly-form-demo-prices", { key: '75e777d76b24702ea6e0d8d3decc634dcf204c57' }), index.h("smoothly-form-demo-typed", { key: 'dfe06d4d06a4d1ef32c23aba03bd880478b8f9a6' }), index.h("smoothly-form-demo-transparent", { key: '4e91222efb70aa23ca251cfb30158470b1077169' }), index.h("smoothly-form-demo-date", { key: '0b953abf55b43d5fbb4b47b5ee0e1a51000decce' }), index.h("smoothly-form-demo-schedule", { key: '656148a09b8131f87180451cae014ebdeffbb2dc' }), index.h("smoothly-form-demo-date-range", { key: '30d9a63aba3b4db8a8437e42dd0d113f3bd67186' }), index.h("smoothly-form-demo-controlled", { key: '5c754319261cdccce3cd7f32423ce71995acdcf8' }))));
     }
 };
 SmoothlyFormDemo.style = SmoothlyFormDemoStyle0;
@@ -8848,9 +8848,9 @@ const SmoothlyFormDemoAll = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b129332c9b6b41ecf26355ca0a28f0ecd298e184' }, index.h("h2", { key: 'a16d4bf5e33323a12ac4deb81c9c5771158ebd4c' }, "All inputs"), index.h("smoothly-form", { key: 'c3ecc745cb227d96c7671beb9372bf4b421eccd9', 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: 'f87ebe24ef7535d757e8725b636c8c5f32e27ba0' }, index.h("h2", { key: '5241f0eba4da432b480c6dfd9bd7578830551ac1' }, "All inputs"), index.h("smoothly-form", { key: 'a0613285e9987be33adf9854772d59daab068593', 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: '6224895eb9d1cbe325d3222ba39d4ff95fc29f36', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '727cb66a85b868bf23edafc7d92bd9568f44c687', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '91ff7f7ff90cd06583c36678d2709fd9e3e8ac22', size: "icon", slot: "end" })), index.h("smoothly-input", { key: 'fabfdb6f59f8b1c17f702598b4bd199f3abf2a2f', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '82159890344ebf8f2517d3b7a9824c8d05cfffea', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '77b46f67cafeffc4231091a7fdcfc18e2248ccbc', clearable: true, name: "radioFirstInput" }, index.h("label", { key: 'ef61215f9174dfc9cba89722649887a53c33e74f', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'b7aa62927687e2b6ec68e6a599cc221fd373c1a9', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '1145bc596f7fa443c744e5d4549fe90c435ba27b', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'a904313ab5f12453e390ebe57e944d75192d0c8d', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: 'c87ea9ba191b870d6e1112f12eb2fb90793bc058', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '60e408b9dccf19b5f96bf9b26ca48084dbc28aa4', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'ff05df337bc92d371a5e42707ee66001b9ff0965', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'c5a9f4dedd6c833b3087504321feba6b90206b0e', value: "1" }, "January"), index.h("smoothly-item", { key: '5e1ab7c8f40850452ac02e5799f9070117b8c2c1', value: "2" }, "February"), index.h("smoothly-item", { key: '6fc0fbd2ea2d56ddc9043ffe18a6f27d5be1916e', value: "3" }, "March"), index.h("smoothly-item", { key: '6a410689eb95d2e568fcf80eb6f3a19b29e57823', value: "4" }, "April"), index.h("smoothly-item", { key: '92368f5f8608a8cbbf23bdad52c4e54de53deca0', value: "5" }, "May"), index.h("smoothly-item", { key: '255344fbd7ecb9ba432198fcc4f4b2165eefd55d', value: "6" }, "June"), index.h("smoothly-item", { key: '0948a61ad00759cf4ec89d8eaa680113c8966540', value: "7" }, "July"), index.h("smoothly-item", { key: '62dd00572adc6a3ae27fe76f7cc1d7ea8bff264f', value: "8" }, "August"), index.h("smoothly-item", { key: '0f85653dd5cf89c72f9652a01083198f7e6838c0', value: "9" }, "September"), index.h("smoothly-item", { key: '122d8dd22d65ae9e1891aab2002ab8cd7161ac40', value: "10" }, "October"), index.h("smoothly-item", { key: 'ac0c5c8397dcdfde7a4c5ac53a65b4f7eb95f698', value: "11" }, "November"), index.h("smoothly-item", { key: 'f6a22f914c4c1b74d55120a775b902be71cd1cc0', value: "12" }, "December")), index.h("smoothly-input-select", { key: '1b2505f80d5a6433034650479cfdb6bb3ee63c4e', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '78fa9c7aaf7baede862bbd850b338b2a05309e59', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'b2206fb93693aea395468d92a6e6c4712546cbcf', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '68bf08c65b799da0b7233a1f2a4b9326a4512e2c', value: "camera" }, index.h("smoothly-icon", { key: '506e359c13e85a279e1f6d7b0a87d1ce058e6322', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '4842ef849082d4b67800b04400ed2787377f9c4a', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '0a13123aa282afe9a8544b44cf4de13a72fff837', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: 'ebde32a21737a48abf965c8cdb53554675845efb', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: 'f0a6e933b8df18cb700270ac833557e9ebbc46ca', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: 'e52599f3b8c723fbdc0654964395d8c6a2908872', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: 'f9c3d79e1511bca828431591a4b7ca05aa0bfe1a', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: '7589245ae0c68a0fdee596ff1ccc374731234989', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '7d373a6873837bd9d6d6e798bfc12a138d4b2dd9', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '0f0c863b5a689fd87fee11d02a20681c38ca3503', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '33c5fb0a39f414cd6d4ca1cdf8adc9195c0f711d', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '5c7663e71064d779989128a02914513ae8ca14e4', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: 'e25083ec4fcaf68f96b473ed0c0195a83add3ce0', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: 'f68a0cac2e3960688174bf8c5588e6586dddaca8', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: 'a5530e1cba012400d0deea40dc74c49e85bddd9f', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: 'a2efe4d9c66e91f115483f9402ecf2fdb5d21d4a', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'e80f85361ed05e4e87eba0bbf8c1e45c76500b1c', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'd95dbdb2f5ef80c6afd72205526fb31280d59ab0', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'ec4acf5e12d20b499e09c33864a1880e94d06fd6', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+            } }, index.h("smoothly-input", { key: 'b0b7156547112cae4f5d168f83a7a11e8488c9e8', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '5419a70db41131bc59e9b0ddd8c370056708e172', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '6a012ae5cae0fb5374290cd03cc7cbad353f3406', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '41f5ca945f6845ad9061f6b926362cbfcae01d1d', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: 'b19508551c13d4bd67193d6acb5d6462fe5b1ba2', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '3871f74d499c89843ff7ad1e34776860206c8357', clearable: true, name: "radioFirstInput" }, index.h("label", { key: 'ea69c69a9e98f1758205a5ca789feb3171b20995', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '23ea5e016a13cbc0bb97eeefba0303e28dd57537', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '0ed432cec4205d7e25271e9309ea18ba26db4f10', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '7241ba1b311649638d665c823f95050501a231d7', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: 'fa8af54f789ac7e82c94e266ececf1ef35cea9f8', name: "color" }, "Color"), index.h("smoothly-input-select", { key: 'd5186d7b98ef556ace8aafa2069d4d7ac9696e61', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '0d517222d1d84036c34e89443a72b43316b92706', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'f95f3715a21df0c713ac13bbfbe2ab14dcc4a940', value: "1" }, "January"), index.h("smoothly-item", { key: '21ffd877b069ea3d9a8fdeb2b89432d84deca067', value: "2" }, "February"), index.h("smoothly-item", { key: 'fb032a3c25ccc4778e4f25b2d8fe18d66c7adc13', value: "3" }, "March"), index.h("smoothly-item", { key: '649124af9fc5338f28844bbeb8201766da509e0c', value: "4" }, "April"), index.h("smoothly-item", { key: '437ac584c1cdcee5396602f6fd8f6cf91fe7641a', value: "5" }, "May"), index.h("smoothly-item", { key: '3a34c4b7a2e8233815d2a98761b6b386fa93d1d6', value: "6" }, "June"), index.h("smoothly-item", { key: 'd1efd8d1cf676e1fd0ce8eaaf5a0fef42f3ec710', value: "7" }, "July"), index.h("smoothly-item", { key: '191eb07b78ad0d2d8eb8f3d4d8dc31823bbdabf8', value: "8" }, "August"), index.h("smoothly-item", { key: '6c13668fc67dbdd6717e250af16aa9b8392051f4', value: "9" }, "September"), index.h("smoothly-item", { key: '225133ad67ee7f3b153e05c107b26503338deaeb', value: "10" }, "October"), index.h("smoothly-item", { key: 'f4ff13b68f8ce7e342e0acb52a0f60408cdb9343', value: "11" }, "November"), index.h("smoothly-item", { key: '45858a3aad26242cac51603ba9f2b44416a40451', value: "12" }, "December")), index.h("smoothly-input-select", { key: '7ed1d42abf67e8ddec48cbbe03bf5cac83139646', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'b9f59017eb104add92c26b2aaebf7c1b4891520a', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'ba6256a645f9c179f28a7fd78fb2502985ee1e1b', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '0904069f5ffef98b0031d2cca2c088ca174af9c8', value: "camera" }, index.h("smoothly-icon", { key: '5b1361ae41d71349b17ed8ae5dcd0801f1130022', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: 'fd4d2841e68ce6fbf6fee5d52be0aa7b89b7ee8f', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: 'be505553364e66f0e07c84638f3388c7fa86df52', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: '2b59d9da1babb202e0f4229bd4cf44f33417a993', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: 'db2e3796a86d37fbdebd6ef723b75b74058abf1d', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: '9e5f22df32f52bbb79608062473ebff9c6313bf1', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: '2fbd85a6b4ff8e59da2a347e21e22d459efa92ff', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: 'de5d3819eed414de9e7a2e84dfdaa6b0574e3c62', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: 'a476167a0ed9889a668bb3cb725673a3e7610607', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: 'a7478bc13ff8aaf069125171116b58e58cc41bff', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '12beed2cee2c7605e422cca9367bf606fe9957fb', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '42c65b9f428f5db584bf3a166b9b6594733f8d80', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: 'fa2ab91385f534d7f052ccdbb3205a1da8032963', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: 'a9c3ea48b7a41baf04bb40b11bd304aae2ab9197', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '439e86e9d2bd36eb4f21fdc6477b264025912ccd', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: 'b647e995fd7d90693497070b7751fdf787958dc7', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: '7bc5533af945d6d3acea8ceee2a9ab7d166e5d38', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'c9251420eb11a27433edfa4eb62be070d283b814', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '5741bc096734acc63eccb7ce5cf66fac7ba3cb65', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
@@ -8859,7 +8859,7 @@ const SmoothlyFormDemoCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '48045a395d9d97b39b645e9d0af5fac751df6fb7' }, index.h("h2", { key: '16bb96d22359df3a5c3d17c3151398a20c8f2be3' }, "Card"), index.h("smoothly-form", { key: '33999068a91396e21210db2b5fb6c659480e10b2', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: '5548eed7d9f56215ad1650fc1d19042afbffe1be', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: '3214c68fc6d0d2f478354cd038b6efdb57cb999b', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: 'abfc7c463e7f24d688976483a0a50286d3202552', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '4eb07ef9611f65c495cca2397741d5acd4ccf941', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: 'd233da82d9ec3c849dc4cf0005d27bee2ff1e5a1', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '6145dbaedd722122013c192a41fceb82e4c87042', type: "text", name: "name.last" }, "Last Name"))));
+        return (index.h(index.Host, { key: '380563e89b70c7195faf77cfe59aa7b287bf65c8' }, index.h("h2", { key: '15c8b7c114af4388e99b2eaa2d9b70fa52463e67' }, "Card"), index.h("smoothly-form", { key: '089bae2b007fd14c82f2f946f63c97419174de7e', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: '51a4adf0bc70273b70759a560e4e69d90686ef84', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: '5c328965e5e3e54d6dacd06e70cd7a09ff78e081', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: 'cae7ec030ab677708b19735c28e6c4dc50a754fb', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '229929c495abca2028ecfdc3e2def372d976eb97', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '05260b48e59cf1a42a44bf361be6c9e3b78935aa', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '50b0822f1264f855f3c24cf3a709952067a9f8f4', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
@@ -8895,7 +8895,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '33ee374e266b533585c885fa8ae0cc19b5505a7a' }, index.h("h2", { key: 'd96f86da6c0183823825b02b4ca06cf56bceb272' }, "Controlled"), index.h("smoothly-form", { key: '7a44aea6b2213d6225358d64ebc4f34655a9a459', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: 'ec7e44ed761884473c48bf84c1295266d49b088e', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '9fdeed74e462f65327525e654f374fd8ad2a6a43', name: "currency" }, index.h("span", { key: 'c732be30ea7a82c429e3a9db9e92807cb93ed720', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'bdfb6f595a1a5fbfb0e4460b75ecfc2c5b6c7eb8' }, "Dummy"), index.h("smoothly-input-month", { key: 'ce4484b155a53693722a193f71faf29c3adb102d', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '268b3b1034bc269b3443880da56e25f4aa50da62', slot: "year-label" }, "Year"), index.h("span", { key: '91d337d831699e282d8b2b00cef8dc933ab71e72', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '4907baa416a68af837621e7cfe7a45c6dc72c9ae', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: 'dc7c7c782222f9f0c6c5160c9f8ddfc7673163f5', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: 'c51e532d3d2b933f182599c32d9d76e4a2fdd448', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: '127eacdf51179a2452403e4663dde0be40455552' }, index.h("h2", { key: 'e70564d49f51c04b57ac3b0bce258d70a22fe242' }, "Controlled"), index.h("smoothly-form", { key: '2591ededf60a7c1312a1df93c4041faec8a8d844', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: 'fc96c65a316b8d6c8ee884f9a75aaa6f3073934c', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '22ec7d223940ea5d39876215ccf3140d939d1eb6', name: "currency" }, index.h("span", { key: '23a5a040a4434a403800cd38914bf71dfb054ee1', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'f7ed25cb59c5613f68ac46c2c7ab683ed1502f19' }, "Dummy"), index.h("smoothly-input-month", { key: 'dbb0d0b5f451aee0e9ac553a7a7495b2a639ffba', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '448ca98878cdc14ff95aa8f0c1b3f0a54a143350', slot: "year-label" }, "Year"), index.h("span", { key: '363426ff1d76786accede88917902ef00e5508d2', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '7a34a2a619743eec8546afe02042ee19c75ca622', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: 'e11fbad0e4bf0366c3e87330678a9a8250faeacb', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: 'b0a0221c4074d2bef38d09a5ecefa30243521a90', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8926,7 +8926,7 @@ const SmoothlyFormDemoDate = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: 'a7ff36f62518b4048172171f29a71f9e4a2d9027' }, index.h("h2", { key: '30beb481a7eb4db9e5ae73dc5ae239dab5cb7343' }, "Date input"), index.h("smoothly-form", { key: 'b22a7500f6582da40291cfe024a5f5167a4d97ab', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: '949c52817e6f094f11dcc069c419e8a3913039b7', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: 'dc03efa9c5a058cbba0edea9bedca866f4fca73d', slot: "submit" }, index.h("smoothly-icon", { key: '9552bcdec6a26d354dcde5f40c57058da3716c71', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: 'adefda2f6f0d537082d10f63ebd53a0497a7ca82' }, index.h("h2", { key: 'cf57f578f2caf3001c3ab14ce1b12eee3a8e7f74' }, "Date input"), index.h("smoothly-form", { key: '220ef96f2cef2e4526871b4dd7cae3736ffc3aa6', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: '37a21d5d8b094ba14ce80f2b521989927b40bffa', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: '082d7a7369455a651bce813da2aab843df891835', slot: "submit" }, index.h("smoothly-icon", { key: '01fdc733a2a2ec49589658981ce32183dd6fcb75', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDate.style = SmoothlyFormDemoDateStyle0;
@@ -8955,7 +8955,7 @@ const SmoothlyFormDemoDateRange = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: 'cbbd77825d662b77222ca21cbdaffbf7debab06e' }, index.h("h2", { key: '98fb31c3069258339a902a42c0e3631610e9f903' }, "Date-range input"), index.h("smoothly-form", { key: 'fb4b3384f1a629a34139bbd74df099d042c77ce9', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: 'e2d04fee4b02c801fd334b2a6e76db1740120dd1', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '2c8b6bb50ed92c63250dc597b37d48610a5c8bf8', slot: "submit" }, index.h("smoothly-icon", { key: '774874497d34c6d553395c992a4ca9f305deb89b', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: '7070cc781370699e35f5c90f89ddd0d2c1e08132' }, index.h("h2", { key: '44687d1177ddbaf97523e92067c4ad7b680b5bd9' }, "Date-range input"), index.h("smoothly-form", { key: '8a0df7c1c746e592b40a2c4422755e001d3a516f', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: 'a71548e2febc7dc65fb69125fa9200c0a061c384', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: 'f0a37a386880bd34a13644093a1cc6256d0e5a64', slot: "submit" }, index.h("smoothly-icon", { key: 'bf0dec6f422116ecea2a42b1b057c6e2a412a105', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDateRange.style = SmoothlyFormDemoDateRangeStyle0;
@@ -8965,11 +8965,11 @@ const SmoothlyFormDemoLogin = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c6c91f01f31482fcf062823cfc543834c1be3b2f' }, index.h("h2", { key: '24d231999ab4cb8987ade2141387fceadff1365f' }, "Login"), index.h("smoothly-form", { key: '647aaca0a026736546a81b80dac47d4edcb57b5e', looks: "border" }, index.h("smoothly-input", { key: 'c885174d4462f497e946657325da6309e889f697', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '6bf32f5540973cd23d79cea2b2b15a6df4b425bb', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: 'b0562c687e1a025cae37c06ebbab3f5fa22983ae', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '91148f0ed411acd1dfc529a58b19074dd7182859', slot: "submit" }))));
+        return (index.h(index.Host, { key: '1e3f78829eab55a6c245870eeb74cb6c26063828' }, index.h("h2", { key: 'f54eed1eabb841f82de0da90b212ea6c11a2a988' }, "Login"), index.h("smoothly-form", { key: 'acdad38bf6530f2624b1b52d88ee0251dd7af3d3', looks: "border" }, index.h("smoothly-input", { key: '68d96eae8c35ac89869f20266896d008d843edf4', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '9beab566c6f7189dfcebae7149d25be6bd2885e1', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: '851c57a3d2e2e8b42a36ba97ec3aa086959b0df3', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'dbb45b020eecfd32e532848c4e5b474030c5f1a0', slot: "submit" }))));
     }
 };
-const styleCss$$ = ".sc-smoothly-form-demo-pet-h{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;grid-column-gap:2rem}.sc-smoothly-form-demo-pet-h smoothly-input-checkbox[name=\"hasOwner\"].sc-smoothly-form-demo-pet,.sc-smoothly-form-demo-pet-h>smoothly-form.sc-smoothly-form-demo-pet smoothly-summary.sc-smoothly-form-demo-pet,.sc-smoothly-form-demo-pet-h>smoothly-form.sc-smoothly-form-demo-pet smoothly-tabs.sc-smoothly-form-demo-pet{flex-basis:100%}";
+const styleCss$$ = ".sc-smoothly-form-demo-pet-h{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;grid-column-gap:2rem}.sc-smoothly-form-demo-pet-h smoothly-input-checkbox[name=\"hasOwner\"].sc-smoothly-form-demo-pet,.sc-smoothly-form-demo-pet-h>smoothly-form.sc-smoothly-form-demo-pet smoothly-tabs.sc-smoothly-form-demo-pet{flex-basis:100%}";
 const SmoothlyFormDemoPetStyle0 = styleCss$$;
 const SmoothlyFormDemoPet = class {
@@ -8981,10 +8981,10 @@ const SmoothlyFormDemoPet = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '1a14984f2a97b3f2b340b42a94fe739b3cec9fe6' }, index.h("h2", { key: '60312704ad696adf1ebf066c2daad8f8f64e6d91' }, "Pet"), index.h("h3", { key: 'ab4ddbf7f875039c6af77a0c0cdfb1478cd70b49' }, "Value"), index.h("smoothly-form", { key: '44535b40f9a60a8da80ca3501078995d75b1ac34', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: '7467e61c97d9ad916180d9b03de6a63f10618ee1', type: "text", name: "name.first", value: "Johnny" }, "Name", index.h("smoothly-input-reset", { key: '414516b985468ace70cf7f98dddc418e75932c96', slot: "end" })), index.h("smoothly-input", { key: '6d678b788d479067730b9aaf28b777669ca68c78', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: '7a7df991ee53a2e183be805664b81765e1798a85', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'fd6f58f335cd349a61d568e69537dfeb7f816567' }, index.h("h2", { key: 'fcccf576c54df16f5cb8a1b050def1d7456b3295' }, "Pet"), index.h("h3", { key: 'b1ff28871663e3d883717831eddec29a85ba0ccb' }, "Value"), index.h("smoothly-form", { key: 'eb882ce38ca479836483edf6d1794362e64b39df', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: '1d034f4162cfa87ff6f609add559682dd9e05cb6', type: "text", name: "name.first", value: "Johnny" }, "Name", index.h("smoothly-input-reset", { key: '308698375c3d928a829b7a0585b652acd7eb7125', slot: "end" })), index.h("smoothly-input", { key: '6332686d7d46872727ff9de8a578c3ac117149b8', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: 'eb1f6aec65f842f22366fa844b0fda1584df0c66', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "Has Owner", index.h("smoothly-input-reset", { key: 'fa2a7d9976a022e8f3aa15a3312a13a9202a9c44', slot: "end" })), this.hasOwner && (index.h(index.Fragment, { key: 'f742dc228707343f791ee79c05d8a69cce4c42cc' }, index.h("smoothly-input", { key: 'ccbd55ce1c6d5b3e1eaea126cb1c6c894f939fc2', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name", index.h("smoothly-input-reset", { key: 'bc36d153c6f9778da3033242d8e6c3e0a05e5b08', slot: "end" })), index.h("smoothly-input", { key: '5585e64f1af30f13167e995220a48af383efcfc9', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index.h("smoothly-input-file", { key: '895f2b9d666c31e12b7279d9ae6f78d64e62058f', name: "owner.picture" }, index.h("span", { key: '6e2bbabdc9f41934f51de1bb1113db82b4da4d3f', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: 'ba61887a72fc45ec7abb9017f580d87b47056e2d', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", index.h("smoothly-input-reset", { key: '33abcfbbffb224c90bd40f1586d0b76ff55726bc', slot: "end" })), index.h("smoothly-input-date-range", { key: 'f9089a4198de4b0510be31ed4228fcd353504bcb', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange", index.h("smoothly-input-reset", { key: '6333fe44045a535ca8cb2860e1b488bd92b3b859', slot: "end" })), index.h("smoothly-input-range", { key: 'e4d7fb8f812f5214fee582c1cde26256981767b4', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height", index.h("smoothly-input-reset", { key: '2df334a56b493f2b92c6fabc1cdaa19545ca58b7', slot: "end" })), index.h("smoothly-input-select", { key: '5ac5ac6f6ad0cb85b450052e09a587a707d23ea2', name: "owner.favoriteHat" }, index.h("span", { key: '93e0f032d4e059f7f3ef65b67e082727ebd6e51d', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1, selected: this.owner.favoriteHat == value }, value))), index.h("smoothly-input-reset", { key: '20baaf15a5ac7e34f51c059b032eacd294c305f8', slot: "end" })), index.h("smoothly-input-color", { key: 'a37557db5b9fd09a48034b74cf23db3b06186705', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color", index.h("smoothly-input-reset", { key: '306d19f03ef263a8993e43fa246b9c168762c24c', slot: "end" })), index.h("smoothly-input-radio", { key: 'eb1d8d49b1f1918f9c48895466d9d8708114b15d', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index.h("span", { key: '70d91da4412d213b9551d71ca94c624eaf775c55', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: 'f8e1ba09bc3a8a22033a5953faf320cb56fcebb8', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index.h("smoothly-summary", { key: '25ad3df973335242a5712ce5d274e1294f811268' }, index.h("span", { key: '4e21b9cd62f8622ab9f1e6c748023e563ba6bf01', slot: "summary" }, "Summary"), index.h("div", { key: '075f72e43b1b81223bedfb1381a4f575ad56e37d', slot: "content" }, index.h("smoothly-input", { key: '05111a5caeddfd49441cff71d5c15f86eac9b4ba', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: 'ff70ef874b72e5c4d19ae5615dd13c7dde0215db', name: "summary.picture" }, index.h("span", { key: '14d4b9d8fffff8c3ef81688b7ad37fe229e67171', slot: "label" }, "Summary picture"), index.h("smoothly-input-clear", { key: 'e14e669593b085b596181d7118c35e50cb23f609', slot: "end" })), index.h("smoothly-input-date", { key: '90ea911cd33a6508a61c31a610d87143cb6ff761', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: 'cc47f8143d3012613ab24498ca327728538a38db', name: "summary.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", index.h("smoothly-input-reset", { key: 'a53f80766c33e8c9e4ff1fd7fcca1db497d5d30b', slot: "end" })), index.h("smoothly-input-range", { key: '60d48aa97aa83faa1dba6691242733c09440af54', name: "summary.height", label: "Height" }, index.h("smoothly-input-reset", { key: '41c9e09c013856892e9484651b39a31f6d4883af', slot: "end" })), index.h("smoothly-input-select", { key: '849edae75b0b13d10ee5296a512d042c2cac4b5a', name: "summary.favoriteHat" }, index.h("span", { key: '93274bb5230c2c90eb940047f83e9e0096cd39fe', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-month", { key: '521db332fa3b7538075c5919e519bc6267ef0cae', name: "summary.month" }, index.h("span", { key: 'c43f9e1e8f0d1724d4e7501cf933a4dd7a9bb818', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: '96a207a10dbd088b4ee14d554232d9283ccb83ab', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: '2a35819d79ddf5992256c1a809732bc538f019e5', name: "summary.favoritePizza" }, index.h("span", { key: '097875cf9b8df300279f62bac0b893ab287c494a', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '351463c8b884c2fda62fe0c6896ff3762fc2bc78', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: 'f21d8025188f50c90d88004285ae4bdaf58f9550' }, index.h("smoothly-tab", { key: '0b20d2ba0a5627bae25afaaeecf0eacdfb431229', label: "Dog", name: "dog" }, index.h("smoothly-input", { key: '95039a99cdf3b50b48bbd97145b7e7fac8fc1245', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: '3b23f5c2a0bd8158a3e0172530198990237241a9', name: "dog.picture" }, index.h("span", { key: 'fdf44cabaefb27c188d44e1665d5dec77bbfa648', slot: "label" }, "Dog picture")), index.h("smoothly-input-date-time", { key: '2798ea0d9ca206a8f3c951a63312276ec8182228', name: "dog.lastWalk" }, "Time of last walk"), index.h("smoothly-input-date", { key: '6cb0a07639c19cdc465c75d3b81697e618fe1e64', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: '9a69c74ed1cf929631d65556b0e8b86a6bbce694', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: 'a2440801fc3e49e3ac117f8c01884d14817e6719', name: "dog.favoriteHat" }, index.h("span", { key: 'c7d7cdc296be6a4f56e4e7d51781d64bc4fc67c1', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-color", { key: 'af154907d6330f02227517a4f6afc4ebd6aa15f6', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: 'd61665dda5034d3f7002bd2bbe668def0777066d', name: "dog.favoritePizza" }, index.h("span", { key: 'c98990517bca41e2a8bbb7ac7694841919a81c44', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: 'b78fa1698185f619cc91481d71cf8d68a8b86d25', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: '060ea6d220ddf073d0a079ff01dc52b56df0c4a7', label: "Cat", name: "cat", open: true }, index.h("smoothly-input", { key: 'd4550600d6de955ea727fd29cb7e0faeeedbfeb5', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: '0167cb1929d52729ff2fb329954674afe8a60e7a', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: '6d70957cf7561c2eb092fa035c20942a91d022ee', type: "json", value: this.value })));
+            } }, "Has Owner", index.h("smoothly-input-reset", { key: 'cd6c11e114bce17426f90e355eb1db1af7ed8fc1', slot: "end" })), this.hasOwner && (index.h(index.Fragment, { key: 'e6ac2d7b3087306f99b0fa9b6444e91b5e0e37a6' }, index.h("smoothly-input", { key: 'b9acbcf6211fa057df6cf813b3138987f87d0faf', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name", index.h("smoothly-input-reset", { key: '6135bc037cb61797db43929298cb0fecb566bae1', slot: "end" })), index.h("smoothly-input", { key: 'ea1cd7c11207f6ffef10b998d48601b23e32784c', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index.h("smoothly-input-file", { key: '7b29325cf763adc7f8a74aa038787bcbc79e2cbc', name: "owner.picture" }, index.h("span", { key: '6cfb9c9ca08c1aa21bffd74440b9fc72be1f9b9e', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: 'b0e13b530fcbecdc3473f8f3a6b64faae0539f99', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", index.h("smoothly-input-reset", { key: '091080379497e5b4a44baa6e4c308d615d11efd3', slot: "end" })), index.h("smoothly-input-date-range", { key: '177cf8bab833aefc37641f84e311bae632766e4f', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange", index.h("smoothly-input-reset", { key: '50d628cc5312eeaddc9e63eee1bec136edad5d54', slot: "end" })), index.h("smoothly-input-range", { key: '45d0b2a96491f83fa490303d972b1888ca238499', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height", index.h("smoothly-input-reset", { key: 'e6d5532bae6b869e2689606856fed111437b10b4', slot: "end" })), index.h("smoothly-input-select", { key: '4eb44a966295ea7c466e05ffefdc78539d67a1c3', name: "owner.favoriteHat" }, index.h("span", { key: '4c5f5c7e8d90c0fbcdc4d7f3a08904a2d2a12e7a', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1, selected: this.owner.favoriteHat == value }, value))), index.h("smoothly-input-reset", { key: '953da4ac3876ae0426e16f575cb73f3d5f2f0167', slot: "end" })), index.h("smoothly-input-color", { key: '88e770f1c77599d46031e1d58d7c927748e4930c', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color", index.h("smoothly-input-reset", { key: '7ede6644743c2635706d4cf278f47e21d3b74d98', slot: "end" })), index.h("smoothly-input-radio", { key: 'c231193127024d9761aa559bec89ffb1eaf09acc', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index.h("span", { key: '4388ee769be45cb2df1226a3abf3a4f11cbb6065', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '012f9e3da80a1ec67aee406964263dd91ea47138', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index.h("smoothly-tabs", { key: '69d1dc65939a4deab9b22e83bd326ee88e1ac6fb' }, index.h("smoothly-tab", { key: 'add8493e142d0f4fb001bce90659e9ac9b514696', label: "Dog", name: "dog" }, index.h("smoothly-input", { key: '55d8cfe1ec5f5de509df765454025eb0f890b6f3', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: 'c676d03691f28f7cd69d27ab72f2f79667f7af04', name: "dog.picture" }, index.h("span", { key: '8f3cdfde96d4d8c9667ccc142e1aa324f3da2d26', slot: "label" }, "Dog picture")), index.h("smoothly-input-date-time", { key: 'd29a5e0694ab908dc4bdf52f5b9ad6b28985132d', name: "dog.lastWalk" }, "Time of last walk"), index.h("smoothly-input-date", { key: '474667a7c5357cfc9a4a6dbe98f1d688c4ec4954', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: '8ccfb03d70d83cf566676b7ab57ea5191dd5393f', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: '2066db8c8d4e5b44a378cf293e2adbb5e8bf460d', name: "dog.favoriteHat" }, index.h("span", { key: 'a62342e8af25a36683b5bb71329e5a9838e46ad8', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-color", { key: '542fe343740ac056bfbae4cd475115d14e55747c', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: '3a974e789695f7d1f7dad1029b18e8234a40f520', name: "dog.favoritePizza" }, index.h("span", { key: 'ceb0081e3d6cdbb28132be63098b592399aea837', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: 'ee5fee3e5b44ee6ec5bd5c2a745cefc69e828ae2', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: '8fa8c7108190cc80ea2f19162d9da05d771cd012', label: "Cat", name: "cat", open: true }, index.h("smoothly-input", { key: '1447b9e61334745da924780fe9fd9ffa08d0772f', name: "cat.favoriteFood" }, "Favorite Food")), index.h("smoothly-tab", { key: '6aa5088e6670b82a7e322a6e3884834a3a6bebc6', label: "Parrot", name: "parrot" }, index.h("smoothly-input", { key: 'ea0f62a2bef7ba932d81d1cfc758a30730a942ae', type: "price", name: "parrot.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: '0d4ec9d5fb2629416bd2503b21ca161b1a42781c', name: "parrot.picture" }, index.h("span", { key: '277b9fadfca699e97cf6b59f32bc9eb935236ccb', slot: "label" }, "Summary picture"), index.h("smoothly-input-clear", { key: 'bde01c974d7a9a6d8f72ba693d14da87412142ce', slot: "end" })), index.h("smoothly-input-date", { key: 'dbb7ff97e4032431c28296f571bb9c14f4792a9f', name: "parrot.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: '7c8bc746930884acd71fe8b9e43ad3f39df2280a', name: "parrot.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", index.h("smoothly-input-reset", { key: 'c2c019d38267cc7cf2e1bb9f9de099093dcba829', slot: "end" })), index.h("smoothly-input-range", { key: 'f9e1e846edc01ff5d1d0a70623e1218115d74922', name: "parrot.height", label: "Height" }, index.h("smoothly-input-reset", { key: '28336ff1ca0555df0bad230de82ca4f27fac0f17', slot: "end" })), index.h("smoothly-input-select", { key: '1284dab60ff21da638a1c6de3b97bebc89f5336f', name: "parrot.favoriteHat" }, index.h("span", { key: '0f42c20171f445ee7662143458622bfe82edfbee', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-month", { key: '6add4cdf7a3ab70b237ebdd1b305702d0206960f', name: "parrot.month" }, index.h("span", { key: '1daadc9241a75387cbce7a75fe580e7816fd3db2', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: '436f5e0c5cc9d2ebe4610db98ee2e06c99cdb342', name: "parrot.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: '266007f891ac4b2b657c5b387cf8decb4f591a71', name: "parrot.favoritePizza" }, index.h("span", { key: '9e90dbf17288235b318dbda58b13bec95dc727c9', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '9422f35a25153747298d082b011823d983046a86', name: "parrot.hasPet" }, "Has Pet"))), index.h("smoothly-input-submit", { key: 'd60ff5f5085e2b3eb74f23c127dd6a3a9897a47a', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: '84847bdce423d1d7c2d935d84b725dc3e2f0a5fb', type: "json", value: this.value })));
     }
 };
 SmoothlyFormDemoPet.style = SmoothlyFormDemoPetStyle0;
@@ -8994,7 +8994,7 @@ const SmoothlyFormDemoPrices$1 = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4ba4a54c238ca56d8b5ac6017d406d9f63877df8' }, index.h("h2", { key: 'b1ecf5a6af7612f552d17c6a6b07928674eb6df8' }, "Prices"), index.h("smoothly-form", { key: 'eaec45c13b4fb94ebdf2676d864183f1de4e546b', looks: "line" }, index.h("smoothly-input", { key: '7b060588a027648239b0874507de83789efffbd9', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '3e56aa29a3f2e4181718fc7528d6e3ef95c3309b', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: 'e63cffb04693599429bf32d7d60bafe63c1ce6a9', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: 'd332e6f0b691a4e99c0b4cea6387c0c02ea7ceec', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '269e008532df315736715e53b3ba6f059181c568', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '371a1033d38193d53d47fda1bd3427fb914ac3f1', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '3b2301ec71679bf57b45ff7472cc61c3e7d0d19f', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: 'd6af989b85524745c0827835c6199299eb0003de', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'b1060426519e152e11bc7eead47797dc3c13df79', slot: "submit" }))));
+        return (index.h(index.Host, { key: '07b1adb88bd8e33146a7136cfd9937bb514ca7f2' }, index.h("h2", { key: '07aa50d7b9724126041784ebcd6470db505b2b30' }, "Prices"), index.h("smoothly-form", { key: 'bacdec10f2b08eb01821fd3d0ef499ac9f226b10', looks: "line" }, index.h("smoothly-input", { key: '1de0e8872ccfaee3b0dd409b6e20b035b827bb24', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: 'f3e3ff990f12aed4d9c2fc183b1537c60bd5c334', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: '43c10d5ed2802155c05ea78c562f7f70750f726e', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '14b2ed48704938dbd3324cb9643964e94f506f69', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '925f583dff01f4776cc356caf5cbf457b029f887', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '9336ce172a3721c71085eed3a12bdd5059a2506e', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: 'fad2f01e3f1ab0c7cf06cf5da0cfef6636154c5b', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '60aac83fc7d1330da74f5828e8ae59a622ac5595', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'e760313c45ebfd058ed98e0a5ba107d04a69ae8a', slot: "submit" }))));
     }
 };
@@ -9014,7 +9014,7 @@ const SmoothlyFormDemoPrices = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '6b92ef8e6dc604ebac3d408ac94914ae5c1ad562' }, index.h("h2", { key: '9b88d8ce4bbc5f252e7d5ff38f44847c61c2d0d8' }, "Schedule"), index.h("smoothly-form", { key: 'd282e72764108950d40b50f2bd9ebff0eab193b6', looks: "line", validator: TimeTable.type }, index.h("smoothly-input-date", { key: '8a3a2d0d414a0d52943cb6a457b72ace6956f929', name: "schedule.0.date" }, "Date"), index.h("smoothly-input", { key: 'f48c556bf2f13c7a04a047acf1ee776a2c41c260', name: "schedule.0.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '9f40cf87b96f1eb44e7238119c49d6edcbbe6339', name: "schedule.1.date" }, "Date"), index.h("smoothly-input", { key: 'd70460e1a727f002958dca9696f436c7eeaf0fb6', name: "schedule.1.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '2290b368197f8cc394e795d9c802ad0eb7f98f6a', name: "schedule.2.date" }, "Date"), index.h("smoothly-input", { key: '75b3bb95beead5470b6e6702f55ab7bf41c89b1c', name: "schedule.2.amount", type: "price" }, "Amount"), index.h("smoothly-input-reset", { key: 'c21e35951486698d23c7e226fa999443ec317c68', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'b22df250995a434b72d125ec004cbffc58e4d472', slot: "submit" }))));
+        return (index.h(index.Host, { key: 'c6c8f8e9732b7bee6174b065aca78ec9433d106f' }, index.h("h2", { key: '3abd7dcb1223634ebe153ca72bc01a63b8f1cc0f' }, "Schedule"), index.h("smoothly-form", { key: '58efff0608dccc24e672f0af2c46ed7a6910f91f', looks: "line", validator: TimeTable.type }, index.h("smoothly-input-date", { key: 'edfbd13e8fad7a7c250d0a34b6a05c8e14e7cfc7', name: "schedule.0.date" }, "Date"), index.h("smoothly-input", { key: 'b8be4605fffe2989054278d01c92267f5763389e', name: "schedule.0.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '0748a3ebf8c6be536eddc53800c0d411799f5bf4', name: "schedule.1.date" }, "Date"), index.h("smoothly-input", { key: '5bedf4f31945901c20d0cf856a2a1b8ae9e80423', name: "schedule.1.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: 'e45b5341043beedfde0c3e0384b0e3d102c0a671', name: "schedule.2.date" }, "Date"), index.h("smoothly-input", { key: 'bdba3363ca72fde13eacd55ddfe6410c57c7bb41', name: "schedule.2.amount", type: "price" }, "Amount"), index.h("smoothly-input-reset", { key: '18dca6b3c44da961d7b2ef3da97820ae966cd5c4', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '400283fd87c5de2ee10e72873afcba9064fa6814', slot: "submit" }))));
     }
 };
@@ -9023,7 +9023,7 @@ const SmoothlyFormDemoTransparent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4fda9e7a3bf9ba68a71e7f417384a9934b3ce480' }, index.h("h2", { key: 'ea82de5fecc3776cadf6b0edb13ce0b3ff10b045' }, "Transparent"), index.h("smoothly-form", { key: '627277c2e28486d9f7961bebab38299e067b6145', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '82f86ac2a54819009777bba8a134c41cbb8e7fa9', name: "file" }, index.h("span", { key: '94f2f02bc481382e7b3939129fccd93940377c72', slot: "label" }, "File"), index.h("smoothly-icon", { key: '2a6acb648ed96bbe7990395af3d5e75f7a464d39', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: 'b9d5fc5004142a7e65f5419e5d70819e8a97959b', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '48f165326a76aa73bcd577c07366063057a4f6a1' }, "Date"), index.h("smoothly-input-date-range", { key: 'da665855753bcb06cd7a075a6e6a7ebeffbe8cc5' }, "Date Range"), index.h("smoothly-input-select", { key: 'fa3674fe1472f9c523f78a2e96e9481db5291a3b', name: "transport" }, index.h("smoothly-item", { key: '9e8a9ab23629a3957f593d5d3462aabd7b860ac4', value: "plane" }, index.h("smoothly-icon", { key: 'd82d801ed428fc0d7feaaa897238b0669cce56a7', name: "airplane-outline" })), index.h("smoothly-item", { key: '12a31fbd8ac393860a20fc5c15dc9bc783449909', value: "car" }, index.h("smoothly-icon", { key: '50662edaaf06ca46bc7bf183e1571eaeb9cc76a3', name: "car-outline" })), index.h("smoothly-item", { key: 'a4a883dc8847507d1e4090852a0c92d9c78ef164', value: "bus", selected: true }, index.h("smoothly-icon", { key: '54a198e4724455226862c77b80ada7470950ae83', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: 'cbeb075696f75cb9f40116604b40cabd7e4ee874', icon: "checkbox-outline" }))));
+        return (index.h(index.Host, { key: '23c35e22c6f70f6b55ad18ec6d38a188f0215c9b' }, index.h("h2", { key: 'e2fc9d3be81cdd5da0c630b42ede7e6715084d38' }, "Transparent"), index.h("smoothly-form", { key: '084e4048817e9edac303e5eb5cf10ca0b9161a3c', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: 'a8839f3a389be8f634d2f92eba94141b6448592c', name: "file" }, index.h("span", { key: '3c21619014ceb39e67679b08af8b05c0440d85fa', slot: "label" }, "File"), index.h("smoothly-icon", { key: '5ca5dbcc76fd50469eae5d0ed4a2b34b1eca00e3', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '6e10c11a9dd709713192cafaf916355866b471f7', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: 'cfa290bcb1a0a5d1330a7ca989673efeb5ee3c51' }, "Date"), index.h("smoothly-input-date-range", { key: '4f50a65e65ec2df78c4a1636b346c5fc14bf4b29' }, "Date Range"), index.h("smoothly-input-select", { key: 'cca7b65376fc4a9a00acd0a2e70fd8d452e771ba', name: "transport" }, index.h("smoothly-item", { key: 'fb144f0f2b2242e0dd2769f61bf1a472be2c79c5', value: "plane" }, index.h("smoothly-icon", { key: '4474223b29cfd66f71f64a7f617559c9b714bbc1', name: "airplane-outline" })), index.h("smoothly-item", { key: '5beaffe896df6aa774a94e4ac008596020eb39b5', value: "car" }, index.h("smoothly-icon", { key: '3c84883a539e367eceab216e93d30a6d0da03d03', name: "car-outline" })), index.h("smoothly-item", { key: 'f0d434a1c2c86e14088cc266c9a6b45845e4abf1', value: "bus", selected: true }, index.h("smoothly-icon", { key: '67c1a2c383c6b6afe3f8d090cb92e367c3a2de08', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '6feb50ed966210ea27886c404fe104f6b46dfc4e', icon: "checkbox-outline" }))));
     }
 };
@@ -9045,7 +9045,7 @@ const SmoothlyFormDemoTyped = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'fd8b4632ddd0a7747248f41de0135fd008ad7b00' }, index.h("h2", { key: '67f51728ac8809709f06cac0ded4754a86fcbbea' }, "Typed Contact"), index.h("smoothly-form", { key: '17af0f22c176e18f6e220362f2e81df0d1a3951b', validator: Contact.type }, index.h("smoothly-input", { key: '10e858259b3e0c94b702d41201bf7042cb05029c', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'ee4b73eb89b48c06ef2ed814f320275784720374', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '04f0c5f1e829711f8a318168c00b5f730af03ec2', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '9402ca8684be39b543394a63b40a3c1164359ae6', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '8b8f104ce8b6bf87305b2bc629d2aa46da66e897', name: "country" }, index.h("span", { key: 'e80709b873c8e82bd549bdce6eeca52594e207cd', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: 'bf7dd64f84748cfadef1d7df2ce1843489e7ad35', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: 'fc80d53928748ff41237b3f92fcc88e669c15aa3', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '38b20a59fcc7f25d2db9018e09d35b23262fe11d', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: '09d832f2e2c7fabdb8a1aa67f9e1597994165e5d' }, index.h("h2", { key: '8c90f3c15aeffc1cf3502e4e6ac153d3de1b9cc8' }, "Typed Contact"), index.h("smoothly-form", { key: '57bce4118b8793986ced78a45d115e0323f6f563', validator: Contact.type }, index.h("smoothly-input", { key: 'f5cf0372e007ae990944e92ff880622133e20bf5', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '8580c166148a543c2a75e06cef0d045aee90e110', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '96ace8adf89b75c8b23ae2328d31d904e70bb31b', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '51834ec2a86232e2792fe1a4e97b17669e7fc3dc', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '8be08f56052a4b985f0bcd66f7a4a1ab6b1d72f2', name: "country" }, index.h("span", { key: 'e5daf40e56a6ac2d79440fc62424362f121f6fbd', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: 'ff85538ce1aa8b04b69fada24c8c1ebb7e0bab12', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: '816e986b3a198860cbabf2869b440e10fe60e620', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'e912e9b466f52c4aad5d43ac0fca19ec155560c5', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = SmoothlyFormDemoTypedStyle0;
@@ -9150,7 +9150,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index.h(index.Host, { key: '70ac6bf53b091c9edddcdb82a4bc8ec5f11a19a5', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index.h(index.Host, { key: '9020a09ffba054d3478a3ae7df25c7a785e9f7a4', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9172,7 +9172,7 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (index.h(index.Host, { key: '920ac11272227ac543d6771b565914e0ad983ae1' }, index.h("h2", { key: '4e24638831af2f9520950bc06e8d40425f16a4b8' }, "Filter and Variants"), index.h("smoothly-form", { key: 'b24dd0a63c48656f70ee6880a28104f3fcca3676', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: 'c42016713a0aa0098698c3307a459e2ab83875d1', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: 'dfd38bf777f4b99dd8d87722973ec7e95be9b737', name: "variant" }, index.h("span", { key: 'd381d37505733f6c80faec9da19c6f6dcf03d9b1', slot: "label" }, "Variant"), index.h("smoothly-item", { key: '7f75ce9d83d011d9ce91223efc5b9afe69aa652f', value: "outline" }, "outline"), index.h("smoothly-item", { key: '82317cea2ff2110cda8bdc98527a8efc2af62997', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: 'ef94f4f68d6f3e8932caafe04d9f3e4c121fad6e', slot: "end" }))), index.h("h2", { key: '23ea2ead19bfde41c2f239d2329e13c757a087c4' }, "Props"), index.h("smoothly-form", { key: '09b6c7f1fc5ca2eea5f576a21a029f99807ed207', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: '158af644db3a9de6c461fe7ba5431393815c2b24', name: "color" }, index.h("span", { key: '9cd60334e613740e847c84652c3009be19656508', slot: "label" }, "Color"), Scrollable.Color.values.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: 'd70f63dbf4355e86c8084968f8944aba6d219752', slot: "end" })), index.h("smoothly-input-select", { key: '66140e912bc0ae68dce6edfde38d6e35038a32eb', name: "fill" }, index.h("span", { key: 'bcf4c28383559e846755f4ea45373497acb3a1d1', slot: "label" }, "Fill"), Scrollable.Fill.values.map(fill => (index.h("smoothly-item", { value: fill }, fill))), index.h("smoothly-input-clear", { key: 'a6ea6b23fa892d8d9c70ad75e4b44d0dd1dd8fdd', slot: "end" })), index.h("smoothly-input-select", { key: 'd227cafab0914bd84bbcb324373edc48d1903ec4', name: "flip" }, index.h("span", { key: 'b04d1006822108cd3afa8452b4965c7e996f95dd', slot: "label" }, "Flip"), index.h("smoothly-item", { key: '6c9350e7c1eda7e044b73739055750ef1b72352d', value: "x" }, "x"), index.h("smoothly-item", { key: '59a06e4b1178e89b6f882f869040b71ce3f92958', value: "y" }, "y"), index.h("smoothly-input-clear", { key: 'a809a820125b7b20b0a2ab676c65f136059cd29c', slot: "end" })), index.h("smoothly-input-select", { key: '73189d5621c2bc1238b3200168436014501e531c', name: "size" }, index.h("span", { key: 'af55cac2093217a90f691006bc34212b4c7bbe71', slot: "label" }, "Size"), index.h("smoothly-item", { key: 'b9401c9388c6803ac5fd83a02e63b71258fc04c4', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '8afc404e515623f3006ccbf66e0fce814ac46828', value: "small" }, "small"), index.h("smoothly-item", { key: 'a4ddddd6d6b18f641afa285ac43152fc3bc88026', value: "medium" }, "medium"), index.h("smoothly-item", { key: 'c6d38ba0fe0e083c1df17ac2c8ff4452c002222c', value: "large" }, "large"), index.h("smoothly-item", { key: 'b44cc01b4f444f09ea10845ac9602038f1eb2ea5', value: "xlarge" }, "xlarge"), index.h("smoothly-input-clear", { key: 'c8b66c84b3010109e8473da5859706604d010ee9', slot: "end" })), index.h("smoothly-input-range", { key: '3711bb2ead4acec61ed1124457971f4658132bd4', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '02dec8f65597469be0e804aaeacdd7c899d006b8', slot: "end" }))), index.h("h1", { key: 'ae82174f8a13d25e8249f69abccef7e9bbd19a54' }, "Icons"), index.h("div", { key: '115669dd56f4c96f71faa89588cce30f4e80fdd2', class: "icons" }, [
+        return (index.h(index.Host, { key: '76d04985ea3b05b89e3924d1477e2152cf69987e' }, index.h("h2", { key: '55a228ff66264dee9b1a33451dd38624e36405fd' }, "Filter and Variants"), index.h("smoothly-form", { key: 'b7028afd552ad08a426a576334edc075927d4da0', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: 'ef32f99e3efa643130eafe143ff3eb041eb740de', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '95246b9a7714f3fa94c5bb9aed572acbc043943a', name: "variant" }, index.h("span", { key: '945522c24b5bd7e486428ff874728c126bfe2bb7', slot: "label" }, "Variant"), index.h("smoothly-item", { key: '624784f7b0621c9d9bc582ff521fd7d027ab4740', value: "outline" }, "outline"), index.h("smoothly-item", { key: '781872747dd78da5c18307937eae02546a54645f', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: '62f2a2dcecd806ab989784da1d29dc1d55d2181c', slot: "end" }))), index.h("h2", { key: '02700b2b3e514ef0475b89049df54839d1d99818' }, "Props"), index.h("smoothly-form", { key: 'ee64fa2e888fc8d5eee88c5f6ba2ac56073a485b', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: '84f79069f3059fb7c6ff9787b8dea43d240fcb04', name: "color" }, index.h("span", { key: 'e1384bdbbad1d3ef47d18fe7701515764c21f51f', slot: "label" }, "Color"), Scrollable.Color.values.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '57bab5535b6984a060d7a115a700437a9792531a', slot: "end" })), index.h("smoothly-input-select", { key: 'cedc770b05430217c136caf5fb5a6fcc05a99d30', name: "fill" }, index.h("span", { key: 'dc0646109f5a72d1701b7c248e4c998a4cc81642', slot: "label" }, "Fill"), Scrollable.Fill.values.map(fill => (index.h("smoothly-item", { value: fill }, fill))), index.h("smoothly-input-clear", { key: 'd639c904f93b4e705378d2327fd711de594020ec', slot: "end" })), index.h("smoothly-input-select", { key: '0e54bdadbe97e37890076ca87bd4b7e95cf4360f', name: "flip" }, index.h("span", { key: 'c8ef684d2a5f69ded9f0084fd2810e89c15fc330', slot: "label" }, "Flip"), index.h("smoothly-item", { key: '52ff2983e7fcecc19de0e9b93bf7f0c74a232eab', value: "x" }, "x"), index.h("smoothly-item", { key: 'c2b73656f06d4b843855623840603ce11c92dcc0', value: "y" }, "y"), index.h("smoothly-input-clear", { key: 'b245af6ebbc40ad4d0497b3145140e628be0afb8', slot: "end" })), index.h("smoothly-input-select", { key: '024759f276ae3ffcbdd736c07d291db66f9d951d', name: "size" }, index.h("span", { key: '6cddfc1203383bd0e8262d72f830e5f0f9018db1', slot: "label" }, "Size"), index.h("smoothly-item", { key: 'ea1550b29efa366731efa1094de22a3b198ab21b', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '0d71e4dd9a2d4f5bc8a4fb433cca1c0168acc90e', value: "small" }, "small"), index.h("smoothly-item", { key: '77648ec680152d4eff67a94ee973f914a4fa4ac6', value: "medium" }, "medium"), index.h("smoothly-item", { key: '8e99089682b90d50295eba87e2f962851d5e98a4', value: "large" }, "large"), index.h("smoothly-item", { key: 'd8bdde05960be9319372854c3c16e4a8dcbca8a0', value: "xlarge" }, "xlarge"), index.h("smoothly-input-clear", { key: 'f5db639f69afffd1a00b2e052d447c287f135e04', slot: "end" })), index.h("smoothly-input-range", { key: 'c1357626e97be16d3c132a6037379de2d7003871', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: 'ebb027ab694dc4f8641f0d158ec8d637f24ef9b9', slot: "end" }))), index.h("h1", { key: '114eb0be41737d8b679a4b2c4e583552cc9b3bcd' }, "Icons"), index.h("div", { key: '16fb9b9010f0ab0ca2729eb5fd3aaf799512f702', 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)),
@@ -9617,7 +9617,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: '18a98931c9b1a0ac241f137eb26d3f33edbbb31c', 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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: 'f8a5d3ad49c8f98b41bb267420e1f6744af81889', name: "start" }), index.h("div", { key: 'a5049a950240357a822da8210b4bb097d65e1f49', class: "smoothly-input-container" }, index.h("div", { key: 'cf5d9bb58fd6d7a64d169f11877af39d1fcf82fc', class: "guide" }, index.h("div", { key: '97cede4a817764ed1200dceb9ff4cc6639e594bb', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '170accf52143b99e51797450e8623a7326631a1a', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'f65ddf15d86378961565fce755ad3045729f31b5', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
+        return (index.h(index.Host, { key: '6d20a9bb70a342e7a09879e61fd826448747fb34', 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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: 'aaaa87666cf2c318eb0cf5a8a2b8df897b2f5d3d', name: "start" }), index.h("div", { key: 'ffa189d0c2312eede65a0ba0adb10e189a59d91c', class: "smoothly-input-container" }, index.h("div", { key: 'b968632b22fa137d485a6410f9a082c581eb0941', class: "guide" }, index.h("div", { key: '395d499fbfab5a9dd4ba70f28ab3790e5a1d2201', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'f78c326ffeebf0b9be35f46506a34384c207ea33', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'be43d339ea279eee0067fb3d016a72504cd10730', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -9632,7 +9632,7 @@ const SmoothlyInput = class {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), index.h("label", { key: 'd82983d730112125458e06e5b9f1308a3c8e0aae', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '9fbdf1438e1588080ab14a33305ea9951a79b50f' }))), this.copyable && this.value && (index.h("span", { key: '948c6ff7192a5775cbe8e17b9059f7796cf0eb31', class: "copyable" }, index.h("small", { key: 'dba795d2bf8914f96d37d3fa7b8133ac15d2df33' }, this.copied ? "Copied!" : "Copy"), index.h("smoothly-icon", { key: '46a6b7e4b0fa26dfc25d50ded9fbf2d2ab864c1f', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), index.h("smoothly-icon", { key: '91f48e8db708f8241850f977abf66eb97fe545cd', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: '000e18e8fd0e981037a7b5517e575abf16cd83bf', name: "end" })));
+            } }), index.h("label", { key: '7cb7865c02d3017807a09caffb2b6f551e4b01cc', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '4ff4e42a697e5b8f5b1963a73e3b1e54f654f673' }))), this.copyable && this.value && (index.h("span", { key: '8395817fc60a71dc6c2b74cd2b42e5a765841448', class: "copyable" }, index.h("small", { key: '899bc49fe53abd066d154d02c46d21bd6a0379da' }, this.copied ? "Copied!" : "Copy"), index.h("smoothly-icon", { key: '5b110c5522cc03f8e944b505197bf9eb83139fc6', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), index.h("smoothly-icon", { key: 'd8b2c4248adce0440568e9fd44c712377565e7f5', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: '8a3a7f7704b9073b8b9e4b82ddb20cf28730b7c8', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9723,10 +9723,10 @@ const SmoothlyInputCheckbox = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '48e911f4f263fa8297da0a6c8cfb1f10c6452101' }, index.h("input", { key: '85fae454d387c08e3230e152b3eeb438e70d658a', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
+        return (index.h(index.Host, { key: 'bb6f4d6ec2194928ec0e7f1c2a58cce9c49ac552' }, index.h("input", { key: 'ccd673f8d7279a26b2d303a0c0790793697fdf01', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
                 this.checked = e.target.checked;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), this.checked && index.h("smoothly-icon", { key: '7a73bb9eecedde52cfc9deed2829bd08953098a1', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: 'ce433772084c15001f19c14069371b0a54acdd96', htmlFor: this.id }, index.h("slot", { key: '5781b02bde3f71aa630ff349957795a1da5ce4f2' })), index.h("span", { key: '53e73f569729773cb3bc19375dc1c412123be13f', class: "smoothly-checkbox-end-slot" }, index.h("slot", { key: '1ecbb533580629f53d20c434c648c1179262c328', name: "end" }))));
+            } }), this.checked && index.h("smoothly-icon", { key: 'c3bd2176759b4c069ba0c10d5a9bf471a47250a8', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '977f8c81a690951ead38770b7752b9b41f6dbb20', htmlFor: this.id }, index.h("slot", { key: 'ee849d646b9a22d5828283218d4cf69d0bdc44e9' })), index.h("span", { key: 'd014a1a601d3bd394104f9159bb3558dd8638b0a', class: "smoothly-checkbox-end-slot" }, index.h("slot", { key: '535f36bf90ec3183f5013ae7231ad7e323a173f0', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9780,7 +9780,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '6755d61ed63d5d07d5aa7af1d1d0c09cc1622cf1', title: this.tooltip }, index.h("smoothly-button", { key: '9c75c3886881a9744046e7a510e0c82a95095bde', 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: '745de8c2d9f2bb2e5c836db78c1510f217b543ac' }), index.h("smoothly-icon", { key: '150304f71ca88eeff83bb35bac466ef9db2325b2', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: 'cd9c333c2ac4a663fe6cebdb037074ef4cefab41', title: this.tooltip }, index.h("smoothly-button", { key: 'e1fd1227b620c3cbef9c4ba1fd41ab90cae36f56', 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: 'f3a383e5fee2538aa0cc228fccaf1976b5bc7827' }), index.h("smoothly-icon", { key: '7cffe6821b2bd1ee11ff74f3bd63a856d688886c', name: "close", size: "tiny" }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -9938,7 +9938,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: 'e62afe054a62e46544652015c1928ffe75b4e217', style: {
+        return (index.h(index.Host, { key: '9b1cbc0ab4531b0be3c6a8ec5f494e38aad0992e', 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)}`,
@@ -9947,7 +9947,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: '62ebee3ce7d5f19b1647df89edca85e379a842c0', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: '3e760c367d112274b1621ab74640efd6ee9a9d2d' })), index.h("div", { key: '19316f085738999e8b9efc56e9ee0f9402679fcf', class: "color-sample" }), index.h("smoothly-icon", { key: 'c8604ef92b4e75b949f58f097eddf73260ff465a', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), index.h("div", { key: 'f209d26af01ff17d2d1273fa137083607da1724e' }, index.h("slot", { key: '7b1896c2f0fd29a90e307d896d807de12131432b', name: "end" })), this.open && !this.readonly && !this.disabled && (index.h("div", { key: '546084f1eb9dcfcbec54512f57b49abe48fb83ba', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: 'd1ca54bd84304066e8a8f68018ee460f80133aeb', 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), onSmoothlyUserInput: event => event.stopPropagation(), 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), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
+            } }, index.h("smoothly-input", { key: '4b4670e41f318a9e905bd919f61f41dd079135fd', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'e09a966d52d5767eecaabd3d58a2bf58154df117' })), index.h("div", { key: 'e386dd1331ea1cd887738cccdefff94fed71adc5', class: "color-sample" }), index.h("smoothly-icon", { key: 'e1b051f1cd915ea1410d9eb83fde16e1542ab6d2', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), index.h("div", { key: '1c60634acd1193c2bd6e0c014494c19ab6e27e53' }, index.h("slot", { key: '51f601cf28faa654139009e2cfdae637085543da', name: "end" })), this.open && !this.readonly && !this.disabled && (index.h("div", { key: '1ba1f943bd8fe436d21d5fd8ae56c8f2ef466874', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: 'dfbf03c32e92c6db7bb48aafb430c8df8f49e6d9', 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), onSmoothlyUserInput: event => event.stopPropagation(), 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), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9964,7 +9964,7 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c89d1086280858deaabbd96e546a5a5aa6e3d0ec' }, index.h("h2", { key: '9352642ff0f73b4940c1770c893b3d10bb4c9210' }, "Color"), index.h("smoothly-input-color", { key: '924d365641233bdf20d19437bc3cd212d1d073b1', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: '8b90083f43a8db87c43f33d13c0e4125258eb8d6' }, index.h("h2", { key: '354d9f00965e36cc287031640278cffae58edf93' }, "Color"), index.h("smoothly-input-color", { key: '93daa25294822d9293c88c73cc1896934908d48a', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
@@ -9985,7 +9985,7 @@ const SmoothlyInputDate = class {
         this.isDifferentFromInitial = false;
         this.hasFocus = false;
         this.observer = Editable.Observer.create(this);
-        this.locale = navigator.language;
+        this.locale = undefined;
         this.color = undefined;
         this.looks = undefined;
         this.name = undefined;
@@ -10092,7 +10092,7 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '67b7c8e67fc36b14b4cf05474082437f66428d0c', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, index.h("slot", { key: '86ffc998be10d6fe278b45dec3a39823b99b41b5', name: "start" }), index.h("label", { key: '9131a5cd449802bc10695d80f6e48938021ba724', class: "label float-on-focus" }, index.h("slot", { key: '3ead04d593003724945495650248dad84c51b8ab' })), this.placeholder && index.h("span", { key: '7ca27a270699cc7de41d2c2a96bd4e9aee612839', class: "smoothly-date-placeholder" }, this.placeholder), index.h("smoothly-date-text", { key: '3477dc19001180590c4628dbe29c394c3e2c1b55', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateTextChange: e => this.onUserChangedValue(e), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), index.h("span", { key: '97ec3743498617fa1a1a5129d97e143b3661cac3', class: "icons", ref: el => (this.iconsElement = el) }, index.h("slot", { key: '4d57268abc8a1b3e097b0ca6de0e0d46b2d533c3', name: "end" })), this.open && !this.readonly && (index.h("smoothly-calendar", { key: '566711660ec7b137c51fcdfc98103fc0f9af4306', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyValueChange: e => this.onUserChangedValue(e), max: this.max, min: this.min }, index.h("div", { key: 'ba91f5cc68e1016ff94601e53bc5f0cb5a80de45', slot: "year-label" }, index.h("slot", { key: 'ec7ea4fc638e6218ba9fdc8789a6b2fe969729ee', name: "year-label" })), index.h("div", { key: '3c31f1b37adca2d585b887ea0ce5332ca9b5a0b4', slot: "month-label" }, index.h("slot", { key: 'b43a7450febbfc555071dd9d1cc94976e1c511e3', name: "month-label" }))))));
+        return (index.h(index.Host, { key: 'f485bdfddf2c5f33038866d4a9133b9f6e0a59bc', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, index.h("slot", { key: '56682a22b2609c96ce58848b7621ff3322ad9240', name: "start" }), index.h("label", { key: 'e8bc5bddb4ac1fedca4726d5179372bc47dcf72d', class: "label float-on-focus" }, index.h("slot", { key: '495639abbc4f50ab5fdc64c64a0f77cdeaa64912' })), this.placeholder && index.h("span", { key: '9149cc0a5c29d26c3f7f112979c4317420402807', class: "smoothly-date-placeholder" }, this.placeholder), index.h("smoothly-date-text", { key: '85090a2b409e555de2c8c06df7b04d37aecb1a89', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateTextChange: e => this.onUserChangedValue(e), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), index.h("span", { key: '98e54b0eed76b3ac412afe6454222cea7de5fba9', class: "icons", ref: el => (this.iconsElement = el) }, index.h("slot", { key: '487c69e90a413abe916ecb4bc828548f37f11b3f', name: "end" })), this.open && !this.readonly && (index.h("smoothly-calendar", { key: '9e1506697be46a758179b88ee0cdc11a74cbd2e6', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyValueChange: e => this.onUserChangedValue(e), max: this.max, min: this.min }, index.h("div", { key: '73c2bfce422bf391b04fb983d8b4847c1e00ec26', slot: "year-label" }, index.h("slot", { key: '3b64d8b7a68685629ce040b37623db924c3e5f5c', name: "year-label" })), index.h("div", { key: 'e54348fecfb8026e0488b13267389af5d8bb4986', slot: "month-label" }, index.h("slot", { key: 'b83518e048bb3b27ba32a36351d6f9fd047d8454', name: "month-label" }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10114,7 +10114,7 @@ const SmoothlyInputDateDemo = class {
         this.alwaysShowGuide = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'e54174ed97c703cd43d987cb476d749a38d72a18' }, index.h("div", { key: 'fdc881ad0c8a336d541592ceb27cbc68e951296f' }, index.h("h2", { key: '98569840c652066ac224ad56b1b18cfad3a9d14a' }, "Date input"), index.h("p", { key: '8e4c2da40fe708193f1c7d63c8c9133c7caa8e4d' }, "Different locales formatting the same date"), index.h("smoothly-button", { key: 'cd780464286e9e37bfd4b3425d550e6c5cfd95cc', color: "primary", onClick: () => (this.date = this.date ? TimeZone.Date.next(this.date) : TimeZone.Date.now()) }, "Set date"), index.h("smoothly-input-checkbox", { key: 'daced9e50599f16458b1eb12b85811e6bd87d98a', looks: "transparent", onSmoothlyUserInput: e => {
+        return (index.h(index.Host, { key: '191fe0a37d160b07317f1585c0a0b6d09c22983e' }, index.h("div", { key: 'c289398819d08aa6e608bf1e98d9149f7b981de7' }, index.h("h2", { key: '8c0875cfe6af62e2aefb1faba9185a6f1813cc58' }, "Date input"), index.h("p", { key: '7908bdc75aabfe06fa926e53cd9c854b3437c44c' }, "Different locales formatting the same date"), index.h("smoothly-button", { key: 'f4d9f68bda448d5e6dc7f6f61d124c94b24a5573', color: "primary", onClick: () => (this.date = this.date ? TimeZone.Date.next(this.date) : TimeZone.Date.now()) }, "Set date"), index.h("smoothly-input-checkbox", { key: 'fb3f1a290a0bae953e5365d5c9e96b989dde94ee', looks: "transparent", onSmoothlyUserInput: e => {
                 this.alwaysShowGuide = e.detail.value;
                 console.log(this.alwaysShowGuide);
             } }, "Always Show Guide")), ["en-US", "en-GB", "de-DE", "se-SE"].map(locale => (index.h(index.Fragment, null, index.h("smoothly-input-date", { locale: locale, name: locale, looks: "border", value: this.date, alwaysShowGuide: this.alwaysShowGuide }, locale, index.h("smoothly-input-clear", { slot: "end" })), index.h("smoothly-input-date-range", { locale: locale, name: locale + "-range", looks: "border", start: this.date, end: this.date ? TimeZone.Date.next(this.date) : undefined, alwaysShowGuide: this.alwaysShowGuide }, locale, " Range", index.h("smoothly-input-clear", { slot: "end" })))))));
@@ -10136,7 +10136,7 @@ const SmoothlyInputDateRange = class {
         this.isDifferentFromInitial = false;
         this.hasFocus = false;
         this.observer = Editable.Observer.create(this);
-        this.locale = navigator.language;
+        this.locale = undefined;
         this.name = "dateRange";
         this.color = undefined;
         this.looks = undefined;
@@ -10249,15 +10249,15 @@ const SmoothlyInputDateRange = class {
         this.smoothlyInput.emit({ [this.name]: undefined });
     }
     render() {
-        return (index.h(index.Host, { key: 'f728a3995d6f3f2f5711bf583339275dcd66bda1', tabindex: this.disabled ? undefined : 0, class: {
+        return (index.h(index.Host, { key: 'a21eb3b08441eb4e9607c1c648c2587195d84eea', tabindex: this.disabled ? undefined : 0, class: {
                 "has-value": !!(this.start || this.end),
                 "has-text": !!(this.startHasText || this.endHasText),
                 "floating-label": this.alwaysShowGuide,
-            } }, index.h("span", { key: '6b437ff28f57d1d1b05c4eab623049da04e832c1', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, index.h("slot", { key: '851347be682c3ad66ee50cd19c23400480e965d9', name: "start" }), index.h("label", { key: 'd1f56495def7fa8d0e660a31c72f2fc1f2dbe3c1', class: "label float-on-focus" }, index.h("slot", { key: 'aa51a2cda2ce43c86d66dbdc639d2d4ae54257d4' })), this.placeholder && index.h("span", { key: '498b526a9c63f09268b7f97f713567d5a6df2e4c', class: "smoothly-date-range-placeholder" }, this.placeholder), index.h("smoothly-date-text", { key: 'c7b65a2da2f0c776a34005806dd6de9c38659a12', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
+            } }, index.h("span", { key: '07816f2a676822e3f3bc1e72a5fe735ff598927b', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, index.h("slot", { key: '8477be4a3ca2b5af8c6735f2ddde2b36d6f48bf2', name: "start" }), index.h("label", { key: '773c7414fc909c2eba62ff688654786b6d7d0398', class: "label float-on-focus" }, index.h("slot", { key: '4ba16fb5d7467fff476f8de3384245d9fb24bca7' })), this.placeholder && index.h("span", { key: '15f8638cedd9fe16810980f662abb19bdb9d7aef', class: "smoothly-date-range-placeholder" }, this.placeholder), index.h("smoothly-date-text", { key: 'b5af15d843991f7b56d9bd1c2ab274e9fbf3e023', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
                 var _a, _b;
                 return (e.stopPropagation(),
                     this.end ? ((_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)) : (_b = this.endTextElement) === null || _b === void 0 ? void 0 : _b.select());
-            }, value: this.start, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, showLabel: this.showLabel }), index.h("span", { key: '9593f0d126d440702c9efc0da3b352cfadcf09f1', class: "smoothly-date-range-separator" }, " \u2013 "), index.h("smoothly-date-text", { key: '1733cff158b875724d4a91fe2ea0464b622d5249', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, showLabel: this.showLabel })), index.h("span", { key: 'df099c01787f943a79acadb205b912807f505ad5', class: "icons" }, index.h("slot", { key: '4cb5e98aca0b599b40ab757d4046697e491c7a3a', name: "end" })), this.open && (index.h("smoothly-calendar", { key: 'c2f9feffcfd6c5e30f3cb25dcfa948dad43996c3', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => (e.stopPropagation(), (this.start = e.detail)), onSmoothlyEndChange: e => (e.stopPropagation(), (this.end = e.detail)), onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
+            }, value: this.start, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, showLabel: this.showLabel }), index.h("span", { key: 'f7227cfad45f28852efcedcae0e7d5b69c01af5d', class: "smoothly-date-range-separator" }, " \u2013 "), index.h("smoothly-date-text", { key: '6dfde63b34f116ec6f5c4ed5938dae3d76b5c276', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, showLabel: this.showLabel })), index.h("span", { key: '150ff2ee50bd018e1a329a9a2e5345f8a62a8e59', class: "icons" }, index.h("slot", { key: '37810249e44f6e0b048ccc00a18b77ddb84ac38c', name: "end" })), this.open && (index.h("smoothly-calendar", { key: '92e39805f60c598a22adac199b20e44c816f3ed8', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => (e.stopPropagation(), (this.start = e.detail)), onSmoothlyEndChange: e => (e.stopPropagation(), (this.end = e.detail)), onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
                 e.stopPropagation();
                 this.open = false;
                 this.smoothlyInput.emit({ [this.name]: e.detail });
@@ -10390,32 +10390,32 @@ const SmoothlyInputDateTime = class {
         this.isDifferentFromInitial = false;
     }
     render() {
-        return (index.h(index.Host, { key: '20cca74a5f7b842c4a81c346962b9126b512fcbd' }, index.h("smoothly-input", { key: '22254227cc107e6f687ab21760c90b2bbfea7117', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+        return (index.h(index.Host, { key: '4a9bc8cb5a9617237b63cff35930d693dbf11d1f' }, index.h("smoothly-input", { key: '7ab42b7d0fb7389703a42b460939ce8cee8698fb', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail.date;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }, index.h("slot", { key: '7a967a66cd11ea181d5b75732d6741a3ffc26d1c' })), index.h("smoothly-input", { key: '45b4cf3587d6f023b01b4b2ef6278d13f3bedd25', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }, index.h("slot", { key: '8fc841cb3735e2b4e2e13fc974dde4d4271e0627' })), index.h("smoothly-input", { key: '012223abf5a9cf71b378da011cc5dcee5b75be8e', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), index.h("span", { key: '730850163aa49108e8d1ea30d17fc7f05ed5d528', class: "colon" }, ":"), index.h("smoothly-input", { key: '51cd09d070f12f69a82f4cb3a0498adf70fde945', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }), index.h("span", { key: '79c8a593aea2d4bead18363b41264d3ce1205bd8', class: "colon" }, ":"), index.h("smoothly-input", { key: '8b76dea985a9fc687279a50a6e8c3307a2465907', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), index.h("span", { key: '8646c8c60b462b73c2d674d1cb03158d0641efbd', class: "icons" }, index.h("smoothly-icon", { key: '2ca24c9ea688c2fecea90345cf4e233686a861ce', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: 'dba6c59c40479ebbb0bb2394f32f3e036c4d68a1', name: "end" })), this.open && !this.readonly && (index.h("smoothly-calendar", { key: '22d336c4b2b729e6cb953a9f14f3daed1c527cc0', doubleInput: false, value: this.value ? TimeZone.DateTime.getDate(this.value) : undefined, min: this.min ? TimeZone.DateTime.getDate(this.min) : undefined, max: this.max ? TimeZone.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: async (e) => {
+            } }), index.h("span", { key: '4bb9c14d94c8e2e9e9dbacd01eff9d69023a732a', class: "icons" }, index.h("smoothly-icon", { key: '8be49066019b25edd9d8c98e453b91fe55ba862c', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: 'a6dce3592939a8444cd81b5f8733e24db3c1119d', name: "end" })), this.open && !this.readonly && (index.h("smoothly-calendar", { key: '7bcb0a7a972bfed570c9d0c09ed1c52686817cb7', doubleInput: false, value: this.value ? TimeZone.DateTime.getDate(this.value) : undefined, min: this.min ? TimeZone.DateTime.getDate(this.min) : undefined, max: this.max ? TimeZone.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
             }, onSmoothlyDateSet: e => {
                 e.stopPropagation();
                 this.open = false;
-            } }, index.h("div", { key: '945627db444d642b3fb86d637b8906d58d226964', slot: "year-label" }, index.h("slot", { key: '283f0264fde879cd28969b5fc8838c5e8ad9b6fd', name: "year-label" })), index.h("div", { key: '7f66dd61017329c0bd8ca9d1f2ed5bc25a162200', slot: "month-label" }, index.h("slot", { key: '880483f50d94a2dd7570881e1dd4b7840349597e', name: "month-label" }))))));
+            } }, index.h("div", { key: '9f30ea81ad21226069a927fb5826002e978c28c2', slot: "year-label" }, index.h("slot", { key: 'd59c4081c59e07ec1cda4338997b8962f247078a', name: "year-label" })), index.h("div", { key: 'acbe1fa8ad6b9e4d9d02e3b8b9300871c46e329a', slot: "month-label" }, index.h("slot", { key: '11cfb34bdc37a3c76eb37050a27dfd4821681587', name: "month-label" }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10442,14 +10442,14 @@ const SmoothlyInputDemo = class {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (index.h(index.Host, { key: '02c6c030b29696d4b878e39211f11d2034213802' }, index.h("smoothly-input-demo-standard", { key: '29da7f4660380a019baa5700b40e1707e07e8fe8' }), index.h("smoothly-input-date-demo", { key: '698515282f4743cd6bd9cff5aeec2e006f3df8b1' }), index.h("smoothly-input-demo-user-input", { key: '0108177648399fee1e5eeeb2191434157b9a0cff' }), index.h("div", { key: 'efff19f824a0bb0c4ddde67ce1e706bca13fc648', class: "inputs" }, index.h("h2", { key: '2a481228b1590a7cbe05cb5b04ee3d8eb5cb91cb' }, "Calendar"), index.h("smoothly-input-date", { key: '9a06d7c17b8f5662ae99efcef8ab6a74c5ac7f80', name: "some-date" }, "Calendar"), index.h("smoothly-input-date-time", { key: '2e09d9e8b336fe6fd04343bd1ba1d5585b1d0a23', name: "someDateTime", value: TimeZone.DateTime.now() }, "DateTime"), index.h("h2", { key: '7754e1dd6f71106c5ac79e720a3270238237cb79' }, "Date Range"), index.h("smoothly-input-date-range", { key: 'f90833ff2e3ea89da4f67b66896e689de76089a0', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: '4afcb3d73ffce5a5da07e82378440d610b2f529b', 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: '065721a5981a760cf620cf5df3916a3eecdf9937', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: 'dcb097ef6151b478e9293d7eb7e86e694cfc51ce', 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: '7f574c5c82806c7ee00a06c793b883984cf6a317' }, index.h("smoothly-input-demo-standard", { key: '7776c856dfbc7795c37b12f4e1ccff9a58a53f02' }), index.h("smoothly-input-date-demo", { key: '8695fac1f681495d23a203f0c1e658369a5208e5' }), index.h("smoothly-input-demo-user-input", { key: 'a6b2084ab3bb40d10b12807cbfa18ec4aa8c80a5' }), index.h("div", { key: '50487efa2c862624ce4738c461878b38efcbb8f9', class: "inputs" }, index.h("h2", { key: '48456a442136dcf27f068d619a4648f21231d4df' }, "Calendar"), index.h("smoothly-input-date", { key: '4ea9c301b995bd9ba221deec879a46c4fca68b5b', name: "some-date" }, "Calendar"), index.h("smoothly-input-date-time", { key: '0e87054e90eba9ac97cdcd48cdc2094deb765efb', name: "someDateTime", value: TimeZone.DateTime.now() }, "DateTime"), index.h("h2", { key: 'c7967bf8213f8e987ee1350ac4b86bbddd4794bf' }, "Date Range"), index.h("smoothly-input-date-range", { key: 'c5aee42f2de2c7da2b95e724e4e545e5459f7ca6', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: '1371f956391aa79369174d3bfc22bdb5ee5cf996', 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: 'd1b12734f006eaf59d8543c0578539f67245e0f7', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '23306a5a8f414e14691e9fa39c9282dfc6ae3d1d', 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",
-            } }, index.h("smoothly-input-clear", { key: 'f72e6e921dd9f810d77b03a3330e3ed8d543b641', slot: "end", size: "icon" })), index.h("h2", { key: 'fa40ddfc2df454b63bb3deb5d4105012b9caead3' }, "Date"), index.h("smoothly-input-date", { key: '7470a11b7227dd819efb0776c80f69efa6a56f78' }, "Date"), index.h("smoothly-input-date", { key: 'de5bf36036f1b5da0908951a5f3a5103e1189bd6', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: 'a7a3830618338f53633c1d3eea1b4157d7b3e631', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'b7474fabaa8b810c612a561c71fea0eb876231be', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: 'aad99e3c91e392df6667e93ce3269d8e3b87f9da', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: 'dd325f345b914a63c2a5a56410a25eff4c0dcc4b', slot: "end", size: "icon" })), index.h("h2", { key: '6b28f64444f72c2b0b234cfdb89bc2d1ae90c6f9' }, "Select"), index.h("div", { key: '702430373d5cd8450e1f4fd0a608e737f7ecac93', class: "select-div" }, index.h("smoothly-input-select", { key: 'bd6095e851876898339c04e896aa9eb49be90617', name: "select-dessert", looks: "border" }, index.h("label", { key: 'd9a8be4a7d6f6c432e69a689e50cf62607967bfa', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: 'bbb612f77f99bfde4986cd0bb6d46001b9a35772', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '7a6ef3c94ddfa90652af33bc4871854f635ae556', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '1c8748a79b8c2f5444fc53701f7e22a770f74776', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '22ec8cb9b17f1192e7cdbf9e08fc9ac86f2f3d5d', value: "4" }, "Cookie"), index.h("smoothly-item", { key: 'daed2bce2b2457e475c359650a5bf8096c4f599a', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '763b4346bf1e747ebe880546484b2fdccb6383fd', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '839a9ee179e0db3dee1d95d134eb183eec71eca3', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '131bc8ffbe9c34f99fc21e4b703ba91894729b97', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: 'bcba7645c326f1dbaf6b839fa4508f3ee3a4dfb3', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: 'ab2fc409901be2b2a54f0945d035c0cc2a0d7072', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: 'a1091217a339702ad2bc8578c7c8bbe3dbc25426', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '234986625866de7cc2c2d6c885826b03aa21a14a', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '6f09156594358ed5d95aa51640f2ef7faf0c2c36', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: 'd6a95079f82a453c42ef2f658edf5a1dd59c8e7f', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '892dd14754d61835a00db07f294a836212a45f43', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '5c13e14b644ef338475691c6b9c0fcb47be8a2d1', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '2eea8582c81d3cd42e2b7f69a5f7c147abc3f237', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: 'ffea457bf3b910c990d0a9e8b3f158f318690609', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '41b5c5e809c2173e796f8ad833f07a25513ca26c', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '4d9979185834b91ae99994c16502d4ae77b1e6a2', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'b9d79a685d0cc41a3e7204528b528cfda9f80b5d', value: "folder", selected: true }, index.h("smoothly-icon", { key: '90a40fac1c5b4b3b031073afa5c77050948e96d1', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'd59af441742413b7aaf6cf3acbc4bdea384ece7f', value: "camera" }, index.h("smoothly-icon", { key: 'fb5549f6e4aa9e8c1bbc8a3cb8455eb0355cf572', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'ed38409e4c605efa406cf0ebcdcf1ead28744c28', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'bde56117f37632fb62914601dbc064cdd679a2ee', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, index.h("smoothly-input-clear", { key: '1774cefd3304bfa5c283a10cc44d85f6fe1eacc2', slot: "end", size: "icon" })), index.h("h2", { key: '7dc7b7271a81cd121f10fa61e28e88eaa037af3e' }, "Date"), index.h("smoothly-input-date", { key: '17b588159bde4dfbf0146ac942fa235d8d998688' }, "Date"), index.h("smoothly-input-date", { key: 'b9445869f64033bac130b0b0dca501752610af95', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: 'f34cd3598997c242ddb6b76698f7f821a601674e', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'a46fc2210b837bebdc3cc7a27b07067e0a679476', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: 'a3811bb817fbdf3d28474494b8a7dffd71fac67a', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '0499c2a7c5434ed716ad1ef87c2786609d94e97e', slot: "end", size: "icon" })), index.h("h2", { key: '683a2678f46ad1989cc4dd2edef990430beb547c' }, "Select"), index.h("div", { key: '682acef1f140100dd2e985b6899b89e4914e771e', class: "select-div" }, index.h("smoothly-input-select", { key: '2e38d749bf959df4d3ced73e8e9d59b8e3d38a4e', name: "select-dessert", looks: "border" }, index.h("label", { key: '01432777fc4d5bbdde9c83e24015513b6c14016f', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '0f53eaac56e52386945622443068d6769f57b382', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '4ad0fee8dade01fd46c1c97397bebb9183385562', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '67fb0107c5cd4294725f6a8399f5c93d589ee717', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '422b942a8306f00eb5cff7ef79d81ecf57033291', value: "4" }, "Cookie"), index.h("smoothly-item", { key: 'c77baa484e234d42d66c0e2a436f5ecdd7510b33', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '36f84fdd871d2b8b7b89df7da54d07883c052282', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '1b6ab234c1c7c58bb065165373947f922ba466b4', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'cc2452592ab8c6b99b9630f9e464128c4a464350', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '9172fbe566574d3a6376d69dec7a5d6b50834633', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '75f90ab0248783d98e5fabdbcca908da69b1af21', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '91adf3c9485a41aed6a5acb6edad6a76c91e13b3', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '3dc66017de31e85c8d9ea8a5127a1cb2b7760071', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '733bd688bde445381df687fd17fb0d8a0ed8bf3b', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '1425d34d36caa1cb8bc15307110b4c5dfda7c2d1', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '5ac44d62a99fa114f404edc847b645305f4ea42d', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '79fb109059a58e0f50f525f4437639c621b83b06', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '33400cbca7257a35b9c931e046c51c18e50c9b55', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '0b394b9204545e7fe0ea938127c6cb625eaa919e', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '8643b17c6b78739ce7c41737fd7ee764f4933c0d', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '1c6f7c00f1c21a3be1a8390a28306a5720982eae', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'b07f756a35e549b77e50be75f3a5e2fafc2b3099', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'c50555d5282480fd507d55311bbfe0723dd03d53', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '6fa0811cc61e90332301cefcb2688ff27e31019a', value: "camera" }, index.h("smoothly-icon", { key: 'ab64f6988bb978556353d6d0097617d526ac304c', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: '7a844e5cf695497cc30429d3e0bfb51cf30017ce', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '3b319069eb3dd5c5c7270acf6e16b5a3b7655dbf', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: '92ab8563a04b4d080f55b679b665e01bb06bc55e', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '61038bc0e13696bfaa42547d061de2312ac015de', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '6040f20bba3e43562235a959cd96d5a18683ee6e', value: "1" }, "January"), index.h("smoothly-item", { key: '3ebad72e31b988cfb18bf2472b45fd7ddbe7ee49', value: "2" }, "February"), index.h("smoothly-item", { key: '874cf630f55510b329ab3842c3f27f96538d28db', value: "3" }, "March"), index.h("smoothly-item", { key: '8b7158079c40c878291c07bd4845878c593445d4', value: "4" }, "April"), index.h("smoothly-item", { key: '172269ef02d682562dd436e9e90ce1fca1d3e5a8', value: "5" }, "May"), index.h("smoothly-item", { key: '2134db55c89b4ff9b1981bc40677e333eb8e637c', value: "6" }, "June"), index.h("smoothly-item", { key: '114291c42f06079b9a653e2e151145538617a093', value: "7" }, "July"), index.h("smoothly-item", { key: '08728c04025a05f13216570caf0149750330196f', value: "8" }, "August"), index.h("smoothly-item", { key: 'ff810501892f1eb13b084bbaf8042f7895273803', value: "9" }, "September"), index.h("smoothly-item", { key: 'a77c8da9ae3849264205eb4f60a3c239b116967a', value: "10" }, "October"), index.h("smoothly-item", { key: '8438d819d6147802d17fa7d44ab9ad7e5730e230', value: "11" }, "November"), index.h("smoothly-item", { key: '735e62cc28212ea7b551d2feddd0f28856fd256b', value: "12" }, "December")), index.h("div", { key: 'c46100f9ad1e6b6df3c0cea3c3b0fa3386e7c259', class: "select-div-row" }, index.h("smoothly-input-select", { key: '99f2060a4878c75997e4d79d8fe0e66f7ca93ac0', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '5490827cc8f1b7517c6aff700cfd1f49a896d5d9', value: "folder", selected: true }, index.h("smoothly-icon", { key: '2e84be47fdf412e3ec6f99d436b98041021183b2', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '47a082f6a100a310a36b5e3115843ab1b36a7c12', value: "camera" }, index.h("smoothly-icon", { key: '6c7e7403ef5f04639148f800eeeac0ab408cfba9', size: "small", name: "camera-outline" })), index.h("smoothly-item", { key: '428f3905bcc0b96fda19ff19a2ccd6c3bf78ed71', value: "boat" }, index.h("smoothly-icon", { key: 'db219dd94443390148d7021c31be0c326610483f', size: "small", name: "boat-outline" }))), index.h("smoothly-input-select", { key: 'f942b05e792114611d9e346a1a194029fa661860', name: "select-number", clearable: false }, this.numbers.map(number => (index.h("smoothly-item", { value: "number", selected: number === 3 }, number)))), index.h("smoothly-input", { key: '602eabf78df4fd33011244d4af1d873609d58cd6', name: "name", value: "Sten Qvist" }, "Name"))), index.h("h2", { key: '04635283edae69ec3425f0dc0278f83c17c4f6d7' }, "Duration"), index.h("smoothly-input", { key: 'c743ba931a63e30e4edb94371fd743f7a578a052', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index.h("smoothly-input", { key: '603abfbc13a98c8460324adb96c8c2ac83204f6a', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: '24aa969e8e2608189b3c443e09ef3fa98c9feedd', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '9c9c9e0d707a6f96fcba1b686873a9010be75a7d', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '0b6387482d71923df9e0b9d717d3ba88d8c98bd1', value: "1" }, "January"), index.h("smoothly-item", { key: '0947d179f35c567b557bda9dad655a8e25f6dd25', value: "2" }, "February"), index.h("smoothly-item", { key: '38daf41ad88e97e0852f296df2e5489948fce0f8', value: "3" }, "March"), index.h("smoothly-item", { key: '9ff729a187a5df043428043439a5f09ecc7260a4', value: "4" }, "April"), index.h("smoothly-item", { key: '71719ee81658c4897712459e3165accde7765bb8', value: "5" }, "May"), index.h("smoothly-item", { key: '7e917da27127b438a7de7d3c8e0aa3dce4eb2d72', value: "6" }, "June"), index.h("smoothly-item", { key: 'b70be51c019bf2f8dcf3e9e06168ac024b0a1c0b', value: "7" }, "July"), index.h("smoothly-item", { key: '32b97c0167a10cee962e417018b829723671ad50', value: "8" }, "August"), index.h("smoothly-item", { key: 'd54ca3fbb8cc3e1d68f9f68b9dbd4d432473e920', value: "9" }, "September"), index.h("smoothly-item", { key: 'd2209e23a9b8db4ea2281421dc108b177e1c04a7', value: "10" }, "October"), index.h("smoothly-item", { key: '73621556ac499b85857df738fc3bf1850cd4f964', value: "11" }, "November"), index.h("smoothly-item", { key: 'c6793237c76e6a26e374198ba2bdcdf9e8643251', value: "12" }, "December")), index.h("div", { key: '099d5c7456bc5836d7f0f2a840eb70ae81237f5a', class: "select-div-row" }, index.h("smoothly-input-select", { key: '804cf7f085aef7513ef3b76057af284dabab699c', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '830e7259b185f6f5e4df5f31545063549c2a69b2', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'abe9cdf7e8096b1b317bb6c62a9b274271479391', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '01607bfabfaa6df288dfd242c90e41af8e4fe5b2', value: "camera" }, index.h("smoothly-icon", { key: '71481f1e468a8e3dde815421f18ec6ee94ed7384', size: "small", name: "camera-outline" })), index.h("smoothly-item", { key: 'a059b96cdc6c6d7df8ca5185b81d53680c635b22', value: "boat" }, index.h("smoothly-icon", { key: 'ebe1246148aa4df73a62461f885e4b846e502836', size: "small", name: "boat-outline" }))), index.h("smoothly-input-select", { key: '3eed3dc23316f18ab61b20a17ef3a602b8ebe7f2', name: "select-number", clearable: false }, this.numbers.map(number => (index.h("smoothly-item", { value: "number", selected: number === 3 }, number)))), index.h("smoothly-input", { key: 'bcfcc36500f746e17649c9ad9a553b88dc0823dc', name: "name", value: "Sten Qvist" }, "Name"))), index.h("h2", { key: '041402c92d6c43264d811dccc9b8ab6004a42792' }, "Duration"), index.h("smoothly-input", { key: '451397df5c93c9bc71b5a13aa5a3d40e6e7dd42f', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index.h("smoothly-input", { key: '6fb8b8e8ea5b94a5fbdcca74b3852b75ef477a7c', 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: '92267d9df3323d81f958a3661f792ea7b77d45fb' }, "Integer with Min/Max"), index.h("smoothly-input", { key: '5ea4490bf6f0a3404cf66b53079ce2ed91e17c04', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index.h("smoothly-input", { key: '465ac753815e89812704ae20999487204e2f7613', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index.h("smoothly-input", { key: 'd196b5c765509af843ee11d4d8827478a4ec333a', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index.h("smoothly-input", { key: '0afdd4d6d6ea407c77df2e76eb240e1b84c2f994', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index.h("h2", { key: 'ca4e42874c06aa11b86fa57b01a83b8ec736dbd8' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '06263a3ef601bfe3554afe1576e31e304eca5bd4', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index.h("h2", { key: 'f78387790cd60d813e699c42f3c76e99cf67424e' }, "Identifiers"), index.h("smoothly-input", { key: 'ed74deca29700c595ba1d970028b7c68f415bab2', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: 'd94a1250cdf3003bb09555e842189d8d7124e56d', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: 'f03ca6c6c7df6c5d6cff5ca5c66430bafaabbf28', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'c63d11d8801a0be51cf2c340ff9b998dfbb5a50d', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '51b3067f7480eba8d1b0f091da9d42d5a2a1d112', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '7d088cae8df3265fb1992dbbfd1b67eba7f56c1c' }, "Input Alternatives"), index.h("smoothly-input", { key: '261bf5ec719c209aac0016e13febf6007e0d2706', type: "text", name: "name.last" }, index.h("smoothly-icon", { key: '45bb04919bfa7cbb737e8262bde5931e43ea8242', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: 'baf8310bac3c88fa3370b6c4aa9ab1bf639d0099', type: "text", name: "name.first" }, "Last Name", index.h("smoothly-icon", { key: 'e8e9385c2075615a5aaad9063004a17670d7f3ab', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'b71e3fa40e20f1f40ca67b0a02276f6fb7fec4fe', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", index.h("smoothly-icon", { key: '1d8ae1d64d7263fefb262af56a1d2d9f41ae20ab', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'ea8d25a462fac141c2254e79de7e8e62a6859481', placeholder: "test" }), index.h("smoothly-input-submit", { key: '12525826fc264c23d2deee1f4ba753a4f18145a3', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '4eb4065eaad99c77903c914b142d05377c70110c' }, "Smoothly checkboxes"), index.h("div", { key: '22647fc32687dc8eafcfce67d506cae3dc51249e', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '911d189331db34adc1bb20eb815b88320be42f80', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '01d12c789b84ad7ff1b336e5d9c054e10a10460f', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: 'f867c216b32c38546739cc4e5c06756f55a73e06', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '142a5c59c513e2f2870523109836e7f17169fb37', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '8f97e98320fb816be2c65d9f09218ed6bbd3729a', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '0e9d7dc8140115d8368315e3afe3afc43f1ce0e4', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'cf2d56bf8c06e4f0dc86ac5f67fb3b108be85894' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: 'f3cae4429251b4143676fd5e82423089044925ee', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: 'e6269c274ba4df9d969805a24a6603e1abbdc4de', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '14ab72946555ae79a8ae9e15b10c6ade0389646b', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '8f3c256eaffc0be2e902d6a9f974c983cf06a526', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '954e15aceca60b35f14d77c7aaff0bbcf74453d4', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '7c87b80b07bfb283de74745c0feecbdad6b87f35', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'bcf41b0e6febf1a9743c6c01672ba1cfd255f32b', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'fe7b03a20caa1f4bd6b8b4c4069d6e52ca7b2cb0', name: "radioSecondInput" }, index.h("label", { key: '323e2230853060a74df0e151a14a54a374cf083d', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '650bbcb2a6f51a683a7e25e05690fc27ed3d3146', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'b52ae0942474c8cd6471719834003a0ada7ab191', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '562740307d8443ffa6d88c2836f33b3377ff2443', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '03a55fef4f354124bd0d5214cdb93b8dc03a5095', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '7a96f3551583ee25df49da43b022d955693291cc', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '2e1ce0f952f4440074d9193965e0d9d22b22e01e', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '2b1bfd9c8de92822aea69fa58afac73ba84bba83' }), index.h("smoothly-input-color-demo", { key: 'f4df068345e11d93b28af08ecdce6823c4dd0f35' }), index.h("smoothly-input-price-demo", { key: '155ec24d88c7d4876a5cfbfc75b0a1be428ee41c' }), index.h("smoothly-back-to-top", { key: '149dc7137192dbe355a5cf1ed3dd22966db3b303' }))));
+            } }, "Duration"), index.h("h2", { key: 'a47dea26355bddf40255f0a88f72381b15b6fd39' }, "Integer with Min/Max"), index.h("smoothly-input", { key: '5708f669787dcfbe8fc18cd20ce1f43903331b3f', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index.h("smoothly-input", { key: 'ba607eca48fd5d5c54da40c56f58f88b429a11c9', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index.h("smoothly-input", { key: '3899120a4588724eb5486c713e6b3592f9490106', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index.h("smoothly-input", { key: 'a83a35c1ddabdfe8338e5daa270642cd9a00cd7a', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index.h("h2", { key: '69838545fe489b84e54394656f3fec9993214768' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '2579f64feccd3ac373562867d7fc6c3a2fdc75b4', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index.h("h2", { key: 'd55229c36af45dbeab240431c674fd1fee27b49c' }, "Identifiers"), index.h("smoothly-input", { key: 'd7abf3ed7f1d633e0ba5abe6673a6e634a896738', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '8d600bc128529a9a6091fa18f0bea9bed1a74d7a', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '85a4a2f01be2b3fd39014833fd495958866838da', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '035f5f628c25f3d0398c9e8dc10390e5dacc0024', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '673f91b6cae1ba8b04b496e20e58d1a4d1c92965', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '85a4af61aca5745d0125fb8305a8f640c0b5cdf1' }, "Input Alternatives"), index.h("smoothly-input", { key: 'e4b05f18bb44d4c7b9fdcef83551d9f8c591274b', type: "text", name: "name.last" }, index.h("smoothly-icon", { key: '2bdcd29f5ae945c37f5a7bb6e5587759bc567351', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '7b17f499a2061624e34fe89fb81d6cfbed54ccd6', type: "text", name: "name.first" }, "Last Name", index.h("smoothly-icon", { key: '58041447b7edc6ee18d0f4752c7efaf6767ad2af', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '70d890653d67ad30256b754bdbe3ffd0a5699044', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", index.h("smoothly-icon", { key: 'a1836734b16b3cccdbc0af9b0d894ed478d45e0d', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '6c2a657437514116b1ae60210b289004b2e6a956', placeholder: "test" }), index.h("smoothly-input-submit", { key: '8e686ba1a74b8f9d85cc6778a314c793946d248e', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: 'a5b71808338b0ae5f06806bcd97142581a2a11f9' }, "Smoothly checkboxes"), index.h("div", { key: '309b348a380979cd64fdab4a66fd302a48b12b6f', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'efcc143919480eb5901b12800f01ea4847a2df14', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: 'a8835c00691583079ff65b59f750f59d470538c1', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: 'fefb3a5f492b1d39993ca89fc265b9312d0a75cb', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '916895ae8d167ad667109ea5a94ce72131e03cb6', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '26f2c7dccea2f4eb93fe8c82bd9291b2bc139c19', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '5c71f635dd09d730ba6048bbc4bdf3d40de58a05', name: "third-checkbox" }, "3rd")), index.h("h4", { key: '24380ae0e1f791eef55523ae58f818286b1414cf' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '376572dae3e2bb0dce2a68fe3503277a0681079b', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '149759fd8c4d501ad96744e01701142face0d6c2', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '2032d793fc1c94de9cb856c06c64d0b03e6f77cd', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '50ccd0ae9fb6dfab3a27b574f7bee10ec96089e8', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '2f52388467ff677b40de490648d2c07cc3ee3b30', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'b2dee0bfdd05ccfff9995011e5cef0663241a214', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '3d990b0e3d8e629f00970acf2c8d1e30a79e4966', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '9f56ea2525dd6bc4a6a889b170f49b79542dd590', name: "radioSecondInput" }, index.h("label", { key: 'dac6544a61c1f064360e5dd2b5520f63e2cc3938', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'c4b32f24642b851f6b8da9c65df85df4294c598e', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'ca04462b6e8866f76edd48dcaac734b90f0a9b75', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '6fa1b64cac9e953977a12687fa14a7218789f79c', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '4e32b3131c7becffb45d63a70926b8b0c2e1627f', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'a841d0bf0bdde25c84b224e9d77fab3e7db2898c', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: 'f5bf467213cdc73642fcfd2278ee8b963c1c1bc7', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '7c617d877ef45d0bd9a58066d3d185ae008f2eef' }), index.h("smoothly-input-color-demo", { key: 'ea9a64faece9ecf51e9d0f8e798f78d92e0590c3' }), index.h("smoothly-input-price-demo", { key: 'cc124983e4ca6aea3b925e2b229fcaac03565501' }), index.h("smoothly-back-to-top", { key: 'b01d5285d4fbf07edc5e955faa214f1fd40fd5d1' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -10477,7 +10477,7 @@ const SmoothlyInputDemoStandard = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '54cf2b88dfb0ae3326c332e0d608b5e2aab4e2af' }, index.h("div", { key: 'c549a1f2bf55faa1db79e85170fd5106269400d0', class: "description" }, index.h("h2", { key: '4cd8be6f457b84c4363c93262a0a8c57d6ad794a' }, "Input Standard"), index.h("p", { key: 'd704b09fb11c51a92fa618c106039ed01695ce58' }, "Height of input should be ", index.h("code", { key: 'abee88ddb4d762af1cde9a6f7c94ad13fd069152' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '0922d6713e44cffa51cc253e94fb1ae98a823f24', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '1cdba85a6cddb32a49a763394b8cdb7b36d2c24a', name: "color" }, index.h("span", { key: '58013cb8ab43cc7cc05f6ab58670ec5f41eab179', slot: "label" }, "Color"), Scrollable.Color.values.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '0eae109840ebc9b0101fb08f7daa61253826da9c', slot: "end" })), index.h("smoothly-input-select", { key: 'f48cf9bd8f86d1eb5e68e3383bf9178ea27b5f22', name: "looks" }, index.h("span", { key: 'd6f665f4cbc8e871229312e611180bc0bf9607d1', slot: "label" }, "Looks"), Looks.values.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-range", { key: '955d191d8da75e9dace4c57e6f6f3d427bdac864', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), index.h("smoothly-input-checkbox", { key: 'cbd64dab264df038bf40efa6c2d8733f6c767185', name: "readonly" }, "Readonly"), index.h("smoothly-input-checkbox", { key: 'e5a2a80fba021019871563ac7197360060ccb451', name: "disabled" }, "Disabled"), index.h("smoothly-input-checkbox", { key: 'f1bca93555a7cc9fa7a56a39e6bbdfc5b7570edc', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: '15361ba7d104e800e627aebc52d8fff1623782b9', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-checkbox", { key: '649cc21e6575e27e765e17443678f14ac73ba84f', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input", { key: '59125e661fdf79f98c9d5a0f8f2c97eeb52f2b52', name: "placeholder" }, "Placeholder"), index.h("smoothly-input-checkbox", { key: 'bc3803d7f0e97f5f8b7c863153aa0ce0d382e1de', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), index.h("div", { key: '44d87477325a59e8b62c1f7ce3a29cdc29705916', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '0adfeb398a2f6f969d206cb46eb4776808fd4fc9', class: "width" }, "width: 100%"), index.h("div", { key: '1e617acd8e12c75a00259062602a8ef8775651cf', class: "left-padding" }, "padding-left: 0.5rem"), index.h("smoothly-input", { key: '9521d2afdc06788925f96c2d0702fd3f00466359', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && index.h("span", { key: '75e835255286d02e1b8185902b4df7fc2b0a1147' }, "Text"), index.h("smoothly-input-clear", { key: 'ddd739321caa1aad97518efcde5068fef178b456', slot: "end" })), index.h("div", { key: 'a4ad7dae327fc4cf6fb5caa803f388f31d06ecff', class: "height" }), index.h("smoothly-input-select", { key: '989e3591abbfe261104fdc8e638e30593de4d487', name: "month", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && index.h("label", { key: '2b03942427cc79d149444a6d9761307c43a32935', slot: "label" }, "Select"), index.h("smoothly-item", { key: '049747edec7c1f5ba4a3176d554f78bb065da54b', value: "1" }, "January"), index.h("smoothly-item", { key: '1a348110d398cecbad0c0cb7f4c58add1e4a3ff7', value: "2" }, "February"), index.h("smoothly-item", { key: '3f44a3ca68b3efb9f69ece4dbb4aa5719d62689f', value: "3" }, "March"), index.h("smoothly-item", { key: '2e6a23f327a391073cd581a537c74b404e633f61', value: "4" }, "April"), index.h("smoothly-item", { key: '0ec3a67ceb43fee1b4aed5d6641b8773976f8253', value: "5" }, "May"), index.h("smoothly-item", { key: '8ad75702a0011c4dfa0b58eb0e701cfd5b1b6079', value: "6" }, "June"), index.h("smoothly-item", { key: '37d90fd9da7a68b02bb4cd7388c9dc3fd3fad571', value: "7" }, "July"), index.h("smoothly-item", { key: 'df48b6b98fd8f8a4c4404a29880e6564cb84e830', value: "8" }, "August"), index.h("smoothly-item", { key: '4f81a3c63d0becbab5a2e2c437ca11c2eab05dbe', value: "9" }, "September"), index.h("smoothly-item", { key: 'a2127aff910d9201fccd3b2aaf784e75bedbaafa', value: "10" }, "October"), index.h("smoothly-item", { key: '9ae028899cdb86c7171dcb5d4b7ca9c33e44796e', value: "11" }, "November"), index.h("smoothly-item", { key: 'f968c99dcf0fedb0a4eacbbe4081880148448577', value: "12" }, "December"), index.h("smoothly-input-clear", { key: 'b6eab95784294604bd6b50c6ff0771b905f6d55b', slot: "end" })), index.h("div", { key: 'a46ef7c12df7de0166907d872b421fe6d0ad061e', class: "height" }), index.h("smoothly-input-checkbox", { key: '03db7a557a36f903bbfa5c70168099321de9bfaa', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", index.h("smoothly-input-reset", { key: '8dd9be16c98100177e896fd587ae0cf5b78402ba', slot: "end" })), index.h("div", { key: 'd7a333388176160dcc641e3921f65a37d0f931b8', class: "height" }), index.h("smoothly-input-radio", { key: '3228c33a9f797f7e883fa89ce0f348c04833aa95', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: 'a2a4723025bb8fc6bdc656e036d7ce9a39eda82e', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '12221f4f2af214a53b30baa49cc767c30a595f4d', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '2b94d51be413b315b04bda5a15d94ba0a32d9110', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'f248d8c813e26760d7b9423ca91291a0ec1f9ef6', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '2b6cdfc609ef9e391e9d77db584adda5d041532a', slot: "end" })), index.h("div", { key: '006c1a1f17297b57ebd653727ef2ddfff3447b97', class: "height" }), index.h("smoothly-input-file", { key: '538ecb6a31bf36bdd0b1d09f93cb674c8aa0c02c', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && index.h("span", { key: 'e3fc537c5ac5ec5147085921239f7d01ff7d73e4', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: 'dafa754b67cf94c4cdfbb4d1ffd1bedd970cad3a', slot: "end" })), index.h("div", { key: '467ea157fd9e4b51622bee191b8299702f7fbbaf', class: "height" }), index.h("smoothly-input-range", { key: '2d0aea78c861a096b1f52140df75bd7a489f48da', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, index.h("smoothly-input-clear", { key: 'da071ac8f3749c37764e52a75f885a4558035630', slot: "end" })), index.h("div", { key: '599eba7c67eedc7c48238bb25266e544ebf51462', class: "height" }), index.h("smoothly-input-color", { key: 'e190a9d822eb04394a0bdd61c814d4d830a07b1b', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '4574ccb78b8cdb7c369c0e0ba6484793e7723a71' }, "Color"), index.h("smoothly-input-clear", { key: 'd135ececb5676cae9815d93324af41d22135e031', slot: "end" })), index.h("div", { key: '1fad04af82ecb775a216e54522cb615ebf99e55d', class: "height" }), index.h("smoothly-input-date", { key: 'e401fcd75ebc7344db4efbd293668694f7c67f2f', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && index.h("span", { key: '55a177807e873b60ba1fe106e11e4ca3d8806675' }, "Date"), index.h("smoothly-input-clear", { key: '255c515c381089461a199a8917b4cdd0f9bed0a2', slot: "end" })), index.h("div", { key: '0bb95de33a1a9416f9f980b58ee085988e7cf5c2', class: "height" }), index.h("smoothly-input-date-time", { key: 'c5d51c371c58f20e28b6ef21cd4ec59b942ea51d', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", index.h("smoothly-input-clear", { key: '723d6be1a2df58e787e1e6b3b994aa57856eb950', slot: "end" })), index.h("div", { key: 'f3caa12fed8a58c86d82f88e8184d8f33ddc3936', class: "height" }), index.h("smoothly-input-date-range", { key: '2f7b4f5aea8229344de58eacdb192021ab01aa88', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'd34bf0d664e007e0e3209c3461364b4c0477ab1d' }, "Date Range"), index.h("smoothly-input-clear", { key: '2f8c2648ccde1e9839161cee087661e503e11275', slot: "end" })), index.h("div", { key: '5d56a40d324dcec60ee958ce52cea4c733b00b81', class: "height" }))));
+        return (index.h(index.Host, { key: '0d47a2dd423a8bcdd889139f74ef2ec375d0ea97' }, index.h("div", { key: 'a884b4c59f663f8c47aa9e3736e6a82235e9d276', class: "description" }, index.h("h2", { key: '7c0b8da3728fd79d203de1895c6ae146e1eb8aef' }, "Input Standard"), index.h("p", { key: '10fe94edd162dd158388508c2470359447e6da57' }, "Height of input should be ", index.h("code", { key: 'dffd62a251af68595f7c5659a2251ada08999b63' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '3f8c09fbdce4b808a430cf7266d40d25a596803d', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '563356600a698bf3c974a61b79520aa8f77c249f', name: "color" }, index.h("span", { key: 'e12af511b6921b2d9f7d50b45fdbe3d5b34f6817', slot: "label" }, "Color"), Scrollable.Color.values.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '23c642ae01bb6d0f7aaf653c027eb255ee38d90a', slot: "end" })), index.h("smoothly-input-select", { key: 'fa106dd22e247954860c217692ca37a24fe4f772', name: "looks" }, index.h("span", { key: 'c42065aac1f357b670cf2a99bb8be554fb314cd9', slot: "label" }, "Looks"), Looks.values.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-range", { key: 'c3b585f898718c9f81ef15c1469eccf08988c00e', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), index.h("smoothly-input-checkbox", { key: '8fab112575cb1c02c2019022cee83e5e5e65a9c6', name: "readonly" }, "Readonly"), index.h("smoothly-input-checkbox", { key: 'c34401c8b28faa79a139869c0766e8f8af357ca8', name: "disabled" }, "Disabled"), index.h("smoothly-input-checkbox", { key: '672b5bc96fa9e6886c90b5e8354d7dea8c916270', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: 'c395fd3b7ca8d1243cd9e9ea4e006f1fd7ef1a27', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-checkbox", { key: '121d1a50813987b2aeac50afe73e40c6a7c4fb8b', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input", { key: '265ce4b0e44c8fda1b3188929eb5901e1658bfd5', name: "placeholder" }, "Placeholder"), index.h("smoothly-input-checkbox", { key: '1eafaaaa6696f9f1d696742869d10aba19c2f0c9', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), index.h("div", { key: 'f6a5d34435c177c5dc64c31632dc7a1e65f3e270', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: 'c4d82ee52f0d44015df7eb734c98aa41f7c92827', class: "width" }, "width: 100%"), index.h("div", { key: '2ae68895caf503ba92049a32d0054439f069123b', class: "left-padding" }, "padding-left: 0.5rem"), index.h("smoothly-input", { key: 'f5f4ee65ccf3180d2f9181fbc258c79e916e14ee', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && index.h("span", { key: 'bf32f13cfbfa88add92692bf9ee02b836eeea2be' }, "Text"), index.h("smoothly-input-clear", { key: '26639066ab906f755f7a42e154b1954f1f34f19d', slot: "end" })), index.h("div", { key: 'de01a46f39aa6f331c5edf54208a6f9f726337e3', class: "height" }), index.h("smoothly-input-select", { key: 'abb4be407f4b7ed51d5f796bdfce3b2b56c468a4', name: "month", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && index.h("label", { key: '49f71dbb091094f79927778d18a0a58e70689f42', slot: "label" }, "Select"), index.h("smoothly-item", { key: '4b0e9cb4ce233c50a42fe249a3aef5648dc62558', value: "1" }, "January"), index.h("smoothly-item", { key: '38380b0f13ddeb83e2e19e0ac645dcdbacf6c4df', value: "2" }, "February"), index.h("smoothly-item", { key: '4f65be9a949261542191e3b484ad646e17f04987', value: "3" }, "March"), index.h("smoothly-item", { key: 'b6e9be5fbe31a12865717daddcd1a4039c942205', value: "4" }, "April"), index.h("smoothly-item", { key: '6c867101a115315e30bcf525d3fde4a8e49a5719', value: "5" }, "May"), index.h("smoothly-item", { key: 'ba4792a24e862aed054b356a444f9b791add16b1', value: "6" }, "June"), index.h("smoothly-item", { key: '9cc3a21ed384c2e2415311770925458dc13ac8d1', value: "7" }, "July"), index.h("smoothly-item", { key: '53cf8809b4dbc8256448b5c08a9d07f274e365a3', value: "8" }, "August"), index.h("smoothly-item", { key: '47a43966214064dab4d321cf9116b5cd87409dd3', value: "9" }, "September"), index.h("smoothly-item", { key: 'c71ceab27a3f86a5c2a27dc251b18f119f5ac623', value: "10" }, "October"), index.h("smoothly-item", { key: '7e824138f3b0b28a414465d69bb71c4d6786c3b5', value: "11" }, "November"), index.h("smoothly-item", { key: 'e7813efea82efe4cd4a8bfa54a7a55b21f53fa48', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '7072ef8f9ac5b9a3028cbd2962560fc315f3d58b', slot: "end" })), index.h("div", { key: '3a1c4b4c2834bbb4921e330a77fe477c4741f181', class: "height" }), index.h("smoothly-input-checkbox", { key: '50499f2f1a4258a56caeb2266da17a9e881c7993', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", index.h("smoothly-input-reset", { key: '550d44f73f1ae07461d73f66febd5138867e8247', slot: "end" })), index.h("div", { key: 'acb1b0eaab732df76e2c586e8f56ee6c81fbdd87', class: "height" }), index.h("smoothly-input-radio", { key: 'ec7f8b66f806e63a09320e2ebfcda71be001cd3b', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: '00de1fcac1f811970b3f1154d6286dc7bd6036d8', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '35ea9212aa0f8eec4a96dedc406b428f58b848e6', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'db11c348c12a468a854c53c5f5f692ae7dcbaeb1', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '65707145740b173f4379c6bf5706a962a91bb021', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '883be5fef36a7e6fb16c57b30fcad312f1f25a6b', slot: "end" })), index.h("div", { key: '2cd8b1bb4ac90fd34732d2bfc34116bcc8429045', class: "height" }), index.h("smoothly-input-file", { key: '87739b41a33b7be135c5b3ed02648e702ac386ca', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && index.h("span", { key: '0d10524c66e0625ec86431a8c19dcedf83f47eac', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: 'a95f256a28cf294430040b6c6028921f0c620c8d', slot: "end" })), index.h("div", { key: '48650848e22a86ca8aa7501e09fbd8c5f0ce83ea', class: "height" }), index.h("smoothly-input-range", { key: 'b1e96735886d8e3e4b451ed17fa11ecada3e2302', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, index.h("smoothly-input-clear", { key: 'ab7f71a498ce9404aacc63f0273bd3b715ddf12c', slot: "end" })), index.h("div", { key: '0ff2870912f9ae2e2b41ba9d982c906124ef2641', class: "height" }), index.h("smoothly-input-color", { key: 'fa4d779da5bfaea1e9644e721d9f6c4249949407', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '63674017888873443dc7b744114dae7996e79c52' }, "Color"), index.h("smoothly-input-clear", { key: '6344ad242592e19365961e80cc0814023eaa7dc2', slot: "end" })), index.h("div", { key: '16e0b71b1b6b1ee68813e3827b96bffe5ec63ef7', class: "height" }), index.h("smoothly-input-date", { key: '8ed46719b1c1e9a9085bd5decb2f0b76fda17e08', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && index.h("span", { key: 'c268eeb0f99af102c6e1dc62b3d4a2ef01fb0982' }, "Date"), index.h("smoothly-input-clear", { key: '828d7b0e5719ee2c8e8ef5e431f19061dd1ade2b', slot: "end" })), index.h("div", { key: 'fe422ed5cc16bbb664f5dc190e59d05027b9ab6c', class: "height" }), index.h("smoothly-input-date-time", { key: 'f45a43382ca831e1755ef2d9ee3ff2529f52e092', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", index.h("smoothly-input-clear", { key: '000c95f6c81a9c8f84c88e258804c190de62a085', slot: "end" })), index.h("div", { key: 'e203612e082b43846696f0e8f25ba1633c8a40c0', class: "height" }), index.h("smoothly-input-date-range", { key: '0a813285a0bb45af8a02e66bd7f336218ba2bf3f', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '8c4b143da14013a4e7869cc09ac125fd978ba652' }, "Date Range"), index.h("smoothly-input-clear", { key: '71942a3eb11884fd20b5dd66f93bfebfaaaa917e', slot: "end" })), index.h("div", { key: '6ddfef156eb2dcbb511742abe5e03f0dec1e78fa', class: "height" }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10506,11 +10506,11 @@ const SmoothlyInputDemoUserInput = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '3835c578ea7d246169e793bf4aa2c7a51fa5363d' }, index.h("div", { key: '7b58c28df58685c05871b3b2e0ac1be312929ade' }, index.h("h2", { key: '51ad8ea9e3aac7d2b86c8fd174f3e9a48697c15e' }, "User Input Event"), index.h("p", { key: '47cea5b74881ab7616adfae6ebce65da42dbb313' }, "These inputs demonstrate how user input is handled. The ", index.h("code", { key: '2866d17687a295b23b453f5b1379e5e66bcbff41' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", index.h("br", { key: 'e16f064c937a6f9308630304c583ea341f832ad9' }), "Check the console to see the details of each ", index.h("code", { key: '78979ae82ed46d5a06a595e02df97ba33c89d2c0' }, "smoothlyUserInput"), " event.")), index.h("smoothly-button", { key: '138b41ca59399b09ff53e52b129ae97748ed387f', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), index.h("smoothly-input", { key: '7d09fa4861e311009ab12e3c60002de3301927ec', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), index.h("smoothly-button", { key: '0d502c95cb5db26bdce3ba41d15556da80d64433', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), index.h("smoothly-input-select", { key: '435dd06d5ce59811c106ca7c69b6dfa1be50c12a', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index.h("span", { key: '33a6bd3e72cf03ec750a14924a837b7e684a8773', slot: "label" }, "Select input"), this.values.map((value, index$1) => (index.h("smoothly-item", { value: index$1, selected: index$1 == this.selectIndex }, value)))), index.h("smoothly-button", { key: '21adcb09ac47b9478957c45905170a860c49e1a8', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), index.h("smoothly-input-checkbox", { key: '359e7c7c033b09f9245ebc6be57bd34219d78ecf', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), index.h("smoothly-button", { key: '51fa448a76d00d5f1998ad57f03d21a054e8113a', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), index.h("smoothly-input-radio", { key: 'b59321ca66af38b90a01d2eb3d0e17f18a904095', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index.h("span", { key: 'fc5fb9f656c6c6e999a552dced58d28a8acd1ef8', slot: "label" }, "Radio input"), this.values.map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, selected: index$1 == this.radioIndex }, value)))), index.h("smoothly-button", { key: 'b200be8a41c98d4f219a9f3530f3558fa971689c', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), index.h("smoothly-input-range", { key: 'dd284aa8c1ea6ad1cf4f0881250c105cb2a6ff0c', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), index.h("smoothly-button", { key: '20cc5a84fa556220aef39a2ae15ae412ea2fef0c', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), index.h("smoothly-input-color", { key: '7590af1c0425b6219743d81726e05164b970187c', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), index.h("smoothly-button", { key: '3b3cc2b584fc194bd1386a710cbbbbf50e2968fc', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? TimeZone.Date.next(this.dateValue) : TimeZone.Date.now()) }, "Next day"), index.h("smoothly-input-date", { key: 'f38b4dd2f3e9bbf56f998ba8ede15b3c47b8dfee', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), index.h("smoothly-button", { key: 'dc47c4b5003bfe3c2b9408d56a2b0646fa7d60b9', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (index.h(index.Host, { key: 'e5373df530143e9be043fef3040f0c28e4e6befd' }, index.h("div", { key: 'e43682af956adff7d7717bc0460eed3b1bb95d84' }, index.h("h2", { key: '4332098a4a62650fee3ff36df29bbab86ece7e9d' }, "User Input Event"), index.h("p", { key: 'b20f95a50866658227c61b92cd110ec481da9aea' }, "These inputs demonstrate how user input is handled. The ", index.h("code", { key: 'd7966a4bf162c151d82b4202e72cd090eaf54ea0' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", index.h("br", { key: 'c491689d80addd8399ee02ab7cfc6c14f599bb85' }), "Check the console to see the details of each ", index.h("code", { key: '919ebbf26937841a5396d0d8b1f7d56a268ac292' }, "smoothlyUserInput"), " event.")), index.h("smoothly-button", { key: '241df770721275520a479cac831b972062cf0fce', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), index.h("smoothly-input", { key: '1c8afb64233081bd049d91a0dd0e8071aad85856', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), index.h("smoothly-button", { key: '5fe334fb6629980fec2ee42d22df173f86b9bec2', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), index.h("smoothly-input-select", { key: '0972c18426ec3adf17de6b187c582d875de17c75', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index.h("span", { key: '0e6d5f9596b71bae1f548aaf3cc830e9327dda05', slot: "label" }, "Select input"), this.values.map((value, index$1) => (index.h("smoothly-item", { value: index$1, selected: index$1 == this.selectIndex }, value)))), index.h("smoothly-button", { key: '66f5d072734363f0457f38252105272c643354ce', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), index.h("smoothly-input-checkbox", { key: '37bb578799dfb2de20c6ed9c26214acc5a4b3c0b', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), index.h("smoothly-button", { key: 'a70017b8ad95581ec4361d96350f809942b61d93', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), index.h("smoothly-input-radio", { key: '07558d4cbc286b03af94f0cc93718f35a93a73f6', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index.h("span", { key: '1e6fa16c98dbf64e75d4527a5619a37d30631801', slot: "label" }, "Radio input"), this.values.map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, selected: index$1 == this.radioIndex }, value)))), index.h("smoothly-button", { key: 'd3d7581a7c25ce7a7add6cc0f318bb738fbfcf56', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), index.h("smoothly-input-range", { key: 'cf1ad804353d6cecc2a92f1c919f0814ddc90293', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), index.h("smoothly-button", { key: 'ac4215b8764d794d7b2b502e8978eeb066bb482b', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), index.h("smoothly-input-color", { key: 'b0f18cbf601c7a7e1b105b6ade6b7738e735c1af', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), index.h("smoothly-button", { key: '353846f23973a62890ca228fce9434606c351eab', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? TimeZone.Date.next(this.dateValue) : TimeZone.Date.now()) }, "Next day"), index.h("smoothly-input-date", { key: 'e4e466950e474177dfd57b95741256ece59aeba7', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), index.h("smoothly-button", { key: 'e39a9742e3c896ed0b8083b0cb12694971c2f7b3', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? TimeZone.DateTime.nextDay(this.datetimeValue)
-                : TimeZone.DateTime.now()) }, "Next date time"), index.h("smoothly-input-date-time", { key: '564c412728fabb0a62c8344fb4f8f833805eda2a', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), index.h("smoothly-button", { key: '4028e3bc5a9625b4c0d302c1e856f618bf59fb22', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : TimeZone.DateTime.now()) }, "Next date time"), index.h("smoothly-input-date-time", { key: '91d54581db356cfcfc093286eb125502398315bd', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), index.h("smoothly-button", { key: '1bfc78adefad21783c035335cf764bdb92c537e4', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: TimeZone.Date.next(this.dateRangeValue.start), end: TimeZone.Date.next(this.dateRangeValue.end) }
-                : { start: TimeZone.Date.now(), end: TimeZone.Date.next(TimeZone.Date.now(), 10) }) }, "Next date range"), index.h("smoothly-input-date-range", { key: '6416081389e857c3c18d2fad0dc11159a2aa93a6', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
+                : { start: TimeZone.Date.now(), end: TimeZone.Date.next(TimeZone.Date.now(), 10) }) }, "Next date range"), index.h("smoothly-input-date-range", { key: '78f36ca1d6a278db6d7bd4644689331be84c488a', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
 };
 SmoothlyInputDemoUserInput.style = SmoothlyInputDemoUserInputStyle0;
@@ -10548,7 +10548,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '5a29f86218e6badfd620668a6c506fd9a028710d', title: this.tooltip }, index.h("smoothly-button", { key: '3fd484afcf17e8fd985b38fbc0b04c4520e584c5', 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: 'b3c2a52b3b1548816d6c6ff935cf0aa61acbfa64' }), index.h("smoothly-icon", { key: '3858475de79ce842dd4c1e5b7007281d7af36d5d', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '9413c465eefd77797e42c791530e44dff3846f28', title: this.tooltip }, index.h("smoothly-button", { key: '6671fd2c91156be7d9a584e1a99f5b8b4f32eb1e', 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: 'acaa5562e2b97fb0bf0f774fda77efdb33ba66cc' }), index.h("smoothly-icon", { key: '8defa183091cea2766970860a93f9005085e7325', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
@@ -10672,7 +10672,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '3a3f69cf2876610f6acd7bacdd14cd24804cf5c9', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: 'c3ef33087517af42aaf4471046ef0105dcaa2426' }, index.h("slot", { key: '548b22599ef8930d02cad1a9162dd767a02a68ca', name: "label" })), index.h("div", { key: 'd5841532fd15a4b9a11d8e5cd7a9cb9080f388b4', class: "input" }, index.h("smoothly-button", { key: '31556ec9557a41d9b9c692c532155f1ee86123d7', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: 'd2e4a1a56c1f054cc2e48a9d7a5d1d7a4ae5a9cb', name: "button" })), index.h("span", { key: 'cb719f2b9213ef0c5640f96f3c1f0d443eb89719' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: 'd02a31cf7177f06cf57b39b24c7bc40827dd3409', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '4198d37735c31576ba0239b98da15726a984ff54', name: "document-attach-outline" })), index.h("input", { key: '9b15653076d028787daeb1290b5eead52af03687', onFocus: () => console.log("focus file input!"), ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("span", { key: '685d2848ca6c3b439902b7596e5845c6d16bd604', onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '018adc649cf0f333292d913076b7d65ad731b91b', name: "end" }))));
+        return (index.h(index.Host, { key: '8f0c65d2c9ed0950c1c5115f615f6d66e1242165', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: 'c03b59a35dbef07d3f0c4e0d58aecdd963fb499c' }, index.h("slot", { key: '75a815e3f443bb3e6c8e0aa81c30b68f9cddc9ce', name: "label" })), index.h("div", { key: '2e7c8f558cd1d344b1659ef2fde701dd612f3b53', class: "input" }, index.h("smoothly-button", { key: '8382da9351a2d57dfa17ff0a399066b1f645c5d8', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '6e8366cbb446f9f5be138978711f7172f18d0005', name: "button" })), index.h("span", { key: '8b64bdf48fb8f8cf552e1d000c18e3e415826056' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '26d26451e82bdb71ac7be890f308363dddd8a73e', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: 'da2cb7bc7b9e481dd0edf6730adc4a9d26409167', name: "document-attach-outline" })), index.h("input", { key: 'd19b4581fb2070dc0baa3ae6c9da9d3a5ca288d5', onFocus: () => console.log("focus file input!"), ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("span", { key: '8f4442060ca91b9d3ce769f71999031b9858aaaf', onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '7fb47acfd5d5c4ae68b309d5302564cf757100a6', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10797,21 +10797,21 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '4fc40a85069ddfa1ca23993226e22a11db4d3f46' }, index.h("smoothly-icon", { key: 'f54f3fc35f1c189bcbc4ba9b6857c660a4bc7308', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index.h(index.Host, { key: 'a19d91c6e7a3418e4cc6645072227e24660a1055' }, index.h("smoothly-icon", { key: 'f49eef91fe444f2b2c46602239ffb720b463498a', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '7c0cc354c885f373dddcb0ea823dbd609cb8f621', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '63b194505c76cb794711fd50d6129c9037388687', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const month = e.detail.value;
                 if (month && TimeZone.Date.is(month)) {
                     const value = TimeZone.Date.firstOfMonth(month);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, index.h("div", { key: '18d024c05244885cd36defb0256485c4afd40f3a', slot: "label" }, index.h("slot", { key: 'fa08a0ac39b925826add9a0c4028223670b61e5d', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: '6869eda4afccdb1671692987363dbb2ad831ffc6', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, searchDisabled: true }, index.h("div", { key: 'cb2f05a587d6dd8a54e0e9ef4e9b8d2da2956613', slot: "label" }, index.h("slot", { key: '25e30084d491b00bc0963c5d5675419f2a88ee02', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: '46bd63861b1facb4dfd7fd2dd0f4e7ade2a1535e', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const year = e.detail.value;
                 if (year && TimeZone.Date.is(year)) {
                     const value = TimeZone.Date.firstOfMonth(year);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, index.h("div", { key: 'b8555f33b92a8a5a009e5ecb0cf0b5413f25a77a', slot: "label" }, index.h("slot", { key: 'c6fad9c97642a7e9177e7741d38d068e9a42883c', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: 'fc75bc0ec4f8a81de333c798381dab56c0dd3364', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
+            }, searchDisabled: true }, index.h("div", { key: '7c9c95e399522fcadc86a7d56565ed24f83bd1dd', slot: "label" }, index.h("slot", { key: '8332af277b6a5c3e16a92487fa886dac4ba594dd', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: 'cd668eac7633d2d767387599488fe6bb7326b8f0', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10833,7 +10833,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index.h(index.Host, { key: 'a47389fd0ff13ee8fb8d2e39832c85f9288d969d' }, index.h("h2", { key: 'ab865c73074ffb94eba263defc3ddcdeba8cd869' }, "State demo on smoothly-input"), index.h("p", { key: '318a30c15b5877b1b253661c6d559f89778cd500' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: 'ca7f3414b047ef2e5fba32203633cec984df1b10' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: 'e5bd9afb7c00a14030ad6784294c4d85731d34a4', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'd457e8d00b53622bff4729bf8a98255747756f0f', type: "price", currency: this.currency }, "price")));
+        return (index.h(index.Host, { key: '671d9e1e09c36db8094dfe6f1ab4dd682b28fe73' }, index.h("h2", { key: '85a013c5fe711cc2a9dc759707a4e3880530377a' }, "State demo on smoothly-input"), index.h("p", { key: '57296c7eb9eacc94aee6802d6808181af5d4190a' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: 'b41379a50dd8e97d98a5eebc38694e04d192414c' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: '3fc4076c53a6a0571f5375974d8b7e9b2bfb4414', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '390be92c6e43aeaa2d5072b43539041ea794d51b', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = SmoothlyInputPriceDemoStyle0;
@@ -10992,7 +10992,7 @@ const SmoothlyInputRadioItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'b5de7dc5c9710d739dfadcd5f03d20faf58f310c', onClick: () => this.inputHandler(true) }, index.h("input", { key: 'c32833c2cdac9120f20b7d72f7b310c1868acccb', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), index.h("smoothly-icon", { key: '1ef73b5656e70b22ef7574a640ac270e0454878f', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), index.h("label", { key: '9b811789fae7dd9c9950e94dcc0e927689695b53' }, index.h("slot", { key: 'b357bab0d57368f5e0b00e963a92f6d853ad85ae' }))));
+        return (index.h(index.Host, { key: 'df843e11d9c3363b27ceb3e4930e353072a8c537', onClick: () => this.inputHandler(true) }, index.h("input", { key: 'a38159efa771785ca314bdbce6569bcc05503089', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), index.h("smoothly-icon", { key: 'f3c5afda5328b233102ec346d05ba260dfe6cca3', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), index.h("label", { key: '80c90ca1625f26ec43f7e4fcdb3da585ee0e463e' }, index.h("slot", { key: 'af191ac240791505df6eb37658920f3564b71a42' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -11101,18 +11101,18 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'b31050b31fd4f712272805dae978e77dda5a8528', class: {
+        return (index.h(index.Host, { key: '51d0d50c2260a8efef459a490a6d40576edf8904', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: '2959023c0b95b4ab2cb633771ce4510eedd60a79', name: "start" }), index.h("div", { key: '638e4505ef502cbc66fc1b0e175400241a04e272' }, index.h("label", { key: 'c58f717dd6fe082f8d7a7efef1452ecf0394bc26', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '06605be3ace57d773b718d239b846a82bfaec860', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, index.h("slot", { key: 'b8115e4e8c82c45c95983a6ca05ac4910547d509', name: "start" }), index.h("div", { key: '21ac65ef6af325989f1586a4109f28b02c4d9414' }, index.h("label", { key: 'a8730e6a0478abdd2a81a2153ed1863f389f632d', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: 'cce8eef1cb3fe30cafec2fccdcde4bb992b163ef', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), index.h("smoothly-display", { key: '0720c9af64e4df7ae97125697d4c5c5d0c7bcbe4', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '27cdf67aed2b00925b5223fd697ce25b597ea380', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), index.h("smoothly-display", { key: '6ab9f7b99bf40826eb17eb300cd8be062defa4d3', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '690aa75a19a26cf290c1290988357edab5097ab3', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
                 this.smoothlyUserInput.emit({ name: this.name, value: this.value });
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '02605605242299e85758bcfcd3d2db9cdeeaf212', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '983c2dbe78fd7179d977ecfffe346dc6999e6026', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'f1541e975526a02100826dc3f817c64626b2750d', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '06897088ceab10a99692b4fe2d06e5d227dd44f8', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -11129,7 +11129,7 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'fd572625434e3a3a511d2fdc4e39a11734eee8fb' }, index.h("h2", { key: '0bf7d54f8cf11e3e870d6c1152fdad2665baf305' }, "Range"), index.h("h3", { key: '37f05494fea8a36a05684fb0ad0aede0d27630aa' }, "Phone Number"), index.h("smoothly-input-range", { key: '68d94bdeb4db077a49a011c4849e99a1b33db40b', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: 'd1b81f1dae6424d685997bd8dfe02a10832a1b2a' }, "Stars out of ten"), index.h("smoothly-input-range", { key: 'dca3283520395117ed946a844bb46f7fc52c0212', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '8670432a44d93f9f7dbc315c1f0a51d9aa79100a' }, "Percent"), index.h("smoothly-input-range", { key: '78863ada16280bb963e15f1682aa8131667a1bd3', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '1b4a9ba5d75f92f1f90dc46a4710a35edd2fe2e9' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '95c8798a86fc50de7ad65b67f837a71e2743c2ae', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: 'f44529bf690bcf4ceff1dfa1520d2cf92a456f2f', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '27ef758b1ba28f93ae5a19cc14fb1bdbf1415c70', size: "icon", slot: "end" }))));
+        return (index.h(index.Host, { key: 'fe8877ae479bd8b4e8a530dbcdd2f8cac31170b2' }, index.h("h2", { key: 'd39ba6d14b8740a8d18fd3e62c51964a0079dfdd' }, "Range"), index.h("h3", { key: '1cde1d9dbda26b591f092ff6c1215a78c85668e3' }, "Phone Number"), index.h("smoothly-input-range", { key: '0df83246ce1c17510de342817b3e8371a405fd5f', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '5aeaf74220d18db5d292b43316b862bb30e596fa' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '9cf4138304c1bddf4f368c145129b85ac3c9fc98', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: 'ec9ace4a4ca1da8e781839d7a7dc5808b4185c5a' }, "Percent"), index.h("smoothly-input-range", { key: '02512fb3b2a215c4ffe0cde5fbf79defe6bc431f', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: 'ff48ee90a6f0876d954fa97e55c100fdce94406f' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: 'f48778410e5ee8104c032220124a602bc3e84c7e', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: 'f08ec1e3e9621a87029901e2958a0d4221ab3e15', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '4b7382dc9c566fd1f94c080901e1949610fcb40e', size: "icon", slot: "end" }))));
     }
 };
@@ -11176,7 +11176,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '03402f774cc1077ac04978b7a24610570f4200a6', title: this.tooltip }, index.h("smoothly-button", { key: '09ec36dfc4da0b052ed61f6a23e667aa9d6c2ad1', 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), onClick: event => this.clickHandler(event) }, index.h("slot", { key: 'baa523935f7234b05f9736f1172bfc6dd19a6956' }), index.h("smoothly-icon", { key: 'f6f2074febef0cc601f3a31b0c3244cc83631123', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '00ce2610388bdfe4a860afc1eec4c91360ed0baa', title: this.tooltip }, index.h("smoothly-button", { key: 'f65ac219effa216faa6aeb8e8ef472b7656ce745', 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), onClick: event => this.clickHandler(event) }, index.h("slot", { key: '5432ebbc44053abcfa66d760436a8218f413f58f' }), index.h("smoothly-icon", { key: '098d71829c81316bcdaf71a072c37d8334a505c4', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -11493,14 +11493,14 @@ const SmoothlyInputSelect = class {
         this.addedItems = this.addedItems.concat(index.h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (index.h(index.Host, { key: 'ac498bdf04638e40e3779ecb304669ccb0d47868', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: 'd518d262ab3ef8a490b0bd35e16f7284e71b8f76', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '4cee745bd10e9901dff8d24a24ae400b301de617', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: '58083043240aaf3fd1bb0141242bf8b75802a4b9', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: '7e80a83f68a488ddbc722aa0c68ed390df08db66', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '8e8b0491f96c66334519fc4207e9cf5b00bb02c3', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: '487f686909a8d3967a3c58994448ee6009be9cb3', name: "label" }), index.h("div", { key: 'a9296c2fdee5c8adf44e06e9f47db8493f0ad709', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '9a90d6b828880e1a372a66a41f733e3f1248179e', class: "search-preview" }, index.h("smoothly-icon", { key: 'b2fa1b974878f5ee7cdc9816b32f679c1bcf6e0e', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '5186a555d2eca3b001d32441cdeca33da5ab80dd', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: '8865b3b7aa61d4f9836d8d56fe536ce60d3f1c14', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '5910b41ec6b8ccb26bb75c082344faa46ad035c1', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '11d384a9ce8ddeffefb96b9a6995dd7420f193c8', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: 'a27b8162d4f3e2a8a481d08408826ce252eeaa30', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: 'cf8416a6003d9adcafd84ba20df0a4e2bcc851d6', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '92f7e28e4c455ff4bcd141a26cfcd60f9fcaec60', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: '1c41066d1be6798ec0d6416301f8efd65a75dd00', name: "label" }), index.h("div", { key: '044cf7d7c0ee0d73b0d111e658eebec5c0c730df', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: 'c76062a280d2cfa5f0c5c6ea37f1ddffa6dcf0eb', class: "search-preview" }, index.h("smoothly-icon", { key: '1fcea707496416899b363e633fbdaf5967ed0333', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '0c608ee8231d08806686b024f1cdf7ef52543bc5', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '1a66e7c38f3a2971f8d5e79582fff254a7433c2b', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: 'd91911a2705e1c4977b103c363770333f01f950e', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: 'ab895b5b4c28ccb58e2f3f681f05136880b5e76d' }), this.addedItems)));
+            } })))), index.h("slot", { key: '4b3fe308c5e4c9f4ed937ef1f7437ba64f6411a1' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -11555,7 +11555,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '6fcde64d8fac3ea0fdbebd60e7b7d196941ec96e', title: this.tooltip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (index.h(index.Host, { key: 'f7f8d66cc479ee4cd0f92bc148dec2c0cb2d48f7', title: this.tooltip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
 };
 SmoothlyInputSubmit.style = SmoothlyInputSubmitStyle0;
@@ -11603,7 +11603,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (index.h(index.Host, { key: '4188755b69d79db97fefef5ea5e4084292d009bb', tabIndex: -1 }, index.h("slot", { key: 'c67d65abca921e3842607bd01b650021a1a7b604' })));
+        return (index.h(index.Host, { key: 'e20234d30e92293239fab80b17123a82aaf7a4df', tabIndex: -1 }, index.h("slot", { key: '4087bb39941fd908d388a64a6036e3c50ead3a9c' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -11624,9 +11624,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'e67a58e84705ae28942529742aa1a714159fc062', title: this.description, style: {
+        return (index.h(index.Host, { key: 'de59874afe507061a1c3ede6954e5e4431fa7c68', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index.h("slot", { key: '2d435672985edec44f928fcadf0deeedc11140d1' })));
+            } }, index.h("slot", { key: 'fcb5def4232e85094c4504191a20fdde03b4cdb8' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
@@ -11645,7 +11645,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index.h(index.Host, { key: '275e974fcb898e9afceb69bb7a2b418a469c88b0' }, index.h("slot", { key: '34c8d3b64ed72bbc5d6a25b1764a1aa8a4c36505', name: "before" }), index.h("smoothly-load-more", { key: 'a245a699efcf82fdf1650e6cacb30350e00846e5', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '5a872fca780ab00424abc1e2c603eb82bdac53fe' })));
+        return (index.h(index.Host, { key: '9f9a3ad03a3cffa605de2e0a311c71ff0501cc74' }, index.h("slot", { key: '0e222b762686df3a561c17e45966654e6bdaa711', name: "before" }), index.h("smoothly-load-more", { key: 'b655698abb3cb1dc76e941d8c7b2b627221dcb85', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: 'dd06292abea01a005890a0c168a5152f6737ceb1' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -11689,7 +11689,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: 'f0417450a6fba968831403c14a200ff442e24e29' });
+        return index.h(index.Host, { key: '5200709c13719dcdfa30a25d921fa27e38750fcd' });
     }
     get element() { return index.getElement(this); }
 };
@@ -11715,9 +11715,9 @@ const SmoothlyModal = class {
         this.open = true;
     }
     render() {
-        return (index.h(index.Host, { key: 'd60b2f59db43c0bb19dfb37f70be50a4a8d885b7', role: "alertdialog", onClick: (e) => {
+        return (index.h(index.Host, { key: '8fa3a1a8abe74467813cad81e8822982d40eccdf', role: "alertdialog", onClick: (e) => {
                 this.closable && !e.composedPath().some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("modal"); }) && this.closeModal();
-            } }, index.h("div", { key: 'b64dc6178f8b03be86de7fb601ceb10cbf3ee76f', class: "modal" }, index.h("div", { key: 'e3b34f4c9d32149a866cbfea48d5240c29122f06', class: "header" }, index.h("slot", { key: 'f411126367f737d33a1cc3831c754602e42e8c1a', name: "header" }), this.closable && index.h("smoothly-icon", { key: 'f99a425a51724c213df02b8dcd2fde79fbcd7a3d', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), index.h("slot", { key: 'cbe267ddddedbedad722a133c1155f85757dc27e' }), index.h("div", { key: '965fb217eb19c4608e4a62984d2c7bddcc0a6bae', class: "actions" }, index.h("slot", { key: 'c600331b7c0b7f758693aff657eb61f7968581ca', name: "actions" })))));
+            } }, index.h("div", { key: 'e3cb0cb62a91cc16a4c115861e393504c1c8476f', class: "modal" }, index.h("div", { key: '6473ae0b383fa946ade76b878bcb1ee146c340d2', class: "header" }, index.h("slot", { key: 'b2370ebebfc0b3b9dd67437c955ee7e1576deafd', name: "header" }), this.closable && index.h("smoothly-icon", { key: '561a9331a431ee605bc3e0e52765017206c7a43d', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), index.h("slot", { key: 'ef0da1a3d54c242df32342c1d1a09f74cd2581be' }), index.h("div", { key: 'f937cbaea5e2bdd15f9aa0aa8f6fadacd0a93766', class: "actions" }, index.h("slot", { key: 'e23325708937e00b7138c30371d1474409fb70cb', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -11780,7 +11780,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index.h(index.Host, { key: '41e55119865515de80be226f9dc66fb74936e572', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '798cdebb8f5cafd0f96a5af8dcc296ded7857bb1', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'ff1013462d5c0453b9cb7da8fd0cd6b27724d9f5', name: "close-circle-outline" }))), index.h("span", { key: '553e16e9640ade50af5a5aad367187c538c65bb8', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '5008a063ca0a1c2d4f811ddcd6746bb198be466b', name: this.properties[1] }), index.h("p", { key: 'cb550c4a6e15ce531e9f3004bafd568c81e9a2ea' }, this.notice.message))));
+        return (index.h(index.Host, { key: '874ce3aaa62fd7424e2c6629e13111b14649c7db', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '57057c09df734c4d359fd9952314032373c93828', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'ae2a94d9120759f44e0a0549e23b17d19fbf30a6', name: "close-circle-outline" }))), index.h("span", { key: 'c7a626eed0dc03b93f30ef5b7e0f22abad133b93', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: 'aa195f76644db7643cc4b31191cc2f0f27c24c49', name: this.properties[1] }), index.h("p", { key: '176a35c914559bde761a2e055353c2162e92a7e1' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -11804,7 +11804,7 @@ const Notifier = class {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (index.h(index.Host, { key: '947a66b45ecbe2eff543a9eaea4f2a0661198409' }, index.h("slot", { key: '26759ca00d3511ed72cc9812fb1a033beeb7546d' }), index.h("div", { key: '1ece3e1044aebacffa2ecbd4914bbcbe306b5ace', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (index.h(index.Host, { key: '377473bb85fda49bf6654709bc583c8122a8a5fc' }, index.h("slot", { key: '0039c64ec570faa5702882cc273bd5bd778b0c0e' }), index.h("div", { key: '133205707821a6b56218eae7b1b135985301665a', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
 };
 Notifier.style = SmoothlyNotifierStyle0;
@@ -11820,44 +11820,30 @@ const SmoothlySpinner = class {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (index.h(index.Host, { key: '614c1ae29b2f9ce5175cd522ffc660bf69b188a6', style: {
+        return (index.h(index.Host, { key: '81b3ddac04d63c10cef57db98b33d20d3c486d1d', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index.h("svg", { key: '2945cf7b84919de7918710f2eca638547f5d5a10', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '7bd59fd923b2bfc070d25b86fe6301e24872cac0', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, index.h("svg", { key: 'a56a9b915feb8212b71cab991aaea00eeef858fa', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '80b73ff22092fd16f75fa632c45441585ae7bad5', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = SmoothlySpinnerStyle0;
-const styleCss$u = ".sc-smoothly-summary-h{display:grid;grid-template-columns:auto 1fr;column-gap:0.3rem}.sc-smoothly-summary-h>details.sc-smoothly-summary{display:contents}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary{display:grid;grid-template-columns:subgrid;grid-column:1/-1;list-style:none;align-items:center;cursor:pointer}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:transform 0.2s, opacity 0.1s;opacity:0.3}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary:hover>smoothly-icon.sc-smoothly-summary{opacity:1}.sc-smoothly-summary-h>details[open].sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transform:rotate(90deg)}.sc-smoothly-summary-h>details.sc-smoothly-summary-s>[slot=content]{grid-column:2}@media (prefers-reduced-motion){.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:none}}@supports selector(details::details-content){.sc-smoothly-summary-h>details.sc-smoothly-summary::details-content{grid-column:2}}";
+const styleCss$u = ".sc-smoothly-summary-h{display:block}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary{display:flex;column-gap:0.25rem;width:fit-content;list-style:none;align-items:center;cursor:pointer}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:transform 0.2s, opacity 0.1s;opacity:0.3}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary:hover>smoothly-icon.sc-smoothly-summary{opacity:1}.sc-smoothly-summary-h>details[open].sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transform:rotate(90deg)}.sc-smoothly-summary-h>details.sc-smoothly-summary-s>[slot=content]{margin-left:var(--smoothly-summary-content-indent, 1.5rem)}@media (prefers-reduced-motion){.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:none}}";
 const SmoothlySummaryStyle0 = styleCss$u;
 const SmoothlySummary = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.smoothlySummaryOpen = index.createEvent(this, "smoothlySummaryOpen", 7);
-        this.inputs = {};
         this.open = false;
-        this.color = undefined;
-        this.fill = "solid";
-        this.size = "tiny";
     }
     async toggleHandler(event) {
         if (event.target instanceof HTMLDetailsElement) {
             this.open = event.target.open;
             this.smoothlySummaryOpen.emit(this.open);
-            this.open
-                ? await Promise.all(Object.values(this.inputs).map(input => input.register()))
-                : await Promise.all(Object.values(this.inputs).map(input => input.unregister()));
-        }
-    }
-    onInputLoad(event) {
-        if (Input.Element.is(event.target)) {
-            this.inputs[event.target.name] = event.target;
-            if (!this.open)
-                event.stopPropagation();
         }
     }
     render() {
-        return (index.h("details", { key: '40f09aeaa6e3b90b356cba5f53daa4bb38e5124a', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'd52f0aa7dceb24781946ff814902cc4ce5b4b52f' }, index.h("smoothly-icon", { key: 'e9892e536e9071a143f3df5edb99a9a9376a5c12', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '1bb9d6af68bf727e1241e323e169e19e91df46da', name: "summary" })), index.h("slot", { key: 'bac353c55c413a2270d1aeddaa503c379a2b6d17', name: "content" })));
+        return (index.h("details", { key: 'bbeeca90e53734b3e3fd868962beee5f692c65f9', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'e859d2917705c7f6e0b850de7d8efa9f2b88212a' }, index.h("smoothly-icon", { key: 'f432d3670a80d5df6384555195736d29468bdce9', name: "caret-forward", fill: "solid", size: "tiny" }), index.h("slot", { key: '21344a4ffa7f4154d07a0c584b0550b7c395afd3', name: "summary" })), index.h("slot", { key: '5b2c189f3cb88911ede221584e4824d6e336d82d', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
@@ -11906,7 +11892,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8400192f707ec143d2f431821610701a355879c8' }, index.h("div", { key: 'b04506b0d92a46498a6504f8873556b2259fdc48', onClick: () => !this.disabled && (this.open = true) }, index.h("label", { key: '579c632363e28762c00bc8f8b1459dd00fdfb24e', "data-smoothly-tooltip": this.tooltip }, this.label)), index.h("div", { key: '903dda25db56e7b25429c3d3151d561da6234fde', hidden: !this.open }, index.h("slot", { key: '02b6b8dbb3bb29c8f2f67f5aa3fc7e60d129ea9d' }))));
+        return (index.h(index.Host, { key: '2a9419f70ed2126516bc5ee55affbc8965ac2783' }, index.h("div", { key: '13fd8f7013833d85c6300848205feee915f97822', onClick: () => !this.disabled && (this.open = true) }, index.h("label", { key: 'ec233d8c479867447482aa97dfef805a21143dd9', "data-smoothly-tooltip": this.tooltip }, this.label)), index.h("div", { key: 'daabe3447f10b0231793cda1b7e1dc4c6ff0b298', hidden: !this.open }, index.h("slot", { key: '53f98e491dde3a333c4c4b0d9955762d8440145d' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -11930,7 +11916,7 @@ const SmoothlyTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: 'edafaf40a5da5f99500f3c6ae1f384fd4e20c1f4', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: 'e5a4a08b58d0ac9278dee5ad98d3caf1a2ae5291' })));
+        return (index.h(index.Host, { key: '2d475aad72fcaf31aed36d99f2684a5012e5dd06', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: 'ed1188366aa69849604369b1d0286541027a13a1' })));
     }
 };
 SmoothlyTable.style = SmoothlyTableStyle0;
@@ -11943,7 +11929,7 @@ const SmoothlyTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '8eabe0e1a24f6eda7d635d2e6eb903a8b8ee85e9' }, index.h("slot", { key: 'b9016cbb26f33dc42dd61db142761c2a96aecf6d' })));
+        return (index.h(index.Host, { key: '4ca1a1cc8e285f8a87b5b8dd385b414de8599968' }, index.h("slot", { key: 'f998de1a4a3998a9d6f8391618098b839702d4de' })));
     }
 };
 SmoothlyTableBody.style = SmoothlyTableBodyStyle0;
@@ -11958,7 +11944,7 @@ const SmoothlyTableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'eaf5a785f0713700e7b0689b597f4c2fa63732cf', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '72ae252d5dac84bdb20894ea0f08ac0192bc08f1' })));
+        return (index.h(index.Host, { key: '608d5b165eeb45ada644442d3adf5c0817f08f72', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: 'b274f770e741e3fca953b6012963042ebd78f055' })));
     }
 };
 SmoothlyTableCell.style = SmoothlyTableCellStyle0;
@@ -11971,7 +11957,7 @@ const SmoothlyTableDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '53bf59001a307d00846b722b68e839aeba8793a1' }, index.h("smoothly-table-demo-filler-row", { key: 'c97fa282642972cb3cb30e069287f4ff4c6c2687' }), index.h("smoothly-table-demo-group", { key: '785df8f002ae863a8e0d5d3a488a47ef398e19ee' }), index.h("smoothly-table-demo-colspan", { key: 'e54e41262b40e88bf97d5c195253470510e444bc' }), index.h("smoothly-table-demo-simple", { key: '2778946313acf688b5987b92afff90252c9900e5' }), index.h("smoothly-table-demo-nested-no-cell", { key: '1863eb3ba7c91e41b499ddd6f4e2fd63c4772b98' }), index.h("smoothly-table-demo-filtered", { key: 'a7bc8e5454fc0297539f2a5b2d0c0a6903b7cabf' })));
+        return (index.h(index.Host, { key: 'efe7db65edfcc29401a4b6144451a594e6aa6b51' }, index.h("smoothly-table-demo-filler-row", { key: 'b5d3ed513629fa9004ccdbe2d0b4fa5a846c9c1c' }), index.h("smoothly-table-demo-group", { key: '59e9996230870d75df4225bb1e8fca8054ae4bfd' }), index.h("smoothly-table-demo-colspan", { key: '76350cc4b70f56b5efd23e03f418aa7255ec0881' }), index.h("smoothly-table-demo-simple", { key: '7a713c248f8710a291c397dd40f60d3a8a753ece' }), index.h("smoothly-table-demo-nested-no-cell", { key: '3c82254151124465fe4a2f0b72c84f32e00505c2' }), index.h("smoothly-table-demo-filtered", { key: '20656c59c35345217d823184d9678a6a87f40ade' })));
     }
 };
 SmoothlyTableDemo.style = SmoothlyTableDemoStyle0;
@@ -11984,7 +11970,7 @@ const SmoothlyTableDemoColspan = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '591888818b4300109779447443c6e5aab1b14da8' }, index.h("smoothly-table", { key: 'c938d62de711c1ccf5f4688757b3513df44e8af8', columns: 3 }, index.h("smoothly-table-head", { key: '479a91f092d7ab61f5e023187b3962cbcfa752ea' }, index.h("smoothly-table-row", { key: '09acaf59f4ab8afc3af9931911547c6c9160e96c' }, index.h("smoothly-table-cell", { key: '7d8343c2153cc0dad70a3b93f713297911b6a999' }, "Date"), index.h("smoothly-table-cell", { key: 'e383250690b45d63ca6932488089448063a00b59' }, "Skip"), index.h("smoothly-table-cell", { key: '9249209f1c691bf8b599c19a7c69241b4c375bfc' }, "Total"))), index.h("smoothly-table-body", { key: '08ae40864961b80b1522166a429f53962f0248c5' }, index.h("smoothly-table-row", { key: 'ea7dd286a24979f8d193c215fcf97728a165fa16' }, index.h("smoothly-table-cell", { key: '441dee1ea77f41f61fc110987a62e404a05aa297', span: 2 }, index.h("smoothly-display", { key: 'b6f97a5c900d27d4cd5c8a3193c08d379c73da0a', type: "date", value: "2024-01-01" })), index.h("smoothly-table-cell", { key: 'a3c7b056c9b0af04ec00c95d01422d2f56c3c806' }, index.h("smoothly-display", { key: 'dc812c579111236c03c21edaafb7906297cb2625', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-table-row", { key: '004a397622e3facc508a92e645a3ac4fa9532e0a' }, index.h("smoothly-table-expandable-cell", { key: 'a4b75ba00befe6a8a34fc5c99690cb03c3ade7d7', span: 2 }, index.h("smoothly-display", { key: 'bb91f39b2d8833ad116268618a9be82aa96a2fc4', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '51e9b4cf9d9a9ef15c04996aef32d7ec916ae79b', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-table-expandable-cell", { key: 'cbce7604964ca0c217d549bc1b1e50758b0217b8' }, index.h("smoothly-display", { key: '3cabab2c49146b2ac49882b592ce38cae1dd17ce', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '84d7a668b2f59da0df7a95eb1fa3d8221365f2f8', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index.h("smoothly-table-row", { key: '8c8cabd1f86d8c435925a3e2386bfe91f9d604da' }, index.h("smoothly-table-cell", { key: '36d5b65550ad5c09fed7441e9c0892bdf595d979' }, index.h("smoothly-display", { key: '3580d0ec9bcabc49ba7e3247786c3626760dd405', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'cf38589846b2f9925a79f79d64c298e96a3174b8' }, "Not Skipped"), index.h("smoothly-table-cell", { key: '2ae25896d0fcfaa3884da36a63bda5bd730797bd' }, index.h("smoothly-display", { key: '88fed0a43e38e936abc981beac382b83e86263e6', type: "price", value: 320, currency: "EUR" })))))));
+        return (index.h(index.Host, { key: '206c3432bf7936b15e972c161424e6b0e102a15c' }, index.h("smoothly-table", { key: 'fd9a1adfc79d7e3fa130e55614c8956aa9993ce7', columns: 3 }, index.h("smoothly-table-head", { key: '079086e32eab6c27ec06646b7cc1addc5a45e218' }, index.h("smoothly-table-row", { key: '6b421c777d5857d7b8c6e92dfa8ebb9e65c24f0d' }, index.h("smoothly-table-cell", { key: '9c0f4181cefa485af433741c55eb8033057333ba' }, "Date"), index.h("smoothly-table-cell", { key: '6b089e4d9d9d43ead73b8602d1f482b019810ee7' }, "Skip"), index.h("smoothly-table-cell", { key: 'b3a5f766b5a7bc15fe29aa2ba35d908f33883f7f' }, "Total"))), index.h("smoothly-table-body", { key: '12be40d0b1546ef3bcb8d95815e3a6751a34dc95' }, index.h("smoothly-table-row", { key: '22d3015ebb0c1a19b412c175f231de9cd3f9f04c' }, index.h("smoothly-table-cell", { key: 'cb591fa2b41381aa1c663a701a76b953ff610262', span: 2 }, index.h("smoothly-display", { key: 'a9dfcaebab3333ea62c290c9952ecc7c77ba33a7', type: "date", value: "2024-01-01" })), index.h("smoothly-table-cell", { key: 'b3680b9847f0e5635538af75af7c117d86464fcc' }, index.h("smoothly-display", { key: 'c89fca16b3f2e836dc9dd8c2378f4b26bab2be1f', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-table-row", { key: 'd2574793e06a73ede9721349f9e26ea596947500' }, index.h("smoothly-table-expandable-cell", { key: '2ab7fcbb3c3f54298e7b9f4b6b8287f0e5c07c04', span: 2 }, index.h("smoothly-display", { key: '40f846739879908115983e730c2e135fc3473977', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '9989441f4da6a580d7d7a21a8623a1dafc0d6a3d', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-table-expandable-cell", { key: '20f47281da324a3fe529553b57c2e50de7a7039d' }, index.h("smoothly-display", { key: 'd9d02229b0bfa49122ede86d2513648a1448d8bf', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '7803a63f59d968622edfb07fed2b40338fb1b460', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index.h("smoothly-table-row", { key: '0bf9dd84e89fef204799961f85e24b5a14d4c4d4' }, index.h("smoothly-table-cell", { key: '7feacfd6127864b97ac910256f434b42ee57dcd6' }, index.h("smoothly-display", { key: 'df857a1e9f9503c08c49f564a47bbb4b3b96f170', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'bd1848a3218ec7b9177b0354570fc3a96f827c0a' }, "Not Skipped"), index.h("smoothly-table-cell", { key: '1656b57464928e417afa36732fe710654c6c1e8d' }, index.h("smoothly-display", { key: '6097190c8c8c9ae2899a0497d524da52f42a145e', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyTableDemoColspan.style = SmoothlyTableDemoColspanStyle0;
@@ -12003,7 +11989,7 @@ const SmoothlyTableDemoFillerRow = class {
         }, 3000);
     }
     render() {
-        return (index.h(index.Host, { key: '38d70dda60dda3debcf93c39712447b147f1f8aa' }, index.h("smoothly-display", { key: '184a415c969fe7f8067d39b8bca1c60e2cdc525c', type: "text", value: "Filler row" }), index.h("smoothly-table", { key: 'c25e191ff3a0d83771c8c4057a391af7d29f3aeb', color: "primary", columns: 4 }, index.h("smoothly-table-head", { key: '6a0abb3c6732c84bbf349fa5564d27d3b0189f36' }, index.h("smoothly-table-row", { key: '2f91fa838939f85bee7d2fc07bbcf66f19e31af0' }, index.h("smoothly-table-cell", { key: 'b50f41f05faeb8105905c2d2bc694ceba0291b11' }, "Breed"), index.h("smoothly-table-cell", { key: '1165986b307056c5356dad70b6ce04059aaebdd1' }, "Country"), index.h("smoothly-table-cell", { key: '348327ae0225c33862c65c536b31bbab5bd706d9' }, "Coat"), index.h("smoothly-table-cell", { key: '449b076a7ccb0922362af57fa66bbf081fe73c1d' }, "Origin"))), index.h("smoothly-table-body", { key: '7b4d12422054f92287036881aaba5156de8adc87' }, this.cats === undefined ? (index.h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-table-row", null, index.h("div", { class: "smoothly-table-cell" }, a.breed), index.h("div", { class: "smoothly-table-cell" }, a.country), index.h("div", { class: "smoothly-table-cell" }, a.coat), index.h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
+        return (index.h(index.Host, { key: 'e2842ae7ee217b160d69fc5fa6cb686af528e2fc' }, index.h("smoothly-display", { key: '8ec4889c9bc004f61f6b9d91b87e9135f2b7ba11', type: "text", value: "Filler row" }), index.h("smoothly-table", { key: '39f5a22a15a05631cf015918050e94215a336d62', color: "primary", columns: 4 }, index.h("smoothly-table-head", { key: '271ced47bcbc64f53cc70bf3f1ca757059ac81dd' }, index.h("smoothly-table-row", { key: '7a7566c40b27be58ab6bc3f6eeea2b5e90726cf5' }, index.h("smoothly-table-cell", { key: 'c3f0eb89f019759418b4524fa923194e1eaa05c9' }, "Breed"), index.h("smoothly-table-cell", { key: 'beb4c8b9c55d96c4f3e9faa71bfc9bf3971a1e25' }, "Country"), index.h("smoothly-table-cell", { key: '6c8e3177e07f82961707a6f31729ede9da79acd9' }, "Coat"), index.h("smoothly-table-cell", { key: '71023e2b53ab05e19b5d2f973f4b45c6ad1b7525' }, "Origin"))), index.h("smoothly-table-body", { key: 'a4a2e96740dbb0191031fb008fba9c349f4d37b1' }, this.cats === undefined ? (index.h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-table-row", null, index.h("div", { class: "smoothly-table-cell" }, a.breed), index.h("div", { class: "smoothly-table-cell" }, a.country), index.h("div", { class: "smoothly-table-cell" }, a.coat), index.h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
     }
 };
 SmoothlyTableDemoFillerRow.style = SmoothlyTableDemoFillerRowStyle0;
@@ -12075,18 +12061,18 @@ const TableDemoFiltered = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: 'e466338b02bd93b0315542c0b5c06c83cad6d4dd' }, index.h("smoothly-display", { key: '53680234c692fa842713b5f5cb385173b20053de', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: 'f248a7bb536bcac8b9289e6463ff31fb592c146c' }, index.h("smoothly-filter-toggle", { key: 'f815214884244d65668d23ed58d03ef72df19eec', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", tooltip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '7335ae2c4e772145997a620fb4700eb41bf1f117', properties: { pattern: "Ticked", breed: "" }, icon: "paw", tooltip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'f0416ccc30049eb3b0d2005dfbc73cb57744a607', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", tooltip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '9e6de63b60eca20cc30d7e9d14259f86da703c42', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", tooltip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'd4be97f59345449c96945247f531f72cd2c99239', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: 'b2496133669576bf999beed5b34209da721db862' }, index.h("smoothly-display", { key: 'e6ca869034ac2981e7b2725a9b0b15a187ff0533', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '9671d4342e35e40dca90683c6051b277395e5b8d' }, index.h("smoothly-filter-toggle", { key: 'bdb72d2b1cd012fccfeaafc6a39b0939da679581', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", tooltip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '7e02ac6837819923749faf9d27b06877b6a91f53', properties: { pattern: "Ticked", breed: "" }, icon: "paw", tooltip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'ce9dedd04d828a036dd35893f816107a3e2bff98', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", tooltip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '12246409d8b02f58a02951e3045a2f1d608393f3', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", tooltip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '92d614561377e367e09fcf360398211106f22caa', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
             Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
                 var _a;
                 return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("div", { key: 'c7c5c8c09773c9aa8a7ddd2601645a4d37085381', slot: "detail" }, index.h("smoothly-form", { key: '4b08b94775b227a62e46bf113c3750ccb443a319', looks: "border" }, index.h("smoothly-filter-select", { key: '999abebde1c8e31bb6104c9ecf1f80ab639d41b8', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '7633ee0389289db186d8f69ec959489e7ce849ee', slot: "detail" }, index.h("smoothly-form", { key: '9e298b588a374bb5d25815598bfb90ef5e0b7249', looks: "border" }, index.h("smoothly-filter-select", { key: 'c1e06cf576321f8d1689fb717da71e0ab94adc54', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
             Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
                 var _a;
                 return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("smoothly-filter-select", { key: 'fc825ac862b1dcf72b22c0300249e9aa9fe793e6', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (index.h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), index.h("smoothly-filter-select", { key: '2a1e1cba05bf630b7f3e0e7b5d4f77f4942720af', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), index.h("smoothly-filter-select", { key: '502b2cd5e7bb76f26e37b7baaf48d32f3d45ad8a', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
+            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (index.h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), index.h("smoothly-filter-select", { key: '86ce003b89b69ac422fcaa99814154c9b5c7e811', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
             .flat()
-            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (index.h("smoothly-item", { slot: "items", value: name }, name)))), index.h("smoothly-filter-input", { key: '81753a6e0b5aedabff3fc2d73894a22d794d6138', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'a049cb3f64f09b0d2e820cd69f6733bf5f0e99f9', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", { columns: 4 }, index.h("smoothly-table-head", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cats)), index.h("smoothly-table-cell", null, "Breed"), index.h("smoothly-table-cell", null, "Coat"), index.h("smoothly-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-foot", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", { span: 3 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
+            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (index.h("smoothly-item", { slot: "items", value: name }, name)))), index.h("smoothly-filter-input", { key: '1b1633c816f19e098226dc046ba96890f554fa2e', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '2a2ae7d91ad02a57f6d704e12a491811654416a8', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", { columns: 4 }, index.h("smoothly-table-head", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cats)), index.h("smoothly-table-cell", null, "Breed"), index.h("smoothly-table-cell", null, "Coat"), index.h("smoothly-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-foot", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", { span: 3 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
     }
 };
 const names = {
@@ -12105,7 +12091,7 @@ const SmoothlyTableDemoGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '6d9d720c9f65ee6e78d7f596f9ee408be480ed88' }, index.h("smoothly-display", { key: '442f2225f2bb78b7cfe89ead3dff83f8a1024a12', type: "text", value: "Group" }), index.h("smoothly-table", { key: '75e518f1bb83c6f6f6d62010d053ef4a4b50d8ad', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: 'a3b1b7ca223ca3a25b88b0227e1612eb3e336942' }, index.h("smoothly-table-row", { key: 'c73a74aae9e8d864e7cee7db9499edee0b15cbf8' }, index.h("smoothly-table-cell", { key: '99d7b1277ba0c972fe34cdd147355869756fd28f' }, "Date"), index.h("smoothly-table-cell", { key: '573e988d77b5dd5adc437a75f946e0150be5c923' }, "Total"))), index.h("smoothly-table-body", { key: '2d7ebdd9a13ba981340393562959c9fdcdf712b6' }, index.h("smoothly-table-row-group", { key: '6b5f75f9149d0164b2e44be982235aa246403db3', align: true }, index.h("smoothly-display", { key: '82ea0c8ec6aac799ac5a7289f1a9de1e138f32f4', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'c1635fde48e93028e0dff1190a6126e2518780bf', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-table-expandable-row", { key: '219ecff799b456f79b8bd3f7579b8eedfbe1fd4f' }, index.h("smoothly-table-cell", { key: '4af427ab1067d867a2db1e5fbabf7a158247e392' }, index.h("smoothly-display", { key: '7f26e1e50ccfe1ef9e8fd3195088b869b10eb3c0', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'e41d6251de24de87eb6fbff44b7f6484d0959a6b' }, index.h("smoothly-display", { key: '6e936eb954709ccd79e07c0f095d4550130a1c6f', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: 'd2d1849b4d33793e49d195c53f016d808e0b1886', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '40c10a52c8f5f9c4d9e93966b59251e4f4e42149' }, index.h("smoothly-table-cell", { key: 'b6c95ae35ee94d18c5dffc045b68fac6a7e06d2f' }, index.h("smoothly-display", { key: '91a552a9a396793dd70fef75ffc907c2fbfe65fe', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '9ad9b08413b3af146964ad7ec55c1ea2c02a712f' }, index.h("smoothly-display", { key: 'b4d454228ebdb79c31c731466651f784b1613224', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '8d732c325253f602d25ec6ba30b1291201a32c7a', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-table-row", { key: 'c9e41854cec178b08a57cc36a81960cb237cef7f' }, index.h("smoothly-table-cell", { key: '48e4c3f51bd3e5dcfef37de376486bb0cacb1897' }, index.h("smoothly-display", { key: '969399bad6fb75140f5f83708dcb50cb627effda', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'f9bc001afdeccd78165b9d2478d6314cac70bff2' }, index.h("smoothly-display", { key: '4434c24160a55b7240b5593cf312092a3947ddef', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-table-row-group", { key: 'a21233eeb054f83b737c58925a4c4495e5b7ff51' }, index.h("smoothly-display", { key: '84f74f0bbf11900d6eee8216bb4088617931637a', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '157cb701956e04bf9c670cda76e5b5858fd9be1c', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '23af7d13f3b58326f0c9a4cdccd9306fb5ad60e4' }, index.h("smoothly-table-cell", { key: '131221fd900aa54a7a2d2e4e42020b05b39990cd' }, index.h("smoothly-display", { key: 'd5edd178663afecd6ceab1e423c072e7ed95205c', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'ccadd0bd3aa811bfc83792e95a22ba307856c543' }, index.h("smoothly-display", { key: '119615d08a8dd9a3481441b4eaccc8f84e794234', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '7bdd1508625fc65fea848f9c871bc0f7113713c4', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'a22ae664ecce5e85f977541d821dd4f4d366531e' }, index.h("smoothly-table-cell", { key: '269b28c5665de4c1768987adb15a92d7a0acf621' }, index.h("smoothly-display", { key: '2d52a2cf92af3bf7b52f6adbf8b8a7285d62b4fb', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'fe9d872e9b37c4a4b08b4a03c1acb0d212818cb1' }, index.h("smoothly-display", { key: '43170bb184784a9d0b082c898a7f0a77f8baf3f4', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'bd412ca84f5b4b9062606feece29ad1184bc0476', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '6112ee6121bcad833d1f02167ba8073e3235cc95' }, index.h("smoothly-display", { key: 'facc202e110a1053cc26a97cf767bfdb9e73394e', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-table-expandable-row", { key: '8d7bdd302c9377cbba23ef2b4906273e15c599ec' }, index.h("smoothly-table-cell", { key: '698c9999906b3be4246d0a20f71b85cd012e6473' }, index.h("smoothly-display", { key: '9be680909e86d6b2df9b73a89afe4cbf1a3d1a84', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'f047498688a24070acc3dfb2a32b5628220a6aae' }, index.h("smoothly-display", { key: '1f02d412063ab76e661d0fe085b95145b74d2ce7', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '327f8952dcc07cc927b9c1373c7dbf7311a7d5b6', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '80ef35064b8381294fc9505b9c8878c8a94c0d08' }, index.h("smoothly-table-cell", { key: '7f27cb4321897cf89756a000cd0660a7e5290010' }, index.h("smoothly-display", { key: 'cd57556e1a80c1eea860f56c92bc843a4f44c40e', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'aaa72d5269512ba1ab02855550f20a7f92ad1371' }, index.h("smoothly-display", { key: '68450b89acaed9519be6f2116b04d5f81a20a6c4', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '370515defa109a30b4c15a78f11eae5c66350828', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: 'c0c2053a5e4791d6a4dff32351efbe4da3639d99' }, index.h("smoothly-display", { key: '7468596a3759d2f84dc81576c6870b8d5827ccbf', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: 'f7603b206230bf809e45e80790d08849dc40d8f9' }, index.h("smoothly-table-cell", { key: 'b84710d6d77b9f7e1c63bf6b8627b66d5e0948a5' }, index.h("smoothly-display", { key: '49a4e934e415b06f8b08c80f62dab8b4aa8d9f95', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'a79299767ba343f1046aad9450c43ad98950aad4' }, index.h("smoothly-display", { key: 'ccab7e3fad519585802f32d4b0909a86bf3b9c01', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '9636cdd9717072aa6f864aa91b90bb8fcbe5a687', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'ed90ef5e0e075709b748956cee2c3f6f38102680' }, index.h("smoothly-table-cell", { key: '16211d7f920672f603e50663bb4ab7159f84ac82' }, index.h("smoothly-display", { key: '245a46a01cf2af116a69c34539fcc35f689b6341', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '83d04a784aab7b8b8bff1d85b4f18856f18d0716' }, index.h("smoothly-display", { key: '884a75969507a2761004769c4cad8a84117ceded', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '34e6cd24929dce32bd55a3292adbc25064ebb0be', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '6b6f7525e80b02168c3c17e3814c317d7c52ccc7' }, index.h("smoothly-table-row-group", { key: '2130f2f4e0fbb98ea91e34b1f8357f8f1f3b5249' }, index.h("smoothly-display", { key: '68b6b288fcafaabce7e8326502ae43a74510eb79', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: 'a1d3e7a2f6acd5eacf9640f798d76fcb1eb3f968', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '867ee14f5bd095b89abdc5c834f99dccc1375580' }, index.h("smoothly-table-row", { key: '406e8d3ae31dfb96910581c83a52c48e74b32191' }, index.h("fake-cell-wrapper", { key: '3618f86fec25652686269c38ac485b52b5858414' }, index.h("smoothly-table-cell", { key: '4e05b78f422225d1703542bdc09c031d4ef01439' }, index.h("smoothly-display", { key: '524047b0c78e55c371d6429be46baaf584ff7773', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: '8af40560c19095286387a1d34f1a90775b8eb904' }, index.h("smoothly-table-expandable-cell", { key: '5af22121f49b70c6acdcdbcc75d5b23aaf1e6f14' }, index.h("smoothly-display", { key: '57c9c46d563ab92dbb41ec95612c8a911bab50a2', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '04a1b0e907daa6f9636d1b326e90456b9cf8e6f8', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index.h("fake-expandable-row-wrapper", { key: 'c52eaa827ceba1f5f66fda7f24100709db8f2d2d' }, index.h("smoothly-table-expandable-row", { key: '9ac70443987bef8edefa84b3fb8e208533ebc650' }, index.h("fake-cell-wrapper", { key: '93b0839f92eca4c40a9e17dc5f1a41780a7a867d', class: "span-2" }, index.h("smoothly-table-cell", { key: '2fe0229182ee9015448e4ff946bc2ccc4bd1ef1e', span: 2 }, index.h("smoothly-display", { key: '4435bb704d3e4364a1fc1b5223024c563a2ac39f', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: 'e6e993d75df5a4100e16fe601dd1a3af690ad032', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-table-row-group", { key: 'c1a7c1157668bc689449d7481867d627b9017163' }, index.h("smoothly-display", { key: '4c3b421c9b1d97d18ba83acb46b08d271704f6bf', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: 'd9b984cf9a96b3cf9241d4f1d2217b1b6410d504', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index.h(index.Host, { key: 'da018054a4b16d6fd81dc60fc9ddf3e4c77860c1' }, index.h("smoothly-display", { key: '51aa321cd3b22275ff7dc12e1b82b42fc1997c25', type: "text", value: "Group" }), index.h("smoothly-table", { key: '32aec70ba3bc78e572b118d0a7c796cf1b40a9cc', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '75374db74064f5ec5926b08baedffa2f553037e3' }, index.h("smoothly-table-row", { key: 'fc5e9fb16db4aaf96b005fdc08b0973fd94d5a6b' }, index.h("smoothly-table-cell", { key: '7ef43c21f5c4760cf379ebed4fd77a0c4263ef6a' }, "Date"), index.h("smoothly-table-cell", { key: '33f0ad771cb46b032661ff5b43d5fdc4dd6425bb' }, "Total"))), index.h("smoothly-table-body", { key: 'd74fc9dbf2cae53ad0dbb53412132e1090591a65' }, index.h("smoothly-table-row-group", { key: '7cd93d9bcc6ee81c60e96b402bd96dbb9db74725', align: true }, index.h("smoothly-display", { key: '3dcbc09dea2add837101f1ba69e90fa4a46edea9', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '6d5c82538e836f4e47c802b711a94876b77f3817', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-table-expandable-row", { key: '8a8c2bc2dcfb221fa92f01c7356340811d88996b' }, index.h("smoothly-table-cell", { key: 'fd6da924a5a26c7e8961c66ea2bb31f9f81d715a' }, index.h("smoothly-display", { key: '443b690dc480dad5705fa5e3841bb3c7a2c256da', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '6775c121dfef064a1c2536514fa8d38aeab30624' }, index.h("smoothly-display", { key: 'de6f0ce1d1f23d0b64059b9768834e0795ffc3db', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '4eedf3384b751068dbe9d7e54f77f0821658a24b', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '2e86dcf3208a55f0c5a32013638e167dcc949fd3' }, index.h("smoothly-table-cell", { key: '3563fa6a11720be09e59404cc39f8c5b2c0932ec' }, index.h("smoothly-display", { key: '828d9102af9043b3af6f74d0dec9d474a85e4c87', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '4deb09e2dcdbccf59c02b7797e18561569ecba39' }, index.h("smoothly-display", { key: 'aa34dca36239d202565311e5e89bfc65832cb10a', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: 'e7716c3cf2fe6a6ffdfdbd386c12a8d4ce9e5549', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-table-row", { key: '07c2d59e74294030d8a5af6bf66cfbcb00f0c7fd' }, index.h("smoothly-table-cell", { key: 'c71040890a72916ad35b12ee588d6ba0420646b8' }, index.h("smoothly-display", { key: '68cb381ce234e38d8bbbfbfa47ea43d94e5e7ec4', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: '2481c10a323c27700db2acd5912caf0ef974a23e' }, index.h("smoothly-display", { key: 'a1d92551f0d769e5e148f20225805f5d178cb40f', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-table-row-group", { key: 'eab21ae8ceae4007183b890f0f843db056f75b3b' }, index.h("smoothly-display", { key: 'e3cab2799afc3b8220eeb5959ba349954d64f432', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '2c008844c5e33e2c94a71312bb83017bd2f5c21a', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '8fc307fb2ca022baaca2185e4ad07bb2ae1874b3' }, index.h("smoothly-table-cell", { key: 'bf8896a16335d24b7c454d865561e38fc9f7e18d' }, index.h("smoothly-display", { key: 'd390d1e203be30e671640ab40ecfc303cd2ad373', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'b7b0f8552e8553da4688617e91d1ec363cb76ac1' }, index.h("smoothly-display", { key: 'f15c573f1b1bda33e7e645648a38f27ba2b760c2', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '9e3b1abdc5531434bff506e5fd60e3cf2f5b1302', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '685d8ca397497da8c1d6284061b1f27c6d7dd0bb' }, index.h("smoothly-table-cell", { key: '617e0c3c1b7a30eb275ed475d42e705be7dfc5ea' }, index.h("smoothly-display", { key: 'afaa145b63c5a6b3627d5996381e2d5bda27172d', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '1b13e3bb4d32abd553a47dc62035d8334020a5d5' }, index.h("smoothly-display", { key: '9412d8622d09f5927efdc5bb3ec65c4def72af80', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '2587a7908fbc2573eda2a718aa748225f7e950e7', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: 'cacde2dbf4de84459496605e81d3164060ee33c6' }, index.h("smoothly-display", { key: 'c38877961cce544f5503aafdd7816d0ed732c1d2', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-table-expandable-row", { key: '6b14e1f8b1b25199c60f46aa721816e943a490d3' }, index.h("smoothly-table-cell", { key: '1d7f5ec04613837bd2b59dbcd2663411f4ed0cb6' }, index.h("smoothly-display", { key: '67307cd9c3ffd4c2c9efe340d7c83b8fbc4bc534', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'e8170034117e3be53d6d3c6244ae324d7314db52' }, index.h("smoothly-display", { key: '68169967a6b58da90e4829477b1eec315a7ac976', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'c202d836185afef6ef82f26c42dd88d7def426d9', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'd01d644c0eddfef155d11734bb446fec2c05bb45' }, index.h("smoothly-table-cell", { key: '25fc8925fbede3bbc1d8820ec1e45f2b24d5b667' }, index.h("smoothly-display", { key: '2173e747b53529897a2d8b59529a57e970b90315', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'ed4fe4b60e75f53e05c5a8db757402c61e7d70a0' }, index.h("smoothly-display", { key: 'ed5c13a807f6b72a357be497ce19453775ec46e8', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '45397867dde0889104541487e4583efb409b0b5f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '67aef82d4437f494d548dee5a43ce5cbfc5ab72f' }, index.h("smoothly-display", { key: 'b9eef7f0227a3724f179d0ee78c7a176f715f508', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '07f54cf1e98b36b00e51bf05b8510aed92e99235' }, index.h("smoothly-table-cell", { key: '72ffadaf8aef7fd69d22437dada51c9c42514440' }, index.h("smoothly-display", { key: 'da23b7948ee52423977da6fa03db5e17cc45b349', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '07341b7e77b18bd7f35f7ec19d8f0ce5125bd87b' }, index.h("smoothly-display", { key: '6aaa00ea2364f5aaf31dc25d2b349d21328fcdc5', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'bfc335f98ecd74084e50dc910e4c7aad297ad214', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '966c6857a25076214d04d9e3005140b544062217' }, index.h("smoothly-table-cell", { key: '62ceb6e434e519560be7626dd9b949eea5471cac' }, index.h("smoothly-display", { key: '865dd5f8b1c4d2b74696d6f70f19ae07fb31c01b', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'bd9f91491faa6a42777c05c12c98c3d2b6527ee2' }, index.h("smoothly-display", { key: '7605031ad04f719305c75913906d8ec1ecda1957', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'c5d8373f3f7d5bca502f9c1af9ced0f87d63d447', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '6aa2a583c922c3e2b54866a0a7b8367876fa71ba' }, index.h("smoothly-table-row-group", { key: 'e66a37d22790a34947db4aef076ff68fa775aba2' }, index.h("smoothly-display", { key: '026dfdfa13d81da7276a14aedc7624bf877d60a1', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '012e25ac22a4af1bf7c3da7e979faf9ef894b8eb', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '5aec00c528da5f999e9cdd4bf21cd9e2cb3ab503' }, index.h("smoothly-table-row", { key: 'b733662dbe7f3c4a635af51719531597e252c295' }, index.h("fake-cell-wrapper", { key: '8a20a4fe8699569b946e82d184df6ece1027ccc9' }, index.h("smoothly-table-cell", { key: 'b9719cb65467fec3ff95c44ed42ea7e28d58c47d' }, index.h("smoothly-display", { key: 'c875865ff95ae604ea72c3d7d4a44cce6c81d70f', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'a8e641b74ac5252beafd6a18270e9619123b5173' }, index.h("smoothly-table-expandable-cell", { key: '1c2a62ed15b03d462a1f03e01845546a7849caee' }, index.h("smoothly-display", { key: '593b8b35deb66e2870ee64e7cbbec8e954241986', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '0dea3b894850a75f3189b6d20594e4eebda93383', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index.h("fake-expandable-row-wrapper", { key: '53a8d5e0edbbfae641257bde1d2957aa83bcf28c' }, index.h("smoothly-table-expandable-row", { key: '187e5073bd8a6b6beb9986b73374e271b7074e16' }, index.h("fake-cell-wrapper", { key: 'd92cc6581ce932ad32f87014d625fa8dbcd52ddb', class: "span-2" }, index.h("smoothly-table-cell", { key: '6d02637fd50db42ef9c00689fd83744fa6fa1930', span: 2 }, index.h("smoothly-display", { key: 'e7ac8d9d25dc03f6de7a75cb18f7e1287cbb0551', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: 'febf6353725027457a7adeab916a8620fff60404', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-table-row-group", { key: 'e4d7e6a2d08b1ca22fa82e36bcac5626d174d917' }, index.h("smoothly-display", { key: 'e6c1395ac51f719ce119dbdfa01d14114460da99', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '003a6cbd69b50fb04252ec20c30c83b3ad7f2da2', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyTableDemoGroup.style = SmoothlyTableDemoGroupStyle0;
@@ -13053,7 +13039,7 @@ const SmoothlyTableDemoNestedNoCell = class {
         this.loadedRows = [];
     }
     render() {
-        return (index.h(index.Host, { key: '8c866cd16a23784938b9ad89262697bf5e8118a9' }, index.h("smoothly-display", { key: '49be8b1becaab358488c697307c195665ebd2098', type: "text", value: "Nested" }), index.h("smoothly-table", { key: 'b56343d1bcd679365d9c6c08642c2edb3e258459', color: "primary", columns: 8 }, index.h("smoothly-table-head", { key: 'b3d310c8fb82952764767e5e4b288d727bd17efe' }, index.h("smoothly-table-row", { key: 'e976da8981a2d926178a50b64e5d696a2a0d81a6' }, index.h("div", { key: '9a87b48ba5afabb3e39a702a762ca497f1376f99', class: "smoothly-table-cell" }, "Id"), index.h("div", { key: 'ee489d4b66d755c9590cf0dfe23fe09c440773aa', class: "smoothly-table-cell" }, "Registered"), index.h("div", { key: '2f93729e38b5e988b6ee165ff407f4bdf5befb84', class: "smoothly-table-cell" }, "Name"), index.h("div", { key: '469ce2127a8b58cea7aaeb655b0bfac99c6a74cb', class: "smoothly-table-cell" }, "Age"), index.h("div", { key: 'a5ccac06f088a4a5c1c08bf96019ec929704db08', class: "smoothly-table-cell" }, "Balance"), index.h("div", { key: 'ef4935af0aaada2fe4fb03f6e196140009690919', class: "smoothly-table-cell" }, "EyeColor"), index.h("div", { key: '86f7802a79f51886ad856d2f2d74a1bd3c5ceb4f', class: "smoothly-table-cell" }, "Gender"), index.h("div", { key: '6cfc304411001e70d0613b1aae299c34ab41090f', class: "smoothly-table-cell" }, "Company"))), index.h("smoothly-table-body", { key: 'f3add3600983438759fe1211df2bf943bcc6eb66' }, data.map((entry, index$1) => (index.h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
+        return (index.h(index.Host, { key: 'd9a2afc99200a5d26f91685928f65f17e7bf4011' }, index.h("smoothly-display", { key: '8ba8c8c5d923b3a33d945bedc7012c2d8972bbe5', type: "text", value: "Nested" }), index.h("smoothly-table", { key: '3d9b1557644de9b8fa357aa1172028d9c8783d38', color: "primary", columns: 8 }, index.h("smoothly-table-head", { key: '542ce03049d85cc1eaba4eb12fd622cc98deb8b9' }, index.h("smoothly-table-row", { key: '48bfb36158c329821c054ae2058f00f2ca2b57f4' }, index.h("div", { key: 'ce0e5c7fa53dd372d911e281d0b9821056a23476', class: "smoothly-table-cell" }, "Id"), index.h("div", { key: 'f17c235a442ef273ffc7015ccd7e8af83254edad', class: "smoothly-table-cell" }, "Registered"), index.h("div", { key: '5a23f578af6264b760ea2708fb45ec5dc323378f', class: "smoothly-table-cell" }, "Name"), index.h("div", { key: 'cd2bac823bd19c8d7c7f74aac4469e8c7b84e156', class: "smoothly-table-cell" }, "Age"), index.h("div", { key: '62ec178c9917b2349572001481e1297d296c5d17', class: "smoothly-table-cell" }, "Balance"), index.h("div", { key: '41caf4b33aafb15e67df78ce700cd1e44889b95d', class: "smoothly-table-cell" }, "EyeColor"), index.h("div", { key: '7aa2168dc4a0b4bb80a9f19aaa2a34de0a78f9ec', class: "smoothly-table-cell" }, "Gender"), index.h("div", { key: 'd5a5f5e6abd610224c2fabde318232bf482fc3e3', class: "smoothly-table-cell" }, "Company"))), index.h("smoothly-table-body", { key: '02f484daac071e7c67643da886605c48456f8ddc' }, data.map((entry, index$1) => (index.h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
                 if (event.detail) {
                     this.loadingIndex = index$1;
                     setTimeout(() => {
@@ -13061,7 +13047,7 @@ const SmoothlyTableDemoNestedNoCell = class {
                         this.loadedRows = [...this.loadedRows, index$1];
                     }, 1500);
                 }
-            } }, this.loadingIndex === index$1 && index.h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index$1) && (index.h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), index.h("div", { class: "smoothly-table-cell" }, entry.id), index.h("div", { class: "smoothly-table-cell" }, entry.registered), index.h("div", { class: "smoothly-table-cell" }, entry.name), index.h("div", { class: "smoothly-table-cell" }, entry.age), index.h("div", { class: "smoothly-table-cell" }, entry.balance), index.h("div", { class: "smoothly-table-cell" }, entry.eyeColor), index.h("div", { class: "smoothly-table-cell" }, entry.gender), index.h("div", { class: "smoothly-table-cell" }, entry.company))))), index.h("smoothly-table-foot", { key: '8f09ef834d89d2ff1a20fbfd1afeaa97135d894e' }, index.h("smoothly-table-row", { key: '5cd838e0210e1fa2cb9feceeaed3100efa590fc0' }, index.h("div", { key: '6de9cc507f8064fcd3456fc5b47898ab759a9bb7', class: "smoothly-table-cell" }, "Footer Cell"), index.h("div", { key: '98cea413d617c7faa0afe9b8438a97f2ac4812cf', class: "smoothly-table-cell" }, "Footer Cell"))))));
+            } }, this.loadingIndex === index$1 && index.h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index$1) && (index.h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), index.h("div", { class: "smoothly-table-cell" }, entry.id), index.h("div", { class: "smoothly-table-cell" }, entry.registered), index.h("div", { class: "smoothly-table-cell" }, entry.name), index.h("div", { class: "smoothly-table-cell" }, entry.age), index.h("div", { class: "smoothly-table-cell" }, entry.balance), index.h("div", { class: "smoothly-table-cell" }, entry.eyeColor), index.h("div", { class: "smoothly-table-cell" }, entry.gender), index.h("div", { class: "smoothly-table-cell" }, entry.company))))), index.h("smoothly-table-foot", { key: 'e071f5ee248cc2d4ad39e4ef33d2ce8fe95a4bed' }, index.h("smoothly-table-row", { key: '5c1c6ddf0c8544176bf0a0dc2ea94c92e368d028' }, index.h("div", { key: '36887d23065d3694040b2ff045727fa670c9fec9', class: "smoothly-table-cell" }, "Footer Cell"), index.h("div", { key: '352c1ec7f806cfac4f751a837d688ba8ecbbd97d', class: "smoothly-table-cell" }, "Footer Cell"))))));
     }
 };
 SmoothlyTableDemoNestedNoCell.style = SmoothlyTableDemoNestedNoCellStyle0;
@@ -13076,7 +13062,7 @@ const SmoothlyTableDemoNestedNoCellInner = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '6388069c37c2a548918dc78d2b949901c28ded43' }, index.h("smoothly-table", { key: 'd2184ae9016db08272ec832d207a9416a1746224', columns: 4 }, index.h("smoothly-table-head", { key: 'acf9683d306ec6136129978253a4624a11d717fe' }, index.h("smoothly-table-row", { key: 'aec3b34e39ac33773738bcbab5856ff7ee4af8d7' }, index.h("div", { key: 'aca6245aac23b333bbf97cb690061358622beb7f', class: "smoothly-table-cell" }, "Id"), index.h("div", { key: '2b42398cf74c76e4be08c1e7fd7f5551b8d32090', class: "smoothly-table-cell" }, "Name"), index.h("div", { key: '5fa1be1b174e4321e09b3825d037d3129b843aa1', class: "smoothly-table-cell" }, "Age"), index.h("div", { key: 'f462970aad2f7b79e370057c14194b35e5738385', class: "smoothly-table-cell" }, "Balance"))), index.h("smoothly-table-body", { key: '890a2f590c3e5d14de65305db7fc48725b008668' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("div", { class: "smoothly-table-cell" }, entry.id), index.h("div", { class: "smoothly-table-cell" }, entry.name), index.h("div", { class: "smoothly-table-cell" }, entry.age), index.h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
+        return (index.h(index.Host, { key: '2fad17f95bd478c2eb533b0239a63694b83c9f81' }, index.h("smoothly-table", { key: '0e6f6d73e4c9046818b3266afc85978907af7a56', columns: 4 }, index.h("smoothly-table-head", { key: 'a6521280e62df7ca1831a93b9e583b7a2fd6c20b' }, index.h("smoothly-table-row", { key: '87c4affbf2d36422ef5d9fda6873629437160528' }, index.h("div", { key: '7eeb79369fc478d3e6338d906e8da75f28f91a0a', class: "smoothly-table-cell" }, "Id"), index.h("div", { key: '920af80028d7658e16b3cee5fb02ba6dbf1f0640', class: "smoothly-table-cell" }, "Name"), index.h("div", { key: '8c52f5f92a7d918639a6c6190513ebebfe7ac346', class: "smoothly-table-cell" }, "Age"), index.h("div", { key: '462dd0bab5ddd117dc1e589798677f69fd0beeff', class: "smoothly-table-cell" }, "Balance"))), index.h("smoothly-table-body", { key: '632d73be3c9eb538258f6728ff192099ce4aa264' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("div", { class: "smoothly-table-cell" }, entry.id), index.h("div", { class: "smoothly-table-cell" }, entry.name), index.h("div", { class: "smoothly-table-cell" }, entry.age), index.h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
     }
 };
 SmoothlyTableDemoNestedNoCellInner.style = SmoothlyTableDemoNestedNoCellInnerStyle0;
@@ -13089,7 +13075,7 @@ const SmoothlyTableDemoSimple = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '977a9a236bdc58b92537eb9e59471d0a9f96f00a' }, index.h("smoothly-display", { key: 'de2287987636880fd438c302ec32ae53ce5ae060', type: "text", value: "Simple" }), index.h("smoothly-table", { key: 'db6c0a4350940c52c42f7a62e779603d1d24642e', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '6f24d7d6df9ba70632cc9a6a3a7de4c4fddb9357' }, index.h("smoothly-table-row", { key: '5926b18987bd258fadada40f20e31564d4f3fb83' }, index.h("smoothly-table-cell", { key: 'e638bce27714ac724702bed7a73421cfc174be30' }, "Breed"), index.h("smoothly-table-cell", { key: 'c485f52d288ee7d77bc7c25e53c0732d97ff633b' }, "Coat"))), index.h("smoothly-table-body", { key: '4a19ab309d9e78eb79ba956c6de47d23cfeb7014' }, cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-table-row", { key: '7c4d4c8880b6201a17ea01dbc6ff54184e03bdde' }, index.h("smoothly-table-cell", { key: '6aeb5582a777eb9a00d789a63f3b5675cf503ead' }, "Cell5"), index.h("smoothly-table-expandable-cell", { key: '0d910b1f981cad29426c6b0ae3892d45744d52e9' }, "Expandable Cell", index.h("div", { key: 'e3af861b1c71174ddae9db05c7efac205eabab71', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-table-row", { key: '19237dde0a7d161d916df400dac0c630e2071c67' }, index.h("smoothly-table-expandable-cell", { key: '1f3ceb532b2d4daf26209e5843af467c7951efe0' }, "Expandable Cell 1", index.h("div", { key: '4c51f5923db22dc8bd490cb62d0f82f77a2bd184', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-table-expandable-cell", { key: 'af60140f0a30d28efcfa68c6d78b23efecd561f0' }, "Expandable Cell 2", index.h("div", { key: '51503983ed408252fd192f5c4acb2c8a426531a8', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-table-foot", { key: '3917275eafd34d3ca597d28769fe0b73b1452b7f' }, index.h("smoothly-table-row", { key: '6eb9dfc7d00b63fc5bb3fbc394e0ac0f693a103c' }, index.h("smoothly-table-cell", { key: 'a88427c33d77c29ad3287c30fbbba4ecaa3a28d6' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '35184dbb830297485e4faf77bc5444e1f59c1dd5' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '3c44e473cd3c7a39000d80d2cd8f7d4f6259d28c' }, index.h("smoothly-display", { key: '4f67509b54850559c717b9c8feb45a61517537b5', type: "text", value: "Simple" }), index.h("smoothly-table", { key: '498414973d54fe1b049058d0c0d5db97911c759f', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '1cb4600f3bac84ed5a33240fece52904266cb058' }, index.h("smoothly-table-row", { key: 'cf64bbd77000b3d278ab7f8216d9cb0baf07150b' }, index.h("smoothly-table-cell", { key: '85f0427a93dcbe123fdb1e40cc35c1b84356ae75' }, "Breed"), index.h("smoothly-table-cell", { key: '4d8843cfa736067b351e06d852e55093e012cfea' }, "Coat"))), index.h("smoothly-table-body", { key: '93facc4b9d076dc19a5c4e8926c51bdc9d27068c' }, cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-table-row", { key: 'a6aace80a3161945f19daa5f5b47dc5af1569bcc' }, index.h("smoothly-table-cell", { key: 'a6a9bd8fa88a0008fbb320af534a45e32ac3705c' }, "Cell5"), index.h("smoothly-table-expandable-cell", { key: 'fc44f561b827ce8d002ed7787c11a0de6d68c3f6' }, "Expandable Cell", index.h("div", { key: 'a8f331b0b4b2e4acaf0fc46b9b11dc6cfb29d577', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-table-row", { key: 'ce878da536b3f96454218e7ffde80c1c668503e9' }, index.h("smoothly-table-expandable-cell", { key: 'bf67df9a09086f2202e2654b0a219499ba63c6d6' }, "Expandable Cell 1", index.h("div", { key: 'efbbea44e97c4d4537d12f43528dc92587766c5d', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-table-expandable-cell", { key: '50bcdf77eaf5b80f79ba333f0e6fe2abc2404e78' }, "Expandable Cell 2", index.h("div", { key: '402aa4ba61635738550d68d106755b48e60059f7', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-table-foot", { key: '7fce823d7ac195d33d123493f98972b3337d4308' }, index.h("smoothly-table-row", { key: '15796d7fb9e7d1c5072682f7cb0ac17a0dd75a80' }, index.h("smoothly-table-cell", { key: '3d57499943e186926e3e5829ff1ee47db0737abb' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '33376913bad1c9f73f6bbd23e7c6065247ac9ab9' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -13197,7 +13183,7 @@ const SmoothlyTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '368e5ea0bdfd3ca3a9ef2e57abb635f2d0ed03f1', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, index.h("div", { key: '4b161268c514623e5e6aab5e2b4e0a6479af19d1', class: "content" }, index.h("slot", { key: 'ce45b898b02af7413310ceb730fe4ea2b079999c' })), index.h("div", { key: 'f8b0d97428f8086dd27b6a80b8990ab8332cab28', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, index.h("slot", { key: '919ba95c2837f84ae862d6a57a1073c449010e7b', name: "detail" }))));
+        return (index.h(index.Host, { key: 'ac06673cd91c65a5a80d81229e9f9336f675c14b', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, index.h("div", { key: '8fd0cf961de88d5a7120259324ed61628f960b53', class: "content" }, index.h("slot", { key: '1cb3e3c0c98c2338ae21598c740255d18bfe5714' })), index.h("div", { key: '28cbeb9e91ef6c96df4272f2cab92bddb81c8946', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, index.h("slot", { key: 'af8954d6bd1c1ce393a1ede0b70971324af5f903', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -13227,7 +13213,7 @@ const SmoothlyTableExpandableRow = class {
         this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: 'a37cbb3ed9f41773cd7d81e39ae331a330f59371', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '386001b186de14e3b90527e70b00c051f2a47bb8' }), index.h("div", { key: '1d4b71a10f76a5b46a6ec8bd0ce7dd15f68f3830', class: "smoothly-table-detail", ref: e => (this.div = e) }, index.h("slot", { key: 'e27b0edf07c14c55627904c1d79471aed9a75658', name: "detail" }))));
+        return (index.h(index.Host, { key: '6033a860074a26860ac2d9397cfa4391831ed4ac', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '7a95e4cb3c3e224a7341aa2a2334f20eb8a532bf' }), index.h("div", { key: 'fd83d53e3db726abead7cf59f7b0bda74a72562c', class: "smoothly-table-detail", ref: e => (this.div = e) }, index.h("slot", { key: '1db917174ae6c70ae7944e67c70e79cf62354f81', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -13243,7 +13229,7 @@ const SmoothlyTableFillerRow = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-table-row", { key: '07c0e9f0cc4efcdaa7ff7a04cac7a7c756db8759' }, index.h("smoothly-table-cell", { key: '7bfa89899d3d4303e2d7cb69baaf9edcb29566ad' }, index.h("slot", { key: 'b19bd0509c385309a2731ea14174389ea7f8ac5f' }))));
+        return (index.h("smoothly-table-row", { key: '39f4df9798bfe072c1939753ba2cfcd52c8c6d14' }, index.h("smoothly-table-cell", { key: 'c4925e9dc2e432ec346681054de64387c1b191c7' }, index.h("slot", { key: '7cd372f479837d10ee4a0d53ca4089d80e333183' }))));
     }
 };
 SmoothlyTableFillerRow.style = SmoothlyTableFillerRowStyle0;
@@ -13256,7 +13242,7 @@ const SmoothlyTableFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '84b9e27ded1251d60022b7a20300cad1a662b620' }, index.h("slot", { key: 'c1712fcc06cfc3f7c2394d1ee82c993841d3c8b6' })));
+        return (index.h(index.Host, { key: 'c136890da1c10d7845b054fcb7160bf6573c3b1c' }, index.h("slot", { key: '2ba64ba55fc7842cdbfe8950aa075fcc82be49e2' })));
     }
 };
 SmoothlyTableFoot.style = SmoothlyTableFootStyle0;
@@ -13287,7 +13273,7 @@ const SmoothlyTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (index.h(index.Host, { key: 'e37ee9c69d4203086b90b3df56a50c307be0ed53', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '131bf7211f7f7fba25d5ec5e9ccb1d67d1faeb9a' })));
+        return (index.h(index.Host, { key: 'fc2b929afcaaae8784a250b33c1784b51f6069d0', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '0647311dac1ee867e9bde641f11f7ac581179d33' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -13311,7 +13297,7 @@ const SmoothlyTableRow = class {
                 event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: '26b51afe8b0d1d04ce7ffd643df00f79ea492546' }, index.h("slot", { key: 'ace4dd3aaa0a685d96401ef3b84fa7f2b380e71e' })));
+        return (index.h(index.Host, { key: 'd1154a9f154063757b445c703fd472bf61789038' }, index.h("slot", { key: '6365abd761556dc9a04d3d03ee97168b2b4f029a' })));
     }
 };
 SmoothlyTableRow.style = SmoothlyTableRowStyle0;
@@ -13335,7 +13321,7 @@ const SmoothlyTableRowGroup = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'c1c98b13605761a61d975959a63f407a45c873ed' }, index.h("div", { key: '09ef49d03449a7c78f9e00f0c5243ea9b8031e09', onClick: () => this.clickHandler() }, index.h("div", { key: '00c310249c3a2d02906fcf1837a820f1b50edbf6' }, index.h("slot", { key: 'dfc87ab47be467c0c76578c845576e3b29466868', name: "start" })), index.h("div", { key: '6c6a5818a3d032630574a80bd94513efabe81457' }, index.h("slot", { key: 'ad30455a1921ec94c11d3c77ba6ad3958fa76ee3', name: "end" }))), index.h("div", { key: '04b4cfaeb35b00e40387476e07c42ab606e78b36' }, index.h("slot", { key: 'ecc8aa469ede8e1afe92849989dd3d52791c373c' }))));
+        return (index.h(index.Host, { key: '7e997a6abf62fee39b266f148a6157a880182d44' }, index.h("div", { key: 'be5ed254470787857415ee61dcbb275bdcad6938', onClick: () => this.clickHandler() }, index.h("div", { key: '7bfb0dc7d14be32c973d7524fe5dd8b339b4b70a' }, index.h("slot", { key: '277d81983cc2f7c23bc50d3c41175c161e461b86', name: "start" })), index.h("div", { key: '813cab4c382c1cedc39b7286898074ba4ada84bf' }, index.h("slot", { key: '86cc29d007effc636195285f8ba217fd772b26a6', name: "end" }))), index.h("div", { key: 'bc3b16d26f262c19bf5e0fb957db15dcbfcaf332' }, index.h("slot", { key: 'ab625e1e87b7eabeb8ef5d84d2174e5a70cdeafd' }))));
     }
 };
 SmoothlyTableRowGroup.style = SmoothlyTableRowGroupStyle0;
@@ -13404,7 +13390,7 @@ const SmoothlyTabsDemo = class {
         this.extraTab2 = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '72c327f241abe8eba0ea1f6f3d45f741111c1654' }, index.h("div", { key: 'afc9fb7293f4218897ecac534c9a19494a84aa1c' }, index.h("smoothly-button", { key: '7bddc66687a0e3d70c4f235460a880ade881a1e3', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), index.h("smoothly-tabs", { key: 'c92f003b97dc79359bb210034206ef40461b5043', tabs: "multiple" }, index.h("smoothly-tab", { key: 'd07c2b2c27d885ee4dddbe764a4e360f0bff3198', label: "Single Tab", open: true }, index.h("strong", { key: 'ba858a55104d8876bea0c17cf2d5a88db8c3876b' }, "Single Tab content here."), " If only one tab is available setting ", index.h("code", { key: '5bcc8f548735e06d707095c2e1bf8891ca47d0c2' }, "tabs"), " to", " ", index.h("code", { key: 'f23c9de89114d89ef5ec987896aa39abf3c29d78' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (index.h("smoothly-tab", { key: '8290c5645e501891b54f3e10edef7be91d4c533f', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), index.h("div", { key: '066240ea6a958667ff5448c1bcac5e47d718c0bd' }, index.h("smoothly-button", { key: 'ffe4d9cdd63e06dc2de43bd6169e5f838b8b7d5e', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), index.h("smoothly-tabs", { key: 'f177e0e7a917947be9c83b6ed05462bf41c7266b' }, index.h("smoothly-tab", { key: 'f0612a6b161356d98da9e801c4ffc8683d99e8ef', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), index.h("smoothly-tab", { key: 'd936f2bc1d81026f45b3e52785e1cbf40ad22584', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '107d2665d90cb3d5f94691b3422e2aad02dfe78d', label: "test2" }, "this is a test message!"), this.extraTab2 && index.h("smoothly-tab", { key: '315b4005ef420631c7c5058973cb558117c6723d', label: "test-extra" }, "this is a test message!"))));
+        return (index.h(index.Host, { key: 'b62a8ae826fac8ab9bd918d17c9bb4bb2cde74a4' }, index.h("div", { key: '6319af78c4c93f0c1afa7964f539d1da3aea06de' }, index.h("smoothly-button", { key: '528e4e880dcf7d490649f5cd15f275b7d5b20c9d', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), index.h("smoothly-tabs", { key: 'bbf8219b3d9f2278494b6c1970457ef78f593535', tabs: "multiple" }, index.h("smoothly-tab", { key: '176284720bf9b0310f45df70cde15719a9b9ac45', label: "Single Tab", open: true }, index.h("strong", { key: 'd5d108161a9cc3057ab5a012e9a229b3d0bac2d0' }, "Single Tab content here."), " If only one tab is available setting ", index.h("code", { key: '4f61bc9ce5acea5b491ab37ba1401a79dd874840' }, "tabs"), " to", " ", index.h("code", { key: '172992639ebf1fc3910deaec479693bf18fee99f' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (index.h("smoothly-tab", { key: '0eb7431accdfa9eec7fe1c950000217081ba3a51', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), index.h("div", { key: '78eb4b4f24b515f3f5e2e133c7d7d91c2613d8d5' }, index.h("smoothly-button", { key: '401c9f0313b43813f32bb2b9d5af044496712baf', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), index.h("smoothly-tabs", { key: '3509d3b8e2384a5b76ac7025113fad7ab6ed811a' }, index.h("smoothly-tab", { key: 'ee2f6481f5528915afb26923316f7cfb21e17bcf', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), index.h("smoothly-tab", { key: '49a14aaca20b3956cf2c5bb80793f407c050ca86', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: 'af7143a98a2e0d6bdd20808e4da81bef8a35b67f', label: "test2" }, "this is a test message!"), this.extraTab2 && index.h("smoothly-tab", { key: 'e5b5ba3d85119c4e3450be4710fc6007931b0092', label: "test-extra" }, "this is a test message!"))));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
@@ -13418,7 +13404,7 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '40a0ff2802a1c64a3c2a6ada0ad377e272009029' }, this.color, ["tint", "color", "shade"].map(variant => (index.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
+        return (index.h(index.Host, { key: '8223831dfa84ea7a14906e3006e97db1f158443d' }, this.color, ["tint", "color", "shade"].map(variant => (index.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
     }
 };
 SmoothlyThemeColor.style = SmoothlyThemeColorStyle0;
@@ -13470,7 +13456,7 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5204aa597b85df3c3ac12233649f8cf8164127b9' }, index.h("h2", { key: '57b78b0a4b5b1bdb0f90d7985156a69e62f5f98c' }, "Theme"), index.h("smoothly-theme-picker", { key: 'f930634ecc8b5bbabf3c60175a8f4c16ee84bc78' }, index.h("smoothly-item", { key: '51bd559329a9451b32e72a373985a192f9f92490', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: 'c377ac2e1f5d373542506ec88c15c73bfc609f5b', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '54b38107cfde2793a51b73802c0ef36b593ca202', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '4b6622957df74c9e41c49468bbac3c28256806eb', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '862bcbd70023d41d17bc943324aa874fc951d254', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '5b17d1e8675efe9fcc1dd4710af81a4e001d1f98', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'ea344d30e0f94e1593b0ac7509dc62569d2e3c10', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'ed30e910005ffb617257482de4722a7c3fba3859', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '7337fb32dcb51331555f2e88cf9a3bbbe4936d3b', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'd43ed0e1791ba7590c13b3d04996c9c46f1bceb3' }, index.h("smoothly-theme-colors", { key: '03b876ff6d7cc45269a8f898bca7eab70e8014bc' }), index.h("smoothly-theme-guide", { key: '1caa1cd77f9f2a0b7d0db668ec791c782f5de366' })), index.h("smoothly-button", { key: 'c93b53c580d4dba49b10667745db597b5b4f43d6', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '96b8592d9b8973702c63e75a7b2196e5e2533a80', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'e0109f110a7bdc9172c6c530be55c0e86f0529b9', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '9b1c8cd15215fa6999d733b970046fa1a8646272', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: 'f3a9bce2ea9ea921ddc0cdd0af59f278be0808fa' }, index.h("h2", { key: '0cde0c59c478d9793c78277783ddca18a2c46dd6' }, "Theme"), index.h("smoothly-theme-picker", { key: 'cb06e7228d22bfc7fa5231b38ccb5bd281026751' }, index.h("smoothly-item", { key: '37a46c34ec4767c282487d34c0178ac96d4f0a27', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '961b69baea8b3760c095834bd8604d93ae1e3c74', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '23989e21f124308a39da7e657726916184e5ab72', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '93ffa3949d02f68f7a7dfa5f79b351a8eb8b7f56', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '98bc1c21a725ae552e75e7133b32406c15c21c5b', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '73481eca7b2759efa8ed022eda4d9ff4388e8068', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '9402ca492b8d2f7671bd6134f4bc89d0ea2da416', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '6e1e73a3d57216f482d5dc2d8054374c0501b33d', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '71d27357073891f1bb129289464955dc85458e96', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'abf005c54cf96f66cedbe5a407b6bcb6c9362c34' }, index.h("smoothly-theme-colors", { key: '9efd5049331fcf93907122e74a3ab0c82bc67aa2' }), index.h("smoothly-theme-guide", { key: '60e3b296b89f628e3e0f180c450f7186e5295286' })), index.h("smoothly-button", { key: '0bbc0d57c16f3171172f4cc5a1b5f6d2ebc9d9c6', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '5f52fb18a8c0ceb9b8fc280e04adbb838a8a41b2', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'faf14655d01668c8cebec6968bb4d0b67c2bc4f1', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '763387d9b3f7960b6dc0a69031296a23ef793f77', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -13484,14 +13470,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index.h("smoothly-display", { key: 'f6d98f92a14a0fc8aa2eaf6fca11953df5416dac' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index.h("br", { key: 'b6a79de4474b5979e44001b57aa6ed80e45a927c' }),
-            index.h("smoothly-display", { key: '5971890d7b24cf30accb63e8eb83a55c1088ac47' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
-            index.h("br", { key: '6a3e852032f7238b881ac28168d5991e3c538acb' }),
-            index.h("smoothly-display", { key: 'ed5aaa96d6638e8fbe9dde98df3ff04b12f55323' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
-            index.h("br", { key: '0787491b4d0c0b135ab574e10323ab5b12e03381' }),
-            index.h("smoothly-display", { key: '975d9786fbcaf4b86040de40a8ecfef84da9b512' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index.h("br", { key: '4c874468b7840e28dd302ec1e4f263b76c17c01c' }),
+            index.h("smoothly-display", { key: 'e33cb6c2fb224049dc0618a101d4a34ce4a97979' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: '3a5221a91fb24771d7f00c44ed8f56f21c82dff0' }),
+            index.h("smoothly-display", { key: 'a84c2e5055c178dadf46cd2b977bf1a262cb7f30' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
+            index.h("br", { key: '76ef02c10cd940ed85f86a0d68cf91c474ae5231' }),
+            index.h("smoothly-display", { key: '0eb2188895599cb3925dd1ea319115e7207f638b' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
+            index.h("br", { key: '59f39e2da1a7c941fea84706d87575ad8c0f3a38' }),
+            index.h("smoothly-display", { key: '56727256e187ecfb71ef10626b86db6a1bccf755' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: '02f2dfbbf17e60d7e7981b2180cc5fc1cfa8531d' }),
         ];
     }
 };
@@ -13506,11 +13492,11 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: 'db2d5f6f90541c806ddaf8c358ac6e30b9ff5830' }, index.h("smoothly-input-select", { key: 'c17ae0633597ecf5ccf3e1f7d1ec9677ad242597', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'bd78dc0c77ab62560dfa7dcfd6d70eb6c20822aa' }, index.h("smoothly-input-select", { key: '9f4134cf70fe712423e5102d196a8310cb1e189d', name: "theme", looks: "border", onSmoothlyInput: e => {
                 const element = document.querySelector(`#${this.element}`);
                 if (element instanceof HTMLLinkElement && typeof e.detail.theme == "string")
                     element.href = e.detail.theme;
-            } }, index.h("label", { key: 'af96a3c304f256c6767023e0210a9c6208700dd7', slot: "label" }, "Select theme"), index.h("slot", { key: '557f04e0ba9f610adf82414f719e40abad059158' }))));
+            } }, index.h("label", { key: '233405b26871eab292f6c258fbc43464515f7c01', slot: "label" }, "Select theme"), index.h("slot", { key: '14656f7d3466ceedbb9db0a1733c07978c8bad68' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -13534,7 +13520,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index.h(index.Host, { key: 'ec8f47d938125fcd914e95317e43a3fade4da46f' }, index.h("button", { key: '8ffe64ff3cd7e8409b592952dcae50ae6ae5317c', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'f7476ccbe83c3ce84fe355622d915befc823ee01', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
+        return (index.h(index.Host, { key: '93ae759c47e932319428b842eb408698c2849b31' }, index.h("button", { key: '5ed72f7e5cde56e49dc9d3116dc9fd507d496d4b', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'bcc686be4b1477a7cb469263d8e0bc02f0ffadb8', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -13547,7 +13533,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'd6c4ae741ea4f4f815c87c2743f6fb3f7a85c344' }, index.h("h4", { key: '8b4e2010e724d1267a7b040ab78c0c815a645bf5' }, "Toggle switches"), index.h("div", { key: '0c1dba0cdbce5a174ada0787e2a2b23c06f4b7a6' }, index.h("p", { key: '00014c08a75d66cc57ea2f0dd79baa7a628e9885' }, "Checkmark"), index.h("span", { key: '4db3d19f6ec17e65f48097714737f6061dbbb821' }, index.h("p", { key: 'cd9c1b373b5b763bf8a6e69230699eba453095b0' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '5e7e3e383e8cf8984a325c8fda9fe4619d122ba4', disabled: false, size: "tiny" })), index.h("span", { key: '7c83e7be82784abdc8f8448548cbfb57defb06c4' }, index.h("p", { key: '3baa3008da0aa91fbdcc24542c8bd82caccc2f68' }, "Small"), index.h("smoothly-toggle-switch", { key: 'a38dd162967508f7a3ace056f67cc916ba8ffab7', disabled: false, size: "small" })), index.h("span", { key: 'b5ab3ba149715c51f71a68602e5208c647a26402' }, index.h("p", { key: '382e5f78c0be9334668285b3115d6aa419168145' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'e571205750b886ce89a9730813463424c85b3955', disabled: false })), index.h("span", { key: 'ca1c44762b825b6c644b3f611f68c5b8f5f6071a' }, index.h("p", { key: '89b22ad8b2454a4775e3b2f36b0cf15583ef6e37' }, "Large"), index.h("smoothly-toggle-switch", { key: '7f69aaf29adc6883a1c4b71a33bfe7013388754c', disabled: false, size: "large" })), index.h("p", { key: 'e611b7a036647c17fd1d6dbf4f2c0b37d3ce812c' }, "Colors checkmark"), index.h("span", { key: '6692a647c4257fe0e0bec499271f6b5938e4d841' }, index.h("p", { key: '41ac444dabe7fc4e205902d11a4abb2b55f4a2d6' }, "Danger"), index.h("smoothly-toggle-switch", { key: '7362628dbad8aaddcd1f1b873f6d3904644e7a85', color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'e4b8cf23eea564de360d5dc13fa8455fcbec81b8' }, index.h("p", { key: '3b9a01ada24928e3982539a63f17ca9b27c4bafd' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'a958e66bca1c0cc4167513df6c1586caabd43c5e', color: "primary", disabled: false, size: "small" })), index.h("span", { key: '95bff6b738c9c61890befd5e6be8c982345a6086' }, index.h("p", { key: 'e3a015e6164000997918c024a8cb14b8022326f7' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '449acc4db99c83ab97eaa66434fafb3ea9f8c313', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: '06d391c83b0fd074949d644fe61cdcebd0fb9016' }), index.h("p", { key: '9a1dc560980be939e298acb499848e9a2a1b30d5' }, "Colors no checkmark"), index.h("span", { key: '8d965b798d2f880d7bf481bc41be88c2293dd4d8' }, index.h("p", { key: 'be0e5559f7445e8cae4c646c8fa7918ccb571062' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'bcc469fcb924a74b4f7c405e96d172e624f40184', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'c71cb3da25adc7c84422c8a828e19ce25746a614' }, index.h("p", { key: '73537ca8cceb976d5b81162db0b9e3b5118ea296' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '2f3c043de1844babbe36c6ca1b17893fd4acca51', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'a8ac5632f30e4b5918befa1f16b814c846715c9c' }, index.h("p", { key: 'a6899d5cc2586aa580ed5a85d1587526f37198b0' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'ff585e227f319d0e8a94c8999bf8261d48e5079c', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index.h(index.Host, { key: 'c622506b07d0d5d4f8f7bb65ec0b808216ac71f4' }, index.h("h4", { key: '8f5bccb8bf300780d0f50a9b66a8433a2a6e4423' }, "Toggle switches"), index.h("div", { key: '5c94e88e5016e60741c95aecb3fccf42f2ce2bf9' }, index.h("p", { key: 'a842fa899ab91738c7748ba2efb0f727a26c3ec5' }, "Checkmark"), index.h("span", { key: '0a89a7c406c050db45ebefd7426bca1f44748e36' }, index.h("p", { key: 'd70ab8939a0ce332845cb41af0e21c777c0ee73a' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '52c88ff1e6e9e2f8989b7aef24e1e66c983e298a', disabled: false, size: "tiny" })), index.h("span", { key: '4a0a857accdc647288cf7f3c349f09964a5de0df' }, index.h("p", { key: '488c5fe7676ea3641f4222ceb658c2c026fcabc1' }, "Small"), index.h("smoothly-toggle-switch", { key: 'c8fee404136527423d490fb03b49ed387b67419a', disabled: false, size: "small" })), index.h("span", { key: 'c319ed9031d6a6420510428088c784305a09684c' }, index.h("p", { key: '42e785cdd2d12032f310e58cd8b2842748b2cdda' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'f5124d5042159df3b4fcc164b0efb4adcf1b01da', disabled: false })), index.h("span", { key: '8113acc2967dca4ace18ccf45f97f8b7daac4221' }, index.h("p", { key: 'e19f0f93cd75db150867e10f48b009ee4eb0cb4b' }, "Large"), index.h("smoothly-toggle-switch", { key: 'c4beb63b9038e1d3589ccc30d243eb0236548d88', disabled: false, size: "large" })), index.h("p", { key: '9c2d02b48add10ad48387ea0c4b9f2450dd39cc6' }, "Colors checkmark"), index.h("span", { key: '7f91266d633dda37b21f3b9c162f791ac4b38746' }, index.h("p", { key: '9d86ab646d05c081851046b020c2cbbd765acae4' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'fb3dc5c94a4a05d727772d762a5abff0fa202e82', color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'f581c530b32021d2a0847fec0f17d95be39d8d7e' }, index.h("p", { key: '6a0ecea4b4fe03f88838a36e5ec9386da4272791' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '0f862750bacdc23bc516220586c2a47dc3ce649e', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'ab0980c909071f57d9a13f22d88d4301b583067a' }, index.h("p", { key: '4b0a69324cf7b8f04bcfdbf35731a43c37aade9f' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '6442d57ecdb61558e7cb6048c586f46b3e3941b1', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'bb47bc7dd98ceb86bfbd0e28391321731f95dad5' }), index.h("p", { key: 'c64a2ff112b72d9cff6afd6c371a3da7083cd1f1' }, "Colors no checkmark"), index.h("span", { key: 'd690a84b3d08750e3e2ff7cd6473feb0a715b4d8' }, index.h("p", { key: '849781f19a7523b22f8f0dffe0fa15185d38de2f' }, "Danger"), index.h("smoothly-toggle-switch", { key: '29788801258d901f6cc0780bee771ae78da455e5', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '33fabad2c343849cdd76aebee35b8f99f25d86ba' }, index.h("p", { key: '006efb42b3d98028594a306799d12a4a16f0fc75' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'af3f58fbcf78c86ba6bf56735977ababf19d1077', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '6e44a069cdfcc16f35dedbd02e394eeb56ed7197' }, index.h("p", { key: '8ded09c92723b570e0a8806adab267e29b878a1f' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '676edb5d7c66dc6882234361f64d57e07a14b606', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -13578,7 +13564,7 @@ const SmoothlyTrigger = class {
                 result = this.disabled ? (index.h("slot", null)) : (index.h("a", { onClick: e => this.onClick(e) }, index.h("slot", null)));
                 break;
             case "button":
-                result = (index.h("button", { key: 'e4232aafb14aed56dcd059d8c81ff867a4f5f185', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'ebee014e1632d5eb8a7cfc62a54a683262dd0263' })));
+                result = (index.h("button", { key: 'fc636c1efded46fbc488da77da59375c0e6042e9', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'cf9af420179685f2eb7edcff63de43eeba1639a4' })));
                 break;
         }
         return result;