npm - smoothly - Versions diffs - 1.1.1-alpha.113 → 1.1.1-alpha.114 - Mend

smoothly 1.1.1-alpha.113 → 1.1.1-alpha.114

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 (475) hide show

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

@@ -1732,7 +1732,7 @@ const SmoothlyButtonConfirm = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '67899369f1f2600a1b5786dd68a02368e01ecb4a', warning: this.clickTimeStamp }, index.h("smoothly-button", { key: 'd8a75a418d03f546f00827fff56ff21951d3481f', 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: 'db4572fce5a3109e22268a7a085203e3000c3727', name: "alert-outline", fill: "solid", color: "warning", size: "tiny" })), index.h("smoothly-button", { key: 'ccee4aa4f0d61ea69337f073fc19533932ec912d', 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: '7883b9240e71edfa1027e2ed294eb9747326727e' }))));
+        return (index.h(index.Host, { key: '853f83d9dac3b1b915a9e7b8031723a0c60253e8', warning: this.clickTimeStamp }, index.h("smoothly-button", { key: '1f02d56984f82d0015c4900eff228acb702b43eb', 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: '94becfb1ce9c81ee7ec93215a94800b9c8f9e808', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), index.h("smoothly-button", { key: '877401aeffa5a37391c0191f74a04b7e9dab216e', 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: 'd58ab0b5b6036a0e5ba9eb1de7190468041177f5' }))));
     }
 };
 SmoothlyButtonConfirm.style = SmoothlyButtonConfirmStyle0;
