npm - smoothly - Versions diffs - 1.4.0 → 1.6.0 - Mend

smoothly 1.4.0 → 1.6.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 (449) hide show

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

@@ -104,7 +104,7 @@ const SmoothlyAppDemo = class {
         this.baseUrl = undefined;
     }
     render() {
-        return (index.h("smoothly-app", { key: 'aa798117a543b094b87cd4f794e41c2c62eedcf5', color: "dark", label: "Smoothly Demo", home: "/root", ref: e => (this.app = e) }, index.h("smoothly-trigger", { key: '8576545a5f1408fe488c80ca5a0856650d3d5b49', slot: "nav-start", type: "link", name: "logout" }, index.h("smoothly-icon", { key: '1a9947b787c40e5d5b12c8477f1c4ffe393e0474', toolTip: "Log out", name: "log-out", size: "medium" })), index.h("smoothly-app-room", { key: '9653a86cd2f346ffc301960432f8eeaf690e0e70', path: "/root", label: "root" }, index.h("smoothly-theme-demo", { key: 'fd749cb147c01fb958ed096d077a029de1f26697' })), index.h("smoothly-app-room", { key: '727ba15cef2a69ab89c28f552d44990a6768dae6', path: "/links", label: "Links" }, index.h("smoothly-input", { key: '44b3a95f3ef5c88763f4615198361660756066c6', type: "text" }, "Default"), index.h("div", { key: 'ec9caa80e9960bcaa73944459f6f04bd5293c67d', style: { padding: "1em", maxWidth: "12em" } }, index.h("smoothly-button", { key: '1763ca643449adf56a5709b716adb8f2a9af898c', fill: "solid", color: "danger", link: "https://google.com" }, "open"), index.h("smoothly-button", { key: '090a3ef85119ac1fd24e96971077d386e4b431eb', fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", type: "download" }, "download"), index.h("smoothly-button", { key: '075b6d63e37e741003b83a4ed5a0852f5bdb32ea', fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { key: '67a4e3426af4c0195af3958534ebe696e79d7f64', disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { key: '469b300005825ea47e9ff2b6dd1546c1f240d320', type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), index.h("smoothly-app-room", { key: 'fa597eed63894a2b79230662218b4b4bb0a4123e', path: "/form", label: "Form" }, index.h("smoothly-form-demo", { key: 'c3c3fc18571c6c7749ebe336c101b3c6958c6ce5' })), index.h("smoothly-app-room", { key: 'e74f975d2821661b1252a8d39abce539474b91d6', path: "/input", label: "Input" }, index.h("smoothly-input-demo", { key: '2622b3979883e8b22ee24549e088235c4def37f7' })), index.h("smoothly-app-room", { key: '281e375aa7899aca4a72b1f28e5c35dba5afe47b', path: "/button", label: "Button" }, index.h("smoothly-button-demo", { key: '1aa500d67a2db7debedcd51a1dab5540b7e76839' })), index.h("smoothly-app-room", { key: '52cca01be8d244ba27a9a0de84a7e9f6b38de862', path: "/dialog", label: "Dialog" }, index.h("smoothly-dialog-demo", { key: '2ead6d7fdbccfac18eaca281324a022bb2476683' })), index.h("smoothly-app-room", { key: '1293f71f581304e67b7b23fd3ef7ea5b5358672a', path: "/display", label: "Display", icon: "eye-outline" }, index.h("smoothly-display-demo", { key: '081a6770103ae7e31f862d2431932a23e3c44883' })), index.h("smoothly-app-room", { key: 'edf9fc7b7c778e319f7072a06604962e9a887d45', path: "/table", label: "Table" }, index.h("smoothly-table-demo", { key: 'd4fd3e790dbff9761b7900611870c4de8ba3463b' })), index.h("smoothly-app-room", { key: 'def6a10fe0cb4a2bb2c660a7a08d92f66bdefaf7', path: "/tabs", label: "Tabs", slot: "nav-end" }, index.h("smoothly-tabs-demo", { key: 'a612be377600630739c788f3e76978653b5750fd' })), index.h("smoothly-app-room", { key: '4b37f6e8cc32b66eed31354be28c8979e5a44872', path: "/icon", label: "Icon", content: index.h("smoothly-icon-demo", null), slot: "nav-end" }), index.h("smoothly-app-room", { key: 'fc40658c71e321e7cd65fc4c0583a2799809cca3', path: "/redirect", label: "Redirect", slot: "nav-end" }, index.h("smoothly-button", { key: 'b4475ca298c2fb6598dd75c4a16a0bd47c234fa9', type: "link", link: "/input" }, "To input"), index.h("smoothly-button", { key: '402887f2f0c5477ce46105be52197f5073a2d5c6', type: "link", link: "../button" }, "To button"), index.h("smoothly-button", { key: 'cf2d2d8c4936eecc243cf121f5d40bd94d1006f6', type: "link", link: new URL("/hidden", window.location.origin).href }, "To hidden"), index.h("smoothly-button", { key: 'e8354e2f81be7ec324ae734784022acdb02162cc', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '62411c9f8b6d9bb88ebef3fe531e912d2b27f97e', type: "link", link: "nested" }, "To redirect nested, relative path")), index.h("smoothly-app-room", { key: '6b7fe4565b60a0f76c36ade149536daca1eff5b0', path: "/hidden" }, index.h("p", { key: 'c87cebb277d5463d07165e3fb7b8068dc317735e' }, "hello world!")), index.h("smoothly-app-room", { key: '9a06e5a59ff5ff8db9b465826653f26f477ebdb2', path: "/redirect/nested" }, "this is a nested room")));
+        return (index.h("smoothly-app", { key: 'aa798117a543b094b87cd4f794e41c2c62eedcf5', color: "dark", label: "Smoothly Demo", home: "/root", ref: e => (this.app = e) }, index.h("smoothly-app-room", { key: '85bdb920a4cec5690305c57ef11b4b73f447c0bf', path: "/" }, index.h("section", { key: 'd47727e787b05a0d0967b8163c9c58d06fe51aae', style: { padding: "1em", maxWidth: "32em", margin: "0 auto" } }, index.h("header", { key: '03c54ddb20c1dcf03a60064cfedffa85ca0ced63' }, index.h("h1", { key: '99d367240e9e297cc1add3ef17025174f3c5c755' }, "Welcome")), index.h("p", { key: '9a40f185f369a48250800c705eb696a3bd26c8cc' }, "Smoothly is a component library written in ", index.h("a", { key: '89580a4c8ecc4c51db342447b1a38f99ad171234', href: "http://stenciljs.com" }, "Stencil"), ". It can therefore be used across web based frontend toolchains such as React, Vue, Angular, Svelte, and even plain HTML."), index.h("p", { key: 'b6fff912b28bb704fabd933b4f8bb20e732e05c7' }, "This is particularly useful when trying to unifying the user experience across projects written in different technology stacks. It is also written to minimize the amount of code you need to write to achieve a nice user experience."))), index.h("smoothly-app-room", { key: 'deac2fa2f54e269eee396c3d22edd4356ba46b27', path: "/form", label: "Forms", content: index.h("smoothly-form-demo", null) }), index.h("smoothly-app-room", { key: 'd126eddf7b846dc7867f76a1e79e8c0aea3dc104', path: "/input", label: "Inputs", content: index.h("smoothly-input-demo", null) }), index.h("smoothly-app-room", { key: '631bc052402b12971f763c9f67b5e765576af335', path: "/table", label: "Tables", content: index.h("smoothly-table-demo", null) }), index.h("smoothly-app-room", { key: '404c6baa19f137d8cf7e4ef1ea8b4d6b7acec7a5', path: "/button", label: "Buttons", content: index.h("smoothly-button-demo", null) }), index.h("smoothly-app-room", { key: 'ca2c1e442eb84bdd05144b47ebeaeec665921763', path: "/icon", label: "Icons", content: index.h("smoothly-icon-demo", null) }), index.h("smoothly-app-room", { key: '3ef2dfe590dcf35c374f66b01d7461c4bc5d3315', path: "/theme", label: "Theming", content: index.h("smoothly-theme-demo", null) }), index.h("smoothly-app-room", { key: '996329ff5578821430839a8329602557d8b35d07', path: "/dialog", label: "Dialogs", content: index.h("smoothly-dialog-demo", null), slot: "nav-end" }), index.h("smoothly-app-room", { key: '10c2ce61fade60508756db67a65cf875a67b8d31', path: "/display", label: "Display", content: index.h("smoothly-display-demo", null), slot: "nav-end" }), index.h("smoothly-app-room", { key: 'dae62864d7bf7d39bba3406696ac6cf3b557037a', path: "/tabs", label: "Tabs", slot: "nav-end" }, index.h("smoothly-tabs-demo", { key: 'e27a260608972b5433792874a20319707f63d892' })), index.h("smoothly-app-room", { key: '504d400a32ed9c9788e524d0fd45540f1cce847a', path: "/links", label: "Links", slot: "nav-end" }, index.h("smoothly-input", { key: 'e7ceaa22d7d81f3de43811b3fb5b3dc134f3e5bb', type: "text" }, "Default"), index.h("div", { key: 'bbdfd8ad120568fe607633fb588ecc67d591bf2d', style: { padding: "1em", maxWidth: "12em" } }, index.h("smoothly-button", { key: '1b5522a4fa3186436eb48f5a49142abdc69859fe', fill: "solid", color: "danger", link: "https://google.com" }, "open"), index.h("smoothly-button", { key: '17ae745a6e90dd94dc51d5959e10b25d5273bee7', fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", type: "download" }, "download"), index.h("smoothly-button", { key: 'b127a29fd4e4ea738f436c64b52e682ddf8a84cc', fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { key: 'ed71219b2fb38b3016ff09dee36b0031c270e5a6', disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { key: '8fdff6cb0ed7981ff19a1fbd9ad81da0eda547d8', type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), index.h("smoothly-app-room", { key: '8bb16ffa57c618efaaae0a2d21c32d09dbd65347', path: "/redirect", label: "Redirect", slot: "nav-end" }, index.h("smoothly-button", { key: 'c6815e44d4787c9ad54c30115f68f63d209454cd', type: "link", link: "/input" }, "To input"), index.h("smoothly-button", { key: 'a0faa90c3f06b94020e4c2c4ad74fe8b9523654c', type: "link", link: "../button" }, "To button"), index.h("smoothly-button", { key: 'f2f54a2efa26bfe2c586cc1770b2c4892d00224e', type: "link", link: new URL("/hidden", window.location.origin).href }, "To hidden"), index.h("smoothly-button", { key: '780dccc231035cdf42b814ff25ab54f14d155e49', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '53b5ea0d44d241691022ac0cb20bb2dacb9b4b11', type: "link", link: "nested" }, "To redirect nested, relative path")), index.h("smoothly-app-room", { key: '0ea49f1e50e0bbd1391e159cda3a0220cba3c4e3', path: "/hidden" }, index.h("p", { key: 'da7730eebeb034ef0e49bb72e257d55aa8c3d0d2' }, "hello world!")), index.h("smoothly-app-room", { key: '007d7288fdd999a8212da09f70ff8edfeb4e5ae8', path: "/redirect/nested" }, "this is a nested room")));
     }
 };
@@ -1559,7 +1559,7 @@ const SmoothlyAppRoom = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '145d89e87e5bc7988a2c37b30321e8e969724508' }, index.h("li", { key: 'bf5a642b87750bf78273b9eb856187ec5d0dfade' }, index.h("a", { key: 'b22e1fcf21a1d4cb60d73b967cca67e639ec539b', href: typeof this.path == "string" ? this.path : this.path.pathname, onClick: e => this.clickHandler(e) }, this.icon && index.h("smoothly-icon", { key: '7a40b124bcda86b48dcd10a32a240c413c2851b6', name: this.icon }), this.label && index.h("span", { key: '01cb8b9aa06d17a13c3eed564e870fe4fba2e438', class: "label" }, this.label))), index.h("div", { key: 'a75f04cbb0aca3574f8b309cf88fa96c82a461aa', ref: e => (this.contentElement = e) }, this.content && index.h("smoothly-lazy", { key: '37efba7cfc89753339c41038f6f69e6c380ee187', content: this.content }), index.h("slot", { key: '0b5a9394b9b83f153b73c6de35365a3cfc58a7da' }))));
+        return (index.h(index.Host, { key: '6eab15e4c0747f152c898fcb1969460af052d108' }, index.h("li", { key: '2db436defe1028a66ef19a2bbd5348bda5ddcf28' }, index.h("a", { key: '120eb06853ed283b30aea0151eddf1e09b591c74', href: typeof this.path == "string" ? this.path : this.path.pathname, onClick: e => this.clickHandler(e) }, this.icon && index.h("smoothly-icon", { key: '6c3d5c9aa929c3054f69589e791af769ddc388f0', name: this.icon }), this.label && index.h("span", { key: 'de38c06e82e85b9a4d6d94ab5e56211d8f121142', class: "label" }, this.label))), index.h("div", { key: 'f73931b20dd9a48bfa911129591e31749875917b', ref: e => (this.contentElement = e) }, this.content && index.h("smoothly-lazy", { key: '36ffa7a77bd7317a04b84f82a1846d4ca8f41a8d', content: this.content }), index.h("slot", { key: '6ccdfed94a22ad7ece2388fba3d4734aa6a2b509' }))));
     }
 };
 SmoothlyAppRoom.style = SmoothlyAppRoomStyle0;
@@ -1590,14 +1590,14 @@ const SmoothlyBackToTop = class {
             "--bottom": this.bottom,
             "--right": this.right,
         };
-        return (index.h(index.Host, { key: 'b2fe364dcdf392c75b51a6c0bc90802ac2c9b44a', style: cssVariables, onClick: () => {
+        return (index.h(index.Host, { key: 'baf97943484b567fb756707ac58a22f1445fa91a', style: cssVariables, onClick: () => {
                 var _a;
                 return (_a = this.scrollableParent) === null || _a === void 0 ? void 0 : _a.scrollTo({
                     top: 0,
                     left: 0,
                     behavior: "smooth",
                 });
-            } }, index.h("smoothly-icon", { key: 'd0d21c03ed49fcc248ab89c8a5f54de6d3c995ac', name: "caret-up-outline" })));
+            } }, index.h("smoothly-icon", { key: 'd560b65f6c2133406a5dedafb59c5e3c513587b4', name: "caret-up-outline" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -1649,7 +1649,7 @@ const SmoothlyBurger = class {
         this.history = result;
     }
     render() {
-        return (index.h(index.Host, { key: '6cf2501d1c4ad5a0a2865dd41667e40abffe756a' }, index.h("span", { key: 'c7bb85eb13d1acb54554a6456aa279f1e8593da8', class: "burger" }, index.h("smoothly-icon", { key: 'b7b51da7eb3de4c290ba0f4f0c9f9a44fe494c00', name: "menu" }))));
+        return (index.h(index.Host, { key: '7361aec3225da683952809dbd6dce297e09b84da' }, index.h("span", { key: 'f17f0f059c3263f334df3733b7d1b6e977fd6d0c', class: "burger" }, index.h("smoothly-icon", { key: 'd5e02f20a96f19685e5f5d8234d50f8c58911da2', name: "menu" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -1674,7 +1674,7 @@ const SmoothlyButton = class {
         this.link = undefined;
     }
     render() {
-        return (index.h(Submittable.Button, { key: '1350144b97a2a5fdc24d5b53678ea9d7f97b5b71', disabled: this.disabled, type: this.type, link: this.link }, index.h("slot", { key: '315355a1987956c9741a03819de181d2f626a205' })));
+        return (index.h(Submittable.Button, { key: '9e1e36b3efacdf206d7366bae028b7831056c611', disabled: this.disabled, type: this.type, link: this.link }, index.h("slot", { key: '632f7e7c2d75774dd32754b59d8299274fe5dc88' })));
     }
 };
 SmoothlyButton.style = SmoothlyButtonStyle0;
@@ -1711,7 +1711,7 @@ const SmoothlyButtonConfirm = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '316a3f9fb74039c7a6b80c0b665582c9c016176b', warning: this.clickTimeStamp }, index.h("smoothly-button", { key: 'c4e4a4845ccb4ca9b599957eafe177494f03f124', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("smoothly-icon", { key: 'd7763547cf321bbff31ce9fa437c0d7753b4767c', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), index.h("smoothly-button", { key: 'f3e3af94612519e43694139c91bfca618293af94', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("slot", { key: '38fbabcf48c532abea1fde79454acb5785955b77' }))));
+        return (index.h(index.Host, { key: '81ee6d6cd788b6c2c191a173211228f2282d9a48', warning: this.clickTimeStamp }, index.h("smoothly-button", { key: '21053d68c60f203e70b0381d774550ab74d58dc6', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("smoothly-icon", { key: '9fe4fe83f179209be811c930c6b5546b344ececb', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), index.h("smoothly-button", { key: '81191f3fd3c2d1aaa897ea8e4c608c79477ece27', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("slot", { key: 'be8412810360c30abde1d4bcfd81f10f2e9cfd06' }))));
     }
 };
 SmoothlyButtonConfirm.style = SmoothlyButtonConfirmStyle0;
@@ -1725,9 +1725,9 @@ const SmoothlyButtonDemo = class {
     }
     render() {
         return [
-            index.h("h2", { key: 'bddbcdcb9ce5d83b6bfa7b6ecfdc6aa39a2eb566' }, "Buttons"),
-            index.h("section", { key: '1a68d5f5e150439e623fa625432c0b76d84cb4da' }, index.h("h4", { key: 'ce297567bb70f6f61cb5c9adfce457b96a727dee' }, "Confirm button (two clicks)"), index.h("div", { key: '6b8561f4fe3001800c5a058e01a023361e8ff5fc' }, index.h("smoothly-button-confirm", { key: 'c26ec515d6e59142694394336d6c408f9d77d5c2', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), index.h("smoothly-button-confirm", { key: 'bc1fe30703e9469b80851611286309c2465b6708', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, index.h("smoothly-icon", { key: '2c5ad6e48b66c4aac2b85dc8ea27b292b9229054', name: "checkmark-outline", size: "tiny" })), index.h("smoothly-button-confirm", { key: 'b00eff042a7e4ad8d84dbd5928499dfe93e0aade', name: "confirm-icon", shape: "rounded", color: "danger", size: "icon", fill: "outline" }, index.h("smoothly-icon", { key: '180734788ed2a6bf6dd7b833ec6e2bb8c8aa4d65', name: "trash-outline", size: "tiny", fill: "outline" }))), index.h("smoothly-toggle-switch-demo", { key: '05f0025358df19ae26c50e988f75488f41da289d' }), index.h("h4", { key: 'a9d8bcaea4a0f4faefb18091126dbcdf41f310d9' }, "Links with icons"), index.h("smoothly-button", { key: '167bbb5902842ca9bffce2c147d628d56e400190', type: "link" }, index.h("smoothly-icon", { key: 'd072acb7417bacbe2f7ecdc46aabda39cbdbfc06', name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { key: '009968c3ec3174984ea7d2d0f8583283dac79cd7', type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { key: 'a006bec82e32c090679bf672067786ad20ee1a1c', name: "call", slot: "start" }), index.h("a", { key: 'f07b7790a97c5ee46d0f9b2208c7adc6be83b578', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: '6bc40589a121c17134918def9047a9f4c5849d92', link: "https://google.com", type: "link" }, index.h("smoothly-icon", { key: '7fe282e07c20828f9d3370fc652212dbfbffeb22', name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", { key: '8ba8336502afd8345f6fb4e4fab960482ae518a8' }, "Size and Color test"), index.h("smoothly-button", { key: '8853f3af8f2a529da7b4e852bb97b683b83305df', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { key: '58bacfecc8658277fce79ca8c92b09269d98dd9a', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { key: 'ad0d74e0a69340b75589a4758a09aac2dcb76f00', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { key: '440876e5df141e0c8ac44027661f8e575921699f', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { key: '2c7792f5eab260fc72dea8d02a69f870e017c461', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { key: 'e6a5713a3f4c683442c44c7dce5d4b14d5ed137b', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { key: '9344764b926c4b7620a116f7811c569e2825440d', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { key: '47ee717243171483731ddb1645c4769dc02386e8', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { key: 'fcb45ba51f2efd49e3bb1601213d3e7ad020fbbd', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", { key: '2445eacd62ea0749ed0bdcd7a624fc9d0003b69e' }, "Expand examples"), index.h("smoothly-button", { key: '9cdb6cfac5d2806e522c2764aaf4f3f8b24bd81c', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { key: '72c233f139b871a57202f29cc3f2d26bd45900a2', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", { key: 'b6912697d2018ba136133d3d21349c8fade175fb' }, "Fill examples"), index.h("div", { key: 'e4095adae1b21cac1437407a4b032ebf2b5857fb' }, index.h("smoothly-button", { key: '537fb2c0df80f137e082ff7b0cfd3fd6dd0dbe46', shape: "rounded", color: "primary", fill: "solid" }, index.h("smoothly-icon", { key: '9982e7b95ca149470e6d5b34967f46cad195a35f', name: "checkmark-circle", slot: "start" }), "Fill Solid"), index.h("smoothly-button", { key: '9a7021a7c1743c2c46a8a67159d2cda23e4579c2', shape: "rounded", color: "secondary", fill: "outline" }, index.h("smoothly-icon", { key: '469608b3bfc55b192d773f42ef70e567795ca455', name: "checkmark-circle", slot: "start" }), "Fill Outline"), index.h("smoothly-button", { key: '52a5d266726a031d6b66b3a1180ad37623dd74c9', shape: "rounded", color: "tertiary", fill: "clear" }, index.h("smoothly-icon", { key: '94e036929040b6ac859a055bde8ad09e804ad1fd', name: "checkmark-circle", slot: "start" }), "Fill Clear"), index.h("smoothly-button", { key: 'f48dfdc3b4151689bfe7c3f069156b8e97ccd485', size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: '729e24c3f27ee5ee5d9ac91a872d0ebaf232ef06', name: "basketball" }))), index.h("h4", { key: 'f6925e64d522c3049c3df03ae5572e7cb79b91aa' }, "Buttons with Icon in \"start\""), index.h("div", { key: '4caf500f1fc1e0bc4fdefbada8053ec53d919859' }, index.h("smoothly-button", { key: '69248dd64f9f1e6bd2eb72d9bb060d2adc95230e', shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { key: '326c813748e85699bf9378ae903f82c3a94a99fe', name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'e32f179237d11e7168f6b9d86584a941e7c132ba', shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { key: 'ac60c8faa7ee073a8193a670c1f4195331930f43', name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { key: '19388cc01865030341d6e481e17f2b8201f7e2a2', shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '9ef487e2d5ee74050fb1d544d2cd38cba4e031ff', name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { key: '551d64ac42aff595a46024e330dd09db0985f958', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: 'c834b6e258f7a992a28349103b8029384fde8a60', name: "call" })), index.h("smoothly-button", { key: '747732c4f71779e75dd1e28f1279afbb5ca9977f', size: "flexible", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '39095a422a92dae1516d70fc6cd307886dd44f8d', name: "airplane" }))), index.h("h4", { key: 'bbbc29959dfe655b2d9cce283dea0fb02429a834' }, "Buttons with Icon in \"end\""), index.h("smoothly-button", { key: '24d19a5ecc1208b8a918027a8e32b7148554380e', fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { key: '263940589ee234ba91a0ee6d80474b3df208a27f', name: "arrow-forward", slot: "end" })), index.h("h4", { key: '94736445a17a3cf6880880463e181f50b41e919a' }, "Test for icon button"), index.h("div", { key: '445605a6a79169dff7f1d8fc06afe4aa71279fc5' }, index.h("smoothly-button", { key: 'e2bf3d70b09f51ef033160538ee894ed7e5a5704', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: 'bb6eeb8eefa8c9ded0804b62976fa3dea30e6f04', name: "call" })), index.h("smoothly-button", { key: '0dc78ad3f658c896c2f1094dbb378319ce081b7e', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { key: 'a07d3a8a103b9ce19b11b91f2464b8e7089d1337', name: "search-outline" })), index.h("smoothly-button", { key: '0408dea25ae083f2427cf347677914478426dbbc', size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { key: '38337dd0de50a5dcfe4d1ccd070826cfc0cd6124', name: "checkmark-circle" }))), index.h("h4", { key: '15e4d907e44d0c9191acf970a7ffa718b0baf537' }, "Link examples"), index.h("div", { key: 'f966263b0a25dd27dc146a28ba03774813c6469a' }, index.h("smoothly-button", { key: 'b1a65a0fd62273af3cb6d982ee98c7a1c565fb20', type: "link" }, "type link"), index.h("smoothly-button", { key: '2b19c2d53a823dcc74426b12309e6854d3a4923d', type: "button", fill: "clear" }, index.h("a", { key: '45c4ce410828bfb775464872aaa7e6ab6e0e800e', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'c98b71da6960956e031b99d23e53cc5a123341a3', link: "https://google.com", type: "link" }, "link + type link")), index.h("h4", { key: '559ef66961156a0c954e7a6009283a8328a4dd48' }, "Disabled buttons"), index.h("div", { key: '5856c23cde78acfc84c73b78aaa5c1b1f1e82c43' }, index.h("smoothly-button", { key: '6da6041b5d6b51adc0cc19ecf074412d7183fe7b', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { key: '57e28f82cf722df8dc9ecfb0bff304a345e27018', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
-            index.h("smoothly-back-to-top", { key: 'a1d78b61fcc3da58bd3f8683fbeccb34bbcb3ef3' }),
+            index.h("h2", { key: '6b4e2e7fd6f5ac09bf5f659910bd3ab9649c8c74' }, "Buttons"),
+            index.h("section", { key: 'a8c21a672eb93d92facc1a04cf5a1c16cf253c54' }, index.h("h4", { key: '95f09c04d6895f06194954208cc61da1b416a878' }, "Confirm button (two clicks)"), index.h("div", { key: 'ece6df70c9c0c924b9965b4cc20ca9ca411eef19' }, index.h("smoothly-button-confirm", { key: 'b356531d3d7858014146ccae0006bffc78e4c5b2', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), index.h("smoothly-button-confirm", { key: '4a0228367ca0e7939537c6ac0b91137b84d53545', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, index.h("smoothly-icon", { key: 'c13e9507e37915a2e7050dc70f9a1a31768430c9', name: "checkmark-outline", size: "tiny" })), index.h("smoothly-button-confirm", { key: '97fc730307b1148d23cf1aa7a09f2c93f3b7989c', name: "confirm-icon", shape: "rounded", color: "danger", size: "icon", fill: "outline" }, index.h("smoothly-icon", { key: 'f62955f5e18b64bb3e43eeb7dc1bd3ab3fe7030a', name: "trash-outline", size: "tiny", fill: "outline" }))), index.h("smoothly-toggle-switch-demo", { key: '3b8cb29571361ca1788d77a85ae53cbbe4475fe6' }), index.h("h4", { key: '5e3b0eef700dc84413d57bf4d825a5145cdabaac' }, "Links with icons"), index.h("smoothly-button", { key: 'caead3e80f98af9ae50658b45670f1dc5f56131a', type: "link" }, index.h("smoothly-icon", { key: '3bb40c487d33085525f382d7361609249b0225aa', name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { key: '2e7e16027df719fb69990bdfd3936fb9f1869004', type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { key: '1600004998730dc8abde02c692a3b01a89fec5a2', name: "call", slot: "start" }), index.h("a", { key: '2771f2031a33e31d3eb9b5f1c0f38127ec0f8015', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'e3b44f6c7b09e0f915bc630c2f7f340ff9f5f9b3', link: "https://google.com", type: "link" }, index.h("smoothly-icon", { key: '5f8ad3b08806ddc5cd7e3368e8a6248ca7b86d4f', name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", { key: '38623ab73ffd29c4b8896a88f6266e9bd6760f44' }, "Size and Color test"), index.h("smoothly-button", { key: '871fed09c8276e9f3eed438ceffaa25c7ab4132d', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { key: '3c41d7224734ce85fec74214642e4804b7dcd1f3', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { key: '2e515425a5af576e1eee7ba100b6407a74479faf', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { key: 'e1ea7debe613f227b18fba7795d4358739d4b498', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { key: '88ce6a163227ece5cfa30b78dc04c8dd33572fbc', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { key: 'd215c603d81bf548e741f167980142b91d606ad7', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { key: '442b7e5070fde2adaf9581b082bcb366bc99d440', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { key: '97f4719f87607a0f0652c4c63c7a343e7e193e61', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { key: 'fdab4a41358222e77b53fb9e2b792debba0009af', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", { key: '1a494d56ffb18e63e882a9a15a9708680305645a' }, "Expand examples"), index.h("smoothly-button", { key: '236c7b8f85e0fa08b09ab12ea66f0222541ca276', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { key: 'd37bdedd651be01d3bd5571179301e1e5cd48473', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", { key: '7d253a8d81a443a68601b833fa939bbea608f9b6' }, "Fill examples"), index.h("div", { key: 'b27b8b79542e09c9dfca65a1f4b880ff12c2f752' }, index.h("smoothly-button", { key: '103064fe4143fdaf8053c343e4a8f8786d65fe4c', shape: "rounded", color: "primary", fill: "solid" }, index.h("smoothly-icon", { key: 'a9e90f809579431741dfdd357bf50dc7c7bfc123', name: "checkmark-circle", slot: "start" }), "Fill Solid"), index.h("smoothly-button", { key: '1f5e1196f7b1b41e1d7db735dae6baba5aa661bf', shape: "rounded", color: "secondary", fill: "outline" }, index.h("smoothly-icon", { key: '5302e9c8dc0fef41953d4cbd30d1105825d0c2c9', name: "checkmark-circle", slot: "start" }), "Fill Outline"), index.h("smoothly-button", { key: '5f898650f52cec4e6e5255cebe3e62f4ef7cd3f2', shape: "rounded", color: "tertiary", fill: "clear" }, index.h("smoothly-icon", { key: '73b680ad46cc7b54e3605857522eb6a7a5779f72', name: "checkmark-circle", slot: "start" }), "Fill Clear"), index.h("smoothly-button", { key: '049c9368a151fd6818e32a9cc2c3c839a2dfe1ce', size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: 'd089a85ca9f3abb8559c0f0d4777a642954334f8', name: "basketball" }))), index.h("h4", { key: '0801a466f4362bee9a68fbea8df5f68f23563ac0' }, "Buttons with Icon in \"start\""), index.h("div", { key: '53f0992772870859e577d2d33db8b0a26c60694b' }, index.h("smoothly-button", { key: '8cc2bfa082a2563e6360524b58e1ff57b6378a33', shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { key: '5bfd5295b8bee2a4a3472501d485284214dd3aa2', name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { key: '68aec74f5a8a131ff4a13403fb02c089ac740090', shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { key: '5d9c4f3ccade43c8082c932ff5ce0cb607b3f75e', name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { key: '4dce21084d04b79bd4a99c223d6a7782a7dd05fb', shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '207d7e15ba1ca9095a8372efc9fb64fa5010549e', name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'd348f3dbb66b1a0a1643455642fea121aeb402c7', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '36eda8b6c89687d69851bfc4dcc8bda3091395f4', name: "call" })), index.h("smoothly-button", { key: '42069af5842c8daf5373875caf73825ce791c2df', size: "flexible", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '16983ae9151c3919ba993551b545210065a319f4', name: "airplane" }))), index.h("h4", { key: '6811065a92ab3388cc44e23b0262da45de83f553' }, "Buttons with Icon in \"end\""), index.h("smoothly-button", { key: '5ad9f07473c06714f5a55fcf6c4aa30c29571814', fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { key: '0e50649ffa9b6b9c29b314d836024df21f40daaf', name: "arrow-forward", slot: "end" })), index.h("h4", { key: '9d15cf0f0b56f2ee347ef098ca081edc23b28d94' }, "Test for icon button"), index.h("div", { key: 'b68bda362262be40014b44f1177d457feac98887' }, index.h("smoothly-button", { key: '14795f5d84fb482925e9176bcedceaa541f04a5b', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: 'e4babc292f88030ef23bcf9035eb2ab67ffa63a7', name: "call" })), index.h("smoothly-button", { key: 'e4ebda1f7fa126830b3635190bd8d1088f9c697e', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { key: 'c6f841256c358e74c7ca8377e1a09ff9d7a5fcb0', name: "search-outline" })), index.h("smoothly-button", { key: '4832663b7f348e853e28ce8ee562781c6843c3ab', size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { key: 'd70b361928afa7a6430ffea309aa94fca9f652e3', name: "checkmark-circle" }))), index.h("h4", { key: '28853956975db199dfb10524a9b865abe9406e5b' }, "Link examples"), index.h("div", { key: '31d234a7798018a01991555e05859615b9cb4697' }, index.h("smoothly-button", { key: '5674f0f72eb5ad235848a5ea85ec2be102748260', type: "link" }, "type link"), index.h("smoothly-button", { key: 'c39ce5f8638024fd5a011c509184bf3199006bbb', type: "button", fill: "clear" }, index.h("a", { key: '2004dc3d932120e24dfd8a828d31d52564c6cf01', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'a643dca03c3e7777ecf2b73f084962831de9f4f5', link: "https://google.com", type: "link" }, "link + type link")), index.h("h4", { key: 'a84c1c3fb3ff714eb47a4d678ab39a74c2f42924' }, "Disabled buttons"), index.h("div", { key: '3a856f60153bc8cf90889aaaade7292480b29dc2' }, index.h("smoothly-button", { key: '64484bb626d5abfacfb09da406f2281b5da10757', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { key: 'e8059bff4c591dd79a57b70624db79c7b5ac3bdf', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
+            index.h("smoothly-back-to-top", { key: '5b644a9126f87a1036b9d8038f94c227d305dee8' }),
         ];
     }
 };
@@ -1855,10 +1855,10 @@ const Calendar = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Fragment, { key: '818f64c07d09772dcf0ca9a9d561b5745684c9ae' }, index.h("smoothly-input-month", { key: 'b407c0b400e94cfad36c372bf8353ad1fe52a5fd', name: "month", value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, min: this.min, max: this.max, inCalendar: true, next: true, previous: true, showLabel: false, onSmoothlyInput: e => {
+        return (index.h(index.Fragment, { key: '873c2df4266e043f62561e1ab89129d6eef61150' }, index.h("smoothly-input-month", { key: 'b05971ae714b2e26f249a84ba91c1558c93f099c', name: "month", value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, min: this.min, max: this.max, inCalendar: true, next: true, previous: true, showLabel: false, onSmoothlyInput: e => {
                 e.stopPropagation();
                 "month" in e.detail && typeof e.detail.month == "string" && (this.month = e.detail.month);
-            } }, index.h("div", { key: '46d05aa65a4a0de959e2bb79f00fd6bce67662a1', slot: "year-label" }, index.h("slot", { key: 'cbd40bacc7fa9a661916deb52e5538e163de5067', name: "year-label" })), index.h("div", { key: '26f35188e898cbd35a20ab6d5f469418bfc5952d', slot: "month-label" }, index.h("slot", { key: '79ece04c1955c45809892accb4c692a3277a2c4b', name: "month-label" }))), index.h("table", { key: '3002ee275ea4b53934e14fa27d08ba67d79a993d' }, index.h("thead", { key: 'f6d280f29660fe107ef459e4cdc8a829b91d26b0' }, index.h("tr", { key: 'cdeaec6bc32757bb65c130618e9ea92b668acc25' }, weekdays().map(day => (index.h("th", null, day))))), month((_c = (_b = this.month) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : TimeZone.Date.now()).map(week => (index.h("tr", null, week.map(date => {
+            } }, index.h("div", { key: 'faa7c396d6a42cf8376ac5f89c34e0cf70a05448', slot: "year-label" }, index.h("slot", { key: '7a09d4149ecf3a28f27dfff24be59858e9bf1771', name: "year-label" })), index.h("div", { key: '53173b614c5e305ca91081f63fa1c1c641bf288b', slot: "month-label" }, index.h("slot", { key: '4e952349c3ca7ac0b0abfc31725ca3d6879a5a93', name: "month-label" }))), index.h("table", { key: '6675b5c1daf856940e4fcc860d8d1f98179173d6' }, index.h("thead", { key: '9d8c168520e5570ccbe7cef6b17692ae3c782806' }, index.h("tr", { key: '234e57b12f82d0addb1af8b0a69ab352e11d65f1' }, weekdays().map(day => (index.h("th", null, day))))), month((_c = (_b = this.month) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : TimeZone.Date.now()).map(week => (index.h("tr", null, week.map(date => {
             var _a, _b, _c, _d;
             return (index.h("td", { tabindex: 1, onMouseOver: () => (this.withinLimit(date) ? this.onHover(date) : undefined), onClick: this.withinLimit(date) ? () => this.onClick(date) : undefined, class: {
                     selected: date == this.value || (this.doubleInput && (date == this.start || date == this.end)),
@@ -1901,7 +1901,7 @@ const SmoothlyDialog = class {
         };
     }
     __stencil_render() {
-        return (index.h("section", { key: 'd13e5bf2132afe9b22f3ed6f3f3d5c96f8f61fc2' }, index.h("div", { key: '9f0c40b2efb77ef63312ef5c6e70e55f6605b3b5', class: "header" }, this.closable && (index.h("smoothly-trigger", { key: '2cbd48cb261f1c5e951a385a4e87e5af8ef3f9fa', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'c87a41fd9350c00fa41965eb95a8ef8366a12361', name: "close-circle", fill: "solid", color: this.color }))), this.header ? index.h("h1", null, this.header) : index.h("slot", { name: "header" })), index.h("div", { key: 'f50603dce6e75b2254469f688c055610590df737', class: "content" }, index.h("slot", { key: '2774f7a85f71e91ce07c1dd4c6fd48b53c589b47' }))));
+        return (index.h("section", { key: 'e070e16a1f9d55f623156ab9e41ea1cda5a71196' }, index.h("div", { key: '35ebd08f6ca4f572c4e4af460391f608dbefa754', class: "header" }, this.closable && (index.h("smoothly-trigger", { key: 'f8c78829a42b1a49baf89fa7d94aff179a2d5e9c', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'f1e3be3910170ca8a15867a5bd3e9c64dfcdc9b4', name: "close-circle", fill: "solid", color: this.color }))), this.header ? index.h("h1", null, this.header) : index.h("slot", { name: "header" })), index.h("div", { key: '7f0f5212049be0603eaa52cd26731ec08cd4a703', class: "content" }, index.h("slot", { key: 'b6dfaf8a392606b3f7eb644809b360acafa12c2f' }))));
     }
     render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
 };
@@ -1918,7 +1918,7 @@ const SmoothlyDialogDemo = class {
         this.showFrame = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'f7ae2fc97658b0aa8c08755714792ec4399224da' }, index.h("smoothly-button", { key: 'f99ac0d5c89394052b2d6faab955d8b2634e2b5f', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), index.h("smoothly-button", { key: '8e6a1ff75c6469816cdd206fe6afa2c8eead8684', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), index.h("smoothly-button", { key: 'c8af4a1887f7f2c005926bec9032038e1fa43d3b', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), index.h("smoothly-modal", { key: '534b00fc5e74c9539ba8106b0c9cf382463448b3', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, index.h("h2", { key: '82a998800b4e7ea57210a3116cdf35eec00aa952', slot: "header" }, "Modal"), index.h("span", { key: 'edeb8eaa859444f30e3f95b76fab7db2b322683f' }, "Are you sure you want to confirm this action?"), index.h("smoothly-button", { key: '50a4de7de97c55783fdd3e8167ec9fac4395d16a', slot: "actions", color: "success" }, "Confirm"), index.h("smoothly-button", { key: 'd4740cdac6527a55b692c04dd70ad17fefbe7eb8', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), index.h("smoothly-modal", { key: '0beaeb3ab4f2af395a3aa0257674f38f55faabd6', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, index.h("h2", { key: '453c4ded8638235b6dc0ff5c043b57d37995be4d', slot: "header" }, "Modal"), index.h("smoothly-summary", { key: '871fc4ad53812e7331093c43dee851b14d33f726' }, index.h("div", { key: '720c732d6f03309304d677b6292b853ac38257f8', slot: "summary" }, "Lorem ipsum"), index.h("div", { key: '2e5632e1402f5ff2830e63dc56be723549c2a90e', slot: "content" }, Array.from({ length: 10 }).map(() => (index.h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))))), index.h("smoothly-button", { key: '5fb59dab67d31d2783855d1e0c4f67197a7eaa04', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (index.h("smoothly-dialog", { key: '939b4f257b01be10467dc90b45801402df5f70e3', closable: true }, index.h("smoothly-frame", { key: '83c2ac363001992a0673506df8317b30b487ff60', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
+        return (index.h(index.Host, { key: '171296f92ec571930bcc4bca7a2bbd433943d302' }, index.h("smoothly-button", { key: '31d7764ddb4163c83d1d5cd53bc664bde022521d', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), index.h("smoothly-button", { key: '58ead69323e970d926b3b3f0e57b2f5340d7c956', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), index.h("smoothly-button", { key: '57939b58cfbb5e2d2081b2436094041eb1074e87', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), index.h("smoothly-modal", { key: 'eba2703ab68ac9a767640493bd91aaeaa84c2256', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, index.h("h2", { key: '66557105cc449a37951e52271a184324333c310f', slot: "header" }, "Modal"), index.h("span", { key: '273f211df20373f6622994141102e780a7b3ee53' }, "Are you sure you want to confirm this action?"), index.h("smoothly-button", { key: '7710589cbd7be4649c8ea355cba53bed95ecb414', slot: "actions", color: "success" }, "Confirm"), index.h("smoothly-button", { key: '580de2b26b8b169209b7f2afa3446749a42d55ff', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), index.h("smoothly-modal", { key: '4293aa516d024c7deb849686b1c9b1d2cbde50c4', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, index.h("h2", { key: 'd5172b9f596b4dc05a1c66014c3dac4feda1fbcd', slot: "header" }, "Modal"), index.h("smoothly-summary", { key: '92b695be01a78bf00e70a60ef132092979617f79' }, index.h("div", { key: '2b1b7d17992a2d635a1a261c3768ce8f64b4f10a', slot: "summary" }, "Lorem ipsum"), index.h("div", { key: 'ca2a2ec987eb6049eb3a7fa609a7d3b77aacca48', slot: "content" }, Array.from({ length: 10 }).map(() => (index.h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))))), index.h("smoothly-button", { key: 'c1e0641f4631dd6cc21a695f0ffee7e2851e50bb', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (index.h("smoothly-dialog", { key: '28d4f53e28c7e32bef9746362fce97cfb21cb442', closable: true }, index.h("smoothly-frame", { key: '61011e045d9a740f3937a1cdc83e0fb97c1d552b', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
     }
 };
 SmoothlyDialogDemo.style = SmoothlyDialogDemoStyle0;
@@ -3778,16 +3778,16 @@ const SmoothlyDisplay = class {
         const type = this.type;
         switch (type) {
             case "json":
-                result = index.h("smoothly-display-json", { key: '1ede546f9829aea0f9b8c319db98df10e07b04a3', value: this.value, collapseDepth: this.collapseDepth });
+                result = index.h("smoothly-display-json", { key: 'c171d3a83efbefce258b6929eb0a3bafb246d8d5', value: this.value, collapseDepth: this.collapseDepth });
                 break;
             default:
                 result = format(this.value, type);
                 break;
             case "email":
-                result = index.h("a", { key: 'c6047f436091639f6302be22f62610c0515a4009', href: "mailto:" + this.value }, format(this.value, type));
+                result = index.h("a", { key: 'd61f90a089a457d0e388ec5739974dc081868e8f', href: "mailto:" + this.value }, format(this.value, type));
                 break;
             case "phone":
-                result = index.h("a", { key: 'b62431225a51efb22037598e4227671e863be3c3', href: "tel:" + this.value }, format(this.value, type, this.country));
+                result = index.h("a", { key: 'f622c3de530f8251623ec003acf3fe077506ca6b', href: "tel:" + this.value }, format(this.value, type, this.country));
                 break;
             case "postal-code":
                 result = format(this.value, type, this.country);
@@ -3824,35 +3824,35 @@ const SmoothlyDisplayDemo = class {
     }
     render() {
         return [
-            index.h("main", { key: '21fb2b79f1e444d11b25150a336ce64e74f94386' }, index.h("fieldset", { key: '8b8ef87a351e4cb8754f44f74ad31185db62b0cb' }, index.h("h2", { key: 'e466ccf59ad1f4e2a41c8dd1b1d85da6b37c8f95' }, "Smoothly display"), index.h("dl", { key: 'acb593cb9a73566cc3defcc55eede3a7710a42b0' }, index.h("dt", { key: '9ccdcb7f5e3f55ea39d78b8ed6e75edb5f4a4c96' }, "Duration"), index.h("dd", { key: 'b7c93ccc874874faabe5e313ba204795a19adfc0' }, index.h("div", { key: 'd6e3d99849191e6d8effae216348bd634a4114b2' }, index.h("div", { key: 'bb64f8e9518218a499d0e52b5df759b31093e0e0' }, index.h("smoothly-display", { key: '151b7ca20847a1e41701d3c93ad780a222f990fb', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: '72035e5cab01fd9a06d2782ba1255c2f86cbfdac' }, index.h("smoothly-display", { key: '0f4723aac6e41aa4a7e29b0456e4661066b28985', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: '1346fe1098e87dab09ae4268fab19f7eb18cd949' }, index.h("smoothly-display", { key: '5e70c627fe2dc9e1d65cfec40fa63a36d419466f', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: '24beed45ab0c2cb2703d97ddecb72b767f19d989' }, index.h("smoothly-display", { key: 'a57ee2a431537bffe6d8a630c2466e342a10f089', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: '44f65151109d00905e996e9205d71588ecabaea3' }, index.h("smoothly-display", { key: '5c0a01aca2d99cb82c66701d4c7d7de26043d987', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: '18cbc082f3d8f71f3ba6c6b7eb3a977b13d45268' }, index.h("smoothly-display", { key: 'a5bbf74186f51ce22f6eceb8396f215e7b0fc297', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: '1d2361cec57f38f40636641702f92100ebcd9122' }, index.h("smoothly-display", { key: 'a561ef92252a23064e7f7f7ffca3314a099329f2', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: 'ab7b23c9c2ad57ceb6a2ce75d8f0a4e93439e610' }, "text"), index.h("dd", { key: '8913158f3f3a5c4012ae94a3f1b38442fcb5aff2' }, index.h("smoothly-display", { key: '13d54b85dcf178d480c8c834c79c47231c785aa6', type: "text", value: "text" })), index.h("dt", { key: 'e3c43484f7cc87eb9bf67d6474bc9552dbd643bd' }, "postal code"), index.h("dd", { key: '0df2d428a7847b3ddf436d2e9db2fe367f41df80' }, index.h("smoothly-display", { key: '8550c5ee46cc4e0c1bb956b2dbf8a62c452aee30', type: "postal-code", value: "752 31" })), index.h("dt", { key: '1b06810c083306938ce8d25b5582a15cb066b085' }, "password"), index.h("dd", { key: 'b078c56b5a9d62e23b9d9b8ab6cd4d10798aa726' }, index.h("smoothly-display", { key: '773204df4456963fbcc5cc26416c40f8111e43d0', type: "password", value: "password" })), index.h("dt", { key: '38c93b73ae2830ef7995f9c6d93d62c1ba019680' }, "email"), index.h("dd", { key: '3f822f17d630c3388155a66e97e0bbb6fb7c3951' }, index.h("smoothly-display", { key: 'f31678fe3df819cdc266876c54a1d810e9fbf9e8', type: "email", value: "test@example.com" })), index.h("dt", { key: '9abf27aa6b2a6ffc035f14adc1204e620d8061ce' }, "price"), index.h("dd", { key: '15a0e06145971b2c14abb0250cbb7edcea81483b' }, index.h("smoothly-display", { key: '256922cd4e8c86be1707c1ddc9d9e8550fe7b5b3', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '84e0e9b898c72e2390a5b50cc2445a988a845a60' }, "price without decimals"), index.h("dd", { key: '3979f33c43640eb1376a533755cc39ac1a8c17b3' }, index.h("smoothly-display", { key: '04afd00d763536c5b1faa310074726f346914114', type: "price", value: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: '28c9ddc91d2ceb52a7bd60577570a0ece1ef1704' }, "price with decimals if they are set, otherwise no decimal"), index.h("dd", { key: 'e2ae34d84db38387ee3d81b474a606b7b3d40742' }, index.h("smoothly-display", { key: 'a8c053147e77e15ba5a6a7d372d24d0948d67bd0', type: "price", value: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: 'a42173872dac85db0f822c70e69baef5a244b4ef' }, "price with decimals"), index.h("dd", { key: '4034e3ca1bde5f9ba3f5cdca710d3757b7e12955' }, index.h("smoothly-display", { key: '0a07c33c6bf9b14aeafcbbff3e9f6d2817eb7230', type: "price", value: 200.2, currency: "SEK" })), index.h("dt", { key: '701bee2385a94b38bf90f58b3dc4fb65458188e6' }, "percent"), index.h("dd", { key: 'e1b856b2059122d2c80e5c242bb95429bca4caeb' }, index.h("smoothly-display", { key: '2682ebd78e2753fc2b1d558e00cf10eec0449c83', type: "percent", value: "42" })), index.h("dt", { key: 'd6504232e42d7bd6fb239b24f8065677bfe7f5ce' }, "phone"), index.h("dd", { key: '3b2cf4c53cf6b6fba8687ab994d6ded634d60046' }, index.h("smoothly-display", { key: '1cb2c5406dfbec1db57c05be5f59f828b005cb17', type: "phone", value: "0101881108" })), index.h("dt", { key: '94ee7083b2d5eef22e7ff0e15c460f6fd863db9e' }, "card number"), index.h("dd", { key: '97954e5e4d12f6be04096006d51ea6c9ac3e7fa3' }, index.h("smoothly-display", { key: '027c2522274e6e23f6cda08da141b24432671837', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '77cda0ed14b7a75ef02966d1b29bf94b6d5fe6ef' }, "card expires"), index.h("dd", { key: 'e2c1cbe5353efc0bea8435181499188bcdf8d051' }, index.h("smoothly-display", { key: '4aab5bf769fb89cadd2bf3fbb279a219e668c85d', type: "card-expires", value: "7/22" })), index.h("dt", { key: 'ecb64258605dbce40b3b6b8f51ec1922046ecd44' }, "card csc"), index.h("dd", { key: 'b37ef76653942f81a110df017f26c4c5699f32ad' }, index.h("smoothly-display", { key: 'e9cb2787e18d88f2cde4559c90f8ad9d45889d51', type: "card-csc", value: "987" })), index.h("dt", { key: 'f028f598bc51de708361494c66264047b8ab777e' }, "date"), index.h("dd", { key: '8900bb90156489b4cc9d22c663c9a2f5f80b1062' }, index.h("smoothly-display", { key: 'c31d4cf0631bf5495c9286bcc87a37c056ac6308', type: "date", value: "2022-07-07" })), index.h("dt", { key: 'a9df319e34d74e6ec9ef36e9f9128cda2df9043b' }, "date time"), index.h("dd", { key: 'f57d07c19738d28a60e0138cc827218a0f1ef7af' }, index.h("smoothly-display", { key: '663d9cfa4235e90f6a8231b9c7c7d6d0bd4beb4b', type: "date-time", format: {
+            index.h("main", { key: '2a76daef84887ea3bde88d366b2e21e14d57b44b' }, index.h("fieldset", { key: '1ca672f0189ec954870ec1a1334d710eb12de27b' }, index.h("h2", { key: '8adad2327cab875a2cb4b5bc0eec229d1e0056e9' }, "Smoothly display"), index.h("dl", { key: '34e4c3ffb01fbdf98ab7f37e421ee3d7cca379a3' }, index.h("dt", { key: '1e6fc46091902b66b8a40760191f53cdd30bc14a' }, "Duration"), index.h("dd", { key: '4966107aafd2506a4406e5dd282a81a7c6a9b66b' }, index.h("div", { key: '96dda5951ab4df35c0953b2aef462447770de4e7' }, index.h("div", { key: '5b315e7bf03247f15909ae0f3188666c4e542520' }, index.h("smoothly-display", { key: '8b4e73dadc46fbd99c17490d6847105690aa5f35', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: 'fef2f6a200446d477b60eb70f0ca70f1238129a0' }, index.h("smoothly-display", { key: '0c488fdcaefa7864d050d98472dca2ecddd898b0', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: '0afc6954ed6dd90cc8dad83d57cb2f94a8681492' }, index.h("smoothly-display", { key: 'f0340041c6996a6e482ea3199ec5416788c546a8', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: '3a1670abc42b8e2fbfdbc0949c2eeb2c79a5c15c' }, index.h("smoothly-display", { key: '09392b66cee4872abf14c9ece430a63d100c2ee1', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: 'e863e33d414dc0da17818ce632e892ce25eb4a46' }, index.h("smoothly-display", { key: 'bf6e57117a4720686c34846466bee6f2a13ba831', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: '939798209aa002fb5a5bca479b099d101330fcfb' }, index.h("smoothly-display", { key: 'aa67a6663dee8531df73a141d304844eb96bc2c4', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: '69c7aa45e433a17583c13eb45ec68b32afbedf09' }, index.h("smoothly-display", { key: 'da59eece362ffe4847bf6e96a7c0cab6eb7aa9ee', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: '8c438d67510bdd91eb89f2160a3ef1bf45e62999' }, "text"), index.h("dd", { key: 'ee6084f1769f173a3c2bb7068857306f4590311e' }, index.h("smoothly-display", { key: '8b74f5d51fc7b2994390ae6ade97127edd92cd83', type: "text", value: "text" })), index.h("dt", { key: 'c8a6db267c2985d64ca553919ff4ea21c4a77a9c' }, "postal code"), index.h("dd", { key: 'bcc16ccfda356d180e45e4eec39b7fd563f244f2' }, index.h("smoothly-display", { key: 'd296d047c7bc9adb14beaf528defd2956b268127', type: "postal-code", value: "752 31" })), index.h("dt", { key: 'df3cd2a6890585cc9ccedd2ef45892e3a081c08e' }, "password"), index.h("dd", { key: 'd73cf9f0f3d6a4430d6b7e9a9280fd2659f4afec' }, index.h("smoothly-display", { key: 'e66094f4ba694eff429ee99627f5e91eea77565d', type: "password", value: "password" })), index.h("dt", { key: 'b6b684dd9dba0035c67c67d9f71cb8f2c5d8196d' }, "email"), index.h("dd", { key: '9a743be9a2fd0d9dc8f4d7998123d88bd41a5768' }, index.h("smoothly-display", { key: '62617815b23ab6b9dce1cccfe4171ed640d1f68f', type: "email", value: "test@example.com" })), index.h("dt", { key: 'c0e3675247d4d7cae59e11c9ac0d5084efec7da9' }, "price"), index.h("dd", { key: '5ba67df88825d3aea8eba493beb1ec6ed8deb6a7' }, index.h("smoothly-display", { key: '074c2cc0269b950e742414d527f3e020afd5c9a0', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '1e8526fd51f22962fd429276d935701a1d331ff0' }, "price without decimals"), index.h("dd", { key: '857b7141e8abeeeeb09f4f5c8a8df5b6a55aca2e' }, index.h("smoothly-display", { key: '0b39e2af7552ba9506574cbc3a10566980476329', type: "price", value: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: '2155f8ed8ad6b8ec67973563bbca51486047f053' }, "price with decimals if they are set, otherwise no decimal"), index.h("dd", { key: '76505996a0acd9606fd8cf420ba007501c1add91' }, index.h("smoothly-display", { key: 'ab04814225516711be97ffb281ed640d4149e71d', type: "price", value: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: '8f8e578f2faa73548b948c8a345c93f2b283779a' }, "price with decimals"), index.h("dd", { key: 'e6fe391647cbf0cb563c0badc16394b830fe1fe2' }, index.h("smoothly-display", { key: 'd14257a209f93b62d916df7e8254f6a0baacaa3b', type: "price", value: 200.2, currency: "SEK" })), index.h("dt", { key: '3c5de766f714ec32c8e4258227a8583ae8e13c56' }, "percent"), index.h("dd", { key: '3035ba6e28b9ce76724d8ca7df1a2094cd1810e6' }, index.h("smoothly-display", { key: '55d8be440426d5b6489ecba69525546deb82a69d', type: "percent", value: "42" })), index.h("dt", { key: '7f2768abb769cec9b3d1bf1c4046405fa3f282c3' }, "phone"), index.h("dd", { key: '9121bd24b678134d94f1051bad4456d94b461540' }, index.h("smoothly-display", { key: 'd61b1a545fdba6c7a1b9c2ce9122183818e47542', type: "phone", value: "0101881108" })), index.h("dt", { key: 'd3d3f73f7ab5de5e2975c5bc1763c7d72c69acb8' }, "card number"), index.h("dd", { key: '849098be9e684ea9bc68bac8fd05e2a586893bf3' }, index.h("smoothly-display", { key: 'e751cc9912f1fdd338b63a9db5ef2cc8ed4b40bc', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '4acb2eeceb1334b6460a11f7f9933b61bd48ed20' }, "card expires"), index.h("dd", { key: 'f6ae3b93f77440abc5438f6af6e40d9964530811' }, index.h("smoothly-display", { key: '5bfa4a17d4e8e6ebc5b94faeee43ce963bd31bb2', type: "card-expires", value: "7/22" })), index.h("dt", { key: 'e30810b6adf6a71a7a5c6c6abc9e0cf28fad1c7e' }, "card csc"), index.h("dd", { key: 'bd67e6a4a616d7cf95ee90e02084970be15ad475' }, index.h("smoothly-display", { key: '7568ce3b669095fb4edcd1dd2974d959afdd485b', type: "card-csc", value: "987" })), index.h("dt", { key: '4f3e8f8a8367015afef690e33e30ff73255d3359' }, "date"), index.h("dd", { key: '85acb48a1f9295bc8f75c226a6edc55492926280' }, index.h("smoothly-display", { key: 'f4939232a91bf1f4d98b6ce6883d9e793fd95207', type: "date", value: "2022-07-07" })), index.h("dt", { key: 'a10293b50e7e9618941ce1f2337f6386175ff891' }, "date time"), index.h("dd", { key: 'b431af2a61d56675c4161e1c25861f4cb06780b4' }, index.h("smoothly-display", { key: '1ae46193f8205120d5970f5a9d213809e6768c12', type: "date-time", format: {
                     year: "numeric",
                     month: "short",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '664a74d91f65917bff18734fd100347533fb9b4e' }, index.h("smoothly-display", { key: '456469ffdc5ccdea880ad86f92b9a29c183dcdba', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '6eee37e5837c3c31d0dd218b8d28ba72d14a7274' }, index.h("smoothly-display", { key: 'cadd5b0016b475b6f06845e4a5f096fa495fc38f', type: "date-time", format: {
                     year: "2-digit",
                     month: "long",
                     day: "2-digit",
                     hour: "2-digit",
                     minute: "2-digit",
                     second: "2-digit",
-                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '6714499c457900dee5e2cd5bedbba3ef7083b749' }, index.h("smoothly-display", { key: '4fea3c22e9402170205a5019a17850576fbb06f7', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '9e0b7ca976e9c2e76744e6b7f2b13169f8176db8' }, index.h("smoothly-display", { key: '9690855e4593579da6d6ef9848fabe421c53a188', type: "date-time", format: {
                     year: "numeric",
                     month: "2-digit",
                     day: "2-digit",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '79c14cffa0634ab2af6fd3ba014d081e28e38319' }, index.h("smoothly-display", { key: 'd5559326f39e2f5bc8311135176b5eedb4ed2870', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: 'ae6a22a4058b7c703664032f4db6d34deab8f117' }, index.h("smoothly-display", { key: '08061cd335bcfcecc25fd21bea18dadf91b8a5b3', type: "date-time", format: {
                     year: "numeric",
                     month: "numeric",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '419b427db910e49fd541de31e95c7dd3dbd2811e' }, index.h("smoothly-display", { key: 'ebd569c36dd017c14523ee1efc8925c622f7747e', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '6df381d322a21b50ad70fc41fee8800721ca0889' }, index.h("smoothly-display", { key: '1ace79e51e8285e5124158f567a73508833bdcb4', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: 'dbdc1a002cab9e951678621ad394c1237e91f3f1' }, index.h("smoothly-display", { key: '529e5cd2b7f4bde6b06dfb51832cb4cb498c3447', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '96055e5c2dabd5405c9abddce2e08968e9eaadc9' }, index.h("smoothly-display", { key: 'e0d438cea5912edfcadd435ebe18bb31820127a7', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '98fb2ccd362a915d28f69dde02cf97934ecdbda3' }, index.h("smoothly-display", { key: '64741e7b923a1e9da0583839d8672a9f77a82ad3', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: 'ab24692222866cba986372402b73712f2fc86539' }, index.h("smoothly-display", { key: '3814df12b639cf811602d8d68e093c1cdf778310', type: "date-time", format: {
                     year: "2-digit",
                     month: "numeric",
                     day: "numeric",
@@ -3860,21 +3860,21 @@ const SmoothlyDisplayDemo = class {
                     minute: "2-digit",
                     second: "2-digit",
                     timeZone: "Europe/Stockholm",
-                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: 'd7b788672f67fbf1d0528f604ef1e77673d2e69f' }, "Display JSON"), index.h("dd", { key: '87a892e6845db8618efd46d571e8a90f30ce1e6d' }, index.h("smoothly-display-demo-json", { key: 'f66473975507a01af105282f01f640c1baaa88ae' })))), index.h("h2", { key: '084965cafe76cf10bac4804c82ea460c0960f7da' }, "With labels"), index.h("dd", { key: '395e03618fc767dcca6b12386286a97c83882686' }, index.h("smoothly-display", { key: 'd5f90cfeaad01ea046ed543f54e70b089c91463d', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: '3333769695dd0b7e0d54fd729f2b3b59dc34737c', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: '57070580aa9096b1d273bb7cb51a6ac82e22f9ca', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: 'b4af7875200f61caf1c51f969c61362af7b3d402', label: "Logs", type: "json", value: [
+                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: 'c96a8dfd8a6bc8ecd8dccbd95e5afdbd25016df0' }, "Display JSON"), index.h("dd", { key: '70bd3c92f4519590fe7938e5d0e7d8c4adee11a3' }, index.h("smoothly-display-demo-json", { key: 'f0167e90e50c3e552bf30b74524080c7c252bfdc' })))), index.h("h2", { key: '9098912a1e0d971fb840aebb409d4192def5b629' }, "With labels"), index.h("dd", { key: '96302e348da1518bf09cdedefefe0cd5a183b2ec' }, index.h("smoothly-display", { key: 'ea9cfb671bae4e4245bf0186698632879c44535a', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: '09c37d099f968d1dd482ca0e6ee20744f551630f', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: '3e2dbe30539fad2757c6bc5027344a5dbf7bd454', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: '3415b6494541d0be2a5c88eb75e61f650d42de8e', label: "Logs", type: "json", value: [
                     { type: "trace", message: "Hello" },
                     { type: "error", message: "Oh no!" },
-                ] })), index.h("fieldset", { key: '411e5133a5c4bf2d36ad1c6b00cf549e769d7665' }, index.h("h2", { key: '536dd0526204b6d389c670c576f32bca45c3630e' }, "Test of different kinds of notifier"), index.h("button", { key: '2faebb0bcea77262e0a18b5e8a375bef7b5de11b', onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: '21181f519f1bfe818fcc084596be2317fe541968', onClick: () => this.noticeWarning(Notice.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: 'c67c4056842c761165115333bb079165609208f1', onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: 'a42b0b8a77b40fa6ddea705306634489abaec09b', onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { key: 'd651ea26abb9ce9dd336b45ded8849fc4a00c56a', onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", { key: '91b1d46f457a5261ddff3a1bc67db822190f0591' }, index.h("h2", { key: 'd46c2765def7f55a8bd225dbd9f1c5379029878b' }, "Smoothly spinner"), index.h("div", { key: 'efb40135dbbbd78e6ba4c9927ff212178a3da9eb', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: '70616018eb896ff0bd28744b504fec5c416f1b45', size: "large", style: {
+                ] })), index.h("fieldset", { key: '468b3e8e6e7fe91c93493cd804bd59383f4b7e54' }, index.h("h2", { key: 'f4d81c45839324b8628ed92dc2db96d9f603fe09' }, "Test of different kinds of notifier"), index.h("button", { key: '32f3d4e71745238bf0efaf3ed27481e43aaa5e17', onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: '906b0f542433e9f13140e91db71d17b59f39d01d', onClick: () => this.noticeWarning(Notice.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: '56cc3dde29cc2550660b05d69f7ea372de2091c6', onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: '7282bec22e381a57864663f55e0535b05e139e35', onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { key: 'e0fd211f1bfb1210b218af387690cfde404ef6db', onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", { key: '56d71cbb8821a9d6a52ad403daf4e92c2327b61a' }, index.h("h2", { key: '70066d046ad7eff8e72d7c6508f2dddd33111364' }, "Smoothly spinner"), index.h("div", { key: 'f675d44f66e1ae6ba2432be0c1dc403505a0c503', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: '4f80b9b69703dc1c08603e110dd89ad07c5aa57d', size: "large", style: {
                     "--spinner-background": "200,255,200",
                     "--spinner-background-opacity": "0.2",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '585aff079f29aaeb3319268ebcf3857bec165942', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: 'd46336b4e6fe98d2d2958c3047747b07d7999fe8', size: "medium" })), index.h("div", { key: '47db1735399b1b59e582b94229c4fdc51389b51d', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: '8292ad153260c3cd3d26ad597effa2356e913ca9', size: "small" })), index.h("div", { key: '45ed5bea68185714286757dfa56d14b5987c3a19' }, "Icon sized spinner on button", Scrollable.Color.values.map(color => (index.h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
+                } })), index.h("div", { key: 'dda7689714bfa3354dd8d38ad528d347d252b5e9', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: '2f685897c749961ccc804633a0fa6df417afa10f', size: "medium" })), index.h("div", { key: '04191765756b7bf0fe51c7aeb1c54fe03c3d72d7', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: 'e0deaf9e74c7dfb9bee2ef85f4309acc111e329a', size: "small" })), index.h("div", { key: '32cd2b79676ea2dbc4664b542e7ddfcd796fbfcb' }, "Icon sized spinner on button", Scrollable.Color.values.map(color => (index.h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
                     this.downloadingSpinner = true;
                     setTimeout(() => (this.downloadingSpinner = false), 3000);
-                } }, !this.downloadingSpinner && index.h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (index.h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), index.h("h3", { key: 'f4f8637fd7928426d61b262cb5b286903d5a9edc' }, "Spinner with overlay"), index.h("div", { key: '11880b67e3425ca7b1aa96fe1f0be53613cadce6', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: '26d08b7f6d5c14f03643521e41d399d57567c2a0', overlay: true, size: "large", style: {
+                } }, !this.downloadingSpinner && index.h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (index.h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), index.h("h3", { key: '0e9e91fb145b5207f3e6ce1c6d0c872664afb37f' }, "Spinner with overlay"), index.h("div", { key: 'ace6e8a453aece5ee5e77f5be3fadeb394a12a0c', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: '0afa991d53f83679014fb0d71a169053968f5a04', overlay: true, size: "large", style: {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '2092cd92eb0a8797cf30e05692e632c0b9a3a09e', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: 'bf7a3539c259ad7a1e84ce233dd6e3840436c834', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '21f2f4a511fab1672bf573336403dd6a073c3b2a', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '9d1e787b73a9158de842d116ef1b9367a43658f7', overlay: true, size: "small" }))), index.h("fieldset", { key: 'c69bac882a363b3de75857289acde3ee240de84b' }, index.h("h2", { key: '48f6bba196c4a8ac79b6de5563fcdabe176f9a09' }, "Smoothly summary"), index.h("smoothly-summary", { key: 'e127119ddebe9ac42d447384a277f8f3785d0bd2' }, index.h("p", { key: '38fcd455229b895a477b8d6a0f608492c19be7d1', slot: "summary" }, "Some title"), index.h("p", { key: '1da7ba6e1a5c72e29bcd42c5d1e2469bb38c0e24', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '8cd4afa538a5ad269741acf3cffe3730e7613c41', size: "large" }, index.h("p", { key: '751fe6f320fdccd799a43f9a6b4c82a6e4e4c075', slot: "summary" }, "Some title"), index.h("p", { key: 'e7549c895b88cf20bf368c66f5e126a9c3407677', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'ab35b1c6a284eb8f3b913f31726b0fbc88132915', color: "danger", fill: "clear" }, index.h("div", { key: '40b066f48899e2bab7e5a0601f18f02ede99aaca', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: '877b910238083ce23c9b6130438b1db664200158' }, "Person"), index.h("smoothly-icon", { key: '653ab4903ed6b6631ff9edeab0db9a98626644e3', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: 'b6a604da7924a87bea1e2615cd5d13634e214daf', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: 'e2333f4c0ae45eaaa8f36bf06a0304080560811e', color: "danger", fill: "clear", open: true }, index.h("p", { key: 'f1f8a5c4fbcc13754598489d36ec5867106e851f', slot: "summary" }, "Some other title"), index.h("p", { key: 'd24ba7bf492e8630ddd5d08644f74783908792ae', 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: 'cad39175e8ad87abb419ff9aa9bbc6ff281b6055' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: '4e1ef4a7f3d2dacc84cdd6520b2e39ed66249745', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
+                } })), index.h("div", { key: 'ae897d73839a31a663e5ca8516e466b5db9e6324', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: 'd5cf98b6843d934d9410f0f266fff8babcee33a8', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '4730ec21fd935a3af1d6deccd649e5bbb8fd7bba', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: 'd2eccfe07320c09f6347ebdc5265985854355b12', overlay: true, size: "small" }))), index.h("fieldset", { key: '5bf91622534bf402abb0ec4fcbba5b5dc198f39a' }, index.h("h2", { key: '0e4a7ad1a10bb7b9a75940d4f657b6a8f74d509d' }, "Smoothly summary"), index.h("smoothly-summary", { key: 'f5c30b4fd816c6d83515148dc5375e48f45be60e' }, index.h("p", { key: 'a7bd57662d9cea09ee979721ed5848039dfa99ad', slot: "summary" }, "Some title"), index.h("p", { key: 'a90e969ca2dee0ae16b6ef1916be0b3580065136', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'f0b863a9c41159ac007b4ce657e97d723c0b16a9', size: "large" }, index.h("p", { key: '59bb37db444e1663a91495bd12048469c5abb1d7', slot: "summary" }, "Some title"), index.h("p", { key: '0d922af3955750668610d1746f794112fa62b98c', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'b5ee4149cc0a3d37b59a8992bcdb9b384971ae38', color: "danger", fill: "clear" }, index.h("div", { key: '4bbca655364e7c861f718dbbe6a4efb1b9d87378', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: '92e3922fb302d942820b9f5d89ae827b4bea4e4c' }, "Person"), index.h("smoothly-icon", { key: 'f603d09a398a10a1f924350da5180480de40be43', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: 'bbb6e876604ab87e76631f962f0d700986cb1637', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: 'd3161f33879337b3b4662ad148e8ba594610989d', color: "danger", fill: "clear", open: true }, index.h("p", { key: '5cd164f5553ea40f9923f32280f4dbd8ff7646b4', slot: "summary" }, "Some other title"), index.h("p", { key: '753e20779f49d355ffd398d72e04d840b9821342', 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: 'cb73e95dfb043cf16acb09f5a0a2e95e7c543eb3' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: '84a1b5f36a88be4b01dfc2bd09711e8124d473d6', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
         ];
     }
 };
@@ -3901,7 +3901,7 @@ const SmoothlyDisplayDemoJson = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ea329526023da3b7329d8b7bd1cb34316542fd93' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (index.h(index.Host, { key: '19502d54bd7e93581bee4cdaa1f2503d7557fe34' }, [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 })),
         ])));
@@ -3936,7 +3936,7 @@ const SmoothlyDisplayJson = class {
         this.collapseDepth = undefined;
     }
     render() {
-        return index.h(JsonValue, { key: 'a817223386521cc073aeab087efc636977b65e0a', value: this.value, collapseDepth: this.collapseDepth });
+        return index.h(JsonValue, { key: '9021d65675eab4bd489a5590e33551be8b8a2062', value: this.value, collapseDepth: this.collapseDepth });
     }
 };
 SmoothlyDisplayJson.style = SmoothlyDisplayJsonStyle0;
@@ -3970,9 +3970,9 @@ const SmoothlyDisplayJsonObject = class {
     }
     render() {
         const nextCollapseDepth = typeof this.collapseDepth == "number" ? Math.max(this.collapseDepth - 1, 0) : undefined;
-        return (index.h(index.Host, { key: '2878d58011daeccd9d1e3383f1081883f08ec598', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '8e07de6271113ae7c223c44a2193162071cf9eaf', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: 'c850ca12c687165a5f752a1e3315a0d7bd947971', class: "content" }, Array.isArray(this.value)
+        return (index.h(index.Host, { key: '0c00f594a1d3593d3ff476db6e8ec8a2594b84f0', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '8a842f369633c0d7877dfbba492555473a0cccf3', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: '5b222e67cb13cf4053180b934ee72b8f7a447b0e', 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: 'd8441108a2cd31b14ada6c0ad587716b0e05537e', 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: 'ccd423bb725216b06e0918e71a3dc7ffd37ea83d', class: "close-bracket" }, this.closeBracket)));
     }
 };
 SmoothlyDisplayJsonObject.style = SmoothlyDisplayJsonObjectStyle0;
@@ -3986,7 +3986,7 @@ const SmoothlyDisplayJsonPrimitive = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '171404fee1a7bdd8ecd7beb0032c136e4e2652d8', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return index.h(index.Host, { key: '67c7a46a3bbb4802275181d311a46e49637d4569', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
 };
 SmoothlyDisplayJsonPrimitive.style = SmoothlyDisplayJsonPrimitiveStyle0;
@@ -4000,7 +4000,7 @@ const SmoothlyDisplayJsonRecordKey = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '525fa15610e18dc3073cc4c28b1acf559a4c4a8a' }, "\"", this.value, "\"");
+        return index.h(index.Host, { key: 'b95b23adc8efb2d27813cd613129c0aa3a25f130' }, "\"", this.value, "\"");
     }
 };
 SmoothlyDisplayJsonRecordKey.style = SmoothlyDisplayJsonRecordKeyStyle0;
@@ -7029,11 +7029,11 @@ const SmoothlyFilter = class {
         this.filters.forEach(update => update(this.criteria));
     }
     render() {
-        return (index.h(index.Host, { key: 'd0758e4b4003774f8d64ea98dd189c9d1bc4dfb7' }, index.h("slot", { key: '326730f0a2cdc4efe92f75be74f50e9d0afc2337', name: "bar" }), index.h("smoothly-filter-field", { key: '771a0da9c7c28810fb8b9c3eae4e0b2d6a8d629a', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: 'f0699e512b801b2a82a4b6a75764455c4f6ff970', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
+        return (index.h(index.Host, { key: 'c9beccb773a6101f5a26d96c1eddb16494d7158f' }, index.h("slot", { key: 'da7565883d337518c62ab0c188a2b651ca2ff70e', name: "bar" }), index.h("smoothly-filter-field", { key: '1565e127cd27b2a2c84bd9775053d2c681963152', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: 'cc3baa28d08bd7bdca19d8a2265a45c1dfbcfcbb', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
                 this.clear();
-            } })), index.h("div", { key: '4ed85c23a785b8f5a96d97acee1ec4bcdf11ccf1', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'd41a7a8ed289625aa1f9de25b19a39cda75b6c29', name: "detail" })), index.h("smoothly-icon", { key: '534e48505b05d18bdbbc6d5817ef4f10d8c9f045', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
+            } })), index.h("div", { key: '9850fa072e6696f1f34e96358a03824e1e5ae878', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'ed4ed18ebbe18ff0028909b4f94a8e4d5b3d1d9b', name: "detail" })), index.h("smoothly-icon", { key: 'fba156474c6d7c93b62ebe4d9690c5d60f44e299', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
                 this.expanded = !this.expanded;
-            } }), index.h("div", { key: '52289b92ffc7b5f53e287c5c875ec3605ee307a2', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
+            } }), index.h("div", { key: 'f1011e232ba37fd419f7f90d65227a7b7cfb4882', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
     }
 };
 SmoothlyFilter.style = SmoothlyFilterStyle0;
@@ -7060,7 +7060,7 @@ const SmoothlyFilterField = class {
         this.value = event.detail.filter;
     }
     render() {
-        return (index.h(index.Host, { key: '247786bb8724ddcd5344cc02bb4f36e13737e43e' }, index.h("smoothly-input", { key: '3b8088c08cf3a7671b8b9b33e48ac133b7d4fe14', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyKeydown: e => {
+        return (index.h(index.Host, { key: '00a08a31c67448ba06e7b57cce3b88b240c715ba' }, index.h("smoothly-input", { key: 'a5ee71ef5672d4add5e99ccb2ffd3d4293cb778e', 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 => {
@@ -7140,7 +7140,7 @@ const SmoothlyFilterInput = class {
             (rest.length == 0 || (!!criteria.criteria && this.findInstanceOf(criteria.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-input", { key: 'b9c0bad8ca30d5e45e9686b52f8536cf8b0f3a29', 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: 'b6bda14b39abfb507ce5a83f0cf95efb218d7c36' })));
+        return (index.h("smoothly-input", { key: '397b2b9127c595d02cab01ee179da26eeb1d4c80', 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: '6cc2c8a4815cdbcfa837c6b0f6eb66a16979bd0d' })));
     }
 };
 SmoothlyFilterInput.style = SmoothlyFilterInputStyle0;
@@ -7249,7 +7249,7 @@ const SmoothlyFilterSelect = class {
         return result && this.property.split(".").reduceRight((r, e) => property(e, r), result);
     }
     render() {
-        return (index.h("smoothly-input-select", { key: '9107d3913b3e08208538db9de5d27e9b8107c816', 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: '63b6cea56be4665c27dcb4822bd55700b1e62a7e', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '30843b98d8e72b9eb258dfc6f12e58e5b49394ce', name: "items" })));
+        return (index.h("smoothly-input-select", { key: '008714e67ebc64def90a0646f9780fa11c905197', 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: '558888a8817046ff2b4a9707b0af26c9cfaa11ad', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: 'b59919853a6c8d6f25d707885983103854eef211', name: "items" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -7333,7 +7333,7 @@ const SmoothlyFilterToggle = class {
             (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-icon", { key: '087ba0fc1cce503a6cf10665e89ca279075fcee7', 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: '638c257f2401426e232d2016bb979b98c5f56829', 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;
@@ -8348,7 +8348,7 @@ const SmoothlyForm = class {
         await Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue()));
     }
     render() {
-        return (index.h(index.Host, { key: '544cb7ab781d344afba275f3e363a7ca5e615c2e' }, index.h("smoothly-spinner", { key: 'ffc3e23544446c744aec87941e1f7e137e71d83e', overlay: true, hidden: !this.processing }), index.h("form", { key: 'ee0a5b140641775c1d55c961db46e3e630b666a8', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: 'dc7509953049315094ba44369d7c56ee22c2e511' }, index.h("slot", { key: 'b510be19fca9b78c6ecb3b84648f75a21fb40d97' })), index.h("div", { key: '985fd0b35f3664135c09bdd03f6156399a4d3d58' }, index.h("slot", { key: '014fd2d642d29332f9fc28298b0cdbf2d5b7956a', name: "clear" }), index.h("slot", { key: '55d2fd1d90b303f56e9578704780fc78b9bc9e17', name: "edit" }), index.h("slot", { key: '2af69ee44488e47a52cf7dff75138c16c1883ef8', name: "reset" }), index.h("slot", { key: 'f35a976b66dada2670d5a280d310aac518eedc75', name: "delete" }), index.h("slot", { key: '90b1dfac51e438c663d93218fb114a491495864f', name: "submit" })))));
+        return (index.h(index.Host, { key: 'e2c17b7337acbcfe72ffb863c85e60faede5235e' }, index.h("smoothly-spinner", { key: 'd7662186f79ee0f5d4405016a35047f11ffcdc34', overlay: true, hidden: !this.processing }), index.h("form", { key: '632d61643ff5ebb0a76385ef491dc53fc1dd14d5', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '75dda536071a876101b3f74810d234db35552ef4' }, index.h("slot", { key: '167a59eb0712168bc65779d6218b0c0cddb1233f' })), index.h("div", { key: 'be5617bf40a0f232bce860be106557b28d8356aa' }, index.h("slot", { key: '2fa4643245d138a6f2c249b38249451c9f3d077d', name: "clear" }), index.h("slot", { key: '93a446c4e11d622a7c02c27681cdcb579e1ce5db', name: "edit" }), index.h("slot", { key: '18a353c56f4dd2919f7ebd4aae3c10d8c505ceb0', name: "reset" }), index.h("slot", { key: '5a5712ab3ae35fecbad7e62750d8461cebbaaf71', name: "delete" }), index.h("slot", { key: '6f0467383249a488f44b5a276b2d6686afe18d97', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8366,7 +8366,7 @@ const SmoothlyFormDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c5b442e2dc17139d030550d2595b2ce07c0c03ca' }, index.h("div", { key: '5a453eff769ea4cef9f474ae7bd22cfdae97e66d' }, index.h("smoothly-form-demo-all", { key: '1b771b6dbcdcf463b968518ee933bcf511adc25d' }), index.h("smoothly-form-demo-pet", { key: '9154d737dda44b49c7b1a4ddb3dfb7c2dc69bb4c' }), index.h("smoothly-form-demo-card", { key: 'b91fb0a14460ddf0074e55b4b31de8871ad41d47' }), index.h("smoothly-form-demo-login", { key: 'f0bc618e065739efda66c9eadb31d22785068e17' }), index.h("smoothly-form-demo-prices", { key: 'b9c08280b8cdb857ffbd5c443f5693e2b22a7cd5' }), index.h("smoothly-form-demo-typed", { key: 'e0a2cab7330a378e9aa8cec545f3aea804a0ff10' }), index.h("smoothly-form-demo-transparent", { key: '7cad7cf997da8d3cdfd40689a074fd746338eccc' }), index.h("smoothly-form-demo-date", { key: '1d8567528f1c8f3d5178b57e197b7818b7244dcf' }), index.h("smoothly-form-demo-schedule", { key: '0c96e9f297face51f234e8c377933468607d5ccd' }), index.h("smoothly-form-demo-date-range", { key: 'e1409719e74987f69cb66e689a88484f3a662ef8' }), index.h("smoothly-form-demo-controlled", { key: '09d09373a678c6754be06e7795870ad8344bfe55' }))));
+        return (index.h(index.Host, { key: 'e560582ddeaa5e0ff02ebcee939fde0aef479b6b' }, index.h("div", { key: '497467fdc7ceed5f8639dcd59b1cd4c16cae3db4' }, index.h("smoothly-form-demo-all", { key: '901bf716bdd321ec487718ce3222920bc8fc03fc' }), index.h("smoothly-form-demo-pet", { key: 'fb763f09b51b3dd8cfd563cdbed68823754dcbb6' }), index.h("smoothly-form-demo-card", { key: '7ad6bcae7773737c7230284c1a9b63ef660f2d2f' }), index.h("smoothly-form-demo-login", { key: '5ab06018d16cc734fa4747463fb66a7423814404' }), index.h("smoothly-form-demo-prices", { key: '90138c1bea5ae9dfa51c477e27da5ab4f921e7f5' }), index.h("smoothly-form-demo-typed", { key: '87828d40f3cd03c13521e376d7f20e1a1ea69ea2' }), index.h("smoothly-form-demo-transparent", { key: 'c12850e8cde3da0aab86374ab341b69877a45584' }), index.h("smoothly-form-demo-date", { key: '30688a397df7d91632385b53a425bd70278a2e43' }), index.h("smoothly-form-demo-schedule", { key: 'ba375963be37b11115c43e8c67cb21702b6056d0' }), index.h("smoothly-form-demo-date-range", { key: '0c2db2682e603490ca75127534782dc944db1ed3' }), index.h("smoothly-form-demo-controlled", { key: '4673859d87e9527db0c762884712555fa0bc577f' }))));
     }
 };
 SmoothlyFormDemo.style = SmoothlyFormDemoStyle0;
@@ -8376,9 +8376,9 @@ const SmoothlyFormDemoAll = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4aafdec8d02db081953d370ef8d76e2088bf1102' }, index.h("h2", { key: 'e8e4e41a8363fd24b1edc5a9e97a3b2c25858fe8' }, "All inputs"), index.h("smoothly-form", { key: '2c8e99228944bacb529312d309b10b9f3dba8e43', 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: '9298c0027a86d364c9e0adb853ed89060cc7a644' }, index.h("h2", { key: 'b86f7e41dcddd8c9337ea48deb27446b6794ea8c' }, "All inputs"), index.h("smoothly-form", { key: '860e8fbce325048a8e6bfaafc46f83136b016e6b', 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: '5453b9a059c8210c3311476842b7391f045667ab', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '90e31870a59bc198001b433647d2464a8686c019', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: 'a9a8375a554d460964cf1f8d2d83599e378143c0', size: "icon", slot: "end" })), index.h("smoothly-input", { key: 'f1af6f8f2c4c244a61bc4b7e2b2402c15bd36040', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: 'b07098fb565faa815121b1ac12d2f19c5dae383f', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'a7a55e86d8c37219a8f689ae44f249fa4b147357', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '3efcc33f30a7f52c4e287ddadf136b7bff33a383', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'bcdd7d2d5a7e3f9164f3970330ca517922ba1cc9', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'b90c7edce08ca75afc2abd72b91db9e7ec30621a', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'dfa717cfb10099f10c66810054e9c51874272c9a', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '28c439cbcb81a7f3480e67d956cf28b0cdff18c0', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '9d832b5471b3703173f92d0b2536af790ec872e2', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'bcc8d409a8d0fbfbdd7edc757958b3a43c2121b8', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '9270263fc0907a95fa4fda20faab20724463eccc', value: "1" }, "January"), index.h("smoothly-item", { key: 'df50a7b49930b58947e4ada4787fe0f3b9c7959b', value: "2" }, "February"), index.h("smoothly-item", { key: 'c9c9ed6fa3f64f2bb2a7f7ce7a8e3e6ec973a71b', value: "3" }, "March"), index.h("smoothly-item", { key: '1a4df13779efe8c8c61f2e57c39684690a7e677a', value: "4" }, "April"), index.h("smoothly-item", { key: 'c03f5dfebd422e4a81af772ab5ac5ddb08edecbd', value: "5" }, "May"), index.h("smoothly-item", { key: '1238d99c2295fa52c22e67076b9714d12cc19cba', value: "6" }, "June"), index.h("smoothly-item", { key: '46256dc03ebe9f2bebf360dfc51778aa1fa3f231', value: "7" }, "July"), index.h("smoothly-item", { key: '0d2d6530ef9a48579bf014197fa29c1778138b2d', value: "8" }, "August"), index.h("smoothly-item", { key: 'c454e4f74973b4e4919c8ea40576d174ec7c9762', value: "9" }, "September"), index.h("smoothly-item", { key: '6a410dc5b68b3fbd123531b99bad22d7ed9c0bce', value: "10" }, "October"), index.h("smoothly-item", { key: '5214628e65ea539a77a14eeb2bbfe4270fb03033', value: "11" }, "November"), index.h("smoothly-item", { key: '2ab1330f7b25c711d6d50239cff5f8c417addca6', value: "12" }, "December")), index.h("smoothly-input-select", { key: 'a1493892d87ab651e53780905807570b50b91d07', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '61df0c697952bff56da044b3f29748926e58967a', value: "folder", selected: true }, index.h("smoothly-icon", { key: '0e54b6ca59fccab56e3ed55aa03862a263eb7e55', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '5c3321c5142c69b3065b32a6b55a34aecfab33be', value: "camera" }, index.h("smoothly-icon", { key: 'cccbfdb9939b3d16a885d6605436fc54c1da3019', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: 'f2bd24855f068fb7add590cb87f4050a3c18c17f', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '59a3654cf275543968911fa8dba440c1667496f9', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: '45ed118690207280f2c26768d0da1b7801b24bf2', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '4d597c188035beeec5adc9ccef43bdf9e3eb2427', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: '9a9310130e8c940f4ec771aa6753e8f7231a7228', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: '2c6cd64ce3a290205856e2442a1ef199a46d1cff', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: 'e90157d8dfae3668bc67aa5646f2176754b08347', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '26ee4906aa12fc145f24a45fbe4e0e6ac4f828e7', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '9c313148e3134d81f9ffbe76bb50ddea1e5f82e3', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '471cde92dd3f9b6deb214d85fc689c4451ee2aac', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '9baf5b9e972d897d55296c4bc870b2c22df72caa', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '15b62211482dedb406cc0fe9979b2ea845ba8fb6', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '60578f6da664c305319c8f04d30a1c05eae33a06', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '8a9f189bacdba4054cbe6f4f21cd11c5246b5abb', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '480cf7b27cbdc2047f126677eb425a1576e98314', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'e3b3fb9fbf3a7999c76d81c85629170dd5efd6c3', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'db4bb9254a75878098844e4804a6121f053f631b', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '57b118fb1b4852b39baf424c3f69f1fa00bea891', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+            } }, index.h("smoothly-input", { key: '484dbd9795185b6639794d9327c89a143780e805', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '534fd25c0afa52da913af3b8db7e5466af0238e8', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '421f97e49656803aeece0b15c9b5836df4ba53e7', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '86935d28602aa195dd06314d1cdc6de612086de8', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: 'fd8f16a7c8370a74eb5bb006862ff0711dfc7b6d', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'd5bcd5035a4a7b89c0508c59bc60872089b0d32d', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '6863ab9bca796cf7251b070429a3c5e0f0550407', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '35af39c7a0fd98cc4dbb472c2ceb3dc63d5a934a', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '55c8c25754506cd692b1be9f90fc654094f6f1ea', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'c36de8288754936a549410de0cd2e85454428972', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '0a090d87ced55edf0c1139714ac5545a605d531f', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '446645ff8a548339fca2277cffb4c2ee3b9dd41c', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'bda1f349aad889ec40c44dae6474d0909b322968', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '09fe26ce4b5a9920eec454b00cfc8a52f7c81c6b', value: "1" }, "January"), index.h("smoothly-item", { key: '563059787300a3eafab433e89ac4e0490ce0b715', value: "2" }, "February"), index.h("smoothly-item", { key: 'f24d391ba6068274e5121f72f47a7ed146197458', value: "3" }, "March"), index.h("smoothly-item", { key: 'e533bf1e61275b73e545cefdd3318e0e95cd04d5', value: "4" }, "April"), index.h("smoothly-item", { key: '3d729d92a59da224464fda63a15cf868a8f318d6', value: "5" }, "May"), index.h("smoothly-item", { key: '38bbd631f5aaa722091f15b8d6fcc7016a24ba2f', value: "6" }, "June"), index.h("smoothly-item", { key: '58558fb82d6bf7795c5333cb78e6f57cdb408285', value: "7" }, "July"), index.h("smoothly-item", { key: 'b9ac6170978756e9c0c132d094d3e6c589b2dbd6', value: "8" }, "August"), index.h("smoothly-item", { key: '8c1dfb21e9acf0bd6c1e3cb6f137b7e774ea97b3', value: "9" }, "September"), index.h("smoothly-item", { key: 'ada2161238c0abf800739e9e53a8eff4cd94eb7c', value: "10" }, "October"), index.h("smoothly-item", { key: 'c5abbaf2ad1afe813f0bd987db7ea0315d54cf9c', value: "11" }, "November"), index.h("smoothly-item", { key: 'f1f97f553cefa013b4a3764c53b1ab536255a880', value: "12" }, "December")), index.h("smoothly-input-select", { key: '1671889e3da056149cb5657d935d44afe600e0b2', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '68d6ecab8efd17dde74150a1843c20a419453265', value: "folder", selected: true }, index.h("smoothly-icon", { key: '2cc01f6ac8ccb79b04e4aa6d809ed49a7044b2ee', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '1079bb57d321fc79dd8555e487e376166064e62c', value: "camera" }, index.h("smoothly-icon", { key: '580075f31efb81b91c9d8301a9a4febf9e82c339', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '71285cad4b29ad237c9005932d55380ef6f04b0b', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '4196ec46bd8a9cb588c4109ab80ef34dd2531f63', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: 'bf51eaf55920c8dd72a73872a2ca2d9f14281e52', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: 'd3171b955095dcc17ee5497c3a264756e74b4096', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: 'b11740151f1ab60c21c02a9f4244607e3001e52f', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: '4a4409aabcfec783101425298bfdb1f70b1edffe', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: '2c4d2d83bc1ddcdee8eb04fc199d849e9d973dcb', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: 'c721ccdf6b792df664d9e23e44e3d827d209aa76', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '767764bab214e208ef13572ca78f5353313aec4e', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '720645538a3cdf72551570d1a8ab4f25203469f1', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '1567a324ff92608c75e32be13aa1cf3d26bb80e9', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '3226559747e988f1ddebfab8f2da3f87c47135c1', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '4549acca34866a6e7c3d460612222be24d3b7c7f', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '76eebe5998fd3d83a50467b40ed9f7ef1566641a', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '76d8f79bacd7ef403beabd0609f6c9db74384d5c', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'a735f832cfde957585d383badd1b64ac0b380513', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '375de0564e4df2b96158ce1ea3bfbc53ec3d55c4', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '148ba1273c6d7fb3b3068c47c1d1d78c7f2c260d', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
@@ -8387,7 +8387,7 @@ const SmoothlyFormDemoCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e6e9b32074fdf87dab50af3c1f904ac6861964ef' }, index.h("h2", { key: 'd4512eea73d23fb396db207b58fd437b282ba6d1' }, "Card"), index.h("smoothly-form", { key: '96adcef6dba1a152573a391a8d020fba1c498b2e', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: 'c7e9dd627c326a133cdc3833d8aa9bee1fe3cd85', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: 'e5d11e876a9ad1171ce24aefa7f104fc51948df3', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: 'b7193c79148812850e1d31970f6696da9c8a1083', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '69e610530f2d65909289c3a957df8c182613e9f4', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '4f9685d7d83dff346e4660c25886193030395e73', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '73f829b49a411a438f2228d17679671a0075335d', type: "text", name: "name.last" }, "Last Name"))));
+        return (index.h(index.Host, { key: 'b38d193bc132649482539a562910c98936bfd71b' }, index.h("h2", { key: '90d93819c346fe276d0baad64a7ac3694ecf98ad' }, "Card"), index.h("smoothly-form", { key: '81e5440d63ff8059824a942cef88ceabfe192f2a', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: '9dd0df6526a036371062547bede12e96aa9514ba', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: '06f270d4474cd54e955fe514ece6cb182561255a', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: '97cf4ea96a751003a3522200a46bb754ca299bb9', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '6262ef8e2d8b5acb83bd2d5bc781ade78ef8d3d9', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '733d7f1542eebb66489f89e5c7b0db184e78d892', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'be78062f6dcddcaaf717a546b0ce12e8ef069a7a', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
@@ -8423,7 +8423,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: 'ef92c785b3365355b8ba811433b79938d060a5a4' }, index.h("h2", { key: '306ca5c5065a7a6e92ddf920fc987bf61228ab42' }, "Controlled"), index.h("smoothly-form", { key: '92248470b1409209b278951fdd4235cab8b6dc08', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '57d2c32977ca8b036f4d645ba9487df62d396073', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '9e29c5a6cb0b31b23fbe5e4db5c915e11b61eb10', name: "currency" }, index.h("span", { key: 'bae8a234efdf2ff5964797acb15ace498cdb2265', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'd178a9307c618462ef461009da95292fd6f11b2f' }, "Dummy"), index.h("smoothly-input-month", { key: '724c1e722dc1356525201c391321ecce06580ef4', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '93fb5f06e98380c3a26435e560cbbfdff67369ef', slot: "year-label" }, "Year"), index.h("span", { key: '29ff08b4c11e66ddd5529b872ba310189ce460d5', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '869f2703a94250f47169d0f532995ee239479387', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: '6801450e28506323ec1e963540acf491419b48d2', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: '7c5df04fd4720162adaea05387260f3132e940bf', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: 'f653f0ce84b051c93e1b28442113d2cf1a8b926b' }, index.h("h2", { key: 'e5dad92a06e3bc295b7cc5dc2df4ec1e55fd7d26' }, "Controlled"), index.h("smoothly-form", { key: 'da1d60fc62d3e5163420dd2784cace05a5df2f8b', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '01b6daa4079c7885a31e4127b2b03e10c4e1df4e', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '4dfdbd37e9916aec02850c83e0c7a830a9cc1b0e', name: "currency" }, index.h("span", { key: '9b1526a565f370b09490374eb8b7d03770470669', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '3fd295c401905c5163b202ff044e8e3bdc5cf865' }, "Dummy"), index.h("smoothly-input-month", { key: '4a5239ad2cd9589ab827f5da772e95491cd99649', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: 'cd66aa878c1d871a11b32492b2348f8d32383281', slot: "year-label" }, "Year"), index.h("span", { key: '33029c392582580e37776c8dd0b7d7a30644bd10', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '4a67aaf68157a04c90ca3c82de46bf5cb513ae52', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: 'd19f285af0e211b4a08f3ed82b6af1ee1c692783', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: '7199d2c48ff38360791ea6423179c3ffe6dafe04', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8454,7 +8454,7 @@ const SmoothlyFormDemoDate = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '22f4ed40b5848bc4784005b35f4601ade0ce4aac' }, index.h("h2", { key: 'c894900036aa83547c5b92acde5fa1dc2e56030f' }, "Date input"), index.h("smoothly-form", { key: 'd0ac14b67b826e1b731b397c76d78f2999b946ec', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: '74557c8d42c7091413536585a6eedef8cc464ca1', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: '283d86091ece17e31f8a9818ee281335836a314e', slot: "submit" }, index.h("smoothly-icon", { key: '189942a7dd92dd1166b83edfe8987cd3e18d8a39', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: '6de62591a7ff99e95c86427c6e7d01374d9d8502' }, index.h("h2", { key: '1780c7b2b48f5472d1e3cb10f9390861172be2a1' }, "Date input"), index.h("smoothly-form", { key: '1a639c8acf534b5735111816fb2137325ec14683', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: '0168a5e216fabf08a0d8840ef011ea041931e4e9', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: '3f2d5322924d28704e5588fb4446ad85b07c82ff', slot: "submit" }, index.h("smoothly-icon", { key: '3bc96c9ddce72c537182a47c21c764ab17c49780', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDate.style = SmoothlyFormDemoDateStyle0;
@@ -8483,7 +8483,7 @@ const SmoothlyFormDemoDateRange = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '68aae8530e210936e6ee1cb52e65835cb5376088' }, index.h("h2", { key: 'ab56927aa4b3ffb87ad6ccda58ae62933c210ed7' }, "Date-range input"), index.h("smoothly-form", { key: 'b1901ddc4170e4f0cd5fd3a2685ba98230a519a4', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: '02ddba37b9f1a82f494717bbcdac1b86aff508b5', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '91c4c3b390da5f50236ab9afbd53c1b005a7a90a', slot: "submit" }, index.h("smoothly-icon", { key: 'ddecec0e052bf335197963a0e85345a4396d3976', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: 'cf815ff0b936ae8d935ec09487dd7e1931232bbf' }, index.h("h2", { key: 'a2c97f6d833c9cad02d7f67a917ff396ef95efb4' }, "Date-range input"), index.h("smoothly-form", { key: '549e8e92283c7193e9c712628d1c69ffc0fe6594', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: '8c616d33a7dc57cc9820baa0180e1c8a2856580c', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: 'f835c5f6b6b8f8ce3b7ed86963c9c833ee38f614', slot: "submit" }, index.h("smoothly-icon", { key: 'e1e6fc8861978fbd78adec1762a42568c11f8670', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDateRange.style = SmoothlyFormDemoDateRangeStyle0;
@@ -8493,7 +8493,7 @@ const SmoothlyFormDemoLogin = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '914cd546393dcc39159cb968565a77afb574538f' }, index.h("h2", { key: '7fee155ff0311666f0061bfe0b0292d7418150f1' }, "Login"), index.h("smoothly-form", { key: 'f3237c61ebb16e0f7715a87e3a949705fa6979ab', looks: "border" }, index.h("smoothly-input", { key: '0ed97ea010760f27c89e4c78d3b00dca898b4d98', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '039a6e17d6e359a93639ec99442b8cd93c91a1e1', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: 'e64d6a94c00b458d0d7c5e5b77a5f8b3a0fc316f', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '886ea445167ab3281130390594d3e165e7676b4b', slot: "submit" }))));
+        return (index.h(index.Host, { key: '490a2e47a4ebc25628dd5ce7f43f238789c11d37' }, index.h("h2", { key: 'ee2857de7b8844162e90a0a067ad94a3ec6452b0' }, "Login"), index.h("smoothly-form", { key: '4f98f14f54bfa13e27b4165b68b67a1886399421', looks: "border" }, index.h("smoothly-input", { key: 'cbb7490b8a5e0e6d5f4ea836c0a067b5a8981f44', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '710a9b179b674cad575c3b871acb8fe20ee7bf93', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: '76a6869bcb095f3b96f2280271d33ed13ccc370c', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'faaffd995c8ab8430ea6e655be144a4d15442f39', slot: "submit" }))));
     }
 };
@@ -8509,10 +8509,10 @@ const SmoothlyFormDemoPet = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'ca731e714eb7d3c9027c8eaacccf0ef611917de7' }, index.h("h2", { key: '6b4198cb4bc6f85810f4559fcfa97b8aa1948d76' }, "Pet"), index.h("h3", { key: '8877db7feccc2c437df73f4b9d1df2c0d9e9397f' }, "Value"), index.h("smoothly-form", { key: '817548dbe700db117d066032605e83e89bae52f9', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: '159422b05784af942138ba2b73c663988a981795', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: 'a63d1fee5a11efff76f921e18cf7905473a41715', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: '8ad23527074d579b7ba39e9d39ba25c458173114', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'a18d5c4d14929268195fcd13712e653abee7ce4c' }, index.h("h2", { key: '0357eb46ceb9160a5e7c0301134d5ccec5dbecb1' }, "Pet"), index.h("h3", { key: '7f0ab35101334386099c65cd327e2db657ce81ca' }, "Value"), index.h("smoothly-form", { key: 'c5d882668e047eeaade1c61ba6faab1d12db7b7f', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: 'd2e45273c5ce4defe229bbd9602a6a61a807afe2', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: '4f4ca5d95583b231a08972da2e97ab4207529257', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: '471443d6c675415da6a3c623b7bc91c3b6d39742', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: 'fc45ad128e8f79b37745c32f67d1ba7e8b1c4fbf' }, index.h("smoothly-input", { key: '86d389e5e7b0d28d0df399400085729f6471716c', 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", { key: 'cd62d7fb931c4400103fcc9d9a053a05fa85e487', 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: 'a2896030432f228ad920cdeb4ba5858622ec80c5', name: "owner.picture" }, index.h("span", { key: '24617088152871d9ccdaec6090a8f373d91f23bd', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: '0401cc3c3323b07f71276a072319a30325200c3a', 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-date-range", { key: '157925e70ec5003e368a04d598974017ed09ebb4', 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-range", { key: 'ddb0c2ce68a4217fc9888bd5cfd1ba23f86070c7', 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-select", { key: 'c8c5da0249521e8531c89a7b8b3ac763d87efb41', name: "owner.favoriteHat" }, index.h("span", { key: 'a80454815d98de8211d0811be4f4e010eb5fea1d', 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-color", { key: 'e89472883061c53b0f8eb697ee7780fddd438426', 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-radio", { key: '50c7b642ea08b27fd6f2a29d1cd1985b13f14789', 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: 'baa6df6905dd70e4572b91ee17d599c75a593c91', 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: '5bb00bd662f3c4e537ce4fd107845b8d5abf09fd', 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: '4a3fc4cd07aa3873945c3ab974f99d037e3fbbda' }, index.h("span", { key: '0afdd64ca5682fbffd32bd276ad1754347be7c22', slot: "summary" }, "Summary"), index.h("div", { key: '495ef4c2d75d1643bc4f60dba3ce24d4b59cbe74', slot: "content" }, index.h("smoothly-input", { key: 'b62901460412b55658e0ecf9684dcf228c9b8aeb', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: 'f5bbe653d7d76f849d407ed5412e7fd74738cf67', name: "summary.picture" }, index.h("span", { key: 'f895d5cd3508e1d0584c4b0f27b55a782f400185', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: '0954c449c3dde1535e41b5b7ef8c68769c41bc92', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: '517776b35be90839508d52ef064ab6f60666ac04', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: '9177373ede95dd28367e3da1ee1f1f9320f8d3b3', name: "summary.height", label: "Height" }), index.h("smoothly-input-select", { key: 'b49a7896448c2d40440e5ab6cec301d73d873669', name: "summary.favoriteHat" }, index.h("span", { key: '50efd70498341500f18cbc37beaaa36fabb8dfa1', 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: '3855402ed77dd5d6e8e2e3e5d83928df72846a6e', name: "summary.month" }, index.h("span", { key: '2a19d1c8ca76b2a9e161c1ddff12574157074994', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: '5860b2f19faf59a89dc7ec927580eec8c87cbb4a', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: 'ed742b746ecd09c0a68b239b020a0d5c98a055a7', name: "summary.favoritePizza" }, index.h("span", { key: '658d7669cad7375204a0b8da4e811859d79ce8ac', 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: '5b6e99bdbf96c73a979dbf896e283e04c7e5914c', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: '4f491e665758c320d52b1296eb9bb7497697b626' }, index.h("smoothly-tab", { key: 'a0bf8af72607a286852fc39001708de27bf2e150', label: "Dog" }, index.h("smoothly-input", { key: 'ad8d73982d3791688cac56360b7924747af0110e', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: '8e5248bf2108046ca6cbdd8ec0185d2cb9aec86c', name: "dog.picture" }, index.h("span", { key: 'a4250a2ad68960d8842266cab470a91809c7b245', slot: "label" }, "Dog picture")), index.h("smoothly-input-date-time", { key: '27a696243ca01d4cab3367300967196372fd952a', name: "dog.lastWalk" }, "Time of last walk"), index.h("smoothly-input-date", { key: 'c06d1ef75c940488c6016976e017718279efbb58', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: '62f5fb72529d8b243979a389861e9927c7a7e470', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: 'abfe59ab4c9e1f78b34664c6a17e0e3301757632', name: "dog.favoriteHat" }, index.h("span", { key: '54cbc4f6e9a219883a7d24562a5558a79cb45c11', 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: '4b92479885ffe3f6457946214192c5301298d421', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: 'e3c13c05702f5d50c9cfa5911a6b5d97d760b1be', name: "dog.favoritePizza" }, index.h("span", { key: '32b8daa4d676b59d95f0c2668991c4849090098c', 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: '7bee52a70d21bafa0850dd7f9281e257b68557d8', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: '2adff795ab3cca5271c365a2d90ac515db6379d6', label: "Cat", open: true }, index.h("smoothly-input", { key: '17b9bf37e745b6e535dde50decd7b7128e67c07c', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: '905da98d7ab630b43cf07c21a2cd78fb20b2ba64', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: '7cfb16ec38bb5c1929ac6e77ced637c1241e979f', type: "json", value: this.value })));
+            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: 'f1681976cacf93aa7fa738d9f46d07a977f2598e' }, index.h("smoothly-input", { key: 'b2cd9517d1c0ff3f30255222e7cd7c81795d0963', 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", { key: '6ae4a20be64e8e361d4aff737bc97c7e5e0f5fba', 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: 'bf2a7442b03901a499c917632f7e371f77876d14', name: "owner.picture" }, index.h("span", { key: '316b8244fdc16e1421ff397f8bae5fca23ef298b', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: '26ed4d312009d365d0f8377a02ffc264c09513e8', 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-date-range", { key: '94038dc278f1f2d845645f4d11da5cf0732a681b', 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-range", { key: '954d3b9369243b66708a3621b87af070dc74c309', 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-select", { key: '5733e2d2217ccc963265a87572b40448c920dc02', name: "owner.favoriteHat" }, index.h("span", { key: '1ea7549b5edcd448434da347d79b7f1452f285c8', 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-color", { key: '52c0e5c0c2591c44a98d25c856ee4ed7b30d664f', 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-radio", { key: '5eb8772e00bf998a3afbef72a58b92b0508d1212', 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: '4976b880777c43be895af8624c68d30e74601aa0', 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: 'ed66290cbea3e2ceb5ae2db1a35236edf095bf88', 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: '15531c02a00038be14f92110635eabe7cbd91ee8' }, index.h("span", { key: 'cc8feedb365cc7309abb5e3c6615460a9bc9d51a', slot: "summary" }, "Summary"), index.h("div", { key: '86881f2206f8b6e668f30725abb59073cdde9bad', slot: "content" }, index.h("smoothly-input", { key: '8ae806180e0a3d7742d89ee0ee867de0a3154309', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: '241fe3c82beb3c5cdd5f11ebe46e047e17c9b793', name: "summary.picture" }, index.h("span", { key: '4c8564d04eab9f0dd365676e61a591330d6a8377', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: '7314238424905e58a4b55cf71a9dcac6bcfb2037', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: '9c4f11e07a21b09ebf9a16522ff4b7ea1737de93', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: 'f1b14b7089e1a878c3ecd59619eae564c475a88b', name: "summary.height", label: "Height" }), index.h("smoothly-input-select", { key: '2ff53bd36442606dfe4edbd312000cf3dc27f7d4', name: "summary.favoriteHat" }, index.h("span", { key: 'c1639a257b254fa95e150c5331f6619cece2e271', 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: '3e9e26fea7233fed804cbaa4e47416f10b502e6a', name: "summary.month" }, index.h("span", { key: '55a0b4755c339c923ba1303f1633569cbfccde47', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: '0b877be6d38d3830a02573ac31ae43f0d4e9d37f', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: '2173726df1607df4e35595db8cc0b73da5a9be4a', name: "summary.favoritePizza" }, index.h("span", { key: 'af0ed6de4a2b0f43a0e03fa1053781e84355465d', 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: '3f101db40c6c9ba210413b95d77e4b2a92b59796', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: '7b94e0f32cf078215bdf1f6f8595de03dd6a9040' }, index.h("smoothly-tab", { key: 'fe043b8af808d30bae169cefdc81ca0df9f18979', label: "Dog" }, index.h("smoothly-input", { key: '882a63607ea9f8785c37b9474a748c34a9f5fbdb', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: '28e53f4ed82779b99dcb9bb28c2428321a299bdb', name: "dog.picture" }, index.h("span", { key: 'b0cda5a32d911bec1fbbc5a6986f49bc5fc4b484', slot: "label" }, "Dog picture")), index.h("smoothly-input-date-time", { key: 'cd4403ef213dc3085cb7ac5c3cdf2a58b1fc0c41', name: "dog.lastWalk" }, "Time of last walk"), index.h("smoothly-input-date", { key: '32047b040c0044fb34c0d75e30832c85b3ace4f5', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: '38f674332427fe13994fc9b54b99cc34f839a344', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: '8b384c2815f3fd6a6f4490b404bc05ef69386325', name: "dog.favoriteHat" }, index.h("span", { key: 'a1e78f6458fe7718f9c9ab540fbe42fe2d486f96', 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: '4126a474816acd625a5f3cc535f3f6088f44ad88', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: '15f4faae549f42b0fd97ae3d12ead05d18f6356c', name: "dog.favoritePizza" }, index.h("span", { key: '8004907412ece6876d8a8b82f491a2748d909fe7', 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: 'f2e4751841dfa757f34e0aef0cde72475fccd451', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: 'c80492cade2d4e60d6858dfcabcd22d8e9a7afcd', label: "Cat", open: true }, index.h("smoothly-input", { key: '074d3b030c92792efb5dc64731acc4ee6937b013', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: 'fc2e297badc699b4dfa0acd208e79278437b149f', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: 'b50600e5c51b8ab0d34bc45b9f0b97cbda54edc3', type: "json", value: this.value })));
     }
 };
 SmoothlyFormDemoPet.style = SmoothlyFormDemoPetStyle0;
@@ -8522,7 +8522,7 @@ const SmoothlyFormDemoPrices$1 = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ef817730d780031d431f9d992a09bdd1d6dc0191' }, index.h("h2", { key: '95f0c14315fe2cd12df649bb02827250ccfbe200' }, "Prices"), index.h("smoothly-form", { key: '0f741fd222ea03a1c2e58d0f3e997ffbcddfb859', looks: "line" }, index.h("smoothly-input", { key: '827cd91113c01c151a5233d794320bbc242faa82', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '0ec4534ffea6a2ece32abcb4d3a35b3b940f23d1', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: 'f892fac339134188fc77faefd7e5c2b2df362a40', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '9ec492d628eca72e8950e7cd43a70959a2c9040e', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '08633f3a3a246e4e9dabcea722dc55d8faa2f22e', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: 'cc76fb65cc5a86910d65e5c9db18fe4d26c863db', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '88e78717c9067de04ee4420780b2d7fb05f316b2', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '40c78c747e0fb909c4b63499cc88b8cf6f798c82', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'eee6152ffc0a5d7672016e155df3105eb5a9f340', slot: "submit" }))));
+        return (index.h(index.Host, { key: '5cf161138753162cf3c11c3e9566c513ff94f8d5' }, index.h("h2", { key: '0161fb3ff22219ba054d29272c97456d9e452a4f' }, "Prices"), index.h("smoothly-form", { key: 'd7643c355277d5125b3518e9fca40fc971e49c82', looks: "line" }, index.h("smoothly-input", { key: '9082686e7c532f67e5cb703142fe635ea07445af', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '92de76dc50d9ef0f6a75a24d3ee57c99a6b25c02', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: '6c26c4cef820c4797f5278a4b7cd941031a7ee9e', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '1c94af3ac625617ccc7082db9f304ff351e50325', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: 'b1d2404c79c35f8222c5de3f680873f42f57ec7f', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '8a8553e49d1e3f2881d93fba40e9d9adc838c83b', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '6bd9082eebfce511f786835db565de39e82369c5', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '8473f604d9f3357711013f0d11822859a7d3dbab', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '449971455202ecff95211d20e436388edbd2b95b', slot: "submit" }))));
     }
 };
@@ -8542,7 +8542,7 @@ const SmoothlyFormDemoPrices = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '9a8342191bcb4f1494d365dbd86a8d0d1faece52' }, index.h("h2", { key: 'e6a539aad12c022a22e1a8edc27d44fcb4df8867' }, "Schedule"), index.h("smoothly-form", { key: '87269a58de54f9789fd32edb99bfc1523d7a919c', looks: "line", validator: TimeTable.type }, index.h("smoothly-input-date", { key: '78b0c1c19ff5a62beffd822e7fc15303595b0963', name: "schedule.0.date" }, "Date"), index.h("smoothly-input", { key: '85b77f75bde169c83db4d51231eeac72bf5af087', name: "schedule.0.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: 'e79ab0b49b6953dba70834e4f915d8c5ad0cc574', name: "schedule.1.date" }, "Date"), index.h("smoothly-input", { key: 'de7dc6c83c44e3288f4f3c3df59919d174d2d1b5', name: "schedule.1.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: 'ec0256b3c2d0a081400d3360dab5a3a28880dabe', name: "schedule.2.date" }, "Date"), index.h("smoothly-input", { key: 'f6940419a9d7f7694e17b1a777c5fc673dc2341a', name: "schedule.2.amount", type: "price" }, "Amount"), index.h("smoothly-input-reset", { key: 'ecd898be80239b97a44e442d4aed1ad136576781', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'b0e460ddd55e7e2336cdef8a41bf1ed80105d494', slot: "submit" }))));
+        return (index.h(index.Host, { key: '3299acd725ccaa0186e0113a6c679ab18d6652a9' }, index.h("h2", { key: 'e1bc9edde289a35721c23036728963e1e33eb721' }, "Schedule"), index.h("smoothly-form", { key: 'fc8f0785f9031ba7f02a66a10978255e832fa599', looks: "line", validator: TimeTable.type }, index.h("smoothly-input-date", { key: 'a7ce025c1056ada02dc4c21f16348a8b0169fbb2', name: "schedule.0.date" }, "Date"), index.h("smoothly-input", { key: 'f9001abd54ce0b18742bc0af2defeb38a39ed858', name: "schedule.0.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '5b4cfed469b03c901ad1487962cb67e0dc214ea7', name: "schedule.1.date" }, "Date"), index.h("smoothly-input", { key: '0427bbd7b4c5187293284b73bafcd3c21ab07f0f', name: "schedule.1.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: 'e689f08a71814fd2ee110d168caae2cb7ad635c7', name: "schedule.2.date" }, "Date"), index.h("smoothly-input", { key: '731308742dc071a745eb219952055e500bd503af', name: "schedule.2.amount", type: "price" }, "Amount"), index.h("smoothly-input-reset", { key: '02882a6878a2600eb45e25bda01421ac2142069c', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '9a656da9019c0845d6d1e64526228fa62a978176', slot: "submit" }))));
     }
 };
@@ -8551,7 +8551,7 @@ const SmoothlyFormDemoTransparent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e9d2b7c2c35a7fef3d63e5a2e2ad78dac68afa94' }, index.h("h2", { key: 'b0196e756933499f3bb5e76029e7c8211b35ad14' }, "Transparent"), index.h("smoothly-form", { key: '579b4321ee284ee6c6a015890011a020caf6513c', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '4bd0729987399d728df72d10d98f3d1d8a321a25', name: "file" }, index.h("span", { key: 'd94eb8d5b54e1288e498ef2a0b058d0d965a6574', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'c7c69177f08ab65b15052e41ecf8f404c285dff5', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '424ddc6565d5d529f1e3e3fc3c4cc378c4fa454c', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '3c7598b83574ffdc75b482ab58ccf29fded61a2c' }, "Date"), index.h("smoothly-input-date-range", { key: 'cdf7915921db87ed535cb7eceb913429226322bb' }, "Date Range"), index.h("smoothly-input-select", { key: '24b0fcdf3bc5a9a45f3121050d117154487f80a5', name: "transport" }, index.h("smoothly-item", { key: '32bcc1947d96c59b65e7cfa233625e1777bcbc50', value: "plane" }, index.h("smoothly-icon", { key: 'ee4f64850410090b75d20b188ba6d3a705fdbdbf', name: "airplane-outline" })), index.h("smoothly-item", { key: '076e4bbd8dd60150320846294d6644b679fcce43', value: "car" }, index.h("smoothly-icon", { key: '589f0efbfa101d53697454c13c4a9ac506a391d7', name: "car-outline" })), index.h("smoothly-item", { key: '3f91afc28773ede15773df606539ded87536c671', value: "bus", selected: true }, index.h("smoothly-icon", { key: 'c2a81e1abaad259df119248a3fcd81c5d63c713d', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '32fb53f041b821eda365ac8ffa8df118dbd2b3c7', icon: "checkbox-outline" }))));
+        return (index.h(index.Host, { key: '8d7be0985d3c1b2b79dd2b2b843fc77c37d17c1f' }, index.h("h2", { key: '9dcd718676e6ba9dd71267c4bb3d11871329b622' }, "Transparent"), index.h("smoothly-form", { key: '81b16b7b4f7a9a693b76b709256638f17c2880a5', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '4586888852990146274d880c983a1e3be992c436', name: "file" }, index.h("span", { key: 'd9068024fdbcc58b39311d4abaaf3341b77bfab3', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'f42649cbeda953b487d951326ed39043dab4122d', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '630bd231d11937a6ac4378736d39e87d94323932', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '1b9f2ae8887909c9e2fea98728d3f556d46964a4' }, "Date"), index.h("smoothly-input-date-range", { key: '655a5a882586b21193abd30335b3381ef7feb539' }, "Date Range"), index.h("smoothly-input-select", { key: '7368c71dce051429d9bac906a19ee130781c2c67', name: "transport" }, index.h("smoothly-item", { key: '05984fc6b2c165ff275e2fabe92594cfa87782a7', value: "plane" }, index.h("smoothly-icon", { key: '4bbfa0b7de34a53d7e890432fde7db1b11ef129b', name: "airplane-outline" })), index.h("smoothly-item", { key: '2038866ae87e6e2e06a66c98ffa41826dad3c7cd', value: "car" }, index.h("smoothly-icon", { key: '9b52c37976ed2839314ddea50d9d50617bf5aa34', name: "car-outline" })), index.h("smoothly-item", { key: '03f5679c1145b764ef65b3557a021e7dcc689b04', value: "bus", selected: true }, index.h("smoothly-icon", { key: '88ca130b69c2aa5e6f452c6c341a09cb72b948c8', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '01c6a19725e6a2d774796423ed04bfe153650b33', icon: "checkbox-outline" }))));
     }
 };
@@ -8573,7 +8573,7 @@ const SmoothlyFormDemoTyped = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e53a0a17b2302337cf2e1e045f94c96906dd3bcb' }, index.h("h2", { key: '0cbe465c14b22f04250ae487d0790ac1910f5e59' }, "Typed Contact"), index.h("smoothly-form", { key: '88448919f6a71ea37240853f673dc0ff07df9587', validator: Contact.type }, index.h("smoothly-input", { key: 'b17b6cdfd48aa02789204504f52876f3a55c578e', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'ece3d88c0ff08625d55281cc1cc6adbb1f02efda', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '61d9bf66ca545510b46d3c9936cf552e44538fac', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: 'dffb209c6e0f5c98cb17bd74dfcaa402061d2172', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '04948477a80cca43ddab4fcefe77230b576f3145', name: "country" }, index.h("span", { key: 'e3d6e8bc8bd964b44f58a8ed47cccfa1aa363066', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: 'cc4e3676ec2e411a7026d48d4986864800a046a0', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: 'af37d92c8ffa3a47b8573af693f7aa4b245a1c98', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'e1d18fc9c58985f06bea1173a15920eecbf98d29', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: 'c73c988ce6681e27320a66655a0528079958cab4' }, index.h("h2", { key: '6298cb241f37a9c13f05331454e73c5a8207bddf' }, "Typed Contact"), index.h("smoothly-form", { key: '04bec3db0d73a661140f5b5cd791f785903f998e', validator: Contact.type }, index.h("smoothly-input", { key: 'f35f3b74089291760ac7f3609f3c2b974859ed1f', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'eefa07426757567f90ef92040fbad59fb07d6d67', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '1761cde3715783a29414ed07b73e59d797c5f39d', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '5c63c10a9913c425db7e670500e11f1c2aa80e38', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: 'c057deac00aabc0218425940fc92911df63190bc', name: "country" }, index.h("span", { key: '1c34bc0d49d075140a376e2c80ef3585f2551c67', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '8a9be3f1d54d46184509a712d85be19049e8bb28', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: '4013323961a0eee9353c2384ad6881a562ce7753', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'c637c7234c29c115889c68c3ccb78d141c68e454', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = SmoothlyFormDemoTypedStyle0;
@@ -8671,7 +8671,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index.h(index.Host, { key: '0cd1bf1fd47bb75db4addbb772c8ebf7420a9f76', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index.h(index.Host, { key: '6131214e72ce045ae0f9402ce58de3f26aeac91d', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get watchers() { return {
         "toolTip": ["nameChanged"],
@@ -8692,7 +8692,7 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (index.h(index.Host, { key: '62708f079ddee486734d33e49e50ae2558cc52d7' }, index.h("h2", { key: '9daf63fea24f813509180b6da99d1989aad4448b' }, "Filter and Variants"), index.h("smoothly-form", { key: '6ae13747e710a0e95782f87fc202ccda48db3824', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: '4d206c676a1a629331aa1492254c766566135ede', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '1dc08cd1e052453d4aa7e27fba2d65609a49f866', name: "variant" }, index.h("span", { key: '646c1e579d8cb2e679c77a8835f620cb5e7dcaa9', slot: "label" }, "Variant"), index.h("smoothly-item", { key: 'cddbecdb6a46aa56e29a70179003e92afdf21ef4', value: "outline" }, "outline"), index.h("smoothly-item", { key: '3121ff8590e82394c3bbf2c352e56fd7f0c3e048', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: 'affa09805a787591ad55073219a04e1083a70848', slot: "end" }))), index.h("h2", { key: 'da00f6dafde8079b44e962bd4a51fab57b5769cf' }, "Props"), index.h("smoothly-form", { key: '420c4c62dc31e8606475afd0754f535f7ae550c2', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: '5843a6d6eeeced970126d5f602693fa365c2492f', name: "color" }, index.h("span", { key: '770f177f71499fa8274523241b97f4162a4bafb2', slot: "label" }, "Color"), Scrollable.Color.values.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: 'c2ce6484987455f4a9db213c9737489e86283a33', slot: "end" })), index.h("smoothly-input-select", { key: 'c5b32eb509f543b213845dca10df50df9f04e8e8', name: "fill" }, index.h("span", { key: '3d94614bc074a46b2f687f934377b31f727c7917', slot: "label" }, "Fill"), Scrollable.Fill.values.map(fill => (index.h("smoothly-item", { value: fill }, fill))), index.h("smoothly-input-clear", { key: '40957b700c25fb1a27402667666bafe0cd0cc182', slot: "end" })), index.h("smoothly-input-select", { key: 'cbef37a017be99621df6698d57eddd3b6975df0c', name: "flip" }, index.h("span", { key: 'd384e098cb6b58c141e98fbb37e28f00669e7884', slot: "label" }, "Flip"), index.h("smoothly-item", { key: '3990c09061387a8aea7753103db56e08fb5c4f20', value: "x" }, "x"), index.h("smoothly-item", { key: 'a8e48ae9700a50c1340bbb05706386335441de24', value: "y" }, "y"), index.h("smoothly-input-clear", { key: '984009c27202699fb8bfe6aad99886087afddfcb', slot: "end" })), index.h("smoothly-input-select", { key: 'b192607f8615cac74df64ed1afda16ca5a88c884', name: "size" }, index.h("span", { key: '899b2324d9993983766fb24ee175d8bfa758dbe5', slot: "label" }, "Size"), index.h("smoothly-item", { key: '56e975109e10df35375eee193081e96c58d104fa', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '9d9d204e20db7f1447f38947dd30521bcd68f5f0', value: "small" }, "small"), index.h("smoothly-item", { key: '9d1216f79b2ab0f66cfc395eebddf8d88be3f6f5', value: "medium" }, "medium"), index.h("smoothly-item", { key: '67e4f4bc0df6baa70ee927eaa0a275fdd3aef8d7', value: "large" }, "large"), index.h("smoothly-item", { key: '42580e58183e763f425e375c42940d8613f0946a', value: "xlarge" }, "xlarge"), index.h("smoothly-input-clear", { key: '11188b6cb463578b0253d694b097a13af0e842c5', slot: "end" })), index.h("smoothly-input-range", { key: '250cb6caf4a697ab7a7c4af16e0611858a0cdec8', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '01eef0ab611eaec82527f731f7423ad023af7507', slot: "end" }))), index.h("h1", { key: '69996c44ed040941e07bad3191edbf8f65d321a0' }, "Icons"), index.h("div", { key: 'c66af90970b454464bef605bc942ee1ea9796ec5', class: "icons" }, [
+        return (index.h(index.Host, { key: 'a0706709d49ae4e3beea0bb5a592cce83dbdfc50' }, index.h("h2", { key: 'c4058a68fd71e6c1a659f997815902225772e0ce' }, "Filter and Variants"), index.h("smoothly-form", { key: '2a7206c94f5bd868954ef2bbab2c16ba5ec701be', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: 'c81c786a01c0c9101c4c2669dde4891fcc8d79bd', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '21d064354e488eedaf0f4d837324d6473edffd99', name: "variant" }, index.h("span", { key: '8e770299b884f6920949df5386e8eb2a1b68c057', slot: "label" }, "Variant"), index.h("smoothly-item", { key: 'b29db45415e020b3170d75a5b114c826e9d88454', value: "outline" }, "outline"), index.h("smoothly-item", { key: '9d032a3f19743194c46b68b5e9ee58e4d13d15dc', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: '32adc83b75e1cba0af54469866681129265c108d', slot: "end" }))), index.h("h2", { key: 'b7261752dc07d9859f217cdd79769e490b950ee0' }, "Props"), index.h("smoothly-form", { key: '3e34648bfa6bf8628974bbda25db0132bef60982', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: 'fe612d11a476b67e7ac7535df7a06eed6676545b', name: "color" }, index.h("span", { key: 'a8774f195af193c7bf455e3f1ee746c83393de2d', slot: "label" }, "Color"), Scrollable.Color.values.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: 'cb96ef4ea25111b19a8a32f61ebda4d48aed061f', slot: "end" })), index.h("smoothly-input-select", { key: '8be80163691b4843d40152e228ccf837b28d902c', name: "fill" }, index.h("span", { key: '7a4ad5ab5d75fdb994d7dd51e27fe0f3048024cf', slot: "label" }, "Fill"), Scrollable.Fill.values.map(fill => (index.h("smoothly-item", { value: fill }, fill))), index.h("smoothly-input-clear", { key: '6e945d2ce1769e1b97b4f28cfb52aa4f5c288e01', slot: "end" })), index.h("smoothly-input-select", { key: '3cb368e15af0312dfa6cb64ddea95b06d1f8aa7f', name: "flip" }, index.h("span", { key: '8622114e3082f040179d53ea261d17f585a29c5b', slot: "label" }, "Flip"), index.h("smoothly-item", { key: '41940930aed4abfafb6b50713dc133f2cd34c9c5', value: "x" }, "x"), index.h("smoothly-item", { key: '9d151f226cf4aa1bcf82415b74341259f9f78b24', value: "y" }, "y"), index.h("smoothly-input-clear", { key: '72975515ddf54f1fd7dab600ef080ee8498c07bb', slot: "end" })), index.h("smoothly-input-select", { key: '4ba83461e4023c99ef94fcf0c351ac98e70e0cea', name: "size" }, index.h("span", { key: 'ea31df439d850779406fa35094e68c590e3c8add', slot: "label" }, "Size"), index.h("smoothly-item", { key: 'b27300ba82640e5ee2e78b712417aa96c7bb6093', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '0e5de1cc80c0a336c4dfc1b77e21f6593483fe44', value: "small" }, "small"), index.h("smoothly-item", { key: '2d71100ccd666e7e53c40ad9dcb24094d6316ba6', value: "medium" }, "medium"), index.h("smoothly-item", { key: 'b5dc3ca6278d607f91df771c39c67f2b73ee0a86', value: "large" }, "large"), index.h("smoothly-item", { key: '9dfba645effcec688557c2bed05c44698dd0159b', value: "xlarge" }, "xlarge"), index.h("smoothly-input-clear", { key: 'e23d58562e554d6096a44feabaf4365c800c82f3', slot: "end" })), index.h("smoothly-input-range", { key: 'e6076caecd252d6185fc88c8f5dd13b544d115e9', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '47d878d21777308baffba2529d08aa1a7a85954c', slot: "end" }))), index.h("h1", { key: '8f9791fe61a60dcb595332f08387d297caf25d9a' }, "Icons"), index.h("div", { key: 'b85cbd6ffe7d5a3cdacba67227114ffc6ecd641b', 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)),
@@ -9124,7 +9124,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: '0046874130373d440f019048c4605836bab13866', 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: '62543fd9baa1a180154a070946790ce5af1141c0', name: "start" }), index.h("div", { key: '00e17a078ec4fa127467d44d3e32b6eb7c559800', class: "smoothly-input-container" }, index.h("div", { key: '6dda805d5c3f0f064e16c56eb03cc17f28d83bc9', class: "ghost" }, index.h("div", { key: '17bb1306fe1d35949ba6e45512cd3e99c6484ba5', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'f7e84112afdfa56381042b721d39aa0d30ece6d3', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '8356c125ce07feb88d40f7503b7b1da1a0447dbb', 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: event => {
+        return (index.h(index.Host, { key: '872dc829ab3ad7ae0a89d5bb33b6873a8bcfcd63', 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: '30df6acf4cb3acb717a486ac0ad75da1522927a7', name: "start" }), index.h("div", { key: '1250557b67717ca57b08c2b6424a7896f432e11a', class: "smoothly-input-container" }, index.h("div", { key: 'fef92aa30c0c0107f45c6818267dc20221f2cc30', class: "ghost" }, index.h("div", { key: 'bad4d7ea96ba8e4da99271223e127ce5f062330f', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'b17df2280f81d15afc29f5402341e85e50beb5ba', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'c96649c35f2c06dfdf3630b5c497523d0248d9b4', 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: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -9137,7 +9137,7 @@ const SmoothlyInput = class {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), index.h("label", { key: '8d17e6b68b32b37e299ee896697bac07205acc4d', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '07feb99cc38b31c7b1ca9a212799b1d9cfc7f58b' }))), index.h("smoothly-icon", { key: 'fae4b45c6cf93493ddc0cefb4e9d639294f466d5', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'b998ad53b86d558c0b73e5c3f1ad40210d692420', name: "end" })));
+            } }), index.h("label", { key: 'c59ccd5a649873efc5bc0feefc722d5c85068b2d', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '73aa7a5bb5448bf7bd37f5102c8d53ebda0a2b62' }))), index.h("smoothly-icon", { key: '8145ef6bdfcf30cc9402916e0880a425d6dad9d4', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '5313f26d26dc2141b84194f9965ea67b324af575', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9218,7 +9218,7 @@ const SmoothlyInputCheckbox = class {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: '833609164edc11403d0abf37581eae241ade4022', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: '0a1383f71f2da86ca8f5145b673cc363464c2307', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '0b1a207721e0374dd79a0be0bea78c7a5ac9d3e2', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '656867d69e3cf8554df686764a76d8d4ff55dac8' }, index.h("slot", { key: '536b8f6429d82b7ead0746f8f78918844d74942a' }))));
+        return (index.h(index.Host, { key: '45c1c7beef37896ee98099088ddd736986615840', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: '4283cbb2f152ef92e627b277121cda8de1b573ed', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '6384fd5ad97ea238b71fed6cc1ed9f4d84f9dfaa', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '053cd3b9ff5f9c80cac0fb8663d08a38769f31b2' }, index.h("slot", { key: 'efad1d448b746b765ce6e8a6a17c6c2e9a9658f5' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9268,7 +9268,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'cd3f880e2bbbf7e76336ad2ecf759e8534978141', title: this.tooltip }, index.h("smoothly-button", { key: '04f616c6342c64cb53bb8bf2e296b81a4a131b2a', 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: '19abfef9437763a04dda38a4db19972274375b04' }), index.h("smoothly-icon", { key: '69e46b20ee1c15268aec5e710ae52b6d6038c444', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: '1c44261b3920fc4afef44e592c57d4edce43cfa2', title: this.tooltip }, index.h("smoothly-button", { key: '5640b6d34c7d6910a21a8e87f60b365521eb55e1', 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: '9c3fd0bfd5edf45d75f11639f569db85a71e6070' }), index.h("smoothly-icon", { key: '624113149ddac310bc350ea3a6bb73e73216e10c', name: "close", size: "tiny" }))));
     }
 };
 SmoothlyInputClear.style = SmoothlyInputClearStyle0;
@@ -9418,7 +9418,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: '2f1a28996b592d69882975831576e63be86cda4c', style: {
+        return (index.h(index.Host, { key: 'da2e8d3b9d34a34700e56943bf46f97952c82c8f', 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)}`,
@@ -9427,7 +9427,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: '6cfaa6fc460579212c82e23f576b614a8ec939e7', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: '9876c7a6a6f94e6971240e59340b2ddc45fe011e' })), index.h("div", { key: '303fe59863a8eadb230b775393776214891c458c', class: "color-sample" }), index.h("smoothly-icon", { key: '7166e064dfc8e3bee8fbc96e174b978a39313fe6', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '38b7b41c4dde97ede1b72df696555f71acf19c13' }, index.h("slot", { key: '9fb68c9faeae04a02761a0cda7c70d226546fa9c', name: "end" })), this.open && !this.readonly && (index.h("div", { key: '67c5708df458d961f2bbba5970d39a04e6709c13', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '025476f000074e93fc6ce82c314a92bed9a100d7', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
+            } }, index.h("smoothly-input", { key: '0811b9e8b343160a8767b07ddfbc8124cfa9ee6d', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'c20ff101d416406ea67da7d9cb5aa0aa0b3c4f43' })), index.h("div", { key: '554cc3985ec8bb9737c94b65031a34a86f4de6cc', class: "color-sample" }), index.h("smoothly-icon", { key: '27ec92c81e1da06171dc03ee0fc1a4d801c25811', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '9c3069fbd41e47041145877424504858eec0f5c0' }, index.h("slot", { key: '4b5a81761af0eaa45b80ff291c78a1662d62a5c4', name: "end" })), this.open && !this.readonly && (index.h("div", { key: '71642c17b0531a61f0f3032ec189f337094b589b', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: 'a3a1500be0748165ed5ba43fd0671744b6fc801d', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9441,7 +9441,7 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '425472ef4f686d52c44e4d3a929be66d78823b26' }, index.h("h2", { key: '621c263cd20e5e1e31b26e184c9691b7b16ad282' }, "Color"), index.h("smoothly-input-color", { key: '2aece7d05a7fa18b83ca8830096a78bb105c8f85', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: '6c0f77709d1ab40676d2214ec1a0e1545baf1e5b' }, index.h("h2", { key: 'a5840477e827a305d2441f157a67936afe48397f' }, "Color"), index.h("smoothly-input-color", { key: 'b4c59fbfcaacd9c2561264ca5bad49a5c15d2c1f', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
@@ -9534,13 +9534,13 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '9db0c63036aa6f0207fce78ffd6f802b7deeb5ad' }, index.h("smoothly-input", { key: 'a6db19ef7beb77e6a0beee10b274373f3f2a732d', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, errorMessage: this.errorMessage, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'a755134a252d7a353d9a77367c6850ec0e7bb2fa' }, index.h("smoothly-input", { key: 'c84f19abf9b612265662c923924bb9e27e4470dd', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, errorMessage: this.errorMessage, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, index.h("slot", { key: '2e6e4e4151da614f0de08159c5b0e37a3404b120' })), index.h("span", { key: '686e082fc080a78bc2af6eac16f1cf352db9b68b', class: "icons" }, index.h("slot", { key: '037c3e5ecfb313d705aa23317cf9eeb793769f48', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '63a91d7dfd85ea9d3731e47e4b68bbb49bf67db1' }, index.h("smoothly-calendar", { key: 'e121009669154791ed3df7981a540bfa6cb12fc1', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, index.h("slot", { key: '76957a67776b6e114a134ad8e381fccab3b3bcdb' })), index.h("span", { key: '913e4d85afb432d619a8b97b9498aca63fb65524', class: "icons" }, index.h("slot", { key: 'e3241b7fcad13b265db309d1893b235a8ddef397', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '7e930465a1ad3354480a4089bc9a041b3fffcc93' }, index.h("smoothly-calendar", { key: '207d73550c0b0274990b5a6afe6bcf2b96840055', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, index.h("div", { key: 'c42e755a2c39062bd185905db9502c55ab3e30ae', slot: "year-label" }, index.h("slot", { key: '101b37555fb0c8922cc3989455eeff39eeecbc34', name: "year-label" })), index.h("div", { key: 'cd14ec9baed6b289de558f03ac04d63d1fc40115', slot: "month-label" }, index.h("slot", { key: 'd7eee5fdb8a0191e411f1be6fd22c997bddc18ca', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: 'bf152dd3b3de42c90569c7d484748181c5ca4fa3', slot: "year-label" }, index.h("slot", { key: '6a2fc92cbd7f61f12ceb21ce9d2844d713053b0c', name: "year-label" })), index.h("div", { key: '87a13f22c38aa9004483f4d197b7eddafe96941a', slot: "month-label" }, index.h("slot", { key: '11c277001bc28bcb4525d7f3fd120e8b643810b9', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9646,12 +9646,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: '9264a1feea92e3151f9eb3a7ed4a33ba8d70d2b0', tabindex: 0 }, index.h("section", { key: '683a4226bec41fe455f53000a52b2de7e3299030', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: 'c6b5c3d154cd6ebc651b4fa187b2808bd5f9dae2', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (index.h(index.Host, { key: '0a06894b9e72b93df447ff82ad27d2a6779f8031', tabindex: 0 }, index.h("section", { key: '2d13b0592a766e768cf858150513475fd4522b59', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: 'be576244d7b348ae617ccc719ffcd81418ff0b75', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
                 ? `${format(this.start, "date", locale)} — ${format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, index.h("slot", { key: '9e32996babca0c1ad197d91a1d7db1e9e0dd553b' }))), index.h("span", { key: 'a1bffd73159766ed93c979e8d434802b095716f3', class: "icons" }, index.h("slot", { key: '2257c8ebd21da97cc917b66c0fc2799c66402f20', name: "end" })), this.open && (index.h("nav", { key: '112d3614de43a24f357b3846b207cdd7851d1452' }, index.h("smoothly-calendar", { key: '0b8d5227c5f066d32c9b0ba83bcce0201564bbd9', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: '80adf2bd502c516457c9870c05fc4bc2b6275c3b' }))), index.h("span", { key: '5c95250e283bc5bada2daa574d21112e43a37492', class: "icons" }, index.h("slot", { key: '0389d3bd80370d6fae95fe7f32bb9f8a19a6ba06', name: "end" })), this.open && (index.h("nav", { key: '62bc92246212b47307de1180c9c1267825693d86' }, index.h("smoothly-calendar", { key: '735dd9ca6c84394d666fd71d2d831007e50a0574', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9786,22 +9786,22 @@ const SmoothlyInputDateTime = class {
         this.changed = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'f685671f7623581876d377217bc42b9486e4a179' }, index.h("smoothly-input", { key: 'a31204db327a688869ee1c5275db78b871afa268', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '1f7d50b47ec60aeb9bf5527be3e993dd988e8873' }, index.h("smoothly-input", { key: 'a7539f5cbb2f0845e7ad900b0402572388f19e8b', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.date = e.detail.date;
-            } }, index.h("slot", { key: '1a08c1994f7d59f58349d7896de61f1e58be148f' })), index.h("smoothly-input", { key: '5714b1a043d1fbaef8d9ffe74d31789b46c603e1', name: "hour", type: "integer", max: 23, value: this.hour, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+            } }, index.h("slot", { key: 'be6a15ab70967423d3d307d52a02373842cdc12a' })), index.h("smoothly-input", { key: '1706bd3e02d205c8cfed03abeb9f5ae900f1c6ff', name: "hour", type: "integer", max: 23, value: this.hour, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
-            } }), index.h("span", { key: '22de8e550b339963d907a6acb7352abf1bcb4672', class: "colon" }, ":"), index.h("smoothly-input", { key: 'f990c4c4fe93b57a1dd8b1959ef5a5cd734322f8', name: "minute", type: "integer", max: 59, value: this.minute, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+            } }), index.h("span", { key: 'ae7ab41ec2918f480e0b4347346f2975aa23d0d1', class: "colon" }, ":"), index.h("smoothly-input", { key: '3e5d9221987f2cdb7c47c01abe4e2453655bbd3f', name: "minute", type: "integer", max: 59, value: this.minute, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
-            } }), index.h("span", { key: '03f9d327ff1f3e8e85f130174de8cf6bb973b68a', class: "icons" }, index.h("smoothly-icon", { key: '8ab24a69f37c9f91e7eae091b5e1e0a234f5603e', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'aa179179ebb4e651983ef043f7c3681874c3fec2', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '79d2319fdeb0324acbac5b3372104a46433366b7' }, index.h("smoothly-calendar", { key: 'c3e4d0a7f52b6d9a1d5226fd5d8156ccbb61148e', doubleInput: false, value: this.value, min: this.min ? TimeZone.DateTime.getDate(this.min) : undefined, max: this.max ? TimeZone.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: e => {
+            } }), index.h("span", { key: 'fe9259b03b623b96e3ba20c342b94e3f43e9f68c', class: "icons" }, index.h("smoothly-icon", { key: '81f9e8da653d36eb8e450294dc2dc4264fb76122', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'e70b4a872aa43692c8f1a5e8f7d8a6bf7dc0aa28', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '312657e918b72f06eb76187e064fdf7113960499' }, index.h("smoothly-calendar", { key: 'bc461b9606b3f0a05a788b7ae72ac5d96231ab9b', doubleInput: false, value: this.value, min: this.min ? TimeZone.DateTime.getDate(this.min) : undefined, max: this.max ? TimeZone.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: e => {
                 this.date = e.detail;
                 e.stopPropagation();
             }, onSmoothlyDateSet: e => {
                 this.open = false;
                 e.stopPropagation();
-            } }, index.h("div", { key: 'f8b4da09f4e35f8e15a1947ce2925d20a2bffca5', slot: "year-label" }, index.h("slot", { key: 'e2eb5db558c1d6065a4eb335e0b28b14643e75d9', name: "year-label" })), index.h("div", { key: '9b03608816d7c7c1f16314f694d540587b142e92', slot: "month-label" }, index.h("slot", { key: 'c7c67e09c8a4cd5171bc6d3cea431ac6d41e06de', name: "month-label" })))))));
+            } }, index.h("div", { key: 'bd29e39875d5afe6acaaca8351156ed2c9784b50', slot: "year-label" }, index.h("slot", { key: '47b5e7d5621164f66ee939cda905e2d8cc8595ba', name: "year-label" })), index.h("div", { key: 'f65988215e183bfae36378932401dfb656e1acba', slot: "month-label" }, index.h("slot", { key: 'f9bfa7c085e9de6c255b5782595d41f3242e8e90', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9823,14 +9823,14 @@ const SmoothlyInputDemo = class {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (index.h(index.Host, { key: '6b76ad9238bac8081314e4837ebd98307de38dad' }, index.h("smoothly-input-demo-standard", { key: 'f01eea6d5242a634b41ad706f4e071e5d18ab0d0' }), index.h("div", { key: '19c7dfa3c020b0367552a7254eabe5914895df3d', class: "inputs" }, index.h("h2", { key: 'bc28b9077ccf104566263415792fcc17adaabf48' }, "Calendar"), index.h("smoothly-input-date", { key: '927f509aeea74a8c71192de2da1e9a94cac8ba25', name: "some-date" }, "Calendar"), index.h("smoothly-input-date-time", { key: '51dfd1f872fc354689d6b50cb09b50af29397d92', name: "someDateTime" }, "DateTime"), index.h("h2", { key: 'd6c4206b9cd37968ddb31a729421426b8155a684' }, "Date Range"), index.h("smoothly-input-date-range", { key: '0a0b797d687900af6153056f1aa2e6b036977e8f', 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: '692a39e6f84cb8fef83b6f5e45669d39212f40ee', 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: '31c69e1203027ef28a57ff0f9444aa6ea008d596', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: 'c0f0c89f1651ec73d40bc4b90b3ad420c11b175d', 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: 'f391bd78c0251dabd6f1ff36b039dbb88dd6f36b' }, index.h("smoothly-input-demo-standard", { key: '6ec0721055230720b20f5e7d4ead62c430a57caa' }), index.h("div", { key: '5fc44c0c8fdadf263692766ce0ecdbe8e8facd6b', class: "inputs" }, index.h("h2", { key: '5c0b67d96c5c5e9ec56cf4cd7135cb844c3034e0' }, "Calendar"), index.h("smoothly-input-date", { key: '7110f32cb9d5c3451595a70b08232848c9d4b465', name: "some-date" }, "Calendar"), index.h("smoothly-input-date-time", { key: '840b983439402d95ddc6ed9ea03d1edc82d1bbbf', name: "someDateTime" }, "DateTime"), index.h("h2", { key: 'd5db1f5c8ae18f67bc0cdb61273043f647675a89' }, "Date Range"), index.h("smoothly-input-date-range", { key: '2b6a94b1f56c5eec888ec19ac95af52255caf1b4', 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: '8e86b0a98a3abd79fdf625aed83dfb278fb3470b', 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: 'ac33be124dcf125eeae6f56c8fcf77dee2e9e09b', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: 'ddff97927d04e2ccec654cbe9687889e2ac915e6', 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: '71919ae4a599a69a4d22b64a0df7cf14fbb90fb1', slot: "end", size: "icon" })), index.h("h2", { key: '876ef70c63a70873047b2248ea9f6d4213f81f19' }, "Date"), index.h("smoothly-input-date", { key: '1f8ca07a67bafed4f51eae08e17d0b4d7bc8db42' }, "Date"), index.h("smoothly-input-date", { key: '49455625eb71c6f7d6d1b690aedcd42a3d79a67b', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '136f7e38566b2542b9961124eb688da89a229d0f', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '74300b814beda57a74c4b22375b4c2c77fc3ef85', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: 'a95b8bd4c1de2703992ce072047013e9a30f458d', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '279e6b6abcc5cb81e59338dcc27508f1f3d9ba11', slot: "end", size: "icon" })), index.h("h2", { key: '0f0d51fe5f32942c087c9e7a8773c7654d205a58' }, "Select"), index.h("div", { key: '0b8402098b70e7faa9d2e4764c5925b7a828d0a0', class: "select-div" }, index.h("smoothly-input-select", { key: '961ac8725d3405ba3f3765cfe5a0878d6fe7a071', name: "select-dessert", looks: "border" }, index.h("label", { key: '7bf194639e6ee9ff96b62a15ed9e00f88621b3b7', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: 'b1bc6e49f1cc78d8e289f89c8604f40edfda62aa', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '29b0128fdaf49a260d619b830736f6d35614114b', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '91d62568b8f072b4d00f58315b0553fb6edafbe7', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '0b058b8d63dd1e13551274ec665ccb686ef6be07', value: "4" }, "Cookie"), index.h("smoothly-item", { key: '72d8ab4c88bd951e9b49bb149074231b71052b85', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '8edd5911789eb1263b327f61c620dfbe609e6b24', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: 'f220a43c7476375dfbfbefa7cdb167fac3ef0b41', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '22ce7d332e32a112d9fe82927687c2f4ebe2e536', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: 'e5e50901992e8f08a703cafb997a9684507cfd78', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '4fa5eb62bacee098d016122c0a669db50dc82f26', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '8298d237826158bb5b21dd34c2844b745175e804', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '5d5a5dd8ca97227d2ffe3cfcf6ad2e538a4d41f6', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '9b9f7784c4ed671d64a958b4723344f600ac50f0', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: 'd12a6181d71bb6525009cee933871861c076335e', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: 'f41010be4b6b0f872b7322992720ce208a56d32b', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '2a39d303bafa529d36a86326e419e2df9c1d9f8e', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '11814867e9393040169f40ba26cdb139b175e3ca', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '971b0682de76f47bafbab665a577f7b908f2c1ae', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '10f6203ce57f262f73e22a76cd8da6c051912b40', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '7cf1347aaf5443c4a131e8524a0a2d2e56a2a449', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '4aa469f9a2181273191b157a83c731acf8d8d0e2', value: "folder", selected: true }, index.h("smoothly-icon", { key: '0b842c2b5fbce95c5e10ea142479c2cab4c30a59', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'eaf8e46883d3fc6c8f2e6d10de8505c4431d386f', value: "camera" }, index.h("smoothly-icon", { key: 'c7d8a64c45ecc10fac807228eda7ea3d0e04bf1a', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: '5885ee3fba0c90739172588b81a3986d0b0ffa22', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'b7bc9954f3626c31107ab0396f93ce144c77076d', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, index.h("smoothly-input-clear", { key: 'f5f998abd40b9403ccebafe27ba14493fa8f19ca', slot: "end", size: "icon" })), index.h("h2", { key: '7d173c425b81aa7deb4cd89edb3c89a2ff528a3b' }, "Date"), index.h("smoothly-input-date", { key: '0b811e8dd45367c464a7f6edb1b4a33b627adeba' }, "Date"), index.h("smoothly-input-date", { key: 'bf8581823bc434be491ebc5fafdba71061a14101', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '88e7ffea5182215229db30af9afe6f4e7ce57146', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '172b1c34e6cd4b67f78625b75ff471c303fb12d4', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '30968f8dcc79a0321afca68cf79e2ea31b8735fc', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '0bbdf2875ce1621de5ed65128569f2e20846f85a', slot: "end", size: "icon" })), index.h("h2", { key: 'a9eb917e3d429438514b7ad091b5cd84fd872889' }, "Select"), index.h("div", { key: 'ff41a3d04e75f1d6509c6c986dc88e4becad3721', class: "select-div" }, index.h("smoothly-input-select", { key: 'e2dd73ead13a60e47494d3cd025c34a805f5e4ee', name: "select-dessert", looks: "border" }, index.h("label", { key: '75e7c9ff86ce84ac3eda4bb40af16d6e9b16e434', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '577f76315b49efcef1f260362b93ff6112004b47', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: 'ed71f3d6e83f8fa10811c952bb1ab5f7b9baa97b', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: 'e4885a3b9170974878d5c9882d0239fe944c11f2', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '8bcc76448c631fbf793f91947af4c0e17c60a858', value: "4" }, "Cookie"), index.h("smoothly-item", { key: 'a72d1e10c4b69da2584f2e15d4215c08c5f92fdb', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '6f5653a3a0e7caa778b40eccbc4069f324fd25cb', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: 'ddc17cfc7f7c3146518ad4827f8d674b165db328', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '0404ede6b67ed2840409c725d0d2863f0d306c30', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '16b514b69567d48eb36e14812c700e8658e95ea0', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '6e2dbeee5a47c7f8c2e1a1c6c4d079ff31f200e4', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '915a599dcbe877f1513ead46fda81150c7781a03', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '2664f2bcd62e4f27fb49f46652fa9e69516c8e57', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: 'd1cf93f393ecff22c4ac6fcc007ab6c09a534b8e', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '0b7dd82efb700709a66ced995a3dc4d18be30ff6', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '9866a5e80c446f5b4ca2c2ff8f711ab039912b87', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '775756976b9654150ee7670be56f7b44bacc09a2', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '2543c280d67278c8215a0f1c40060d1a650551c9', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '99670894167dd333c93ddeb166ce6d6677bfa7db', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '8523895743bb77d41829b97a82b34b1b8c13de85', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '2b77ced15c1efccc0c963ea0190a108aaf7ff254', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'ec88105457f95ec7582b95a0cd6174a96fa4691f', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'a8420b94eedd11f7a27bb589ea15e0fe8ad28eed', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'a0a2524ccf06e777498a0612bfc755fbdb3c26da', value: "camera" }, index.h("smoothly-icon", { key: 'd6a08b892a58f56187b5921cff2b55646a2fd1fb', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'fba2c8857f72aa30927a76faa5005a8f629f7432', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'c469cb86e393ca8567e4f306074f6b1822da1f4c', 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: 'c4aa7cffaaf167f14aa0c64d892884cbde68e5be', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '545276bfb714dfd58c6154782ee8ae211b95cec6', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '7e65f5dc15cae37de91517e7faf6ac6e5399bce9', value: "1" }, "January"), index.h("smoothly-item", { key: 'c30435464dc59d081fcc3027a0559cc2ed651263', value: "2" }, "February"), index.h("smoothly-item", { key: '2369d8e036dd55c75e7c38650a2cd84477302b26', value: "3" }, "March"), index.h("smoothly-item", { key: '70deb72243f26d8e44aefd45ad8934616162bbcb', value: "4" }, "April"), index.h("smoothly-item", { key: '3746936d4ff064b7c4c102e1b12ab0fc9e032063', value: "5" }, "May"), index.h("smoothly-item", { key: '7070e74bd89c6f8257617c69e9f86898b7276b6d', value: "6" }, "June"), index.h("smoothly-item", { key: '6e7ce9026ab57b2504ba7cb66c6581a29cd3c719', value: "7" }, "July"), index.h("smoothly-item", { key: 'bd26f3aed9824a9badfe1c76e284d231bdcef74d', value: "8" }, "August"), index.h("smoothly-item", { key: 'fb68e06412265f8abd9d48b5e632b9703c4ac928', value: "9" }, "September"), index.h("smoothly-item", { key: '8d665cb2ff2f3485fe78aba07b8f9de7a911251e', value: "10" }, "October"), index.h("smoothly-item", { key: '2daee790fe6fb3b1ba06189a8a5b70af75f78a6a', value: "11" }, "November"), index.h("smoothly-item", { key: '51c4c70fd8256d5aa2a609c3560f5a596d545e8f', value: "12" }, "December"))), index.h("h2", { key: 'fb225955c7e4944055c2f5dbabce570a1a471aae' }, "Duration"), index.h("smoothly-input", { key: 'f44446650cd88ad8d99ded00c6bc6ab5449cbd92', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index.h("smoothly-input", { key: '11f884760d1597ea12a14a6cafa9038a6588f725', 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: 'e3bf61ef393d38a27d457c34dd0c6e1725581cd7', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '6f378b22b5f5e65b7a806ae68675131d6e024d00', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '7d1f5110fe52b497edd86a5e4397914cd1636eb3', value: "1" }, "January"), index.h("smoothly-item", { key: 'a5217ec2aa7daf0992a53392724d3de162f1b7c3', value: "2" }, "February"), index.h("smoothly-item", { key: 'e97d698810ba4cc74fbf9235fb1f3c8fd2c3c3d4', value: "3" }, "March"), index.h("smoothly-item", { key: 'b379faa9da4b684ba555c949c6b6ddccc4c116b8', value: "4" }, "April"), index.h("smoothly-item", { key: '97de95e971a0c07e462aea3e935536a59df7e89a', value: "5" }, "May"), index.h("smoothly-item", { key: '684e39a859bfd80078bee12230cbaebdc2ed6fb9', value: "6" }, "June"), index.h("smoothly-item", { key: '84ceedba22aaed9a7c9dc866131deb3da7cb637f', value: "7" }, "July"), index.h("smoothly-item", { key: '1c310541498a90e74471932e7d5236466c9b61a5', value: "8" }, "August"), index.h("smoothly-item", { key: '5779cad53606a81b4b8741748f7dff06f4c1d53b', value: "9" }, "September"), index.h("smoothly-item", { key: '4f77e5f150de94e40fa44ad9a18c62e946583b1e', value: "10" }, "October"), index.h("smoothly-item", { key: '0721ac6d8ad7b08bbf3f37e6000ae21d39cff10a', value: "11" }, "November"), index.h("smoothly-item", { key: '786168eff22dd2df98369268f734f3382e5f0144', value: "12" }, "December"))), index.h("h2", { key: 'a0fb40b3246b9810fc8c628947e34e8e7861edc8' }, "Duration"), index.h("smoothly-input", { key: '6e8dc2d9bb81905f9b361e3d86fc5bde907d9a08', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index.h("smoothly-input", { key: '9e7b6a937a25da6e1b54e3936a349899a82f444d', 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: '4c7492e9714e8fb6ed7cf3d9ed4ea96adb985130' }, "Integer with Min/Max"), index.h("smoothly-input", { key: 'b20b1b15b55f7b70f6242516efe1582b209a26d4', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index.h("smoothly-input", { key: 'c906c1f3899f68a55f8be01c02eec8a1555475a0', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index.h("smoothly-input", { key: '86ee548b052dde32fcfdc56bf3fc87b3523a4af8', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index.h("smoothly-input", { key: '66e657e487efa82de5f1fc0263b43019bdac2cbd', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index.h("h2", { key: 'cda6e85e77f12cfd3ef7726b6441044708f8fdf6' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: 'c46bdd16248a0abd4719c60b2214e3d0a76be91f', 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: '8b9ac9caaee89b0f0311b3b07cff22a642dd0e91' }, "Identifiers"), index.h("smoothly-input", { key: 'a86d2727f6403d4f0abf68523b64cf87d41e920e', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '0c1074b72c4f43c4154384d40b3d57544a368b5c', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '8daee7413012f41575269d5d1544bd55163a6224', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '853d8e4ca927c3fb4795a8c22a074ac70e3221cb', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '47d002602d7b06b9200425dea97832e2f2af166e', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '90d5bc2db3b3a24e7811f235150be80dda8b99e1' }, "Input Alternatives"), index.h("smoothly-input", { key: '45f7215c2e1a24efe1e9d57a17cabc61baeb0111', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '52329d58edb2c7339ca9cfe141caeb0fc293d0bb', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '38bab99ffee2515d50a6ffe8ccd4e84e3dc9f886', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'e9f274e1ef1f3c3b8bfe745ca96d5869b3dab037', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '6fd7aa7c4d8efc4c4c4df1b59795242841591688', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '89710a2b183a786dc6a3d4b8d74f16e112ff8f5e', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '2a89776d8fb9d51d67349f98dcf8664bcc998a57', placeholder: "test" }), index.h("smoothly-input-submit", { key: '5556f4dfce7aa8ccaa7c2c31854bdc1834309b34', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: 'fbecb4027ca619c48dbaf4959a7a37e67727af67' }, "Smoothly checkboxes"), index.h("div", { key: '32412e16e082f5a1ccd1baa209058d7cdd9a4e91', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '9abd96ea1d8a91bbb24e9ce02e72a7266df75799', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '1223e51c9b85cff662d82d510094dee740c2ee77', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '31bf44e0df0221c42adf3fe58463cff04e8cc4bc', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: 'f11474c5b4f4ac1267aa3497bf234d4cdc50f130', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '9d54145cfe1114a9cabc02ed57535da3e11f375b', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: 'b638676c431660d910eed5792faa0cfc87500412', name: "third-checkbox" }, "3rd")), index.h("h4", { key: '22a945c153157b3896913bac81f8c4314b8451d6' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '35ed33aa765ba3fb0817e039fcf90fcebf3cd6c2', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: 'be8659761a6623b0e7fa12a0d0fa535edaaedcc2', name: "checkmark-circle", slot: "start" }), index.h("label", { key: 'a0e5f61e0a27a4f4dca21298671aec752a1d407c', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'd1a85abe8267d8970d5ef498abe8dcf5f76d6a84', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'af7eca3580a8dfbc8fbd918a0bef5d3ca5c9ce80', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'a0b23474026cb3bf08b5b8cdc709db8e3a3afcb6', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '8f6f0c21cfdf282fb6768239ae410197bbfd3a14', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'b0838be43e328f4cb185f61ac8b51ef94db28a1b', name: "radioSecondInput" }, index.h("label", { key: 'f8d216209a405c137fc5b806feb041806844eace', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '6930abf2cfe2911c03446c3ab08e7be7a3a87728', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '54ce3c3bff3fd64d0aa19ca134fb375bf9f34ddc', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'fc864e57e7cab32ca10c26416f60cdce45c2fac5', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '130e9a9d0c0357cdcbcd0074ecb74ccaa9306c01', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'e7016eea8f86a0639de1b062ad4a7d81750ee6cd', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '8a52b7c1c44cffb63cd877eda812806caae059a8', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: 'd0b867c8b63f616ae7a1eacba91d08df641f0db2' }), index.h("smoothly-input-color-demo", { key: 'c3dc25177603e7c31df0a00c1a624e87532233e0' }), index.h("smoothly-input-price-demo", { key: '0ca0b6ae79ecf4db86c5597e8f0ac84e0f57094a' }), index.h("smoothly-back-to-top", { key: 'ea8d2cc631f98ec5f49d56f7ad4fe3596578090b' }))));
+            } }, "Duration"), index.h("h2", { key: '31b7b747b3aaaf845ad1aed49ab45ba9523a2fc3' }, "Integer with Min/Max"), index.h("smoothly-input", { key: 'c81811ff2d335ea60df070a960524ff16ede8489', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index.h("smoothly-input", { key: '86aeb498c9731e91de63412a11a79f29292adcd0', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index.h("smoothly-input", { key: '4802f8b96a9aab4828c3327de3eb2b531edcddfd', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index.h("smoothly-input", { key: '3737eab0df9fd0706175be8a971593ab3bb9343d', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index.h("h2", { key: '6b2f5d91faf5bf0d3bc074e859d88445a80b5667' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '95410c2f81a47ca003616bd40d89f7885b634f37', 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: 'ad449776079245f9531bd8ce3f51efe3411e5e7e' }, "Identifiers"), index.h("smoothly-input", { key: 'b3325535a6ac61fd0476d6a075693c7e2fca5ef6', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '28e66d1f923f9807252c3cc72fe4a788240aba1d', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '491387109239d78a481aa0a4c9058a2cdb2a4c65', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '35fce4f6c948209470cd2ad28f8d9621ee6b5321', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'dd534f14f8e8943f7ddef74992dd46c318347ae8', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '38685f41f8810a5795834ca27905b2f2afc27eac' }, "Input Alternatives"), index.h("smoothly-input", { key: '59043422556d04cc56c186714e91dc64f0816ed7', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '213e727678e743ec88cdd54a979ce8935c541340', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '51f32ad9c0b4c9b7a8204bc63c441f8fa167b611', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '46aa75ade3df2db1b151e01096a197f2e2fd8af9', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'b1293dfab17cf01887cbf5841db05e04dd3a1464', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'b284306b4866a605add8c5ef598dc40f1282ec43', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '24ec4d180f050b371e9af2f002b7116a99b88cf4', placeholder: "test" }), index.h("smoothly-input-submit", { key: 'd55d4fff97828924002492d9016bd73eef46eba7', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: 'f45625069ac93259c0631c1137df1f0275ac0a57' }, "Smoothly checkboxes"), index.h("div", { key: '0b987f4c368c8d50dbb6f49055ba0cff33835427', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '315c00eb4677344a3877d819a6a90882a97da7b9', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '24b845e4451277aac8e6c945aaa7536e481b523e', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: 'c7e4398c49e7299b6b235b5ff5572d7f59998c5c', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '3c59195cd3e5de2a5ca0db1ef7e67fdac4b20773', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: 'b353f63610a38744c63f5a98827a8be376f24689', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '594f7ec3d3f3be405aaf885621eb718e3fbf0a35', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'cf0b6447f28184077a82ebd6fa338531484442fb' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '2dd5ceb1a1ff1b080616ec88e9480c53750ded4c', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '79cf63ff3aac8acaa1511e77fe27d993270913c3', name: "checkmark-circle", slot: "start" }), index.h("label", { key: 'b794b9b61a60fd655a906db0ff400785d8dfb970', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '7344467bc0580b1efd378925eb4af010967a0276', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'bd8afddd7a86f9853f3c01b1121c9164140a8418', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'eac077c9f5c7c480b00806bc59dd7bc0e5747399', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'e87f205103c7dd86c240a63d6f944c5c8775f693', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'f4fa9eda695df9d7dcc4d3f68fe060a781cc20d6', name: "radioSecondInput" }, index.h("label", { key: 'd0a413214b688e493d73951747eba6bba204d85e', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'ddb690ff8501c50743bc0d0e11e1c26ce5c5bb23', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'bb5db85ec9f091bb62dd89c3ad0c8f749b85db8f', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '0a16abf56b4f3f77407d64fe2969b512b8444582', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: 'e67deaa29b84a99dff1332357144fc7e9055400f', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '96e014e32102387364e1bfd5bf2288c3b1c028db', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '73cc1861839ecfe97fa494dd5544780a794abb5b', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '70d2d8f0df0397e64de5a5406431a26819438d21' }), index.h("smoothly-input-color-demo", { key: '2f34171560df93381803026b34d678474403bb7a' }), index.h("smoothly-input-price-demo", { key: '10fa39ce18a471a2ca132cc95a68ece4d04f78b9' }), index.h("smoothly-back-to-top", { key: '646557d1c7a1ab4d661562591f77c4107527af08' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -9859,7 +9859,7 @@ const SmoothlyInputDemoStandard = class {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (index.h(index.Host, { key: '14f3997d5443f2e76fd46941eba1d63d3154b97c', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'd546f2bcbdf79cf259c0643f2d1c7b752a32d855', class: "description" }, index.h("h2", { key: '5eba4de9ad8e9d25a74b9c37e74dd96d8945f754' }, "Input Standard"), index.h("p", { key: '711ee8f5c5fb7ad1d59bdcb254d16b7adf778766' }, "Height of input should be ", index.h("code", { key: '3685a00cb89ee68f0086edbb9017ae8aa9cead62' }, "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: '27dfad971615ab7bc9ffd0f44be0165e67dd62d9', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: 'aef29635c1ec10565093e49a5acbabb93cc33efe', name: "looks" }, index.h("span", { key: 'c6489fe16be3e9e6790eec65fa6dd05f1dcf4093', slot: "label" }, "Looks"), Looks.values.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '47648eb64993a231fcd229b60dc7d96d91868c4f', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: '382c46535ac9a515cac68c02ffb875d25db36d6a', name: "color" }, index.h("span", { key: '5b81d2cbbf12c6b7a0edb935cccc1e168c3f288e', 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: '52f8eefbd4340e6a29a56c8f0cd0b74e20a100f6', slot: "end" })), index.h("smoothly-input-checkbox", { key: '6a9cefbb724d4505f6071177d5cac39e6bc9132d', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '19ee4c2294b35122fb8cfc635afd521d14a52f86', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input-checkbox", { key: '7f7eb514020c2a3fbcb4aa2ebd26d54db17f1e2b', name: "placeholder" }, "Placeholder"), index.h("smoothly-input-checkbox", { key: '1b46418e59527440485f41d08ec7fbd1d7eb98e0', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: 'ab089629619a331cf101cf1b0fd8d99591625162', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-range", { key: '8049224f96f3f89c0524c1add0c84fbf39f1b7cc', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), index.h("div", { key: 'cad9cb051bf5c2d831c1144861f0d321dabc89c8', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '531cf00988eb45c201f98bf0068cde80271f4d76', class: "width" }, "100%"), index.h("div", { key: '9ffb19f9a5cbe3cf2a1abedba6bdeb4e436ede27', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '0aa816550e207f2486b36938e09b300a07d514eb', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'a17dba081f48d638910ab56877c94d3a29dd1a03' }, "Text"), index.h("smoothly-input-clear", { key: 'fb8c295bd08bcabd77d6892a255d3e62fe90da22', slot: "end" })), index.h("div", { key: 'd138de3fe84ad220c32913e5f3088ba4789b32dd', class: "height" }), index.h("smoothly-input-select", { key: '1cb41795811d6dae4f918d60352e4a3069e1e0bf', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '954f7ab810fafd0e97ba9aae2a8d6cced6287e14', slot: "label" }, "Select"), index.h("smoothly-item", { key: '3ca96142851f51cb9534225b8e666949d2c21b26', value: "1" }, "January"), index.h("smoothly-item", { key: '347345a2874ba4d69a12fc6f0ec63e153c45abad', value: "2" }, "February"), index.h("smoothly-item", { key: '47ae3f0baa1c43fd3822b0211e39028e5a2bd913', value: "3" }, "March"), index.h("smoothly-item", { key: 'ba9e6f827429953aac90063eaecaa62bc4c827b8', value: "4" }, "April"), index.h("smoothly-item", { key: '19c5129b5d01e402dd1590442b38c4e391955787', value: "5" }, "May"), index.h("smoothly-item", { key: 'c098e0163dd1072cceb3cda351e58b8174f29550', value: "6" }, "June"), index.h("smoothly-item", { key: 'c024c4f46a4842a4166fae8e94982935a94f1c52', value: "7" }, "July"), index.h("smoothly-item", { key: '4ea99fc760fa7ca2e2a198072f8f97afcee27611', value: "8" }, "August"), index.h("smoothly-item", { key: 'e1d0fed7a17667950ad1412864b8ac451ed1bce7', value: "9" }, "September"), index.h("smoothly-item", { key: 'ed048d75a54a0857e1f837e3bdf64135e9cac385', value: "10" }, "October"), index.h("smoothly-item", { key: '61adb3f944994a3a7de21bbc86af2c597db13afb', value: "11" }, "November"), index.h("smoothly-item", { key: '50d1ee703328a10c7a24914b4018a880251ca8e1', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '6d043e427de3b06c96688a5ed9ec81980cc683ad', slot: "end" })), index.h("div", { key: '9c72f92e10878960773f7e35e941125c18602165', class: "height" }), index.h("smoothly-input-checkbox", { key: '170fa03ac2b2b687e2adbd3e76c742aee945db49', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '6032900febc8c4f19eec5de4c836ad789af6c51f', class: "height" }), index.h("smoothly-input-radio", { key: '8371012b68b5b5ec8142e458ad263a8bbe5c1974', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: '3d745c001e8eb4a7e7c111d5633ebe67aa959b1e', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '241b15c2fc477fbf223ce4278fc920f78af4404a', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'c1a9b31d82df396edee4b138c91b3cb7554c3dce', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '5ce18fbd44df0a140689fb319a218fcbb4345112', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '1543c4db8d51d2ac474e7fc64ac08148fe686c6f', slot: "end" })), index.h("div", { key: '9164f57828a874e7ac265525add448b9cef6499f', class: "height" }), index.h("smoothly-input-file", { key: '998832500189a8048b61c0d088ebf6091936de83', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'f7042552073f536c32221a76a0c15c6456d9a651', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '0f6aafb859e647da06d3780ff368799dba535d26', slot: "end" })), index.h("div", { key: '148c9d320a09e57a70d5c3f055a8b8968e37fa98', class: "height" }), index.h("smoothly-input-range", { key: '7dfb09485f2e8cd990bb99cce68e9330f5588cad', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: '55688ff7c249e1448e7c0982ad3600324b8154de', slot: "end" })), index.h("div", { key: '17118e5f9818d7394bd1d48c8cdecb56027896a3', class: "height" }), index.h("smoothly-input-color", { key: '74d74bc522829d74ef66d7bcdae1d036d52fdea6', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '739954a57951a1a8a5a43d86dc18ec36ef01122d' }, "Color"), index.h("smoothly-input-clear", { key: 'c1945bc7985ca512c4676e41ded665b30153e51d', slot: "end" })), index.h("div", { key: '95dac85925a2456d07c959331a16ccc35856f740', class: "height" }), index.h("smoothly-input-date", { key: 'c1ce4940545188b1666a2714c3f2ceffc0bda60a', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'c2bae1b862f1d02201d03b6a5ab2acdb1d1cb045' }, "Date"), index.h("smoothly-input-clear", { key: '7f03d5653485e61c14f0fddcf2fab6d2c6d47499', slot: "end" })), index.h("div", { key: 'abea3ee074a0bd8a936f8893ecabed881a820e15', class: "height" }), index.h("smoothly-input-date-time", { key: '4027287369d494864485f48074171903d67a8f6e', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, errorMessage: this.options.errorMessage, color: this.options.color, showLabel: this.options.showLabel }, "DateTime", index.h("smoothly-input-clear", { key: '12c698ba807f45233aea2ff29e527cee700f452e', slot: "end" })), index.h("div", { key: 'dd08b676e93e76c9105022784d3cbefdfae667c6', class: "height" }), index.h("smoothly-input-date-range", { key: '927589ec6d706d73b1553da6d6cf03191c688b3c', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'e679284c2b91b9b231071bc6444b73dee31e2bc5' }, "Date Range"), index.h("smoothly-input-clear", { key: '33d186198e131bfba24b0b1dece79ee3fe36878c', slot: "end" })), index.h("div", { key: '14c03e80bada19f0635da1a85b7f2cbfadd989ec', class: "height" }), index.h("div", { key: '3a4fd556ccccfbf566a8c27eb3c74760dffa6893', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (index.h(index.Host, { key: '951d8e936755153c60dfb5e9c4fa714f6c2cfcbb', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'af5cd56f01a657adc81a7c1952fc0fa99c983cca', class: "description" }, index.h("h2", { key: '000ead60500d3ecb23f0925490c470bfa12b1b17' }, "Input Standard"), index.h("p", { key: 'e8e0ac8ac447a507a8ff84a82910ccfb28eb108b' }, "Height of input should be ", index.h("code", { key: '3442836222d91b57b578154201b379c01984a44b' }, "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: 'b6c4e839e5a281c96c774a54e2b23907fedab94a', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '052325bf03d817a341eea65d6b5f8937faa9f5a9', name: "looks" }, index.h("span", { key: '4e9ef448481c3ee611c93a27de4cb8faa6bbdb8b', slot: "label" }, "Looks"), Looks.values.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: 'c7aef46d0c10a1f270d6f4989ff5f28dc54eaa46', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: '8c66e722864389166198e6dc2ed088054a7b52ae', name: "color" }, index.h("span", { key: 'c099222e90e71c652685f2e6b7ec3be644fe1128', 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: '9be13aef6903d2d1278b65c7ef42d44037ba3db2', slot: "end" })), index.h("smoothly-input-checkbox", { key: 'a6c41ffa70909296a000349ae4b69aac2b68cacb', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: 'd2220c0c8f405eb2b9f53be947ca125587b4d0eb', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input-checkbox", { key: '155e50f789e3d357ec1dfcecace74599a7807f64', name: "placeholder" }, "Placeholder"), index.h("smoothly-input-checkbox", { key: '36aad13274e6ef7cdb86c87d2085932653381f37', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: '130deb857bd5d3e73d875f34b8ee0d50e1f16039', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-range", { key: 'abac1a46412e0c3ee5f79a43b183ef90d3e435b0', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), index.h("div", { key: 'b286d517da6cd031b9c7590e792e75a417440d4f', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '0e7c535d8aca6532806ae5f7fea57a22b5d32f1c', class: "width" }, "100%"), index.h("div", { key: 'a2a835349a7f2dd5cf2fc407ffb6ba43e5ff9bb5', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '2f266438ea51914cfcce08f22139c752e721498e', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '96e2acaa65f5ac445dae13fce8b1ab6f0cb64091' }, "Text"), index.h("smoothly-input-clear", { key: 'bac98746bafdee5e2af488b9dd1c881a2fd41abb', slot: "end" })), index.h("div", { key: '3b7dbf2d82b62247f85cac4f9c1b1a7c4f7e3101', class: "height" }), index.h("smoothly-input-select", { key: 'b837f6e96996b1a9f1a2d3fa4e188050abd69ba6', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '489c682c94902d5bf104a32462239429be1208c0', slot: "label" }, "Select"), index.h("smoothly-item", { key: '846be873419369ca5b3a3bb7ec1763790847f548', value: "1" }, "January"), index.h("smoothly-item", { key: '78f330e0329eb2c63171e78d35680509e8e172a5', value: "2" }, "February"), index.h("smoothly-item", { key: '69179c3218be846bb33c018abc37a9bf2f379416', value: "3" }, "March"), index.h("smoothly-item", { key: 'a5594f65d0320457c0edb516d760dcb6bd5ee7b1', value: "4" }, "April"), index.h("smoothly-item", { key: '4377a009490a3636f3b8fcea6fd55c5a2c1577f9', value: "5" }, "May"), index.h("smoothly-item", { key: '74acc707028b86f5266a365614e7bdeb6da67a25', value: "6" }, "June"), index.h("smoothly-item", { key: '5767cc4323d227293c27934cfcd7ca146a3e71df', value: "7" }, "July"), index.h("smoothly-item", { key: '51d3e6cc6c9dc142c30e63ac1bb2df2cd3f7422c', value: "8" }, "August"), index.h("smoothly-item", { key: '58d40956906a3a9d59fbd9b59db8f99990ec04b7', value: "9" }, "September"), index.h("smoothly-item", { key: 'd78a4d9eb90e73cdf69610dded70dcb30b76119e', value: "10" }, "October"), index.h("smoothly-item", { key: 'b8867b2bbcf65f519455c8b501120c61368cc9cd', value: "11" }, "November"), index.h("smoothly-item", { key: '9f30a2ca954a2a47ff166c9eab312df2d03c3fca', value: "12" }, "December"), index.h("smoothly-input-clear", { key: 'd5e610c5a85b7d5e44dd0128aab00339a02a3210', slot: "end" })), index.h("div", { key: 'cbe1ff70d9410549cae2db26afe2328f7664fa50', class: "height" }), index.h("smoothly-input-checkbox", { key: '74a4ca779d60ee6eeed471e50a02b5da4ab1ec18', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '00c58e9df1e81eeefd02e504b4d8b801c2023694', class: "height" }), index.h("smoothly-input-radio", { key: 'ed80d56631c1d6e34345a2b0abb0f5708e420779', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: 'f22e8e2408d8dc2b3d835ec65d031381ee9c81b1', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: 'e6b40167ec1c4bdb1ec801bd86c5a936dcfac2d1', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '975d48ee804f99f041ab0e1d9775831fac38a893', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '47cb61faeca4e7538bae225bcfecb8417c26cbca', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '60cf6f95ad009845e7f6e319d952c1f270f966aa', slot: "end" })), index.h("div", { key: 'a9405a9b52e859ca553dd19560fa86610183024f', class: "height" }), index.h("smoothly-input-file", { key: '401a22707d76d8ed5d34abe448814cf4959a1fa8', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '89ab3c037ef0696c2dff55013406f6b427497cae', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: 'b43d75694fb277232384c2976be6321795062b96', slot: "end" })), index.h("div", { key: 'bd9d687f9b59e41e8dcb4302e2422a7a27e63677', class: "height" }), index.h("smoothly-input-range", { key: '1394a573bf3c1c0a833e4f02335a3303b9edf10a', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: '49f3b4028cd51409e1cbc5fdfeaef81ec27188f5', slot: "end" })), index.h("div", { key: '17f16df032bc1927129da013189f3c274d767c5d', class: "height" }), index.h("smoothly-input-color", { key: '5383ee49642c9b85e015535762abc344a559c6fc', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '8d749e5c39d9b1f70ed423b1258f31115912d02f' }, "Color"), index.h("smoothly-input-clear", { key: '47cc64ea251de5c33e05482de258667c8cb825ef', slot: "end" })), index.h("div", { key: '1a95e6d7d34d525420537abb68455514a8acaac3', class: "height" }), index.h("smoothly-input-date", { key: '48dbc96f309f9bb57d39acaf040524db9b4a28ad', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '0c14d8bceffe8a9e420850302525165679c508ad' }, "Date"), index.h("smoothly-input-clear", { key: '019d0c408379cf2b0bc265e920025d649ddd8777', slot: "end" })), index.h("div", { key: '3d67ba7e9f382f769f787b51e70c7f5cf7d3fe4b', class: "height" }), index.h("smoothly-input-date-time", { key: '96cbf433bc0b3c569d15103236e7a4fb8c63b21c', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, errorMessage: this.options.errorMessage, color: this.options.color, showLabel: this.options.showLabel }, "DateTime", index.h("smoothly-input-clear", { key: 'a631f516a994b86df2aa9ec3f4651f2314ea8dd2', slot: "end" })), index.h("div", { key: '97fe1c5b932289b2e42e9c634289725418b348c5', class: "height" }), index.h("smoothly-input-date-range", { key: 'b58568c51c8b45ae135450ec3686929732255fc7', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '41efbed231e88d909bd6f28162979f7ddb758e18' }, "Date Range"), index.h("smoothly-input-clear", { key: '9a2f23707a48fe56b6a37c7d035cc4b84ee85bd0', slot: "end" })), index.h("div", { key: '4c7ecea506ec437fe67337d65edd8f55d6947972', class: "height" }), index.h("div", { key: '3b365c0068e208b0f5c8f3f7b52853b169d92c54', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     get element() { return index.getElement(this); }
 };
@@ -9898,7 +9898,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'f4b88c08f34277a915cfec6bce48fedbc10eae07', title: this.toolTip }, index.h("smoothly-button", { key: '1cd4dd7d49d1dc11bc1661477fa814849b8a3e1f', 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: 'a0fa979725be9d57c13754e1fa7d01f9b1f5b8d1' }), index.h("smoothly-icon", { key: '328075c5444edb7ce7a967f16579c7ec7edc742e', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: 'e479bc4e0e7151a26964d30ef6cab245d4ecf48c', title: this.toolTip }, index.h("smoothly-button", { key: '784668d63e1d5945c8fd74517950badd23a25271', 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: 'ae09bd22cf4d54255c16d1fc2e99059417a10ec0' }), index.h("smoothly-icon", { key: '32511b0a5744aeead31e1c00e3ee756299c4ec1c', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
@@ -10012,7 +10012,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'fd024c3fb839f3d9b444b09c3b55dcd96c4139df', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '636345d960e05bc6e7299c1c306cfd763ad78c32' }, index.h("slot", { key: '911d9215654b918bdb843269c5392523c97337a8', name: "label" })), index.h("div", { key: 'f54718991c82336e4fe2f3a6f8a84cc52da635b8', class: "input" }, index.h("smoothly-button", { key: '55c379187cf9d59ffee497075bb8ee6576d99740', type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '3b6ab18c1ab0fb76a4c7151054415b95815876b9', name: "button" })), index.h("span", { key: '7901e7c5cd0b8344474e18746288bc14f103ee04' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '4c435365bee82aac9459a6d86b201225065ec3a4', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '83c7cfdd671c04e48f6b95cac4b9ab1429a07caf', name: "document-attach-outline" })), index.h("input", { key: 'cfc2bafb8d4b9b5af6d6b9f1f17d1312b3dfea68', ref: element => (this.input = element), type: "file", 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("div", { key: '4d125c84153bf6f60d40de857043bc6a53932361', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '4d59248a3b753b10e785cebe9dc77fbd79b01ac0', name: "end" }))));
+        return (index.h(index.Host, { key: '4e378111db0e10663f7a66d87cae73136fef9bb2', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '32b422053ae2c0f784e253b201f54a9c234e23d2' }, index.h("slot", { key: '2e8353bacb424ae6e9e80c7de566baadc0e4cd4a', name: "label" })), index.h("div", { key: '6802b6824a3434f972ed760e61122582eef6c2a1', class: "input" }, index.h("smoothly-button", { key: '7b4edbef075ce51a50b3d61ebd0df858ce25afee', type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '35dc27313c8e9d7463e4cc1a924dcdc3a5414fd8', name: "button" })), index.h("span", { key: '113ccb707f133856df9a6f2c707db99adcf9af42' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: 'a128670edafc51b44e0bfb1d092f0d6a8eb20dea', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '24c5da9c87f099c6998c911a01a6e2c150a71795', name: "document-attach-outline" })), index.h("input", { key: '896fe0eba364441816f4f16b2a6585baba195ced', ref: element => (this.input = element), type: "file", 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("div", { key: 'd8a0d4950ce1846166cf16166437c166839ef201', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '06bb474570c901cc3fe00e2de5404c3d37cb836c', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10133,9 +10133,9 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'e3b78671189b4799aa6420870caac62bbe2e3206' }, index.h("smoothly-icon", { key: 'edd56db8506d2348f45d0e451dc6343b2ac1c40f', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index.h(index.Host, { key: 'b1f87fae87e6203e9ef74b7221281e037a830b9b' }, index.h("smoothly-icon", { key: 'dd4fe8e284f87807fbb31617ae79060bf0a59ee7', 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: '37537931c02522dff6b3a841aa2e6443a86db8e5', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'c52efe9d16ac08f24545f337d7a89f1a7ad83af5', slot: "label" }, index.h("slot", { key: '8e0a0a023d413d1fef890639b213791320f73e66', 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: '98147726f3b4e0f51ac8af4b6394cb581529f8e6', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '836cd43278fd86d0d810e817335367c6d8522df1', slot: "label" }, index.h("slot", { key: 'a370f8065bc60246a4b3128b71df92f3d469b717', 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: '186887cd04242aff455980704947aacfae63f640', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: 'ca65bfc738b814d4b9d7cfa1b9c10ab1ed2f478a', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'bebf42ca61c711925077807fd39d590ad7c62b90', slot: "label" }, index.h("slot", { key: '4b21253002def35172963163cf0070f319321c68', 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: 'b26c5f5d8395b4b656a29bdf1e8a5d73e4d27877', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'cfa634dc871e83c96cdd49c7e65aeeaa347d9181', slot: "label" }, index.h("slot", { key: 'ae56d5cb8aadc9eab5f33da0fee54af46db7f3d2', 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: 'a56a322fadacacd62d1cbae348c0f650432bf3c3', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
@@ -10158,7 +10158,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index.h(index.Host, { key: '79d2b4b0522cd90b751e7da7f2630289a204411e' }, index.h("h2", { key: '4a50850a8cea3d8ac1535e3e7ba247986ead7bdb' }, "State demo on smoothly-input"), index.h("p", { key: '1d60b9f3086fe2d6aef0406d4e88aec87b4cd9f9' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '0e8c90bc64628754392262b590aef28a46c8113f' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: '485449050be389b7b101328dca5478cf739afaf4', 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: '9920d32947730f631e72072bb22b4f82d940cd73', type: "price", currency: this.currency }, "price")));
+        return (index.h(index.Host, { key: 'edcdc1ceec7f4019e08498066b88c74d9579f4aa' }, index.h("h2", { key: '46d387d433f70510f8520cd48d6b097c18df46a9' }, "State demo on smoothly-input"), index.h("p", { key: '782e65c8fb7c8e5b17d1df4590241db5d346f33a' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '630705dfad5ac3e9990f78f6de3452553e501854' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: 'ad933b980ccd259935b5faf994565c6937ddb1fd', 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: '714f78af7e19b0651eaebb5d4669d17b5cdc8d70', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = SmoothlyInputPriceDemoStyle0;
@@ -10267,7 +10267,7 @@ const SmoothlyInputRadio = class {
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
     render() {
-        return (index.h(index.Host, { key: '2683b527137fcd6362d031d734239dbeaf40189f', class: "floating-label" }, index.h("slot", { key: '2b7b2a76600ce44547604cde7c4bdc6b1c49f060', name: "start" }), index.h("div", { key: 'd5c326b86b585ec49fdb4a1f1b9b9035ba8bb0d2' }, index.h("slot", { key: '11f4e016acf166e44e5533666015fde2ffba09fa', name: "label" }), index.h("div", { key: 'd099fdeaa59227b67d3149d60c5a240dba9a14e1', class: "options" }, index.h("slot", { key: '0c871b481539804b6c51037ee1739e901a7f6628' }))), index.h("slot", { key: 'aee4f654185112600103bb644047584bb6e6d0c0', name: "end" })));
+        return (index.h(index.Host, { key: '9832f054f11d49d0c5f427bad59d7e71c3dfb2bb', class: "floating-label" }, index.h("slot", { key: 'bbb81a0d76656ee8b8b16d44d986a20a8a26229b', name: "start" }), index.h("div", { key: 'f89673a9f124e42216d39f5d09ea7445f0eb40d8' }, index.h("slot", { key: '1b9cb1c072213a19fa8b83d9f2dfe61792b9571f', name: "label" }), index.h("div", { key: 'a14d4813301823d8ef7108a36dbf6d6ab15bda30', class: "options" }, index.h("slot", { key: '3b34f630c9780413c4ee72d611c0298d04482bfe' }))), index.h("slot", { key: '90f11393598e9548125f758148c75a09af02a56b', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10298,7 +10298,7 @@ const SmoothlyInputRadioItem = class {
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (index.h(index.Host, { key: 'accc7b7e7097677782604053aee9b48ed9349756', onClick: () => this.inputHandler() }, index.h("input", { key: '9bd4dd5bfdfd1e6eb23a02b8d4fdea14cd936802', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: 'fe0d24d61fd2b5a318542f68effa90c163abf5fe', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '0d6e257ed8300bacc23b6327d5c249e38cb51775' }, index.h("slot", { key: 'd380a71b8949a325493c98f60a933a6f82e5b1bb' }))));
+        return (index.h(index.Host, { key: 'bf596b71824dfc45cf982587f22ccad43580f29e', onClick: () => this.inputHandler() }, index.h("input", { key: 'b0d3c66f47add4e99b6b36eb5cbede2931c7b834', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '9a9e1538061ef20eec2ff98f7684ce16d72c4efe', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: 'e22dfa008729bf93d2bd09517651ce605db21b09' }, index.h("slot", { key: '9f36ea8d7085eb8d9f30dff91bbaa515113879af' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10402,17 +10402,17 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '2faaa0e7a748f84cb04a785ffba77ac005137e04', class: {
+        return (index.h(index.Host, { key: '98a98128458102922f18ec177df52a2f3a1c58ad', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: '652c0722bd06da67656bb6cdd941cfb9808fab6f', name: "start" }), index.h("div", { key: '0b1af258430da3891efe8dabd7f8d34ce023f113' }, index.h("label", { key: '31c27bfd26aa9671668b449c0b4e53025b3b08df', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '8809cc1771f887cf29939a78f31bf0090a650349', 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: 'e06db3f6ee0fe1348fbc09d0012c5339512552d7', name: "start" }), index.h("div", { key: '81d3179f141bb88c291cfc590d897917b3a8b348' }, index.h("label", { key: '837b8b5fff2ba7b1e37515dd65b877cd16a82921', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: 'f572fea0e08f24de2f009e0e94021169a3dadee0', 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 }, this.label), index.h("smoothly-display", { key: '3f49234277227496ebc666da01ce74b920573795', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: 'aeb3791f8cddfa450c297c271af75a1eaab3229c', 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, 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 }, this.label), index.h("smoothly-display", { key: '190335c665330b75959e71c798bc21c4ac773234', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '3a2308e1b862d0a68ab6de8f3744ec0222e7992c', 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, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '5f259976445a88d9204f3afdd3ecaee885d3cc37', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '28f5e3334e63b5930fac6f87f255c7841dbeb3a8', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '2312264e39ea280bb19c1f9edf1684b6207a21bc', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '1b30b4f2d76728e54313f170631294334ae6e0da', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10426,7 +10426,7 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'd01c20bae43d1c4399040a27d06a8899e6c41d61' }, index.h("h2", { key: 'a4c84c71e44029a74fc896abb4f208d694188721' }, "Range"), index.h("h3", { key: 'a8c1e2e60e1c4dd2f5f7ef7e3dd2c25ffd2c9a95' }, "Phone Number"), index.h("smoothly-input-range", { key: 'f91c8f7c67d28b3dae1359da6a397a0db2896daf', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '135e17f039d09a3cb3cd1317702cdcf19ca11f76' }, "Stars out of ten"), index.h("smoothly-input-range", { key: 'c7827f612a561e6237a69d5eef8d8c170bf3529b', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '8ca8c80a31bf68ef58dc4a47c72a64b946c98538' }, "Percent"), index.h("smoothly-input-range", { key: 'a134090aed032211a135d82ecb7de5040f56b18a', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '2377916ee7a4787eec2efff1eee6fb6c2029bbc7' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '91c7c98d7654a14d4066fec7734d64d8ec9e2810', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '47afc40b571788d84b564c7078dd5e797b36b33d', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '5351d78c059982ab2b72264b97c662d828cca0cb', size: "icon", slot: "end" }))));
+        return (index.h(index.Host, { key: 'a65fa28c070c9c8622dace5fa9dfe6ae672ab68c' }, index.h("h2", { key: '36d30888a8055f706d3d43250c99d6c8882c2bd4' }, "Range"), index.h("h3", { key: '1e2f77ebc5c3c1df3fbd5d095e7c7ab7a86b2b2c' }, "Phone Number"), index.h("smoothly-input-range", { key: '5f50b12ee4a8579e21e67d4247e034541f0fa92e', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '13db0164ed6b16703c502bd04575492cbbb14e57' }, "Stars out of ten"), index.h("smoothly-input-range", { key: 'd38b9df06cfbc0616aa870f9cef411356bedc319', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: 'e159fcd4db7812bafacaa7c03fc4dfbc6ae5a40a' }, "Percent"), index.h("smoothly-input-range", { key: '0422cada1f51e4f879a8f39120e0534305ecbc44', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '1b316682a274d09ca05752ec36ebf62fa95c0f07' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '07f1e67528c810002f0d73c8d98783c0c3e0ccf6', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '3b84524cdcc3ad429bf78f6f79ea81960e0be18d', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '63ab031dd53c1bfc4d2eb390fe35f5af8039da95', size: "icon", slot: "end" }))));
     }
 };
@@ -10472,7 +10472,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '898e6ce3936aa5d448653cf7297050e9b8d9b789', title: this.tooltip }, index.h("smoothly-button", { key: '6b417bd20cc7e55bb669745475fc646b8f7729d9', 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: '7ebc5081b0d518f22f4961ae5852b98b1abb5572' }), index.h("smoothly-icon", { key: 'b367a1fe2f2b6721b10a2ae7e52f36c0e16aa50c', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '57e2e0372226f9bf0f4202b05c08277b0c9dc10f', title: this.tooltip }, index.h("smoothly-button", { key: '6b8a01fa2fddd93f37b18b04f1257872275bbbd9', 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: '5f7448c8bd003b714e4df0e44f7572057324676d' }), index.h("smoothly-icon", { key: 'f018073be7166306d4799775211fe93e2e1b6eb9', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10780,14 +10780,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: 'c631dc1181b49bd7057175d67ed8c2e5b2dad63f', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '29660cf0508f40e9b04fe5011517e4b03819a13e', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '8be43f1f1590b43fee1ee7a95a2beeba1b8bfe1d', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: 'bf67cf558290681008788976b57f119027eec54f', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '7a0791050ba8cec4053ffe30c8f00b5ba5c858ea', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '456fe3c9e103033de5e14815224bb82906cf00d9', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: 'd366cbabc2d06aa0975623b56e7a68206586fe3b', name: "label" }), index.h("div", { key: 'f1ff68203d774d98e6497ccabae9a33fa0957df1', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: 'f830796521edba5c927418e05acdcf4f83442a5f', class: "search-preview" }, index.h("smoothly-icon", { key: 'bf5d3525c6ebca58be716e6bbdd2b03307087a39', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '7bfd62b31e9464bf8a6afd6925d5da23d05a0a00', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: 'cc2f32af9113cb135f67ad108e713ce816d02982', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '7f37e622e83a0b3aa3750838737654bc6830f077', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '3d4918108064cb74b446de04eb359ac956d9236c', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: '4b94e6917943aadebdc6df22de085e723df52d9c', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '9139b66beef3ba075edf0d3fc0008b1db1fcba15', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '4c5346ce25a54840c1886c33d2bef94fdf5db8be', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: 'bb1ffe6ca46c6fa722f03577f63853a85910f01f', name: "label" }), index.h("div", { key: '8d31463792eb47339cb5913a2b6311ccffd2bf65', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '0f80ba71ac1884f2de0e6f4315cdaf648a455ea5', class: "search-preview" }, index.h("smoothly-icon", { key: 'e0f5bf862bdcc02a76578b6ed91f01d93616efad', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'f1d3c0b29e3977fe8220cd6e57bc03cf7e3b0e25', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '79262791c7deafb2d4ec24eea96c077cb3a807b0', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: 'ec4d9605893885482781549dc0a19eccfeed2de2', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '165ce33ce27039b670b03ad5b578167966a613b3' }), this.addedItems)));
+            } })))), index.h("slot", { key: '284a9f4c2c198aa1c6924a86d5925bd2f705bfa5' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10840,7 +10840,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '5c8b92761756007ece453dd533f33bcaa5f0e95f', 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: '6275b8a59180dfe1a6c9ffe1c251a4bd2fdb1f3d', 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;
@@ -10881,7 +10881,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (index.h(index.Host, { key: '8fdd6ce70e3a8263c4b939a8c43d1039fc72a56e', tabIndex: -1 }, index.h("slot", { key: '84271be5ece6ae93054de397edf0eb49c9d1a2df' })));
+        return (index.h(index.Host, { key: '2bcb4ce39cf6dc6c8ee10b071750cb7831f8492f', tabIndex: -1 }, index.h("slot", { key: 'e16e1cfdcdc3b2adf794846c892e74756c0a6e13' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10902,9 +10902,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'ec1329d179512c0470f04abbe12d98fa0a5810f8', title: this.description, style: {
+        return (index.h(index.Host, { key: 'f2d690e01f4feb5fd77267a90215c635afb0f099', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index.h("slot", { key: '09bbea1ba8a2ab9ef7b417275c3500ae44711ce7' })));
+            } }, index.h("slot", { key: '2e6db8a90c124d58ccaf1dba95081cd9526a4c8c' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
@@ -10923,7 +10923,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index.h(index.Host, { key: '0f6d1d415c90aa8891873c229585e7e2a5fd9ff1' }, index.h("slot", { key: 'f1f8c6da2e7b3d76433853365b54dbdb9a54bf45', name: "before" }), index.h("smoothly-load-more", { key: '3308f6e409f6b4fbd4f0e9eecaf6481d2c9b1a51', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '2581dc862b138ddc60fbd581e9b16404d9b22ce8' })));
+        return (index.h(index.Host, { key: '450f3f9b10d1c1ce6b707ee7436d14b91a02f7ff' }, index.h("slot", { key: '30b4468cc7527a4fc6adbd35a80217503be8618b', name: "before" }), index.h("smoothly-load-more", { key: '878a61f0086a5def6ad24eaa4fa6092e49a60415', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: 'f5e9b745ba2369f7150a88714a5129ff4ffc7a79' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -10967,7 +10967,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: '9e6f0728a14a854d39e5b7c10ec663e8e0b12bc9' });
+        return index.h(index.Host, { key: '4f0df4fdcba3f813c7559c7415a60b91c8d3acb0' });
     }
     get element() { return index.getElement(this); }
 };
@@ -10987,7 +10987,7 @@ const SmoothlyModal = class {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '9e7830cc5e0d8672ac279c7148ea9f2f71112c17', role: "alertdialog" }, index.h("div", { key: '8127616fe7158848d3c6f6b1124db0bfb283277c', class: "modal" }, index.h("div", { key: '2f64da1bd8e42a737baf8f2ea9d50264553876ac', class: "header" }, index.h("slot", { key: '4e0b103f8f9dd9e370789e71a9a01f057787f528', name: "header" }), this.closable && index.h("smoothly-icon", { key: 'fc9f4e07359b7670e5b5e89258590c504ae5ecaa', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: 'e175c68469046774ea8eaafd443675988b4a94c8' }), index.h("div", { key: 'e1be4aea7820501bad389d7f52ba6017234943e9', class: "actions" }, index.h("slot", { key: '6798c42f8f4f7d3e1d5a6e47f06bc3beea23477e', name: "actions" })))));
+        return (index.h(index.Host, { key: '2c2112786afba4ee1e0078af711cc66a3b54ec0f', role: "alertdialog" }, index.h("div", { key: 'e1037c2ea38bfa435b7d641dd5e23c354c97bcf2', class: "modal" }, index.h("div", { key: '1ece8c35264ff9229be44ab51a7501b329d9b952', class: "header" }, index.h("slot", { key: '2fc3f0b4de6d541138144f39d1c79f53aac71edd', name: "header" }), this.closable && index.h("smoothly-icon", { key: '8a53bb4df4ad0c58930e909edf2a4c1852334986', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: 'cb01d39b81fd0072650c8e252fe19a61fdaddecb' }), index.h("div", { key: '684d3c1b5abb7f0611d798df79643ba77edfcb30', class: "actions" }, index.h("slot", { key: '640d93cb040871439633722f29c4d82bb7fb4d14', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -11050,7 +11050,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index.h(index.Host, { key: 'c9d05c75f3632db3f15858d5c02f39c38b0925e8', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: 'd2f70e41ac22b0b9918e558910e7021a8fe31d9f', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '35e2695cd3a83e3699b117a01e62efb96d17be78', name: "close-circle-outline" }))), index.h("span", { key: 'a199bb745cc72a0c635c15bc4a26a6509ad12910', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '5f518ab4af784bbe5eada263b726718e4bd07b0c', name: this.properties[1] }), index.h("p", { key: '6064c0964359b9953a713f3a6aed1bcbf3d23e64' }, this.notice.message))));
+        return (index.h(index.Host, { key: '8fb5a20434e762590043ed4faf11cec75d008fb0', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: 'de26276f71118d785f71c4ae363fd9ddacc71ce7', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '2e399a9b671be2b1d74e3400d393cb779c03ddc1', name: "close-circle-outline" }))), index.h("span", { key: 'b904641dc0fe92147df5e5cb550207711321915f', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '7ab71b91b315668ada24d42f60af2cf0bd397a8c', name: this.properties[1] }), index.h("p", { key: '68e2b2c6a51829cd023bbaa3023790c36e3da46e' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -11074,7 +11074,7 @@ const Notifier = class {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (index.h(index.Host, { key: '7e71527eb9d845d83a31a54fb59a516fef7d2985' }, index.h("slot", { key: '8da2fa5664ae5c4453e06ab14b73c7f8335fd72a' }), index.h("div", { key: 'b19ec204f8215f9f552422990263e2a89b320082', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (index.h(index.Host, { key: '01bb9499d8533fc3b57267bcd33cb15bbf2ff864' }, index.h("slot", { key: '6be9c9ddcdca91c5d409ff6f30a45dbb138d4a24' }), index.h("div", { key: '657205e7d19a9fd5a8f3ed826d597358ea5eb013', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
 };
 Notifier.style = SmoothlyNotifierStyle0;
@@ -11090,9 +11090,9 @@ 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: '41b99e921e14ec12d85f0535654a3312e0a0e064', style: {
+        return (index.h(index.Host, { key: 'e398e743d6ae2c9371afedc1af71197697f8627c', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index.h("svg", { key: 'ba95701f05e8916221779a08278736b3cc32b868', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '762d7d72d60f998898a13d10675f3008dd7476f4', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, index.h("svg", { key: 'f90840c895e699f9a7e0660b4c4487711992ce0c', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'f431c63f8b43f51fbc89aa7b926abd81202d4485', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = SmoothlySpinnerStyle0;
@@ -11127,7 +11127,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (index.h("details", { key: 'affa54f5d7cf68fe7f8e85ebef3cba2f26dfb4f6', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'e0a90e5340973d5a4bc7daa923910c4ed30f6848' }, index.h("smoothly-icon", { key: '786ef493adf27540e1d6fafc75b1d8acafad701c', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: 'e0681a2e318a8e7ccc06acf27e64daf3b3948585', name: "summary" })), index.h("slot", { key: '805bd54a4f306c1ffc4f944942c60ca00eb852bf', name: "content" })));
+        return (index.h("details", { key: '013ca7fe45e2706b0be77690a72ff55c37bd03cd', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'ff74d57224d99e0623f866711fca8d21d4635eb5' }, index.h("smoothly-icon", { key: '4a8b741fe22d64f2f411e6704b9b7b4d5d14b288', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: 'a8f5a0416c17b4c011b508f1b44f93a0362709b9', name: "summary" })), index.h("slot", { key: '9d7905d61c1cd60c1bd44c3e812ecd2c18eb63b7', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
@@ -11168,7 +11168,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ab4afa56bcd29938b069d8a932e07241a0073f04' }, index.h("div", { key: '557d75d174f05d83c4356878274f871d5e122587' }, index.h("label", { key: '7a577ccf8a4f92c47f54b7f51af041c84d0f7f7c' }, this.label)), index.h("div", { key: '78d8f5b363a08e8498bfb599d5e5b945a830eda0', hidden: !this.open }, index.h("slot", { key: 'd7c1412ac6655065d1ce57de6e8001b7d33f4c53' }))));
+        return (index.h(index.Host, { key: 'c899210cbea49b143b2de3b443dc4cf656014d4d' }, index.h("div", { key: '1ffb57e2b5286e818526d81ae9516357ab3050ec' }, index.h("label", { key: '7e5c98ae6cf9124a5165d8132f57cadf1b07b677' }, this.label)), index.h("div", { key: '0a0b0faef055809e0da293b3efa092af2d81b9e3', hidden: !this.open }, index.h("slot", { key: '4e16af2cc30e5e62f1af8818c4c5037f46383a70' }))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -11191,7 +11191,7 @@ const SmoothlyTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '27103c94544a0522eccaaed12290f4ed90c590b4', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: 'cf2e937d1bc707539cf332e91461b9e21f97c4b5' })));
+        return (index.h(index.Host, { key: '272c1550a6839b84a3182b78744a8d744e9f201a', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '6d0e2a8487189de01d90a785966205648160d580' })));
     }
 };
 SmoothlyTable.style = SmoothlyTableStyle0;
@@ -11204,7 +11204,7 @@ const SmoothlyTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '0ada15e4c41e0728f3ae1fdcdc85837412360be5' }, index.h("slot", { key: '9ff916c41b95eeb8b127f8df0c27d0f4f570ae98' })));
+        return (index.h(index.Host, { key: '568b240511f1f928e398f24090134204e05f5725' }, index.h("slot", { key: '686d093a90d9a2a16492108c45ff2b9d60bbef32' })));
     }
 };
 SmoothlyTableBody.style = SmoothlyTableBodyStyle0;
@@ -11219,7 +11219,7 @@ const SmoothlyTableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '8d3d61d3dd6662a25300eb43b6ff164554672e0d', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '05a97c68515632493be2333cdc43fe7fec9309eb' })));
+        return (index.h(index.Host, { key: '8cd74b926185e5e15b8c48a0723ec6c9b03b1227', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: 'a1eb377c3532feb0ba18cd74fb09b0a00a780033' })));
     }
 };
 SmoothlyTableCell.style = SmoothlyTableCellStyle0;
@@ -11232,7 +11232,7 @@ const SmoothlyTableDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '65cea5347c7532eaf07a12b55993cf601a5256e8' }, index.h("smoothly-table-demo-filler-row", { key: '2574b26c77d3fcd6134bc1f7f11971030419ed4b' }), index.h("smoothly-table-demo-group", { key: 'e6d462116b01ab4d129541da72e57e7563a8f2ed' }), index.h("smoothly-table-demo-colspan", { key: 'd32e5b14f816384531fccfeef24494d13ec481d9' }), index.h("smoothly-table-demo-simple", { key: 'b9fbf61c71a2eb7dfabf14d6bc7f1202d1634358' }), index.h("smoothly-table-demo-nested", { key: 'ce1db6290315b9d0936e1674b0c38c4c38c67a9e' }), index.h("smoothly-table-demo-filtered", { key: '7dd201443e90c58bcb9b8c8a0241d16f4978fd0b' })));
+        return (index.h(index.Host, { key: '3046978ea77a2bff648a14420f05f85e398a0927' }, index.h("smoothly-table-demo-filler-row", { key: '6690a2d0b36d1e7f7969a61d78908de0fc568a50' }), index.h("smoothly-table-demo-group", { key: '37e23b74ae8923c970bbb2639e640222feedc307' }), index.h("smoothly-table-demo-colspan", { key: 'b8539d27f7a8f36cd1b7bca1bf54eb54183db0b8' }), index.h("smoothly-table-demo-simple", { key: '89fd22a0e50f0c87d39437fa5fe04b66e2280584' }), index.h("smoothly-table-demo-nested", { key: 'b4b1eae30554c4f7a56891112473c2eb84232263' }), index.h("smoothly-table-demo-filtered", { key: '7f9ec900541185901c822b5450edb4aca4f4ee2c' })));
     }
 };
 SmoothlyTableDemo.style = SmoothlyTableDemoStyle0;
@@ -11245,7 +11245,7 @@ const SmoothlyTableDemoColspan = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '52a60c5b7897b5c62e3accb439c3015df87c5726' }, index.h("smoothly-table", { key: '47b3f1fbc81e9d8228cf3a0cfae13cc128bdabdb', columns: 3 }, index.h("smoothly-table-head", { key: '0473090ae8a09e024d3f8729e4f17f5dcd52f581' }, index.h("smoothly-table-row", { key: 'f92c603b53912109b94e9e371fd2c5fae0c550db' }, index.h("smoothly-table-cell", { key: 'df62d09721b0f7bf5f3e246baf96969bab4cfb7d' }, "Date"), index.h("smoothly-table-cell", { key: '4af65c6e059e4c26a58882396c8c87aac19b2578' }, "Skip"), index.h("smoothly-table-cell", { key: '05dc66e7bb0d3f11ca0fffd6eecd7e32958118fa' }, "Total"))), index.h("smoothly-table-body", { key: 'c3f452ef201d714624c9849c443b26c7799e6374' }, index.h("smoothly-table-row", { key: 'b14aeaa8b8f23cc6f16e60bca382b8e33c282632' }, index.h("smoothly-table-cell", { key: 'ecd28f52a9ccf616098a026cf8a587f15dded411', span: 2 }, index.h("smoothly-display", { key: '0d0354908dea64d4b59e5cca0cab93d3003e7b8d', type: "date", value: "2024-01-01" })), index.h("smoothly-table-cell", { key: '3e08f587933f153cc27c034170f6529bfa8198ed' }, index.h("smoothly-display", { key: 'b22b375f6181cbb05e651b34844720a131f7f2eb', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-table-row", { key: 'a44a3587308ff7aa181faf9109246d1e69138c93' }, index.h("smoothly-table-expandable-cell", { key: 'c2a3e2e9b9a66e4837ea4ee7727720d1b7caf336', span: 2 }, index.h("smoothly-display", { key: 'eeb70f7444fd6cc95641ba80230104d21d207aa2', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '28e0a1be13c4580cd7459e63d57295872a83c1e2', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-table-expandable-cell", { key: '0fc19b4ca2e81e91004bdbbdc76130aa02b19076' }, index.h("smoothly-display", { key: '7e82f526773b50d8be3cd435e3599bc52e2943af', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '5321d3c3d733e6c1fa1610d2f18fb42858c08b48', 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: '117fd7a049aee712ed0dbeb9810a94baf887eca8' }, index.h("smoothly-table-cell", { key: '3a149155a5fe80f1cb8f7b43e566743b26ce0db0' }, index.h("smoothly-display", { key: '87688bcea53a58823bf2785605497fc37eb483e3', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: '0967becc93a1908abb519ffa15de55a275553729' }, "Not Skipped"), index.h("smoothly-table-cell", { key: '4357c37ccd914e1fae027cedb8fd70da12555d11' }, index.h("smoothly-display", { key: 'd271dc5bc6110639bcc915bd67242d44138ce44a', type: "price", value: 320, currency: "EUR" })))))));
+        return (index.h(index.Host, { key: 'f3c409f0b6f43da04fbe409c7ed7ebadf5c94799' }, index.h("smoothly-table", { key: '54b821e2e4524e7eecda98229df2319fc48c7724', columns: 3 }, index.h("smoothly-table-head", { key: '422385fdbb992c1d32cd6c8d0876d550f615f0c6' }, index.h("smoothly-table-row", { key: '2ad82993c654b485c79962b606eff1953644670c' }, index.h("smoothly-table-cell", { key: 'f8f42a802e34b3695d04e2de59a99b49c6192ecf' }, "Date"), index.h("smoothly-table-cell", { key: '79681fd1fe78adb229aaf3071ae51ba8161c7ba0' }, "Skip"), index.h("smoothly-table-cell", { key: '311219701e89b0ea46cac7c9e7334eb3eabc5501' }, "Total"))), index.h("smoothly-table-body", { key: '75a1ec1e2629ed1220673b48adca3189617f7443' }, index.h("smoothly-table-row", { key: '49295b1e8cbbf145ecca779851285e14665dff56' }, index.h("smoothly-table-cell", { key: '456af9cb2a8f86b7a63890fe8f5e8f581915be33', span: 2 }, index.h("smoothly-display", { key: 'e7031f02b0b241830e60bfd811757db862305df9', type: "date", value: "2024-01-01" })), index.h("smoothly-table-cell", { key: 'fb2be68daaa5221b44c7e3db0b55ac899c40acdd' }, index.h("smoothly-display", { key: '086f117daf113001597da48844df96f22d631b7f', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-table-row", { key: '97a1254a17a62dd45b82290c6bf4fef2853d7907' }, index.h("smoothly-table-expandable-cell", { key: 'c44e6b35ef42095c057c84696b536e9dddad3027', span: 2 }, index.h("smoothly-display", { key: '13a7b5c6d3defc5aa8d48f238f3de47e09a5ee2c', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '1278a07efc56a1bcd4360a2de22c0f014ed343cc', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-table-expandable-cell", { key: '2f6cdd2a7cfcb741ed0d8ff8e2aa64d6221d42df' }, index.h("smoothly-display", { key: '5d716640836a1e215802d0584a894bd1b69633d2', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '1f2d1719387d09873db7affab6b4989253e5d46b', 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: 'b2a3418c23c1563a518b563b9308e2ab1be21bb0' }, index.h("smoothly-table-cell", { key: 'f095ecfb75a74fd65fc7d0c20104947d02dd9864' }, index.h("smoothly-display", { key: 'b6ab78cc06b647366d9da976a220d186cb10c949', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'a5b5a5c7b8b01c5ba52fbd8ecb45ba5ab109120d' }, "Not Skipped"), index.h("smoothly-table-cell", { key: '9803423aab3535613a0b812b94b62f618a832443' }, index.h("smoothly-display", { key: '1a2f69afa1560deb43141bf1e62b47e324e9053f', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyTableDemoColspan.style = SmoothlyTableDemoColspanStyle0;
@@ -11264,7 +11264,7 @@ const SmoothlyTableDemoFillerRow = class {
         }, 3000);
     }
     render() {
-        return (index.h(index.Host, { key: '3732c9f5b04611c92815425c666cb98a1a8a13b6' }, index.h("smoothly-display", { key: 'f8870230eb6cd3dd6ab82b8d40e7f13271acb663', type: "text", value: "Filler row" }), index.h("smoothly-table", { key: '4984b2eaa37b32f667cede832c56e4cf378de49c', color: "primary", columns: 4 }, index.h("smoothly-table-head", { key: '44333a55c2bd228fd3c8dc14043e3ca5156c2ddd' }, index.h("smoothly-table-row", { key: 'c615fc72b835e77ae9b9f8ba5d0e1e0b61954030' }, index.h("smoothly-table-cell", { key: 'c0ac5b42239415560e589de1d50024a22d1e0d65' }, "Breed"), index.h("smoothly-table-cell", { key: 'd3bf58bcd3d630f02e4645215f8e981c180a3bf5' }, "Country"), index.h("smoothly-table-cell", { key: '6e26fd8c273220e6b970b8a9dd3a2de90c4d3661' }, "Coat"), index.h("smoothly-table-cell", { key: 'c98c2d0387969a9a7998878b089fcecbf10f8c58' }, "Origin"))), index.h("smoothly-table-body", { key: 'b54e5af5cae91e7db57e58f0cc09eca10e9fbe86' }, 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("smoothly-table-cell", null, a.breed), index.h("smoothly-table-cell", null, a.country), index.h("smoothly-table-cell", null, a.coat), index.h("smoothly-table-cell", null, a.origin)))))))));
+        return (index.h(index.Host, { key: 'f7a6e988e23fbfe0d327f2c2c0ea383e91e6c00d' }, index.h("smoothly-display", { key: '1c15584e9359a22e169f9d996b64c2e4a8642e70', type: "text", value: "Filler row" }), index.h("smoothly-table", { key: 'ff3d8237d67bee82f468f931909d6f7aa9ea1cf2', color: "primary", columns: 4 }, index.h("smoothly-table-head", { key: 'aa696f144f5eb68825668f25c70a47ebe604bfe0' }, index.h("smoothly-table-row", { key: 'a08b9a87b9e3d22e5052f835839b819509669bae' }, index.h("smoothly-table-cell", { key: '47cbc283c04f9de90787063b55567c62176b3b88' }, "Breed"), index.h("smoothly-table-cell", { key: '36576f62ebe64e4666256f71f3bba1d6865fb810' }, "Country"), index.h("smoothly-table-cell", { key: '86ab4675cbab63fe53fdd0c50249f6c9c954d2eb' }, "Coat"), index.h("smoothly-table-cell", { key: '33445c896de6507a1786622e87600d6799a853d2' }, "Origin"))), index.h("smoothly-table-body", { key: '3199cb2736ccc655d0a5e3a0b27e8957e7fade3d' }, 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("smoothly-table-cell", null, a.breed), index.h("smoothly-table-cell", null, a.country), index.h("smoothly-table-cell", null, a.coat), index.h("smoothly-table-cell", null, a.origin)))))))));
     }
 };
 SmoothlyTableDemoFillerRow.style = SmoothlyTableDemoFillerRowStyle0;
@@ -11336,18 +11336,18 @@ const TableDemoFiltered = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: '6a127cf14c6e9ac9cf1fd624976c7202c7443521' }, index.h("smoothly-display", { key: 'b540b7fae79ae7a24c60d9cb612d5abdc020d629', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '75a46178baeff2e540033e1995e7453a9a63f782' }, index.h("smoothly-filter-toggle", { key: 'af8c196c100f0efb79ea0f1d33344923acba1d34', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'b365b3ea14a558a82bfb901bca2c3b0c163d8b0c', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '487d35f33304a855dae3e822fa4e637ef0af6f01', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '167dc2b558a6f119b1643796bb212ce5033c5b08', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'dfd5d2d8fec55e3c98a9ceeb0585f838abcfb5a3', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '9ed2288b9aa0b7fec71e9034742b3ced8fb95335' }, index.h("smoothly-display", { key: 'c9e9f9f84b649977c431411a45c9a7ef4c708650', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: 'df8733d3749d616833ad435fc2cf964a4d2889a2' }, index.h("smoothly-filter-toggle", { key: '28c6c2405c5e0ec916bdff7b01ef5f05b433594b', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '28356b3ac2762fbb0b02daa481a725b7c9de4ecf', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '84f494b764c2cb58c93a9dbc3d3937bc83950267', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '3fb0d6fcaabced6b54cf388785c62dbb712d4ea2', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '455dbc1ae303429a13b0d40d56c4db3ce3ea923e', 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: '8f242713cc3aaccd0bca45b5af973d58e1fed72c', slot: "detail" }, index.h("smoothly-form", { key: '54487a1753cbf4e9e0ff9958d8c2e1e6edf86573', looks: "border" }, index.h("smoothly-filter-select", { key: '0366d788269d03db39f41c9977ccc7c185a524b1', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '65b8bfa14a1fe65f71e5b3d88422526d5300f316', slot: "detail" }, index.h("smoothly-form", { key: '606c9015213fc51bede9d2390204ab548d5741de', looks: "border" }, index.h("smoothly-filter-select", { key: 'aa61ce0e551a0737da8c6d3dd0f7fcf53cb22071', 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: '547d51c2bb14f44d1a708d37b114bcdbc05fa3a7', 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: 'db47a049da7fbb18888e899f27d0b5ffd74dc871', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), index.h("smoothly-filter-select", { key: 'fafee16b81d94a8de99ecb1595311f699e77772a', 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: 'd093121dbac5c4da3d847366e14126623cc3bfcc', 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: '1d02ba7ad55d55de609badd1bd4df469c809dadd', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '480b135571c42dcd5460f7f8f1f70ed03b1e54ee', 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: 'f70f7009cfa2f2768c8201d1558131723aec8473', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '4b86865751461f38e68e3ee3cd3c73e3002ea39e', 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 = {
@@ -11366,7 +11366,7 @@ const SmoothlyTableDemoGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ac1e2b26f2380a5f96245f1b2163151b2ad7b3e7' }, index.h("smoothly-display", { key: '2aacadd33613d06b333ad69891486fd8b6eb69ef', type: "text", value: "Group" }), index.h("smoothly-table", { key: '57d9e86ee2e9886663ebaa8a4eed65d15a6b7b92', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '51b92cb9bc233305b122dcf17218ffa8484fc45d' }, index.h("smoothly-table-row", { key: '594ed85e562ed3fb61d06803a4e068cb6597c599' }, index.h("smoothly-table-cell", { key: '1a2fd79dd5b6cf3639d46ecc7575d8875774348c' }, "Date"), index.h("smoothly-table-cell", { key: 'be4715328ec4467c724bf09c370ec1091fedb771' }, "Total"))), index.h("smoothly-table-body", { key: '8f33c69d6915080b09f39fc81f24c0d884141fbe' }, index.h("smoothly-table-row-group", { key: 'd0f4dd5a1f7df7b292bd2fa48548ab11f2331e23', align: true }, index.h("smoothly-display", { key: '0163976ad21213b03059df5b33fe8667e4b1ab61', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '9fa1e617b130038c017ffbb8b14c16b894bd0fa7', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-table-expandable-row", { key: '01cd244dc7b6c8c2c46466932d2e1b8fcc72136b' }, index.h("smoothly-table-cell", { key: '599ea21bf02dd781b0e534f536d9db2d357411dd' }, index.h("smoothly-display", { key: 'e69887f04252006b8c815497717683d6bff103ee', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'c7083e894459c0af28577d7f457445fcfbb332b8' }, index.h("smoothly-display", { key: 'ebd41fd0de8f02cd8791fbf1a8133d0cf70e7bfa', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '1183b94bfa97c42c4a283291c4036b91e9aba84f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '197aa13a0ba31133e08f2723ee398b541052e377' }, index.h("smoothly-table-cell", { key: '148263446a5546a9aea1c24c627a612a5447a22c' }, index.h("smoothly-display", { key: 'ab9646e529fa57b8bf1bf3568643891bd6b34659', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '58a8d86babe68e9c6988bd2972b0edda1749c0ec' }, index.h("smoothly-display", { key: 'cfa34641d9c1adb8e7f6e6239bedcd44bbd4d908', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: 'def091fc9cc806d11379792cb18a027591155484', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-table-row", { key: '6257f6207341f724d6a9dffeeaaf8186fb36673a' }, index.h("smoothly-table-cell", { key: '93989c61fe42aa07f202610f0929c2049faf8301' }, index.h("smoothly-display", { key: 'ae0ac80a8105d5137c7541cefaa0da293d7c166c', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'c049824b441dcfd5a90952814b7932e0a706a611' }, index.h("smoothly-display", { key: '1109b09b8fd9ab91aacad6fac87663dd7d8bc397', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-table-row-group", { key: '8024d8c48bc150254bb7c32b9b1e4d25c1f0227b' }, index.h("smoothly-display", { key: '8b0512426d5e003c7dcd168a7033ba91c5482f3e', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: 'fcf8088def567c886ef14394ae761c7481e8ae69', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '77855907af956570d16bc04979b2d133bdf0f3dc' }, index.h("smoothly-table-cell", { key: '645dd969cf30cad850143b7746775f67e8dd067c' }, index.h("smoothly-display", { key: 'a8c4208116f295666224502abc1935df992caf25', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '6f9e7bd4df149dc8f26c7e4cac625c6ae50ba6e5' }, index.h("smoothly-display", { key: '561248e3a9a090f71a5e8c0824e04cc151781346', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '01e619b768f4d6a75d330717b8c62caff3b1d5de', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '11fc0d3d5af141e92f95cc0f33d1624b6ecfc702' }, index.h("smoothly-table-cell", { key: '53b593499f30b1fe9bbcdcf9e34a3843f595065d' }, index.h("smoothly-display", { key: 'ded56d951cc0954619d31c9153f9b4b38d04b4ac', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'f45ee29586add80ae10f886974fa99f7b2692f5d' }, index.h("smoothly-display", { key: '26940755ba0efb3151154f4efca225f071b231e2', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '4b48c9d516e1c0acd6de61f385563f0cce5fc3f5', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '49b134a12cbee6c373abd8e1cb29bd7a42e58122' }, index.h("smoothly-display", { key: 'ca0b7af40a5b904722ea9352471dc592b6888d22', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-table-expandable-row", { key: '619bf96abacccf28b1d0cc6b4cf760a20cabcfd0' }, index.h("smoothly-table-cell", { key: 'f81c78d4f6ac39a9f511b9c2a3f1781861462e13' }, index.h("smoothly-display", { key: '02941b7e64aa0b43fc204a67f3239af65c818fbf', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'c93c70f460e9ddbb9d2ddadec99771cb8b80787b' }, index.h("smoothly-display", { key: '1f0fad76ef3a0775bfaa7901bea6d039a480808c', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '88b01a1486453745ec84673e9b8ba1d3b5665fd4', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'f46236401cff7790c805501aaf17fbb27cb5deef' }, index.h("smoothly-table-cell", { key: '983123f84dac8b8444d574c0f17b40fde54f82b7' }, index.h("smoothly-display", { key: 'ce2ce797c6da24fe2b792ea0fdbedf31446c554b', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'd7cee8e15c2729262626df9e7fb4f274081bf6d5' }, index.h("smoothly-display", { key: '3e030ede5ddec3069cd7523ccf0e72667025c897', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '20444c6ca489da00358efda2aecd4d2b4828d943', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: 'b4102e638c5be5706df5202e443dc6627e5100f9' }, index.h("smoothly-display", { key: '835b77937ce71f8dccadfbe27424698654758bc5', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '133846d95cec85f4d36d3a35ea342b170c907fdf' }, index.h("smoothly-table-cell", { key: '96e0ab35c87f41b52f5ac25fa37c91577d3dab4c' }, index.h("smoothly-display", { key: '697fcaf06d91f8fcf675a9c181752eda2edcb957', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '01e3e076f6e3b2237baa5ae94c11d099f40bc2c1' }, index.h("smoothly-display", { key: 'dfabd0a43902e0d2468e45c4c0b7e57c26c72f21', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '74ba4dce88edcb26d388dc570fc9e7f683ffe914', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'fc95ba0ad6792d17b9a152e220004c0a0ae915fa' }, index.h("smoothly-table-cell", { key: '4095a8723d5dfef1a5311d02b5eb6ddacdd21d4f' }, index.h("smoothly-display", { key: '79e73efb2d15ad1423ff50fc59850d33e0c37332', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'bcebdc2bd0446896de6bbe63b36353d21572e4d2' }, index.h("smoothly-display", { key: 'debfdac7984b94192a8f4b0de882830a0fe1b9f5', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '57853f97602df3961cc1921e73ad0eb7e2edd2cb', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '3d4d9d34a570a9a1ed3762aa1884d105ff1c3921' }, index.h("smoothly-table-row-group", { key: 'd4b1ace25b3870f2e5c9ff843eef7cdc58f8d77b' }, index.h("smoothly-display", { key: 'bef9be6c16383367efeed4e0329408991f86afe3', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '7852ab6f71d06069c70ee749f7d75da35e56b3dd', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '59d809fadda4bf589598feb8fcea0775d524b5ac' }, index.h("smoothly-table-row", { key: '4be357fc59ab67ab05cb567f922967a196a4e4ee' }, index.h("fake-cell-wrapper", { key: '287d8fac5591b448b02f02170011ec50213c5724' }, index.h("smoothly-table-cell", { key: '0d6caa57455cc936a149fa987616ddd143a135e0' }, index.h("smoothly-display", { key: '90b82e4e9d5d28f6825fc8e4a225c887b37cea1f', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: '0d4a64edab46d9ae0d69831713a8cfaca6630da1' }, index.h("smoothly-table-expandable-cell", { key: '523918968f3a22ddc5de7d0d7577e18d524a9aaf' }, index.h("smoothly-display", { key: '9f8da05b5a433d82fb68f656217a22c4801d07c9', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: 'a196d55674366110428f32f469f414048f9a8c8b', 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: '42945048578ebfb8e5573604347776dae8efb2dc' }, index.h("smoothly-table-expandable-row", { key: '9a3d3fe7187c0181beb0d0d71519d3fc6caec842' }, index.h("fake-cell-wrapper", { key: 'a8c8cc790dc98f50640c7c55657f8772634d50ff', class: "span-2" }, index.h("smoothly-table-cell", { key: '1ad78842759037672fe9e31d08c8c845b46b9814', span: 2 }, index.h("smoothly-display", { key: '96951fcb252a7c29a5c69ddc1b319e706f806cdb', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '7770e38591005b8f87cf28ae9b46643b84804fa8', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-table-row-group", { key: '6b57c7aecd0e4556c47826bbdedd42c3b716ef73' }, index.h("smoothly-display", { key: '26e21c0bc8fea7e27387dde2471fd34f6fa3623b', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '39995adb80b1c246a45aaad63d28b31a36d1b5f6', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index.h(index.Host, { key: '525eeb222fc5adf7686f01218b851237c1999f41' }, index.h("smoothly-display", { key: '16b431fd3e0c5121621001a637e35efa0471775d', type: "text", value: "Group" }), index.h("smoothly-table", { key: '4e71111d0ab87c2a1b7c017bac2467846a196a67', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '9bd108bb1e59a6ded5ec13ef0a87c36173be7f75' }, index.h("smoothly-table-row", { key: '82ac75f037ae43980e3379e94d9b8d5ab0a8b0d2' }, index.h("smoothly-table-cell", { key: '9f5e0d4b0b0089fb11325cedde0d3cb38311e74d' }, "Date"), index.h("smoothly-table-cell", { key: 'f8245b75fce32068c78393fb4739489ae8f198f4' }, "Total"))), index.h("smoothly-table-body", { key: 'd45013659fca29b22289625304ffee15ca8a5ef3' }, index.h("smoothly-table-row-group", { key: '1deb59cea4ed8fae6b8ead06c530d1ef28026592', align: true }, index.h("smoothly-display", { key: '9497ecdf2558f9f3a7e24495ace80c42a1667f52', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'c31bd0d77e8226c8548eb2088425d022554de981', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-table-expandable-row", { key: '5e8aa13aa0364e233888b5e9243697991105babf' }, index.h("smoothly-table-cell", { key: '653203b35b3fc24aca74f01eddf8a95e544985f4' }, index.h("smoothly-display", { key: '11e70eee43318e5a418504717297f8a0d322949f', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'edf443bf38474b73585310979c9cae9e1a710bcd' }, index.h("smoothly-display", { key: 'd01ce8934c552744864f98653ac86c906d8c7125', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '226222ba98a44d3a2177b9426ca075733dbf310f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '54eb65d5619d4bf9393b9d2b4ab93526d5713157' }, index.h("smoothly-table-cell", { key: 'c5514790ff8ab9bbc749f17b407562ecb6eb99ea' }, index.h("smoothly-display", { key: '39597722d78f192d2e4fbd05210a3f094712d3b8', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'a41a3848f53285f5cb1c08be15580476138b1c1f' }, index.h("smoothly-display", { key: '01979311ac640d12e119027b23403196e5db17fd', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '5100c23d76896339eb498b799d40111a4e25209f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-table-row", { key: '597ce39b9479a1e1357f796a71e2d1c503d919a8' }, index.h("smoothly-table-cell", { key: '40030ccef075d3db739f93313bcbf4fd3b217824' }, index.h("smoothly-display", { key: '1b7d2f7f188904a64027183c5b92ee46696a58b3', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'a1bab5c05633dedaa4577c3467c467e8434c9dff' }, index.h("smoothly-display", { key: '149cb3594ff7fce3804b249db2c0dc4eaab7c792', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-table-row-group", { key: '3f4cb98c9833ef2db6d620c19edb99664fceef81' }, index.h("smoothly-display", { key: '43da59e71204d7de7bb96dd2dca0f0e2f8ccb45c', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '8e9e3f780a49c66022c2d1a862fd4a045dccd27a', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '1cfc918002f3265ad9f41015d48c1f6b1239064f' }, index.h("smoothly-table-cell", { key: '42a745d0332754db7292bf73a7819477affcdc9a' }, index.h("smoothly-display", { key: '243ecea204945b53e1214e54451f6e1466c8da16', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '4e2a0cd1afd162c601598fafffd16bd603027b21' }, index.h("smoothly-display", { key: '8808efedafd877fbd37e86a48116e0c097c5f87b', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '15e33aa24d8a9b16cc769575f447906b6c857feb', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '2f7150bbf8788efdf3f952699ee0152314e50ff2' }, index.h("smoothly-table-cell", { key: '22a1cae330863e4d200242ca60ecc02e9d6d701b' }, index.h("smoothly-display", { key: '46af4c591ed61833edf8270a3897ce5523d926f3', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'd10025ffebe60be43a1be27f9f45256645601169' }, index.h("smoothly-display", { key: '6845240c041b29305eacfd40ac5a2d7c6e20111e', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '77894ef80c6e032306681e926d347c942850f73d', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '05ae54333b11f8fbf78a278b2bfba561e63ae0df' }, index.h("smoothly-display", { key: '2fc5952b6551f0fc8766e7152b9966258761bb91', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-table-expandable-row", { key: '32b4a1ff9f17e25e60c07ec20452f88af599bd1e' }, index.h("smoothly-table-cell", { key: '828d082dd015e349dc37ff317619cd2d56f3470e' }, index.h("smoothly-display", { key: '74267a4292dd9ead42f26028bdd76fff623a2693', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'cd67a1766268f2d56559e7a60ee01046a7fc7a18' }, index.h("smoothly-display", { key: '05431f09e4bebf6ff856a41e0862a38cbe6137f2', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '67b58fb40bb98c3936d28afc76543df5748de6aa', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'f422620e633abee78fb069729fb95537e5cb94b6' }, index.h("smoothly-table-cell", { key: 'a590a63eece73f6ba0401c273962b960a801f7c0' }, index.h("smoothly-display", { key: 'dc59556c574211873d979ce2b21eb6944bbc7ea6', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '2f9adf000972ce9ac3e5f9508d3e551e85da4f0f' }, index.h("smoothly-display", { key: '463b5ad3a144ffdea4e5815a9fdaef810579d668', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '24f174c46ca2b1d48a63ba9bb5af8aed4f677807', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '85c3a2b72afd6b4bd6ca5e049e5d998c7f452617' }, index.h("smoothly-display", { key: 'a3eab9df28f622cb7209d94998b9cd7092cf4094', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '2f519457811a80b7b046c751c7ca7ba809cc5a7e' }, index.h("smoothly-table-cell", { key: 'bce1e2896e6c67cc2f4ab6ea9a33da7f2ac6baaf' }, index.h("smoothly-display", { key: '0b399fa785d1c1584c2b5a0e2c62089cdc70b853', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'b11c1ccd8926cea12bab9b17e0213cd92448179b' }, index.h("smoothly-display", { key: 'f6f64669ddbb7929c4bf25434e2f1f01e7d28b8d', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '491217ba81f5f259eaf8bcf06f81a38c9786da5a', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'e42f9a96e747c23a31fec50e85be8cf7adb6b5f4' }, index.h("smoothly-table-cell", { key: 'fff1468ed1fa968decd385ccb4d567db558d5236' }, index.h("smoothly-display", { key: 'd69fed5921022a7f1d9ee02068e2310939d12820', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'c2f9064d078bd2acc1372b13570da65de9540a28' }, index.h("smoothly-display", { key: '74576b278170b1fbfd42bcb460e04e3b3c0c278d', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'cb82144ebf48347f1e787948b7e2741626281cac', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '1d0501694958227a3fc26b5a71e47ba8c0f67fa9' }, index.h("smoothly-table-row-group", { key: 'cbcd31378bc87715a07f242e5b1e088b67c1ce36' }, index.h("smoothly-display", { key: '7ca0a0f5b277448b1427451ffcee6df822b6c0a0', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: 'a46ecf07459ba03d79db21f31f0c7570f8247a49', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: 'a0e0f8583067c85c2cfcd753bf77048c00c23ca0' }, index.h("smoothly-table-row", { key: '18bc28ff57dacc6ab43fac17ac2918297188363b' }, index.h("fake-cell-wrapper", { key: 'f74e9f2cf3a66f177b65005629dbb156668980c3' }, index.h("smoothly-table-cell", { key: 'd51d0c9b75b6deaba1e0fa1761e857d01bd349fa' }, index.h("smoothly-display", { key: 'cf39b5b2a9b261b586348fd9d8739533b5a0d100', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'b3c63c3130812325d382ab8ae4eff274e1dcc2c2' }, index.h("smoothly-table-expandable-cell", { key: '3a2d4f1c077e846f9f03605e9b8ccd24eac32914' }, index.h("smoothly-display", { key: '37cf54b0a6eb2c3787a074d45d563ce2a379656a', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '6776c4a2b15dc519c1fd4fde9b0db19d939e713f', 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: 'b5157bc904e78c24500337f20b163a8dfda0de3d' }, index.h("smoothly-table-expandable-row", { key: '3f9f32a8424257aa9ab31fcf37dbd3684640a1f6' }, index.h("fake-cell-wrapper", { key: '40d9d8aef075ddd8b00348f75c3241cd70afa753', class: "span-2" }, index.h("smoothly-table-cell", { key: 'f74561780c1399d1b4122688cbe7a746b4fc6299', span: 2 }, index.h("smoothly-display", { key: 'a58fd01124a4c5768872c5be3d5f6454ff6a4db9', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '421930675caba973df071bd32fee2e86410eb3af', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-table-row-group", { key: '5f80049f47cfbb23e355c7f71344c32ca121260d' }, index.h("smoothly-display", { key: '9850d54767d961cc1bc2ab91fa87a438d762aa26', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '5f6e9c093aa50717f31abad9d69fb142ef762a26', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyTableDemoGroup.style = SmoothlyTableDemoGroupStyle0;
@@ -12312,7 +12312,7 @@ const SmoothlyTableDemoNested = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b1cfcc83bb5397065a1d777dfa0f9cf751e808be' }, index.h("smoothly-display", { key: 'bea669ea1d46ac3ab50e4033584e352de05fdb5c', type: "text", value: "Nested" }), index.h("smoothly-table", { key: 'dbd243f99ebeb3126748c56757295707c7c175c5', color: "primary", columns: 8 }, index.h("smoothly-table-head", { key: '4dd94aa5f1a331edc9b41aa95ab0e17f4586f045' }, index.h("smoothly-table-row", { key: '9d042acec171f925354f8f252ee659f8ac427891' }, index.h("smoothly-table-cell", { key: '279a2a141615a6ea84c55a86529a2132d20b2046' }, "Id"), index.h("smoothly-table-cell", { key: '1de3fe9c3024565213bc56a6c4cc19da422d6136' }, "Registered"), index.h("smoothly-table-cell", { key: 'f43b1fba655d56b5d67b24246b11b6a0c3180a4a' }, "Name"), index.h("smoothly-table-cell", { key: 'bfbed6445d92e2589e2880e963c2c1e5e1602499' }, "Age"), index.h("smoothly-table-cell", { key: '1c318f2accb7742ada0c08f57450ed0e95660bab' }, "Balance"), index.h("smoothly-table-cell", { key: 'ee1b188c175ad0aa13da3ece68cead04e4c37ca3' }, "EyeColor"), index.h("smoothly-table-cell", { key: '0ea22b942e50353848b8f780ed026a53ae7823b0' }, "Gender"), index.h("smoothly-table-cell", { key: 'b6e5fc234c096fc087747453bdd998dd4354c797' }, "Company"))), index.h("smoothly-table-body", { key: 'ad2a5aebba009a01c4a9e5d658df6d693a1052af' }, data.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.registered), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance), index.h("smoothly-table-cell", null, entry.eyeColor), index.h("smoothly-table-cell", null, entry.gender), index.h("smoothly-table-cell", null, entry.company))))), index.h("smoothly-table-foot", { key: 'af0f355726c11ba2b1b828bc734dd8640a352e3d' }, index.h("smoothly-table-row", { key: '73a5a5f6123bcf29225cab6c848c9e472770c18e' }, index.h("smoothly-table-cell", { key: '9f77de2a89b6dd6ad7a52774ce959fc53e8651e4' }, "Footer Cell"), index.h("smoothly-table-cell", { key: 'f68116ade3d4242b8d9e886e800bc465ca7ffda6' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '1743d7589bd492377468972dabf4deec6e20069a' }, index.h("smoothly-display", { key: '779c7a09c0c0468f62b42dcb19787f19188f3481', type: "text", value: "Nested" }), index.h("smoothly-table", { key: '35f9b6f470fa53a1d7ad6336c6de80c0a49b5aa0', color: "primary", columns: 8 }, index.h("smoothly-table-head", { key: '30f3cc7fc9e43d591701aa48673e85a50eea0039' }, index.h("smoothly-table-row", { key: 'be8c95740340f2aeedfd269b5aee1cbaca8d8fdc' }, index.h("smoothly-table-cell", { key: 'a66a2cfee429a827bf6edf8b46b132bff41219c5' }, "Id"), index.h("smoothly-table-cell", { key: 'fc52ddfecdf7f31a1fd24454ab7806fead292d97' }, "Registered"), index.h("smoothly-table-cell", { key: 'c59f5611769381273e862a38d30a6a7ae2ad75f5' }, "Name"), index.h("smoothly-table-cell", { key: '3c0453f5da50e9601e09841afa565c36e9e60b25' }, "Age"), index.h("smoothly-table-cell", { key: '92ec3aa300dbca0d2012bc7899fbc7e7c849bd4d' }, "Balance"), index.h("smoothly-table-cell", { key: '025e440cfd9de4b0a785d2e7502f281af4047518' }, "EyeColor"), index.h("smoothly-table-cell", { key: '0d138945bacee71cc2c558d2d8d5d2895283d080' }, "Gender"), index.h("smoothly-table-cell", { key: '8f233a5c7e1ff21618ba10d5aab626f91b45168a' }, "Company"))), index.h("smoothly-table-body", { key: '7fe751054d49b1e870665253493ef0745fd047b0' }, data.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.registered), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance), index.h("smoothly-table-cell", null, entry.eyeColor), index.h("smoothly-table-cell", null, entry.gender), index.h("smoothly-table-cell", null, entry.company))))), index.h("smoothly-table-foot", { key: 'e394c6fbe111c46b6f04955424a913cf54bdb28c' }, index.h("smoothly-table-row", { key: '79bba0ffedb84848d39eea8e3e40c154a74065c9' }, index.h("smoothly-table-cell", { key: '87248c277bb4bc20b961a575763470a8eaaee119' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '3f084a0097337a69cab73887f0130b98129ca0e4' }, "Footer Cell"))))));
     }
 };
 SmoothlyTableDemoNested.style = SmoothlyTableDemoNestedStyle0;
@@ -12327,7 +12327,7 @@ const SmoothlyTableDemoNestedInner = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'c0654deea2db537fe7c1487df0eb688bdf25e8a6' }, index.h("smoothly-table", { key: 'a3459d01e3831cf3e9fc979b18e88115bf81d300', columns: 4 }, index.h("smoothly-table-head", { key: 'faf10ce9172f295ec14fe0e6931ba752f9df7f49' }, index.h("smoothly-table-row", { key: 'ab5ef8bef62bba52edaa6226981b382f0e9f36f6' }, index.h("smoothly-table-cell", { key: '0da61e2692c0452333dea76b135ee20668e5009c' }, "Id"), index.h("smoothly-table-cell", { key: '8ebb662123689a08fb0839aca95fc8241c542aab' }, "Name"), index.h("smoothly-table-cell", { key: '9e00beeb61e6d93d47d1990dac907ef870738a4d' }, "Age"), index.h("smoothly-table-cell", { key: '0f013a590d49450f35e8f543e4534b7b4e16d26a' }, "Balance"))), index.h("smoothly-table-body", { key: 'c3beac792b1f7dfa4cdbe8f852d3d1181ffa090d' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance))))))));
+        return (index.h(index.Host, { key: '83636579f0ac1515fa2c1a912d2625dc98dc2870' }, index.h("smoothly-table", { key: '04bb54e0def08d95349b4924d480702632a310ad', columns: 4 }, index.h("smoothly-table-head", { key: '444c47c289856b5b6cff4c44954656d0a853fe95' }, index.h("smoothly-table-row", { key: '59044bea8b54871bded78091b98574358fc6022e' }, index.h("smoothly-table-cell", { key: 'd77d47360a9c5a317357f15a87a17e191f202e3f' }, "Id"), index.h("smoothly-table-cell", { key: '953bf1a655f4807131ebffa8ea7cec8571177e8e' }, "Name"), index.h("smoothly-table-cell", { key: '047211617101160584267f87d55a4c63c4a3c54d' }, "Age"), index.h("smoothly-table-cell", { key: '0c01220d3751fd8e895180860d59f756758baed8' }, "Balance"))), index.h("smoothly-table-body", { key: 'fc0cd184a5f603bf0b827cf1b0e307320085fdff' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance))))))));
     }
 };
 SmoothlyTableDemoNestedInner.style = SmoothlyTableDemoNestedInnerStyle0;
@@ -12340,7 +12340,7 @@ const SmoothlyTableDemoSimple = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4160a168ef196c8b45b43f09f8ae12537cd3ad89' }, index.h("smoothly-display", { key: '12db6fc178e7f7f5ac419003b71a24c38a77c29b', type: "text", value: "Simple" }), index.h("smoothly-table", { key: '21d36d1aa990d5294380638a4d8a71530f7ad947', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '2345482602d9f425bbc2a950ee69b5a3f7903b9b' }, index.h("smoothly-table-row", { key: '056ceafc16fb10788c272c19bf603ac6996bee49' }, index.h("smoothly-table-cell", { key: '11cb8ee8e2075de98a82b94fa1d69003d9bac260' }, "Breed"), index.h("smoothly-table-cell", { key: 'dfbdf9fcfe690da26a7cf9ca0baff65a45058093' }, "Coat"))), index.h("smoothly-table-body", { key: 'fd43d6ba0345d8784b8c9ec978cfe4e24686b60d' }, 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-expandable-row", { key: '363729f4f578bbf278a33f50dd6f102212bd0c59' }, index.h("div", { key: '192cc5b9770ad01445e01d4044798d8c8e4f17d5', slot: "detail" }, "Content", index.h("br", { key: '5ab7bf93f05a1d379077dcd18316773a9f8d8d27' }), "of", index.h("br", { key: '27196c3cf38a41451303673dea547a4c9989df43' }), "the", index.h("br", { key: '429a2b8bd42a852b291ae7cffb7895fe556521c6' }), "expandable", index.h("br", { key: 'ea5a837eb4ba48a3f3b17020d8005f843205c1cc' }), "row"), index.h("smoothly-table-cell", { key: '114f74729aa76bed62c2c2afbd064364649e622a' }, "Cell1 in expandable row"), index.h("smoothly-table-cell", { key: '4293fcd40caf821b226104e23989b6903ece84de' }, "Cell2 in expandable row")), index.h("smoothly-table-row", { key: '4c45e0a6e39e107e39dd70bb383e9568c425d9cf' }, index.h("smoothly-table-cell", { key: '0f8778b5b0dd9d61a409ab8da0b76cbfa72cc95e' }, "Cell5"), index.h("smoothly-table-expandable-cell", { key: '0293a16c0179cffa94efa38d225e6c925ad273ab' }, "Expandable Cell", index.h("div", { key: '5a7d691c14ffe390bab6385cefcad5e370eee625', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-table-row", { key: 'ec09b484fe4c56a016f2d46fd6f18f9d2e8e93bf' }, index.h("smoothly-table-expandable-cell", { key: '4b06350e86abb3aaf4bb03a18a226a4fc6288be4' }, "Expandable Cell 1", index.h("div", { key: 'fd36b974249796bde27c44dfaed50ab5fa1507c6', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-table-expandable-cell", { key: 'c3c818355805831308cc0d6d054f332d95b20613' }, "Expandable Cell 2", index.h("div", { key: '5e4a1d4d7d37f4f42544b33ff6725d6d02194fc0', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-table-foot", { key: '8ecfbcb2a29dc1ea3697cacfe037fd40e03dc4cc' }, index.h("smoothly-table-row", { key: '77190bca600068af282bce6e81b354f5e65040db' }, index.h("smoothly-table-cell", { key: '7f20ab199ccf7d1c0e2e9e9fb646262d9c0b5000' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '3aeb7280536957ac5cf6b49c5b0cd306e2d7e71c' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '1e86196497b4efcd12ce83e2029e6405bd124003' }, index.h("smoothly-display", { key: 'fdeba88a51dfa10bdece176d5376a0be91fdd049', type: "text", value: "Simple" }), index.h("smoothly-table", { key: '4cf8352df796c51cb0885c5d6e8fddd8a629dddf', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '351cabf09c280eb068004a2f6a4d2fa2d4b59d8b' }, index.h("smoothly-table-row", { key: 'a59bbb50fa9833bbed66780e2e100404558b0fda' }, index.h("smoothly-table-cell", { key: 'ae807fbef99679ba195277ce450465eeb3b4cda6' }, "Breed"), index.h("smoothly-table-cell", { key: '1d4bf3137688e4ad1ea55eab3a347b0fd4dba1fc' }, "Coat"))), index.h("smoothly-table-body", { key: '8f2d969bc13ee4f3e8fd66eda1561ef5e2acd74c' }, 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-expandable-row", { key: 'ce71eef208830a266b947cc06406abc16bd0d707' }, index.h("div", { key: 'f73b597444e74b3f08a1ecdf0fa97a3a7652f09f', slot: "detail" }, "Content", index.h("br", { key: '064db5c92f57b5409cd48ec77bbffc207ce9c3f4' }), "of", index.h("br", { key: 'b84db2dddd92c7a5d4a0da02f39a14a2e77f4d27' }), "the", index.h("br", { key: '453ce193951a32c0913225210095c490f975eaba' }), "expandable", index.h("br", { key: 'd3238f2c58cbae7b44a2430338437edbfdc2883c' }), "row"), index.h("smoothly-table-cell", { key: 'be1db189448b8296e525ccde250acceb8da69ba9' }, "Cell1 in expandable row"), index.h("smoothly-table-cell", { key: 'e036a536d5e2adb960fb9a8a48a053f59384a1c9' }, "Cell2 in expandable row")), index.h("smoothly-table-row", { key: '02d3d0a32b56cff3d08bb31bbc27e03d406023f0' }, index.h("smoothly-table-cell", { key: '1781f0b418317895b3e016a68622d6286ef2f78c' }, "Cell5"), index.h("smoothly-table-expandable-cell", { key: 'c193285c0ae1286aa8b4a23214078fdf9240fe20' }, "Expandable Cell", index.h("div", { key: '24b11089104ccacfddf9963e9a1a49921ea225d5', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-table-row", { key: '9e7a977a926a505c2eee8fb2a18edf6a522de93e' }, index.h("smoothly-table-expandable-cell", { key: '46cb2c15163d00214ea8abba6591890735fe9607' }, "Expandable Cell 1", index.h("div", { key: '13f57a5b68bb7f113712675789ae25904df76474', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-table-expandable-cell", { key: 'dca3f34766b72bc6f7524739045ab4f915be0a98' }, "Expandable Cell 2", index.h("div", { key: 'c10dd964b3286c3d19cc774393f7384b4a0c02dc', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-table-foot", { key: '919b4e73a0622d50e98a02fb7cc8ac942b306c94' }, index.h("smoothly-table-row", { key: '35bb5238eca0e7cdbc877053a64f104815c62fb7' }, index.h("smoothly-table-cell", { key: 'bbaba511bd645d1801f6d8130ddbfaaca95128e1' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '3f4a385d7a39c5cdb02b43d397205d92d2857d24' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -12442,7 +12442,7 @@ const SmoothlyTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '4f1000fd7561413101983a7441ff34f87fbff049', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: '4641a3bc646176b9f59ec6a9d0f138c0aaaef38e', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '5c5e5844812ec4823c21326d6ed6cfbe0ba7d641' })), index.h("div", { key: '1f985dbde06079773c72da68c6e112d14a725551', class: "detail" }, index.h("slot", { key: '9bbec1f675f4875276b42248bf2763a5dd211326', name: "detail" }))));
+        return (index.h(index.Host, { key: 'd5b6720e262df19e8c0a465c046cc581e6b76d5c', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: 'a984cc509f2a176da5f00fc95410b3f9466ff962', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '90fcd6fb228a36473d83bc1c46c4313cf983932c' })), index.h("div", { key: '7919ac6b9cf97e478f01029da270a510ca754d46', class: "detail" }, index.h("slot", { key: 'bbbd37aa4f47c109ff917ab32d15e22bd781b7be', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12450,7 +12450,7 @@ const SmoothlyTableExpandableCell = class {
 };
 SmoothlyTableExpandableCell.style = SmoothlyTableExpandableCellStyle0;
-const styleCss$g = ".sc-smoothly-table-expandable-row-h{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto 0fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h.sc-smoothly-table-expandable-row-s>*{cursor:pointer}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:not(:last-child){background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground))}[open].sc-smoothly-table-expandable-row-h{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));grid-template-rows:auto 1fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border)), 0px 0px 1px rgb(var(--smoothly-table-border)) inset;grid-template-rows:0fr 1fr}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{grid-column:1/-1;cursor:default;position:relative;overflow:hidden;background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child){position:relative}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{rotate:45deg}[open].sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{overflow:visible;padding:0.3rem 1.1rem}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
+const styleCss$g = ".sc-smoothly-table-expandable-row-h{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto 0fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h.sc-smoothly-table-expandable-row-s>*{cursor:pointer}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:not(:last-child){background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground))}[open].sc-smoothly-table-expandable-row-h{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));grid-template-rows:auto 1fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border)), 0px 0px 1px rgb(var(--smoothly-table-border)) inset;grid-template-rows:0fr 1fr}.sc-smoothly-table-expandable-row-h:not([open])>div.detail.sc-smoothly-table-expandable-row{display:none}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{grid-column:1/-1;cursor:default;position:relative;overflow:hidden;background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child){position:relative}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{rotate:45deg}[open].sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{overflow:visible;padding:0.3rem 1.1rem}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
 const SmoothlyTableExpandableRowStyle0 = styleCss$g;
 const SmoothlyTableExpandableRow = class {
@@ -12466,7 +12466,7 @@ const SmoothlyTableExpandableRow = class {
         this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '9479deddbc9ed879366caffff26c426f9f438c56', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '67e5f0bc1338d700b42e568917b4ebf5858efc5a' }), index.h("div", { key: '2bd03a31ebe086abd6ea476eff35d378ae0a4d6a', ref: e => (this.div = e) }, index.h("slot", { key: '74086f954d58fe3e9d3969f10f08e1f2e2efef48', name: "detail" }))));
+        return (index.h(index.Host, { key: '5a03872a2612d5dc038fd10e1dd3992dd8449d52', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: 'c3bf948bb8a2a616269d1b4f446b3ee6db0a1288' }), index.h("div", { key: '39e4adac2059bd257187980f3563e91aba38c8c0', class: "detail", ref: e => (this.div = e) }, index.h("slot", { key: 'caf6ea84042033799aae986ff11a56d1db66d5ed', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12482,7 +12482,7 @@ const SmoothlyTableFillerRow = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-table-row", { key: '669bd80f7d70aeea18b844f5a638befadddc9962' }, index.h("smoothly-table-cell", { key: 'e4ba2e8247ed5786b69f2f841b7af91c4221f841' }, index.h("slot", { key: '8f87537817111fdee4b82d8a33e83346afd59e78' }))));
+        return (index.h("smoothly-table-row", { key: '92fd87de4da585ef58f350ab082895c4b958a156' }, index.h("smoothly-table-cell", { key: '49989c2461d4c057c81c4e881ae4d10f8aed5f7c' }, index.h("slot", { key: 'c4be1ef40a3106786e2d37528584a515dfec2264' }))));
     }
 };
 SmoothlyTableFillerRow.style = SmoothlyTableFillerRowStyle0;
@@ -12495,7 +12495,7 @@ const SmoothlyTableFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'd62f9ff352e723dd96a9dca0b9ed1dc7e3da35d4' }, index.h("slot", { key: '36ebf16d849edd47d09bf8826602a2d6e3286f05' })));
+        return (index.h(index.Host, { key: '797b95aea26a73ad238c0b44b431db7c9f83127d' }, index.h("slot", { key: '798ace60c404e7d2b7111188ea3ad7a575e86f89' })));
     }
 };
 SmoothlyTableFoot.style = SmoothlyTableFootStyle0;
@@ -12526,7 +12526,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: 'f8b99f1629ab98316368f39dbae06c562c6edf37', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '29259680e8b93ecf2d780e608a8fd3036d9641bd' })));
+        return (index.h(index.Host, { key: '1d91e59f55039d50572b9b649aa6b48b2528052e', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: 'c733cae9e99665e62441ae8723331849db2394ca' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -12550,7 +12550,7 @@ const SmoothlyTableRow = class {
                 event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: 'b608313036bb6e17c3b4b60fdadf47e5d817d489' }, index.h("slot", { key: '9873b97f168b210f50924a06a3a8923da052ffe1' })));
+        return (index.h(index.Host, { key: '710fb98629cc8100ea43178387a873aae6cd27b1' }, index.h("slot", { key: 'd9453ee6fab901e26500f3c423edbab1d0b479ed' })));
     }
 };
 SmoothlyTableRow.style = SmoothlyTableRowStyle0;
@@ -12570,7 +12570,7 @@ const SmoothlyTableRowGroup = class {
         this.smoothlyTableRowGroupChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '91c803790cbbb1d1f98138fae837f4797a8e543f' }, index.h("div", { key: 'fcfabf942cd18c6647d00bece21412e768656454', onClick: () => this.clickHandler() }, index.h("div", { key: '3547051ef9a8900a4982b9e0592b3501ba9d46cc' }, index.h("slot", { key: '9613f0b10c3b589ac2d9c7e73cf09d155e162eaf', name: "start" })), index.h("div", { key: '7c431d32cdd963bf166dc44693a239872fff942e' }, index.h("slot", { key: '7f9992bf59d226da834e2015f1e9efd574a72aba', name: "end" }))), index.h("div", { key: '1aacd15711f519620ce5ec07691911bfe650d5e0' }, index.h("slot", { key: 'd40ae903a11106a79fd96efe3f31be571b3270e1' }))));
+        return (index.h(index.Host, { key: '234c5c04d4aa4ca110a3895227132669766abf22' }, index.h("div", { key: '804e459a3aab21755bc7f3f6a3dfd9aafa4d13f4', onClick: () => this.clickHandler() }, index.h("div", { key: '29cd5e3f57b697745a9a2ac77dffd01b10e8bfaf' }, index.h("slot", { key: 'd3bd27d6147985e3f19b15e4e9a4b02b3da47399', name: "start" })), index.h("div", { key: 'f6b0f6b8d3103bc85818380ab9c11b4f629d1c38' }, index.h("slot", { key: '85c4fe961a4dbc4ea4db73392ba26e549c3f7f08', name: "end" }))), index.h("div", { key: '23547483350de1447bf35f4dc6d6c057cd153b93' }, index.h("slot", { key: 'f34b550b48eced496d6bdd92bf28f6bacda47ae7' }))));
     }
 };
 SmoothlyTableRowGroup.style = SmoothlyTableRowGroupStyle0;
@@ -12603,7 +12603,7 @@ const SmoothlyTabs = class {
             old.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'baeff19415ff5426e798b488041a2948cc8c9303', class: { "hide-tabs": this.tabs == "multiple" && this.tabElements.length == 1 }, style: { "--tabs": `${this.tabElements.length}` } }, index.h("slot", { key: 'f706416adcbff5999340466806f938308643963d' })));
+        return (index.h(index.Host, { key: '3e2a5060c408fedf1e4a02d2ee64a12b361892ca', class: { "hide-tabs": this.tabs == "multiple" && this.tabElements.length == 1 }, style: { "--tabs": `${this.tabElements.length}` } }, index.h("slot", { key: 'bac26ec71ef6b24e54f527aa37ee1bf7fbf48567' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12621,7 +12621,7 @@ const SmoothlyTabsDemo = class {
         this.extraTab = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'f0b8e3d8ccd4f161beb9464ac4f44c4a8f423f6a' }, index.h("smoothly-tabs", { key: '60a0f8cdcef3fa829ce5b744882759cd5d10dc51', tabs: "multiple" }, index.h("smoothly-tab", { key: 'a09669d6f67e49af1e4484ac8bdb6dcbe82ac5c2', label: "Single Tab", open: true }, index.h("strong", { key: '386f0a6b23532753c16f25d21d90b92b9f7d559d' }, "Single Tab content here."), " If only one tab is available setting ", index.h("code", { key: 'a6abc1cb869d182f93e9c551cb437a51cfd40924' }, "tabs"), " to", " ", index.h("code", { key: '013e2add2798ca9bb6c521af6f2d5439023d397a' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly.", !this.extraTab && (index.h("div", { key: '61b05badfbf979cee4130a5895bb42051b98e4bd' }, index.h("smoothly-button", { key: '2b9951d31501f6c2fec35a10ff2aa7aa547ed904', color: "primary", onClick: () => (this.extraTab = true) }, "Click to add extra tab")))), this.extraTab && (index.h("smoothly-tab", { key: '10c9ccc57c7a157dd5d88ded68a18c9ba2bd82ce', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), index.h("smoothly-tabs", { key: 'c6a3e02c61d207a63baa6aab315a4963d29000f2' }, index.h("smoothly-tab", { key: '6f27b753d78d46286806ddc9b034a154bc0cc42f', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '52718ac6518275d5a0e9fbeb5d29e2e7ab1485ab', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: '2007136c4d3a01a8e8ff203046961d1fd224f001', label: "test3" }, "this is a test message again!"))));
+        return (index.h(index.Host, { key: 'ec145eb00524cda91498766b9e9ae7ca715bc494' }, index.h("smoothly-tabs", { key: '70c47302b686767345d82bf8f011847cf75efad4', tabs: "multiple" }, index.h("smoothly-tab", { key: '83426f550c4539852669d3577b8573be151dad32', label: "Single Tab", open: true }, index.h("strong", { key: 'd89e2642d9087f71f46fffda20d3e8ef092c3ade' }, "Single Tab content here."), " If only one tab is available setting ", index.h("code", { key: '8a1a80fafe9780cacfe835f6875f8a2763086d93' }, "tabs"), " to", " ", index.h("code", { key: '89aec94fd33241f34d7d34d465452c3dbfae9f0b' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly.", !this.extraTab && (index.h("div", { key: 'efedaf74ed8f139dd4b00ee29d745b0ce00cc20a' }, index.h("smoothly-button", { key: 'c4a0b3d4fda1a72ad38a2f38afddfe010ddfd67a', color: "primary", onClick: () => (this.extraTab = true) }, "Click to add extra tab")))), this.extraTab && (index.h("smoothly-tab", { key: '239808e72e00bac39bd2c7684bce82dcad374765', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), index.h("smoothly-tabs", { key: 'f56e37f6c69e9a290cfa392626ee62a1e4a7ca68' }, index.h("smoothly-tab", { key: '608024b94967df590fbd45fbb93b8c0bd28e1385', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: 'b7039d33a48fe68268d192d3a4486eb65e500ee2', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: '412e749f9ed6625d7ba22ed9378c60ee52d7b70b', label: "test3" }, "this is a test message again!"))));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
@@ -12635,7 +12635,7 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'fa3fcf5c0db4ea68505dd4a91ef67867a79af95d' }, 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: 'f0ac1160979284b3d8445e2d0eec65710221cf8d' }, 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;
@@ -12687,7 +12687,7 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c6cb7e07d179881b5c7ea01ab5fad117333c7924' }, index.h("h2", { key: '84d2225eb190763579f2e26e6bc0e909b20d7e69' }, "Theme"), index.h("smoothly-theme-picker", { key: '5e92995da49847d47f63e566975b7025b8af2e43' }, index.h("smoothly-item", { key: 'bfd982aa4a72d08b1e0f5ada079f181eaad405e6', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '2782d40d30d9127f2412468fcdf6e6d2e5916381', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '7b6a503af2810acf328adbee327513989a8cda95', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '805852f34c258b72dac8f98e31dfb63e7e9c794a', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '40294e04abc1d52b3a49117d212ede1b49a3445b', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: 'a6901786da8b1ee5d7483faf83bdbf3fab619d6f', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '06b203f64a7fd490540b85551ca776dfbc8fb13c', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'd7f641b6379b62b07604a8414c29e3c849c74f95', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '178735bb029460772b022ebfd0e498c85dc81e1e', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '6c0adc3df188c6c0710ce74008843e496ea6c325' }, index.h("smoothly-theme-colors", { key: 'aff57e9c718ddde147f7ab7ad70a81a07a0c7b6e' }), index.h("smoothly-theme-guide", { key: '17c985e6cd4c1c3e87b2a015ec1a34b51a850305' })), index.h("smoothly-button", { key: '4859f1550db90aa5dd37a2d48e5cfe77aa0086df', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '808ca46948dbabbf1e6c435a7bab364895affd13', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'b39a6fe0f311230c5cef50e03f7ca5fa56212d9c', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '4aeb31316b4b9d697cf849b96849aa3525bcfffb', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: '60a6fdfc96dc0f5c716a5b879f04e8bfa7aa7955' }, index.h("h2", { key: '800ac25c4a2aec861b21255420aa696d016f0dc4' }, "Theme"), index.h("smoothly-theme-picker", { key: '081a0359c39e431bd92c336c5e7b4112027fe940' }, index.h("smoothly-item", { key: 'e1d332a1ace18688c085e2d3aacd6480d223300f', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: 'd183e44eca2b257bcc7edf7b4491673ca871cd91', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: 'f5677315f1803e5002974fb86b683cf4199abb74', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '18ed8f9181da013d2d4de75393a86a22e567bb72', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '480a5028c0aba00a5caa1cd9feb671857e22d5fb', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '0686eca3757ea52987a4f8e9b70aec69e43437ea', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '945161921608f664e3283a6bce008d59b8115282', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'a881c566e1cb7ae4a01f0d617a13109643b05585', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '3834fec43bc18e1368a1bc952c5ac83ffbfa4807', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '598ce87600fd7a66e1d2351311fd01773d6f8451' }, index.h("smoothly-theme-colors", { key: '0b982bc4d771f98c37111782fa61056bb64a5bca' }), index.h("smoothly-theme-guide", { key: 'f6ef76f863436b20b33653174ad9e98151e31a6f' })), index.h("smoothly-button", { key: '97743bff836025c1eef5d152b06aca450b585a5a', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: 'b26f5dcdd936b876cf430e2ab109458a405b1da9', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: '9850c727cd8c7d74187e3a99253e3b6637a02f62', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '41efeb245770de7407eb14dacfd686ca2a691076', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -12701,14 +12701,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index.h("smoothly-display", { key: 'd5def8cc615917e2d7762e22296b6aa67680bd78' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index.h("br", { key: '97ade6009bdd6a90f47eaa801b413cedb6ea174f' }),
-            index.h("smoothly-display", { key: '869f59736dd90617038de1320219e81b18e5e44c' }, "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: '079c331d0e2f7da44a3cfd60bcdaa2ba93da9ff7' }),
-            index.h("smoothly-display", { key: 'e0fa54384263fce4d365c13cab5b1170f1daba5d' }, "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: '702641981ae80b9fbcd4d76ba0244193ef425e09' }),
-            index.h("smoothly-display", { key: '5140cbc1b6e52bf273d747e7d9f584f8006aa501' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index.h("br", { key: '9e25bf7bfc02d655c2e2918f30ebf2ec138dba08' }),
+            index.h("smoothly-display", { key: '95949623ac00a28b6949a8d0cf53b3c808dca2b4' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: 'b08743d1cdc7ce73ee54cfbedb2336bd39e2291a' }),
+            index.h("smoothly-display", { key: '8fa5a57c02fe12e0132c77f05a3ae9fefb569a53' }, "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: 'eedbe73d19d72c38175956118666d0dd4b3101d2' }),
+            index.h("smoothly-display", { key: '570dec0a6a28b70f4a69e3e247607db386c57117' }, "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: 'b0244a42b0230846843cabf9411c6ff1ca128440' }),
+            index.h("smoothly-display", { key: '8e9705544b119e7fe073420ba31f49c5c32ab2a8' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: '45ddb1ca086bae44b11c8124836afbc891c4875d' }),
         ];
     }
 };
@@ -12723,11 +12723,11 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: '797098864c8e731601bac823f5beae0a033395e9' }, index.h("smoothly-input-select", { key: '07b3829ae764749d6022d7ccbd756894e30d9d94', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '5a994ebf276306118d92bb477b5dcf04cffd0614' }, index.h("smoothly-input-select", { key: '98ef8a2da6f5b00f60367874705a8836ba7176cf', 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: '206a6ab21d40f6826171cd6a1eb9df12a576bdfe', slot: "label" }, "Select theme"), index.h("slot", { key: '16afd07b7c033891e17b5f17cbd48916708edc53' }))));
+            } }, index.h("label", { key: 'de252bb3867e0f59efb66136b6fc7850805bdfea', slot: "label" }, "Select theme"), index.h("slot", { key: 'f30571604c2c60256ef3f4e4ee57fbf394d7af63' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -12751,7 +12751,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index.h(index.Host, { key: '6b126167f4e51e4e9c0981c3b4f4c9483e44d47e' }, index.h("button", { key: 'fb4d0ad185bb171ef0b42aea38a50b48511122a9', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: '5be759c24e81ac328c93b374b08a2f736b8e3791', 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: 'd8948989b99fab7341e46cbc4398c6889f41602d' }, index.h("button", { key: 'e9dd959f7573c9da2c0fd6279304b239ad06b9fe', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: '6be530b9951c2ddc8806d24adcd3f76602919e46', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -12764,7 +12764,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '64d65f2ee5ed516e63264d26db3456f73b9c6331' }, index.h("h4", { key: 'c409d5b69a391b3ff0a12da6bcfa7ea2f77c4339' }, "Toggle switches"), index.h("div", { key: '4b45e077f05c7498d55e6810133072aedaedfbdf' }, index.h("p", { key: 'db1f36a76edbc78cf99cd4df4c48fc51843ad3ea' }, "Checkmark"), index.h("span", { key: '00abcde30020c0b5d4f759c4268987b0add5afcd' }, index.h("p", { key: 'e760075480f2550d9751e4831baa9e6af69656cd' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '096c2f537ff710255e436778fcc4bcb61ffd0018', disabled: false, size: "tiny" })), index.h("span", { key: '9aed14a6b02b5d97758290c8495477b2bf8177e6' }, index.h("p", { key: '2e03a9d69cb02223fb924de0a776d4fa4a765e35' }, "Small"), index.h("smoothly-toggle-switch", { key: '8d2c073010357c33c672c3e7da1637c79ca98147', disabled: false, size: "small" })), index.h("span", { key: 'b49e50e83baf36ff0f1f96c80baadf18a0a6d853' }, index.h("p", { key: '7806781a6c3c0d7aed53b52542fcb33a8719758b' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'd7ca3708a9d73962c19dc0827095c45a5aece9ab', disabled: false })), index.h("span", { key: '69d4c4a6d939119d7ceb27a54fb2b20633036423' }, index.h("p", { key: '76c9a8367703853d7573d2699f1a726e097badbe' }, "Large"), index.h("smoothly-toggle-switch", { key: 'dc92f8ae4404b9fe4fa27fec647d5153e8a9908f', disabled: false, size: "large" })), index.h("p", { key: 'b778e2e7b4af23485ce7805b33a552a2a8f48a6c' }, "Colors checkmark"), index.h("span", { key: '001263dffb778cbe8cacdd3a8035024cb29e5b77' }, index.h("p", { key: 'd31d0c6c746919a70802dcffab365c83d0389b03' }, "Danger"), index.h("smoothly-toggle-switch", { key: '7b8767302b9cc27e6ace0541200f54074bb23d8f', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '21276af4e73022cda210e63d91cf722dd26c34f1' }, index.h("p", { key: '49e291d0c969c521f86b6810f222b933022d5cce' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'f11f9b1d60e05bd70f4a47fdee1827368aba4a00', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'a3731c8dce346c3dc4e9a7247d2a5d545dfaa527' }, index.h("p", { key: 'a805c7788843d34897b765ef29374fc644b34c4d' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '3446001233269011daf368f0cad9df4a497b47b7', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'e84abf650d03f54523a3ae2b6209e3cebd4fcf8e' }), index.h("p", { key: 'd90de75f3e41659bac7ac35592fc962bb1ad3936' }, "Colors no checkmark"), index.h("span", { key: '517697478057731d040086f99f2a14f946bdf74c' }, index.h("p", { key: '4f690df01c2cb009f7f4d4fe27816ad2c15c8ced' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'c7d57f387bbc5a610721d7ce6df6a53d0227008c', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '3e6a4e13f0ce183b49f4318713048a0d174d858b' }, index.h("p", { key: '7ce09e9094f19eb5ee64c4866573472245fa8ec3' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'af107a283ed20b3413e930e092383a77d1d0ef08', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '5bc62d8e1b96c79716eacedd5d4771ce62eae982' }, index.h("p", { key: 'e4e90e5342573f376f9817b8a114bc5e93e3c485' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'c15b01e1ecb3750bf917f673e710feea15af2b35', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index.h(index.Host, { key: '7244c0775661c5251de41f4cb585558e982e9cdc' }, index.h("h4", { key: 'c108f6c96f41a583cecbfa4f802e09bf5b29bfa6' }, "Toggle switches"), index.h("div", { key: 'd2392feab387636df6b679d66193a1e653730b9c' }, index.h("p", { key: '3a7183bc8158e48e87f85e4f6cdc9dc4ad73d439' }, "Checkmark"), index.h("span", { key: 'edd3411d6f0b9fb5f326d50c3ba5e65d7c9d3f46' }, index.h("p", { key: '3fb9bb4ecb81e5d50e123f2202a391ebebd8bcea' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '40c66f8203c5d5334cb1e14f4c37df29d9cf0485', disabled: false, size: "tiny" })), index.h("span", { key: '4391169b01717b9afd58f80528ce6f07a2f13090' }, index.h("p", { key: 'dc9f64b2bd7275033e17d6b9fb7065c6bb9b94df' }, "Small"), index.h("smoothly-toggle-switch", { key: 'ed4899bc0923bcdbfbbdbdb9b6a2cc089bd364de', disabled: false, size: "small" })), index.h("span", { key: 'd31a484739a59c7fcce0edd573e4291efeca44e4' }, index.h("p", { key: '4e1497c248ab56f2c3bc3576686b2ddd7bb7a782' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'd64bcfb068ad854639ecccc8a7e697650c54521f', disabled: false })), index.h("span", { key: '19a06462de61ee2836f1fa30114e46f576b6edf4' }, index.h("p", { key: 'ae25ea9d14593a21ae90f5badb1249725dd3ff78' }, "Large"), index.h("smoothly-toggle-switch", { key: '09d47e0964233a311f5bf4cb8b9c0dbcd04ef958', disabled: false, size: "large" })), index.h("p", { key: '34095ddde101a0d5ffd98589cf526f4b57caf572' }, "Colors checkmark"), index.h("span", { key: '76572774a4e9e14b384c4b40444ab04f46b833a9' }, index.h("p", { key: '2e5ad34f22b142fc19586f43a778851f98dfda8c' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'cf026c289dbfcf230049290516e9ab4f5274ba45', color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'cd1e858211f54ba90168398f8dc6dc9433778815' }, index.h("p", { key: 'b2b51c00108c1ae9396eb9b1e5aeee9223faecde' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '66fbbd81fe1e7ea9e4bdd52c374e1644d634d195', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'a6de47e35e6ff653a0efa7ca7b7245abb44e32ac' }, index.h("p", { key: '89ab7f161e45ea01edee1fa4c9eb96332fd18043' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '82f993af3797d0754e0cad6a8374c78d98ca058c', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'dfce3bdd11950ef7c97eb423f9bc08346e0e1cfc' }), index.h("p", { key: '25ebe0b63abaeb37895a8286ec5a4203d665da99' }, "Colors no checkmark"), index.h("span", { key: '111622bbb1ea6d5efd300b515a066d19d6dd9dbd' }, index.h("p", { key: 'd3f80fe3a765aad09ca735795ccd1f66e459bf44' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'b19cb7d3f582e0423442adde9b21218e73d45837', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'dfb1fe67e596f44dde4c07494011dc6b8009a961' }, index.h("p", { key: 'a0f15473ffc3f2d33dee7726c0493ddd192fa39e' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '1e7cbda870f2816244dac14c7c65a99367feddb3', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '4fa92a8eee14883f9fedcf543ae87cbda4de8922' }, index.h("p", { key: 'b69a2307ad3c726dc6f602788c490fe81e0299e0' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'd1dc476caab4529bb728338d7d83e8dc7f7b6bca', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -12795,7 +12795,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: 'a6b8002b54f35d0000548a9e1f658b3225a5db4c', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'f045e36a7be08974eca7c771479fc71b9b9d751e' })));
+                result = (index.h("button", { key: '6153b3befa2edf972b4fe3bf0844d3a6a456e9cc', disabled: this.disabled, name: this.name }, index.h("slot", { key: '2920b8301a6e36851e52b2b7884338657a326aff' })));
                 break;
         }
         return result;