@@ -1747,8 +1747,8 @@ const SmoothlyButtonDemo = class {
     render() {
         return [
             index.h("h2", { key: '92251f8714b3eb4bcc3ae5385216ff901bf961f8' }, "Buttons"),
-            index.h("section", { key: '9dc20ca54b202710b5f2b4414f263b4ac7e7dd18' }, index.h("h4", { key: '1568a3ccfe042296393995026c47a60f5884756e' }, "Confirm button (two clicks)"), index.h("div", { key: '5a55c5b44219e740c1b045062d1ba079ccc97ee2' }, index.h("smoothly-button-confirm", { key: '9cabb2b6b024f7b3e893b169d2ae3cb1b307d2af', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), index.h("smoothly-button-confirm", { key: '53ca202a60091b1710425e788b76471845609bf3', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, index.h("smoothly-icon", { key: '4dd4bef29741e27f5f9e7368ab04909ab5d46aa3', name: "checkmark-outline", size: "small" }))), index.h("h4", { key: 'a13589553d353bc90ce88b6f08cb2a089bb73ac1' }, "Toggle button"), index.h("smoothly-toggle", { key: 'ee6ac2c3d555b19767dcf929ad4a4aa8799c8acd' }, index.h("smoothly-icon", { key: '18f97bcd0dd532ce2c10d6eb51c433b0a31a0f64', name: "card", fill: "solid", slot: "icon-slot" })), index.h("smoothly-toggle", { key: '6c1b17efa9542f8a34fe2d4114d1f5f4e6f4a4d9' }, index.h("smoothly-icon", { key: '65bd6aaf07943a7cb1b2d320728ac2a6eecbd98c', name: "briefcase", slot: "icon-slot" })), index.h("smoothly-toggle", { key: '6ee3ea44736209a16ce79cf6d80875cf3bd5fad4' }, index.h("smoothly-icon", { key: 'ab5f07ba514270dfe52d82f6cd584a59c0a9c9e2', name: "airplane", slot: "icon-slot" })), index.h("smoothly-toggle-switch-demo", { key: 'a3e73296d52609effd6832e3942932cacacb78ff' }), index.h("h4", { key: 'ba4f7dab2c608205181afbbd153b09cd43c1f2be' }, "Links with icons"), index.h("smoothly-button", { key: '6045edbc13183aafb7f9a3cdc1c5f0e9b0ac5f18', type: "link" }, index.h("smoothly-icon", { key: '0e65ee98c3babf174257cad5148627791885f4cd', name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { key: '4d6ea6cc412b2063957575705558ab176e3b5c2f', type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { key: '0806fa170108f3498ec0a286463016092bee06a1', name: "call", slot: "start" }), index.h("a", { key: '49aafe093221773a062189b24795f687f1e5588c', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'c8a74f4972a909dcc9878f3ac41de3d12849029c', link: "https://google.com", type: "link" }, index.h("smoothly-icon", { key: 'e1afa1ae7c90f65b09afd873bbc3987211c21970', name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", { key: '689b4ec85d5289d6f10ffcd7e548ea7883358783' }, "Size and Color test"), index.h("smoothly-button", { key: 'ad9ce3a22729d2996974e5bf6566a347742804ca', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { key: 'db1c877be7e4eba4a4576c898d00241f842d0be2', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { key: 'da60acce4657d7f546abe4fe87b0dc795817eea9', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { key: '6e6d1e7f9e867cc53411a476c4515af734b07787', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { key: '785f12da03b553830974517ecf7b57767f6a03fe', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { key: '26087720e0ed5a43b52d800a4cdea00fd04125d7', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { key: '32e92236f0586f1565641d4e51aa13aa0af21081', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { key: '2ad4abaed913d52a736888a295250bb16b646eea', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { key: '8e504314d18628ab130d0b187398568b9d2760d8', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", { key: '9bcd74281336358979377252336176c397461b3b' }, "Expand examples"), index.h("smoothly-button", { key: '94c1d32b7a9c7397aff0e68f53a3a26f4fbb5a72', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { key: 'e7863ca867219cb726c9545bb5bcd62ec30ca4d4', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", { key: 'f59dbf3ade7a08766b108dd5029914274868b5d9' }, "Fill examples"), index.h("div", { key: 'f35ee4a5ac533c9ed4f4d037e1fae0acc8eb97a4' }, index.h("smoothly-button", { key: 'c03f196005947af5d239499aed08898c6d6ac4d6', shape: "rounded", color: "primary", fill: "solid" }, index.h("smoothly-icon", { key: '068f3a955a464d3d73beb557c59f0f5160fbd92d', name: "checkmark-circle", slot: "start" }), "Fill Solid"), index.h("smoothly-button", { key: '4c4ca0dfda1f1f7832452e7dc30c5dac58a0fb31', shape: "rounded", color: "secondary", fill: "outline" }, index.h("smoothly-icon", { key: 'dad95a59e66c70c95c3c1fc362747eeccbfab63a', name: "checkmark-circle", slot: "start" }), "Fill Outline"), index.h("smoothly-button", { key: 'ed6368a1ccf0faf3ed020d46dab61a9e4d8ed651', shape: "rounded", color: "tertiary", fill: "clear" }, index.h("smoothly-icon", { key: '4a519465c40b5f400185f09287bbe31c476a8c50', name: "checkmark-circle", slot: "start" }), "Fill Clear"), index.h("smoothly-button", { key: '06b4814d0bcf6c947277743d690f3196226fe183', size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: 'c567948a15e2c42ceacb38e64e1fe6d7a7c779b9', name: "basketball" }))), index.h("h4", { key: '7444a1db266d5503e257156bb172fc7e6e072760' }, "Buttons with Icon in \"start\""), index.h("div", { key: '409d77499881f089e7c32798d0e422613e379686' }, index.h("smoothly-button", { key: 'a6f18674f682b5583933d9e4e1dc7f8b7ab74bad', shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { key: 'b2baa3a131f32d48b11b5598d963ce83d55209f1', name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { key: '0737d18d507a54d7e9e59d6c9c7cdb254595ce20', shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { key: '867b1f90fe81cbc945e4bea7c7c100137b73663b', name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'c6de6779105b1dd8c1049a16cc8314d16bba01ee', shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: 'd88ee2f3f72578c8dfc2484a30aa3493e7bf51f9', name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { key: '1a7e74e868443ba8f3ac0294cbcfd8baeb0a9dee', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '59dcf90e4d56f2f9a48be36c9076f75148c3d9ef', name: "call" })), index.h("smoothly-button", { key: '1d3d6ae26c610dafc0613e044e5aacd7363230fc', size: "flexible", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '2162460b61d95d9a18b2b2864ce8baa82b50a09d', name: "airplane" }))), index.h("h4", { key: 'daf1efacf8397262da51468b05e1e45dfaece328' }, "Buttons with Icon in \"end\""), index.h("smoothly-button", { key: '9c4185237e839304b2644ef3959d500777f8911d', fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { key: 'e82c4ccc06450da550004e65fc72e5efc00d9feb', name: "arrow-forward", slot: "end" })), index.h("h4", { key: '1042fa5abcd61b55650c97f1e396edb3ccc2fcfd' }, "Test for icon button"), index.h("div", { key: 'e3685179b4b1183cf3ad39d3384f8dc9b3112f69' }, index.h("smoothly-button", { key: 'e6e4f28659e913fe260da956ea67048672cbc938', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '26ca649375a7abd32d08199eec92fe32cc7d8518', name: "call" })), index.h("smoothly-button", { key: '8871acca565b8e174589ac1e0088e08ed128bfb6', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { key: 'ba2f114f66a0f60d5bae51e10d38117c1e10661e', name: "search-outline" })), index.h("smoothly-button", { key: '77bc4f134f91afff041a98eb1b8013c3c74c0575', size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { key: '543da579a69b0d7ce10be1ea47ba6ddb2d4e37a4', name: "checkmark-circle" }))), index.h("h4", { key: 'f9934dd59935b9cf054723bd625efe56b596bd29' }, "Link examples"), index.h("div", { key: '2edb1b6b3c5695c13eb1cb19269a21f537bce421' }, index.h("smoothly-button", { key: 'fa5bb1b75483a047f8ee1cb62c7adc93f2f6029b', type: "link" }, "type link"), index.h("smoothly-button", { key: 'a850a3f3df1c58f05edd8a6bfe641b6cd9c132b3', type: "button", fill: "clear" }, index.h("a", { key: '0fcabe43fccf51ac105ee32e15620dd8edeee34d', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'c2085a3f3a15eb76923aaa455fee82b58e725e26', link: "https://google.com", type: "link" }, "link + type link")), index.h("h4", { key: '5ea5c90186a1daa29b429b07519e50b545a9acc7' }, "Disabled buttons"), index.h("div", { key: '4a6ec3465ea144e0fe2f130b11e2d7aa984051db' }, index.h("smoothly-button", { key: 'ed007f894cf4e827cb2c1f72e721c47c1c23ca16', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { key: '2d9877d24bf0b29033733a00561b1f1d555f783f', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
-            index.h("smoothly-back-to-top", { key: 'c9ff04372d7380caae6915bd8508302de7f246d3' }),
+            index.h("section", { key: '9dc20ca54b202710b5f2b4414f263b4ac7e7dd18' }, index.h("h4", { key: '1568a3ccfe042296393995026c47a60f5884756e' }, "Confirm button (two clicks)"), index.h("div", { key: '5a55c5b44219e740c1b045062d1ba079ccc97ee2' }, index.h("smoothly-button-confirm", { key: '9cabb2b6b024f7b3e893b169d2ae3cb1b307d2af', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), index.h("smoothly-button-confirm", { key: '53ca202a60091b1710425e788b76471845609bf3', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, index.h("smoothly-icon", { key: '7e23299dcddc5b4e1320a0878e3c59b11ec13f3c', name: "checkmark-outline", size: "tiny" })), index.h("smoothly-button-confirm", { key: '540269ca0b9bce2dadc8e770de395393fb3a0045', name: "confirm-icon", shape: "rounded", color: "danger", size: "icon", fill: "outline" }, index.h("smoothly-icon", { key: '56efa4729f4416e4c79bf5468591e06296a1b4f7', name: "trash-outline", size: "tiny", fill: "outline" }))), index.h("h4", { key: '713b5e7bf7e8dc7d7bb0f6fcc8d24593918ad75b' }, "Toggle button"), index.h("smoothly-toggle", { key: '5cd135ddf6ff0976d5ed4abc263ffa56e8394eea' }, index.h("smoothly-icon", { key: '14f9b8511512c9a827572196b92754420e80614e', name: "card", fill: "solid", slot: "icon-slot" })), index.h("smoothly-toggle", { key: 'e5e7228ffed919cc5e80062b59ccd35ad48428f2' }, index.h("smoothly-icon", { key: '79cca1e11d99610ce512c0cf95f7a8728d8c7ef1', name: "briefcase", slot: "icon-slot" })), index.h("smoothly-toggle", { key: '60bcd4e8add253cddb9bb66a445bd028646ea4eb' }, index.h("smoothly-icon", { key: '21242ad2815f86ce03997015e4eb0a74b05bc4dd', name: "airplane", slot: "icon-slot" })), index.h("smoothly-toggle-switch-demo", { key: 'e8911215d8ae3f86af2587d86df50ffc07b6a0d6' }), index.h("h4", { key: '7c8947f2475c63cd7f1f09e5ce257562f1f2f2b6' }, "Links with icons"), index.h("smoothly-button", { key: 'b7db93896a793e61830f1b7b239fdcfd6cdccab9', type: "link" }, index.h("smoothly-icon", { key: '08689d07dd561bd61ad085df8e502ee0cd7e7973', name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { key: 'f4cc5b82ce9d6722aa01357a72b46de79022abde', type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { key: '578d79fd83ceb0ed7fd6a5973415adddd0ae7336', name: "call", slot: "start" }), index.h("a", { key: 'b0c0127027cb283df167e02173e6962ac0ec5df7', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: '8d4abc1a359006e6b508e695af77a6268b1150a0', link: "https://google.com", type: "link" }, index.h("smoothly-icon", { key: 'fa73d2276ec20feb7864a7d786ff61835a008baf', name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", { key: 'b57d4d631ed9c11c35ca34f7a99b86ccab84bde9' }, "Size and Color test"), index.h("smoothly-button", { key: '7d24e9a558a6f84c1ce7bdafb27001b651575ab5', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { key: '855b2d300520a1fd21ecd36dd3ba9430d4c6b6e7', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { key: '70bb16a225ff97113036954f24453a8a5664f16a', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { key: '778e7564e8f825f8c363142a304e339ae0dd6231', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { key: 'd0941699e617e9072112ae7b1b8ff59fd5f9ade7', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { key: '45564ffbea8dd23adffbd8c9f13782074b941bac', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { key: 'fc0c002f8a0311e100f0ab6bd6fabc2cd8421f92', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { key: '81ccda493385c3a26b3b735cb2eb6e0db4285828', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { key: 'd71f660ab908102e451741a532aff58311150c5a', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", { key: '587fc025df485b073782ff2f5762f70013794e60' }, "Expand examples"), index.h("smoothly-button", { key: 'a06acb103d4defee355231f0cfc5fd59da6ddcef', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { key: 'af724472e37328e8f6bd4868fed1e020ee517a77', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", { key: 'd8ce125601f73b8a0a36dbeb929d258b4b6fe14f' }, "Fill examples"), index.h("div", { key: '0e562c2ad2002e3c86ab336acc2be5438c9abc04' }, index.h("smoothly-button", { key: 'd0abd1c35f67efcc992eb0cc3ba0852069ead1ab', shape: "rounded", color: "primary", fill: "solid" }, index.h("smoothly-icon", { key: '6a9a6e019b46651a495dc38f21f03d2a5d15dbea', name: "checkmark-circle", slot: "start" }), "Fill Solid"), index.h("smoothly-button", { key: 'fddf1ff7e5f82fb37fef57797df52095bf4f381f', shape: "rounded", color: "secondary", fill: "outline" }, index.h("smoothly-icon", { key: '2124abe27d7e323bab788af4999db84883ea5e5d', name: "checkmark-circle", slot: "start" }), "Fill Outline"), index.h("smoothly-button", { key: '4b4a702295b7c2f4429fff252e60663081126384', shape: "rounded", color: "tertiary", fill: "clear" }, index.h("smoothly-icon", { key: 'a2444310229865fa87ea6d1f6afdc43cf6a04cf3', name: "checkmark-circle", slot: "start" }), "Fill Clear"), index.h("smoothly-button", { key: '3ae2f6f8af1f003e408351958aa9ca2b4143b713', size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: 'b663881043a57f8d8a42dca459755aa69958b740', name: "basketball" }))), index.h("h4", { key: 'fc72868fd2da92591cc8284da98c7ef5f94d1e62' }, "Buttons with Icon in \"start\""), index.h("div", { key: '4e248b3e3a0a93d89529de7a4d73baab1798583a' }, index.h("smoothly-button", { key: '95de65e592393c1ebaebd36d3246ccca2f566d27', shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { key: '8f03f659c31ae0850cced5e7c104c5b83077651f', name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'af6a56d3e6ca0ed10238cde56960160f014c58d0', shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { key: 'f0773e4b93251cb964d2b330055fb55e5fc7b39f', name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { key: '146715d3aceabc7ed92187bc3637ea00881cdf75', shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: 'ca8b56e50e26c8004af4d12b1df0b88af197f3f8', name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { key: '51d61b9e8d908933fb9666cfea0726cc7ea92396', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '3f0c2c4029ad4ee2ffd9a68d11a0588147fd1946', name: "call" })), index.h("smoothly-button", { key: 'e8923d332fcf6a78f50353287ffe4745b6a42421', size: "flexible", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: 'ef97872c6f8b03c9eec205385f3776262ba62798', name: "airplane" }))), index.h("h4", { key: 'd7cc835c8c10ba6f8ba41eb8b3e84df2ee4f6433' }, "Buttons with Icon in \"end\""), index.h("smoothly-button", { key: '6ddfe9bb56bd99d70ad415a3eae945248ed1a55d', fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { key: '69012bd897bf47a3f3aa940c6e6a7266a1269736', name: "arrow-forward", slot: "end" })), index.h("h4", { key: '06e42590533073a595328e1bd0dd5c191c1769db' }, "Test for icon button"), index.h("div", { key: 'a7691d7f278e52a1733433936197827447b91cb9' }, index.h("smoothly-button", { key: 'f3b0979e68a7c982182d19d0890156c11c2c7255', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '6bb7f850a6bfc796ed7a753cfb4911e5532d1752', name: "call" })), index.h("smoothly-button", { key: 'fca890910fbabd2f81398285a6a9e339f0799ee1', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { key: 'b55f1d9b904cd91b97a484880b35f62dd6f9277b', name: "search-outline" })), index.h("smoothly-button", { key: 'cbe67a2664588c5baf4790f92a6284017ddf8ec1', size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { key: '9a2f2fbddac15c296981aedbe05e2768d9ac41d9', name: "checkmark-circle" }))), index.h("h4", { key: 'f76fa1646d13e791aab7094f124443c7d3f8f1c2' }, "Link examples"), index.h("div", { key: '0e92fc06376583664909eab80fdd0d19b211582b' }, index.h("smoothly-button", { key: '042fa080e05ed0816ffe3c5a3d07eddeaa0a4b2b', type: "link" }, "type link"), index.h("smoothly-button", { key: '0aba9c3f497ce2431f2549f5e562e5bcee490b48', type: "button", fill: "clear" }, index.h("a", { key: 'cf63f006615f65793ec42981c0bf1f239edebcae', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'dcb7c80e432658ffb4b5c369d71e6e00d0311bd1', link: "https://google.com", type: "link" }, "link + type link")), index.h("h4", { key: '0550736363698fd5ab5b299df5c1f2b11250d3cb' }, "Disabled buttons"), index.h("div", { key: '674f9414f8ac478e34b03510064741d622d13607' }, index.h("smoothly-button", { key: 'a9e8716cab33667159ee8462f96ac7ca9fa4bedf', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { key: 'e5588eff49f286a77fca947dfc121d594af89dd2', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
+            index.h("smoothly-back-to-top", { key: 'ad6d654dbf998ef89a39958d927a36a2597986ef' }),
         ];
     }
 };
@@ -1874,11 +1874,11 @@ const Calendar = class {
     render() {
         var _a, _b;
         return [
-            index.h("smoothly-input-month", { key: '635acbe6e1fc8024472b4329cc5f097f4ab70788', name: "month", value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, inCalendar: true, next: true, previous: true, onSmoothlyInput: e => {
+            index.h("smoothly-input-month", { key: 'b75ff4c4fb48019db30df96a8e5311168317c9f7', name: "month", value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, inCalendar: true, next: true, previous: true, onSmoothlyInput: e => {
                     e.stopPropagation();
                     "month" in e.detail && typeof e.detail.month == "string" && (this.month = e.detail.month);
-                } }, index.h("div", { key: '73d5dcefaefebeca8c0d7e0bc3bb902307232a25', slot: "year-label" }, index.h("slot", { key: 'd26be4126a40d3560f9d5f6593b6d2765e8fdb89', name: "year-label" })), index.h("div", { key: 'a2f463e43466c1a88101879ce472943b547861c3', slot: "month-label" }, index.h("slot", { key: '950ac6f9f3dcb8c8ac919ba8c03f612c050c25ac', name: "month-label" }))),
-            index.h("table", { key: 'c1571ca9e7a320ecb26af7feca3fb89218efe38b' }, index.h("thead", { key: '51be962b1d7653f89943ec947bac1afdd8bc7f6c' }, index.h("tr", { key: '53df199c1db5863ecf9bc8d80b3b1953766ac01c' }, weekdays().map(day => (index.h("th", null, day))))), month((_b = this.month) !== null && _b !== void 0 ? _b : this.value).map(week => (index.h("tr", null, week.map(date => {
+                } }, index.h("div", { key: '0fb13fcf979f75ba735a61bb0484b92365d877da', slot: "year-label" }, index.h("slot", { key: 'b34f3d6e131d141c134e39d6d99cbe3118820675', name: "year-label" })), index.h("div", { key: '8135b50329113c754ec2b29e563e8f0e0e5cf41b', slot: "month-label" }, index.h("slot", { key: '2e4ce58244cfcb97c278b6ddbb1f196eb2109925', name: "month-label" }))),
+            index.h("table", { key: 'b6dec480ecb9f5ef99f4956cf33b6df49b07c037' }, index.h("thead", { key: 'd5999d15f0fdbae38325e459c3ad82fa4dcf28a8' }, index.h("tr", { key: 'c92dd3f0e8086a571126d2c2a1c0628081094f03' }, weekdays().map(day => (index.h("th", null, day))))), month((_b = this.month) !== null && _b !== void 0 ? _b : this.value).map(week => (index.h("tr", null, week.map(date => {
                 var _a, _b, _c;
                 return (index.h("td", { tabindex: 1, onMouseOver: () => {
                         !this.doubleInput && (this.min || this.max) && (date < this.min || date > this.max)
@@ -1928,7 +1928,7 @@ const SmoothlyDialog = class {
         };
     }
     __stencil_render() {
-        return (index.h("section", { key: '74db306f3b2e5543bbe837d9f1565057c5d6fe8f' }, index.h("div", { key: '55b795a9a2af74489335dd3d88f2083b550a1ab8', class: "header" }, this.closable && (index.h("smoothly-trigger", { key: '50a8e102a3a71579a048904f55f8e4e9ffd576fe', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '4d59ea66f79da3bdb6d24960cc8477755b8beac2', 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: 'e35599cbac200f1e2c42a9b6c8515eb230c10304', class: "content" }, index.h("slot", { key: 'b8783ff819ff16220dad5a9394f4911d5c29dcc4' }))));
+        return (index.h("section", { key: '877c3f09c0f27452cc34302933cbae897b30bcfc' }, index.h("div", { key: '8128738f1cb4c036b9924874b0bb3d2451971499', class: "header" }, this.closable && (index.h("smoothly-trigger", { key: 'b0643e151ab26c0d1f5f8a686f5338c1e3eef58d', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '51ab12786d6c829357a0b42fdde6cb2ca70684cd', 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: '0f0a4cf009b3474a108489edd9f3972da4f0cf01', class: "content" }, index.h("slot", { key: 'a5b40798399d5a70e5b611d129751a9adbc2795e' }))));
     }
     render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
 };
@@ -1939,7 +1939,7 @@ const SmoothlyDialogDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-dialog", { key: '0f19755c15fde18299c891e939221e54772fdc1f', color: "default", closable: true }, index.h("smoothly-frame", { key: 'b556d35530af18833f7dcc6c5b21ce6e6f1d56c8', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })));
+        return (index.h("smoothly-dialog", { key: 'd3ce6c40fea0be1bd0002a9238d08d61ebd46e8e', color: "default", closable: true }, index.h("smoothly-frame", { key: 'ee44a05c9f538ca3ef346cffad3662e944c908b8', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })));
     }
 };
@@ -3682,16 +3682,16 @@ const SmoothlyDisplay = class {
         const type = this.type;
         switch (type) {
             case "json":
-                result = index.h("smoothly-display-json", { key: '10d3f5e2d84b2c221c8c42eb76259b06860838c6', value: this.value });
+                result = index.h("smoothly-display-json", { key: '085b78a9c947b2322109712da534369b56a69484', value: this.value });
                 break;
             default:
                 result = format(this.value, type);
                 break;
             case "email":
-                result = index.h("a", { key: 'c997f6ac9ec2899c470c262ca126be850e7b364a', href: "mailto:" + this.value }, format(this.value, type));
+                result = index.h("a", { key: 'f007ae56b7561a066fabdc2f8ecb01acc4df8cbf', href: "mailto:" + this.value }, format(this.value, type));
                 break;
             case "phone":
-                result = index.h("a", { key: '213c39a2d943f9b4033cbae03aae99c77c75d64d', href: "tel:" + this.value }, format(this.value, type, this.country));
+                result = index.h("a", { key: 'a8d8b7703e5ec3df3839b508036a3ae2f1d4b88d', href: "tel:" + this.value }, format(this.value, type, this.country));
                 break;
             case "postal-code":
                 result = format(this.value, type, this.country);
@@ -3786,35 +3786,35 @@ const SmoothlyDisplayDemo = class {
     }
     render() {
         return [
-            index.h("main", { key: '1884d99c36f0634c0541dcbba73f078f1f2e146f' }, index.h("fieldset", { key: '1f1bfd94d014dbcb3e2b216b1d030487556ec12d' }, index.h("h2", { key: 'd74303a581f7b12ba9439b82158abd5ff3a954b3' }, "Smoothly display"), index.h("dl", { key: '7d2b802071231e313225322119cd6bd43007e11f' }, index.h("dt", { key: 'c4089b2fd1c555f27dc067a79e03a70c51b481c2' }, "Duration"), index.h("dd", { key: '12876e8af94ebef30bdf50c193e502216bdf282c' }, index.h("div", { key: '9f1dbbbdcdbb7b160d4c03f38e48b932d067cb71' }, index.h("div", { key: 'a639d9137db808a3cdc7cfecdd19712bdc52c86d' }, index.h("smoothly-display", { key: '72c5fdf95929f7b4f34c2bf52df82a970c45e922', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: '8f7a1860a1abb16ae1aec3e61b79b03c663ecb3d' }, index.h("smoothly-display", { key: '7c753fdd3400c5aba71f26cc7fcb988e271671ca', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: '0e94ccc042565b4a8f2f4574699aa5dbc2391da6' }, index.h("smoothly-display", { key: 'f1b2e0a178c5e52e84378b6fe8bfd1d7066d6517', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: '066ebf90522f44fb03e87e42bcf1ee0645a3fda1' }, index.h("smoothly-display", { key: 'e7f712610fdb0fde221ae752ab81941141fe1736', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: '73a3e283f7dd191c4ab5b950e30376587cbc9860' }, index.h("smoothly-display", { key: '95dac3ecda205c1c8eac4efeb76aff25f9432352', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: 'c8d0a225e9743c1acaedb51a032fe0c9ab03e97b' }, index.h("smoothly-display", { key: '6a8a03aee7a070f7a395d77b387b2e026b26630b', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: '6867f3a04a4f8a1884ca753f77019da2e38193f3' }, index.h("smoothly-display", { key: '13fa79643263fdcbe8aaa7b25c64a0913f1cecf1', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: 'bd9bf2570d75bf161c05f9875947799ff3267db4' }, "text"), index.h("dd", { key: '688fdae9d08f2a008c1281437b50f3f92481dbd2' }, index.h("smoothly-display", { key: '4e3f3b5585144ac53215c1e68ace473018acba12', type: "text", value: "text" })), index.h("dt", { key: '887f683d0a3b8b304ccfca21fe58872f510d9141' }, "postal code"), index.h("dd", { key: '15e64c43f2ce8334129dce0b5eea1d373e94a3a4' }, index.h("smoothly-display", { key: '63de941f17b22d4f4437a786737db8ce779e78ae', type: "postal-code", value: "752 31" })), index.h("dt", { key: 'f14b1a86403f72ce4dd5b508fd68f3c71989d2d0' }, "password"), index.h("dd", { key: '1b8f575ba704a8da631a5cb49432f0f984bc9108' }, index.h("smoothly-display", { key: '915b4d7dd66b44592e952955b923526ceee1ddcb', type: "password", value: "password" })), index.h("dt", { key: '53af0a95420220789554afb18ae36179e6906580' }, "email"), index.h("dd", { key: '57e72a39a890926f75d6ebe1def1eb7869be283a' }, index.h("smoothly-display", { key: '9e9031d628b64305e22949e087684a73b4ddf2b2', type: "email", value: "test@example.com" })), index.h("dt", { key: '6823443cd777741780e6cc7c3cc701535e9db91b' }, "price"), index.h("dd", { key: 'bba7871cacd7ee1f079e5b6840af9d9fd5f341df' }, index.h("smoothly-display", { key: '358dda2677f845ccc6624b49f3755f9986517ba7', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '0ee5ec9df1a2de61d8d64c4d36705ea88e582587' }, "display amount without decimals"), index.h("dd", { key: '5df182f9be00741430fda2cc693107b8dab65c43' }, index.h("smoothly-display-amount", { key: '20336f335b502bea656489261c23d23fc1bd83d6', amount: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: '43f8d5106291114e5616c817c8af54fc5d11c937' }, "display amount with decimals if they are set, otherwise no decimal"), index.h("dd", { key: '7605dec3156f0c97d11dae9ac9184973aa3d73ad' }, index.h("smoothly-display-amount", { key: '3cddcd97b2b97b35229dcad254180d65009bad02', amount: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: '2fe736a53136a34a204011b1a324388267f2d86f' }, "display amount with decimals"), index.h("dd", { key: 'b482731679fe9c23818ddcd981d7d18fb219cdcd' }, index.h("smoothly-display-amount", { key: '20301a184984117ea7eb0168f8ba2e9c5b157a0d', amount: 200.2, currency: "SEK" })), index.h("dt", { key: '41baf6e22541394aa0bf83a6ae8c8f7cac96957b' }, "percent"), index.h("dd", { key: 'efb94deb0ca505dc2253b7faf52c421b195f342c' }, index.h("smoothly-display", { key: 'a63c8f66d7553485b2a2bf8a3ee2bf0c10b92390', type: "percent", value: "42" })), index.h("dt", { key: 'a71835f0ebb230951b8a918015b631401637ba65' }, "phone"), index.h("dd", { key: '6695b87cbfe55d79e70fb9e352abaf3e3a7d65ec' }, index.h("smoothly-display", { key: '74074dc7e1d98948797baed047a06ae175baf9ee', type: "phone", value: "0101881108" })), index.h("dt", { key: 'aa330f10ad4d2c13767c34c7d8f6b3e36d772df8' }, "card number"), index.h("dd", { key: 'bc78b8cfb57d57b677f05d47481a35125f6372d9' }, index.h("smoothly-display", { key: 'e68846c900f446365c4a9e00d26e719254927c04', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '28fb812d77646a2913ab2d44c0dba8b6e2526308' }, "card expires"), index.h("dd", { key: '9e8651c3c5e135b199ebcae434251c503fc24bb0' }, index.h("smoothly-display", { key: '5c0c3c0b6b2ae64286faf778fcb46031bdd1e807', type: "card-expires", value: "7/22" })), index.h("dt", { key: '65b3f5b18152c45b30366c290aa57b08b9bb1a7b' }, "card csc"), index.h("dd", { key: '119d8e8fd94c135dfcc5f0d840294978e8c1830c' }, index.h("smoothly-display", { key: 'f629d9302b5a230249c00772acdb882dabd7f2e2', type: "card-csc", value: "987" })), index.h("dt", { key: 'aa4a19aca3b14845b6fcc45df7ceba55808ed49f' }, "date"), index.h("dd", { key: 'c6cac6c2d5e3c1a2a74578813727099c8b09198c' }, index.h("smoothly-display", { key: 'f6329ec35ef456775d426d392a90002c4a8fcade', type: "date", value: "2022-07-07" })), index.h("dt", { key: 'fd976bedb6491521572a90d0e3b330d116603754' }, "date time"), index.h("dd", { key: '5c6bf78952d9a5e1cb00e3667d8ce1d066fdffae' }, index.h("smoothly-display", { key: '133d0e552ad1ce36065ce905e1aed18817d8cd84', type: "date-time", format: {
+            index.h("main", { key: '27f3f660e5c9ba72208b742a81dcaadf18fc3749' }, index.h("fieldset", { key: '2679103df3534adbf00d535f6b19e030598be64c' }, index.h("h2", { key: 'd2e12dd5b7843780a34a2f26c263402b515f49b0' }, "Smoothly display"), index.h("dl", { key: 'e8ac9ec4c6a57657e99124a6f0d50fa97d428387' }, index.h("dt", { key: '072c11b16ec9287db458af793f251bad7ab9d31e' }, "Duration"), index.h("dd", { key: '19fa1ee7c5b93150a95d77a0dfeb598dbc19fa77' }, index.h("div", { key: 'b49f11898aa672bd2c7ec75933b5b3880a948585' }, index.h("div", { key: '81a022df49a9ff8af501584cb086858183f701fb' }, index.h("smoothly-display", { key: 'be981aeb8f104273f21078caccf1903bfb836649', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: '59817634b13fd5ffcf15b284bd79ba8f8b3d0011' }, index.h("smoothly-display", { key: '1e2891c2719bdae9a0a518c2892c607a7e92d683', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: 'c80527d81f3f2fa93cb9eaba662e06bca2d90a2b' }, index.h("smoothly-display", { key: '7936d432558fb1480c97b23507609e096c00584f', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: '6b167ac76b33485145485840b4f1821b81c35744' }, index.h("smoothly-display", { key: '1baf9985e56fd3562f6f1bc048ddb18cc4f69c43', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: '1ad4538203d873bf0511e5bee56d867b3564545a' }, index.h("smoothly-display", { key: 'a3e916ca6cf71eeb1c6f3e65c26a4ad9c61a7f64', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: '428db64480420460ce3fac7626f8f394f0d3e177' }, index.h("smoothly-display", { key: 'f806b13e265f371a66d85b3a034741e817278609', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: '6856118b24e56647bd6b5c005fd7c26988a144f8' }, index.h("smoothly-display", { key: 'e6b5e37bdc9e3cc8cba6e9d9dc37c84da23f7c68', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: '04cd551836d92d4bb12bfaf8a81af8a0638bcfd7' }, "text"), index.h("dd", { key: '4975a57852b5990f37b7c0085cafb18690a0c4cb' }, index.h("smoothly-display", { key: '34f550a0577519d2e9efdbf2d1f495defd015597', type: "text", value: "text" })), index.h("dt", { key: 'b96be8be65c8902b1087123d49a230a28220c773' }, "postal code"), index.h("dd", { key: '2a1b4925cf7924cebc9d5639eac0d00c5fddd6e5' }, index.h("smoothly-display", { key: 'c4270ba78cd01acfc1795c23ea436b79f12fa18c', type: "postal-code", value: "752 31" })), index.h("dt", { key: 'f7dfc9c27c50949812887392893922a6091e8d9a' }, "password"), index.h("dd", { key: '9392e9741e96d55ce143b4d208205c3564a77bef' }, index.h("smoothly-display", { key: '1b1ec8520aba15c8b1b9ef69600f8c8f47a5d37e', type: "password", value: "password" })), index.h("dt", { key: 'c5ef07c83d8f343d7309cd4a39f5f194abc845d3' }, "email"), index.h("dd", { key: 'ed95e98f2f75c8e9a3a3abd34ca47609ffb9aac6' }, index.h("smoothly-display", { key: '1b821871224445c27cc48fd727f1faeb45ce93ea', type: "email", value: "test@example.com" })), index.h("dt", { key: '191071e440819194aeb879b0918f9558deb39334' }, "price"), index.h("dd", { key: '18fa13ad677fae5574b2d856273e075294d9b884' }, index.h("smoothly-display", { key: '60fd45cac8be48f6a7fb9705884b8e813708ec63', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: 'dde3a9248ae7c5fa0c77c543c65b45eb28728d7e' }, "display amount without decimals"), index.h("dd", { key: '78ea878265edd27ea4868d02e245d14f9a6a9f74' }, index.h("smoothly-display-amount", { key: 'bea2d177e4f930b5cc808a33acdd9402ca5dba75', amount: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: 'ea6bb732e99a0ac7fb7473cc19d3df4848fa6a04' }, "display amount with decimals if they are set, otherwise no decimal"), index.h("dd", { key: '7331c0c8a7489efab6efc9b0c0461861e2cf6805' }, index.h("smoothly-display-amount", { key: '12b90341db84b12bb6c6b2d1c12f93326e8f37b5', amount: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: '8eb9c841fe05b7a06aac5fcb0cf7199eea4bfef2' }, "display amount with decimals"), index.h("dd", { key: 'ca9e66a11d282c161143279822dd8de8bec06f1a' }, index.h("smoothly-display-amount", { key: '2fe3822c0f869abbbcb0899c47d381f0fb7c8a2e', amount: 200.2, currency: "SEK" })), index.h("dt", { key: 'fe8476ed9720bd6e86790f6c6780ce786a809f03' }, "percent"), index.h("dd", { key: '11200d1616c5e7b9260858db72ce48a359b21ce7' }, index.h("smoothly-display", { key: 'd636eabb8c415f2841b9c85ce592187caaa51222', type: "percent", value: "42" })), index.h("dt", { key: '5e5d2021553e3869bba89ce26dd9321c507eea34' }, "phone"), index.h("dd", { key: 'cff22122c78b7dc7a5877427fb760185e61feed1' }, index.h("smoothly-display", { key: '0d7e8f9dba6a0450b773c787e64375aad2438464', type: "phone", value: "0101881108" })), index.h("dt", { key: 'e195afc199b7fb0b1f659b322db501737d8115c2' }, "card number"), index.h("dd", { key: '787f25f7fc2b8aa681c4b1cb57123a831a69437b' }, index.h("smoothly-display", { key: '87b407b5ea6d9f5625237e009bf9147d13c0cfe7', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '02daa23ec4993247798c897806263fa0145cbd18' }, "card expires"), index.h("dd", { key: '01dd025c53ecbb901aab0745520c3b251135f164' }, index.h("smoothly-display", { key: '22ef5259c1d63dc28a2b969cef57d73e1cd40723', type: "card-expires", value: "7/22" })), index.h("dt", { key: '5400ae3bb807ca4cfaee985ccf369c252b0bf34c' }, "card csc"), index.h("dd", { key: '395aa40fda751d0f7176cf6608c4ceb675c5deca' }, index.h("smoothly-display", { key: '1c4f1dffa75b38a025fb68718d3488fe9d59dcc0', type: "card-csc", value: "987" })), index.h("dt", { key: '4b3f86c46ddde9d9b01154a9ab7ce4da38a5c2c3' }, "date"), index.h("dd", { key: 'f4c5d4869338f4a6baf2e9b631a5b64449751edc' }, index.h("smoothly-display", { key: '638ab2c136fcb7a5171e36b081d19ae1cda4566e', type: "date", value: "2022-07-07" })), index.h("dt", { key: '70b79c14fa4d8edd7e685167d3c155c197f57c1e' }, "date time"), index.h("dd", { key: '7936333f304691ac5ebe508d6ad9e7cf6e73ccde' }, index.h("smoothly-display", { key: '7ba9011f27486cb0a9d08e3d6011a325738b4abc', 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: 'ca3cee94304a64af02b0f6fbd4838a363f31d91e' }, index.h("smoothly-display", { key: 'd38d6cfa16dee4dc52d580b032be09ab8662eb11', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '84ecebbe7f84bca6e855b105589c064eff800828' }, index.h("smoothly-display", { key: '7ec66c770ebab7b540b9dea695d1fa7a99da49fb', 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: 'fb61b32d3ef50270478d2c6f7a352f2c3785d318' }, index.h("smoothly-display", { key: 'b728372ac9e88c8e81db0123d76b45c8cb224a8b', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '52e121f78bbd45bb783e926ca9a4c7b2fe1e3a12' }, index.h("smoothly-display", { key: '27d3a854db5262703ce7cb97a27d6a3bc0aed096', 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: '419b427db910e49fd541de31e95c7dd3dbd2811e' }, index.h("smoothly-display", { key: '581a5d2bd65364beec83f1ea5a0baf56c9529a44', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: 'e18e944f3a2634c8845fc3c8ac37218b99a7449e' }, index.h("smoothly-display", { key: '4efc41e8aa437c2c85a6acb933beaf994140dec1', 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: 'e55b2e06c7bae7ce37ced65ded194b019eaf83a7' }, index.h("smoothly-display", { key: '4552f29f6055b23182ffd6b66e80322ce7f7acb4', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '2a5bd28134ceec8d932a389c4c695b4214662698' }, index.h("smoothly-display", { key: '5dfe790f011b929aa90852d8ecf94246e25c678a', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: 'e3f82bef92cf2dd2f03e45f41b02410a68a9aca0' }, index.h("smoothly-display", { key: 'a9c0b102b61a68948cde0e20bd80b7be6638fd3a', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: 'a6811c77fad056868d5cbe9ef714ae61f845827c' }, index.h("smoothly-display", { key: 'ad9fca938fae247bd78261dbad02455837188f73', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '29af929f8c59b6cb80204e144612ac1598341c43' }, index.h("smoothly-display", { key: '0b06df56692f6a76b0581ef51e7584563d649c18', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '81ecdc7c3bb41f650b9b3d833f076e6e24eb0109' }, index.h("smoothly-display", { key: '931eb0734d502032e61ffeb681bc7eb5f036bbed', type: "date-time", format: {
                     year: "2-digit",
                     month: "numeric",
                     day: "numeric",
@@ -3822,7 +3822,7 @@ const SmoothlyDisplayDemo = class {
                     minute: "2-digit",
                     second: "2-digit",
                     timeZone: "Europe/Stockholm",
-                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: 'cc69d805327af80d37c755fbf09f418bdec49aeb' }, "Display JSON"), index.h("dd", { key: '102cab578e30bcd1a986a33902664c0754b5c436' }, index.h("smoothly-display", { key: '4ed3db42f78f67eb2b1d093c739fca0e2d9f3cb1', type: "json", value: {
+                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: 'be87f3e62b49d6e4f50704281495e6932ae29e0e' }, "Display JSON"), index.h("dd", { key: '52cef77d347d1e953b585ab2557c63bce1a5c58f' }, index.h("smoothly-display", { key: '14b18f87a0ddbae48ad9aa6293538cd1eebe3d3c', type: "json", value: {
                     name: "stringy",
                     nested: {
                         age: 109,
@@ -3834,21 +3834,21 @@ const SmoothlyDisplayDemo = class {
                         null: null,
                         notDefined: undefined,
                     },
-                } })), index.h("dt", { key: '3c738bb224b7f414e1da3a5c8e80fee87d36a5c9' }, "Display amount"), index.h("dd", { key: 'a2187f0b6c66003a3e6711d9e4925e9105097fbe' }, index.h("smoothly-display-amount", { key: 'ea1d201e8a31b090cf247135e38d177524612af9', currency: "SEK", amount: "1289.5" })))), index.h("h2", { key: '44a21c22b6fc6a3b75cb583006aa139e771d05ff' }, "With labels"), index.h("dd", { key: '4743f32e86cd75e315e4922f2331e4bbbb7ae0a7' }, index.h("smoothly-display", { key: '0b18e5e5f137554a82959f3cd834eee39e91e2ee', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: '593897d19d734b2ccc5732d6e7703bf6e873313e', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: '0c38763db9feef7f6aa236af454c97e4ed4b73d1', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: 'a5e53127f8ccdb2f05bd339a7c31a12f8f0a27bb', label: "Logs", type: "json", value: [
+                } })), index.h("dt", { key: 'c10fd0d6d2a3f585e2d60691c07b86199b89a93d' }, "Display amount"), index.h("dd", { key: '5776b9a5c557b56d30a08e1065decc740648e72e' }, index.h("smoothly-display-amount", { key: 'd04b50c2633171414f1887387570cf4423730ffe', currency: "SEK", amount: "1289.5" })))), index.h("h2", { key: 'd82a3ea965d13e397cbdeaf99b5fa09381911368' }, "With labels"), index.h("dd", { key: '2b4224776496efd6b30c52d02e7a72d600d2b831' }, index.h("smoothly-display", { key: '9a98b21a578feaa8d47a52e947224ea90af3643a', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: '0dce5b76295a94807351343419344299359adbaf', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: '7e55dfe8c1ecf33b646811a5b9481f42b18af577', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: 'c79311994408b70e85d7560621480580d21e5b5a', label: "Logs", type: "json", value: [
                     { type: "trace", message: "Hello" },
                     { type: "error", message: "Oh no!" },
-                ] })), index.h("fieldset", { key: '8c0058981fce71d9c0ad7da4d942824f8a7cdf86' }, index.h("h2", { key: '665eb860faa708d6d360e0b8681649761f2691aa' }, "Test of different kinds of notifier"), index.h("button", { key: 'aa198c236934c71d65c9b99e3d0adece35b2c953', onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: 'f800d60b1e246126aed3ce855428df77c2d1fadf', onClick: () => this.noticeWarning(Notice.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: 'f4b5067e97e398694af25b5ec0c708fcddf6daa0', onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: 'd501e8cbe7b87960dbec82d5b885e355260ef115', 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: '2c2dfc9f56fee1f2388ba02419fe4dd66ec1ebe1', 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: '52f4194a4be483ef45a3b931941914d81b2ec721' }, index.h("h2", { key: '6a26c2898bfd513afbcf4aa4e48b6466563e3cb7' }, "Smoothly spinner"), index.h("div", { key: 'd4c3cf6c4759e9d4b88b32f1deb92c6449a2c4a8', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: '28a86d30661ae904de890ec33f73176baf82d478', size: "large", style: {
+                ] })), index.h("fieldset", { key: 'd6e421224c8f4dd6983034a26f328269fe3e4ffe' }, index.h("h2", { key: 'a4f47a72bae094bf2210f9d77b6d8762e2a91198' }, "Test of different kinds of notifier"), index.h("button", { key: '8eebb9fc2c00148ddbe9115b5b0b6bfaf6b3838f', onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: 'baeb7efebf592753d74749cc4742f4f49d0a3164', onClick: () => this.noticeWarning(Notice.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: 'e7ec7e2b5e85b4c048eab1cfc73d53a5ae361272', onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: '1b375a004068949d0db3a8b34baddaffed539ffa', 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: '071945158e717d117332ec2702e6c341c1321bd7', 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: 'bc861c25d6257e1150a2ab7311cb40a44c3c811f' }, index.h("h2", { key: '770014f272d53d09caccce2f273a46c8966376d1' }, "Smoothly spinner"), index.h("div", { key: 'b076f998fcc26b9a3d93a9f8ed79b81648783817', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: '521bd1d171219266d50c72b8fad91347b9f13417', size: "large", style: {
                     "--spinner-background": "200,255,200",
                     "--spinner-background-opacity": "0.2",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '97b0f5f7c5854a3391de3a990576b2214125a433', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: '84bbec6c4056103403d7926caa443b754210abc2', size: "medium" })), index.h("div", { key: '28c1dab0aa2b9c9868ea7c18430ca296e3380f24', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: '284177ca1fd3006c4b32c7cc51ea860f3d138f14', size: "small" })), index.h("div", { key: '6de48ef5da6cb1ff88182459fe2df95b7a019724' }, "Icon sized spinner on button", Submit.Color.types.map(color => (index.h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
+                } })), index.h("div", { key: '39e35eec4b11e97c0781e9cbf74cad1ed8e6b47f', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: '7ed3b883321515b2ea6382f5ac2f1912ca304cad', size: "medium" })), index.h("div", { key: '9b3d8ee30f82d2fc746139da4fed10d61838f75d', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: 'eec7a7330c8b2e6eb650c78175226eac42457a0f', size: "small" })), index.h("div", { key: 'c75497803187b7ed0a9709316de717c761e400bf' }, "Icon sized spinner on button", Submit.Color.types.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: '36aabdac440c8c0616879da72d87222ab6d5e381' }, "Spinner with overlay"), index.h("div", { key: 'c9f734ea644ed1e6f4b66032b630729539a066b9', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: '9b24fd505417c5a9f307075c1f1dfdc8b4ec694a', 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: 'bb9cfa96d869982be98992978f4af7b30bbad06c' }, "Spinner with overlay"), index.h("div", { key: '3ddafed6f606a7b4f2398ec986d207ec06f1b28c', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: '0345c5cd50bcded90f821522aced6e065e6b9b2f', overlay: true, size: "large", style: {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '939257210ab2fd4a42aab6495d2de732ace0be4c', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: '4992d9f39e4003f79a97df99895422bd3b9f9281', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '5079f8b97572b854fdf529401454373551d2492d', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: 'bd8fee5a962af4c486c97b5bbf8fbc5cddf8c88c', overlay: true, size: "small" }))), index.h("fieldset", { key: '2138bd4db078b74783228d3e7689e05d3dffaddd' }, index.h("h2", { key: '27165319ae5ef2892151bd43bd8654b2a2667b79' }, "Smoothly summary"), index.h("smoothly-summary", { key: '6314ef377f497c474a10790633c428538ee3d877' }, index.h("p", { key: '794522abcafda9efae44f7feedb6f76b12a90847', slot: "summary" }, "Some title"), index.h("p", { key: '9681ffdd1181f5a830b1322510470ca2aebddb34', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '6e1778f81231237b89c37c27f710e9164c93d84d', size: "large" }, index.h("p", { key: 'bc820ee50d025f80f81d532f662c20740fd3ba92', slot: "summary" }, "Some title"), index.h("p", { key: '2b5aad0e477635f99055663bf26df5f058a1de45', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'e2a8d1ab0b47ad831bc6f2563c21d8bfba8a52f9', color: "danger", fill: "clear" }, index.h("div", { key: '658b66b10bfc9154c6e28495b07c1fdf30470347', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: '059e46a1c326174fad190317d32458ff42736c6b' }, "Person"), index.h("smoothly-icon", { key: 'b3d4711fc918a6e9f00019b978cac3ae30966e2c', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '5d8c22fae1af34359277bf1e44b6be88003a389d', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '6fbcd16d9d626a16ae6aa298709f3ab5fff8754e', color: "danger", fill: "clear", open: true }, index.h("p", { key: '9cabdab729c0a0870c2c0005dd07ccde5f116353', slot: "summary" }, "Some other title"), index.h("p", { key: '969b94ec23fea02153d7e55026ba982d2cee1ace', 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: 'e59419b10271d0bb1c68250a499aec4867c7f9ff' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))))),
+                } })), index.h("div", { key: 'f3591b6f3fde95a695a8798093d64a172de22b7d', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: '3b4325b5bdc0d6b0dedf3f6135b6b195a031e617', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '65086065ca62623b79516555557fe376cd67a0bd', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: 'f40e061862fe6073a03d3172929f98699682c23d', overlay: true, size: "small" }))), index.h("fieldset", { key: '7fb21daf4a1055cc71a24e32d1f6d5b6ae67649d' }, index.h("h2", { key: '1b51b4e0a27f6768ad567f3b8079d92b08e03e17' }, "Smoothly summary"), index.h("smoothly-summary", { key: 'cc85bc4b109549bcd17ef0de0fa4b7ad6656f79b' }, index.h("p", { key: 'f7a3438c8b5b9695993fb47e2074d51782b94d69', slot: "summary" }, "Some title"), index.h("p", { key: 'adb845d839a95fe417939b81bf30ed78a0ebda5d', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '56c457d68861ff581638feb9ad3bdb0f53a9ca6d', size: "large" }, index.h("p", { key: '0613fac81793cd6a62f588a6b0ae43ac3108533b', slot: "summary" }, "Some title"), index.h("p", { key: '9b83623a5f110d63ce3959f630d72d35c809b67c', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '03800dd0e440f3e37522ef6449305a0941291fe9', color: "danger", fill: "clear" }, index.h("div", { key: '8ea22b6502a3007e2ffa64f53e09ba467b28d373', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: 'dc5d876535f2a7ce988480c9d7216700acadb175' }, "Person"), index.h("smoothly-icon", { key: '0df3d60f0951690bde59e6ac9c62e4c67e659ddb', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '48ddd117ede1c4f3cb38331aca78557fdb24f4f4', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '69c98446452d21cb77aa87d2c42e55823ccfe9f7', color: "danger", fill: "clear", open: true }, index.h("p", { key: '0efa336c417ca0cd48287377f92d9963812db706', slot: "summary" }, "Some other title"), index.h("p", { key: '5f97351289d490cfa5e599ea2380fd949ff5bea1', 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: 'd44002b2d289a6ce396dc7fbc491d55fbbea5fae' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))))),
         ];
     }
 };
@@ -3883,7 +3883,7 @@ const SmoothlyDisplayJson = class {
         this.value = undefined;
     }
     render() {
-        return index.h(JsonValue, { key: 'cbe22bb544dcc67941a62c0a634dec20b6ab6b6f', value: this.value });
+        return index.h(JsonValue, { key: '3d26ba2ef7b373ca4006aef1ae2701f2a291600b', value: this.value });
     }
 };
 SmoothlyDisplayJson.style = SmoothlyDisplayJsonStyle0;
@@ -3914,9 +3914,9 @@ const SmoothlyDisplayJsonObject = class {
         this.empty = this.length == 0;
     }
     render() {
-        return (index.h(index.Host, { key: '5ea56a5970c63875393edf6ad80f07702e0c06ad', class: { empty: this.empty } }, index.h("span", { key: '15038f9f9b8bd196c72d07fcffa82f594bcb779c', class: "open-bracket", onClick: () => (this.open = !this.open) }, this.openBracket), index.h("span", { key: 'cecf7661f61f8be398431ef02820e364d172e7e7', class: "content" }, Array.isArray(this.value)
+        return (index.h(index.Host, { key: '69c80504ab59838514a2fd8fc460ab1e0a0d4d32', class: { empty: this.empty } }, index.h("span", { key: 'dd255f1fd2cb88b04f385ac0e8851117dbcecbc5', class: "open-bracket", onClick: () => (this.open = !this.open) }, this.openBracket), index.h("span", { key: 'c9afda12f8e90d33507c03fc1040117993eb6c75', class: "content" }, Array.isArray(this.value)
             ? this.value.map((v, index$1) => (index.h("div", { class: "indent" }, index.h(JsonValue, { value: v }), index$1 < this.length - 1 ? "," : "")))
-            : Object.entries(this.value).map(([k, v], index$1) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v }), index$1 < this.length - 1 ? "," : "")))), index.h("span", { key: 'ce3a88a952cf48ea03cb4340c36595e60598a0a4' }, this.closeBracket)));
+            : Object.entries(this.value).map(([k, v], index$1) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v }), index$1 < this.length - 1 ? "," : "")))), index.h("span", { key: '912dbff21f497111d5b80fc1d242ab6bebfeb4c7' }, this.closeBracket)));
     }
 };
 SmoothlyDisplayJsonObject.style = SmoothlyDisplayJsonObjectStyle0;
@@ -3930,7 +3930,7 @@ const SmoothlyDisplayJsonPrimitive = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '13de05bf976b78531fe740e871f0b16dff676e42', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return index.h(index.Host, { key: 'fe00a6c89a043a18fc8ec8f216d327baf97329b3', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
 };
 SmoothlyDisplayJsonPrimitive.style = SmoothlyDisplayJsonPrimitiveStyle0;
@@ -3944,7 +3944,7 @@ const SmoothlyDisplayJsonRecordKey = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: 'a281cbd810c9d5d4dc256c822ae1450b9a2e1d07' }, "\"", this.value, "\"");
+        return index.h(index.Host, { key: 'fb95960bdd9eda2b7845d795095b1e038ced28e9' }, "\"", this.value, "\"");
     }
 };
 SmoothlyDisplayJsonRecordKey.style = SmoothlyDisplayJsonRecordKeyStyle0;
@@ -6973,11 +6973,11 @@ const SmoothlyFilter = class {
         this.filters.forEach(update => update(this.criteria));
     }
     render() {
-        return (index.h(index.Host, { key: 'ebd82cd8cbbc99d917cef5c365f47ddff9828d7f' }, index.h("slot", { key: 'a2fe628a38e0322ba1b013292d79beb0957137f3', name: "bar" }), index.h("smoothly-filter-field", { key: 'fa8584cc58b38b7071c1ab5ddb4704ff9731e697', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '63f64a62a238086da3dfadefa07d7bc27679f462', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
+        return (index.h(index.Host, { key: '2ad8d93c257f863de6caa9a35aff1607f90e0a79' }, index.h("slot", { key: 'e9d4f2a724afc0f3fefdfb15bfd08d0d77109bb9', name: "bar" }), index.h("smoothly-filter-field", { key: '0bfc507e52c9b006d70259cc52f1a66959bc06d3', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '36b23591932af38b3738e5d14f463c688525d681', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
                 this.clear();
-            } })), index.h("div", { key: '0d6425d247990dd102592df2e853b5b90a3848c7', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: '84fcd16897f41072c072455fa5f228d587123e56', name: "detail" })), index.h("smoothly-icon", { key: '46b488fbcc318268862fdbf33e2bc57009d37eac', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
+            } })), index.h("div", { key: '00ffc0a9f85c33a553f84ccdf1368b006bbaf77f', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'c98f8b6c3eb68a1de8abc10d4ed1cbf1d309419d', name: "detail" })), index.h("smoothly-icon", { key: 'bc0c39504092e67f206edc73bdc0ea4287aff746', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
                 this.expanded = !this.expanded;
-            } }), index.h("div", { key: '47de5370dd251156280301910fe8dcb37841b8a3', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
+            } }), index.h("div", { key: '11f9418766105243446c3a324d964b3cdca7836b', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
     }
 };
 SmoothlyFilter.style = SmoothlyFilterStyle0;
@@ -7000,7 +7000,7 @@ const SmoothlyFilterField = class {
         this.smoothlyFilterField.emit(parse$2((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""));
     }
     render() {
-        return (index.h(index.Host, { key: '47ce0c7f9fda6c5cb100ca07c391a0a096179659', onKeyDown: (e) => e.key == "Enter" && this.filterFieldEmit() }, index.h("smoothly-input", { key: 'adea40a228f000b7b5de9f70455dbb79f38271b5', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => {
+        return (index.h(index.Host, { key: '4af776396b117f885d4fdf1264ae0c04e66a5b3b', onKeyDown: (e) => e.key == "Enter" && this.filterFieldEmit() }, index.h("smoothly-input", { key: 'fdffa9296e56f443cefee7fac674b0f354bdb526', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => {
                 e.stopPropagation();
                 this.filterFieldEmit();
             }, onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => {
@@ -7079,7 +7079,7 @@ const SmoothlyFilterInput = class {
             (rest.length == 0 || (!!criteria.criteria && this.findInstanceOf(criteria.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-input", { key: 'cc7e374c68c07fb1f396d5b3712171aedf37ec6c', 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: '1e690c81b79563b17411b59431118c2d078bdb0a' })));
+        return (index.h("smoothly-input", { key: '4beebe993a0957e009afc7262652da7ff35d830a', 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: 'efb4797318b2ca818d46c65b1fa412091076dd84' })));
     }
 };
 SmoothlyFilterInput.style = SmoothlyFilterInputStyle0;
@@ -7188,7 +7188,7 @@ const SmoothlyFilterSelect = class {
         return result && this.property.split(".").reduceRight((r, e) => property(e, r), result);
     }
     render() {
-        return (index.h("smoothly-input-select", { key: '53d0ce743fd218bdba1b985a1744eae6e8da2d6e', 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: '3e7d1a212be34f8060cd3f68cfb8f6fbfa00b8ed', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: 'cd4a5bb05dc6e82c9e3d4c570c6e6c3fce60a2c7', name: "items" })));
+        return (index.h("smoothly-input-select", { key: 'e09bb33d5fdc1776043adbc2106a91e14566b32e', 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: 'f35ae95918b7298ed0512c7783a8f7474caedfc0', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '6161367a70ba5f8b5fe52b192500930f4a1160c1', name: "items" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -7272,7 +7272,7 @@ const SmoothlyFilterToggle = class {
             (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-icon", { key: '3135f5f1c212c41ff2ffc02e9477ba6ccde7f49c', 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: '2a23201a2b2e3415a977022c7cfba0b5510bfabf', 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;
@@ -8258,7 +8258,7 @@ const SmoothlyForm = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '736779864510e8f2532fc0cd9316e4b8b937e344' }, index.h("smoothly-spinner", { key: '0b64e40d745a49b97b3b446477fedc888ce219ce', overlay: true, hidden: !this.processing }), index.h("form", { key: '1f2387d645a21f2ef678ebfce20ebb643d2bc0c4', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '6ec8e25aada27345c4fad9a0da26d094d15a2a8b' }, index.h("slot", { key: 'dced986acbcf7c8e0676d15495cdb7db4b268825' })), index.h("div", { key: '6ea858a9ccf1992cb7885321b5a37799b9545e28' }, index.h("slot", { key: '7772ec80d7c259d7ec7a46def7322655379c4986', name: "clear" }), index.h("slot", { key: '4d3f18512b79b121611645f39316fdb5ff8af39a', name: "edit" }), index.h("slot", { key: 'c4a4d1b1e2e86fe7e4bbb702f86c5cccbf481810', name: "reset" }), index.h("slot", { key: '4296beab9b910faaac0d6faa500a42f50fd3d09e', name: "delete" }), index.h("slot", { key: '3234df6744a1450f11c44b50c6baf075dea040c0', name: "submit" })))));
+        return (index.h(index.Host, { key: 'd1ffd561b66358ee422777a9d4da01d731947019' }, index.h("smoothly-spinner", { key: 'eceadae23d4c50672d50d6dd298988abfb0a5373', overlay: true, hidden: !this.processing }), index.h("form", { key: 'ede3fd3595b146f4c2a47669fc8a577979603db6', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: 'e35e9f58883a89a2ae8bc5a47df840b52fdc2157' }, index.h("slot", { key: 'f671fd4adf2781108727ddf336fd8efb68449449' })), index.h("div", { key: '66e4530ce5f4c9cf40e075c5364806c96ff56e7f' }, index.h("slot", { key: '5a375ec3761a26be55df99dcee95d38196626694', name: "clear" }), index.h("slot", { key: 'fef467b834408170721386cc40bb5d294ed9bc0a', name: "edit" }), index.h("slot", { key: 'caa0b5aae0d993d0727b30fcd48b57f8c958ac89', name: "reset" }), index.h("slot", { key: 'c5f7a7e68d80d917f5dcfbdbecf7ce43fc710507', name: "delete" }), index.h("slot", { key: '41aad02470b50aa0c0145789d43dcdff924b2150', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8276,7 +8276,7 @@ const SmoothlyFormDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'df32b150aa8b30efb66374fbf764b1f5b165795f' }, index.h("div", { key: '3a4f91a439c82efd64547119e44e5be4a8640e49' }, index.h("smoothly-form-demo-all", { key: '148fd367d630ef32c6c985174e68ffb13439cd3e' }), index.h("smoothly-form-demo-card", { key: 'c030731d04b07504313d09d2f55ea9a557d0e552' }), index.h("smoothly-form-demo-login", { key: '91e927ee2d838b56d039f31b820d62f25d387847' }), index.h("smoothly-form-demo-prices", { key: 'c9c52644c089f189cfcc173e0588fdde73391717' }), index.h("smoothly-form-demo-typed", { key: '2aa4b5ab799f263fb21100922a95329f5b0d4df1' }), index.h("smoothly-form-demo-transparent", { key: '4e119d3b0df455b39ba25ce0c7de3ee5d64bb0fd' }), index.h("smoothly-form-demo-controlled", { key: 'ce778fc168e80b081825e303cf0773485aa5b211' }))));
+        return (index.h(index.Host, { key: 'c74d16b211ddd8b5bcdf07736b6094941f6b5c0c' }, index.h("div", { key: '945783bd0258d8253f8a5bc66f5bb8a9c2d7d1ba' }, index.h("smoothly-form-demo-all", { key: 'f2cdb56e663a0dde43d4cb01c1be4bd5e7b29846' }), index.h("smoothly-form-demo-card", { key: '1007853056ae419d056ac8150b75d2a9fe2b8da5' }), index.h("smoothly-form-demo-login", { key: '8f97e012011d5decb579dc2a0fce10227f53f55f' }), index.h("smoothly-form-demo-prices", { key: '1c916bb428a35f641a4a09cf3e08794a5dfadcdd' }), index.h("smoothly-form-demo-typed", { key: '7c4df698016dab3eb1f94640d7adbdc7174ab521' }), index.h("smoothly-form-demo-transparent", { key: '1c962696f3669d30f2d62ff61b783ad652c3ddbd' }), index.h("smoothly-form-demo-controlled", { key: '639f9a34ac0d5d19b858985461a756419ef07d1c' }))));
     }
 };
 SmoothlyFormDemo.style = SmoothlyFormDemoStyle0;
@@ -8286,7 +8286,7 @@ const SmoothlyFormDemoAll = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '8efdcc86920a614fe3260f89eaf5b07f5ce90c29' }, index.h("h2", { key: '27298ba0b1a10b8167233626720c24ba505880a1' }, "All inputs"), index.h("smoothly-form", { key: 'be78e1c7f033576ec0a61f33b1d55995f77f1fce', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { key: 'fc38bf27ff02e101c7e202adb6d025078c907e16', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: 'e5f393402f0cdc0ff60d35408699c3c51102ef8e', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '5a8cf9ec025e4558d936b7982cbdcac019b2479a', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '7a8b7bda46dacf7ec6e58bfb8446fffac2e2227e', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: 'db4a2656367f0867526608b2ae5928bf9835fada', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'ea6bd58006ecebfd691dd5566dd64f3165b138e0', clearable: true, name: "radioFirstInput" }, index.h("label", { key: 'd3ed95bd9d8c8dce013def1f6adeca5d69c2235b', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'b8cd9eb3003792dd7059250b7eaea7ea600601b8', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '61e724e47f07c9538f4b2190c00e580502e842cc', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '829f8dd3e363b734cbd0a1f0aed0ac42c9cbf619', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '42b72645133e8645d730a6858a7a46683f2d86cb', name: "color" }, "Color"), index.h("smoothly-input-select", { key: 'bac97f8ad5703643442a480f6db8a7a5dbba3325', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'd66a112a34a93cce11b7205fcf6dddf6138371c5', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '1aa837f5be101203afd7e5d5400f322f1efc2422', value: "1" }, "January"), index.h("smoothly-item", { key: '1e7bbd52c122cfdc296f22c7d3b5f93bfd8f553d', value: "2" }, "February"), index.h("smoothly-item", { key: 'ce24a807731086f4fd97acf965e38d87ef6531ec', value: "3" }, "March"), index.h("smoothly-item", { key: '609c3c8126b61162032df285b2d9d208d30143ff', value: "4" }, "April"), index.h("smoothly-item", { key: '84eeceaee87a4761370c21f261b44df67e55825b', value: "5" }, "May"), index.h("smoothly-item", { key: '7b3ccaff9285e910e72d11b057bd849be6072de2', value: "6" }, "June"), index.h("smoothly-item", { key: '4b198d7a57760906d3eba4bddfede7fce425808d', value: "7" }, "July"), index.h("smoothly-item", { key: '2208337dcca159962d947bc4ad581d1a6367675b', value: "8" }, "August"), index.h("smoothly-item", { key: '86de01905a9de66be7e70cde1f36d291746d17d7', value: "9" }, "September"), index.h("smoothly-item", { key: 'db6c0cf0af84dd3ff588cd1940b9529732dd4aa9', value: "10" }, "October"), index.h("smoothly-item", { key: '8473e9cb735244d16610ff6cf0cb3edcd9e670f4', value: "11" }, "November"), index.h("smoothly-item", { key: '8e6bb8b3ee92de8389cb0f0448a881c09663bc33', value: "12" }, "December")), index.h("smoothly-input-select", { key: '512ffa70fa30225ce01c46e3230eb32188204f80', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'f0cc448c5ea0d4c86cea9c2369ce949f3042c7fb', value: "folder", selected: true }, index.h("smoothly-icon", { key: '667d65eb16d0a7df4648e5bc9f5b7ae3fe25be95', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'fb84b603eb5f9149dffe629363cddd01827d071e', value: "camera" }, index.h("smoothly-icon", { key: '3995a313f3b7e6ae4f6e1b8ca8f13dae9cd4c84a', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '4c508be86d0035406b200b1bb10e47c36baba38b', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '7005bb3e170fca3153891a6b74a5205a0ea98f60', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: '2bbde558bee78e51643cb9375c6261c853f9d0da', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '494261943ff48b67d4c93ff885dd12e7c7581196', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: '10b60acbe0e9317a6d6123936b0234aec7727024', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: 'f75b6be6f105a757c25a3181f9b9df2c7d078f15', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: '08a92683788673328a9c7103d2cbdebb7ba74f77', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: 'e4c48d81d144c9ccd2d518dc9cc55c27da879d66', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: 'a1a59873df5f54e612e756f581879dd4c0541f62', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '71521e3fc6764d6c5a7915be293508e856d49a5b', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '27dfadc1fa0efc207cabf2ddd068aece30e6c99d', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '606e61a3b8e0098faa601528e9db0d9e979f9b74', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input-clear", { key: '06a227d0876ebf7bee98435e0e69fb23bd0f88ff', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '74e578ef60ef23624425e4b08ceed20d32b387bd', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'd588b035b1055868fd33cebd2b5d1d285100bb75', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '265097d5c7046ce71f5a8d98437ef89cc8d6617c', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '7e08bae7b695ec42bc9987d1227ebd0c1fb6efd5', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+        return (index.h(index.Host, { key: '7fccf5c4d19f7711ad8695609719d5b157dc69e9' }, index.h("h2", { key: '471984566caccd53c58d182275dfb5b3dffd1438' }, "All inputs"), index.h("smoothly-form", { key: '5c1218afb61a3988eabb866b9fe02ea5b300a435', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { key: '0a6b1a91d26a5c8e3473106e3c4516422fea91e5', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: 'ea981d385c7dc19b66f0a4cfc894237191b6d3c3', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: 'cb8e0868d293078fb02a9db717d3d514018a958c', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '5fef062c44bb58ce3f0e54b0700c17ed3712f603', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '48cd3674819b5f9c5bbf7229c7dc1a11ce207029', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'f632ecb8ce32185bccbdfb05e1d798109d5096e7', clearable: true, name: "radioFirstInput" }, index.h("label", { key: 'b9e383c13926bdf4dbb22dce8e6f6401476b24cc', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '6ca7d57895ea5f0c443e4840403d44865c8b7818', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'd4ea603ad31f1508e733f3aad147e74b69f1dbf0', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'b7b8bff5bd43c8614f716b249894aa1daa5d1397', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '9a10ae8d6ebeb97a4df9c628893410328612cfb3', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '82012ccbe5ad904b08d36ba228f358673de4d8dc', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '0717df96b6d931a55d5e8106e6986fc8ed378f27', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '637c2dfab05d45987bc3dc946ba370ff58a9dbfb', value: "1" }, "January"), index.h("smoothly-item", { key: '7e983399c8e7e01d2bf20deaf83ac60674e19946', value: "2" }, "February"), index.h("smoothly-item", { key: 'e37cfb5ab521c29c5f8bce7e29b02bf1f6692f50', value: "3" }, "March"), index.h("smoothly-item", { key: 'a402e9b2b9b3e87560410adfc7c3fe17ccc97ec7', value: "4" }, "April"), index.h("smoothly-item", { key: '17ca73c251736f85e1d20bb9a4da97d17814f175', value: "5" }, "May"), index.h("smoothly-item", { key: '458ce809350c43dc1108093adcf6146e8865cc54', value: "6" }, "June"), index.h("smoothly-item", { key: 'ac8ed6eeed2595c4f874db61935467b6ed25a569', value: "7" }, "July"), index.h("smoothly-item", { key: 'f5ae0d9296767044528b6a399cce59a0dc7c49b7', value: "8" }, "August"), index.h("smoothly-item", { key: 'ee40ff3ff3eb300cda2aae61c6c779e2724f9e78', value: "9" }, "September"), index.h("smoothly-item", { key: '30f37c74dc2d203b118cda7279236d0c94547fa7', value: "10" }, "October"), index.h("smoothly-item", { key: '7569c99337b91ace042354fcc516744184876bcd', value: "11" }, "November"), index.h("smoothly-item", { key: '8151453cb0a3836441314e950a8efbfd790620a7', value: "12" }, "December")), index.h("smoothly-input-select", { key: '427a419a6a719791c5abb13e0f9f68ce59f6633d', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'd1502f3ea045e3505b359d23cf5fb0d28515bea1', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'ab366e1c08180b565b33c2aaf712b1ecfe7e812f', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '82051e2e76561165fa0004cae3e760ff29e8d7c2', value: "camera" }, index.h("smoothly-icon", { key: '700786f14fa693272ff3f234a8310ec5a59954a3', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '7cfb87c57079cedbee64c125640164cf1966e42f', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '6cab9166150011d77cb04ebcfa4affecf887f796', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: '83b36c52a48f7c85cbac371ae5e8fb01f141af47', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: 'd5e4ec95a8bb35b43fc43ee1ca63eead1cb19619', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: '390ad54e2f218b5d38ac4aeac2e919e8824626d4', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: '07c5605c472c396c3e4cbc75370fcd13ba62cefa', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: '3188c09cd35abe3a23cd315dfdf766a21ebadd9f', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '0199805579bec70f3a0375c7afefd285b89f77dd', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '8eb95c3ff1997872b501fff1c6c66288452402af', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '45287fc3bcf3f8a01bcf34fea16d13158445939e', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: 'f14b8048b1bccbe8705ea1e90143c1cce1142298', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: 'c6c9d7070256437ef4d96fcb523bcb4870dd2edf', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input-clear", { key: '5375e433e8cce6f4a2af6004afeb1302bd06835e', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '7ddfa7ee859add673ebb72aca373da4278b394a8', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'df99e2992346d11f67414cc6b6196c343946c21a', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '67d6db58db69d75787307ab1f957de268979a471', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'ab3d640af27a0c10a3cfbc118303e505b3017a97', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
@@ -8295,7 +8295,7 @@ const SmoothlyFormDemoCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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: '7a7c8aea30284ef21d5ed26bc247747db0a6bc7a', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: '5cdb137f44fa8fd5bd4d7fc1235181eab782b990', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: 'c93b0bf9f9d8912847b4a30a08e56908666042c8', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '072abcd3b008de38945a48d4341415e4ef5fd28e', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'b04184c06dc2626a40efb204a7b220d50e28bb18', type: "text", name: "name.last" }, "Last Name"))));
+        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: '9f524be38ed6227e0814a017d17dcf3d4f83aed7', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: '823628ecc1ca2912db9a9b5a03a460fd2181a663', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '52e230f51f0609f7d488921e0a28b3f4022845e6', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '9cbca645f643cf5fe7ec8b1170ec65bf8ed5e5dc', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '92d3fe4508d9419be906e708c926a540d073fa28', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
@@ -8331,7 +8331,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        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" }))));
+        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" }))));
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8343,7 +8343,7 @@ const SmoothlyFormDemoLogin = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b05ef077470ee21723ac37ed34fe0c8a28505581' }, index.h("h2", { key: '8bb34fd1d5d5b786ad0d46551fcab48f3ba086cf' }, "Login"), index.h("smoothly-form", { key: 'fcabccecbe3eba3c52d37d8de5d7fb6166b395c1', looks: "border" }, index.h("smoothly-input", { key: '7c6b7e53c5f5cf4d54382400b111e46f8d7e5ad3', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: 'e1013478523b2962315a56ab1d905bc31ea1d831', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: '585a0a3c83abb0402013ac5805cacb7d5b2dcf45', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '7faef32401576373651e6552b1f1d32a747b31e1', slot: "submit" }))));
+        return (index.h(index.Host, { key: '749ecbb750edb74847e777caf98a051b34086473' }, index.h("h2", { key: 'b9089ecdb772353d78988a0fc7ace7068be083b9' }, "Login"), index.h("smoothly-form", { key: 'bb9c29bfb54d7cdaf8a8bbd91246a7bd83b76151', looks: "border" }, index.h("smoothly-input", { key: 'ce7327b70c3582927919c901729f247c101100bd', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '92564eeaf0f95001f34cb540217af337b0c95670', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: 'aead8ede51afe1364958c9daa6e44498f35b0daf', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'cedd0122476db6cf4a41473dd0260e2d13677d48', slot: "submit" }))));
     }
 };
@@ -8352,7 +8352,7 @@ const SmoothlyFormDemoPrices = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'df39fa9bbe457d368917c3d4132fae2a761f59f0' }, index.h("h2", { key: '2e8acd7cdb9384886b04c7f44b6f3852110dd7ea' }, "Prices"), index.h("smoothly-form", { key: 'f2bdb0df6544c6e816fd3005437cf48cdf47d8c0', looks: "line" }, index.h("smoothly-input", { key: 'f2c1bb404c48ad78949b4b134b5a3a9641b712d2', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: 'f8b931855de809de78591da5ee97c2453aa7cba6', type: "price", name: "crowns", currency: "SEK" }, "SEK"), index.h("smoothly-input", { key: '5a383712d77ffe54c0b306ea530f449b2757d635', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '47919530e5bff93ea26d77a1cd17a1bc3a7ec8de', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '6832dc471faa014631b5301aaee1c7c3e2a265a8', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '00632647dec5baec421a7ffcddecf8c8cc046871', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '7fa76a2b3a68dd0ca4c4cbad6ec09e3e6be35ea9', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '3aea91a7bcb8c9cd3469f8f3bd690945398616dd', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '2516e32b4152a7c8b808e361735bd3db08693542', slot: "submit" }))));
+        return (index.h(index.Host, { key: '09f626899ae1d97c861cab477acbe84e84306af5' }, index.h("h2", { key: 'b273ebb87410548224b202923e55af4b79d67bd1' }, "Prices"), index.h("smoothly-form", { key: '4beb2af3733ef34b86c375ce09a51aad6a4648a6', looks: "line" }, index.h("smoothly-input", { key: 'ce15ecf379cccf7832ce7ad96bf9383b63abfceb', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: 'd9d01b5b41f52d2a4540efa06da00ab3903a772e', type: "price", name: "crowns", currency: "SEK" }, "SEK"), index.h("smoothly-input", { key: '6cd7dab79094831d2d28740a014b4461fb0fc22a', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '3e0ffe35835eeb9360318358abf1ab92a032f8bc', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '809b0b9a68b44e14d35df0a5ff171e163ea341d6', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '4f23a41c3de9ad0fc6479d1ec2c5fc45952a7e68', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: 'd159bb528a647cad0e167c10306ff804f50bf7ea', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: 'ca2e554f8843cc732a345a87ec4b7140273d22c4', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '2cbad5d27409e33e8063b5b9b9b1bd5b70e09ca8', slot: "submit" }))));
     }
 };
@@ -8361,7 +8361,7 @@ const SmoothlyFormDemoTransparent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f0a0bbf8cc142123ed7c21447bbab14a5f4b7bb5' }, index.h("h2", { key: '582e2946ceb63295fba19649b7b03f90bc2bf69b' }, "Transparent"), index.h("smoothly-form", { key: 'ba25c8ee33e19cea9ae6e6cda01523152205a336', looks: "transparent" }, index.h("smoothly-input-file", { key: '2d62e216450a721428ee302f0076c869cb9b4e6e', name: "file" }, index.h("span", { key: 'e794a73d94f67c68da94cf55c764baf03b604df3', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'dda2ff66d74e4a41f12cbf2322aa073b23e97ff2', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: 'ac27de2e58840496627f04ce936296ace6f4d5ec', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: 'eb82edd8cbf7c5b3f9b8667d3805eb9326b40e26' }, "Date"), index.h("smoothly-input-date-range", { key: 'b4503c85f944780b34cda8d4d2bdd725a12c7820' }, "Date Range"), index.h("smoothly-input-select", { key: 'd0bb7330113a84d1cb111fd571a6a55d103739d1', name: "transport" }, index.h("smoothly-item", { key: '270df89999d42ee8f8e95a9a4be84dad29b7e445', value: "plane" }, index.h("smoothly-icon", { key: 'a8b2d8ff0429e076ea3e3c9ccbb8b7aab3b796b2', name: "airplane-outline" })), index.h("smoothly-item", { key: '858f66a051279a9fb45b1b5af4c07e345ea9225f', value: "car" }, index.h("smoothly-icon", { key: '1fc03d0c98202d6fb4339e26adbdbb961c9a676f', name: "car-outline" })), index.h("smoothly-item", { key: '4dd533512ca3f27b019c6423232dc75f517be804', value: "bus", selected: true }, index.h("smoothly-icon", { key: 'a5d13be0814478793dafa3eddbeb7f1be42a3de6', name: "bus-outline" }))))));
+        return (index.h(index.Host, { key: 'a5c9d572f699d18a9e8564b42f98f78ac0c7ac09' }, index.h("h2", { key: 'f237fd065aa52886ecd2a5071a1e643782485cf8' }, "Transparent"), index.h("smoothly-form", { key: '1b202ad56904654981f10867404fb92e7a726437', looks: "transparent" }, index.h("smoothly-input-file", { key: '95dacd7c1dc26ed5fe4c4fa0c318d183655dd4e9', name: "file" }, index.h("span", { key: '3be266fb372ff10d51e3d5420b33fe2e3c9ad16e', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'd5b1e896e5b8258e248afeaf3ab17c2084721bcb', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '908a13099c55281ba440ff056937b84ecb36eacd', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '83bc13e6a9246cef8c99271997b49bca8d2f470a' }, "Date"), index.h("smoothly-input-date-range", { key: '7bb03e9a827eb1eb7a9d83b3ac74667437584a48' }, "Date Range"), index.h("smoothly-input-select", { key: '1076b36a267552c574467fe576a2a3bc10594205', name: "transport" }, index.h("smoothly-item", { key: 'c5a32193f462902609fe37cb7d2d95511bf4f99e', value: "plane" }, index.h("smoothly-icon", { key: 'bfbb26addad4365dca28aea3f91b6c2c2194ef50', name: "airplane-outline" })), index.h("smoothly-item", { key: '25ba1a54ea8b9ac97f3b3a75eb63a07220b6ed73', value: "car" }, index.h("smoothly-icon", { key: '84c0243e55ecdf3630b084dcc37d7b9a01af5234', name: "car-outline" })), index.h("smoothly-item", { key: '7e415dab1bc61879ded2f5dd35c9deb3812051a0', value: "bus", selected: true }, index.h("smoothly-icon", { key: 'e435ade710b21a80f09d955c93594f31008b1ea1', name: "bus-outline" }))))));
     }
 };
@@ -8383,7 +8383,7 @@ const SmoothlyFormDemoTyped = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '90ddb68611f159887382735b04660a2e8a5d64c1' }, index.h("h2", { key: '732578eaaf9c149b1dc77095a505b48ece1ce5ff' }, "Typed Contact"), index.h("smoothly-form", { key: '6558369105dc17dec76237f3822541e1de5f7c40', validator: Contact.type }, index.h("smoothly-input", { key: 'e310ff7fbdadff265c829b8d2c43ad985eb0aa5b', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '704a906f3de598937ea7a9cc1e8958f87aff79cb', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: 'eb340389e2ed477479b1a88d27f6bff26c573fa4', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: 'f5a18573c34c2df63b063d62d65c187be829982f', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '2f568776cb8a05f15a2bb00eb8f82c151876f2b2', name: "country" }, index.h("span", { key: 'b123579d6d26adc72cbef9720ca25883985dcdd7', slot: "label" }, "Country"), TimeZone.Alpha2.types.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: 'b3a50714bc22115593cbfb87810904da97b808aa', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: '3cba7a5e27a561a7d2014ca42a33b0801f53598d', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'beb496bd80d5890e9c77cb02ffb91b32b3ba06ab', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: '812c0b71ac4dc733dd5811eff1861098339a2c56' }, index.h("h2", { key: '29adbd9b2a32981b00df0d09e0bb963e93b24179' }, "Typed Contact"), index.h("smoothly-form", { key: '762b6a6ba53693d657dfee24dac235ccf1b0b33a', validator: Contact.type }, index.h("smoothly-input", { key: '9d194ce8db5df6c03171aaa5c73ffb2c52e5b530', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '1eb83853a2557d03e49410444d95923739cbf6fd', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: 'aeac8ac4aa6df0824311e3ee1f71c044bd62f4ca', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '1457177b1cdbaf57346833bb09b04f41a628e4a4', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '4b89b4afe07c5f11ed258f77dc5cd8635855eab2', name: "country" }, index.h("span", { key: '5ea2623bba3cd13e193ee056a58f9c8124363c60', slot: "label" }, "Country"), TimeZone.Alpha2.types.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: 'a4d25e69bbd508c3b244a1e6e642254d7c9dea45', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: '713a205aa8011de01152888a971cdef955226b2d', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'abbb07f43538c139c0b2001afe72fb5a79cf264b', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = SmoothlyFormDemoTypedStyle0;
@@ -8436,7 +8436,7 @@ const SmoothlyFrame = class {
 };
 SmoothlyFrame.style = SmoothlyFrameStyle0;
-const styleCss$10 = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}";
+const styleCss$10 = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:flex;align-items:center;justify-content:center}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}";
 const SmoothlyIconStyle0 = styleCss$10;
 const SmoothlyIcon = class {
@@ -8481,7 +8481,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index.h(index.Host, { key: '2951c56d71a725fbc584ce8510fe81a782799b5b', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index.h(index.Host, { key: '1742c2ad0fa74608f29cc2a6f8b498ed9402fe7a', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8499,8 +8499,8 @@ const SmoothlyIconDemo = class {
     }
     render() {
         return [
-            index.h("h1", { key: '0db04c59d49ee1f0a5dda29bab89756bcf42a8ca' }, "Icons"),
-            index.h("div", { key: 'bdd03bdd4b692ace0b65fb6a82f0cee58d9c39f9' }, [
+            index.h("h1", { key: 'f3512a075872afc75e2038c840fbd3b50cecf7a1' }, "Icons"),
+            index.h("div", { key: 'fcb16817d9ea5e74ac73e2f6f1418c5106b1f753' }, [
                 "add-circle",
                 "add",
                 "airplane",
@@ -8969,8 +8969,8 @@ const SmoothlyIconDemo = class {
             ]
                 .slice(this.page * 100, 100)
                 .map(name => (index.h("smoothly-icon", { name: name, toolTip: name })))),
-            index.h("h3", { key: '8f8ac575bda17fd3189250b7060057b04f21c211' }, "Icon transforms"),
-            index.h("div", { key: '99005a42c04015b0a453441ed1071c50aa9a4cc8' }, index.h("smoothly-icon", { key: '0cfb1ec78d459a5aefa81f8dcfc7590d8c5993c5', name: "bicycle", toolTip: "Normal" }), index.h("smoothly-icon", { key: 'c75ce17cddc99034efc2c26154bb27049b881bc7', name: "bicycle", toolTip: "Flipped horizontally", flip: "x" }), index.h("smoothly-icon", { key: 'e5435c7f80308d3eff5de597fefe6abe1ce142dc', name: "bicycle", toolTip: "Flipped vertically", flip: "y" }), index.h("smoothly-icon", { key: '980646ccec7fa993b6fc7183113f91a0a090edc1', name: "bicycle", toolTip: "Rotated 180deg", rotate: 180 }), index.h("smoothly-icon", { key: 'a51f7fc4f46bad230d8292118c6d28b3d4db95aa', name: "wine", toolTip: "Rotated 60deg", rotate: 60 }), index.h("smoothly-icon", { key: '24b1d91d7e89285003a75714f99e0b06e3d5acc3', name: "wine", toolTip: "Rotated 213deg", rotate: 213 }), index.h("smoothly-icon", { key: 'd7d6fc77c0c664c134e753d816ed22312a5555a9', name: "wine", toolTip: "Rotated -60deg", rotate: -60 }), index.h("smoothly-icon", { key: 'cc2984dd8913ee001c0cd88c2fc14a7fca415354', name: "musical-notes", toolTip: "Flipped horizontally and rotated 45deg", rotate: 45, flip: "x" })),
+            index.h("h3", { key: '501452f507331f580923f889dd9b7121c6599b4d' }, "Icon transforms"),
+            index.h("div", { key: 'bc3613c35e4cb2a84883b649ce631902ab719c4e' }, index.h("smoothly-icon", { key: '96faa162427de01dd21a2ed02d762a38572294fd', name: "bicycle", toolTip: "Normal" }), index.h("smoothly-icon", { key: 'f368b1d783311a5a71ae52968e68b1644864fbdf', name: "bicycle", toolTip: "Flipped horizontally", flip: "x" }), index.h("smoothly-icon", { key: '20e96fde3b3745a7cdf601beb9ae7efa376feac9', name: "bicycle", toolTip: "Flipped vertically", flip: "y" }), index.h("smoothly-icon", { key: '8ac537ca0a8fb7565032342cc9571c16f1674b25', name: "bicycle", toolTip: "Rotated 180deg", rotate: 180 }), index.h("smoothly-icon", { key: '13ce885732847803283943e1dbad4276478684bf', name: "wine", toolTip: "Rotated 60deg", rotate: 60 }), index.h("smoothly-icon", { key: 'ccd4618d57dc520a0e4614e83974cef6172066bd', name: "wine", toolTip: "Rotated 213deg", rotate: 213 }), index.h("smoothly-icon", { key: 'e5a1a2720476a882f782192cfff8786a50576083', name: "wine", toolTip: "Rotated -60deg", rotate: -60 }), index.h("smoothly-icon", { key: '44524a04b1113747e93ce5dbff68324bc01ffbc6', name: "musical-notes", toolTip: "Flipped horizontally and rotated 45deg", rotate: 45, flip: "x" })),
         ];
     }
 };
@@ -9252,10 +9252,10 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (index.h(index.Host, { key: '069925780a0b5acc0b9609f062158a658e56fb04', class: {
+        return (index.h(index.Host, { key: 'b191fefbc78cb67975c2ea8968b5ce5cb19b351c', class: {
                 "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "",
                 invalid: !!this.invalid,
-            }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: 'f1afba093a6da103826579ceb35a88ec5e908734', name: "start" }), index.h("div", { key: '99809195dbfe8fad771e872dde1ec1fb5f5bdd68' }, index.h("input", { key: 'f0150119f2373d8ee4c56f0d9270ea34bd34cd3c', color: this.color, name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, inputmode: (_d = this.state) === null || _d === void 0 ? void 0 : _d.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_e = this.state) === null || _e === void 0 ? void 0 : _e.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern) && ((_g = this.state) === null || _g === void 0 ? void 0 : _g.pattern.source), value: (_h = this.state) === null || _h === void 0 ? void 0 : _h.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { key: 'db5f7cbddc4d5c4ca59b74a99058e6345775058f', htmlFor: this.name }, index.h("slot", { key: '6130e3d917ecfe24abc7197c80aa3999cbb4001e' })), index.h("smoothly-icon", { key: '844674b0e23038c3f3905764c11fdf7646151625', name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '8849a0667313e3002d2e189c52bc38ec0d5be267', name: "end" })));
+            }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '9ecd8379e8053696741298709724a317ef2e5964', name: "start" }), index.h("div", { key: 'fc5c6bce492617022ae5c455364518270e152e5f' }, index.h("input", { key: '40f80ac0297628d5146ec9423567759bacc79145', color: this.color, name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, inputmode: (_d = this.state) === null || _d === void 0 ? void 0 : _d.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_e = this.state) === null || _e === void 0 ? void 0 : _e.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern) && ((_g = this.state) === null || _g === void 0 ? void 0 : _g.pattern.source), value: (_h = this.state) === null || _h === void 0 ? void 0 : _h.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { key: 'e9e56d07217c595d3d9738173680f20131eff694', htmlFor: this.name }, index.h("slot", { key: '733a05982459fd689e6c878ad4812640d89d3127' })), index.h("smoothly-icon", { key: 'b63a1431a680eb2512e9983b8880953f04ce23ed', name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '2e99a8ca3659f041940559ba8d1982543678c321', name: "end" })));
     }
     static get watchers() { return {
         "type": ["typeChange"],
@@ -9327,7 +9327,7 @@ const SmoothlyInputCheckbox = class {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: 'a9b31ee67d599554b30c05475df6d4540efb1809', onClick: () => this.inputHandler() }, index.h("input", { key: '2bed6706d29638069370a8ddd1102ec12d251a99', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '401f57b493f0d14e2869c04d749f5b09ed22db5d', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '62edfe5a51702342946a30c19ce02fd1dc2510aa' }, index.h("slot", { key: '7c1a11e805e3749ee1dfb467d1d20cb45de41629' }))));
+        return (index.h(index.Host, { key: '6c7e18c54c89725b1e5064333fb2da3e2ac56dba', onClick: () => this.inputHandler() }, index.h("input", { key: '4b77da4c4dc491a7db84461ca33d363f821bb78d', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '800d5c591dd16e8140b09eab2855071a80a8a7e2', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: 'e78fa27f817eef5252a4dfe0eb98906ed87f4073' }, index.h("slot", { key: '8bc33a60031c72eea6c7a3b805a1b667899b848f' }))));
     }
     static get watchers() { return {
         "checked": ["elementCheck"]
@@ -9376,12 +9376,12 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '5105468ecf9b370abdb0963dc2019ff3808c4417', title: this.tooltip }, index.h("smoothly-button", { key: '4ae7209eba4950bd310d7aa5af10a569301bf634', 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: '61b50f58ec69377b37355395b15f0a5d7ba86742' }), index.h("smoothly-icon", { key: '76b125114b0a2234d7034e527bfe347226c02954', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: '0cfbab72076c44b9f7072e7ad2960331c2fe2bbd', title: this.tooltip }, index.h("smoothly-button", { key: '9f12fadd22f9921fc505d005d07efa79b6c5b034', 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: 'eeb4d5c47beecc03332efb47cce16bc368df0c6c' }), index.h("smoothly-icon", { key: 'a145db227e15ca93e06b587fb13552998935c8a4', name: "close", size: "tiny" }))));
     }
 };
 SmoothlyInputClear.style = SmoothlyInputClearStyle0;
-const styleCss$X = ".sc-smoothly-input-color-h{box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[readonly].sc-smoothly-input-color-h{color:rgba(var(--smoothly-input-foreground), 0.7);fill:rgba(var(--smoothly-input-foreground), 0.7);stroke:rgba(var(--smoothly-input-foreground), 0.7)}.sc-smoothly-input-color-h[looks=\"border\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-color-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-color-h{border:transparent solid 1px}.sc-smoothly-input-color-h[looks=\"line\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-color-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-color-h{border-bottom:transparent solid 1px}.sc-smoothly-input-color-h[looks=\"grid\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-color-h{border:rgb(var(--smoothly-input-border)) solid .5px;margin:-1px -1px 0 0}[looks=\"grid\"][readonly].sc-smoothly-input-color-h{border:transparent solid .5px}[looks=\"transparent\"].sc-smoothly-input-color-h{border:none}[looks=\"transparent\"].sc-smoothly-input-color-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-color-h:not(:focus-within)>input.sc-smoothly-input-color{background:transparent}[looks=\"transparent\"].sc-smoothly-input-color-h:focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h{display:flex;position:relative;background-color:rgb(var(--smoothly-input-background));align-items:center;justify-content:center;padding-right:.5em}.sc-smoothly-input-color-h>smoothly-input.sc-smoothly-input-color{width:100%}.sc-smoothly-input-color-h div.color-sample.sc-smoothly-input-color{height:2em;width:3em;margin-right:0.5rem;background-color:var(--hexCode);outline:1px solid rgb(var(--smoothly-input-border));border-radius:3px}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color{background-color:rgb(var(--smoothly-input-background));position:absolute;padding:1em 1em 1em 0;top:calc(var(--element-height) + .8em);left:0;box-sizing:border-box;z-index:10;border:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color::before{content:\"\";transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border));position:absolute;z-index:100;top:0em}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color>smoothly-toggle-switch.sc-smoothly-input-color{margin-left:auto;margin-right:1em;margin-bottom:1em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color{padding:.5em 0}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color label.sc-smoothly-input-color{width:4em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-thumb{background-color:#777}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-thumb{background-color:#777}";
+const styleCss$X = ".sc-smoothly-input-color-h{box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[readonly].sc-smoothly-input-color-h{color:rgba(var(--smoothly-input-foreground), 0.7);fill:rgba(var(--smoothly-input-foreground), 0.7);stroke:rgba(var(--smoothly-input-foreground), 0.7)}.sc-smoothly-input-color-h[looks=\"border\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-color-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-color-h{border:transparent solid 1px}.sc-smoothly-input-color-h[looks=\"line\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-color-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-color-h{border-bottom:transparent solid 1px}.sc-smoothly-input-color-h[looks=\"grid\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-color-h{border:rgb(var(--smoothly-input-border)) solid .5px;margin:-1px -1px 0 0}[looks=\"grid\"][readonly].sc-smoothly-input-color-h{border:transparent solid .5px}[looks=\"transparent\"].sc-smoothly-input-color-h{border:none}[looks=\"transparent\"].sc-smoothly-input-color-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-color-h:not(:focus-within)>input.sc-smoothly-input-color{background:transparent}[looks=\"transparent\"].sc-smoothly-input-color-h:focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h{display:flex;position:relative;background-color:rgb(var(--smoothly-input-background));align-items:center;justify-content:center;padding-right:.5em}.sc-smoothly-input-color-h>smoothly-input.sc-smoothly-input-color{width:100%}.sc-smoothly-input-color-h div.color-sample.sc-smoothly-input-color{height:2em;width:3em;margin-right:0.5rem;background-color:var(--hexCode);outline:1px solid rgb(var(--smoothly-input-border));border-radius:3px}[readonly].sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color{filter:opacity(60%)}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color{background-color:rgb(var(--smoothly-input-background));position:absolute;padding:1em 1em 1em 0;top:calc(var(--element-height) + .8em);left:0;box-sizing:border-box;z-index:10;border:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color::before{content:\"\";transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border));position:absolute;z-index:100;top:0em}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color>smoothly-toggle-switch.sc-smoothly-input-color{margin-left:auto;margin-right:1em;margin-bottom:1em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color{padding:.5em 0}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color label.sc-smoothly-input-color{width:4em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-thumb{background-color:#777}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-thumb{background-color:#777}";
 const SmoothlyInputColorStyle0 = styleCss$X;
 const SmoothlyInputColor = class {
@@ -9525,7 +9525,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: '2b5ce3b8d69e892a0aaff07c4d2e46d7ab0bdf19', style: {
+        return (index.h(index.Host, { key: '57793f9966923335280fc31b488c0fe95588dd49', 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)}`,
@@ -9534,7 +9534,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: 'e3a03c4ce150801de85a2c8e931d4e90a1faccc8', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: '5cfe4628a9b8f6f2f19e534f94d52df669d3c755' })), index.h("div", { key: '9420f173fbfd36de38d59f884ef864f5d68c335f', class: "color-sample" }), index.h("smoothly-icon", { key: '07da41731c0d13688030545ace27381cd5a4c8d2', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), this.open && !this.readonly && (index.h("div", { key: 'ec3c12509cada86b4b2f675fb1982bce9ab1b735', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: 'a840740653d1885d2a90161129dd1ac9b7223821', 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: '1bf7f60e1a6ab02c0892ce4e18c23a0776f4b4c6', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: '9a9ab5765abde23ea76c14e782bace4a0d00e01a' })), index.h("div", { key: '0f1ef6cd4a0e5652c29cbdd72b5f129b89ef24f8', class: "color-sample" }), index.h("smoothly-icon", { key: 'c5fe36fd5341b9028f0a5ddf570fdf8c8885563c', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), this.open && !this.readonly && (index.h("div", { key: '5607e81ebd017084c799d5dda1d757929bfdc62d', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: 'ce55053e29416ef32a476a5af8fbfc390517dad7', 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 {
@@ -9548,7 +9548,7 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2218ac085ab188229f9fa3fa767418aa207fa76b' }, index.h("h2", { key: '3491b1e963fdd0aae0b4e73e034a35485d342a2d' }, "Color"), index.h("smoothly-input-color", { key: '95bfb90af1f4e914bbcf569dd04e8921a35de4a6', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: 'dbc73649a4fc6a20e0b7202dd34d06e19f3fe836' }, index.h("h2", { key: 'c689e552fdcd760045206ad6055dc74c92765ac6' }, "Color"), index.h("smoothly-input-color", { key: '42d5c925d94a394143c91f70ffba1948fcda0cb8', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
@@ -9626,16 +9626,16 @@ const SmoothlyInputDate = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'bc1d61bd1d64ac0287f4ae939fc7b1aa972381bd' }, index.h("smoothly-input", { key: '211fcdc835f9a27bef98736b860aade460e6edde', color: this.color, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '9bb76feacf89a8d35b91262d86be748114e1ff4f' }, index.h("smoothly-input", { key: '141507dd7b2b987f9508f644cf40df58065ce141', color: this.color, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, index.h("slot", { key: '0d28d22cc392b80f298d00e62bafcb9967558fb6' })), index.h("span", { key: '776813290d1ffa201d68b361dc29420fc6f2a336', class: "icons" }, index.h("slot", { key: 'a6b37134b62aeabd63d1b03a6e642d17dbe466f3', name: "end" })), this.open &&
+            } }, index.h("slot", { key: 'a3589843540c3028d8dc80bb83746f45b47bfc51' })), index.h("span", { key: 'fe877b2a562d7e601ce31d3f390b51c2cdc6a0fb', class: "icons" }, index.h("slot", { key: '9dcef2c6ba6576b67cb9cd7d50109c2a4a8c4703', name: "end" })), this.open &&
             !this.readonly && [
-            index.h("div", { key: '81dfb1fe34a117c337e4b6d412706c88b9414add', onClick: () => (this.open = false) }),
-            index.h("nav", { key: 'd903169728af341da2e3cde61998ceef6c2ed2ba' }, index.h("div", { key: '6a47d4a290db2d2434d07eb3d7ee6bb1d96fdc45', class: "arrow" }), index.h("smoothly-calendar", { key: 'fcda365f171a6b6183cb99a7bbf9cc87f70674aa', doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), onSmoothlyValueChange: event => {
+            index.h("div", { key: '75657261deff35f9d7fa4a178d75626324f9efe3', onClick: () => (this.open = false) }),
+            index.h("nav", { key: '4e63ee4114d87e3d588283989e7a0421b8764c75' }, index.h("div", { key: 'de38930d2d7f2c37812f8fd01c1c8228804fede5', class: "arrow" }), index.h("smoothly-calendar", { key: 'cda9da03c6ad96b8c15023fc5645f9da62b7e2d3', doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), onSmoothlyValueChange: event => {
                     this.value = event.detail;
                     event.stopPropagation();
-                }, max: this.max, min: this.min }, index.h("div", { key: '126a5902390c45d1755fe16147204c362bc65db0', slot: "year-label" }, index.h("slot", { key: '36dd3455d60e6a5a556eb345d966475964981cd5', name: "year-label" })), index.h("div", { key: '63f66ec3fe13fe4d21bb972d0200c5595f5f3098', slot: "month-label" }, index.h("slot", { key: 'c4494dadee23879a047493a31370126c2a445bd2', name: "month-label" })))),
+                }, max: this.max, min: this.min }, index.h("div", { key: '346aea73efafd1125fe269a6ed8c354c39df02f7', slot: "year-label" }, index.h("slot", { key: '673b1b07b2354ceb5aece39f56c4a1b5678597d7', name: "year-label" })), index.h("div", { key: '412114425cd87be74da2807ca7acba2ebfb222c2', slot: "month-label" }, index.h("slot", { key: 'eee9510a450fc2e0c3709d10d0369c9ab7e8fe62', name: "month-label" })))),
         ]));
     }
     get element() { return index.getElement(this); }
@@ -9727,12 +9727,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: 'a0a392f44a460e38cd52af12d1dca1b1ceb7417b', tabindex: 0 }, index.h("section", { key: 'e03b2ac44fb2045b861a5a1bcbf47b484d6de620', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '69a60996859d685736a9cb622daa3bd105ce8221', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (index.h(index.Host, { key: 'de289eaa02cb288c765788b03b1e5fb21d76a567', tabindex: 0 }, index.h("section", { key: '79daa96d8091f679c4f5fdcd8b6397cab32c61b9', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '02da66db89e9df5103604edfd953675af32f16e2', 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: '3b93257e8a1dc9a205b7c5fc9afbfaeab44aa03b' }))), index.h("span", { key: '1eb1b51b0effabd6d87c6e59992e25692aef002b', class: "icons" }, index.h("slot", { key: '65859b561d699c84da3bcb69ab5600549788a7d5', name: "end" })), this.open && index.h("div", { key: 'aaa2646d831abde20fbaaa2818c464d89d5215a0', onClick: () => (this.open = false) }), this.open && (index.h("nav", { key: 'd2e6c838f065c0f83d0cd3a83b283cc5be79525a' }, index.h("div", { key: 'e4afaadb2b412b6c722386e80252f9c24c6325cb', class: "arrow" }), index.h("smoothly-calendar", { key: 'ced6032bca2e083ba90ddc98e3ee75dbb3e61993', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: '310429716ca3eaa17a442e6dd745c866144da057' }))), index.h("span", { key: 'dc030c4ab324e9b3a8d2182cd43949e108fd090c', class: "icons" }, index.h("slot", { key: '72b74f627a7352d59e19b27eda2510cfe5c2fa81', name: "end" })), this.open && index.h("div", { key: '36e76f8a3f6adf5614084e960ab99d444283bcef', onClick: () => (this.open = false) }), this.open && (index.h("nav", { key: '13c9fd610b5874408259d76ba500881c323c62c2' }, index.h("div", { key: '1640bd721bd0f88ab0b42f94d52ba87f2c0a046d', class: "arrow" }), index.h("smoothly-calendar", { key: 'ec406c6fa253559e63a9c17b6d1303cc4cad698c', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9762,17 +9762,17 @@ const SmoothlyInputDemo = class {
         this.duration = { hours: 8 };
     }
     render() {
-        return (index.h(index.Host, { key: 'a427b11690970603e00ceace897546684902b3ea' }, index.h("div", { key: '635d5f974ed09d3450fdc0ab6394af1499d87896', class: "inputs" }, index.h("h2", { key: 'e2b1821ac0d7a395fbd5f843be83291a3382fffe' }, "Calendar"), index.h("smoothly-input-date", { key: '24cf03cf8590d0bf5eb76d155529182481d87f24', name: "some-date" }, "Calendar"), index.h("h2", { key: '630fd2668056a051c193a9b84abfda54e7845e13' }, "Date Range"), index.h("smoothly-input-date-range", { key: '8e96f46b0e778a1678a38790622401e8288092c3', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-date-range", { key: 'd7f2ca5d5dea2db9bab4725d214c9bc762449165', 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: '66b716c40238b662f5daf36513bbc6200f48839a', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '7d83ce11b1543ef8bf5fec079bf53b424a01f678', 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: 'e21f821db511c77094b02bdbe1e6896765e95d46' }, index.h("div", { key: 'e836e262bc335f1422b3f8de8cdb4f10594c691a', class: "inputs" }, index.h("h2", { key: '845bc1e8ad46d151dfc4688c08cb5e714461a02c' }, "Calendar"), index.h("smoothly-input-date", { key: 'd0af5b5063df54060a22a342471a77e23cfad30a', name: "some-date" }, "Calendar"), index.h("h2", { key: 'dc870a4f25a71e14ffb916db78bf41f68ebdbd9b' }, "Date Range"), index.h("smoothly-input-date-range", { key: '55b8310de464d4de7a28c741acf956f91fab1339', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-date-range", { key: '4edf173575973d3ccd0dd6852bcae72af7f30f5d', 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: '21b8b180800751433cee76c7f13ebbf9a4458558', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: 'b90864999f1b2fa217ce37cead2d7f8abc1c517d', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
                 "--padding": "0 0.75em",
                 "--input-width": "12ch",
-            } }, index.h("smoothly-input-clear", { key: '14871de9849309b880fde2fa87cd83c677b0b08b', slot: "end", size: "icon" })), index.h("h2", { key: '6e20bfe78a32fb08dcc8f6cce3fe53979ab0d829' }, "Date"), index.h("smoothly-input-date", { key: '390814b6c564012b6d016d9c0a0c84a94de7b601' }, "Date"), index.h("smoothly-input-date", { key: '7316dae934606c1d3e9e7cdd591afff6e4e77955', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '5adcc22596bf86c248b71ec709cba7f15182f4b5', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'ebdc5c70da85d4c4373582423cdfeee5848beb2f', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: 'e107b9b1ec1d00160396665d8cb3a66cda7e19b0', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '07e8c03c253bf5dd1aa14e85be2152455559572e', slot: "end", size: "icon" })), index.h("h2", { key: 'cd3094d5047911c85327520c061d70b55ba033ec' }, "Select"), index.h("div", { key: 'a040e406b3c0732adc75330d07cd744713818bc8', class: "select-div" }, index.h("smoothly-input-select", { key: '8a655a591095c754598d80854d44408c58a13834', name: "select-dessert", looks: "border" }, index.h("label", { key: '44bd6520c12d196080fcbfc1a9e04284a60ac9fd', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '7c28405abc3680976b095cf78655117c01a11e83', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: 'bf5c33ed0af314d3fd1f26fa9115437c16c60cda', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '52f7cd37a5028f82e5d7e9a595a072c3b9bf5401', value: "3" }, "Cookie"), index.h("smoothly-item", { key: '6dc24d60a1dbfd3a53d293c2cb7a14a894ab47a5', value: "4" }, "Croissant"), index.h("smoothly-item", { key: '8f1b9dc9b424fad654be49cabf31c5001ff44e27', value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '9c6b0d53998cc0dcda84ede256306ef22f85bf34', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'd6ca53165d56dc82b2aec674afc33d6cf5f177a2', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '32024727c90f8cb4b35ffa637bc5f07778a7ce7d', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '86b66862bb9a53c032fd4928a43a0199a27444a1', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: 'a211b2b6ed3949c299f607252d7c4835df59aa9c', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: 'aac18c2963ef9391bdddc1cd5ee08242ccdcfc4d', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '4b348563523705f116a40428cea478f993a8adcb', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: 'c63c28bd5f766948b8df5395340aa84afe8ddae1', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '802032884cf904a423903ab97e946ceaedf5a0bc', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'c2699a86ba065d69f3b1f3efd4f5df7863e023c5', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: 'b7eb7aeffa560595417cfdd6c6ee585aa77474ca', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '4295f71fc4d251f7836f30fcf12467e190f011d7', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: 'ba226cb1b82a834c3da5a8da3932b86f8a276fa1', value: "narwhal" }, "Narwhal"), index.h("smoothly-item", { key: 'ae34e1667400606b9c4c5d7215f7d69b180133a2', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '685321534909b530575afaa33cd6d1751b346bdc', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'f7931ca1b56d279f3439c4033f2f8de82c589a42', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'c6c230b5da841768752f1f74113e5b3a26065356', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '1ec8bfc98fe39a5f561721b45f11857670b28471', value: "camera" }, index.h("smoothly-icon", { key: '6ad99ba6480ead8ba29bad61162529473bcd544f', size: "small", name: "camera-outline" })))), index.h("h2", { key: 'b4c63425697a1390d73a66b15d1490a4f2eb3697' }, "Delayed"), index.h("smoothly-input", { key: '137140e8297ee5004979d39e33ea745cafd792fb', name: "Delayed", delay: 2 }, "Delayed"), index.h("smoothly-input-select", { key: '56b4fb5d48cfc762a7af7a01206096af135041ef', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'cf43e3a6e88fc8a0dcbafc24afa4dc9d6e957a94', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '70f2ab31d18cbc8b661f7f5f5209a7c61503a8db', value: "1" }, "January"), index.h("smoothly-item", { key: '5ccfcd6f220e628455168ac1165c70f6b298248e', value: "2" }, "February"), index.h("smoothly-item", { key: '71beddb9896aa9dae187e50d89fb68d47967f616', value: "3" }, "March"), index.h("smoothly-item", { key: '54a35eb4ff294ec4e4c8b602311bfd1d02ab45b5', value: "4" }, "April"), index.h("smoothly-item", { key: 'a8ed136c81cbb155dc88468b0d5d523587c3d4ec', value: "5" }, "May"), index.h("smoothly-item", { key: '72392f7d905082001b45a66031d4fe680aa93ca1', value: "6" }, "June"), index.h("smoothly-item", { key: 'c0f0971f962ca8b8498718ed3d4eeed2992344fa', value: "7" }, "July"), index.h("smoothly-item", { key: '7223ea88d0c22b364a90228dfa5feb3c31a06db0', value: "8" }, "August"), index.h("smoothly-item", { key: '07cd3e73462208ef861b294288aa66c592bb7df6', value: "9" }, "September"), index.h("smoothly-item", { key: 'ab9357d5549031e94d68fa4ac98c337ff4ae187a', value: "10" }, "October"), index.h("smoothly-item", { key: '5d3086ece9e33e99bf45d702cec6231d8f39228c', value: "11" }, "November"), index.h("smoothly-item", { key: '2cbd4ba43b223a8121efb8d63e23e8b0c8e0c053', value: "12" }, "December")), index.h("h2", { key: 'f877f1d3ad40baf266d9843103d04a641684319e' }, "Duration"), index.h("smoothly-input", { key: 'b53a742b8ed65e5db03c276817c422bf0de31fbe', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+            } }, index.h("smoothly-input-clear", { key: 'ebdec139c509639acb8bec747bff7f32ae2c97bd', slot: "end", size: "icon" })), index.h("h2", { key: 'ba171da8659b47dc8a3b5e4ca2689de39f233365' }, "Date"), index.h("smoothly-input-date", { key: '89321cd42fddf70abf979ed4ff462b827ec850a3' }, "Date"), index.h("smoothly-input-date", { key: '1a185719af7d9fdd4f901edba34213844d9fdd80', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '60fa3cd6ebcf554fb83fe1275f113947f9aaa014', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '47680fd1639d25d8e757ff0ca3803c1b08500e0e', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: 'd6858532295ce44b303fe1e77fe1d51ed46df8a8', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '75d0bbf5fe3a4c8587e71553a2572aca6d9d99d5', slot: "end", size: "icon" })), index.h("h2", { key: 'b5402c748b40ea747912e7cd75e8477b10b57419' }, "Select"), index.h("div", { key: 'b199de71c8101b0b4d107c6b76e61dbb9cbef1a8', class: "select-div" }, index.h("smoothly-input-select", { key: '9c03de6f4a32dca401b57770e28083fb71c2d727', name: "select-dessert", looks: "border" }, index.h("label", { key: '399a23ef78533174c5b6e42598f9074478562739', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '01855562e0b4e42690ce2e6634a2bbddf403aa96', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '5f5dff315cb0fda9d511edb337f872db27fd3e26', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: 'df93d092444d0f134147f4fb7b4cf994afa21188', value: "3" }, "Cookie"), index.h("smoothly-item", { key: '396a5ccee8be40939bcbc413ab0c48a58356d5f5', value: "4" }, "Croissant"), index.h("smoothly-item", { key: '92d70c715dd186efaf1d1db64d97cbc6fce8758c', value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '010d5b570b05d86f15ae595c88810c5b63ff3968', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '59c9cae05ad5e96d0bec3aceaf9bd279873c03a0', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '9196927a5c6c8cb516a88f54f218d8b5279e4563', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: 'bd51a42a354daa550882c11c8aa5b4aa2a5db9f5', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '89463de52bfc95e11c40cc73a74ce7d5b7047f90', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '3b51c400afeda7daa09a70d4e0e17a521d6a1d85', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '2b3a2f5f951212f474c79e2aa041346423929a94', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: 'f0a983ddf436868e02f8e98b3237702f7b62933f', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: 'd331250ca1396afc9d7adb15875129bd0d08d3b8', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '5362f06641cf8259e8c13f8034aa365e1f4d971c', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '5a4bd240980149ddcc3153a4b13736ff23bc7abc', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '097c4691458476ac7729d9d0c9ce36594b6ebd50', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '980e3658b4cfab0b513924cf08fb1a12b2a0cf05', value: "narwhal" }, "Narwhal"), index.h("smoothly-item", { key: '891d30cc8fddc43defaebbabff14e3ef6a23699c', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: 'c621dc1b7f3d5f2ec64c90a3fa34f9dd7adae38e', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'cc99f443bc8419d0c39ef08deac985f9d8dea0b9', value: "folder", selected: true }, index.h("smoothly-icon", { key: '2fa8b71973e09347ab3af9ddcc76bf92b63cfd1a', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'ec4c27f70fb87ca79648699aaebec4bd11c17504', value: "camera" }, index.h("smoothly-icon", { key: '681897358ca8b51e0d7485ef1c784d6887e0a261', size: "small", name: "camera-outline" })))), index.h("h2", { key: '1a043eb78a519516448b2ad372873059ebdb9553' }, "Delayed"), index.h("smoothly-input", { key: '018c4337e306d566cb48e90df0e00a38e93ef9aa', name: "Delayed", delay: 2 }, "Delayed"), index.h("smoothly-input-select", { key: 'd4649e85421225549c2ca27cb2da0bb3adfcc024', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'c07d3b55c32b6b3bbdc197a231f133124ab7e4ca', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'ab79c102d74bc79fe9d9c6bd60f988998174836c', value: "1" }, "January"), index.h("smoothly-item", { key: '86cc7e227916179b83f9f04ae9a14407abc58f3c', value: "2" }, "February"), index.h("smoothly-item", { key: 'e07d270f048194a42386716d2a13940090ee0e4f', value: "3" }, "March"), index.h("smoothly-item", { key: '8a2e18beafbe34c0b851605e815b85091c496b45', value: "4" }, "April"), index.h("smoothly-item", { key: '953638be75d224a70b4a0bb8438e8f0956311266', value: "5" }, "May"), index.h("smoothly-item", { key: '8ea57c34733ded734289bf4d3fc201b276e4e0a4', value: "6" }, "June"), index.h("smoothly-item", { key: '717b3b080657683346f7d4caf6cd806673055ff0', value: "7" }, "July"), index.h("smoothly-item", { key: '7f97b189b8802ea49a7b965f4ec95415664d437c', value: "8" }, "August"), index.h("smoothly-item", { key: '24b4860bf687abf6d55daa7c5b07a6ad195ea6bf', value: "9" }, "September"), index.h("smoothly-item", { key: '589679a4e01e98943bd998351be497fdd56a1769', value: "10" }, "October"), index.h("smoothly-item", { key: 'a7d9956b965629ef15365440ab2107a366c7e2f1', value: "11" }, "November"), index.h("smoothly-item", { key: '590ab02dd4e4d61f05d4645b8e4f172147b1c603', value: "12" }, "December")), index.h("h2", { key: 'f9d353b56bcb1a1352b870f2a98acbb0c09e4b40' }, "Duration"), index.h("smoothly-input", { key: 'e51dada8a437e3b860ec494936db81b24e29fe96', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), index.h("smoothly-input", { key: 'b52ea3ef4642f297ec70443e7ee4bd7e1fd70e0e', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), index.h("smoothly-input", { key: 'cd14ab7b4900a1dac632204b14c4c69c9a65738b', 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: '390ef552a9f6b8764b670ff26166aaa7693fb10f' }, "Identifiers"), index.h("smoothly-input", { key: '0512632a3b68c53d6666af6b8f40023391d7c91e', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '70fc8a8bc4ef1bf45f23040fbd4ef800e1cb1e79', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '6a10044c3320c85115d136c4e55999eda0f7eac5', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'd589e115aeed25f6c9c4259961a8f43251d872c7', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '363567908c96335d934b56e2eaaa2c7d96858a9b', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '0e6eee7f2759f8f75cdc12d20eb949ba6722d78a' }, "Input Alternatives"), index.h("smoothly-input", { key: '6940b8041f69d4fb58809cab935be81ef2a099cb', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '4161a120c1f2f3b77d74def83978d533b666563b', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '4d8183f3809881c5107b8c6d0b6d4c6108b1d87a', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '33e818802d504388693201b66eac4748f3f6d460', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '2cfc7c46cd562348aa2c34e434ea9c114051170e', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'ad92ac804eeefadb3a4fa667ce93ab1aa52bcd9d', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '352862f25aab23dc98ac7d494f4e46da391a94ad', placeholder: "test" }), index.h("smoothly-input-submit", { key: 'a9574701683d616233e13b55c6bed61dc554fb04', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: 'e6084ac5cd0c0ac9428a7a83e437bb4991f12e81' }, "Smoothly checkboxes"), index.h("div", { key: '8e027fd99a9f63515d9ab6d1423d4281202175b8', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '1d2edc58c64ed5a170e2582bfac4fb6d19f3e07e', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '48377eaabedc9f94275ee7f24d1ea71d9b36cd8c', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '8d5d3581b4570358433fdc79d999e7c3c9096f07', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '99a38855dd72958bd842a55767e43820262d2b82', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: 'c402dafbc6ee961b492a91ef0c65957b1555229f', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '02e259bb4a46a383a4bf8fd8d8b1443969bbe7b6', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'c47c34ed1c9f736a7bd460b832ec7c3b0f60030c' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '9941c6704a3aa3fd7364238ccdda743b362b621d', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: 'ae31e98679b094de2c0c8ce0b43ad463bc71cb5e', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '823973078d9e91fed294fda4df1b7db3949903d1', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '871be898ea91051b3692910846d48af903d4bb39', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '4192a7423a643e84075708129b4e61f1cb73092e', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '389c820592a640f998db8e79ac878cf9137bef97', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'a0874dc0f8c17aefca670d4521ae9656b7e37600', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '9dc4fe887bc54553489a6b96af1f50612b34b1bc', name: "radioSecondInput" }, index.h("label", { key: '6a52e8a6261dfca196962becfebce877fdf3b575', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'f4428d29c440db50b7000caa6b2650f0e9039e33', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '81e483dcd67a48f9b528e9fb68465822c74304a0', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '5f696c149c2509a217d2efd5fec17d4ef64ec9f8', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '5c1d4a1d742b7a5681a80839889d68869fdcbf55', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '38bdb00a01047be05943a5258649e140b9f114bf', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: 'ecfc98e581d135981be5d7ced07a7f5bffeeff65', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: 'c983d907f052a696ea775bd5d242439dd83109dc' }), index.h("smoothly-input-color-demo", { key: 'dd45e1feaee2a50e5d83281246cf26e859918519' }), index.h("smoothly-back-to-top", { key: '8d17e46ddb5b14fc6b67778528665c4abd2855bd' }))));
+            } }, "Duration"), index.h("h2", { key: 'fec20f91af595304b0c61de680c548a018484151' }, "Identifiers"), index.h("smoothly-input", { key: '200ccb431490555509f306636ec4fdca3b29a3a8', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '4b55c12406f7f3c6107cb30326469b7e2fe3ab99', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '5f83789f634611fbd80979ec75b9867bb0e812bc', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'ce64e41b2cf06e729ad4b97cb7cebf942b5af148', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'b7cd4167b4dc7538c5db4ff2a55eecd5fc0f4cf2', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '13230ce4b9b89bd7b0fc68e6683e5e9da0cae8fe' }, "Input Alternatives"), index.h("smoothly-input", { key: '3a252f95236343f72c2a5233383bbe1106f5ecd2', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: 'b51ffb8ec957b99e5697d0e5e863add90a6275de', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '6f933f81b4b2c85f5688edc17e7f9e477c1bb2d5', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '28f4eca4a53ead557fc3fda63ff0fb3a6300a5e6', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'ed469cf44b43e231bfdedbaa6332dea23b8f6a90', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'd8b2732107ba01689f4685a4bd25ef5850472209', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'b4c41063b87131218f1bce86f46cc456728363e2', placeholder: "test" }), index.h("smoothly-input-submit", { key: '5346951e0d4f541f2ca1d2d752817c4651e9c938', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '55135a7b39d1bc4b24f1468abf7e90b1f7a16b8f' }, "Smoothly checkboxes"), index.h("div", { key: '1cce67643c7bfade3116f6b21fc88045d0a21868', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '0c0ed39b1c65373a3d6905bb7938c73e9623c5c8', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '7afc24d8c76d9cf83d4ed664853cd7733d940be2', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '218969d8aef9b5af0c5b81d38bce8eebd98bcc87', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '1732a8d7618dd3bf2e622eba89c09fc9387e5072', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '684399e8f4ea224aac4a266e2d505f11324f97d2', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '01728bb07203ecbd71d6d3794c8b2e0d40e07903', name: "third-checkbox" }, "3rd")), index.h("h4", { key: '0f6f47a4e35fbf608756475b9ee46fd6905b5a74' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '30ce10eecc6a337206cdee6d083576d620b2372a', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: 'db5598035db72198062a7aea3e0d9a326e47501d', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '70c77db6352f82b4bba242fcacf44665a3ba6c46', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '4118905130ce45135bae9b0d19ea7c44efb27276', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'cbda407165ae81e2ca07c99741a512a7d34f89ac', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'b66a46f327fa320b600b7c431bd6e1b15a8d7da7', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'f68d36d43d745179b584cd228fbdd336ac43e948', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'dc4590171d8d4b1f3660b46874ff7c57230e863c', name: "radioSecondInput" }, index.h("label", { key: 'd32ae8069a3b8b30347cfe9ed320c8506f7bb53e', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'a9ef17b6054c285579fd88bbaa660ff76cb03631', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '9d5c6cf74b6faaf93af7a9f810b13fcb7e08fa46', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'e5a2018d65b3199721561eafb30e3c307ddd3d9a', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '1f892ed3c1afd03e67c2189ad1d33ded5557c464', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '2a7b47dd9af29e37f998619c8e370df75511b454', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '89cb0d06f435f633be03316a5b31fd8bb0fba180', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: 'e28cb73ed81f6f6f4709bb09d388c50e52c26394' }), index.h("smoothly-input-color-demo", { key: 'b41c462ade62ea269850e9092323ff0d9515c750' }), index.h("smoothly-back-to-top", { key: '11f5c8997be42027a903d96b8519dad1b5ae490a' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -9810,7 +9810,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '1f76e04147fa866fe36dedeb5f52382fe6a17509', title: this.toolTip }, index.h("smoothly-button", { key: '48fb9a46ac80ada81d3ad675e29b8abee8e1ca98', 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: '32707fce69b3c6153121bef619dbab90588191ed' }), index.h("smoothly-icon", { key: 'b2ee692f237b41ba6496413568f5ebdef47adb9f', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: 'ce43cce29045b294b3801b24d6602938b64fa207', title: this.toolTip }, index.h("smoothly-button", { key: '1859b8cd90a04ddf89951ee6e0ecb740810e1e7b', 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: 'b33cb9922a3c080550118e9d8dfcfcefaaaec8b9' }), index.h("smoothly-icon", { key: 'cd538e3184d7091e3e0c38191c3f1cabfbdfea37', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
@@ -9907,7 +9907,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'e3988fc46408e71e0dfbd06db9aae7db73d29a36', class: { dragging: this.dragging }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: 'a32223115a612068440c9e33e3597f703ce492c2' }, index.h("slot", { key: '7eb02e611b5a4e7cbdf594aae822702837a4d527', name: "label" })), index.h("div", { key: '9198699e9269d6fa612fe7f82a11d4645f4d1114', class: "input" }, index.h("smoothly-button", { key: 'c7a566f7c11e4fbd41c14789c72c9edabff9285e', color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '15fb93398d7d602d7d13818272823cd240eae7d5', name: "button" })), index.h("span", { key: '6cd1657dd8fefdacce2f6f24ddff76ee7168bf54' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '95050f9c8fcb9cac7724b968800e385e06545df1', class: "mask", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }), index.h("input", { key: 'aba67731a8384d281cfbddcf02e7a0a2a1adad6a', 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("slot", { key: 'af26b193a3c0e25ac28246e6a76b46d62b9b7791' })));
+        return (index.h(index.Host, { key: '525e161d1aa99d8b9e8829156608bff11d962df4', class: { dragging: this.dragging }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '152e22a37851ccc8840cd06e0c402cbb3df827e3' }, index.h("slot", { key: 'b149a705610eb4c823c7fdb6d3fdfa0f0a3e4feb', name: "label" })), index.h("div", { key: '6c14c9aca9cd4804dd700af7b84e482cb4443c39', class: "input" }, index.h("smoothly-button", { key: '39a11afe765551362adeccb606a66ca6aaef5974', color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: 'df1dc2ebb53503834125409e16cc817f8ab9f929', name: "button" })), index.h("span", { key: '779c53cd69fb52ceb95d894fe5e7081c7fd9e069' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '5801e53afd34406aee2a62a05fb15cf9f81447e0', class: "mask", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }), index.h("input", { key: '49286a20b220a688fe6be284203a7e655e995acf', 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("slot", { key: 'e0274df51abbb522676b866bbe95d32fbee32746' })));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -9997,7 +9997,7 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'efbb4e0aef69509c7ccb88608b7e3603c1b2f5d6' }, index.h("smoothly-icon", { key: '3afb04a7ee5f45ee5ae0299660caf6e239e6d97a', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly }, onClick: () => this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '17b34a34153576c75fabc9feb11d6da44298e53e', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, inCalendar: this.inCalendar, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '5a6acca3fa503d34fad622ef08a3492e5760a53d', slot: "label" }, index.h("slot", { key: 'e86249f481a791940d11125940bea0de7b0b0e42', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now()).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: 'cf8ea3255b96ec8a27562665046f70dd49f6ade5', 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, inCalendar: this.inCalendar, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'aab7b3a6ec0bae33e790ed6a71fa7473df6037a8', slot: "label" }, index.h("slot", { key: 'feba05620a8dd3ace192931362bc15052f0da93c', 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: 'd50b72f096fef276d518f7cd17f598fdfb68e0f3', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly }, onClick: () => this.adjustMonth(1) })));
+        return (index.h(index.Host, { key: '8524d91aa5c0165c8313ac383ec0bd20dac3f6d7' }, index.h("smoothly-icon", { key: 'ce909d5e14f8ca4d06d94319047f5544e6037f8e', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly }, onClick: () => this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '1f1c7e0e2ca493e5ac73d70dfd6031f5b08c7faa', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, inCalendar: this.inCalendar, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '2607f1fed7c7e1c6d66f8697cad4640398a317a5', slot: "label" }, index.h("slot", { key: '1e9f5fbbfbe1829f78290c5e504796f19e888a83', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now()).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: '0349d761e03ce3ca2d91aa945f1f76f6a02ebb76', 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, inCalendar: this.inCalendar, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '0500674d6b86dcdd6d4c2874c66da3ab1199bfba', slot: "label" }, index.h("slot", { key: '8479bb83f29cc96e2f18d25c9f6386c038c21e66', 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: '855ead01e1f5e67022b16a7034a908466e3ad590', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly }, onClick: () => this.adjustMonth(1) })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10101,7 +10101,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: '59c82664805550dd15e0d3f02f0589290181c64a' }, index.h("slot", { key: 'ecca397afbd99e5e74c0758c7c62af34f25cfb8f', name: "start" }), index.h("div", { key: '4c588c08c906da8af6210c1590d072b487a21dce' }, index.h("slot", { key: '0ee40b1a70766fef8c3a198a655baaf9d7117e2e', name: "label" }), index.h("div", { key: '142c22c24c9ea272f89d96726e9fa0b299e3c827', class: "options" }, index.h("slot", { key: 'fd40b50777b8791fdf45ed8474655c4fc9ee64e8' }))), index.h("slot", { key: '04b0c25a897e23db431a20d6029e26ffc58826be', name: "end" })));
+        return (index.h(index.Host, { key: 'cf34a44ff51553e83e72a56a52afed4a97808056' }, index.h("slot", { key: 'cabbb93cf074be86353f77f6a9e9a3d30be4551a', name: "start" }), index.h("div", { key: '4cd6702364060f259ef0b9c2533b8d578a5dacdc' }, index.h("slot", { key: '7fecf37d522091b6e5ab9879c60707abeb3859ec', name: "label" }), index.h("div", { key: '84d90d74b6ea8b230a81da7dbc1ee95d82015dec', class: "options" }, index.h("slot", { key: 'c199f9aab4764a5cdff321d47c184bb4387ee52a' }))), index.h("slot", { key: 'b61531778fe0bf75e36a491875c1fc47a131a55e', name: "end" })));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -10131,7 +10131,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: '16419f5a57f3c595e942da26ff8d48ef16227ca3', onClick: () => this.inputHandler() }, index.h("input", { key: 'c46bc914adb41155ab978f1cc1070e22008ba0c8', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: 'b99fd59b7096a1e17ed2c9aa459637e2918c4974', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '800a10e2638243e539c7afd7d2828470540e0d44' }, index.h("slot", { key: '701e4486672313ed41a70553751437f65ba3f3f6' }))));
+        return (index.h(index.Host, { key: '531f063ae2b1c0aa4d8197a73435e17b32846391', onClick: () => this.inputHandler() }, index.h("input", { key: '8ab6565fa42673eac5946da75a53b68a61ed22ad', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '93d63c9e97d78d266c3ecd5d00f7b33dbc6a1816', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: 'c134a96eec3ed4df28153073e44bbe7b3bb9a011' }, index.h("slot", { key: '295b438b94e8a4d6051bd39af1fef148e1f378d2' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10224,9 +10224,9 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '4ed9d5083667fbc7feb055748d618a9c21346da8', class: { "output-side-right": this.outputSide === "right" } }, index.h("slot", { key: '9bc118081dfde48431b4e038700e663703761d48', name: "start" }), index.h("div", { key: '737e063e5230cf841120911afe809610581ce8b8' }, index.h("label", { key: 'cbbafa5de549824001bb102d3ae81c99ab8b4d91', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '8146affb714af6e8d1f6a44feeec7b16d01b2b2e', ref: e => (this.input = e), looks: undefined, color: this.color, showLabel: this.outputSide === "left", type: this.type, onSmoothlyInputLoad: e => (e.stopPropagation(), this.inputHandler(e)), onSmoothlyBlur: e => this.inputHandler(e), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '4a8e182c00c488855f54f7b5861b18415ff99f5c', class: { "output-side-right": this.outputSide === "right" } }, index.h("slot", { key: 'eec377e355ae634a2492fdb2b25bd7ecdd422e64', name: "start" }), index.h("div", { key: '923a5972de43a7e2cc31633ce2ee42ef039b2d8d' }, index.h("label", { key: 'a00387b0cb6dc3282e5f9e9338ddbbad5d1225dd', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '0f8ced7d2824a894a3d6da06ef37a600a6600075', ref: e => (this.input = e), looks: undefined, color: this.color, showLabel: this.outputSide === "left", type: this.type, onSmoothlyInputLoad: e => (e.stopPropagation(), this.inputHandler(e)), onSmoothlyBlur: e => this.inputHandler(e), onSmoothlyInput: e => {
                 e.stopPropagation();
-            }, 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: '40793daf58b7e86bd522ce1473d1d7eb6c626b05', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '912cf52113e914b590b67a8c25472da48de7f72b', 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 => this.inputHandler(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '15c4f60dbe7f39afb1d53ed377c37e98c6d916e6', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '986d4a6358620bf10676981da8e1480701271f75', name: "end" })));
+            }, 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: 'f9302d3d96af691c9689a497103079a2c0043c85', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: 'b63bb58ffb3c0441a8219a1a4dd568339a7373da', 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 => this.inputHandler(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '5c123adad2d4beef350289361a51d65479f0a88d', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'ee8edc82ecc67b532f7de3b9795522ac4326a082', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10240,7 +10240,7 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a2d1d0b7ccf8ca7e4f70299fbee83bd84070c6cb' }, index.h("h2", { key: 'e5990ec0985663cd03134e8a5676a98aae5dae0a' }, "Range"), index.h("h3", { key: '033ca4dac9f0f8f2de0fddfa8774d4ca475b68aa' }, "Phone Number"), index.h("smoothly-input-range", { key: '9f2208dac6c122a615a462827a80191d2c150770', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: 'c0fbbec509029832d8d09689f99c65fb78259508' }, "Stars out of ten"), index.h("smoothly-input-range", { key: 'e90a71061680cc29ae149c080d2cda9baf4b2f61', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: 'b48acd2d459446253346a2f930245eb4b4805d26' }, "Percent"), index.h("smoothly-input-range", { key: '73407ca33dbaf6f7a580927183299faaadb846d7', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '59b097f1187de7b6e8bc460f6e8d5a058f25dcfd' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '9ebc02b459f91ba0196744f4d2fbe3aa0af873a1', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '7e159c2d9926e4c9b271450aff37bb7eb0c82b0a', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: 'f3ee12f2f0639ad2afb9fd51b71130aa665ffa41', size: "icon", slot: "end" }))));
+        return (index.h(index.Host, { key: 'a2ac866c62330ce3acb9ab1b8b5cee4e8aace1f8' }, index.h("h2", { key: '28d8310c0783a6b17f0c8f6e37961dffe167ddf8' }, "Range"), index.h("h3", { key: 'a4dd738cedbf802f132e2993f92f33300b990d8f' }, "Phone Number"), index.h("smoothly-input-range", { key: '5c1bc6a0db39e18e45364c90fa92d498e90f9057', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '5597f7510d0e671dfc082378ec47e2e8ccd8d4be' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '0edadd84b220cce28d01a768278020122c92a5d2', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: 'fd0baf680bfc439e9bd2725cc75464498c9b9a6e' }, "Percent"), index.h("smoothly-input-range", { key: '3260e0303677bbf9db35df044152d84ce40f921f', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: 'afd2c86cbae5a8bcfcdf1c82f4d750a176aa3125' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: 'b5bfd926112949673865c2324e5fc9db8649288d', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '522e548f6160bbcb9f7889aae351a8e6530c210a', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '65d7643fc45a36ea9599748521a7d1a843635d40', size: "icon", slot: "end" }))));
     }
 };
@@ -10286,7 +10286,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'cf0ef9454e14bb672b26841357cd3e17605a24b2', title: this.tooltip }, index.h("smoothly-button", { key: 'dc14e8423901ea493735edbb15d8eecce38e8e64', 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: '49b2cbb8c819bce51cd18d77d563eaf081ecb935' }), index.h("smoothly-icon", { key: 'ec27bb9f3269250ecd93dd7f1b9eea4fa90ef689', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '064c01d3f4f18b17665874c86781801195981dcd', title: this.tooltip }, index.h("smoothly-button", { key: '3bbbc7621b19a86d110db7e1585fb4f440a6a665', 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: 'f5d836e9ad9823a9f1c82353836514883926b3fa' }), index.h("smoothly-icon", { key: '14a4a7d04a1533ba142b38bded70345f905e797b', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10567,16 +10567,16 @@ 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: 'aecf0a15bbc5c95ca450ae115efa6cb1c7b64c55', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '74a46fb98e2fbd40a7ba2271dc2d507bec4d9e23', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'e8cfb88d98c580c990b6fc6533f2448a0601b3c2', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: '2ed018cdf8716708a73b5db8214f862771ec76cc', name: "end" }), this.looks == "border" && (index.h("smoothly-icon", { key: '20aa1206a883488f58de0bc16d2d8072c857c2a8', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: '02b8286013f28d77406aba23365cf5fa26e7ef2e', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: 'debb04dfc623958122a240218b1b33f5965ea088', name: "label" }), index.h("div", { key: '8d5f21aeee3dd0530f90021e6c7faeb46f550480', class: { hidden: !this.open, options: true }, ref: (el) => {
+        return (index.h(index.Host, { key: '0ca3608c840e993f88146230805f3b6f0a97fbc5', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '283cff9904cd3a5516d5007999602c4a561cf869', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'e370a397dc398daea884262f33a663fed975b8bb', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: '283475a5d642d90d429a831dbf3d738ffbe1c0f3', name: "end" }), this.looks == "border" && (index.h("smoothly-icon", { key: '3823d4fe912846fa45d9baec3b124680fd64d983', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: '39be16f5c158feaaf45896e2bc0bc4c46dd65f7d', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '248fe5c04578439a45d78b1c2c7655f6698e671a', name: "label" }), index.h("div", { key: 'b668bb8f512c45f7325aac919f9af1292e0b84e2', class: { hidden: !this.open, options: true }, ref: (el) => {
                 this.optionsDiv = el;
-            } }, this.filter.length > 0 && (index.h("smoothly-item", { key: '5a4f44e235f8da493479e82ab4b8fb0fe8cb9fc8', selectable: false }, index.h("smoothly-icon", { key: 'f9c0116e9ba16c93226588557191ed616ea8b02d', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '504c6603d0f10ebc659da3dd57c1be3f9568592b', name: "backspace-outline", size: "small", onClick: e => {
+            } }, this.filter.length > 0 && (index.h("smoothly-item", { key: 'baa6a3200e054cd6b5ae60d9f3fb50ade7addd3d', selectable: false }, index.h("smoothly-icon", { key: '92df8e04239a3b74463b78d8d4023bf3d4b9e85d', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '9cf3f8585641d8610547ceea66c32b9173319bd7', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '75feff86bd60e1ccf68ae617dcc583f60a89d019', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: '431b310332f5aa0bc0a803414dfe3f10667105d8', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '51e69174f069f2b9b402a8621dd8d3bd3fe33b50' }), this.addedItems)));
+            } })))), index.h("slot", { key: 'b6088245b79645303be3a7bc631b1cf6b6820aeb' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10637,7 +10637,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'b149b0c25d47470da5c7cfb37d1a5134f0ee2d9a', 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: 'de1d9be6785584dfd794b7158f9247f61b7e1eaf', 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;
@@ -10681,7 +10681,7 @@ const SmoothlyItem = class {
                 : false;
     }
     render() {
-        return (index.h(index.Host, { key: '6af882ebb54ff39acc24b5f39abe36b276a4c9ce', tabIndex: -1 }, index.h("slot", { key: '10415f9fca13618e8b9d9c73e758c14a0b20d20b' })));
+        return (index.h(index.Host, { key: 'c49c25da30bd16eaca473bdd73d29fda759c25fb', tabIndex: -1 }, index.h("slot", { key: 'f4e6c0b1ad83de2cee839eea2b30ea45cf135f90' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10701,9 +10701,9 @@ const SmoothlyLabel = class {
         this.shape = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'a365ff7d3f924cb23a47aee416fecd00ec545530', title: this.description, style: {
+        return (index.h(index.Host, { key: '5115b178f4d537577d0174e0473bba4ea0aa8c83', title: this.description, style: {
                 "--hue": this.hue.toString(),
-            } }, index.h("slot", { key: '8e7b278ee93857f1b2b3a712c3794c8bf4168c6c' })));
+            } }, index.h("slot", { key: '7911d513ad74469f5bd5fadc39ac82efcdaf9a3a' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
@@ -10722,7 +10722,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index.h(index.Host, { key: '22bfd9cc3016e8ef91e0263811b813a6891d6ad3' }, index.h("slot", { key: '930ff4754b3a0874853403e74a91320d960a60a2', name: "before" }), index.h("smoothly-load-more", { key: 'ca95e8db347991beda4afb2d9f5d983c6bacd7b2', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '063f2b315e6c85d41f195d671db61a48e2bbb79c' })));
+        return (index.h(index.Host, { key: '46e50e4c68615f73c73bdf02fae9ee74ee060f3b' }, index.h("slot", { key: '4722e8f9336430f0be9675f9374d017270bd36c2', name: "before" }), index.h("smoothly-load-more", { key: '0bb82f6b7eca4ed91f871a7919089be218b41323', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '88cb26eb03ba406690ad6e5af659de0357bc9cb7' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -10776,7 +10776,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: 'd3bc463a6c16395b4cdb9b3cd13025a154b5ddfb' });
+        return index.h(index.Host, { key: 'd0f147d1a36e3bd5d66373d3e0c125d09c357f1d' });
     }
     get element() { return index.getElement(this); }
 };
@@ -10789,7 +10789,7 @@ const SmoothlyNextDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '6f8c9d224c2a1d9bc4e5acf2f1c2d83d0470ff18' }, index.h("smoothly-next-demo-group", { key: 'ec8c4bd0e5a0335edb4d2c82abe0f96dcc0ba3c5' }), index.h("smoothly-next-demo-colspan", { key: 'c3361c1cc997634f713a6e77071eb6ea51a40225' }), index.h("smoothly-next-demo-simple", { key: 'ebfc2cb523ca8d12eed7e25cce4b7f4c57bd7d76' }), index.h("smoothly-next-demo-nested", { key: '166f19c53901833a71e9201f181ed687348f0ad3' }), index.h("smoothly-next-table-demo-filtered", { key: 'a735d309b959c4dd16b9f5116565f985b5c4ab93' })));
+        return (index.h(index.Host, { key: '1ef25e600e6fec868b55734176ae0009e03e500b' }, index.h("smoothly-next-demo-group", { key: '58c0536d114ccffc531bb86f5140af2b7807a088' }), index.h("smoothly-next-demo-colspan", { key: '970c49d498d62e53b02e878bf6cde900fec8f90b' }), index.h("smoothly-next-demo-simple", { key: '4f542e97328efccf64af6a2d1bd3fdbdc5928aa3' }), index.h("smoothly-next-demo-nested", { key: '7e88c0623fed4eafdefde155036b7dce60afb976' }), index.h("smoothly-next-table-demo-filtered", { key: '75bb1a2779b75c4a3c5ff280b727086de6368525' })));
     }
 };
 SmoothlyNextDemo.style = SmoothlyNextDemoStyle0;
@@ -10802,7 +10802,7 @@ const SmoothlyNextDemoColspan = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c71ee75a607417c01a2a569826319e9a26430602' }, index.h("smoothly-next-table", { key: '75e55100a0f85149293334f6c4d17e471de5274b', columns: 3 }, index.h("smoothly-next-table-head", { key: '34d87ccfd81ac9d21a80f0c9950a0a439becdf93' }, index.h("smoothly-next-table-row", { key: 'd3390bbc2aa66a252661f5f683208e2e28048540' }, index.h("smoothly-next-table-cell", { key: '27356b1d85d829d8976395e2042e941b563e05a2' }, "Date"), index.h("smoothly-next-table-cell", { key: 'e29de592d5dfa835dc24b062c82163c26aec1724' }, "Skip"), index.h("smoothly-next-table-cell", { key: '6642a75f87410b2b3316f49f627081a0a0e412ac' }, "Total"))), index.h("smoothly-next-table-body", { key: 'ec3efb1dfd810f5e4783aeb0dc6c7688b51969d2' }, index.h("smoothly-next-table-row", { key: '14b690e832e50c932a3a74329b2baf27d90cd6a5' }, index.h("smoothly-next-table-cell", { key: '665196e2febdea1701a6317c6b90456b598deadd', span: 2 }, index.h("smoothly-display", { key: 'aacb235fb98530b74f88849029b8d494fcaa4391', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: '90bf8308c7beff3428456823df23299d179e3249' }, index.h("smoothly-display", { key: 'da03810bdb4b11cd9f33370e4cd5bebc59fa88d4', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '75ca72cb18a148fc281fb1a69b50efbf536aad58' }, index.h("smoothly-next-table-expandable-cell", { key: 'e85487c3f8d30eb88d303092f8533a9147dfc734', span: 2 }, index.h("smoothly-display", { key: '90f82680f6669ec46c468884f36af467de7b7e6b', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '2e180a9eacf4a64f024950dc9e36412f2f6d4051', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-next-table-expandable-cell", { key: 'eb945653d9bb75ffc14a711808961039e45abbf3' }, index.h("smoothly-display", { key: 'c13d37c62bdbeb19855cef623b7cf0f9420b033b', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: 'd87b1e1371d69f637f91092f6c68c8296adf0a19', 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-next-table-row", { key: 'b684418258e7548b3a1bfee31d2424e3a6cb2b63' }, index.h("smoothly-next-table-cell", { key: 'b42f04aebb9396efab8f6735ee6c6f9755f225b8' }, index.h("smoothly-display", { key: 'cf213e2cb696ca5d3de07214694af88753c92eed', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: 'f00474805a44415bda7dfb3549843e19656e1da8' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '9b8c1c5ce15267fd985a4143792c7e237065077a' }, index.h("smoothly-display", { key: '930bb2bbc7be4bdeb7443a066e359baf18e1d01f', type: "price", value: 320, currency: "EUR" })))))));
+        return (index.h(index.Host, { key: '886c6dece8547e67a5dc5c5e9447e15a2da7a1ef' }, index.h("smoothly-next-table", { key: '3b2a495239328141bd4e2eccfde50ff70b87dba3', columns: 3 }, index.h("smoothly-next-table-head", { key: 'cd008ebf78e426e0dcc1a004243adf53921b69d7' }, index.h("smoothly-next-table-row", { key: '334d3e85e4f3de72d90e94d1d89c1c3936a56f70' }, index.h("smoothly-next-table-cell", { key: '9f807650a6869bda883027dd381f19495ed7d83f' }, "Date"), index.h("smoothly-next-table-cell", { key: 'fb7ef6da70c1765a86d48015afaae9937c34d5c8' }, "Skip"), index.h("smoothly-next-table-cell", { key: '9c2c6d5c5ef066a6368cbf9a1c9e94bad09d6d6d' }, "Total"))), index.h("smoothly-next-table-body", { key: '82f668571471cb0749163c65ea7a0dd16d37decc' }, index.h("smoothly-next-table-row", { key: 'c012f7b8afb44cedf25bbb0b894c0d75e09fed66' }, index.h("smoothly-next-table-cell", { key: '17e6b30a957f80bd1369726e15e3fe0152670bfe', span: 2 }, index.h("smoothly-display", { key: 'a5e3cceeed4bbd8e840f443e03334647c770cb7d', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: 'e220b2516cba92cb386836940ea9108f4efe8b06' }, index.h("smoothly-display", { key: 'b45a87ee2b76c94d2ebf7e3ee53fc287a8c76ea2', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '180e77ecd798ca11d3bb387615166fa7d749162d' }, index.h("smoothly-next-table-expandable-cell", { key: 'e463dc56bbd760fbc478f8fda0740f2d4cfde677', span: 2 }, index.h("smoothly-display", { key: '56c296092cd3489d86b882ef97790e532fe3de54', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: 'c8d7e4da492690ea353ba94659b3c2fd257e85c5', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-next-table-expandable-cell", { key: '2143417d36822469482f84a3d0ac9bc6a0871bd8' }, index.h("smoothly-display", { key: '984ab82022b1bb04fb13a73057e34117e843e9f9', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '53ac1472acaa06bc74b92a16cea675344dcfb443', 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-next-table-row", { key: 'c25d2ff3003cf6cdd4d53d6d21a3c6747c73c436' }, index.h("smoothly-next-table-cell", { key: 'eb5a9f6d4f16862d18ab1118a3489c9a7fa04302' }, index.h("smoothly-display", { key: '570f957a43da72b1b67cc13867bdf6ae70112495', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '2c1d6b9a52283d8a54c92b971b046cc31e850780' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '9daafd3535ac7e869e06eda1966d67ea03ad65ba' }, index.h("smoothly-display", { key: '5f7283e05640c7fba74dfdd0f84ae85383210420', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyNextDemoColspan.style = SmoothlyNextDemoColspanStyle0;
@@ -10815,7 +10815,7 @@ const SmoothlyNextDemoGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e13a192e15594352088e82ab4bffb6efdeae2fc4' }, index.h("smoothly-display", { key: '17f3ade04e7be01fec390c7e464fbe679174946d', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: '5f1268d6aea7e2e9ce9602725281d0b0e6d83a28', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: 'b0856744f771a03e709537cd3241eedac8cfa065' }, index.h("smoothly-next-table-row", { key: 'bc3d2ce1bb35e8d925a9c0a0aa49dd302c3c5428' }, index.h("smoothly-next-table-cell", { key: '401d68ef1f8c86d9f1fbf791b5b8160d20760429' }, "Date"), index.h("smoothly-next-table-cell", { key: 'd65b3d22cc6eab4a66b7b5ec0e0251394b54e0a6' }, "Total"))), index.h("smoothly-next-table-body", { key: '3a51f5c943dc3b903d7cbc4e2e8188f147ec0c44' }, index.h("smoothly-next-table-row-group", { key: 'd3fc82ac2ec9e3704ea2a0101571184040ae9375', align: true }, index.h("smoothly-display", { key: 'a1f496968901b6b367be102060d32ae7f1c15e02', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'd7ab2b22f18f73c9c52fe71982e438fb6481492e', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: '09e8ed59d854044cf44acdc16914f536c7fd8f76' }, index.h("smoothly-next-table-cell", { key: 'bac7658e479fed04a3bd83326b09901a92d3c2bc' }, index.h("smoothly-display", { key: 'ffc149bbbd3a9480c03d08645a6eaa84e483bf2c', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '32838f5a07fb25483a1c95c65c0b15381874b089' }, index.h("smoothly-display", { key: '85353a8d6fdefdda02d9d8b3e88efaa0df742a0e', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: 'b92cba033a08cdafc670ff1fa061d2cd75e9f205', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '723e9b0184c0690e497164c12840165e631ada16' }, index.h("smoothly-next-table-cell", { key: '0fea8cce939ad2fcfc79c09099dacb4cab236699' }, index.h("smoothly-display", { key: '9ae97c613a0a5d14cf57820f1f480117f0048d2e', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '42b494282d293476d97b814e4fe50390ff9b479f' }, index.h("smoothly-display", { key: '9957244314a84905678fbc6c8c22e2715633f1d5', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: 'd5139a0469af7b2039648c89dd49ee399b484e03', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: 'a022919f0cf5ffa6f652800311d98d63113a2820' }, index.h("smoothly-next-table-cell", { key: '4db43cd04650273b3553749bfdb9ef2011c22070' }, index.h("smoothly-display", { key: '638c803ff8182cf6dc72b29e251bb45a16b3f90c', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: 'b7e2c08689f4836de764c0dfc00e77ae07f8300e' }, index.h("smoothly-display", { key: '3f3effce9e6d4ce8213d4207438483c11ae0706b', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: 'c0ac2edb53f368df786071e345e79765721549f5' }, index.h("smoothly-display", { key: '6dedfa3e92379baa1eb46a1d3faf0d59d08449b0', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '2d8aaa6ebe59cd1cac62db4257fba7e890a05f02', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: 'b83453b4ac0eca8a8847c96acce05f214e579974' }, index.h("smoothly-next-table-cell", { key: 'fc8be5032acea72a77936373150765b4b1732109' }, index.h("smoothly-display", { key: '775a2f31fa8482493fcad56d3845d96fccbf9de5', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '7fc9d3a9c9c7336476d2caca1c4817ce3a712552' }, index.h("smoothly-display", { key: '4a1eebf14b690a18ce0497fd4d006ebea9dbdf24', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'bae2966572f30739dc2ea816c601479372a5d8a9', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'e48eff4bc337e3858f754d64878cba4a1c395989' }, index.h("smoothly-next-table-cell", { key: '9602593eea1be57d9ab29a312141cc28ff47abc7' }, index.h("smoothly-display", { key: '2e10929c0ee00a4fe54311079bbe2720ce180388', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '7f18d6603218eb4b841a6594cb20fe22af3e70be' }, index.h("smoothly-display", { key: '0460bb90f0c516d27c1de7ad4e06919b07dcf1f2', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '453b932e3980df21bcb4bf9f7b0c6a79da583718', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'b6d39a5e84f253611a99d933d959e6414920e869' }, index.h("smoothly-display", { key: 'b1e5c9147207d0b33ac83505ec9c60a77c4e34ce', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: 'fd2d83a8b29936094cf9954b7ce5fd0d228c9ab2' }, index.h("smoothly-next-table-cell", { key: '3c97ebf79ba2c6be57098a8863c92635e900661d' }, index.h("smoothly-display", { key: '0e7a8f27d83aa9b899064948df026ad5aabda182', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '897bb832b05fbe15b1f1c8192e3f4965d6310f16' }, index.h("smoothly-display", { key: '47d1c55c43b4235dca7791670c51a3dfd762036b', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'c82d11a07d85df58be3caa1d340f79bfa9fdc383', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'e367d768b9f6a7dae0a8e8f9e1ca4712625c57fc' }, index.h("smoothly-next-table-cell", { key: '8455c8e18b8f7b8f9b46940fa9bb286a2134f1de' }, index.h("smoothly-display", { key: 'f6a6de834eebad2884a7f194de51b99930a88ba1', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '710729fae82d16f31ed267dc34f5cbf579517395' }, index.h("smoothly-display", { key: 'b7199b8f8a8351c87a5de58d88dce1841f2d5176', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '397469b8d8bc6e7c5e7f1a20c943185311dc972f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'a50bedb9141d68d0f4a84ebae3318f76ee359395' }, index.h("smoothly-display", { key: 'ec7eb546114284a0afc9722dc8f4b311c6c94eeb', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '0b2661a39dad02e29ebe8b9358f0babbc0a2d25e' }, index.h("smoothly-next-table-cell", { key: '96ebc3ef437d5758e328a9cc0ac3f8e019d3f4c8' }, index.h("smoothly-display", { key: '76a106291c68622f211eb042256049b772db545e', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '81b365b2b689033360f2ad8195f4fc6b4dd71cbb' }, index.h("smoothly-display", { key: 'b425c032ff22f39853131bc630af45bd1b953499', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '5a95df4a905cc84ef57abdec5ffc18f96b10067d', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '70fa7e29f0bc97999ffc4e59fe77dd73506a8fa4' }, index.h("smoothly-next-table-cell", { key: 'be81791b9b30aa56af1f99a27276187a05b73bce' }, index.h("smoothly-display", { key: 'def3880165a75e6593029caf10f034e3bcae1b7f', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '34f5838c2736618ff5e61f2d62fd1cb7cbfdb1f8' }, index.h("smoothly-display", { key: 'd257acb9ffa6788a074cba87998624c02500003a', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '08ab41653f4b42c2c1b10c95e045de4a61a84e61', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: 'e748b0fd8c429b877b0e74f7cf322de1a789097a' }, index.h("smoothly-next-table-row-group", { key: 'a061723aa25db329438a5d5786c9b87851b0d5ba' }, index.h("smoothly-display", { key: '8e6564146bf6e3d2f3274beeff0f6e3f15178644', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: 'fecb8acb2daa334aba93ff4f57f595760c5dace7', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '3addeaefd883fe9c35b23ee9cf4b8a2c50d05b10' }, index.h("smoothly-next-table-row", { key: '4093e035abb023186dac24b9201fd46703cef6ab' }, index.h("fake-cell-wrapper", { key: '7c4811b148645fb0101d2611e48ddb54a42126ce' }, index.h("smoothly-next-table-cell", { key: '9630692656dd94e1cd3aa88d8a4a7d1cb91e5531' }, index.h("smoothly-display", { key: 'b672aa28ba8b644ffae63882989171c4f0eecb65', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'a7dd40c1f71f5ce3e3315c20e492130d8781b43b' }, index.h("smoothly-next-table-expandable-cell", { key: 'b7b295a21c733b19565e248d5464cd0a0f263a17' }, index.h("smoothly-display", { key: 'a3984d8d7c127fcf56bc7377d0d7fbade35e34bb', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: 'dd9b5d67944d4c5b6be2063595e2a4939a4d3477', 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: 'fca76cbcd682eca64ab0efee0aca8a27affe717f' }, index.h("smoothly-next-table-expandable-row", { key: 'bb428d99221e2b93ebc564ffb224e22c7c5c5238' }, index.h("fake-cell-wrapper", { key: '5cad26a15ed83f597f107fc1c83d2e44810c7610', class: "span-2" }, index.h("smoothly-next-table-cell", { key: 'b2490111bc3ed677d108a562c38b275bf096f5f3', span: 2 }, index.h("smoothly-display", { key: '86c8f5a5d9a8780c76e6bdd0d1c0bee873adba25', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '5283f121db09610e7d443b805c383f52053024b1', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-next-table-row-group", { key: 'ad5b519e70f72f6cdaf5c71ece4d8a846087515c' }, index.h("smoothly-display", { key: 'd016762121805cbb666fb669f66dfa69e33f228f', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '1950eaa6a2bd7ec15ded37a712461414af5ef832', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index.h(index.Host, { key: 'b5b9a12ed1a7ebedee962853fb1c1ab3604c90cc' }, index.h("smoothly-display", { key: '874133a285c9e5b67afb483e530afc7f426708b0', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: 'a65c8e0bf79bddf1fd14eb99c6deba290f863bc7', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: 'e52280c4603c31b5c4e60e7db84c43a4c3865130' }, index.h("smoothly-next-table-row", { key: '32315b0c40d38a4af40c5d220b67d64e9834fb2a' }, index.h("smoothly-next-table-cell", { key: '7771bef87817f0da6c74f8e71d002fa45697b5c5' }, "Date"), index.h("smoothly-next-table-cell", { key: 'b1c8af7c0e359268e5297cfc88774ebd12324434' }, "Total"))), index.h("smoothly-next-table-body", { key: '9b74456ff42c5807cddf9475ecf19b50e020234f' }, index.h("smoothly-next-table-row-group", { key: 'cdaffee328afb736b1352c083e04d03d5bb291b8', align: true }, index.h("smoothly-display", { key: '4ac38d447a11d02a769d12bcc428a62e2eede94d', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'd630a94c67fa681611e0ee7a16d28fa24674e6ed', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: 'f21bda65f838a235756ef803a84a16e45f66ec4f' }, index.h("smoothly-next-table-cell", { key: '182f549481550bd5a4558f6a3cf3d93c52c1a3b5' }, index.h("smoothly-display", { key: 'ee95214de7e903e78c46fab939d5ff52cef9ed7e', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '3368960e6e66b98e5a7b16c8cffda4238e0344e4' }, index.h("smoothly-display", { key: '44640eb4ad913c8f694a77d5235013a29f56ab0f', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '33a3da188824a272edb8a84616e481f96fed2bb2', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'c4aac92c55a684c1b64dfc6ffb4e1aee6e35bfdb' }, index.h("smoothly-next-table-cell", { key: '33f2073d5d3405be694d9b4bb1695b0efbc5eb18' }, index.h("smoothly-display", { key: '0fc3275486f466179f307ada3324794bc13d1ddd', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '60cb42d5b0ce7c7817e050e831bacb5183479cce' }, index.h("smoothly-display", { key: 'c3840f52ed808f61eab294a15f872e8a8de24369', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: 'b74b9574a10c88428f6136a5df41982004e82c7c', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: '47caa3f35816245e25bf42b6292ec09f7be07469' }, index.h("smoothly-next-table-cell", { key: 'cf3b2d66158b3c6160beacf040a6415e450c4a11' }, index.h("smoothly-display", { key: '3cbe1c9870099250815f78155b53d83ed2df5794', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: 'e5b9c2597e7664e4c07510dd4cbdc1373071bc1c' }, index.h("smoothly-display", { key: 'c3cb38944caa82c28b6ac50a8cc3241a76ea2ac4', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: 'f8d438067298cf4b9af0d1e1e11f47b689e9a4ec' }, index.h("smoothly-display", { key: '5890d607e81566fe1a8d17ff86082c0615f3d502', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: 'b509c10cbcc08a923960f7c7d532485da0957353', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '952540c0f78b7a194f9b5b3f14419983473af0ec' }, index.h("smoothly-next-table-cell", { key: '5024552145be72ddb1c42e813b679592b3953a8c' }, index.h("smoothly-display", { key: '1de81b28eb10aad8d8dc9bc9924faac4b5389a50', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '859f2ca0abbf469c78cbfbe815e6f645e05d21e7' }, index.h("smoothly-display", { key: 'c2269b4d62d8960a1ed43bb92afb29ec7f3eb7de', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '78f146d5f1348e08c3cd3020fbd2f3a179fff45f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '93ff732577bf261d5201bee519889732af1306e3' }, index.h("smoothly-next-table-cell", { key: '89d743f3b275c868f8036d6d338b8c9cc0e5412d' }, index.h("smoothly-display", { key: 'c781a2ae2967ec5b33e67ace74d915082e189029', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'adc7e74d6bb6b91e33782981d8627b60002f7546' }, index.h("smoothly-display", { key: '7139b742cd4a4ad4ee4d492b15723e1d793ef019', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'e5662c633be1dee2561e6fdd97abf5b9cb207d73', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '1466ae2584c8c1734c0addc826e816567873289e' }, index.h("smoothly-display", { key: 'eb47b314dee0e25b8e87305191e1494dce29440f', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: '018da627b8d760251d2fae7234a9e77c9b3756d6' }, index.h("smoothly-next-table-cell", { key: '531451d04fa325380c4bef2c8751ec8e46e63360' }, index.h("smoothly-display", { key: '7b4d846cd12b89396f95abd89f5f7ce9c02940c1', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'dfbdd99efcf2c86fb3712801cdaa93b6086d476d' }, index.h("smoothly-display", { key: '59f7ab3512bfab2ebcd72a1115191d4f73a6a71f', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '0e00e89247d1e27442caec26f24c4ab2acff0e29', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'cab814db76797e98e829686bf222daddd8b190d6' }, index.h("smoothly-next-table-cell", { key: '53920f54edffe8943b97902b8bee9749bc623623' }, index.h("smoothly-display", { key: '38985f622e1e634ac64897d385c31a4034cf4d8a', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '95a40f8ce6d8a5c5879da7738458c8e2a0735c99' }, index.h("smoothly-display", { key: 'cb2a5c266362f11d44d36afd30b48d68bb9108b8', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'c543999238903fc5bfa98527e4cea4cc5ffdf83a', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'e6c99b64ea69a09589082574ca81fa2f0beb47cc' }, index.h("smoothly-display", { key: '59c64d82e20054cbb4ca1866e1da9307ee820f0f', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '27963864ed3380d2f758df2cc05898ee4cab88c3' }, index.h("smoothly-next-table-cell", { key: '9ae946c56cbf6640e71fa54c418b6856eedf0c5c' }, index.h("smoothly-display", { key: '436be3a551a7ccfae9a0a00ee40e657bec08c203', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '4a0551073bc0370adfcc65a4942cc03884de90be' }, index.h("smoothly-display", { key: '669bfa103da6625086e885f9d2438981a040300e', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'c40f57be9c780033e6835827e1a9d7cd8b49e661', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'c3d2e40c8b0b8a65342c250477308d80d31e82b2' }, index.h("smoothly-next-table-cell", { key: '5328ee8523f9e5c99383d72127e3ea579f2c977b' }, index.h("smoothly-display", { key: '417031617584cdf7f964d5f7d249bc7801d1dd30', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'fc50ee3f0580370cc6b8132a1d04675188dd13be' }, index.h("smoothly-display", { key: '0379d3e95db192e6cf54758aa7df74b4e03e6fcf', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '25b03e45b7ba55cb2c7c55831909441c8199adda', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: 'b175f741b00ea238d852e2959defc45851be61f5' }, index.h("smoothly-next-table-row-group", { key: 'a0a288d1d36fa48917ef157a6ab987cbad0d492c' }, index.h("smoothly-display", { key: '448f89005eb26df63a8a4ff88f827eb38ace276c', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '7e59328ca8ac74fa5cd42b2c288be901a57d4575', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: 'dbd7e62a32fdc906d37962f729b94fb0b659c54f' }, index.h("smoothly-next-table-row", { key: 'c3d8d09ff174fa08a3ca6a824d87ac0ca7d664fe' }, index.h("fake-cell-wrapper", { key: 'a292bd55e4bc37e49333d91823637e4c88101217' }, index.h("smoothly-next-table-cell", { key: 'fa63c81ccfc1f4d88c5f1fe0de77b27bf1271a20' }, index.h("smoothly-display", { key: 'e9ffb986f4eb195734b7477643e2bfc0e5b1026b', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'dcb2b7d14fedcfcef66f4b609455e3637b14008d' }, index.h("smoothly-next-table-expandable-cell", { key: 'b666a18e72664f7d271b1c25919acef84d75ef87' }, index.h("smoothly-display", { key: '2043a1aada8fea39875ba54c50e204731dd71bdf', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '6fb3d164bfe035f144c62b086170566717ca127d', 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: '9c4ff24a9e569c3cb86d4441c29666b959b84b63' }, index.h("smoothly-next-table-expandable-row", { key: '0a201611b26373fab10adfee08637e885e0f0a0f' }, index.h("fake-cell-wrapper", { key: 'acb793021a10b551e8a950650527b1620265d016', class: "span-2" }, index.h("smoothly-next-table-cell", { key: '9b14a81b0119be420d8205256986be21de38d523', span: 2 }, index.h("smoothly-display", { key: '198f19c2ba4da68d3741d2ac2c32a502b35b5b3f', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: 'd9349e03250d6e36f7f229d02451ead2a68c5a2b', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-next-table-row-group", { key: '6748ce570c5b699651a6c5f0f78fd6534ab84421' }, index.h("smoothly-display", { key: 'fb56dd5e5ec69e08e15a943eb6f1cad0003880cb', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '79dc2b6d260d4ba2eafec9cd9bca7c43c0eb5a86', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyNextDemoGroup.style = SmoothlyNextDemoGroupStyle0;
@@ -11761,7 +11761,7 @@ const SmoothlyNextDemoNested = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2918662d8f6b786556fcd40f78767ce7ff46001f' }, index.h("smoothly-display", { key: '1fb356a6830955f57b161ffb11d651ca38ba6302', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: '91de833889e454d4ce3454a8e78853712b5aa61d', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: 'c8faf4e11f4199858fd3d70ffcee43a696a7d998' }, index.h("smoothly-next-table-row", { key: '45ef422919f3441aa7a56f563b4a6d2b4cec8bc8' }, index.h("smoothly-next-table-cell", { key: 'cd911c89cfb1a22a39b183d0d024ddfa51402093' }, "Id"), index.h("smoothly-next-table-cell", { key: 'c119a67deaa1d4eb7767689c8b7a9c784a4859ae' }, "Registered"), index.h("smoothly-next-table-cell", { key: 'f75c85eab17cdab898120cf034005a83f3ebc540' }, "Name"), index.h("smoothly-next-table-cell", { key: '968dbc8c84c5ef8d22327d916bd7a6e13077836f' }, "Age"), index.h("smoothly-next-table-cell", { key: '4a073f24dd766a39996c6b122dd730662f357c0b' }, "Balance"), index.h("smoothly-next-table-cell", { key: '0ab928a0a64f96fdfd0dc27c7e4f777db67ec141' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: '1a28142d22007a4f193652cfe88bdc71e2962f13' }, "Gender"), index.h("smoothly-next-table-cell", { key: '564c648fca4727a46c704fcaf6e8fdab285d543a' }, "Company"))), index.h("smoothly-next-table-body", { key: '214f4e803e019e78239f4e0e822cf6d248d9f474' }, data$1.map(entry => (index.h("smoothly-next-table-expandable-row", null, index.h("smoothly-next-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), index.h("smoothly-next-table-cell", null, entry.id), index.h("smoothly-next-table-cell", null, entry.registered), index.h("smoothly-next-table-cell", null, entry.name), index.h("smoothly-next-table-cell", null, entry.age), index.h("smoothly-next-table-cell", null, entry.balance), index.h("smoothly-next-table-cell", null, entry.eyeColor), index.h("smoothly-next-table-cell", null, entry.gender), index.h("smoothly-next-table-cell", null, entry.company))))), index.h("smoothly-next-table-foot", { key: 'ee6a2a03af1731afcd943b2ca57013612c63ba09' }, index.h("smoothly-next-table-row", { key: '039c9195a8f5a9dbf136fa562cff56557a4b00bb' }, index.h("smoothly-next-table-cell", { key: '61955320cb04d7adf2d1c1aa652f5bfd1695188a' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '9aaae2e71b964b919c2e38a42597081e2b05f442' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: 'b4f48027d6afd67211c8cf0daf569ec5075be395' }, index.h("smoothly-display", { key: '2b2b78cb7577b15149810e8d07a2fd88031fb4d2', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: '0fbe4632e85e6ae1ff7ea638579eb6c361699e14', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: '6ffaa2f132ede1f817a5e421db8483bc4acc906d' }, index.h("smoothly-next-table-row", { key: '48cb7cf9554cc9f199de62b3f4d6713e12e85b79' }, index.h("smoothly-next-table-cell", { key: '71f850be922f57e46c705b7db9a05fad047fd813' }, "Id"), index.h("smoothly-next-table-cell", { key: '250c81d53ee492a8cf7aca0696b7f966064c6e73' }, "Registered"), index.h("smoothly-next-table-cell", { key: 'c8a4d42102cdb5b730ef8d59acd856aee38a6e36' }, "Name"), index.h("smoothly-next-table-cell", { key: 'ead8229f81a8bb8f15697ca00a415e88fc7bf3cf' }, "Age"), index.h("smoothly-next-table-cell", { key: 'ccc4d55b56f4503327838980a6c636690f3b2fbc' }, "Balance"), index.h("smoothly-next-table-cell", { key: 'c2743661c07a71489b439ff2a77c7c7c22ca9cf3' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: 'ca5c415d0868920c9a8164b154939e392081c39d' }, "Gender"), index.h("smoothly-next-table-cell", { key: '6eea972f34a89e244032f4a8a397ab4cc3a3a21c' }, "Company"))), index.h("smoothly-next-table-body", { key: '5669bbb3334669b9ee4f094baf77a46896e97ec3' }, data$1.map(entry => (index.h("smoothly-next-table-expandable-row", null, index.h("smoothly-next-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), index.h("smoothly-next-table-cell", null, entry.id), index.h("smoothly-next-table-cell", null, entry.registered), index.h("smoothly-next-table-cell", null, entry.name), index.h("smoothly-next-table-cell", null, entry.age), index.h("smoothly-next-table-cell", null, entry.balance), index.h("smoothly-next-table-cell", null, entry.eyeColor), index.h("smoothly-next-table-cell", null, entry.gender), index.h("smoothly-next-table-cell", null, entry.company))))), index.h("smoothly-next-table-foot", { key: 'e4e1527c81f2229be13043e12ad864392483e245' }, index.h("smoothly-next-table-row", { key: '81b3166f7377b4972ba70e0facf8d05702174b77' }, index.h("smoothly-next-table-cell", { key: '85e27e5cdd7a7ca0d1bbd06807c02b5f5853b9a9' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'f04d9fa7da2fe16759483d70088bd6d96e01ff1f' }, "Footer Cell"))))));
     }
 };
 SmoothlyNextDemoNested.style = SmoothlyNextDemoNestedStyle0;
@@ -11776,7 +11776,7 @@ const SmoothlyNextDemoNestedInner = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '42d331d6f02e29605d4287b825d255e4d7ae5e78' }, index.h("smoothly-next-table", { key: 'e043fbd03abd88e4d5df96f33a88e7f304f4fc8e', columns: 4 }, index.h("smoothly-next-table-head", { key: '2d54ad2b8ac866e7df43ea86c2cb73ad32d84e02' }, index.h("smoothly-next-table-row", { key: '67fa1d18be150e8a491ba1dc93734210b33c95c9' }, index.h("smoothly-next-table-cell", { key: 'd459fe59acea5672ddcf0f46f9098de39e524d0a' }, "Id"), index.h("smoothly-next-table-cell", { key: '7fe562d6af08bc99dfc8f52ffbc737ce6581e179' }, "Name"), index.h("smoothly-next-table-cell", { key: '44f03d1b903af6c70dcde52b869f145e3f3346e9' }, "Age"), index.h("smoothly-next-table-cell", { key: '0f932a1d4dd7288c382e55d42be3e0c3ab889465' }, "Balance"))), index.h("smoothly-next-table-body", { key: '8e3eb27d8689a45e29d4eb7482e86fb85f48e837' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-next-table-expandable-row", null, index.h("smoothly-next-table-cell", null, entry.id), index.h("smoothly-next-table-cell", null, entry.name), index.h("smoothly-next-table-cell", null, entry.age), index.h("smoothly-next-table-cell", null, entry.balance))))))));
+        return (index.h(index.Host, { key: '09dd937cb77b01430bd40c713747b741401bd28a' }, index.h("smoothly-next-table", { key: '115c2a5e08093063d4bd12970173dfdb21f2ea62', columns: 4 }, index.h("smoothly-next-table-head", { key: '89b637698afc4d4a967e4bdf07bdd803e81ab9ca' }, index.h("smoothly-next-table-row", { key: 'd6a77956016ce8a591ca02bb21173c24f4742cc2' }, index.h("smoothly-next-table-cell", { key: 'a3601a4df87c78aeb41f919236022ddc54bae2f8' }, "Id"), index.h("smoothly-next-table-cell", { key: 'aa623a5df04aba8d3232509984a4a6ec30da5fb1' }, "Name"), index.h("smoothly-next-table-cell", { key: 'a9ca6589639a7d3868fedeaf27cdc159b4ffda58' }, "Age"), index.h("smoothly-next-table-cell", { key: 'ef384eba839dcac8f7d19583b3404b36d37f1ca0' }, "Balance"))), index.h("smoothly-next-table-body", { key: '98087742efb1b1fac406ffc884c8b4789d5aae4d' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-next-table-expandable-row", null, index.h("smoothly-next-table-cell", null, entry.id), index.h("smoothly-next-table-cell", null, entry.name), index.h("smoothly-next-table-cell", null, entry.age), index.h("smoothly-next-table-cell", null, entry.balance))))))));
     }
 };
 SmoothlyNextDemoNestedInner.style = SmoothlyNextDemoNestedInnerStyle0;
@@ -11789,7 +11789,7 @@ const SmoothlyNextDemoSimple = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b3e61ce40053d2c6df81f66fb25c6fa65827fbbb' }, index.h("smoothly-display", { key: 'f0c3be3c580da13af233fa49c4533096e435e331', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: '3937565d1199ce9c2f43866735790fe0ba9f62fa', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '1726917b9733839b10c8ca7a8efb1c959a8b5eab' }, index.h("smoothly-next-table-row", { key: '6f27e135a21264ef9a91cd36071b190af7502a20' }, index.h("smoothly-next-table-cell", { key: '6e3147c4df61b27635c6f7619c7446f2f7f282c4' }, "Breed"), index.h("smoothly-next-table-cell", { key: '83b29f5a66f73b449c721d060086b0f4b43145c6' }, "Coat"))), index.h("smoothly-next-table-body", { key: '53c2c4f9e9bfaa0f5fbd5ef802e824213c28d2c9' }, cats.map(cat => (index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-next-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-next-table-expandable-row", { key: '47efb62d58e2275d6646c066b23cabb5a9e9be27' }, index.h("div", { key: '78074f6dcc940b8aed0459142d0d0f52864574a1', slot: "detail" }, "Content", index.h("br", { key: '7002b6d08634db20ea733862008444b37d8f0321' }), "of", index.h("br", { key: 'abaefe17283a99180c1e183c8638654a2fee334f' }), "the", index.h("br", { key: 'b7ce50063b3de05621a5cd825498a9ea336538e8' }), "expandable", index.h("br", { key: 'fa9863a5e7de4db7fbd3b955e7fee3a078a1e55b' }), "row"), index.h("smoothly-next-table-cell", { key: '97a5f5a0e6425ce3c0c3d34663bd6a5a2153d972' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: 'c2b0a3038a051b692f8eebcb996cfdd18f2635bd' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: '9a2900460f96064953f306a8e91e7ef96a031b39' }, index.h("smoothly-next-table-cell", { key: 'f558dda7a96f898387aaac77bec759727b771008' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: '7eb88e03ed45b2b0b6c0853bd8e40146ce9a22e2' }, "Expandable Cell", index.h("div", { key: 'da0b28f1ad819a0a7fcc07f3e060c5cf3bab33a4', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: 'cfcb5d030c4e7ec2b4834162483e30a65aabe36c' }, index.h("smoothly-next-table-expandable-cell", { key: '314fe801158c101fda2b255c053c94e5d163c56a' }, "Expandable Cell 1", index.h("div", { key: '4ae8580760e2130bdab39a6f9aafd6e09f06d796', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: 'd84c4cb1da9bb63af8f373be107148a03ae4c851' }, "Expandable Cell 2", index.h("div", { key: '4f21b09e10e0fab847b3e1181a8d1912272b3f8d', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: '7ccb1437d45036cbec362068f0f4b86fda82cca1' }, index.h("smoothly-next-table-row", { key: 'e00780a5902570f3726e385d77997e0f3c34e04d' }, index.h("smoothly-next-table-cell", { key: '85414b9725d1cb50a280dffc12087eedf43ff74d' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '89798b1f83be669108890b133b17119a25be3cec' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: 'f0e5ed3e8c39c880f569b2cbc2f4bc2c27c08540' }, index.h("smoothly-display", { key: 'e94724cb5f7f6f785fd3b52655e65c48636708e9', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: '7e6202bf70f42a3d1680732a980cb89c5f982a25', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: 'd910ea41b35d58b1a9a8477cd58461967cbee906' }, index.h("smoothly-next-table-row", { key: 'abf33aa975bebd41037ecef53f0e156c1b03c6ce' }, index.h("smoothly-next-table-cell", { key: '6e4efe82ed03e51334e5a5699e7514e3295b94fa' }, "Breed"), index.h("smoothly-next-table-cell", { key: '878f2d4256a0a96cee9f16ac4ab25874371d7ae1' }, "Coat"))), index.h("smoothly-next-table-body", { key: 'ba635649f0b10b1bb25fc44c38a139fb4a89199e' }, cats.map(cat => (index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-next-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-next-table-expandable-row", { key: 'dea287946b438d9de43421207cbfd3a4e7bdfa4c' }, index.h("div", { key: '8efd523fa0b781f1a1c81737ea9290f19f399dbf', slot: "detail" }, "Content", index.h("br", { key: 'db97d4d20cfcf64c1896cb71bc2927dbbf2b424a' }), "of", index.h("br", { key: '33652b6bdc7a37bc2082b54595439671cc717714' }), "the", index.h("br", { key: 'b37ee844d383d71d25b289cf1d3158d777fa6f30' }), "expandable", index.h("br", { key: 'a075fa1871d690a0175899c8e924fe69a5f19e2f' }), "row"), index.h("smoothly-next-table-cell", { key: 'f072f18483d71310617c95303958466ca85680a6' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: '558de9eb9dcfcb118defcf90ad715c5bba909040' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: '41f1963785d1f2b4bd312bf51057f6dedce15f9c' }, index.h("smoothly-next-table-cell", { key: 'de444a2958a968c567e7865fe500dc0bc54f0817' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: '5ae4c3f03fdf03128b080168d2b906030d4bad9e' }, "Expandable Cell", index.h("div", { key: 'c569f633689ec1d5c86a7fc6c1e8dac3c5f79eff', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: 'a4198f008c3fcea09be738ef5a2db11b7eb39fbc' }, index.h("smoothly-next-table-expandable-cell", { key: '383e20ae6029aadeefa69364b7c683cb8ab285fe' }, "Expandable Cell 1", index.h("div", { key: '9f48341c8a524f9c0af0d8dcf7623efce8468083', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: '10ae00a93ccca38d787296f7813ca1f02b31cfb7' }, "Expandable Cell 2", index.h("div", { key: 'e9d8d2652a17e11175df47a5a9b29fb11974d313', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: 'dbc30e2d9ea66c929238e93c32a63c576cfb133e' }, index.h("smoothly-next-table-row", { key: 'fba4282a62319fc7a6c34265b932d1044cba430d' }, index.h("smoothly-next-table-cell", { key: '28b7464e71c196fe7f96145c2ab5315902c3a8e9' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '8d37cb86d5ddb87d50409bedc6b6d6f1711ec505' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -11875,7 +11875,7 @@ const SmoothlyNextTable = class {
         this.columns = 1;
     }
     render() {
-        return (index.h(index.Host, { key: 'dbb6bd247d535b1892b481e310464d732ed11bc6', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '4b46577f4c8adcca10975bb9dcba326826666a57' })));
+        return (index.h(index.Host, { key: 'b51c64a36fb7b62c337ec711919304f81ccdb3e2', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: 'cd11d321afbd61751ade1ab746b38e593275d92c' })));
     }
 };
 SmoothlyNextTable.style = SmoothlyNextTableStyle0;
@@ -11888,7 +11888,7 @@ const SmoothlyNextTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e71ea03a9fffd3b974323f5728b6dcb05abd25de' }, index.h("slot", { key: '9939c2199208bc7a7dec4208b341029f64c6c08a' })));
+        return (index.h(index.Host, { key: '0e563aab03a3f500ba04dc1ddc81c715bd2781c1' }, index.h("slot", { key: '10433f8c2fcc46127dbb7ba028bdceec5a5b2382' })));
     }
 };
 SmoothlyNextTableBody.style = SmoothlyNextTableBodyStyle0;
@@ -11903,7 +11903,7 @@ const SmoothlyNextTableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'd004cc9b07f352193036c043081a8183bfa995d2', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: 'c3d3a03b8b1bb3644f66983b7221a800a9627881' })));
+        return (index.h(index.Host, { key: '131554a5fe596cf08f4336c85e9e07d3d36560a0', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '6092d3d140c569cc0e02c543761bf49ef403502e' })));
     }
 };
 SmoothlyNextTableCell.style = SmoothlyNextTableCellStyle0;
@@ -11975,18 +11975,18 @@ const TableDemoFiltered$1 = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: '40e55a1e60f4f46e857c8de267ca072d491a9860' }, index.h("smoothly-display", { key: '5ed2b3c9ddc878b32638915fa9aaa7d98e6c7d9a', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '56bf66c4504650bcd6602abe75593cbe782b31ba' }, index.h("smoothly-filter-toggle", { key: '587ffd7918eeeeba1190a5c81ea3da5b1ac55065', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '1221f3f47bff1cbfafef7c23c3187ae4d3ad054a', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '28f588559e7417349a7c4d114893fa921dcd1552', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'd5c2242244eee397d0b63c71eb9a74bb35e6ec91', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '4a9582c32834fc39d41b6611351374bfae74e7cd', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '0ec0acec28bcbc9a013914c6bb91538b08c5e3d7' }, index.h("smoothly-display", { key: 'e4e834767268048e78476a771fbd7e6421a60f02', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '4fbfb4f7386050ba81ce6a9476c853307c5b1278' }, index.h("smoothly-filter-toggle", { key: '170936d38ef02cbfb1ed0b197e88568b484cb4d3', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'b95ffa876574d57eef56c3ac0406affee85e0b9b', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '74408217c8d1160e9e127c684f0d3624820ade42', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'ca16ded3c5952b81ae724d69b93ebccc86093c5b', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '764f45ea42e581e7450a7faf3804448b9a75d7b5', 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: '8c43bf449b1fdc549a58cf197f0d3dad0beb8615', slot: "detail" }, index.h("smoothly-form", { key: '37ac0e76aa976423b4f41fdebbd8ec2cd679bdce', looks: "border" }, index.h("smoothly-filter-select", { key: '28ebdc3beaf2958fb2e1a9420ea1bf3c115f7978', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '9c1550eb4b30c6fd44c5ad03db51dd831b7f7479', slot: "detail" }, index.h("smoothly-form", { key: '377325c40c9b7a4d3978649045ab9ca54e45f0b7', looks: "border" }, index.h("smoothly-filter-select", { key: '888d912d0d5078d07b6275653d7fe0fa64df610d', 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: '5afaf537dd98ec45a492a7ff0ca405a9077e41ba', 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: 'adabd10537b54c75c1f3f55295922202268f5a9f', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names$1)
+            })), index.h("smoothly-filter-select", { key: '272e86d78ff3bbfab78a4db19c74e0abfcd7f158', 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: '040a752ec5a07acd5c6859b98c8693abe8effd01', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names$1)
             .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: '3899c32a751a510cdee7c46c27ddf158b4ab8bc9', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '68c17dc188825abbc757447a9a01f298b7414083', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-next-table", { columns: 4 }, index.h("smoothly-next-table-head", null, index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", null, this.selector.render(cats)), index.h("smoothly-next-table-cell", null, "Breed"), index.h("smoothly-next-table-cell", null, "Coat"), index.h("smoothly-next-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", null, this.selector.render(cat)), index.h("smoothly-next-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-next-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-next-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-next-table-foot", null, index.h("smoothly-next-table-row", null, index.h("smoothly-next-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: '7bf723420c1b3966ff0aa334c643cdf0dfd0e80a', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '1fe6b8d025cd5eebb4491d06ecf158d5ca756180', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-next-table", { columns: 4 }, index.h("smoothly-next-table-head", null, index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", null, this.selector.render(cats)), index.h("smoothly-next-table-cell", null, "Breed"), index.h("smoothly-next-table-cell", null, "Coat"), index.h("smoothly-next-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", null, this.selector.render(cat)), index.h("smoothly-next-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-next-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-next-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-next-table-foot", null, index.h("smoothly-next-table-row", null, index.h("smoothly-next-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$1 = {
@@ -12020,7 +12020,7 @@ const SmoothlyNextTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '9a242fd827053c81aa4be069526d2ce2b536ab5b', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: 'b274675b4e02ee865829a5b59611124e0bc34a4f', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '17f03ee3d69e878715234c017d562db28a79b54b' })), index.h("div", { key: '00a52f941e6466f5697879406909568b3a9a23f2', class: "detail" }, index.h("slot", { key: '30f28efa55ce257ce9487108e71a2768405040d7', name: "detail" }))));
+        return (index.h(index.Host, { key: '0cc9da01279fd9748183fa0a24baa20580da3716', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: 'ef0ec0d459229e801dd6c4fe9f5402713f8e8893', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '033bbec94adaebf9c2ef54afdf5bed73be8a0deb' })), index.h("div", { key: '89e70af7a757f55465a65f2093c7873af6f8383c', class: "detail" }, index.h("slot", { key: '5d182fed87a078c6a1aff878faeee348a3e93bf3', name: "detail" }))));
     }
 };
 SmoothlyNextTableExpandableCell.style = SmoothlyNextTableExpandableCellStyle0;
@@ -12037,7 +12037,7 @@ const SmoothlyNextTableExpandableRow = class {
         (this.div && event.composedPath().includes(this.div)) || (this.open = !this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '3cb7957d70c3c8c292bf3fe8ff608543946cfec8', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '97bfc0f02c70c3e639a853e753c631887e8665f9' }), index.h("div", { key: 'd8cab5b92a1e21117d6701ccc17bba6fcbe0c61d', ref: e => (this.div = e) }, index.h("slot", { key: '73327a15d2506ca0813f8543eab29eddef15c81f', name: "detail" }))));
+        return (index.h(index.Host, { key: '1581fdf764f181470fb82459ff2bf6766651fce6', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: 'ad709b20293c451a5bd872b432e88a6ecf4cbee8' }), index.h("div", { key: '02f3e263e50508ddfbba844aba5c11bdefe7e6c3', ref: e => (this.div = e) }, index.h("slot", { key: '4ae66f4897070603dae3d21862600446882d28f4', name: "detail" }))));
     }
 };
 SmoothlyNextTableExpandableRow.style = SmoothlyNextTableExpandableRowStyle0;
@@ -12050,7 +12050,7 @@ const SmoothlyNextTableFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '31d01d3d1a3739c1ee18683e3dabbd2d49d9b72c' }, index.h("slot", { key: '220e86aa50e3a5ef9a075e09020df1b9e20158c1' })));
+        return (index.h(index.Host, { key: 'a16a5dee88f5aba43b87bcf7ccca83f28a1932ae' }, index.h("slot", { key: '31a6b6bd9ee95e217033ee9f29d9b892bda638e5' })));
     }
 };
 SmoothlyNextTableFoot.style = SmoothlyNextTableFootStyle0;
@@ -12063,7 +12063,7 @@ const SmoothlyNextTableHead = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5cb93051b8c58497d48a5b097b65d5490e11df39' }, index.h("slot", { key: 'e063c38972a9773c8cb426d8e613234dbd43a3e7' })));
+        return (index.h(index.Host, { key: '9c072329b0c6dc156ce2c42d9e5525bde49a32d7' }, index.h("slot", { key: 'c58d09db2e138035ef9d7a92b978fc1f5aff250c' })));
     }
 };
 SmoothlyNextTableHead.style = SmoothlyNextTableHeadStyle0;
@@ -12086,7 +12086,7 @@ const SmoothlyNextTableRow = class {
             event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: '5bd536b30e7a1a0425fe59a82ecbe5b7aa021f3b' }, index.h("slot", { key: '51916c682a2cf85d32cf56f09854e2a55a9497a4' })));
+        return (index.h(index.Host, { key: '3678ee43a848eaa9ce4e653787e7de16cac5ca84' }, index.h("slot", { key: '4ba5d49f00775ff5573c2ce6fe64eaf8f4b1a4f3' })));
     }
 };
 SmoothlyNextTableRow.style = SmoothlyNextTableRowStyle0;
@@ -12104,7 +12104,7 @@ const SmoothlyNextTableRowGroup = class {
         this.open = !this.open;
     }
     render() {
-        return (index.h(index.Host, { key: '0ff8565dbf29d08c88919cef4bb2bb88eaa642c6' }, index.h("div", { key: '3d9e437a0b12881342309ea570531636d0fc4ec8', onClick: () => this.clickHandler() }, index.h("div", { key: 'b73e2686df3f1df7d7b716e3c7f8403dd4f036b2' }, index.h("slot", { key: 'fb4c97744504e215e1e104d64f5aade12155d4cd', name: "start" })), index.h("div", { key: '422284365ce2e49c79b6378e4b178d952480ca81' }, index.h("slot", { key: 'dbfb6675de952dd5c90eddc1436452e53031b208', name: "end" }))), index.h("div", { key: '23edfd55d5a497d6c26dee82749017d4072f26ed' }, index.h("slot", { key: 'da8804634c9d0820bc83482f92a5367674886609' }))));
+        return (index.h(index.Host, { key: 'b8c474c9a918dc4b98336b8a86d702c9a6bb96d3' }, index.h("div", { key: 'e59fb46d868b27bd09bc70428f338debf7eb065e', onClick: () => this.clickHandler() }, index.h("div", { key: 'ae4c991ece2779f59155e132f4d52f464d83f7bf' }, index.h("slot", { key: '9647e98394be983112e568a0be6c8dadeba8de51', name: "start" })), index.h("div", { key: '8a897b2a13d451f0dc54d9d26761dcc7bad07790' }, index.h("slot", { key: 'fd5447a3a57cfff86a220d908efa761f696bfa55', name: "end" }))), index.h("div", { key: '62b24bddcf2b5f3237b693d975ac4309b4d4d472' }, index.h("slot", { key: 'eadcacab440c3e6879b4f16542b70fc1077393ec' }))));
     }
 };
 SmoothlyNextTableRowGroup.style = SmoothlyNextTableRowGroupStyle0;
@@ -12164,7 +12164,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index.h(index.Host, { key: '9373202e44d24445f78b129aad8dc06ad3c6d0f2', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: 'f05d92baa7220e86a63454404b4bdbfbfa09a40e', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '6655fb12d5562f901a5b2c0e464919b5a72a5b40', name: "close-circle-outline" }))), index.h("span", { key: '2172b84223c3850559eac7cc6e094eeb9737bb4a', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '8038f279bcf0045445944563cb027e6e1d69d52d', name: this.properties[1] }), index.h("p", { key: '5e450720fcc4b7c001163f349129a4661a619a50' }, this.notice.message))));
+        return (index.h(index.Host, { key: '7ffd89b8c3ed29f130f5fe4438e6d7df8d9d2590', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '5eea7e45c08880935b23bc1f86f81154d7c911ab', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '756a23ee7984b89e6e609763e94499ca93046ed8', name: "close-circle-outline" }))), index.h("span", { key: '6079233e6829c7c5d4350ca7b2a86c0adf0975b7', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '2a6ea1d2cdb8047b3cbff522c1c74be3634ca312', name: this.properties[1] }), index.h("p", { key: '1a10a2ef99d80d70c38b8955255eb570d285254c' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -12189,8 +12189,8 @@ const Notifier = class {
     }
     render() {
         return [
-            index.h("slot", { key: '8ad580178b93c559436453fe3f7ca9d63f95dfed' }),
-            index.h("aside", { key: '9157e38f7d23f7e85b473f317137f0081945fa2b' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
+            index.h("slot", { key: 'a74bc1576b30b0d9e7e05ef3b3f5d845281ad98b' }),
+            index.h("aside", { key: '458dd5d7bfe2ca28303d46c23df04796e02456b5' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
         ];
     }
 };
@@ -12207,9 +12207,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: 'e744474c96c4de1f063fc82dd17ca946424c6f8e', style: {
+        return (index.h(index.Host, { key: 'ee62276d9c7935db6523f379aea7e19e7c094980', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index.h("svg", { key: '50d0a6d1fc40d21351c566e5a6c331672a3eb609', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '3c377b1ec153013c62df37eb293be026ffe50399', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, index.h("svg", { key: '3e90572cd7b5a4cd54ba90408ae70db4365b523a', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '6a2bc31d63d1d7bba66e6042bb22318cbad682b9', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = SmoothlySpinnerStyle0;
@@ -12242,7 +12242,7 @@ const SmoothlySubmit = class {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (index.h(Button, { key: '7ecd62cee21220b39f335f5dadaf32a73cab48a1', disabled: this.disabled, type: this.type }, index.h("slot", { key: '21242c17132cd5780a4ca8ddaa75c6180476cfad' })));
+        return (index.h(Button, { key: '7edea042fe1302bfb021bca102d5ca94d796cfe9', disabled: this.disabled, type: this.type }, index.h("slot", { key: 'c3124d742e7b34a05d6b3f3df9e4f45a261bf63c' })));
     }
 };
 SmoothlySubmit.style = SmoothlySubmitStyle0;
@@ -12266,7 +12266,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (index.h("details", { key: '7c93bd07024485b7a86dfb24d94628882c6017b4', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '62c42db7b4cdfe6518114cf1e06f4c3c9b5ac0c7' }, index.h("smoothly-icon", { key: '993feddbae607aa2d90c1ba4452b185205fb158f', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: 'ea0da27147dfc3fd4f894931a9334e9742bf993d', name: "summary" })), index.h("slot", { key: 'ecf9468a192757984ddde9a352626084802b3705', name: "content" })));
+        return (index.h("details", { key: '95824f9d386acf233deef3e7d2c16da61bcc11ed', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '2c7aeb9f62ec043153a8de37765ca51e5d444043' }, index.h("smoothly-icon", { key: '1700888dabff55bad8296a6d0cb0d6d56017f9f8', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: 'd69e4ad30ad873fc39aeb5be1680df3576119593', name: "summary" })), index.h("slot", { key: '557d37700f1771e132792dafbc643a0ed724fbc1', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
@@ -12294,7 +12294,7 @@ const SmoothlyTab = class {
         this.openHandler();
     }
     render() {
-        return (index.h(index.Host, { key: 'f021a8852de6b33d88aab41a0e422ea62bd9e983' }, index.h("label", { key: 'd1c68e442b6d507d9c6b350f0015da62925acf20' }, this.label), index.h("div", { key: '0705881daf744a9ef44a06569f90e16c3f4bec81', ref: e => (this.expansionElement = e), hidden: !this.open }, index.h("slot", { key: 'e1e50a96252754e67bf6e8d878b66edf2e6ab2c4' }))));
+        return (index.h(index.Host, { key: 'f63aa9cc7ebd814d8a7465937953d4cc8e9bd36e' }, index.h("label", { key: 'aab954e0b0ed9773aaf674449b30eb3692295aba' }, this.label), index.h("div", { key: 'd0c8e6b0d95232c78e23d4d1628d91bf39901e6d', ref: e => (this.expansionElement = e), hidden: !this.open }, index.h("slot", { key: '138318aca2fc33f465c29c269c52080a6c5907a9' }))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -12345,7 +12345,7 @@ const Table = class {
         event.stopPropagation();
     }
     render() {
-        return [index.h("slot", { key: '916bfcc0463f138cf461a61a114bcfef7617016c' })];
+        return [index.h("slot", { key: '17f3cfa5ed04adb7de21de561c547444f53d6e86' })];
     }
     get element() { return index.getElement(this); }
 };
@@ -12359,7 +12359,7 @@ const TableCell = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7c617c5627e2b0cf9cd34a68c73bc1549a3ea7bc' }, index.h("div", { key: '0802eb51e9a57a451f88a0b14e644cce81e09de5' }, index.h("div", { key: '097a8dd48b59060e58908fd2cb32c3a7654508c7' }, index.h("slot", { key: '25621a9a3eb6ca8764a6682428b9d86e0cf2616f' })), index.h("smoothly-icon", { key: '58d2e7da789615b9145daf1d4806d7610070cda6', name: "caret-forward-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '96166370e32edb0b1dca81039dc7370b45e9dbde' }, index.h("div", { key: '6b7638383d72c85796ef05c8e5194ed9728881f7' }, index.h("div", { key: '17b5d6fc6ceffd1ad2c74ce105b284f67e645a87' }, index.h("slot", { key: '804154226a34f08a8ec27598fe75793df9534de7' })), index.h("smoothly-icon", { key: '2d794556f09f3a4b91f7d48c6cbe704f32e67aac', name: "caret-forward-outline", size: "tiny" }))));
     }
 };
 TableCell.style = SmoothlyTableCellStyle0;
@@ -12372,7 +12372,7 @@ const TableDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '195a1575e0707b777ccf49773650a20b3cb8948e' }, index.h("h4", { key: 'accfd8924f5e600fbcf6c4b57323b494d4a723b9' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: '8d5240cef2ce5dd3d4cf5c7b4fdf0897d3ab4776', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: '963584e47d99b56a2aca39d2c4e61597440dea50' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: 'b4acfd3d3a9fe5ee72f2b2c24de439e88f0b83e8' }), " ", index.h("h4", { key: '51243e8b1fa066eb660ac5b8949b17257d5c2d93' }, "Demo table 3"), index.h("smoothly-table", { key: '9caf653f82a519bd209116a16bcab0c709f4abde' }, index.h("smoothly-table-row", { key: 'd2352a0af7b20efa1b4260212931044ecd453447' }, index.h("smoothly-table-header", { key: '74920faf28c8b7eb708f72c434e4dffe9bb286c1' }, "Header A"), index.h("smoothly-table-header", { key: 'abd83c752bb38de681518fa57dd3913bd487a563' }, "Header B"), index.h("smoothly-table-header", { key: '17458974cc5773a230d36f6e02ef4d44d8931fc8' }, "Header C"), index.h("smoothly-table-header", { key: '6876860bf03dab723331b00b63763c6b22ea50d5' }, "Header D")), index.h("smoothly-table-row", { key: '68fcc7e6e437d9993c2c7225545db0a823f527c3' }, index.h("smoothly-table-expandable-cell", { key: '8bf2a57e3fe9d3352a91e1967178d03a1cfddb23' }, "normal row (exp.cell)", index.h("div", { key: '7bbbebb76c7c60694d1ca7fb1a4dc2f0cd09fabe', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: '2e33ca058af39cc635bbdb7ae536a528a0980fd4' }, "expandable cell", index.h("div", { key: 'cc9b2085fbd09895dc2f8f31c4784bf28d710b61', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: '4c43c8a127b4f70b539cfb6445271a6b5803f35c' }, "expandable cell", index.h("div", { key: 'ef78b614c14b32bd96eb3c83a19317965839f909', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: '22db6fc99805a93e52322afcc246b06c869f4393' }, "expandable cell", index.h("div", { key: '46ae3e020d5becf3aca1ef441abba732f8dad3d5', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: '171e8b2a530412a3b912c8adc9b88dd3a8adf8dc' }, index.h("smoothly-table-cell", { key: 'bacbf35a674dba0d5d5d2dacb812153f45f88c56' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: '60a081befcfcf8cf30f1bdd302b4d4081012bc70' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: '2db528f6a78cf3fd8364842fe8c870adade86a0e' }, "expandable cell", index.h("div", { key: 'd0eef6a48bbe0e1ad73075f24149ce3424e0166d', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: 'f6d2f7561202fc8766e2c975e291278e6fc67bc4' }, "expandable cell", index.h("div", { key: '5b1245b2106e552c81ae1b112aa140a163a0f31b', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: '5c84b4f1b53cbb0c400b85d3078d204cdb350249' }, index.h("smoothly-table-cell", { key: 'b82d0257dd6eb9115344e9bc97333ce85728095f' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: '7084a47af6177f86fdafea9ba97e505d16378cd2' }, "Normal cell"), index.h("smoothly-table-cell", { key: '04040e71250b0e5177af58e512e61c6a565458e7' }, "normal cell"), index.h("smoothly-table-cell", { key: 'e1217677e9b73b0b83fc10f4341544726f134969' }, "Normal cell"), index.h("div", { key: '8569550c50586315f90c1b37d136e75ed3ab16c5', slot: "detail" }, "expandable row content"))), index.h("h4", { key: 'dca5d69ca94d85c628f5ccf8cd056b6841ddb49f' }, "Demo table 4"), index.h("smoothly-table", { key: 'b27af661dc8753d03c71f1618eb37e35b4a3fb5d' }, index.h("smoothly-table-row", { key: '3f25431878d688d757568476f551c26d996a41c9' }, index.h("smoothly-table-header", { key: '3ea50b60f73edc4b1df83bd0898152b3bc4bfe31' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: 'ce1fbc9a0507f3962b71a31599501da61ae90238' }, "Header expansion", index.h("div", { key: '2048236d35c60f3ecc5796316b139a19ef119a75', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: '4a37ca6064939d157dc1897fe5afb501aa53e09e' }, index.h("smoothly-table-cell", { key: 'e2d73f54d0853abbe3bad64510700d3f9d146e52' }, "A Content"), index.h("smoothly-table-cell", { key: 'dfb3e22148096f616073b40bc59bd49ab73b3757' }, "Expansion cell"), index.h("div", { key: '2d4b6590e92d5f44769a695c1a45192b5e651960', slot: "detail" }, index.h("smoothly-tab-switch", { key: 'a9ea3b82d9178ca730317c303d23f337ed9e44fd' }, index.h("smoothly-tab", { key: '4d819922f45fa0e030455b23e7b00702e4fa23be', label: "innertable 1", open: true }, index.h("smoothly-table", { key: '00af3f7a1b7302f64d506c70efe7f5cc4d83eb4d' }, index.h("smoothly-table-row", { key: 'f2171fc61172d26ed7a4dd239ec52d6ab428681d' }, index.h("smoothly-table-header", { key: '35a35002ebcf40a1372f1b844878bed0d7982eeb' }, "Header B")), index.h("smoothly-table-expandable-row", { key: '068f2ec3eb762cd9b16865329ee9970c07420756' }, "B Content"))), index.h("smoothly-tab", { key: 'd06450ec888a3f79b816cb5d074c6162f4a74160', label: "innertable 2" }, index.h("smoothly-table", { key: 'd6a1faff56b9da1183fd6b972f8073af58441719' }, index.h("smoothly-table-row", { key: '5a66bb6a69e505a5dfd71c2dd97e5759351e5513' }, index.h("smoothly-table-header", { key: '0dacfb419a15c60e141aad4455d4b0ffbd8e4ca6' }, "Header C")), index.h("smoothly-table-expandable-row", { key: '8201508aecf21b21515a39929bc13189fbaf4f5e' }, index.h("smoothly-table-cell", { key: 'aa5bf40e42b12feac6f6e86564280cb02e4aed74' }, "C Content"))))))), index.h("smoothly-table-row", { key: 'e60fb99785bde919f36d687c5f3ceda942e60a74' }, index.h("smoothly-table-cell", { key: '86bf5cd70d5c9d71931648cf1092ca5ae494d668' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: '19d4def997de343eb6e12aaeeddb6099146b261d' }, "Expandable cell", index.h("div", { key: 'bde49e170ac83cd1a0a72bc7bd93882f740e7756', slot: "detail" }, "Expansion content")))), index.h("h4", { key: 'f976ba72b57f3a017aaff3eaf99de23bf3133289' }, "Demo table 5"), index.h("smoothly-table", { key: '0995cff29a748206beffa09a6db1d9b1f912795c' }, index.h("smoothly-table-row", { key: '30194ecb1414eabee980e105272eb0c26822b19e' }, index.h("smoothly-table-header", { key: '2b8e4fb98df4abf06493047ea9b8ca4be92bd2c3' }, "A"), index.h("smoothly-table-header", { key: '43fc539273efa696b153683e5c895c3c937f8b6f' }, "B")), index.h("smoothly-table-expandable-row", { key: 'ed4b146d035e42c37515f9ec3870fd934a3680be' }, index.h("smoothly-table-cell", { key: '6bad9ecfacd6a4641dca75c01a3fcbf38953566e' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '333d0711267fc6851ac4b0ee5338a714958d7afa' }, "b row"), index.h("div", { key: '363fc0c05755ff6de74e05370193862418ac618e', slot: "detail" }, index.h("smoothly-table", { key: 'eff70f7dbeca47677c170763e10775df62972905' }, index.h("smoothly-table-row", { key: '1fcefd428e7a5d4de4c61255f086cc635706e0e3' }, index.h("smoothly-table-header", { key: 'aae78463e80b3ec11b3a99f61eeaf7b5a1b1ba9a' }, "C"), index.h("smoothly-table-header", { key: '4b5445d614b17bf546517019818955387c28ffbf' }, "D")), index.h("smoothly-table-expandable-row", { key: '02e651b5cdad0e878540d45f52736215ef8ba287' }, index.h("smoothly-table-cell", { key: '8b1929d115139ad5b8578bf3faeeba98751439f6' }, "c"), index.h("smoothly-table-cell", { key: 'bf16be63f4d75b163b629b9c7139557cfac59211' }, "d"), index.h("div", { key: 'c3d2ca6df84c0246e5ad6e87a246e59cd54ae881', slot: "detail" }, index.h("smoothly-table", { key: '21c27534ec17afdfb508cedf40ec130e7c581dc1' }, index.h("smoothly-table-row", { key: 'cec2b7a1df11d68628e4bedc6b48218a379840e3' }, index.h("smoothly-table-header", { key: 'c385e2e15ecc3a69d29ae8f4fac646ce998b712e' }, "E"), index.h("smoothly-table-header", { key: 'b0948769933d6928181e94e08e7c8dcb7a01ef2f' }, "F")), index.h("smoothly-table-expandable-row", { key: '42f2265ef4d999f6120eee888c8e4176cf9647ef' }, index.h("smoothly-table-cell", { key: '2d4aef45f61c66c4edc0eb77ee290d60f3944f2b' }, "e row"), index.h("smoothly-table-cell", { key: 'af3d570c3976d6abe438a61df215596f86db2647' }, "f row"), index.h("div", { key: '4386dc4cd95ba177a790835888d6c219aabf943f', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: '196d5f88ee1f7fe5014b891eab54dd1cf74c1bcb' }, index.h("smoothly-table-cell", { key: '9de4d9f9de66e91d1d7907fe16adbbf744389750' }, index.h("span", { key: '40d2867293c095a267a0eb427fbcad5ab4a24aa6' }, "one"), index.h("span", { key: 'e67544a173aeea2c5d2c017463f8d5d7e3784439' }, "two"), index.h("span", { key: 'caca0e65f7eee6d7b3b19aed0c17af12fa2824f9' }, "three")), index.h("smoothly-table-cell", { key: 'ff4ea1baab1938aaaa56bc0df754de264e54b529' }, "five", index.h("smoothly-icon", { key: 'f06130da29a5e9cd3ebc3be855e14e12fc41be3d', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: 'ca310d1438babd662cf65c4c418e0bfdfc5469b3', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: '25873d6ba7fc03a1ccdfd1944d4cdb859f03e63b' }, index.h("smoothly-table-expandable-cell", { key: '5641e08e26a337e1444ef89dc71ade0120053234' }, index.h("span", { key: 'bd2fa3a6748e1d08d48a5f47e30b794844497208' }, "nested expandable cells"), index.h("div", { key: 'af572d2614cc44e8fd39851b4d334d3dbb098902', slot: "detail" }, index.h("smoothly-table", { key: 'd7cdcf4770f17fb0e4d506a986229ea3084ca206' }, index.h("smoothly-table-row", { key: 'c7a01e980feb37be875215041ac03ed1ea494a7b' }, index.h("smoothly-table-header", { key: '43e3e9301f684cccd7c2c35fc4495d7ace8c7f24' }, "E"), index.h("smoothly-table-header", { key: 'd060e2e1ec7d35ad52ee35e6616a5445a20f6e07' }, "F")), index.h("smoothly-table-row", { key: 'f236faec2e7cb97d7480636abb75f5b907ce056e' }, index.h("smoothly-table-expandable-cell", { key: 'cf39b51ad9e11264d5ef4911c03d3328de6ce7fc' }, "e cell", index.h("div", { key: '7bc76ff037aafa01fee7a51e81ff959c46186311', slot: "detail" }, index.h("smoothly-table", { key: '2ec10e0e537de24a7503c057e22811c03673a369' }, index.h("smoothly-table-row", { key: '6c7e33a701ff9bd7542766ae8458d96f7e5225de' }, index.h("smoothly-table-header", { key: '7a2f7836ca78eb35a8348c8e61c242b5749087e3' }, "G"), index.h("smoothly-table-header", { key: '35aff97240839a80f7a1f745aadc6bdae0c611a2' }, "H")), index.h("smoothly-table-row", { key: '52c2a55c8c55654fb4425d37d9f5533c5a60b974' }, index.h("smoothly-table-expandable-cell", { key: '93a7e6723a91dcc42f2e1c8123c1f0b03042bbe3' }, "g cell", index.h("div", { key: 'd59e9d2528a5df3c4f1653a932e854b142292b76', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: '33750da7f96afabf466077531f9755838648a247' }, "h cell", index.h("div", { key: 'b528b4bf4abffa19ffb3784eaf129ee896342a45', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: '991055e3b94f08d2ffa4760aedd22702cc0e70b1' }, "f cell", index.h("div", { key: '0dacd9ebff08959b7e359dce256a9dc22a53acc1', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: '7fb258c6736a68e9bab8a7179a87b619968829ec' }, "b cell", index.h("div", { key: '75a489df18b5ccbeb294a7e0177268a618fab116', slot: "detail" }, index.h("smoothly-table", { key: '08aaec97ab081319433048d128cc132249d19685' }, index.h("smoothly-table-row", { key: 'a12ffdd0a1d438ef47a5b4a9be740f8df73a993e' }, index.h("smoothly-table-header", { key: 'e25b785e0baaeb71764854012e6edd75ae5a3a62' }, "C"), index.h("smoothly-table-header", { key: '42d538439af8f9920573d52795ceeb6ede13b7ee' }, "D")), index.h("smoothly-table-row", { key: '2398032befeda521b182b4e38886c576c11a30dd' }, index.h("smoothly-table-expandable-cell", { key: '0256bc807d3c5b4d5d7bd9afbb26ef782d0605b1' }, "c cell", index.h("div", { key: '47f5141152c448410d0882af7c7420f8c3c3edeb', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: '140b2a08d46084ba90eb1e0aab379e92e57456cf' }, "d cell", index.h("div", { key: 'df7d8adb41a1646532eb46b4606df5060201cfb8', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: 'd0b77b23de1d87d5c881d379d4499d355205ad51' }, "Demo table 6"), index.h("smoothly-table", { key: '42aa096de7e547527c73b3af6c5f1e7169c67ce3' }, index.h("smoothly-table-row", { key: '7fbab0ebfa9a247d6ad2f36f87c51dadc764e7d7' }, index.h("smoothly-table-header", { key: '2aa927b5264f7644ebda39b0455ac289ed3b3c06' }, "display"), index.h("smoothly-table-header", { key: '745191c7137be04adf1355656429b2f04217721f' }, "contents")), index.h("smoothly-table-expandable-row", { key: '214a6ea1a7d0d85dfcb842fbf1ed6fd40a125677' }, index.h("div", { key: 'f8d4c67f839a0754a0d9be214baa4bb478325f9a', class: "content" }, index.h("smoothly-table-cell", { key: 'f87798724031c22fece171142ae01359ad8a660d' }, "A"), index.h("smoothly-table-cell", { key: '7f58186cc48341c94c9b8dca5f64ae42ea29cef2' }, "B")), index.h("div", { key: 'bb378894b9275bd20e06e34cf8d454810a873032', slot: "detail" }, "expansion"))), index.h("h4", { key: '06f190bc1ac540f9ff0afbd09f57dace07fe4303' }, "Demo table 7"), " ", index.h("span", { key: '271cfb67585b8d70ad19b4a8d7758b198be244f1' }, "nested 1 then normal"), index.h("smoothly-table", { key: '4251595965b8a64f94c299b1387955eb96b8567c' }, index.h("smoothly-table-row", { key: '8c3ff29f95110846a71c584a4969c95c5e64b306' }, index.h("smoothly-table-header", { key: '942718f924f79f4bf71c092211731c6d4366c22e' }, "A"), index.h("smoothly-table-header", { key: '4f62fcfdf4426c5fa477094f2f634bcb9d76f185' }, "B")), index.h("smoothly-table-expandable-row", { key: 'c5b037177035c1b14f0e926e3419a1cdd853d5f5' }, index.h("smoothly-table-cell", { key: 'e0f2af8204c6540ee031052a5fde2bd84c790d80' }, "a"), index.h("smoothly-table-cell", { key: 'bfa733288d0669e8a07688fbd8ab21760b775771' }, "b"), index.h("div", { key: 'ac9140738609328d5f1f9e92b955e97bfd3e824f', slot: "detail" }, index.h("smoothly-table", { key: 'a0227272455f4864ce22716d76a40d73f331de3c' }, index.h("smoothly-table-row", { key: '872ed8368d5d111395da53866ba65b121b85e43e' }, index.h("smoothly-table-header", { key: '5ef8df16a33774f8ec03556e10c991f352aa46fe' }, "C"), index.h("smoothly-table-header", { key: '89210c914b81ec8d90697410d1f1255519598388' }, "D")), index.h("smoothly-table-row", { key: 'ced4d8908ad1c81c78e3769dada231030c3cc0f3' }, index.h("smoothly-table-cell", { key: 'a7f61398c65fb665a3ef68fdad789b7146e76dc2' }, "c"), index.h("smoothly-table-cell", { key: '5e912790d00355bdb592465980f1db6a67a1767a' }, "d")), index.h("smoothly-table-row", { key: 'd2f2817ba0bcd8ff706d0cd2878b442a06feea77' }, index.h("smoothly-table-cell", { key: '49e4ae9dc5b8d2592ace6f3a267207addeda65e6' }, "ccc"), index.h("smoothly-table-cell", { key: '89ab1fb1b78ac4c06b2471a4c0a70665259d345a' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '4db2346c95157ea7595d5fa1dec414ede1ece60c' }, index.h("smoothly-table-cell", { key: 'c0f4365961616c0424525a0d759e9a87c6644233' }, "cccc"), index.h("smoothly-table-cell", { key: '4ab0548b0f83fe687a5e2f7e7cbda651d2d97073' }, "dddd"), index.h("div", { key: 'df0bfa6d280b465e9d9149dbf946507c56332041', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: '5776185f613c8c711c01d20eef3a1f70949c7500' }, index.h("smoothly-table-cell", { key: 'b77f257c91115a031c6d9cf263ba4ae77e3b5aac' }, "ccccc"), index.h("smoothly-table-cell", { key: '7a85e0b3f6ecc2cb2d049bbae089fe8b8ddb9986' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '567a240ce03133b8facd94b04365246bdcefe180' }, index.h("smoothly-table-cell", { key: '86737aa249f3ae958d0bcc5981d88e7139519aa6' }, "cccc"), index.h("smoothly-table-cell", { key: '4e2a6abec5fe9c2076211b9f9582504935752a68' }, "dddd"), index.h("div", { key: '94f51a7be279566cf8665ee97cbad62c464bbc0f', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: 'a9b9e0abb23194447956124729b93eded1ad3637' }, "Demo table 8"), " ", index.h("span", { key: '85d9ade5dcfdd9990953a2144a92a9ce21afd41d' }, "not nested"), index.h("smoothly-table", { key: '6c3ab4842d8e6e9d658677c9af6760b9b51d0953' }, index.h("smoothly-table-row", { key: '29a56760d74edfb6624cd9f9f894dfd2732bb78c' }, index.h("smoothly-table-header", { key: '1ffd8753cfdcea6dcdb297573fb95baaa08bb93d' }, "C"), index.h("smoothly-table-header", { key: 'fda1dc9ffb4a42a7f858d5b08a384a9b221b0fab' }, "D")), index.h("smoothly-table-row", { key: '5c54dd86e7d24226a375eb66ad6ca7a83b7fb7ce' }, index.h("smoothly-table-cell", { key: '2f1e35b226826dd4c57b4ca09a8e0cafd8b2d9e5' }, "c"), index.h("smoothly-table-cell", { key: '35a07eb0070c3414dc57610d89f1e65173f5677a' }, "d")), index.h("smoothly-table-row", { key: 'ad9530afb8c4f39d7d5269b17fec5ed6b80eff7d' }, index.h("smoothly-table-cell", { key: 'c0fcc018fb91eb8da9466ee50fa7eb40b8e8754f' }, "cc"), index.h("smoothly-table-cell", { key: 'ff06b48379c5ff9586e2cd6b4ed5e590c69508fa' }, "dd")), index.h("smoothly-table-row", { key: '4abe166510fbf92621a026d1b1ddecb157cfd1d0' }, index.h("smoothly-table-cell", { key: 'd5800e9b6b195ee265be40a53ce594f3ab50bdd5' }, "ccc"), index.h("smoothly-table-cell", { key: '24186c97b6761d63928c7e6a38e2b07d14eb7171' }, "ddd"))), index.h("h4", { key: 'ad79975e10b4d667a31d67d245b74220d05a7d80' }, "Demo table 9"), index.h("smoothly-table", { key: 'a5633762207d74367cf970e9eda663daa49010cf' }, index.h("smoothly-table-row", { key: '1dcf6a8167ef821a2f8fa6909f5f39eae84764d9' }, index.h("smoothly-table-header", { key: 'fdef114c65187d1624294d90d8440d7434c6efa4' }, "First name"), index.h("smoothly-table-header", { key: 'c045d94a2cdb6aa460822ad07e2db4d31c85599b' }, "Last name"), index.h("smoothly-table-header", { key: 'ce4d7154656147f622bda2bbac579e136702772a', style: { width: "1px" } }, index.h("smoothly-icon", { key: 'c91098d0ba28c8ca836e9fbbacffb9ce395272f6', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: '7f9603db48a65601c6927622afe4ede1865b01e1' }, index.h("smoothly-table-cell", { key: 'f66fbc99ed09614a6d80bafe79d55a045169bca4' }, "Jessie"), index.h("smoothly-table-cell", { key: '9a64aefe469b885c0e03f588bea777fbc8ee84b8' }, "Doe"), index.h("smoothly-table-cell", { key: 'dc9bc9da11c2a9bb216b88cc66e98d304ce7b8bb' }), index.h("div", { key: '88286527f7f1748db8f1c1d2f17972716411ac06', slot: "detail" }, index.h("p", { key: '1de2bd5d3fb08a229bbd7ffa406ad6399a3e5ab8' }, "This is Jessie")))), index.h("h4", { key: '3f10a0f524ba108e9f2cfe9cd34feecf0de2bc21' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: '07581ded5fd1231d4e4c6f57bfeeca4f2770f59b' }, index.h("smoothly-table-row", { key: 'f5299f9912931ba983ca7d91cf2465d730e49522' }, index.h("smoothly-table-header", { key: 'f07119015a6d273136d5cd6107e7324b3fc7fb9c' }, "Company")), index.h("smoothly-table-expandable-row", { key: '49fa21253efb4bf27d80af2717f8ba6aaeea5b03' }, index.h("smoothly-table-cell", { key: '6e71a66b43e98cc31205be1e1c47ce5107629716' }, "Proquse"), index.h("smoothly-lazy", { key: '16e164b1495daa3bb23fa390d7b39fc207b9488a', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) })), index.h("smoothly-table-expandable-row", { key: 'c3c667e8dc30d6e126ee9cae442d0e579cf72534' }, index.h("smoothly-table-cell", { key: '37df50bb9cf63a5a4393b030502054e5f6b936a6' }, "Pax2Pay"), index.h("smoothly-lazy", { key: '063222738d9a3b9ae91a06b74273d7dc90f81b40', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: '1c88a02da073b8c2544ea6a5da48a0e52aa4e584' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: 'b8ccc924fa8b96858288a77804d55e3ac37f9563' }, index.h("smoothly-table-row", { key: '431510e5f94b95b100e4b4fbc3c6a093df116531' }, index.h("smoothly-table-header", { key: 'a1a07709312482cdf6a4b13dc3da487a2cfc3448' }, "Company")), index.h("smoothly-table-row", { key: '8ee1f3988aaa7629cf8a54f361ace79ae2da03a8' }, index.h("smoothly-table-expandable-cell", { key: 'cd2d83d35c03db0a8f11386922ce660df042d7d5' }, "Proquse", index.h("smoothly-lazy", { key: '493bb758a2d4343609e13450a36d5e66f5f392be', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: 'e864e639b666c83b6625c47c717e5713690f0373' }, index.h("smoothly-table-expandable-cell", { key: 'daeb6a79d64f422a3d88449a6c9731e20dd8c4e4' }, "Pax2Pay", index.h("smoothly-lazy", { key: '2ed998b4f7c27a4747d9df77539776fd5be903bb', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: '7dba213de5f7c1b6c35be2219b65c2979fdaea7c' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: '7f7b0a740ce627f170dfd54825b02ad8681aae58' }, index.h("smoothly-table-row", { key: 'ecea0129a517532a27daf61989712ebaf0575333' }, index.h("smoothly-table-header", { key: '37473e1e88bceddae0ac4bc7644323b148d694eb' }, "Name"), index.h("smoothly-table-header", { key: '6324de16de3c3e7645afd8b84e2f7c48c336f278' }, "Age"), index.h("smoothly-table-header", { key: '8cfdd9af9a87acf914ea03cf53841cb6ce770552' }, "Location")), index.h("smoothly-table-row", { key: '2c2e47cf853a5a1059414bcedeb1b0cbf47e5209' }, index.h("smoothly-table-expandable-cell", { key: '50e61a43231a43f70a19cb79a92cfe79a7175d39' }, "Jessie", index.h("div", { key: '20b01fc065271b8df42ffeb3fb01c0263aea7b3b', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: '0070361c811ee40db934f34245e5d082e54b8c20' }, new Date().getFullYear() - 2000, index.h("div", { key: '9e3f68c5f5bcaca480c7fbcfe2c7a95ee8f7952e', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: 'f8da461ca610452f96c4e987b06a485d409faaff' }, "UK", index.h("div", { key: 'f8543364a148420f5a0313f70c6ec33907bacd8c', slot: "detail" }, "London"))))));
+        return (index.h(index.Host, { key: '85ea89242056f407a1f5e317b4d550d9eb443cb8' }, index.h("h4", { key: 'a51211196890e0f3788478aff82096679ff617a2' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: 'dad953a3a111ad1872d520526038e3dea5af49e7', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: 'b4f34de9d467dfc02b5b0547da5a27e1678d5d05' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: 'f0ef9f68b019517d4a395e607e71584664069a9b' }), " ", index.h("h4", { key: 'b74a1f46fcb892e273066ac1ee7bebc4f11fcb91' }, "Demo table 3"), index.h("smoothly-table", { key: '312c6771281fc51b9697baf926b7df085725e41e' }, index.h("smoothly-table-row", { key: 'a5c04163d903918a41f07fc6d8f0f5d9d059c212' }, index.h("smoothly-table-header", { key: '76a150867e34fe5aba93be53f2f71da175978c08' }, "Header A"), index.h("smoothly-table-header", { key: 'f754a58f26a459a845880452dbf0ce1bed05a1b3' }, "Header B"), index.h("smoothly-table-header", { key: 'd391b96b2723ee3c73daea4982416090ef64a429' }, "Header C"), index.h("smoothly-table-header", { key: '2f05ed164ab4bc8246f92fff444e329e4b423ad5' }, "Header D")), index.h("smoothly-table-row", { key: 'c21aff9dcc6aa9452f6019da05356ff0bbb27765' }, index.h("smoothly-table-expandable-cell", { key: '05b7e74110711147786ce38cc1a184ff8a803ddc' }, "normal row (exp.cell)", index.h("div", { key: 'cbed6af9a8c22493ff899caa44c81927e4775867', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: 'fdabf0fd11f72001f4714018da8ec415f1e08df9' }, "expandable cell", index.h("div", { key: 'b3f2bf7d91f30909473bc3604c4ff5322e5f3d86', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: '7a2e880e55e7f68cfce7aa7bdcd0853674c7cf80' }, "expandable cell", index.h("div", { key: 'a899dc2bae194d3bbc6826025cfef4ea915e7482', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: '9462ef2de5d64e849deb045c08facfb2e072bb1b' }, "expandable cell", index.h("div", { key: '50395b644e090c17babb6cb239d8da9c76682670', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: '96bedaa294db8734738f6dff23be401dc46eb406' }, index.h("smoothly-table-cell", { key: '4d304e92d160f0600fd2ee0a65752859da09df81' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: '5b04905f36d5d16755c224d6673c1f327c81a5b7' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: 'ae7086173c1f0fbe2bdc92d60f4eabb38e70d223' }, "expandable cell", index.h("div", { key: '138bf4b5f6e314e4fef73a3c94f3444b8284afde', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: 'd234057baa25b36d2694592ce044da89fd73a96d' }, "expandable cell", index.h("div", { key: '9d35d845f0752fd714ffd2c55b5b2afd339a2655', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: '906dd58341a4055d1d150042387c369e21413914' }, index.h("smoothly-table-cell", { key: 'f064a1973897a83b5e2b95c37280dfe0208b0eaf' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: '8e55bc4aaaec76a95fc95ef45a9eb1dd8819d0a5' }, "Normal cell"), index.h("smoothly-table-cell", { key: '5efc461579f5ae381c9a75095298fd1d8565efd3' }, "normal cell"), index.h("smoothly-table-cell", { key: '5b74930a2969f34e3ca2506520cb182697964be9' }, "Normal cell"), index.h("div", { key: '5054dc4c8bff667970cd4ecdfda3f356fe88d85c', slot: "detail" }, "expandable row content"))), index.h("h4", { key: '9d0c0b833cd6e01ea0a2c360da492b17279f8ab3' }, "Demo table 4"), index.h("smoothly-table", { key: '1afbb0e7e065280dec781171278c52e04b9edf1b' }, index.h("smoothly-table-row", { key: '700330ba4cfc30214e0a96fcca41b9a6b6a6b8da' }, index.h("smoothly-table-header", { key: '26b2df07f4bfa0246dbedc2c1e1e116dcba52fe0' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: 'bd3f241f8df31f0c6b67977187187bb2738443fe' }, "Header expansion", index.h("div", { key: 'ff1de9664f626de496674992d2b5c266f3628259', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: '3f65674adb54ad2b9836b4a49d7e1d8a7ed168ef' }, index.h("smoothly-table-cell", { key: '1ada68498c889bfddb139c452534ec6f8234630d' }, "A Content"), index.h("smoothly-table-cell", { key: 'cf677885b837652817ed805bcd05bfb5761b1c2e' }, "Expansion cell"), index.h("div", { key: '6b9911beedc7b2b36d41561e8c7019943c880417', slot: "detail" }, index.h("smoothly-tab-switch", { key: 'da618fa18cca2354098860f11755684bf69188da' }, index.h("smoothly-tab", { key: '561ba3981af1e1d4c5d401b8cba61469498fe509', label: "innertable 1", open: true }, index.h("smoothly-table", { key: 'a5cf3c2b74a3f007dc3f3f3711da51871a501f0f' }, index.h("smoothly-table-row", { key: '16fb677594bcb52e89924a9002524348526542bd' }, index.h("smoothly-table-header", { key: 'cf15097339e40219df17423cc2b67d992f582ffa' }, "Header B")), index.h("smoothly-table-expandable-row", { key: 'aa2e1c5d86f0c4939824e679c4f8f7b93ab035d3' }, "B Content"))), index.h("smoothly-tab", { key: '4ae4be907b358966469b3df7d862b571a95a0193', label: "innertable 2" }, index.h("smoothly-table", { key: '7405235789e4df4c9ad292c1e6a76085e4fa76ba' }, index.h("smoothly-table-row", { key: 'd3e697274690bef1fe555b5373fa880de7a3cc96' }, index.h("smoothly-table-header", { key: 'a15b2f49b5a49a9ea83f74d0c000cafd9d25515c' }, "Header C")), index.h("smoothly-table-expandable-row", { key: '31f9a35905ab7763d75518f2cddde22ca6d2cf94' }, index.h("smoothly-table-cell", { key: 'b9c758bb36474fa670e0328972218378bc4687d8' }, "C Content"))))))), index.h("smoothly-table-row", { key: '5e1793b0c4044fb903e01c831cbb7502bcbadd41' }, index.h("smoothly-table-cell", { key: '60deae3c6adf052cc5e98347d982f2ce033ae4ef' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: 'a653ba367d79724493de568e6c997440a00f11e5' }, "Expandable cell", index.h("div", { key: '34143d54ca80505cc74103f25036be6a483dbb2d', slot: "detail" }, "Expansion content")))), index.h("h4", { key: '1d530769e089ad3b99f52cff9e5f0567a62c0e3f' }, "Demo table 5"), index.h("smoothly-table", { key: '91c1e5df36acf8a96318ccf6105a782871c9168f' }, index.h("smoothly-table-row", { key: '7aad91979906cece518ceaf22ddd4f3027642361' }, index.h("smoothly-table-header", { key: '4347a533774985e1503b21c303482bd01551da1d' }, "A"), index.h("smoothly-table-header", { key: 'f9564e25973d1221bb5f0281e2f0534625fbf5ec' }, "B")), index.h("smoothly-table-expandable-row", { key: '4eab8c8ce0d212af8557fe0f03c27ad9fd70b07a' }, index.h("smoothly-table-cell", { key: 'aacb89afcb8233bdbe7907421f59296d97a8aa42' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '25548a674f2a392feef61a0644ace645af02f483' }, "b row"), index.h("div", { key: '07d497bd509d7e9cb79c4996065c0e1db73d5854', slot: "detail" }, index.h("smoothly-table", { key: '64385355b1ab2bd0fe101bb7661bca3e41c56b61' }, index.h("smoothly-table-row", { key: '9da48e7e2985950740f1ecdd19525a3ddfa6b881' }, index.h("smoothly-table-header", { key: 'b4436a5bcf8d23753a6bd021c68bf741abd317bc' }, "C"), index.h("smoothly-table-header", { key: 'ca9edf5dfc459dd3f20793091c8f1415f6a8bb8f' }, "D")), index.h("smoothly-table-expandable-row", { key: '75823e99605df7591fb0982ed920526c646c808c' }, index.h("smoothly-table-cell", { key: '2af7fbd8b052ccb8ca1545fc6719cee697d0bc47' }, "c"), index.h("smoothly-table-cell", { key: '37a11103db55b37c65ddcafa5a7832dcdd6d2435' }, "d"), index.h("div", { key: '1f33f89c35e985ebce756dc56f73c86949336036', slot: "detail" }, index.h("smoothly-table", { key: '290c57a016a4367426193f3ebcfbc389981d74e8' }, index.h("smoothly-table-row", { key: '1a128147e8e87f87f19a4ce6ae8d4d6ede81a45a' }, index.h("smoothly-table-header", { key: 'b973380295c1171bf04ae7f23bde2d28ec561397' }, "E"), index.h("smoothly-table-header", { key: '42d99ede90b969a53d7419aecc5748ea37ed6494' }, "F")), index.h("smoothly-table-expandable-row", { key: 'c44ae6a50dec16ecee983aae11e3c455a23cd150' }, index.h("smoothly-table-cell", { key: 'e3dcb75db9fea039ba6055ee5beeb3cc8ddbbff8' }, "e row"), index.h("smoothly-table-cell", { key: 'ac0ba6d6524c79c0146f4016e53527f0c3890f5e' }, "f row"), index.h("div", { key: '9447b39cb339b2504a20a385a03771c4a0a74a99', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: '6566f41f0201df57041a8e0bfdc0bb86e3575255' }, index.h("smoothly-table-cell", { key: 'ac032e4714513f53c18d4952a9e5601e83a4cb0d' }, index.h("span", { key: 'f232abe72c60829a95960d46156aa75dd0e9175f' }, "one"), index.h("span", { key: '8a3c5243b990326d6f33749bf1356e0632254700' }, "two"), index.h("span", { key: 'ae98cc7ea975c122271d435746a6b8b3f3ba495f' }, "three")), index.h("smoothly-table-cell", { key: '2f4bed8ade5c6e40ab1a96277607560fd552125d' }, "five", index.h("smoothly-icon", { key: '0c96605b60be02ddcd025e97ca67ca7b479e0e92', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: '84deab0d0943c0ad54a570ef44a7af4612b3425b', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: '75838203e46269fef079f77f0ab53c4bb7f0c9ad' }, index.h("smoothly-table-expandable-cell", { key: '86e9a0b29d7f46d0c8a3f37fc9990725cdcf60bf' }, index.h("span", { key: 'c1dbd00e949029d25e2251de0ca14a3e72ee9267' }, "nested expandable cells"), index.h("div", { key: 'd1e7bf460427c5026da6f9a71c2b8d3b70410f2c', slot: "detail" }, index.h("smoothly-table", { key: '4e684a0f87df7ac5ea5c0c2d13ffa0cdad3feed7' }, index.h("smoothly-table-row", { key: 'ebf51f32103e6939a18032831511bfc76c5af31a' }, index.h("smoothly-table-header", { key: '63d12126718ee0378370742451d8c12b41df887f' }, "E"), index.h("smoothly-table-header", { key: '9a9390606e8ee00667c4de7d95af0985d514c902' }, "F")), index.h("smoothly-table-row", { key: 'ad54f16833a63eb5a0f0e05081d18a84e99aeca2' }, index.h("smoothly-table-expandable-cell", { key: 'ab0b4a69f3e39f1d3fb06345a92081694896c5cd' }, "e cell", index.h("div", { key: 'd85129b33110414a2fe1b51e634c6689460aa267', slot: "detail" }, index.h("smoothly-table", { key: '104b300ad38cfc10b4a4813fa7c24f9134255e37' }, index.h("smoothly-table-row", { key: '0f9df10eb3877312667da68e1dd6d660c5740937' }, index.h("smoothly-table-header", { key: '95fcb96554ad4a2e2bec343d8265827a97c0a4a2' }, "G"), index.h("smoothly-table-header", { key: '68e03a2b098bfdca9b352a37af60b55890e8d006' }, "H")), index.h("smoothly-table-row", { key: '83a8a1709742ebf0268f991e1c430a2d41f5a472' }, index.h("smoothly-table-expandable-cell", { key: 'cbccd7ff4ee942a5047bcf13daf2421dec2970ae' }, "g cell", index.h("div", { key: '26e3cd142a4317d5c93eeb48ec7576af79525dd6', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: '274655a5433990a202f6c63ff6be05262e56ee6c' }, "h cell", index.h("div", { key: '8523f7c85300b4d0298dab2dc856fcdf185f8bb4', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: 'cfa3a7333301250f7357567ed7c35c732b9b2e7a' }, "f cell", index.h("div", { key: '719ed853625cea565d4979c8f318fc64f375f203', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: '681ed5ffe38291882985193806fdb5601b3755f6' }, "b cell", index.h("div", { key: '1f5d123c4eb0d68f717d54d12ad01fafca1bbec5', slot: "detail" }, index.h("smoothly-table", { key: '5ece82a42178252e633902275f55ee17c0e7f910' }, index.h("smoothly-table-row", { key: 'a1fb0e290638988005baf963827fd3963021754d' }, index.h("smoothly-table-header", { key: '01c236961de51e88caefb19da9cb59aa778193cf' }, "C"), index.h("smoothly-table-header", { key: 'a611b3243e47447d349167f99a787b80839de8c8' }, "D")), index.h("smoothly-table-row", { key: '1c3b63c9694c93c279db114502ae5a43f731b0fc' }, index.h("smoothly-table-expandable-cell", { key: '5db2cfc0e8d2172082e050b0a3397d93f99d211e' }, "c cell", index.h("div", { key: 'ee2e8f4e3d2f724476afb32600c9fc5370661ed5', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: 'b9570d119bb6e3358e50cb0fec082d9edd909a13' }, "d cell", index.h("div", { key: '48842c88e6dafb16b8fc7515e704054aa42fd6e8', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: '7d74fcc98d2c4496ccef27451e327bd01ecbca87' }, "Demo table 6"), index.h("smoothly-table", { key: '96e6ac979b66b99044b6f9cfc871683352fbe2d6' }, index.h("smoothly-table-row", { key: '1b4116f8b301adb16bdeca69b3399cf328182101' }, index.h("smoothly-table-header", { key: '99bdfa02877d3f36d7ea5b434e2b31eebb4143f0' }, "display"), index.h("smoothly-table-header", { key: '4a17ce7a69b024a47237064b559ccd684e5b404e' }, "contents")), index.h("smoothly-table-expandable-row", { key: '6269f150525e15a6a9c620c7198cef1a1d9b9f57' }, index.h("div", { key: 'dda160598c1fd63f390c985d70f18597ab420479', class: "content" }, index.h("smoothly-table-cell", { key: '87ebaa7a3ef1babf92221b53e61de060729aedf8' }, "A"), index.h("smoothly-table-cell", { key: '3a24b445d2e73866b90740cd6da701d2154713e1' }, "B")), index.h("div", { key: '1a89b7729c41fc4b72a87492f10c106f5158a128', slot: "detail" }, "expansion"))), index.h("h4", { key: '3d8b8fc6cca97ee1dab52aef6e8fb39a4a27e09d' }, "Demo table 7"), " ", index.h("span", { key: '5188c8b6fd26b4fd43f4d941d132fc043a8a5d40' }, "nested 1 then normal"), index.h("smoothly-table", { key: '2813f42ce1fff2b12ede3e2bd76fdfb17bb78c8f' }, index.h("smoothly-table-row", { key: '103e84280448e1c86e68f7cefc877a12028f3aec' }, index.h("smoothly-table-header", { key: '3d165d8a4de2cc44ff1a4558a97f6540ec15224a' }, "A"), index.h("smoothly-table-header", { key: '24a3e702db31976426f6dcdad0549b828ceb7534' }, "B")), index.h("smoothly-table-expandable-row", { key: 'd65fbfef42b97632158e45f675669498455e506e' }, index.h("smoothly-table-cell", { key: '545c4b1670b2eea1512f57a647c6c9fea274151b' }, "a"), index.h("smoothly-table-cell", { key: '128d6086c4ee32f84f520789c7227cb6c8d89341' }, "b"), index.h("div", { key: '447829fa1f14c80ecf96af4aa941dc4c26e8df83', slot: "detail" }, index.h("smoothly-table", { key: 'f8b006a80fdb4130254c87abc8ed442d20f3f84b' }, index.h("smoothly-table-row", { key: '2a483c439569bd6475b9c013aca32fbdf1275e5c' }, index.h("smoothly-table-header", { key: '7b9e38b93ce5a271a7055839a523e78132e2d57c' }, "C"), index.h("smoothly-table-header", { key: 'd0a21d398b973bfb1f3f942b506428a025968c29' }, "D")), index.h("smoothly-table-row", { key: 'b164f7a90dc435929b874b237f1849fa7652bf2c' }, index.h("smoothly-table-cell", { key: '15bf68503b6dd5c41853ed2f6979e1a011356b9b' }, "c"), index.h("smoothly-table-cell", { key: '253adbfd2bee1fc16d26a6793c17c13f735b117c' }, "d")), index.h("smoothly-table-row", { key: 'd3efe8fc70273f31b811476c43cf6d695550cb28' }, index.h("smoothly-table-cell", { key: '712a228b06ff01e6890fc46a2b7f446f1d6a9df8' }, "ccc"), index.h("smoothly-table-cell", { key: '1116fcf13a324cbf035bcb93245fc5336a3d1c44' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '75d48ec173fa3afaae9e80e80d56220ecb747fb3' }, index.h("smoothly-table-cell", { key: 'e8f6b086fadd4cf9fe0d56d451f5edeaec0906c6' }, "cccc"), index.h("smoothly-table-cell", { key: '967dfb901b939ea8b71778463e8894c2c5814ff1' }, "dddd"), index.h("div", { key: 'f9d289a08d89bb404ac0e639933cb7edf86b02c7', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: '6d481806c4605e81a272b9aea6540e3ebf9c8b37' }, index.h("smoothly-table-cell", { key: '3cb55c4b30ac9edcbe9ed9efb94249c3a77dc3ce' }, "ccccc"), index.h("smoothly-table-cell", { key: 'de213eca3a6a1e6379d68916357cdbc9042e357a' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '5a11af4be9bbbd7a9cfe7e926b6ff4b706f356d1' }, index.h("smoothly-table-cell", { key: '189261da8e7e4dbbfa48bce408ed8870f5c518f0' }, "cccc"), index.h("smoothly-table-cell", { key: '4323b5fb4901c9943192f627eb85a33972a2a17a' }, "dddd"), index.h("div", { key: '13571b091209e15e0cfb7e0931966f31813fb8fa', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: 'd0a58e01e2248947b29cbeab726f77df23e745b3' }, "Demo table 8"), " ", index.h("span", { key: 'f1b034c8589ec3f4331fbe82f6aa7fd68daa5f4c' }, "not nested"), index.h("smoothly-table", { key: '14ff838f34c85c52aef9706225327fd148691823' }, index.h("smoothly-table-row", { key: '1fd135c6cb4155bf6234c3543c87bf19e9785f79' }, index.h("smoothly-table-header", { key: '1f57ef6bf43c9c853127bb85ff99e2b9c0a5c9fa' }, "C"), index.h("smoothly-table-header", { key: 'f44340b8ed4585a91c4b9384bcbdfb8ffe548199' }, "D")), index.h("smoothly-table-row", { key: '07be80422e56b4e9378c49ca2d65675979bd3e5a' }, index.h("smoothly-table-cell", { key: '723ee83b46fa4f0b0dce6f7bff0d4c6106dd35a1' }, "c"), index.h("smoothly-table-cell", { key: 'c3feb26702907b76ed5a1a53a329c44c7a6250ef' }, "d")), index.h("smoothly-table-row", { key: '19d058ca4eca21e9bd1ab7b70a574a2da0081817' }, index.h("smoothly-table-cell", { key: '9921fff1fe096ce725da4c5d11bed895cecdfcec' }, "cc"), index.h("smoothly-table-cell", { key: 'c010a8dbf5d309060c3244f93e670f6ed5f07d62' }, "dd")), index.h("smoothly-table-row", { key: '283b5ed2fe7593718b7bda5a0fb41352754cd7e1' }, index.h("smoothly-table-cell", { key: '7dd7f306864f2a76e5fa0eb85a94989b08ec141e' }, "ccc"), index.h("smoothly-table-cell", { key: 'fb7d17ff8a34c8262d10de63447d72d031c37dd9' }, "ddd"))), index.h("h4", { key: '23ec5d18233e2d89ddc0e73786a7be06fed6bf76' }, "Demo table 9"), index.h("smoothly-table", { key: 'a8e8f2a23a4fbb61e005fb241bcea86683636180' }, index.h("smoothly-table-row", { key: 'dd3ca56be5b0e956f1a6ee7e1d2b97d823279ee6' }, index.h("smoothly-table-header", { key: 'fea1b8a6b7793035a13577e58ededf4274f88e33' }, "First name"), index.h("smoothly-table-header", { key: 'b63fbcd960713139e3b95e56a8adb0ba07871d45' }, "Last name"), index.h("smoothly-table-header", { key: '16744a04621d80226de5b305dfa203ce311258a4', style: { width: "1px" } }, index.h("smoothly-icon", { key: 'dd34ece80336d84f9bb4ad679dc1765eb8547535', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: '2330e7e0640a9c17037aacb43423684e78feaf3e' }, index.h("smoothly-table-cell", { key: '2c58756e1b74991d6d75c4595bcd075ec93f38cd' }, "Jessie"), index.h("smoothly-table-cell", { key: 'be1cb059176b61fec461b4784f26f5ce8a053b94' }, "Doe"), index.h("smoothly-table-cell", { key: '0fd43288db0c720fdffde3e86109a53dd4e1db59' }), index.h("div", { key: 'a65b9dfb2a61800c3ddb956d96828e83732b4a8b', slot: "detail" }, index.h("p", { key: 'de2071df84518565235d9ce1c7b15e2f8e0cf970' }, "This is Jessie")))), index.h("h4", { key: '8fcabac068895eb7940bde7b4e6760cbaa71ff03' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: '092850819681a944ae8e03bd869a88a811d9d42e' }, index.h("smoothly-table-row", { key: '6e6ae19c08574aafa277add23516705e0276381a' }, index.h("smoothly-table-header", { key: '561d468505a8de5b4a158dd8ff1cb8abcfed064b' }, "Company")), index.h("smoothly-table-expandable-row", { key: 'cf97e0bc4fba46595cc1c740b98d74ec709f4751' }, index.h("smoothly-table-cell", { key: '7a46729f3c78ea82f1ac3cd16c2759bad307c48b' }, "Proquse"), index.h("smoothly-lazy", { key: '130fb472aafce3fe32b234f7ed6b5dbc2daaec26', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) })), index.h("smoothly-table-expandable-row", { key: '9d0f82445ed4769c16a9628464f085b245a59afe' }, index.h("smoothly-table-cell", { key: '016dba0a47ebab99025b5b60b56ed2e950a9db28' }, "Pax2Pay"), index.h("smoothly-lazy", { key: '0d6fa9ab0b9a55d82b2761996e14b590e5199e7d', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: 'b9d3e1d5159d3205988128afd4f1cdc4554ac3ac' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: 'ddced2116a79220358229551f18957bd27043755' }, index.h("smoothly-table-row", { key: 'f3a7d40dfa53a5e4ed66ab65cc62e39979eb098e' }, index.h("smoothly-table-header", { key: '8a5c89324e8bad436ce7d4be352e01450f811e2c' }, "Company")), index.h("smoothly-table-row", { key: 'b20a514b70737665ac90ee5ac0f52b01ef2660a3' }, index.h("smoothly-table-expandable-cell", { key: 'f606c22ebec61184b893dc0dfc159ebadb97c6a0' }, "Proquse", index.h("smoothly-lazy", { key: 'aaddbca0f665478b20cf63411c9dae1a1c5a4502', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: '623daee86a902c3a08177801b3a8233c46a1b392' }, index.h("smoothly-table-expandable-cell", { key: '2623d94d5fd9ddf7566fd7caeec097bc7da1e1fe' }, "Pax2Pay", index.h("smoothly-lazy", { key: 'baaf89cf081074d578a6c5998f8fefee36ac8494', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: '2a9307e258ab4dba443cab7d21bac1226008f6c6' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: '3652888d5b2aff79aeaed29ec4d6d460d8ea2fdc' }, index.h("smoothly-table-row", { key: 'e383bf81f42e8017835329ca25ecba808566b642' }, index.h("smoothly-table-header", { key: '61521547689d6e718cd367f0040280dcd52cc2fa' }, "Name"), index.h("smoothly-table-header", { key: 'b0acf704e57c77632b2deef4dd71b93a4296ed53' }, "Age"), index.h("smoothly-table-header", { key: '0dee1d3549505b190eb62a3029a026a090e974cc' }, "Location")), index.h("smoothly-table-row", { key: '443e9a4435bbc7f7977dc718c347e1b5e7511280' }, index.h("smoothly-table-expandable-cell", { key: 'd01142eb5ef20b260ea365dbee1f09f4abfabbf9' }, "Jessie", index.h("div", { key: 'eaf16749d5a81f4a9b79488c864444a22c95b981', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: '6d332ff85e78c37fec11a82d4019c0be3a60941a' }, new Date().getFullYear() - 2000, index.h("div", { key: 'cabda8a5231be09bf6f3080c3f76ae79d33f75e7', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: '5a23d6851aed33e69b7fbfaa6b728bb8d0658c00' }, "UK", index.h("div", { key: '7109dc776500ec461ff5384690ae3bf6255c9521', slot: "detail" }, "London"))))));
     }
 };
 TableDemo.style = SmoothlyTableDemoStyle0;
@@ -12406,18 +12406,18 @@ const TableDemoFiltered = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: 'fe34185f1d5a84c6d80ffde9062a3cd35373daac' }, index.h("smoothly-filter", { key: 'a8440d0c7b470593389c9e84e797b050f8c28ac2' }, index.h("smoothly-filter-toggle", { key: 'b41878a716958b1282530e6597397c44412b6fb1', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '008e8a0e88496e1c07598ed5797d8c21f685b067', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '3bf4c4af957c7a07e4725addfc4670b8e34c803d', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '48562483947fa9abdf028178c96dfcdfc47ea862', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '832ac4ba84e015407d19b6e5f127e27112d2b3f6', label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '8b787d9cccdc9b3f5f540b0f4ea4e60448411683' }, index.h("smoothly-filter", { key: 'a2a1fcc93a913a00f7cfec8910673dcf2641bb73' }, index.h("smoothly-filter-toggle", { key: 'e73246ed6cebe2df1a3e25b95ad920f38bb572b5', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '49e96f376e7461da579dfc17b6ddf0e87bffdc6b', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '8bf41eac81691a42d1580ec91e4a760a6c751790', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'b8ae39972cec2bda1faa79f4844dfb24d02d4890', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'ede0ea432e99b22b77ec90d79a10f197880d214d', 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: '41b1391d80cb46220cf8fca3ead4ebb26b7c9b4d', slot: "detail" }, index.h("smoothly-form", { key: '12a1bad005be348e3d590a738ebdb162eb28598f', looks: "border" }, index.h("smoothly-filter-select", { key: 'c92c9ceb3fb98572b4fe7e59a970f1cb13cabb31', label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '06e37fc9e538b2924b65fd59024f3d0955d74a1b', slot: "detail" }, index.h("smoothly-form", { key: '72f1e0f83552ebca3917176439fcee35c91d58e9', looks: "border" }, index.h("smoothly-filter-select", { key: '676790ac42cd008dfc0cd3bc334461cb6d1f6e2e', 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: '36852e6b96e4f06a6add902edff1e3fbbb418ae6', 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: '9e6771cba78aabe112ebfa411aa303b114fd9430', label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), index.h("smoothly-filter-select", { key: '6f5190618acbe17983f3fabf4924642d42713df8', 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: '6510c323b23d404e64cb1459062a4247b5db9614', 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: 'ee960a157ee6775fecb5b171dfd3580a65fd3a2f', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '24538b5514f2035623e3df03ae97451261134ce5', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, this.selector.render(cats)), index.h("smoothly-table-header", null, "Breed"), index.h("smoothly-table-header", null, "Coat"), index.h("smoothly-table-header", 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-footer", null, index.h("td", { colSpan: 5 }, 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: '6dd2f971956d4e5b8af33736cd6b4126a365674f', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '640ff24d52780d1c47bef1b76e379fa8eeaa68be', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, this.selector.render(cats)), index.h("smoothly-table-header", null, "Breed"), index.h("smoothly-table-header", null, "Coat"), index.h("smoothly-table-header", 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-footer", null, index.h("td", { colSpan: 5 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` })))))));
     }
 };
 const names = {
@@ -12473,7 +12473,7 @@ const TableExpandableCell = class {
         event.detail(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: '1f1e823e6f269e52120b198c877281a61eae80b0' }, index.h("div", { key: '0d1cba1491fdf4aceb0b6af081399833aafae7f4' }, index.h("smoothly-icon", { key: '7fdc8ce5997bc400a517430a819380e02aac1761', name: "caret-forward-outline" }), index.h("slot", { key: 'd7bf61f52d125a2ac08a1049424fbb72c9348f8a' })), index.h("tr", { key: 'efef1ed8856bb31145ad20450b2ad13aedf10884', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: '5640e61c0c04b31f3f4ed1fc3bdc1b76cab0c42d', colSpan: 999 }, index.h("slot", { key: 'bf4e4f82d482ee9d9151c8fbc35a81a9f551f786', name: "detail" })))));
+        return (index.h(index.Host, { key: 'd9c6db808b257bf2472b3cf1d45448bd4455732d' }, index.h("div", { key: 'fa0cd8a5e2bbd8331541d34f6ec1a318a4381bab' }, index.h("smoothly-icon", { key: '85c7e3b919a231f97e3565081c8256cced492947', name: "caret-forward-outline" }), index.h("slot", { key: '3540271805ce0faba847dc8308ae480d16f5275d' })), index.h("tr", { key: 'b576d2eaeb7bdad0d5c01feab258964702d7dd38', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: '14d768cb944776bc9261d0883962510dbf5fe4bc', colSpan: 999 }, index.h("slot", { key: '864d18479f960373d933314d13b064d590f9ba55', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12509,7 +12509,7 @@ const TableExpandableRow = class {
         event.detail(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: 'feb2fe8621d71bb68f3b6bdec7ae711257854ae7' }, index.h("div", { key: 'be638561004112d5e3a1b265c16d8a6d654854b8', onClick: () => (this.open = !this.open) }, index.h("slot", { key: '59954876a5d75a6847536c9421c47b45bdcbe658' })), index.h("tr", { key: 'b3d937c7ef2d8f08f95a667cf98f53241c7ff935', class: { spotlight: this.spotlight } }, index.h("td", { key: '784d26c150ab5c93ecc8a6298be890f6af2f0837', colSpan: 999 }, index.h("slot", { key: '36cbaf5a063a480c9c93e6a1a680b3a892368bf0', name: "detail" })))));
+        return (index.h(index.Host, { key: '1842abc3a8d9e55209b47acb224cade2b553b7f0' }, index.h("div", { key: 'c2db381c7722ca80baf6e981a2c58cd9231214a0', onClick: () => (this.open = !this.open) }, index.h("slot", { key: '6c9a3287e1e494689662f446f14023cdbf633e6d' })), index.h("tr", { key: '8a7de126d05096cde673d2590fe811ce2e0d97b1', class: { spotlight: this.spotlight } }, index.h("td", { key: '23a86d648098403f6181d606a123c591ed2934d3', colSpan: 999 }, index.h("slot", { key: 'ca2ee20257cb53ad98e88804022f296328596c24', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12527,7 +12527,7 @@ const TableFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: 'a7be783b67a0ae720ea98f9ae2487018618cd2b8' });
+        return index.h("slot", { key: 'ee21fcc66afc518bce70dbedaa4bc2257c0010ac' });
     }
 };
 TableFooter.style = SmoothlyTableFooterStyle0;
@@ -12541,7 +12541,7 @@ const TableHeader = class {
         this.name = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '2f91445cb3ff07484f082667c5c80bdbe5f5f47f' }, index.h("slot", { key: '2e641adc9bd8dd47960f71c8a466984c5f0e0ee8' })));
+        return (index.h(index.Host, { key: 'c5c9624c12188be1e9434e8c70fd63b5529c5148' }, index.h("slot", { key: 'fffa4c17da47d93fac41a87cf4609df9a67fe6a7' })));
     }
 };
 TableHeader.style = SmoothlyTableHeaderStyle0;
@@ -12571,7 +12571,7 @@ const TableRow = class {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.after(event.detail);
     }
     render() {
-        return (index.h("div", { key: '72a4c01c987c7f2bdf9fa1c924e1a993b2be84a8', ref: e => (this.element = e) }, index.h("slot", { key: '6ca6a1b4ac3f639468f76dee9331877494c938bd' })));
+        return (index.h("div", { key: 'c78b22e6e4c51c7c6acfdbe8ee5c1472644ea3af', ref: e => (this.element = e) }, index.h("slot", { key: '0ba1c65b6d7df31c42cdd7c46918cc03e8a4c011' })));
     }
 };
 TableRow.style = SmoothlyTableRowStyle0;
@@ -12613,7 +12613,7 @@ const SmoothlyTableTesting = class {
         this.counter = 0;
     }
     render() {
-        return (index.h(index.Host, { key: '02fc8d0bab32cfebd674d979170ec6504756f86f' }, index.h("smoothly-table", { key: 'be53bab10f9b680a775e593ad865ee9c924d8493', color: "dark" }, index.h("smoothly-table-row", { key: 'ea0cf3d13bb2d67f2f220a055373e0b6c584185f' }, index.h("smoothly-table-header", { key: 'e8bc1d0403da1acbd2377796b42d81f867d4fdd7' }, "Type"), index.h("smoothly-table-header", { key: '0546e62d049ba346d238b4b3c4b0998cc4b36c1e' }, "Name"), index.h("smoothly-table-header", { key: 'e90ac4e497ed6b96c3e06de14b36e3ae30a7346b' }, "Age")), data.map(animal => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, animal.type), index.h("smoothly-table-cell", null, animal.name), index.h("smoothly-table-cell", null, animal.age), index.h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, index.h("smoothly-input", { value: animal.type }, "Type"), index.h("smoothly-input", { value: animal.name }, "Name"), index.h("smoothly-input", null, animal.age), index.h("smoothly-submit", { slot: "submit" }, "Submit!"))))), data.map(animal => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, animal.type), index.h("smoothly-table-expandable-cell", null, animal.name, index.h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, index.h("smoothly-input", { value: animal.name }, "Name"), index.h("smoothly-submit", { slot: "submit" }, "Submit!"))), index.h("smoothly-table-expandable-cell", null, animal.age, index.h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, index.h("smoothly-input", { value: animal.type }, "Type"), index.h("smoothly-input", { value: animal.name }, "Name"), index.h("smoothly-input", null, animal.age), index.h("smoothly-submit", { slot: "submit" }, "Submit!")))))), index.h("smoothly-table-footer", { key: 'cd1d7b6d5ec0495e9e9d0cfa3aa6d1e0b5c40602' }, index.h("td", { key: '70e325715f8974522c3487abe7394689174f6c41', colSpan: 2 }, index.h("div", { key: 'eadfe49a206a0ac0f8464c0d99eb3376ca5dfb92', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: 'cd18972271dd230b2d3caaf3465f0fe9700e2b2d', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: '3645eb77f1c1004d0f666439e9a024acdd01367e' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
+        return (index.h(index.Host, { key: '56d3ac4ff4d1582b905d8bf70a7b965d74bf5ac2' }, index.h("smoothly-table", { key: '2a285229f291715cf76d86888a258593afc41c56', color: "dark" }, index.h("smoothly-table-row", { key: 'b257d74bf29f491ef47b36638f9a05b0b20ceb28' }, index.h("smoothly-table-header", { key: '27ecb2281fb0d4e73bd4f3d173b1ab725f1aa4ec' }, "Type"), index.h("smoothly-table-header", { key: 'c80044125de85324b9c17046781effd2a8605b21' }, "Name"), index.h("smoothly-table-header", { key: '4c9e2c8c65e6a3a950a5a4734f4f2c212251bb21' }, "Age")), data.map(animal => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, animal.type), index.h("smoothly-table-cell", null, animal.name), index.h("smoothly-table-cell", null, animal.age), index.h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, index.h("smoothly-input", { value: animal.type }, "Type"), index.h("smoothly-input", { value: animal.name }, "Name"), index.h("smoothly-input", null, animal.age), index.h("smoothly-submit", { slot: "submit" }, "Submit!"))))), data.map(animal => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, animal.type), index.h("smoothly-table-expandable-cell", null, animal.name, index.h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, index.h("smoothly-input", { value: animal.name }, "Name"), index.h("smoothly-submit", { slot: "submit" }, "Submit!"))), index.h("smoothly-table-expandable-cell", null, animal.age, index.h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, index.h("smoothly-input", { value: animal.type }, "Type"), index.h("smoothly-input", { value: animal.name }, "Name"), index.h("smoothly-input", null, animal.age), index.h("smoothly-submit", { slot: "submit" }, "Submit!")))))), index.h("smoothly-table-footer", { key: '9e519f298063b4444dd66ae9ea86baeb3866ad09' }, index.h("td", { key: '1c061515c5eacfb64c33e7086c55386a06e3db90', colSpan: 2 }, index.h("div", { key: '36297b426b3e3bd7e4eefc632fa3ae5e24e1530c', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: 'f1d0ce41b940734a42abdbd98621ca3871526993', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: 'd50cafe2b67d5a75cb64fd6285fa6af56dcbd175' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
     }
 };
 SmoothlyTableTesting.style = SmoothlyTableTestingStyle0;
@@ -12638,7 +12638,7 @@ const SmoothlyTabs = class {
             old.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b7d345c0a3d200c5481cbd475c98e1b4ded5222d' }, index.h("slot", { key: '752a56cfdea20f1f8ab8911bd2533e630f27bdcc' })));
+        return (index.h(index.Host, { key: '6aa35e693618c647bc1dbc32484ccfff4bf49f2f' }, index.h("slot", { key: '1a764a86a506925dea02a27e6a7b6660e78b3c88' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12656,7 +12656,7 @@ const SmoothlyTabsDemo = class {
     }
     render() {
         return [
-            index.h("smoothly-tabs", { key: '83507c205b3f7e20bf59ea0dcc360762afc0c6a6' }, index.h("smoothly-tab", { key: '55e7ba04cf6fefaee78db9a64811ca0ad587b039', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: 'af1159c2aac18980b2caee4ac78699518b6e25b3', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: 'f2849e9f08ece816db4d472c64a0ea32b98ea22b', label: "test3" }, "this is a test message again!")),
+            index.h("smoothly-tabs", { key: 'ccaabc8197cc3289fc215e0b44b146202abed3ce' }, index.h("smoothly-tab", { key: 'ff4bc521f1315437c3ce0cd26a849e765ec6ab43', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '25ec505633f0d31ef767ab360218ad4e4234a3e0', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: 'b9d499ab6b414d13acb4fdbe9476b79029f2d8eb', label: "test3" }, "this is a test message again!")),
         ];
     }
 };
@@ -12671,7 +12671,7 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '3d8dba2a66b9de990206a2744933db63df0c2270' }, 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: 'b458dd6601fe6de5b412fd62067cb1ba8ab9291f' }, 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;
@@ -12723,7 +12723,7 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ba34339ce36a32cc0048a2880343d4fd0d525d58' }, index.h("h2", { key: '349a2a4bab1b8063afd4a1e5ff8d98acbb437a47' }, "Theme"), index.h("smoothly-theme-picker", { key: 'c097032653afab9d8b723f774c404a684ffe0ac4' }, index.h("smoothly-item", { key: 'a51e66b36bb2dcdc9167a7b1610015617ec91bc0', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: 'dd53173ec3d566c983d330d99feb770616ac7879', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '2fbc5901829712828bcd00f87885c6de5f846c07', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: 'a4dc8466921de81678c3cf9c2168de5b4ec4ccfc', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '5853dab7d806d0ad935359ada3746f042f926648', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: 'ce2721e0164840f5b06e1f6be78c833f2cf5d347', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '4084320611dbfa3bed77a2f002c468a4f6b37ab3', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '05f17e78713cc03db74f56605a4b07c3f84b2391', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '5b4d3b49efd56380f1494b9e5a0c4f7137cda8ce', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '3162dc58aab543dffbfd18745b1a56a2afd16414' }, index.h("smoothly-theme-colors", { key: '7f9191d4a9cf241f7bc033dcca45a708eac43c36' }), index.h("smoothly-theme-guide", { key: '671cc066cafadc2423617794fd4be9585b132c32' })), index.h("smoothly-button", { key: 'a7423c42b8e0700f599cc28fba8c78e5e23bc9a9', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '4cd3d2bf9ecd6c17646e5cdab9be47a85646e356', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'c5ee03e916cc2225396516d02a6c0c6677bb5d2a', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '5e0f93f3706dcb8d7e2432da8a70b4b5c1418ca6', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: 'db6597756884451d3284709045759f58656c945b' }, index.h("h2", { key: '95c39faf304420a5296b5f302688e6ac682b5dec' }, "Theme"), index.h("smoothly-theme-picker", { key: '493e915a9f44a23b3f114c5c7ef384f438426ca1' }, index.h("smoothly-item", { key: '86536ad4785da50b2d394cfadfcc075f3f26826a', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '3c775b96b32f4d7e69e8c2611d58f342e594b8b9', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '2ace24402e159b8ef204b30de834c0c26d2c5d96', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '78269e7499f1bfe9dc83cf39b12c170589eb9847', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '6d5fdf8095908eea07993685f600d35d2a0405ba', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '5d09ef9ded5cb9eafedfaf3754eb4d32444b003c', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'e5ada52d74ae277d4de5b2ec699467618b27ae5d', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '15c2412a56e93c582a1e3e0fca6d230442316b07', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '641bfcffbdc33cd493d6dee82396d32f1dc2e6da', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '1656a635966aa1eb96c4f32ab8492ac00510852e' }, index.h("smoothly-theme-colors", { key: '349781baa9d5fcdd329efaa908bd4e1e57d7641a' }), index.h("smoothly-theme-guide", { key: '3eb63d855716c2f359402ff55f297d0830833e52' })), index.h("smoothly-button", { key: 'b4ceb32412a05a188a4c01ed536507f48b912386', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '268d0d47d29acd129c51c559fea2ebf2c5d8f9f5', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'dda1aea73d0035d6eb530288e8ac3b862c68683b', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: 'f463ccfe9e34e3676b28b423e781431ade9d9582', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -12737,14 +12737,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index.h("smoothly-display", { key: '9392fdcb63357cabf8b3ecb2ec7ad45b102bbbce' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index.h("br", { key: '7c2e2fee510d664f57226b60a8b73c8da3b5961c' }),
-            index.h("smoothly-display", { key: 'c1674f0f5a395f7f8442566322bdb62b7c6c35d7' }, "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: '7a40d1416537be0f296b7eb222752d274b9a44cf' }),
-            index.h("smoothly-display", { key: 'cf9facd68d4dcb349efaecba5c5985f3a31f1d24' }, "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: '6c8fe6d9a2529af57ff375c2b455fc105c808261' }),
-            index.h("smoothly-display", { key: '7ed0892f9ab56af52a3d2c3768803c9977ae0441' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index.h("br", { key: '7086ff97b743daa2fc6459254abb0db2ba9ba83f' }),
+            index.h("smoothly-display", { key: '8899bb4b03a984a6901ef4963bfc883e9393778f' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: 'bba3998ff2e2d8d544c815344d65e5d432fa7715' }),
+            index.h("smoothly-display", { key: '412734bf48ecddb2708629986156413fe2da86c0' }, "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: 'e39c9bee0ceaeabc7f59255a9822a253bbe5542f' }),
+            index.h("smoothly-display", { key: '56f7ffca12a7a8d343f7aacbe231029e73d8be50' }, "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: '7fe66b774220c9b427888a0184c7890201dfb37c' }),
+            index.h("smoothly-display", { key: '36bf9e4aa0ed6649d20ad2766ba1dd7ff20b70d3' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: 'bafa8ea1800f233b1c24d5c793e60e352ecc9d1f' }),
         ];
     }
 };
@@ -12759,11 +12759,11 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: 'bcf56b93cea361a472c4c657719471b48b15c423' }, index.h("smoothly-input-select", { key: 'fd20cbe5149b446ce94db832964984bf6d90949f', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '12ad92b9ec3490fdd2aa9753415864a509002d45' }, index.h("smoothly-input-select", { key: '320b51fcdebc921070a8857b8b21e93923ca2ff6', 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: '415a84e0b70250db18779fc6ae653d9be1a6b635', slot: "label" }, "Select theme"), index.h("slot", { key: 'ae2c70f65296a4550c467ec902d704505ceb8028' }))));
+            } }, index.h("label", { key: '2250a7182d1864bf4842efef87b2cd11b3660cb8', slot: "label" }, "Select theme"), index.h("slot", { key: 'e3026a6688a839b33aa3411af65ff6109d610b69' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -12784,7 +12784,7 @@ const SmoothlyToggle = class {
         this.selected = !this.selected;
     }
     render() {
-        return (index.h("button", { key: '568413614fe9dc2bb1f5f6ce0af2871ca76474c6' }, index.h("slot", { key: 'c4b6af36c51c07e13a12946b79f449fea2e9f3d0', name: "icon-slot" }), index.h("slot", { key: 'c35cafe16655e1d3b0682dd31e6de0f86a771535' }, this.name)));
+        return (index.h("button", { key: '29bda801461e51e9c6b2da5fbd0b8c161beb4965' }, index.h("slot", { key: '097662505d03928f6278c1d5042ca140e4cf9c32', name: "icon-slot" }), index.h("slot", { key: '1d4e220fc9c56616e6632c68b65dd1c7e1eb52c1' }, this.name)));
     }
 };
 SmoothlyToggle.style = SmoothlyToggleStyle0;
@@ -12808,7 +12808,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index.h(index.Host, { key: 'a2d3c8bc6e1fc416e7aefc16e27011df2a427cb0' }, index.h("button", { key: '18f91cb15113cef829e5eb93c7a8171582977d76', disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: '6163e58d06535c1e8eac4456c336e3357fb46d68', 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: '38bcf521685f94835b517bd2fa6d04ba673189ca' }, index.h("button", { key: 'a2eabf80cee803907395fa3fcceedec930a43489', disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: '0520c6b6a510f33015f724455dfa5949ac1f9e0a', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -12821,7 +12821,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '47650771cbbb8231664575e75db8a8fbacb8ab12' }, index.h("h4", { key: '8d1c1029726899199f3c681586e18fae05d67e2b' }, "Toggle switches"), index.h("div", { key: 'ee3e9ea3f0e355dd103327909680e24b035b1bf5' }, index.h("p", { key: '880b1b2b582ad4d0b1a342a86fe2fef689af59a6' }, "Checkmark"), index.h("span", { key: 'b003761f677203d13f0f60dffe912af421c839c6' }, index.h("p", { key: '8b4b3d2164819aea3bd897a8e2662f09492637bc' }, "Tiny"), index.h("smoothly-toggle-switch", { key: 'd510ee16cfe54c54657ccdb532bf3f5312d97cd6', disabled: false, size: "tiny" })), index.h("span", { key: 'e59be7c481923b056f2f9c057f3443a4d9be990c' }, index.h("p", { key: 'c493479374a680756fbac92eeda87de8487c829d' }, "Small"), index.h("smoothly-toggle-switch", { key: '1f32282bc99a60e232be61351f6ede66902f85f9', disabled: false, size: "small" })), index.h("span", { key: '168649809b71534f2047f4a2921d1883d393e5af' }, index.h("p", { key: 'c0ad9356aa39e9c30fcd81428e7edc7f5b9cb171' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'b37bdafbecdbdf23d161dfcf97ce95e4472533d5', disabled: false })), index.h("span", { key: '13fb2c18f31bad7ab79627700bc9f09fe8ea13a3' }, index.h("p", { key: 'a53042c51d32c9b33e7cee9a17ceee9a4aab8f5a' }, "Large"), index.h("smoothly-toggle-switch", { key: 'd3c7a24860cd2ed6d9a7d8f3d72b78254f4d45db', disabled: false, size: "large" })), index.h("p", { key: 'b07c309c395821a360f80c63fcaa003c8e3e8f79' }, "Colors checkmark"), index.h("span", { key: '86cad1cb71ce28162e693b8912246b0528cfa529' }, index.h("p", { key: 'bb81b9db18031328d8f5c217744df76e7eabe500' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'd8c56a9f6549f0afb507c20cfbcab03e29c945ba', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '301999aa23cce260437ab717897485bec49b5363' }, index.h("p", { key: '8247683b0ab167a438b7db43164bee8279081ca9' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '89a63c98449eb7fb4d6e4097810702123a075c97', color: "primary", disabled: false, size: "small" })), index.h("span", { key: '893f20e83e9b8fe8f383d055e46da351362ad37f' }, index.h("p", { key: 'b9aaa3b6d2c64c4bcd1c6006295c66165b3f0442' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '16aff70c4e37a2255a865349a06c53b2f47db90f', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: '59ac6a5b296ebab662b6f51ac9ba6147ac8bc937' }), index.h("p", { key: '5f0f7b604328cd3e614ec5f3dfd128c7e0cf2d1e' }, "Colors no checkmark"), index.h("span", { key: '8f386dcdc50b497da67b1f7c5bb8fbe8049ea355' }, index.h("p", { key: '76295570e0999a00db94f630380c91b0da4c5c56' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'd8803537d6904d29bc4a2f561d2f6ae9f79bd400', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '954b5c164a25a469d8d148a1df5b5ae9ed28a134' }, index.h("p", { key: '0fa0812ae21795474460b801902158df8fcd9008' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '3032deba72973f5eb282aba6a3e59b358f695b0a', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '0768596167d8706416b82447b2d1a16bd8d7d10c' }, index.h("p", { key: '93d18ec55a0f01fe4b486d20d6f9bbdf49730994' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'ae87766c783216dc8a482f4239d9a4382ac19b9a', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index.h(index.Host, { key: '3bca3e780fd85a6294adae1e271c2361dd76dae3' }, index.h("h4", { key: '99c58771018a883e2326e442cf6e422cc5c0a0f2' }, "Toggle switches"), index.h("div", { key: 'f480d35c480489aa932895a1b27a0e16a14b0fa9' }, index.h("p", { key: '8f23b1af765b29e4ee8bd74e971997b4e12757e9' }, "Checkmark"), index.h("span", { key: '357a4e5d82132292bd49706c8208130b318e724b' }, index.h("p", { key: 'd72112bb955e004fa7efeee81284d2a70f0635f8' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '2da0aa13f5be6ca3101cd570197f5ab10361e9ca', disabled: false, size: "tiny" })), index.h("span", { key: '984b25183fc13cd386f603093bd21dc4fbad51fc' }, index.h("p", { key: '2aa1c9dfe8a0f53b928365cc6969cebc8f698bad' }, "Small"), index.h("smoothly-toggle-switch", { key: '96955415a62018c3e84f4dd0b6a54b34dab77532', disabled: false, size: "small" })), index.h("span", { key: '8b54ddfd81882ce6bd12a87519ad53d9c0e55fb6' }, index.h("p", { key: 'bcb92b31417ace95640448dc005b620ad4b7897d' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'a97c5ecdba00b16833a44b7ac256ec39768f92d6', disabled: false })), index.h("span", { key: '63d0d9783d66e625a8b95a0954718a338da3bfec' }, index.h("p", { key: '53d7dbd6810e773b5b26445d9984752ad5eb2152' }, "Large"), index.h("smoothly-toggle-switch", { key: '2d688d267f7acb779d376f2ff2558481481fb95a', disabled: false, size: "large" })), index.h("p", { key: '724fd92434b47051f22abb4da6ef1fe467d5246a' }, "Colors checkmark"), index.h("span", { key: '2f05c08c600161f584cc91fc8fa287029c616b60' }, index.h("p", { key: '10ff04710fdcfb74d4a12890873e0c4172cde339' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'bc8f3f49aa7c942c5ebb043de50420f97f0f8a4d', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '80cef0a6e6b7bb2c9a5a1961721b64c98b3ff8d0' }, index.h("p", { key: '0996f8c3cde923380042c288ce8be6b745908cac' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'b293ebf758063564e6d45057fa0ea063e9c45a16', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'b0f27a4aeb2e17f469fcb55fd89409079ee22980' }, index.h("p", { key: 'a5bff4d6fbb8c10717413b0d3833023e504d54c9' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '487d6bbb17273f22a754d3e4b5e1479b3e19ef2b', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'a5916c9bc6969dc1fd48944ed4ac7565736147dd' }), index.h("p", { key: '00ab41ae4619a47bb64bb1c6ac7b2f4cd54c7518' }, "Colors no checkmark"), index.h("span", { key: 'a209e88bf353e9e3bed2216df62fc621a005bfd1' }, index.h("p", { key: '8d3964397d7208189dabe03e2f400c02c6ef0d48' }, "Danger"), index.h("smoothly-toggle-switch", { key: '72ef65447fb9264bf68ac99aa1c2b77903dc4a4d', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '5d7056a9ddb141eec7433e695119fd5ef1849f59' }, index.h("p", { key: 'a025787616b342fa6677df6f5df309f72fcae783' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '8cb254ef2f008a8105380be91f8cf887b9c1be67', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '5a3874c9b1898413293d2375067693b90622fdc6' }, index.h("p", { key: '80b88f084c568461a337d2177878ab3966ef0a66' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '9c0c023e672f55ca4c794786f20da4cd410e506f', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -12852,7 +12852,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: '6706b23249ad363c43a4fcdffc368278dee07fbc', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'aa0eb84da6e53e1cdd6fad610bd2df9e99053f23' })));
+                result = (index.h("button", { key: '73d6e130e5b41061efe8c0502be0494d1043b143', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'd33dd445b8b1f26fe6ddbd18df6e41822ef3b5ee' })));
                 break;
         }
         return result;