smoothly 1.2.1-alpha.29 → 1.2.1-alpha.30

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

@@ -1944,10 +1944,11 @@ const SmoothlyDialogDemo = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.openModal = false;
+        this.openTallModal = false;
         this.showFrame = false;
     }
     render() {
-        return (index.h(index.Host, { key: '6c4ba68e4b6f35ae85b1c580a64c04595ae6117c' }, index.h("smoothly-button", { key: 'f67e91a8698cc5ec7202372e789fabe725c1e7e5', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), index.h("smoothly-button", { key: 'b2d30f776331757892584ef8956bb81a2bd207c7', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), index.h("smoothly-modal", { key: '7a722ab3c5edade7fa4550ea7d87c6364caa02dd', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, index.h("h2", { key: '48f5e0c1380214c301ba0bea1bdef0fc5457cba9', slot: "header" }, "Modal"), index.h("span", { key: 'b55816e13c2941e69d7aaedf9f48729708e0f08c' }, "Are you sure you want to confirm this action?"), index.h("smoothly-button", { key: 'd68ce299fe568f359ae087b71f2622cc46754046', slot: "actions", color: "success" }, "Confirm"), index.h("smoothly-button", { key: '791bac22ef5643e20acdb6c3d3e65d24685ab983', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), this.showFrame && (index.h("smoothly-dialog", { key: '6500f4c114d5b50b75a9dde232c52caf67df5332', closable: true }, index.h("smoothly-frame", { key: '24fbc3add95843e4e63703173fd51a9546787285', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
+        return (index.h(index.Host, { key: '6f23592546df981ab328a997d491fc38dd018cd9' }, index.h("smoothly-button", { key: '10c77679cf0d56bc2a6f72a811af6a8565c8a089', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), index.h("smoothly-button", { key: '3ac4824da8c88e874ef3ce1fd074c14eb03b564c', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text"), index.h("smoothly-button", { key: '129d197f52ccfacf87c4af5fa0ce3a3ec200ba4e', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), index.h("smoothly-modal", { key: '951f8764d9b57d24399ac51550c886fdcdce98a6', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, index.h("h2", { key: '074bfe974be4887ec60e5ce0d12c2b4a27cf1891', slot: "header" }, "Modal"), index.h("span", { key: '48e53abb102dc62d4b4d65d804cf9b3cf9bcfead' }, "Are you sure you want to confirm this action?"), index.h("smoothly-button", { key: '81cc4d058f49ab4525046ec2ef589876bc269555', slot: "actions", color: "success" }, "Confirm"), index.h("smoothly-button", { key: 'e611c3c8a644d96d6db2444f4229aae82b6f2795', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), index.h("smoothly-modal", { key: 'b8d779280ad362372b67c2fa03d29c2c301bb36e', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail) }, index.h("h2", { key: '9f9ed5125ec6df8b09afef98c8e6aea9689c0512', slot: "header" }, "Modal"), index.h("div", { key: 'ae95b36b3a1d30d8877dc070060d0099e08a576e' }, Array.from({ length: 10 }).map(() => (index.h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))), index.h("smoothly-button", { key: 'c6de6bc0b9aff9c63a95d4ac210ae9314537936d', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (index.h("smoothly-dialog", { key: 'b4b59028c956dc34e857556bf0c3f909dca4dd77', closable: true }, index.h("smoothly-frame", { key: '0e7f75e998a37d4c0d02041c694f1b05563230d8', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
     }
 };
 SmoothlyDialogDemo.style = SmoothlyDialogDemoStyle0;
@@ -3788,16 +3789,16 @@ const SmoothlyDisplay = class {
         const type = this.type;
         switch (type) {
             case "json":
-                result = index.h("smoothly-display-json", { key: '5d2196701b252729d1f3fa479fdc63ffb03a15bd', value: this.value, collapseDepth: this.collapseDepth });
+                result = index.h("smoothly-display-json", { key: '6b31a96e16b4b4f5a881fe9de434326d7262d302', value: this.value, collapseDepth: this.collapseDepth });
                 break;
             default:
                 result = format(this.value, type);
                 break;
             case "email":
-                result = index.h("a", { key: '5241655ff14a969d2105b0c5eb833778ba108337', href: "mailto:" + this.value }, format(this.value, type));
+                result = index.h("a", { key: '8cdbbe4ee158e11761a3dabeffa6fd7165004639', href: "mailto:" + this.value }, format(this.value, type));
                 break;
             case "phone":
-                result = index.h("a", { key: '2034904f71b8e057c0a9b38ab5a2c5d0f469543f', href: "tel:" + this.value }, format(this.value, type, this.country));
+                result = index.h("a", { key: '17745ad8ad63df1451e314608b210dd31b35c8e7', href: "tel:" + this.value }, format(this.value, type, this.country));
                 break;
             case "postal-code":
                 result = format(this.value, type, this.country);
@@ -3834,35 +3835,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: 'c220de6401d1aa13251c3e66c0daf822499ee08b', type: "text", value: "text" })), index.h("dt", { key: '97c14363d67efc9e086b01eb4f1b6d6d517b723f' }, "postal code"), index.h("dd", { key: 'd644b1d763d3d99de89cbb478cd930f5d9344072' }, index.h("smoothly-display", { key: '80d74c9776e2f97fb51d4d1b7bb5eecd4bdd0067', type: "postal-code", value: "752 31" })), index.h("dt", { key: 'b0fe5f014cdcce5f246df01977abd4f81ddc10f2' }, "password"), index.h("dd", { key: '99cfc035193811268af615778aec9758a5c29ba4' }, index.h("smoothly-display", { key: '01414318b7fa3d68cee849f6a1c7b2dc073091f1', type: "password", value: "password" })), index.h("dt", { key: '31b6dd5816132673b12d085906273622f2a7fe67' }, "email"), index.h("dd", { key: '738b0106ac2228e6207678c4b310135a73614982' }, index.h("smoothly-display", { key: '39c4c8fce8247b0ef025e1f246e1501f5ced2764', type: "email", value: "test@example.com" })), index.h("dt", { key: '2fe0afb508eb4a324a7bd4c3f12b5ed990234d4a' }, "price"), index.h("dd", { key: 'd8f43c0efd5997cf84df8e1041059dd65641bd4b' }, index.h("smoothly-display", { key: 'a49efc19974c2a3abbea9ead4b432b194874089b', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '98181a41b44286f039e688e81a314544923cdaa2' }, "price without decimals"), index.h("dd", { key: '9775482a24ad31b1882e9284320d6d0f9dea6b25' }, index.h("smoothly-display", { key: 'f95b697244ff916b5abe814951491bd446c6a129', type: "price", value: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: 'acbbe2f964fa678c8323ca293eea908a602dda4c' }, "price with decimals if they are set, otherwise no decimal"), index.h("dd", { key: '2316ed6bbafd30c898a55cd347d887646351a059' }, index.h("smoothly-display", { key: 'bae4a8e049119718cbc749d3fbd04e660e6d3213', type: "price", value: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: '75c83574a45e947c705a527627a95dd928d0d302' }, "price with decimals"), index.h("dd", { key: '33a0a8dcaf8c622bc23b0ccd5ea5da772e5f5d0a' }, index.h("smoothly-display", { key: '8281b39bf3e683e267b0933340b16ef2df39eea0', type: "price", value: 200.2, currency: "SEK" })), index.h("dt", { key: 'be28aad75033edb9a7d2f22ab9353ff8dc917a48' }, "percent"), index.h("dd", { key: '2819b8d662e4dd9391a96053adfdf6e0bc8017d2' }, index.h("smoothly-display", { key: '6b2ffb4bfbd6b0e3c607a056e264e13afceb8fa6', type: "percent", value: "42" })), index.h("dt", { key: '3d9ab902cf90db8cda244761f5a6cd0e3959cfe5' }, "phone"), index.h("dd", { key: 'fcc3f2c0f42d863c81da28285d371c142b1a267c' }, index.h("smoothly-display", { key: '417a233b8a47abd611e54793492349485185103f', type: "phone", value: "0101881108" })), index.h("dt", { key: '91ccc7e6fb8e6e4bbf33ff6fe2fc7aeca2f014c5' }, "card number"), index.h("dd", { key: 'd03ca2f1002073d85e375639da979b1e46506ab1' }, index.h("smoothly-display", { key: '8b4c6367af7f3a731122974ccbccecb5d183808b', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '039698ebc4190e3e728d46085fe42bd7a677bb92' }, "card expires"), index.h("dd", { key: 'a2acfaa95ee16e5ab3536776ceb1fd7e43498933' }, index.h("smoothly-display", { key: '03d35dc9b8a9334f5a0036819dcd24456cb0cb39', type: "card-expires", value: "7/22" })), index.h("dt", { key: '5770e2dc7e5c9024087110cbbe96ac2d0c34e45a' }, "card csc"), index.h("dd", { key: 'cb7137f7ac9a45a73a174618d1e08ac9198b0c28' }, index.h("smoothly-display", { key: '6698bbdf05f0f9aeff9a524a6c6e9b3a162e611f', type: "card-csc", value: "987" })), index.h("dt", { key: 'bb3132ddd71145977ee78e7ae1b3ef36309ece50' }, "date"), index.h("dd", { key: '15d8e19ad162991a87685384d6b85b9f56cf7d88' }, index.h("smoothly-display", { key: '5e9e982f3f1f5d520fc6295f7129cecd6923f4cd', type: "date", value: "2022-07-07" })), index.h("dt", { key: '35dcaf719cdd984bd152b3f7d3882d61b3f740d5' }, "date time"), index.h("dd", { key: '19c1e94cc9bccf8ed4fa6ced58456003919deeb1' }, index.h("smoothly-display", { key: '534cac8ced225a5e4e18d024cede0ede390f1382', type: "date-time", format: {
+            index.h("main", { key: 'fd051f67ea55f254181be2b43716e84e00cabb05' }, index.h("fieldset", { key: 'bea8026fe521ec050e1780416fa9e32989b2afa4' }, index.h("h2", { key: 'ef4c1a656d67796afc8f9c5c9db63c04f96aab4c' }, "Smoothly display"), index.h("dl", { key: '8deda943fa8ead28b6df1b007907f6d9dbf66d85' }, index.h("dt", { key: 'caf0ad2fe220cdb62d47140efd9684998246e2c3' }, "Duration"), index.h("dd", { key: 'f1c4659bf36f0a327fabba9314042dace342c13b' }, index.h("div", { key: '30872a9bd82d2814a82cf53ec42f3a7b3fe13b3a' }, index.h("div", { key: '5f733cc2b6a745712e246479c59b8aa3daf11312' }, index.h("smoothly-display", { key: '1998b9c2061fa468aa9fffe4d733a8a683baae05', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: '159344fc77844facc8960a4f71a99813623a7763' }, index.h("smoothly-display", { key: 'd0f14a4f05e1b9353b9a0b389c17e3fbd7537b1b', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: 'cc65ac80578b939be2d3802fd3a5ded8fbf5b384' }, index.h("smoothly-display", { key: '489a7d80e18f1bb9d26eb8e807467f0cd8e0e1dc', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: 'a7d5607906b992f698a00d293872dd5cfc65ad42' }, index.h("smoothly-display", { key: 'b868bb9a2ce5b8b0bab62e4ab90f5ed8172b2dc1', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: 'bf53f2aae5ab5cdb6f7d98aba73a9e382fb98bd6' }, index.h("smoothly-display", { key: 'd27e664c4d0007dccfae976a13b3c3e202d7052b', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: '7e7ab059fe4ce79836b9b3c63a212e5ab9e4b36c' }, index.h("smoothly-display", { key: '388670fcb5c8371244c4112d0cf5f0050b59b134', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: 'e34c143b748072810cec75427ee497bfa25f92d7' }, index.h("smoothly-display", { key: 'bc74a20668e2b2b8e5561ebcd79fcff63c7886d7', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: '04d7d7e6d8695b50afd0c80d7b8123d22a96a0a0' }, "text"), index.h("dd", { key: '0a51fa2990fa85c8154e2a14ad374252104d8658' }, index.h("smoothly-display", { key: '75b7cf9296c52cda27db01cc201b4417e2f19288', type: "text", value: "text" })), index.h("dt", { key: '3c9fa1e7b2eda3a838d779885ad48073a1e7ca78' }, "postal code"), index.h("dd", { key: 'adcfacf0c296667c4a98919fc64ff1b6823f253c' }, index.h("smoothly-display", { key: 'f35d166fc0ae74f26d9dab3ce217edf1e8df348e', type: "postal-code", value: "752 31" })), index.h("dt", { key: '5dd7df04105283e70182a8c24d69c7abc1632a0e' }, "password"), index.h("dd", { key: 'd785701c8d5e6ce9dddfe618b91f113b1cc47694' }, index.h("smoothly-display", { key: 'd9a04bc3d9c62eebf4b8fa192ee43544e25f48ec', type: "password", value: "password" })), index.h("dt", { key: '72a245580c0d67958d821918a64634089badf6e0' }, "email"), index.h("dd", { key: '4e2129c4690821e35017a025378a52a82d9c6e12' }, index.h("smoothly-display", { key: '6f60bb0a22b496b52f76d72c25f9c4959c275174', type: "email", value: "test@example.com" })), index.h("dt", { key: 'b47e6d91ac2ad5839eff3f2ed72793406c447381' }, "price"), index.h("dd", { key: '5ed6dc4d1894989f8c59e85a9d6b3474b1838d46' }, index.h("smoothly-display", { key: '88d50f738cc333ee0284011ded0e5bc2eb90eb01', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '52b377e012d006448361e4190e85238eab82f425' }, "price without decimals"), index.h("dd", { key: '2d070cde97c125943423c28dd37a1bec7f1bf521' }, index.h("smoothly-display", { key: 'a63703e7aa73188db4b78d2378f2e30d491b35d7', type: "price", value: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: '10348b35a582998ee6107a2b5c55a589e0d8c66d' }, "price with decimals if they are set, otherwise no decimal"), index.h("dd", { key: 'da178ce35a352086c815f4cfac4096e34abbaef7' }, index.h("smoothly-display", { key: '08b7c0ba00f0b9b57d1ea8cc4b537bf6b632c2b0', type: "price", value: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: 'd7db59b325e85da3458ac99916b9bcf67ea567ff' }, "price with decimals"), index.h("dd", { key: '526c59b42c339389a0839a0ee96299d184850d2c' }, index.h("smoothly-display", { key: '2d7ebb7450b5eb08ee6ff7ada84034db4cfb06ab', type: "price", value: 200.2, currency: "SEK" })), index.h("dt", { key: '0417d708b6db96a1a3d08ccb552dc3704383f498' }, "percent"), index.h("dd", { key: '8c35ad31827aeddb6b205a7009e9987d317a813c' }, index.h("smoothly-display", { key: 'ebd4dd2565a20e48d31724b44d11b5cb44ae5277', type: "percent", value: "42" })), index.h("dt", { key: '65a23b48dbed3e8e7b50725148acd17891e19ddd' }, "phone"), index.h("dd", { key: '515ed149215811c8434f340256f8b4d331763db9' }, index.h("smoothly-display", { key: '6b7422b4b8387e74ef38aba7e8567f11b263cf9a', type: "phone", value: "0101881108" })), index.h("dt", { key: 'c1fe3e553de1313a579833275f43246d0673f812' }, "card number"), index.h("dd", { key: '6078440f5880b8442e388517f42660362841db2a' }, index.h("smoothly-display", { key: '6eb5a018d0d6f7f8458955369481294408d4fdf4', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '4ac0a352835d49083a89465d7fea27f951d2c4ac' }, "card expires"), index.h("dd", { key: 'db0cbb3b0795b19ffbf184da0dd2625eb8fb8918' }, index.h("smoothly-display", { key: 'd9ee4dc173460f0952d77053d12c68fce7feddc6', type: "card-expires", value: "7/22" })), index.h("dt", { key: '515cacce3dca652dfba9bf5528211576231495e5' }, "card csc"), index.h("dd", { key: '9f6c2d8490963f09828993d42ee16b9ffc5e0d0f' }, index.h("smoothly-display", { key: '1afda51b0213c77cf3b353bade47671790475112', type: "card-csc", value: "987" })), index.h("dt", { key: 'e7204fbb88672bf46f9551d7cf50e750cc8bbb38' }, "date"), index.h("dd", { key: '34fcebf482a696d179efbccc0708b8e71e8726d1' }, index.h("smoothly-display", { key: 'a55391a66ccc1cf033a2519fdf3b75c2510cb11f', type: "date", value: "2022-07-07" })), index.h("dt", { key: '4a818e58e65af6b0b27d090fb53909f4030a0442' }, "date time"), index.h("dd", { key: '18874fbe62d3f0d4758fbcb3ea56c28698285c23' }, index.h("smoothly-display", { key: '137a6be8368b02ec204b5baa82bf455f69a2fded', 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: '5cb68a16a2a58e482f479f7b0cd55bec7c2dd843' }, index.h("smoothly-display", { key: '6e0103ac51fda62fee2b92b6c5b675659af55d14', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '81829d196bd5886e41d896369a9c20a0e9ac6475' }, index.h("smoothly-display", { key: '69d3bce166d11def43480659575c51c171c22a45', 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: 'd2a30230571dd5408d957375e12dec0991430628' }, index.h("smoothly-display", { key: '1ab7d44d8e8d54c35bab5994ba93ddeb7e4d8a34', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '9f8913ccf6eb9aa0320ccc96c5f63d1368e03cb5' }, index.h("smoothly-display", { key: '440dec80b84e484440f55e568d018a46ebdcc199', 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: '9d78a6759e91cd6b4448e6f6736036d4a3da29d2' }, index.h("smoothly-display", { key: 'bf6e329d185ee7077c5f3e1321e08acae2eaf4e9', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: 'ca5f7e206cf42b4bee3e885c8dd6fb5ce1fb414e' }, index.h("smoothly-display", { key: 'c2258980a847c8d2ac8c77a47e7a5772bce08ec8', 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: 'e18e944f3a2634c8845fc3c8ac37218b99a7449e' }, index.h("smoothly-display", { key: '08f12a25ac1a82a29c4f3b0b2c243abf35e5dc19', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '77a762a3d71ea5a4a0aec54f6a00b7cefb63599f' }, index.h("smoothly-display", { key: '8295f62596514d41bf862485f13c8c71c0a4f1cc', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '9b80503f3e137006d711017eaf10b3db5da34875' }, index.h("smoothly-display", { key: '66645f730d1177045b8f5eacaeab2c329f0dff44', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '8b99f1ea1299e7001053e7b9deece7e6a15e2542' }, index.h("smoothly-display", { key: '89c93cace88996c65faa0791cc0ffd7a4e9e083a', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '570142486b7ab93ddd59d9f418a60d700c7817d5' }, index.h("smoothly-display", { key: '63dfcf83183fba060fceed447d4bcdd0c30eb5a9', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '4cc6f5ba3ddd1b339d5fb015de456abae54aab43' }, index.h("smoothly-display", { key: '6c2f659af73220903642fd0807d1151f204ba837', type: "date-time", format: {
                     year: "2-digit",
                     month: "numeric",
                     day: "numeric",
@@ -3870,21 +3871,21 @@ const SmoothlyDisplayDemo = class {
                     minute: "2-digit",
                     second: "2-digit",
                     timeZone: "Europe/Stockholm",
-                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: '06daf48cc5f219d8d20ded0b2d17eb5c15ee802f' }, "Display JSON"), index.h("dd", { key: '68e52d5d58c9e6b2a81afdf12d068e486206a75c' }, index.h("smoothly-display-demo-json", { key: '2e7cea8ceaf6d757aedbda66b7ecd3fbcba9626c' })))), index.h("h2", { key: '8b6e6410e5893b39746d297490f4ba6c1a9e43ab' }, "With labels"), index.h("dd", { key: 'fe7442c9d9790bcf21f96982d051c3c405ae04b7' }, index.h("smoothly-display", { key: 'af5004ede783be29b7068ed1c61d22710e282bf4', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: '882f57a8e91fa1d74fe2ccf1ec71367ce2a499f2', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: 'fa228466f55ac337f553733415b7bde7038f562b', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: '04eac3bb5a5382815e2f92a2b4c54182166b9637', label: "Logs", type: "json", value: [
+                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: 'cb48cb11e0a8400291f08caa821b53cb443f8f12' }, "Display JSON"), index.h("dd", { key: '5f88f3eedffc8993d747898f9bf5dc9da06dbfb1' }, index.h("smoothly-display-demo-json", { key: '695a426dd6523dbac16fe830167f21e095499760' })))), index.h("h2", { key: 'e847b40c54e9c2343c3c572802732594110a3520' }, "With labels"), index.h("dd", { key: 'fa442318099a443bbc08f8b989993184afe12f57' }, index.h("smoothly-display", { key: 'e0b37f5c62a577c16805b7b3793a397ade55944e', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: 'e17917bd5c0ba53f198a218ac5377feb64a3219c', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: 'd8c0252e5b772d1328adcaff951d2394b4da4fdf', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: '3a020e58a1fbac08de20efa83040a6d2fff73d40', label: "Logs", type: "json", value: [
                     { type: "trace", message: "Hello" },
                     { type: "error", message: "Oh no!" },
-                ] })), index.h("fieldset", { key: '393f6b45c8bc45dc1cddeec02c24aac06230cb53' }, index.h("h2", { key: '9a5c714f14f433c33e740099765886557b6ce3be' }, "Test of different kinds of notifier"), index.h("button", { key: 'd51beff4cb95a30b38da85ed78fb462891e318f6', onClick: () => this.noticeWarning(redirect.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: 'c4dc373da9d151ee072193142a35a6abd7d4e9dd', onClick: () => this.noticeWarning(redirect.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: '3244cf32b9f79b4d946902566d7ca22d586bceb4', onClick: () => this.noticeWarning(redirect.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: '9d4f44f4bfdbd7777bc8704e469264c0ccbb4592', onClick: () => this.noticeWarning(redirect.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { key: '0e28a01647de5450e3f945da1e7a4cf6232618cd', onClick: () => this.noticeWarning(redirect.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", { key: '7392a2b3a129b0d06eace6a4b2f1d101fd2f5cbc' }, index.h("h2", { key: '677cb38a68a02bda1ad5184c822ab50837211481' }, "Smoothly spinner"), index.h("div", { key: 'feca9fa309b2ed6b5dc3ff0f631f479343c80f68', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: '12977c80104f2deb49ee424adfc07d4652736284', size: "large", style: {
+                ] })), index.h("fieldset", { key: '08d6ad86a6d79ff873156f7cb4d84360d8e92f38' }, index.h("h2", { key: '91450decd67bdc21c204adaa7f95d9d0d2f64107' }, "Test of different kinds of notifier"), index.h("button", { key: 'ded2972233a8361b91b75c8386ca3f3299735959', onClick: () => this.noticeWarning(redirect.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: '833fe76b9edaa48c4db0aed015bfd310936bd01a', onClick: () => this.noticeWarning(redirect.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: '5f74587f60215db920ea6a0b9a01702642e61745', onClick: () => this.noticeWarning(redirect.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: 'ed76217b6f2a5f84ecc04a04ebc13c1441958b39', onClick: () => this.noticeWarning(redirect.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { key: '7f7b974a4ed5528d8d226d380233e219203553bc', onClick: () => this.noticeWarning(redirect.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", { key: '287c9ce5ae199417e9883b2d10c7f74e755ec0f1' }, index.h("h2", { key: '14379ccb8cc02c5041a11ba85b15785a4fd87711' }, "Smoothly spinner"), index.h("div", { key: '71d53a5d93355f097f377cf0665c299fe85746e8', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: 'ea3b1bc70eb21b536c561f33176caffd2891b6df', size: "large", style: {
                     "--spinner-background": "200,255,200",
                     "--spinner-background-opacity": "0.2",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: 'b2c8342d2d56fe92cbcf5b009fbae25ed8eb55d6', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: 'd74801142948ed1a9f84f396080abc9852d62785', size: "medium" })), index.h("div", { key: 'a30d593857302fc6624284ddbe44d7721c220113', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: '5e3ee46d77b88d6ecd81e36f340b9c561652e515', size: "small" })), index.h("div", { key: 'ccfc1d96cecb1d7f0d69dfd8db9b0b8445dc9a05' }, "Icon sized spinner on button", Scrollable.Color.types.map(color => (index.h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
+                } })), index.h("div", { key: '0d5e895fdd77b5726b8c239e47cd044a067d1f2a', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: '385f5a706c79db46521602b25a2b74010108c08d', size: "medium" })), index.h("div", { key: 'c7fa64f4652ec6c43d76f2479b7c0d495b839a39', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: '5c495259b28ce92f47998e40c30899ceaca44712', size: "small" })), index.h("div", { key: '788b86e0d1b31798d3ccb7a36b3b2ca30bbe5492' }, "Icon sized spinner on button", Scrollable.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: '6ab29d607099b5d52f0814af7ed4bd874333d5aa' }, "Spinner with overlay"), index.h("div", { key: 'c3be578d6f72d9c68486713e169e54bc35fb6686', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: '250c12f2ef7d820475b6205e712a7d4e1aea0581', 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: 'bfc699d0d863be1f32947b2c6fc8e423cfe9c6e7' }, "Spinner with overlay"), index.h("div", { key: '8b104392475d98d3ed535266efb5e1e43242eec2', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: 'da19b77e7623e6e5beb7a79f481c1454c0ba54ae', overlay: true, size: "large", style: {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '6f73e8dd28efa4d12903dd710fe2940f95fc2777', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: 'eb7cd93a1107a3b332deba784c248e14bb733d52', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '98e4c675a13f2d6509180546ec8aaf907f2fbf33', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '7f2c9b9757b84bcf8db81d2d806c91c7a98b3cc1', overlay: true, size: "small" }))), index.h("fieldset", { key: '578b058ee4690857b3515e1c2296c6440e91b703' }, index.h("h2", { key: '7bb174dfc72444554375b6b47459f5019bd130a1' }, "Smoothly summary"), index.h("smoothly-summary", { key: '0c68ec73e784689353c6c532b3ca2b1d410b98ab' }, index.h("p", { key: 'bfb5aa482d17553212b9c85707173aea3f637feb', slot: "summary" }, "Some title"), index.h("p", { key: '1892b2651a47f0ed653d7162644aa32b8f09711d', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'cc74ca77a9554d5c70e5cf42f3128afcb22c03a6', size: "large" }, index.h("p", { key: '6d15505296c1861c2b4862cfa1fc832a9ed8bacb', slot: "summary" }, "Some title"), index.h("p", { key: 'a280d03667de795224971f994bfa73e005b6f6ac', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '4fa2131e8bcb195e7e66afe9cef21d4006cae169', color: "danger", fill: "clear" }, index.h("div", { key: 'ae7c5e9b5c4aa915ae78b1626db62d8b701cde75', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: '622c3667246779558feb3de07abb29dc83afbcd0' }, "Person"), index.h("smoothly-icon", { key: '95ecff619b7ccfa363800791cfcb4e9f7748f5b8', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: 'e8cdfc372f68dbd7d1d04abe20e3744bfec51820', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '6bc59ec419d844418476576813ff65a0d74f73ac', color: "danger", fill: "clear", open: true }, index.h("p", { key: 'c5a748de209024c344bc90def813852871870b5b', slot: "summary" }, "Some other title"), index.h("p", { key: 'a7c767bff5806090c0ea09f32b31ae01df60d8fd', 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: '2543a49bd5e55d2b0a9d9fa4ad258baf0751125f' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: 'f7e3385b40c099a5610b90c6e309b501e43d9bd1', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
+                } })), index.h("div", { key: '5db60a3ef1c609c086605215bf67587018350a2b', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: '5680ba103faabfaf100971b44bd593c78e829d6f', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '5c1744129386116f82e90b461a82b41f1b1a7fa2', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '986d2d8a53fc002aee01448f70959a084712c3a2', overlay: true, size: "small" }))), index.h("fieldset", { key: '3c8217e31e5895740f9ec2db68a5936ece213134' }, index.h("h2", { key: '230544e3d1daf869ffe78018507938ede4cdd25f' }, "Smoothly summary"), index.h("smoothly-summary", { key: '1ef51bf9f6f09efec5ce78320c8c8d887e832536' }, index.h("p", { key: 'bbb4e1c627cc29bcd3dcbf869123cd46fcee7c78', slot: "summary" }, "Some title"), index.h("p", { key: '98c3df7e2be91138ada47962a3d816ef7ca96116', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '0cee5711b5d4982d83a5af38de7b4a9d07f5b681', size: "large" }, index.h("p", { key: '01d3e7770a29191f3435ff71b5b910b1fe971986', slot: "summary" }, "Some title"), index.h("p", { key: '4bf19406510e9754aa6a6e80bf246250d16147b7', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '140ae2b80f6444ae1b0c6f010a986ad44a3ae660', color: "danger", fill: "clear" }, index.h("div", { key: '79d24ee9a8b34a5a1237133cf3b91b57a1939be9', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: 'f356abe390f260e9a42fdda66618326133aa077d' }, "Person"), index.h("smoothly-icon", { key: 'adbc3c65da8c17a682f1f94dff503a2fb8b15f6c', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: 'c9ee2266ff09249a525c04d5f336f7d837b683bf', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '8ceed261dadef7e9e1a36223034838843b193d95', color: "danger", fill: "clear", open: true }, index.h("p", { key: 'f463c38fc03dd5bd1f1888a1112f0ff81d333bbd', slot: "summary" }, "Some other title"), index.h("p", { key: '443efb036132d38db530da20d718f66659a30594', 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: '3e0fe4420b481349bae4af2c0f82b3488be08dc1' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: '2a741a99f86afdb9facdc93c3e39eadc8087910d', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
         ];
     }
 };
@@ -3911,7 +3912,7 @@ const SmoothlyDisplayDemoJson = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '47b2d50e314a8a014996083c7cb374c5f6720d15' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (index.h(index.Host, { key: '67b8c263dfe7d72e1072ba3d630ea74f0a05788a' }, [0, 1, 3, undefined].map(colapseDepth => [
             index.h("div", null, "collapseDepth=", colapseDepth !== null && colapseDepth !== void 0 ? colapseDepth : "undefined"),
             index.h("div", null, index.h("smoothly-display", { type: "json", value: json, collapseDepth: colapseDepth })),
         ])));
@@ -3946,7 +3947,7 @@ const SmoothlyDisplayJson = class {
         this.collapseDepth = undefined;
     }
     render() {
-        return index.h(JsonValue, { key: '2de1ab30b99f654340413c94d770bc83e0dacda0', value: this.value, collapseDepth: this.collapseDepth });
+        return index.h(JsonValue, { key: '4794f1dc5f6a104cc37ef15d6ff54650c2e162e6', value: this.value, collapseDepth: this.collapseDepth });
     }
 };
 SmoothlyDisplayJson.style = SmoothlyDisplayJsonStyle0;
@@ -3980,9 +3981,9 @@ const SmoothlyDisplayJsonObject = class {
     }
     render() {
         const nextCollapseDepth = typeof this.collapseDepth == "number" ? Math.max(this.collapseDepth - 1, 0) : undefined;
-        return (index.h(index.Host, { key: '6f80167fe29f5e9f5cce053aed85f7004b657c10', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '4ca590eedfab5fc6582fc5edc9c4cc1c7c1d6666', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: '58a1e870beb473b7659dc8b5835366719f5e84ce', class: "content" }, Array.isArray(this.value)
+        return (index.h(index.Host, { key: '096aba61e52c82b8fbddfa73b76ad5378898997b', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '23b082be0c70e647b622f876ce92a91aebcdfcd5', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: '851efa46e336cdcd39eb20b08106b37cf3189c53', class: "content" }, Array.isArray(this.value)
             ? this.value.map(v => (index.h("div", { class: "indent" }, index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))
-            : Object.entries(this.value).map(([k, v]) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))), index.h("span", { key: 'a574be7feeee9f2995dcf2a15f03c21252cc4efe' }, this.closeBracket)));
+            : Object.entries(this.value).map(([k, v]) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))), index.h("span", { key: 'ea5f8fbd4f35a2c5a462c66fbb9133f806655e64' }, this.closeBracket)));
     }
 };
 SmoothlyDisplayJsonObject.style = SmoothlyDisplayJsonObjectStyle0;
@@ -3996,7 +3997,7 @@ const SmoothlyDisplayJsonPrimitive = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '715afdf74552ced18f93c08ebc7118e146e34ab3', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return index.h(index.Host, { key: '7fb3f1eae3a5a4e958aff79b218347ad089810cd', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
 };
 SmoothlyDisplayJsonPrimitive.style = SmoothlyDisplayJsonPrimitiveStyle0;
@@ -4010,7 +4011,7 @@ const SmoothlyDisplayJsonRecordKey = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '77c1e22f681a110773bad450f94ee9bb9199054f' }, "\"", this.value, "\"");
+        return index.h(index.Host, { key: 'e7e589428127bdfdc3a226523417e256788003f9' }, "\"", this.value, "\"");
     }
 };
 SmoothlyDisplayJsonRecordKey.style = SmoothlyDisplayJsonRecordKeyStyle0;
@@ -7039,11 +7040,11 @@ const SmoothlyFilter = class {
         this.filters.forEach(update => update(this.criteria));
     }
     render() {
-        return (index.h(index.Host, { key: '3754a76da51207f0083f1c434f8988e0035470f2' }, index.h("slot", { key: 'b80c020ef2cdd6158dafcf348865e41010f6ee33', name: "bar" }), index.h("smoothly-filter-field", { key: '6e0a90aa767fe4691b6d266420596c6c2f741e37', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '62f58d470f598bb433fbdf7ca54fab5d9e52505f', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
+        return (index.h(index.Host, { key: '458866acba458b727749aab418c5d07b009f0886' }, index.h("slot", { key: '6deb9fb89f67c8adc89c88b67762b3200953ed29', name: "bar" }), index.h("smoothly-filter-field", { key: 'f3c3c18a6385b7abfeb82ec2320312f0a13f439e', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '5e7586e48cd66190af3d48ab013c1af4ff006acf', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
                 this.clear();
-            } })), index.h("div", { key: '7fa7844e45a4290ee7fbb1a8aeb7b113d97dbde2', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: '8ada24b23feafab59eb3bea282680adca784c88b', name: "detail" })), index.h("smoothly-icon", { key: '6daf693884fdb02bc84bcf59ddbd07c7613028aa', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
+            } })), index.h("div", { key: '742d3c1ab86806412d5ab95bf19249feffb2cd35', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'e8837329167c794efbcbb255ca9c50def503ef3f', name: "detail" })), index.h("smoothly-icon", { key: '0ebf30bb6797347fa77dec156f48c4b0a9d22e89', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
                 this.expanded = !this.expanded;
-            } }), index.h("div", { key: '32a3e3a7da81f88cdecbc49478234c638b4e80c5', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
+            } }), index.h("div", { key: '31f476a863f44affca3c643529331e769f9658a0', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
     }
 };
 SmoothlyFilter.style = SmoothlyFilterStyle0;
@@ -7066,7 +7067,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: 'c7980e675d10a13d599be6e9117558311b9def83', onKeyDown: (e) => e.key == "Enter" && this.filterFieldEmit() }, index.h("smoothly-input", { key: '1f99654cce7732353df4a32139e8cea7ced6cc21', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => {
+        return (index.h(index.Host, { key: '193bf2818e15324d19c9b775d2fcd621f97993c3', onKeyDown: (e) => e.key == "Enter" && this.filterFieldEmit() }, index.h("smoothly-input", { key: 'af427b9aa62eb3821c4f4c515e91540e4077cca2', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => {
                 e.stopPropagation();
                 this.filterFieldEmit();
             }, onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => {
@@ -7145,7 +7146,7 @@ const SmoothlyFilterInput = class {
             (rest.length == 0 || (!!criteria.criteria && this.findInstanceOf(criteria.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-input", { key: '4187159fd95484dda23ff00224d2804bcee0880b', 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: '962175017c27931cbdcae9599d37682c6cb048fa' })));
+        return (index.h("smoothly-input", { key: '90646ba0c33a81236352bc130c9139d652473b64', name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, this.label, index.h("slot", { key: 'f6ba39d46857fb3ac409c9ae4cc404b0dca9a7bd' })));
     }
 };
 SmoothlyFilterInput.style = SmoothlyFilterInputStyle0;
@@ -7254,7 +7255,7 @@ const SmoothlyFilterSelect = class {
         return result && this.property.split(".").reduceRight((r, e) => property(e, r), result);
     }
     render() {
-        return (index.h("smoothly-input-select", { key: 'ec623ee8b6a2e2fb107efe27039990dd6c53be3f', 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: '95e15be5bdd76d12bd19f2762d319b1ebc8edae9', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '8ea0afb0352974f405895bb6c5514c3835af718c', name: "items" })));
+        return (index.h("smoothly-input-select", { key: '7880e87f45d9227a6663854c8eb427ac39f0bce8', 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: 'b1ec133090f874ce79645ba2e82718d78590282c', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '87022479beb55154bc3006ec2ac564865f37a9c8', name: "items" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -7338,7 +7339,7 @@ const SmoothlyFilterToggle = class {
             (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-icon", { key: 'd67dff0a06d70b061fc695f099dec5f7bccbbecc', fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
+        return (index.h("smoothly-icon", { key: '2fc0a0d6ad73406cacdb79964618ec4a97f7cfdf', fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
     }
 };
 SmoothlyFilterToggle.style = SmoothlyFilterToggleStyle0;
@@ -8345,7 +8346,7 @@ const SmoothlyForm = class {
         await Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue()));
     }
     render() {
-        return (index.h(index.Host, { key: 'a714a5f1c8e96bd23ee415a9c8dd0bd0f156a6db' }, index.h("smoothly-spinner", { key: 'c195d7d61c89b1174bb936bcd1261b42611a711e', overlay: true, hidden: !this.processing }), index.h("form", { key: 'c06e98690dae06168c296372d42112eeba9431e8', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: 'e50f476edd4d34ab5f9144afb2b442e93c9e5e71' }, index.h("slot", { key: 'f5f7f30d2cc396060e8565670cd35d7a936e5bca' })), index.h("div", { key: '2a1bff13bf67f0f67eb203131dd618b0509d8fa9' }, index.h("slot", { key: '5dc14c0e90dcc387d2bbe6e72843c7115596b394', name: "clear" }), index.h("slot", { key: 'd7fd18f6e843641e9617c55816546e3d2c58da5d', name: "edit" }), index.h("slot", { key: '41390402a9589ac817f7cb731186ac31acf34dab', name: "reset" }), index.h("slot", { key: '701654710291b96faccdb8c118dce0d63f9fe0a7', name: "delete" }), index.h("slot", { key: 'e278921143c02005e249312a262e7c455b735b10', name: "submit" })))));
+        return (index.h(index.Host, { key: 'be8232540d49c81973cc26ba550a256e5f9c13f5' }, index.h("smoothly-spinner", { key: '446c5461b8fa595d39bb34d05eddee9de15f2cea', overlay: true, hidden: !this.processing }), index.h("form", { key: '525ac3bf94ef5de8a740132ceded98fbfb6622ae', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: 'e5674d63a13c79c2481da8ad7a0dba01ba6ec75d' }, index.h("slot", { key: '7a822cd902ec76316b47386463582d52b5642d90' })), index.h("div", { key: 'ea251687d52ce2f55bffe395bb3c8fd2798afad7' }, index.h("slot", { key: 'e0559beaf08b07842464347ca12cfce81cd9a108', name: "clear" }), index.h("slot", { key: 'aacce8b25820506f52ea37381546f35e5cc6c09e', name: "edit" }), index.h("slot", { key: '8cca8531c0528a0dfdccd1f1e5df65016b737ade', name: "reset" }), index.h("slot", { key: 'fc02aaf36bbc61e7e8019e8906d2b1882822c22c', name: "delete" }), index.h("slot", { key: '08eff6b2af2e3fdca74407c66f940a5fa774fb9a', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8363,7 +8364,7 @@ const SmoothlyFormDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'be42460c0454e37b28b4201197204ac200671039' }, index.h("div", { key: 'f6f8fa67312b722f0887c670dbfedd734c2b66fe' }, index.h("smoothly-form-demo-all", { key: '33c03542448e64fe3d45b980933aa72497a3ceab' }), index.h("smoothly-form-demo-pet", { key: '55abb6ca722b4f2a7333c0fbcb9d9729d30e467f' }), index.h("smoothly-form-demo-card", { key: '718779385e312a28d11f0c53bc6591c612c78d20' }), index.h("smoothly-form-demo-login", { key: 'ee67dc1e11f039d73fb27c2a116dc99577cab85a' }), index.h("smoothly-form-demo-prices", { key: '8091990c73450acfde6d6a9ad7959192e57e99a1' }), index.h("smoothly-form-demo-typed", { key: 'b80637c1aab9ed4262ea4fd6b37c17a7e314a695' }), index.h("smoothly-form-demo-transparent", { key: '3eb8e8efceba010993a04802316bd71743118043' }), index.h("smoothly-form-demo-date", { key: '379b6ed49a574410ca62a6b00f5a49b50d5f2744' }), index.h("smoothly-form-demo-date-range", { key: 'f00a96281d70c215a3bf409d82710bb5640989bc' }), index.h("smoothly-form-demo-controlled", { key: '5043f9c375917088f1a5808f2a9719529ad87d6e' }))));
+        return (index.h(index.Host, { key: '8e9b91eba4771356a02e26aa874149e9aec1e49e' }, index.h("div", { key: '322a7b8c4053c5307e09aedc034aec3bd58cfa40' }, index.h("smoothly-form-demo-all", { key: '36cff0fce86410559185639407888e064aa7f6f5' }), index.h("smoothly-form-demo-pet", { key: '8ac19a250eae3f03b36b7eefa4bb0b8fcef9bc67' }), index.h("smoothly-form-demo-card", { key: 'e92a4974e434fc122a4d6a9036031c19eb8fbdce' }), index.h("smoothly-form-demo-login", { key: '0551748193b700acbc0ef91afe2e330ac67c1ec6' }), index.h("smoothly-form-demo-prices", { key: '98e1cd3159817b7943b0fcab4b8e455527679aef' }), index.h("smoothly-form-demo-typed", { key: 'ee3a5a705e8295e6f030201876e8e9e6e0b17ce5' }), index.h("smoothly-form-demo-transparent", { key: 'f245050d3f3838922c51ab02a6fc7c51d030be49' }), index.h("smoothly-form-demo-date", { key: 'b9dab7e216a735a7d4a71e63e9dcdcbb261d35b9' }), index.h("smoothly-form-demo-date-range", { key: 'b120defdea28f4d5bfff40991d577e5851231cfb' }), index.h("smoothly-form-demo-controlled", { key: '56a57994209abcea1f1d7058f3a8f068f7396cce' }))));
     }
 };
 SmoothlyFormDemo.style = SmoothlyFormDemoStyle0;
@@ -8373,9 +8374,9 @@ const SmoothlyFormDemoAll = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7fccf5c4d19f7711ad8695609719d5b157dc69e9' }, index.h("h2", { key: '471984566caccd53c58d182275dfb5b3dffd1438' }, "All inputs"), index.h("smoothly-form", { key: 'dcb87409af65d590f88cf7640d03b5077dfc72d3', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
+        return (index.h(index.Host, { key: '67af39df61fd821fcc6a54a443a5c6e3b2164312' }, index.h("h2", { key: '41bc4cf60ccab146f4df13a653e1e1c8c5295b8a' }, "All inputs"), index.h("smoothly-form", { key: 'e38705cbf7dd1499abea94ebf5a8b5b0c8b075f1', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
                 Object.entries(e.detail.value).forEach(([key, value]) => console.log(key, value));
-            } }, index.h("smoothly-input", { key: '7b2eb3e92db01f5660b4b1d0970422d6d691e4fa', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: 'ef5c01e448520b65ac53e56b3d4c6e7ef745b3a1', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: 'dcc2400d3294a5b385aef83d4f0a32a1d4d1529c', size: "icon", slot: "end" })), index.h("smoothly-input", { key: 'cba3faa8f44afeea1629d487b04f20dacdc6cb90', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '50e02e1848a36610730a3d223f50f2f4f964ceef', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '67aa7d31153efef7171699042b7f00f68158c54a', clearable: true, name: "radioFirstInput" }, index.h("label", { key: 'fd000369571ab966a68c3117cc726206df75cfca', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'efc4d00f271c2e10430d47355e980b5dc671b57a', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '81d02a9e3edbc853a543961d3555e7788a035e88', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'd350df35f50334a916f5b36a50328aeeb8698638', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: 'b4171d328700fd038aed7efbb85d2f0681273c57', name: "color" }, "Color"), index.h("smoothly-input-select", { key: 'b881d8d697b1377f853e10178cfa78f1dcefb6d7', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'ff88234efe48a82289768560fe221b5abc39cda2', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '34520421f0686499af2e6156cec38cb6f1e21ef6', value: "1" }, "January"), index.h("smoothly-item", { key: '00e90515a47310445f602cb5e1e4b6a374db0e32', value: "2" }, "February"), index.h("smoothly-item", { key: 'e69d38d192b73b7d457a85615a0bb5bee94c4261', value: "3" }, "March"), index.h("smoothly-item", { key: '1497a5e25bde1f74c911583b7f58b24311e27138', value: "4" }, "April"), index.h("smoothly-item", { key: '4347375e8beb1860cefc00bd78317fd8583bffb6', value: "5" }, "May"), index.h("smoothly-item", { key: '3f64fc5a5f42a229dd253bfd43ad48b97cb81b82', value: "6" }, "June"), index.h("smoothly-item", { key: '85ce0c6a21ef858de66f47b134d414177ecd0c9a', value: "7" }, "July"), index.h("smoothly-item", { key: '15ccbd4fbdd620730a42676a52ef58a29733efbb', value: "8" }, "August"), index.h("smoothly-item", { key: 'ad328c7576a564161195f4b0cdd15ee5954eb5c5', value: "9" }, "September"), index.h("smoothly-item", { key: 'b0b7f64cac0dfa22fdb095251d76bb1b5204d9d2', value: "10" }, "October"), index.h("smoothly-item", { key: '87d34b68e8bce002511f6c595c3ff92213864c7e', value: "11" }, "November"), index.h("smoothly-item", { key: '088b3958b79b2e11d7ccb38801f4035588fe0c75', value: "12" }, "December")), index.h("smoothly-input-select", { key: '08a93ddcd78c24a78229d3051b6dc57e51f78e70', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '489658e084984b9448f9510c14fe9a579da1e137', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'cb46300bf7a30990fad586ad8a2d8abd7033d788', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'c1e2ef0638f5903f3ef66b204fa803b98b8508a4', value: "camera" }, index.h("smoothly-icon", { key: 'e38b9c538e0fd4212339d687bad504990e6bd11f', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '1dd4abf768ad0246df81dba6e0c5acf7cd3b1d1e', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: 'ce4d3045d4892a3ee68d45f4a19a57345fa6e9cd', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: '7a21fbdde34216df183e6fd6390929cea8c75f50', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '557a9becbbed3e015f7f20ad6492a37adf3951c9', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: 'a9ccc931ea4e9391eee5067f3adaf2d934c9b314', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: 'c5bec1fe07df3b52b16e38da867b44c2c5eede6b', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: '103bf173600b31844c66d5b883f7ce0c75cdf9f7', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '0c6b9f0b3843db0daab0552b399c9bcacb8c076b', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '3a02005b1bcd05d7a30624bed434cf87dd8f8b65', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: 'eb67afc68313ac9a66c6d74ef889bea4c9bdc065', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: 'a49cef10434601d6a588728cf3e3ea1b94a6d75f', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: 'f3139d6f626847a53b1e9b90e655b4373d583b43', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '1fb7c379dfca4c4f3fc313719a7045d4c5c08b19', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '730188c73cb15755a43913e10e836fff25be6c37', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '4442a854ab7a7f5c562e711b31ba29d016846cec', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: '7d3ea9ec4372af8948411500afcc8755430f546b', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'a2a4eb127a5da6d1c6885ac3007666517cbdf554', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '8a67c4cbbd10a97db5d57ef67b5b8e6e31fe9620', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+            } }, index.h("smoothly-input", { key: '5518748d36147476f882b0efa6c58bdb7ea7f1c2', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '7c4c56fa2cff6b88edb696abd18317f8b6b22abf', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '47485ed9b6bd63adb11c359444dd609d2573dfd5', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '2e08d6562542ccfd8c4b3cefc94eb61ea9310ec8', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '5e52a23a365f1ef0a0e9c14af6dbc845ff3ec64f', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '8de780d57f2d0410fe4ef70aea36280b2fab879a', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '4bf45b92c59f829cb9020797a6b2447726bb863b', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '48a6ce9c20b91c92ea4b6d5fda0fe2edb8e84338', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '69bb874f031c4dce9120fdcdbe30d1185a8533b9', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '2665d5cd7970d76361b3a9c564a281300ec5b60e', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '9604b6394bf35d765d83b11ee91beddd65ea0524', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '18fe512715d01003b35bc83cfc2e2ca8d9a6c7fb', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '30aeb799af801a17fdb0f4ad6cf2135a159eeee2', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '10f4ab84cdca7246b3f8382e094d6a5634071a1f', value: "1" }, "January"), index.h("smoothly-item", { key: '09bf1376088a3a61952601c96fb03e8ac6cdb7e7', value: "2" }, "February"), index.h("smoothly-item", { key: '62b13312de45b2233806e83b95fb148f7b6fbd87', value: "3" }, "March"), index.h("smoothly-item", { key: 'e98dfc613311e12057914b6455047cec9a0e2fd9', value: "4" }, "April"), index.h("smoothly-item", { key: '95a6ba970ad28e98a9424d92ad3f4374d9956fb0', value: "5" }, "May"), index.h("smoothly-item", { key: 'ffc61f7a970ad99cb1dad5c207a507f5fd13664b', value: "6" }, "June"), index.h("smoothly-item", { key: 'bfa799697ed8f87df3ea1712abeeb07ddc1ff2b2', value: "7" }, "July"), index.h("smoothly-item", { key: 'b8d824f7c4aa012bf9fa53dfe92309b8c89d7d73', value: "8" }, "August"), index.h("smoothly-item", { key: '78900640ecb2991bb8b6162db0b9ccd0bccd6749', value: "9" }, "September"), index.h("smoothly-item", { key: 'ed9e4d7432bab4589ca43d4f8321bae85440fbe2', value: "10" }, "October"), index.h("smoothly-item", { key: 'f4144b148fdb72bbd0777b2cbe1cd77782103977', value: "11" }, "November"), index.h("smoothly-item", { key: '28a2ad2a0a832de5d12938ca2fee4e8c70fa7567', value: "12" }, "December")), index.h("smoothly-input-select", { key: '4b1991cb5caa2cb8439833708ce4189c510786aa', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'b6ffdaf3b8fa957bafd088499c8071393bdcf12a', value: "folder", selected: true }, index.h("smoothly-icon", { key: '0fdcb71a98477d46c586a58185f4cc51301eb7a9', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '137cba1989502f23f36add371d146bc4807ca6b6', value: "camera" }, index.h("smoothly-icon", { key: 'dad7cad3a4ce91dd7db6ab5a0140b1f318edc29c', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '54649f418c20c3e13f557621db4996bda931b560', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '988c540d19b1bd3a3fd87757c24212d1920a2f46', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: 'ae1f17c4c1fd061ca0cf760b1ac56e629b771dc5', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '963d1e2e0f1687a028d2e68e6b3f0adab6001632', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: '47bb54e03b5d0f8d946efc85c1d0e446b47e4bf4', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: '01d8d11e59ef4bdb3217bfbba9ba3c0e1f7aaaa7', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: '40a58105cec6048e50f680c43da13be4ad8e4dbc', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: 'ce735808de29f6956dc08ad7e4a08378808a4f86', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '0d64035c29d1125393d38ee6ed572e01b08e16e1', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '70f3f6fea6f26285f514cab4c125f32ebfc9c5a0', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: 'e2d6d8590c5183c7e74bd1249506d30a0a1da050', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: 'b259b5f3ccbb9c3d3d9e997dce02625b006763dc', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '914704342157221f13dc42cb4c677e0b5c3089dd', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '4a49a4069781e14f81266c2a0934d9768c130d90', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '38036942c8604826e55cd0c0f8aabaa299b5578f', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: '25de107d30973c77139269f8fd5a3ced5644432a', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '5ea44f1660ea1bc45255c844329bee70cb97d2aa', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '234c912a802cb9eaef6798d52b7bff115069cd16', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
 
@@ -8384,7 +8385,7 @@ const SmoothlyFormDemoCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f41d3996d386b484cdcc491f9073392dbd8c4901' }, index.h("h2", { key: 'c1972ad42a1ca14daea085d1ddcc4e3457487306' }, "Card"), index.h("smoothly-form", { key: '2cb36ce0c468e19f26b791d64460018081e3b9dc', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: 'c389c92d82a609ba046c58b175fbc4557abff1ac', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: 'e545832ece3f6fd0e9fe609ba256d8aa9945855f', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: 'cfc1566569bd53868d9e09e5f7dc422e36734d14', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: 'ee6049372fc859a05ded9328594f083cea37ce57', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '11da0772ff937336788e0a00b61528cbb97df4f5', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '4c9f8d7125f84d2f5f6405814d0dd78c51e94c79', type: "text", name: "name.last" }, "Last Name"))));
+        return (index.h(index.Host, { key: '39e1ef97b159655f49b2bbf853138f5f389ae33f' }, index.h("h2", { key: 'dfe73b926cc44b9405a9c2f74c8a2baa90c77a91' }, "Card"), index.h("smoothly-form", { key: '7786e52f0f93cccf65c15e23ffb100cdec0791a6', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: 'df9dec1857b773b8cb9c9138272fa635881dd9ac', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: 'ba763b31994226ceb8c14a648e02ac7f3886ed71', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: 'fbd0066000aa84701443dd83fbcb133b9a291408', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '496ba4fd146005cfe1e5bb7401e852ebfbfd1ec9', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '8685b1e15a7b98c073d85c21aa598b2860a995ad', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '071245e4d5661dd145f9aaac3b627871df9a5f42', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
 
@@ -8420,7 +8421,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '1fd4d2fa478bf809dfe9bb3b9d72443b4f934221' }, index.h("h2", { key: '4f74d9500d2c7b180ba8c195c291db0ff3db5a2d' }, "Controlled"), index.h("smoothly-form", { key: '4777ff01eb0d0e3279be2f248171868c8df67efa', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '158abc4c211a02f7cbdc01cc2a247beba27cb5cc', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '8239412efd0e36ebfb2211de5479d1290f393887', name: "currency" }, index.h("span", { key: '35cb2e8e9b5757afc6d7401b506715d1d4268e51', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '8edc0dcbe2a7c523f97aca8a58fef2d0e8eaf823' }, "Dummy"), index.h("smoothly-input-month", { key: '4c53b1878604534aba4c32dfb6c614c53deff9b8', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: 'd6d865bb7e650b0fdb0b1967ff1ddfc096c8487e', slot: "year-label" }, "Year"), index.h("span", { key: '23ce8c55b7b64d677fbec3bad34b6649ae3108e4', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '9dd2e66bd9b2f022243aa0eb7e608f847fa168da', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: 'f4e9762d6ce565c4f715ccda1f372ea9a27fe39f', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: 'd40b10936e26d6295acfde5458bdc67cec444625', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: '6d76703cc5295f6b1df247f15a827d8003f6a436' }, index.h("h2", { key: '70a3df9f04aac4162fda7133ece789c62d5f4e1b' }, "Controlled"), index.h("smoothly-form", { key: 'ab5d59e015bb649a6374455fa7ce0fb61d13b771', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: 'b79d4cd04331cfaa3b1b4c79d9a69b1e8a4ca9a2', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: 'de230fa9e41ea41e4fc0a775472443262280667b', name: "currency" }, index.h("span", { key: '9f0c4bc4ebcfebc7be0db47c8917f9974e2b27d1', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '2fb95bb3e623d2b133968d7819727228d1bb4104' }, "Dummy"), index.h("smoothly-input-month", { key: '3398acf31a92edfa8b340cb47204cdf94c610d3a', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '8afa33e32a1072d767d9fdc7eafc02926791e1d0', slot: "year-label" }, "Year"), index.h("span", { key: '148a9035bb55e385cb762838a7af04ff6e1e9577', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '50f0a6d1a810155b11656b578d92558c26b49509', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: '1d0946fe1eedc8d81efcaacb0272034b7539071f', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: '9cf09cedfb0369e5e597d9776ef8b2ce6b36da18', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8451,7 +8452,7 @@ const SmoothlyFormDemoDate = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '0e9ebcf1bfe2e51739108325f6aeaae38fb21872' }, index.h("h2", { key: 'ff8c62400072ad8d57f16feeeaa0bcd1bc92eabf' }, "Date input"), index.h("smoothly-form", { key: '145c55f92f0c17a206ba5b7023f4d5ba3c456976', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: 'f2d23dbd7948caa0cbcec370a6480c50db3c4960', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: '6841b540a936eac12e1c73ecbfceaa152af1c519', slot: "submit" }, index.h("smoothly-icon", { key: '3c6c67b2a6b613979245be8f6ef421daad7b16df', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: 'c756ecd2158fcea20c5492fee29e06ae8eff5d77' }, index.h("h2", { key: '25aa4d7a8bc6a47adae135515ce9441074971ea4' }, "Date input"), index.h("smoothly-form", { key: 'bf965cf2ad3d3288fef0f8c393b6fd3c2775dad2', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: 'c1cbf84459eb2b330d8398277a3b101bcffe5a59', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: '01557b861392e3e3d1d88525bde50007567c20e3', slot: "submit" }, index.h("smoothly-icon", { key: 'f77aacee0b4f0e1fcb158152c317897641ec493b', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDate.style = SmoothlyFormDemoDateStyle0;
@@ -8480,7 +8481,7 @@ const SmoothlyFormDemoDateRange = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '6ba08563a69716f7eb21cd040b61d1f21842fcef' }, index.h("h2", { key: 'dbbf147ae323715a44549b10739788649af3138f' }, "Date-range input"), index.h("smoothly-form", { key: '81ea96a97ecb6a85ad9ee53ab097de2d0712f2b6', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: 'fd77d4da2eff6ca3257eadb5f452dafc389feeca', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '0f7d811917d7b63466bf43ea0cf29363737eee6a', slot: "submit" }, index.h("smoothly-icon", { key: 'f576ccc6552d70a503874506780fba434325dba8', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: 'f5c929abd5dd00cbe86c0b319183b7f4e727d0dd' }, index.h("h2", { key: '0dcdeb8de570b990982a5565bda70a8a985798d6' }, "Date-range input"), index.h("smoothly-form", { key: '02bb8112b2be39fc8c1ca60dd3955ce4d775a5f6', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: 'e97c601501e4a9c7f24c45b447eb569a6bc03d3b', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '8c3eb4f6f16a8c86cb5be1f655ec03e192165c5a', slot: "submit" }, index.h("smoothly-icon", { key: '476f32c1c6d0c0d114db263c07be66ce03a15f25', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDateRange.style = SmoothlyFormDemoDateRangeStyle0;
@@ -8490,7 +8491,7 @@ const SmoothlyFormDemoLogin = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '121f2b09b6e49c96510f286a942f1214c3d6c3ba' }, index.h("h2", { key: 'f1dd7c6d1922db4b3fc4e2715ebc19556cfa0e36' }, "Login"), index.h("smoothly-form", { key: '3cd991716a14bc5fb5a1c6d0da70b0516815473c', looks: "border" }, index.h("smoothly-input", { key: '83ac9a528f40a78654daaa9a293c4466bcec32c4', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '0a5aea9376c0930a5615cf841834516bab4608c9', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: '1a2bb6ec0310f0f3fe6c5f4016cafe6135c3b56c', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'f9f7f4ce8e05477c8e6021039b0d3e036c08bf12', slot: "submit" }))));
+        return (index.h(index.Host, { key: '168c7e940237622031da85f5c5cb62bae9f922b4' }, index.h("h2", { key: 'a064669065587d7cfc90d760a6dbdf8e3afc13a9' }, "Login"), index.h("smoothly-form", { key: '41459587d19b629e8ebe3db68d38f55f9b985af5', looks: "border" }, index.h("smoothly-input", { key: 'a4cb3e71cc8a681fc38f7cefc4dabb2e886195b8', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '4e24ea60c29a1b5fbfa0826a7d6715c686bf7a47', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: 'b0480797e4813927d8cae0e8feb0f119d25c7d55', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'e3ae66fdedc1dfd824ccc493fd30acacf24426c2', slot: "submit" }))));
     }
 };
 
@@ -8506,10 +8507,10 @@ const SmoothlyFormDemoPet = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '25f0e28fea574ff23698b4a80b778f4adef770d7' }, index.h("h2", { key: 'c19bd386fed8547d82e6accfd02434dc15cc3480' }, "Pet"), index.h("h3", { key: '3d2271d0f1d437c2b1814c1a77901f5c7448f031' }, "Value"), index.h("smoothly-form", { key: '65fd9e5c17fb35abae93bf6c8a13fa7eb4358fa3', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: '14e5218263e557ea0a7e08fd3c7d0e75d3960d3a', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: 'b4f1def54df11b5a7604ed25ed166fafdf6bf1c1', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: '1d9cf11f390155b57ea50a90bb480a9f9422eda5', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '0d46b4fc910a34c115642a2195c080b0d85d12d9' }, index.h("h2", { key: 'f77c27ceb6a0f0b5ef9412a1548369ed0aad9e9d' }, "Pet"), index.h("h3", { key: 'a99b84f9e362139384843470336a2326c547a29f' }, "Value"), index.h("smoothly-form", { key: '1ae24028e67d24b04b7b19f151c15a2243974760', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: 'e7ff263bbb2d74448269560238e89322f2c16c46', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: 'f0339aa7f5996f3f6b35fd5221a816fe94ce3c95', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: '05ced4a04c316d3646b0cc2384b3d5abf045f9e5', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: '2db53f04c4783682a175c248e78a743352f2d884' }, index.h("smoothly-input", { key: 'c0349d628ce5ae47157259663e1c0f133d936ce0', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name"), index.h("smoothly-input", { key: '74f117b7b6e8a8c5a0f32baa90d77e522e8432e9', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index.h("smoothly-input-file", { key: 'a086c62c678687596e53752100d7e9e47d9fec65', name: "owner.picture" }, index.h("span", { key: 'e23d1e31b0216bfeb3abce270889e3db283725bf', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: '7a1da5ee1e5eb91e6e67fcf6f3aa978262f827eb', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday"), index.h("smoothly-input-date-range", { key: '5a079fe255e7d48352e08f31a29638981aacd2d6', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange"), index.h("smoothly-input-range", { key: '6055dc522ddb020f74dfb2bc3a2ffab009ca4d1c', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height"), index.h("smoothly-input-select", { key: '2adbe6bae62b0f9c0ee3c829c4123fda8aed4319', name: "owner.favoriteHat" }, index.h("span", { key: '901774a34e11bc9e6b31702b031663f3edbfcb68', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1, selected: this.owner.favoriteHat == value }, value)))), index.h("smoothly-input-color", { key: '8083565c9dbc962a5bfc9383dabb0cf677044a25', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color"), index.h("smoothly-input-radio", { key: '5829f3a37b7b786212fe0e3ff5f4fc37c097ee69', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index.h("span", { key: '433d1bc7230de1e3ec08db94a56db35a67386dcf', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '0c1a58b9764c419a3dba1bf9d1e69f325bf34088', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index.h("smoothly-summary", { key: 'ee58c10dbdfd98beda622a8b6e4bb96958cfc3ef' }, index.h("span", { key: '61729887692798a6d7c223ac5bb81cb19e1c3f68', slot: "summary" }, "Summary"), index.h("div", { key: 'a57a455ef226ef72d091a4b97874ecc4a38608bb', slot: "content" }, index.h("smoothly-input", { key: 'c5dfb6e6d4b87500ea29b7b2e44ddbdcf2c836b2', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: '188ade417c7e57be4eb20c2aa82ac6afca294397', name: "summary.picture" }, index.h("span", { key: '9e44ccca1cd29434aee0bdb50f85de1d010bd40c', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: 'b70839b02c0cb1c2f26a7b63efac9675de096b7c', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: '164bc527fe0e5f0f173f14d6742e93e8416b6937', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: '3660eceee6e5fd1811e1e3978ddd984a9141ea14', name: "summary.height" }, "Height"), index.h("smoothly-input-select", { key: '0495922c735c863805edd589c3cf5c34939eebef', name: "summary.favoriteHat" }, index.h("span", { key: 'ac7bca6854d1f48df60ccc50879ffaa5b52eb6f2', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-month", { key: 'c03c81c26238580e88a5790c7f87402caab6bae9', name: "summary.month" }, "Summary Month"), index.h("smoothly-input-color", { key: 'eb3247f2fcadc0a9084b5ad6b6672a8fc7ffc8cf', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: 'f9c78cfd9b2986af54a96bde31b78f8c87d5c7ad', name: "summary.favoritePizza" }, index.h("span", { key: '67941d134cc3e312d76e3b6efca2894322e8240b', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '8836e89cb394a0d38f595992db7df82a8010ac5b', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: 'c2e5f3114069547c64bc44a408b9586a9ff8e287' }, index.h("smoothly-tab", { key: 'eba8e9edd0cb561babc873b9dfa3cc89f4fa66ac', label: "Dog" }, index.h("smoothly-input", { key: 'a96f9cc655f719363c31477ffd713fc8f857a597', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: 'd987b511f67ddbeadaf8f79847e22368d371f91c', name: "dog.picture" }, index.h("span", { key: 'c3fd42cfd1c8bcddafa8f7ac5d6f556f02eeb510', slot: "label" }, "Dog picture")), index.h("smoothly-input-date", { key: '0f41d07589abfce67ade5743791b0b9482d3858b', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: '9b1968bac680b5d02a37674c2d95aedff07e2c44', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: 'b23b84e1d4c9cd8317e9f87f69f2a593791a04cc', name: "dog.favoriteHat" }, index.h("span", { key: '0620298258955584e728914a0f739e85df0c249c', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-color", { key: 'cd7910bae7f5cdb29ca2b3cf050b1d1c67d826c1', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: '700fea8be049fa8cd6ec58deb709fab0962505ad', name: "dog.favoritePizza" }, index.h("span", { key: 'fea88bd6af68a913402f498e41fd22256f2f001b', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '8afa50869642b41a50aa541d6943894de554ccab', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: '82505611d4c0eccdef752362c2ba76ab9b1a67f0', label: "Cat", open: true }, index.h("smoothly-input", { key: 'a44183fd177d84950fdf674484be41c3e9faec36', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: '59873065ed8742f0f731d9f1db458d6dc8877f9e', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: '9134688c2d2a993637bd525d23450158e021d4a0', type: "json", value: this.value })));
+            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: 'b3a1d4ac7f09be24f900589e571ee7108ab2314b' }, index.h("smoothly-input", { key: 'ba4db6589d95388ec7b80d26da3c0aa83e7ea9a4', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name"), index.h("smoothly-input", { key: '1b0f54ffe75008cddbb3f5ab50e21d870e50ef85', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index.h("smoothly-input-file", { key: '8a1fc8138991495b929d889f4611a9ce8f2b346f', name: "owner.picture" }, index.h("span", { key: 'c6a303649887edc21d380b83492c2c582a77cc4b', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: 'b62c24f139c6d6fc180279bf5b8931bbbd95bf17', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday"), index.h("smoothly-input-date-range", { key: 'db1b023fd04b7e31c76ba6758da4e95a8aa25aba', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange"), index.h("smoothly-input-range", { key: '52ae80072f773a1e206aa3ce1c6309deca100358', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height"), index.h("smoothly-input-select", { key: 'e7ea0e534410bbeae598c7d10233502dc8cedbd7', name: "owner.favoriteHat" }, index.h("span", { key: '4a9a4f4ee5cbdff8831d67d9cb9756e8f8e40280', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1, selected: this.owner.favoriteHat == value }, value)))), index.h("smoothly-input-color", { key: '7eca92de76ba58e01e19e72724bb6590f5877053', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color"), index.h("smoothly-input-radio", { key: '1a28d57241c03c0b336e8da0954ddbb74abf2711', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index.h("span", { key: 'd9c9546113277fc7ceadb5a9c0d8fecfaf539e7e', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '4b9fb14871adc6980b46c6691811ab6486c2de1a', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index.h("smoothly-summary", { key: 'd211b98678b582de9a0eda75d09414d45f7fe18a' }, index.h("span", { key: '507f145237f4e21fee6271a219a75ce715031f55', slot: "summary" }, "Summary"), index.h("div", { key: 'ba54ac66f240970a68dd97b2558376b89889a9ad', slot: "content" }, index.h("smoothly-input", { key: '160d583fd5a7dc638f55ff635d954bf70dd9fd4e', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: '7516228ed852285d3cefff8755bbe1b4819e3939', name: "summary.picture" }, index.h("span", { key: 'e55b87442834ee63de349f221015f49c34c53135', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: 'e739dbd4f0c39fa7da0f2154e9f39ecc1cf26015', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: 'a73b4184da7911dd72b7db605f9f3530f6002960', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: '3c7d677e88b90879913871c0c97b77c713e6383e', name: "summary.height" }, "Height"), index.h("smoothly-input-select", { key: '43760e5d2bdcd94020f695ab49d2b08a6a45b424', name: "summary.favoriteHat" }, index.h("span", { key: 'de302f7837e6d7aed5c20fdf83197e93eeecb50a', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-month", { key: '1bd6eb2f38716814964f8155a35c21e5feefeb39', name: "summary.month" }, "Summary Month"), index.h("smoothly-input-color", { key: '05e13310f32251d447e0a1944cb6a67ec86d77df', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: '3b62f895f6c239406111a67a00c8f262f3a2322a', name: "summary.favoritePizza" }, index.h("span", { key: '717fcb239ad3e88060e0c4ccf6b690bf51680008', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '806a0f525016e524e24d11bfc212beae65c39987', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: '4fc35bd7008f114af74650bf86e2082a2a444cd8' }, index.h("smoothly-tab", { key: 'f8c318c6504fbf15c40f981a35d73b3c9dd7a5fa', label: "Dog" }, index.h("smoothly-input", { key: 'b0d513a1c38b2e5d80ef883a86164e3621f53a04', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: '3121318836e9062c386a9582436a01fc2605b0f7', name: "dog.picture" }, index.h("span", { key: '6a9919683534dc1faa55f5277e987dcf0f69b7e6', slot: "label" }, "Dog picture")), index.h("smoothly-input-date", { key: 'bb0c0595f20c7371cf7515430e34afff7052f7b5', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: 'ae866769212a7236c41d0152febcae48547f2061', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: 'dc65fc8f3d086245779db5df9399e80354f14710', name: "dog.favoriteHat" }, index.h("span", { key: 'dc7a23db7140be0289a1b3183a36eb8a3b868789', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-color", { key: '0a1a326345ba84c8c58bda73beb49a1e80301fed', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: 'ca1254f3ca0137436e6f0275caa8664653a337e0', name: "dog.favoritePizza" }, index.h("span", { key: '6cbeba3ccb0213e78ef7b58198f9bf03db332d59', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '918eb8492a907b1edaa8899f893e54d27e99b48b', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: '07919402255ac3e56bc1b144f235bdbb2e5096ea', label: "Cat", open: true }, index.h("smoothly-input", { key: '6d1a2da7d9e4dfab0b099ba19831e881fc2022e8', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: '777ab4006d8860edad56569fd20c35effe34d8cc', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: '5b25a5af2f22296c1aea22d939b790b11333effe', type: "json", value: this.value })));
     }
 };
 SmoothlyFormDemoPet.style = SmoothlyFormDemoPetStyle0;
@@ -8519,7 +8520,7 @@ const SmoothlyFormDemoPrices = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '9d7de2edf91d84fd944b0787aaae43abf274ac49' }, index.h("h2", { key: '643d7d413bbe2dfd46e26fe227527e6c089c5cc6' }, "Prices"), index.h("smoothly-form", { key: '8208d0a84ce3af46be9b9eb93652b3664ee643c8', looks: "line" }, index.h("smoothly-input", { key: 'e68ccdf92d114eebb5354f58254fc7e934dd8018', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: 'e4def726dbfe3e26c9292359f684eaad919fbf9c', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: 'd8519a00bf2f6f73cad691e7f5b1ef1bc465cadf', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: 'bcc8cc63fbe4b674327e8216b65ae8861a70b1ca', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '4c25cadee15865ebac7e336685c97f354a16c142', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '7928b1a081003be0858728f5bca227e040fecff2', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '4bcd0d6eeb77f290dbeb16a29dded1481ff53bdc', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: 'e25fc293f0e6f0213b042e0be23453874296f12d', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'b67ab2fc3e4e830ec8ca1c5dfccc79cbe39b32dd', slot: "submit" }))));
+        return (index.h(index.Host, { key: 'cb1c1170c5ea86dfb77cc541a91afaa2105b84fc' }, index.h("h2", { key: 'fe67701a1ab85c13af8bc20c42db0616c10eb1b0' }, "Prices"), index.h("smoothly-form", { key: '798e69ab2868c05da2b72c14dfd7ee9ea7280b12', looks: "line" }, index.h("smoothly-input", { key: '3cd2f353851f307c1fc66b5675521b00d73509c9', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '7b419ec1effb71097a53821d430b3a38e409c6ad', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: '0e02bea4915a6d413c0cb62f402e60d63be3f96f', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: 'ac1a48155221cc5479e6819cb2fcf394113ceb2c', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: 'bd771fbc43aee1643ccd6cbb5c2954f5c0ff07b2', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: 'd2413f2219ba690f6bbfacc2af397f7e59023f3c', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: 'fc01541f9e2102b62f34f658dea790530cbe8329', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: 'e9f6164af7d75f84ca94584c7d39b45d0a0dafaa', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '76f3d9056029bb0ec13c58903c194d9a4df1af23', slot: "submit" }))));
     }
 };
 
@@ -8528,7 +8529,7 @@ const SmoothlyFormDemoTransparent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '3057e6de398fb81a09bd3ff18360757c49be174d' }, index.h("h2", { key: 'ba825799f731267b7d1a63204c8029eec352193a' }, "Transparent"), index.h("smoothly-form", { key: 'ce7702a1b692775140b1da4a851f6e13b1f0ab89', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '66881e03dbd519d2da6f545390b95a2e6e229431', name: "file" }, index.h("span", { key: '07efd0cdb02069e1cdcf5e4a7178e4fea63c06ef', slot: "label" }, "File"), index.h("smoothly-icon", { key: '3ee2a5ad8c690834531c05d350702a377078dabf', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: 'aa075e902817e6fc201762e04ee1031b09203ec0', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: 'b35fb059e3c7c9f08938a20add99851d182f86ba' }, "Date"), index.h("smoothly-input-date-range", { key: '3faed295eba7db68bd888d7b3575da31888ad215' }, "Date Range"), index.h("smoothly-input-select", { key: '51e7fbd5abac7351c35cbf3136fa2a15c0a96d43', name: "transport" }, index.h("smoothly-item", { key: '16eaf9bd791575e5b739ee7cba1e16310f3812f0', value: "plane" }, index.h("smoothly-icon", { key: '1b5ed0735cb7d0ba33eb71cd854cb0806c85657e', name: "airplane-outline" })), index.h("smoothly-item", { key: '3750f39f61f1ee7f336ffdf7229279eedfeef7c0', value: "car" }, index.h("smoothly-icon", { key: '5fd4d60477fe34c4eb7fe275ab35c8324983894a', name: "car-outline" })), index.h("smoothly-item", { key: 'bdbecfc510225deeed8257a6a182e71167084451', value: "bus", selected: true }, index.h("smoothly-icon", { key: '6a6e62e2e82d64f6216ea17df4cbbb138888a63d', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '3e26a9e7ff465a770c9390b87284d878f04ad737', icon: "checkbox-outline" }))));
+        return (index.h(index.Host, { key: '2a3c829987f29e2742b2f97c40d1d457a5662593' }, index.h("h2", { key: '0398f1f6160457523b7cc6bb961b379c4bd72de2' }, "Transparent"), index.h("smoothly-form", { key: '6fdbb834ec4d2b5164caeda9844c00dd89fe8961', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: 'aa18ec0bca6ad6690f977c90dc0ea2f9f7694584', name: "file" }, index.h("span", { key: 'e3e12dab1d7fc728dc832a92891f4e01b8815731', slot: "label" }, "File"), index.h("smoothly-icon", { key: '9d722201acd8387998abd749f97d6687a6d4a582', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: 'e7c8fd001cd2bafcdd278d68b94facff5c4657da', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '58fe64d7d6b86462941ca3e0f9809665b8710ef7' }, "Date"), index.h("smoothly-input-date-range", { key: '07f79ef4b0a59b274e5b1fe29b422f2f75df1776' }, "Date Range"), index.h("smoothly-input-select", { key: '7bcd6ef09acb71a337ac4d38da8c130ec7cca2e1', name: "transport" }, index.h("smoothly-item", { key: '3676bb01a25a231986547562168c627740fe3a57', value: "plane" }, index.h("smoothly-icon", { key: '440d469dac65923bd6940d2f6496f8cbeaee1a34', name: "airplane-outline" })), index.h("smoothly-item", { key: '4a048c4568942f155ec75c07e402206604ad1eb7', value: "car" }, index.h("smoothly-icon", { key: '155c562d80fa4115b47517d95e88b9d867bcc132', name: "car-outline" })), index.h("smoothly-item", { key: '2cfdbd43faf98fe1a96455e2ac4e7437069b4fa1', value: "bus", selected: true }, index.h("smoothly-icon", { key: '3efe583b4ec8500cd4270039cccfe495c31b84f1', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: 'c3350f6ad21a636e9b79f04ba1d419ac4c7720da', icon: "checkbox-outline" }))));
     }
 };
 
@@ -8550,7 +8551,7 @@ const SmoothlyFormDemoTyped = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '863d42c367fa028fa1300469261155b3656317f0' }, index.h("h2", { key: 'c09c96c4d46e4ae793da5590177ee27a83a47344' }, "Typed Contact"), index.h("smoothly-form", { key: 'a573e17c47c9caa1edfffb45db48d5562994e9d7', validator: Contact.type }, index.h("smoothly-input", { key: 'af05cca00bc6b389964cb6421b6eea0c98f2777e', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '5b41c244e61776ce742beae0303ad32e9a400559', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '6731f9d7aa683d0cc21b10e25af363e44e5d28d1', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '76891da3232bb6220866a3c2a5532447133d52e5', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: 'b5685795e011d37898da248d444c423fb3d79601', name: "country" }, index.h("span", { key: '73a337495ffd988b65a989bf30fd9304e5262ccb', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '7cebeadd1bce4ba9c21d303a4316b01f4c426ad6', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: '9f4ebc3c27050ac587b077d4bfb6ff0674ccf852', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'a53d0147626193ab5d907b9212a86d2ee9d3524a', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: 'c36986840edf41c6d2d85faea312ec1e6daa067d' }, index.h("h2", { key: 'ed664931573e0897f527e6513dc5e882e3bb63f5' }, "Typed Contact"), index.h("smoothly-form", { key: '37f8b0cefc578efed3de873e2dffc5edb388cee8', validator: Contact.type }, index.h("smoothly-input", { key: '651ac5c0e1e39548ead31e5ac104afda01c7ec65', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '685ef1e7b14ab5d26c1663832f4f695e5d000047', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: 'b2ac420d440c286498bddd275ac2f66228f16d07', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '310185b6677ebb761a81eb2f96fd1b5b2aa605f1', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: 'b1292c78e537a0470392717463e72f5263a9fcdb', name: "country" }, index.h("span", { key: '5e7543f35219050cf2278c1675e239360bb02cb2', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '90a7bf1deb04d2a5b3069120c8f739c2e3ff353c', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: 'a4def9e7f5490c60a551615648f0150c662542b7', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'cfe2f21d200097b1ecb65e680c179a5602c95b5b', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = SmoothlyFormDemoTypedStyle0;
@@ -8648,7 +8649,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index.h(index.Host, { key: 'e29dfb2ff35e71cb6007424718aec29c006331e1', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index.h(index.Host, { key: '61cc062ccd91964eead610a03cf88160052b9ab3', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8668,7 +8669,7 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (index.h(index.Host, { key: 'c587537cfac8dd04a8b5d677aa0d940ccf8d8c1f' }, index.h("h2", { key: '13e44a78d8a3f80ca991603af716c3dc8b49b3b8' }, "Filter and Variants"), index.h("smoothly-form", { key: '44ff9b82b821262bc8d7c4a01275b5f5f1cad861', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: 'e496109a429a8bb28a0f2574d59da21caf3a0cad', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '63e2b5a60f6a83843815a87850236f7985c427f8', name: "variant" }, index.h("span", { key: 'dfcd3453576dd07c41ebb28d9ac2d0f7510b8151', slot: "label" }, "Variant"), index.h("smoothly-item", { key: '858645608d3ded70226e698d12161fa8a5da0566', value: "outline" }, "outline"), index.h("smoothly-item", { key: '26473eb08d6231cc23d9df4ea58748d6aff939c5', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: '563d5097d77a6cb771f3950d881a2ad5f4f94a77', slot: "end" }))), index.h("h2", { key: 'f0e5efcd97da7df914ca33d5cae907f154b59ae0' }, "Props"), index.h("smoothly-form", { key: '23be6e8004126b2653c2968c91e4862992b501c1', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: '234d568e4edf5e20a8a1e503b800ac78c832cb01', name: "color" }, index.h("span", { key: 'ca7c3d6b7b91342397a6a8324fa0c01c2c955bab', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '714e92f3c015532b677b947c86e16da12a279acd', slot: "end" })), index.h("smoothly-input-select", { key: 'c389a8b4cc53a4e049b24ebdca0f436eb81d068c', name: "flip" }, index.h("span", { key: '0f93c27dddb5e2c2b3b707650d326b7ad76758bd', slot: "label" }, "Flip"), index.h("smoothly-item", { key: 'bc9666e658041d38b4c35a27a5885dbd5f123d09', value: "x" }, "x"), index.h("smoothly-item", { key: '0783bf83144a31577abe17a07af707fda2587680', value: "y" }, "y"), index.h("smoothly-input-clear", { key: '23dad9141834b4cdbb9c6dd06e4d6c10dd0bce23', slot: "end" })), index.h("smoothly-input-select", { key: '8c87db4ce0041147c66b6961d80973d1b365e2e3', name: "size" }, index.h("span", { key: '7870f3c9b4ef8138e34b768f6e4005e00437c446', slot: "label" }, "Size"), index.h("smoothly-item", { key: '8c6e8943d5c1b5ba194cdecd08884ec2852a314b', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '3591b9178abcb9bce8824b47bcf05d335d735bf9', value: "small" }, "small"), index.h("smoothly-item", { key: 'ed80c9ec9e05d786713d85ef95343096bb581032', value: "medium" }, "medium"), index.h("smoothly-item", { key: '8046e4bf9c5f8457eef91fe2051c742d59cde223', value: "large" }, "large"), index.h("smoothly-input-clear", { key: '7e849daf267c1309ebabc4f3bb8381d2f39549e8', slot: "end" })), index.h("smoothly-input-range", { key: '10b731415bc2db750066baadb51dca5a543a6fe7', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: 'f74115bba6427c12bc1bbea85e4891cfdb3bbc7e', slot: "end" }))), index.h("h1", { key: '2be36eb07701df50c1dd810dea8474539912af31' }, "Icons"), index.h("div", { key: 'f4bf305b13940b4c08f6be7b4959f3823a8855b7', class: "icons" }, [
+        return (index.h(index.Host, { key: 'd271babf08fc90d059b4db8dc7abe22d831eddc6' }, index.h("h2", { key: '80c2a150f78f9c9f73d8f5547df3ff3fe1f0b45a' }, "Filter and Variants"), index.h("smoothly-form", { key: 'a02db91045869b8804f11f4ae4b8d3cc7f967125', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: '4175f8cf6cc7bb2fde406a6c15df2892807fbed9', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '0bfbf3dd05edbed718e511592c93905f5cce42af', name: "variant" }, index.h("span", { key: '6d320756014d8fe4749631c000fa0fe5f3a89c4a', slot: "label" }, "Variant"), index.h("smoothly-item", { key: '49d0a53e3c12d6b927275990f4f020c8741f0297', value: "outline" }, "outline"), index.h("smoothly-item", { key: '485fdb59ee1dfcf92cfed9f98144608f09b1cdf3', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: 'c1e1bcddd92cbf5f161dc263ba630d7045de55be', slot: "end" }))), index.h("h2", { key: '5357f02111cfa6c739ec756eb1027a04cf58e68e' }, "Props"), index.h("smoothly-form", { key: '0da38aebdd75727a26e85da411cc3aa73c5d88db', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: '1eb36164c48eb8ac8594322cc0dfbf370debc8fc', name: "color" }, index.h("span", { key: '11fa5e8777ebb1db6e977221ebe58f8d7005ffd5', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '8fb6d9efb188b969b6efcea752e12020d577bd4c', slot: "end" })), index.h("smoothly-input-select", { key: '3e28cbbed1e7b4a73482ba11af5d5dfded150a32', name: "flip" }, index.h("span", { key: '5a3e7a13784790f840194a6631166798df15cdac', slot: "label" }, "Flip"), index.h("smoothly-item", { key: '0226636120e44875002601e4c976ced3111e00ea', value: "x" }, "x"), index.h("smoothly-item", { key: '79d583a09a40c5765c57efb26fd5ef500088562a', value: "y" }, "y"), index.h("smoothly-input-clear", { key: '00c4155c9f8dbafd12fb49339eb29b7b27a78a73', slot: "end" })), index.h("smoothly-input-select", { key: 'f6a1deec85622c01e90c04b02faafb3ddf8e78af', name: "size" }, index.h("span", { key: '7ee9ab0b92bb555a57a711213dbd935863c682aa', slot: "label" }, "Size"), index.h("smoothly-item", { key: '0c4c9991b544377cae41891a89a388d9f3571d42', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '3c8191fcb9243ad0d1aee9821c4ada823f0b84ab', value: "small" }, "small"), index.h("smoothly-item", { key: '8141454aca71916eb6474c3ef67c8168338b6d2a', value: "medium" }, "medium"), index.h("smoothly-item", { key: 'b5c996bd2b3dc872bb2f8a66407968b140b99b43', value: "large" }, "large"), index.h("smoothly-input-clear", { key: '74762e8d3174c98594abfd990d0b7cbdc74979eb', slot: "end" })), index.h("smoothly-input-range", { key: '6aec00e81106477b79c4594640faed4a4783dc7e', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '0e601082ac6d03ee63a59fab980b911da629e436', slot: "end" }))), index.h("h1", { key: '0f9c760ffea77581c78f981348fe8bd2d1204492' }, "Icons"), index.h("div", { key: '3e2b452c22eee90fe19b38dadd8313c554a7a2b9', class: "icons" }, [
             ...Scrollable.Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),
@@ -9042,7 +9043,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: 'c4ae4c3a9d9d220d06cfc95aea8454c23844ff7b', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '71aeca0fecb814952f435e8f23461b43fdcd90b6', name: "start" }), index.h("div", { key: '4578b45948952100222fa0a49d11b353036d08c1' }, index.h("div", { key: 'f9c244873d2fcb919d2bcd16dd643f4868279981', class: "ghost" }, index.h("div", { key: '9b966f279a640ed0db5d0bb8d12748f5a6c57bbe', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'f6545caf5babd33337f1db3e8d0db885027e0232', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '02ba909f7be554d0d5db5d25c16a5f619eb4f120', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (index.h(index.Host, { key: '2081a74bf6be0577f1117d3a24ac0cd172fbd2fc', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: 'cd80fb8059ecf0d717e2d28d0b0e78222233f071', name: "start" }), index.h("div", { key: 'eb393a5144fba9cfbfe89f708dfdf499239a6f01' }, index.h("div", { key: '64f8755696e7aa49cd394ea84e2ea7ff0335c1c9', class: "ghost" }, index.h("div", { key: '1ce701d35eedfbeb594df10a9a9800ab7ee668e9', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '113993f0c4da58f1d98e991232425faab4f72145', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '5dc2888b742e7109bc3de6a2a57364cf1dc70a41', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (event.key == "Enter")
                     this.smoothlyBlur.emit();
@@ -9055,7 +9056,7 @@ const SmoothlyInput = class {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), index.h("label", { key: '3b41a248ac94754bced2b175e4c61c040a7c1d77', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'bb5636283aeba6af0f7905dedb215e42e4633097' })), index.h("smoothly-icon", { key: '93d2cadee3ee417aa2df5050b0c7b10cb616f2f4', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: '21a50a843180b7de005e1397cb9187f5fe42c293', name: "end" })));
+            } }), index.h("label", { key: '61f058ae3ba0a9cf40212284c8f8788e37ed3e55', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'd829477221afec32e766b59e4aa4bdac9e6c9540' })), index.h("smoothly-icon", { key: 'b9c4b0ad7664c2f386b113e92072eb0224746ab7', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: '96b1f1f375b1442690c903fd7dcbf637f3300d32', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9136,7 +9137,7 @@ const SmoothlyInputCheckbox = class {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: '6926bcba58ed87725c8d9fbd24c5873c796dfbaa', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: '0eb23a4138c5f7bde792266a87b2ebc8edf07bb4', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '241adb264d872ba5902f8b2e49cd1d178c919be6', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: 'a7d0e2eac3bb4e382358db36c2adededa4927809' }, index.h("slot", { key: '22fbcfe9ad64a5aeeb5bfa425c7270a49f6a77e6' }))));
+        return (index.h(index.Host, { key: 'faf6b5b6ab0bf4eec833ee7404b79a26b7f0d231', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: '0f1c6fcb3a8b4cb8e7aaa90d3963cb7ca5c74ee4', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: 'f66f42f169efd52552ce769d930e45c6b58d58e0', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '27242f86ab849777cd3bc31f70ed42d138c0ce5c' }, index.h("slot", { key: 'f7d4cce333e657972b7a0610b66d5980de00318a' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9186,7 +9187,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'c6f49245fc95bd93f729a2b51f50f97ab41fdb97', title: this.tooltip }, index.h("smoothly-button", { key: '08f5d20f4dd0b15f8ac40b593585598f767de228', 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: 'd751b259ed5566cdad948697b139d94a3404f59d' }), index.h("smoothly-icon", { key: '19d2b88739261b33db7a445e4154f50afaeb70c5', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: '7bb322fb319af1b6a2fb1da1cdb24ea862632a7b', title: this.tooltip }, index.h("smoothly-button", { key: '8bb682ea233a93e79655eb56c5f1062663da8f6b', 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: 'ec40b26c5cdeeb3ea6d15125132b4eac7ed7e262' }), index.h("smoothly-icon", { key: '82c94ae2ac49414d95679167da83246d5b2eb6c8', name: "close", size: "tiny" }))));
     }
 };
 SmoothlyInputClear.style = SmoothlyInputClearStyle0;
@@ -9336,7 +9337,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: '2829cabcd58d547f3a7f12a11dc2e0f2f891bd4e', style: {
+        return (index.h(index.Host, { key: 'bfabfb0cb6364a367ad580aaff7b2c0420cf5f08', 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)}`,
@@ -9345,7 +9346,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: 'dd518ecf0b40fa93a1c344e8b31c96caf8473f1d', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: '985820f88a467ef14173c8010a25e845f3dcd747' })), index.h("div", { key: '0357ea8a395d0e1bdd76b40973686a4a31dcc90a', class: "color-sample" }), index.h("smoothly-icon", { key: '50f7fb90097ae462d0d43876e13994d0d8bb4cce', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '7d43ae3adde873f25455a5d5390e094fabdc46da' }, index.h("slot", { key: '746a7233a3a6dd4a6e6fa45dcebd36d858c7e385', name: "end" })), this.open && !this.readonly && (index.h("div", { key: '5285729be38f653beb781d06db7dd7d88928ae2a', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: 'bab7555b1bc8eab63dc6b26c9bcdab3e2efb4418', 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: '9fb2d7aa842ebd640eae7dbe27339e037c366b83', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'eacce508c9a2f44c439415e81d244edf2975de91' })), index.h("div", { key: '17ae45b18912cd75a2c8dadb5fd93842111a4f1d', class: "color-sample" }), index.h("smoothly-icon", { key: '5fabb3740559c54658fc6d38eff4cacb29d93dcb', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: 'efd9a4fefb05a94d609cdca1ddd18b1d3e9f9c7a' }, index.h("slot", { key: 'e6b44bab5c837ce28099dab850ddbbcdfe56c86c', name: "end" })), this.open && !this.readonly && (index.h("div", { key: '59d3c24f446c902eedca8255c038237b504a6f9d', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: 'a3c52f89ac41e03a5fda0fc5953a9ceaacc441f2', 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 {
@@ -9359,7 +9360,7 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '47cc0134b930c487aaadce0fe042e247c709a70f' }, index.h("h2", { key: 'f0febd2445b43d8b710f82ee76a8759df789208b' }, "Color"), index.h("smoothly-input-color", { key: '002035b01879e8adda762c9ac8a6f0be1a5d33ac', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: '32b690c4dd7460549299e38a5da3fb06d93044ed' }, index.h("h2", { key: 'f2a1c4bfce5ab9ae0cb568c37184776882678a08' }, "Color"), index.h("smoothly-input-color", { key: '97265d41ebcf18e1d9282d90898b325c7b807e56', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
@@ -9451,13 +9452,13 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '39babd217d35efbeaa9e796d17c5892094a05b47' }, index.h("smoothly-input", { key: 'cfd8e80200cb1f5c51ddf72ad015708b338d544b', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '8b86488d54657388e8b6f69192d4f5645da29f4d' }, index.h("smoothly-input", { key: '80c2c4adc2eedd8c5b6abb6e84a31443e4ff01a4', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, index.h("slot", { key: 'f13db9e036601cbc5fdd00f48563ec0d34039559' })), index.h("span", { key: '80cf6aa699be5bbe3fe846576400902ca4f43713', class: "icons" }, index.h("slot", { key: 'ea71f775aa6332b6be13268a05bc6658c14e9fdd', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '2954f02b0c357e9e029d9afca0dd4f20b5b38af4' }, index.h("smoothly-calendar", { key: '62d9bd9c4dce3cce1cd46bcc89772c5d97684229', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, index.h("slot", { key: '20e4799b82df63a172fcbc3bfe4cf7d024ca7f18' })), index.h("span", { key: 'fd1f3a5504000a5e9f748eab102f6c748a731a68', class: "icons" }, index.h("slot", { key: '08948707c27109c9e069015fe704a690524d0658', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: 'ab56c5ef29ddbc708adf77eb38209104a23332e5' }, index.h("smoothly-calendar", { key: '54f4b90f744ce92327709381cf3104a9135beb59', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, index.h("div", { key: '26344960dc0df691b36dea88cdc54e7c51f5f20e', slot: "year-label" }, index.h("slot", { key: 'd329bf63afee5f807cd13fa81dc7697b39876ca0', name: "year-label" })), index.h("div", { key: '89c5b3a2207e510447e88d358d7ebca1cd78ff42', slot: "month-label" }, index.h("slot", { key: '494bd7fe0d78b568ec57948b611b1acdb285731d', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: '0ec760d8f6d993ef2e16d4a99185f11ecdeeaebf', slot: "year-label" }, index.h("slot", { key: '92375a5c20ef54090efb072c79498f6f01cb3207', name: "year-label" })), index.h("div", { key: '5f82b94081486262f2287ae8264ca4627dfc283c', slot: "month-label" }, index.h("slot", { key: 'e0779749e3bf137d15aa2e3677484f253f971394', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9563,12 +9564,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: '9a0c5b378e27739b3ce38d5fa804c6cd822fad7b', tabindex: 0 }, index.h("section", { key: 'c6a0b567417a872c358cfaa477eb3fbb8c824909', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: 'dc8ac2f22414707707d9cf116f656742ae8f304a', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (index.h(index.Host, { key: '27dc018890c8d7e8145deab7d1ad2e7e3087a4d0', tabindex: 0 }, index.h("section", { key: 'bf9fdb018d5061d79f7ae91023466825144cfaf4', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: 'ed4b858aaf9d93a93b8aa218ce0a29084a37de9c', 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: '83342fd90bb95d264b466481f97615532c101992' }))), index.h("span", { key: '7837ba4a48e449bb40f5568168116468c2d4523c', class: "icons" }, index.h("slot", { key: 'eda2352a651fcd44577931382c1c35cf2cda0be2', name: "end" })), this.open && (index.h("nav", { key: '9c3f5a766390e67b1f1a8b1dce952276a718b488' }, index.h("smoothly-calendar", { key: '57379aa832f9a1f7d30514ad21ee1599194eb238', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: 'c2456ec3e2e79837c855e0d617311f76d741d09b' }))), index.h("span", { key: 'e07805ee0d9e709eefee9a4f2fc6ec391538464d', class: "icons" }, index.h("slot", { key: '6590c6a40ddd12cb18886d35b67dd7143e5f8891', name: "end" })), this.open && (index.h("nav", { key: '127ada4b281a9945eefded63ab8e878b1356d807' }, index.h("smoothly-calendar", { key: 'd5749b90c9f78505a37311d762bd99bd039980fb', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9599,17 +9600,17 @@ const SmoothlyInputDemo = class {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (index.h(index.Host, { key: '53620b6898e6232b38482e885cb94f92ad7cdd69' }, index.h("smoothly-input-demo-standard", { key: 'd37514f643bd6b41890f0ab112470ebce81e4c16' }), index.h("div", { key: 'b0ef5286c2533e827d88103c0878d3144f512ce6', class: "inputs" }, index.h("h2", { key: 'e566d66b3469727d2eaa24695c196df03470e3ae' }, "Calendar"), index.h("smoothly-input-date", { key: 'a282ab72356ff6df4a43c53f4d4ba91c87478423', name: "some-date" }, "Calendar"), index.h("h2", { key: '6b75b36ba257dbc5dba51cd70b783c1b5925951a' }, "Date Range"), index.h("smoothly-input-date-range", { key: '55c3b3e8bd5885d98321b3f04b5ddb72e821b0f2', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: '63fb92e725ec294eadc4df35a95242d1b9606cfe', 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: 'f5f115e0fd39d2316d40030609590a6253a9e6c7', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '1de4927bad02549aae6617a1c05f890f8567c05f', 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: '45d876a84adb21d0291e507d75c98a34e245bae1' }, index.h("smoothly-input-demo-standard", { key: '16b4efe4bf9ce4cab767abde418c9475f39c07e6' }), index.h("div", { key: '456df927db12dd6155230497db1a18744eea9071', class: "inputs" }, index.h("h2", { key: 'afa11b76643c5d38c4504533764882e14d7c2021' }, "Calendar"), index.h("smoothly-input-date", { key: '197aeba701d9212d1ab5e2aefd6ec6e7a044b712', name: "some-date" }, "Calendar"), index.h("h2", { key: '9798bc7d87dd4230607124b44b44949a20146afc' }, "Date Range"), index.h("smoothly-input-date-range", { key: '94578e52eb50923c8133d93d694a155c87f5fbf8', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: '1e96bb6c94fb3bb317b8bf3dced22de39752498e', 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: '504540317c63eb41b0ddd7486fb04906e67f2c16', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '98b5ad4e2292332df7f80358ba9fd8d81ca06c17', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, index.h("smoothly-input-clear", { key: 'c252da2c3e78805b3f89a2eb71a00fc17127b11e', slot: "end", size: "icon" })), index.h("h2", { key: '034b8034a010eec00ed2e7e2f767d9b3194e48cb' }, "Date"), index.h("smoothly-input-date", { key: 'e35767873fd2fd894c69ece286cb5dd700e68e1c' }, "Date"), index.h("smoothly-input-date", { key: 'e3c7ae934af888dc83bcc6f4adcf2c564685e8a1', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '0945e4cc37f70203e4b9dde72e8bdfc3156ba216', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'e7af144b79608f65dacbe6332e23fe086725a093', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '263d6a5d4d2df9d76317a9832f05151a6fe3a28a', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: 'e641810ccdf6a2e0718425391ee713d08037b4cd', slot: "end", size: "icon" })), index.h("h2", { key: '243fe62af059710de96839d957c54772ef3929de' }, "Select"), index.h("div", { key: '651d5168ce740279ee9603874d1f6f310245de7f', class: "select-div" }, index.h("smoothly-input-select", { key: 'abde779ca7e1cc9e76a850d11713d4a7db2b5012', name: "select-dessert", looks: "border" }, index.h("label", { key: '411cf5ef2472a9b4a75873af4126d04e9b92cba5', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '792e6a8cf78d4b5c192970e0c977946624ece990', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '5f0499a0e8746ffbc5a702ed9d4141382c271c27', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '67c10704aa3b581d604161d04c6acef9b852ff38', value: "3" }, "Cookie"), index.h("smoothly-item", { key: 'bb4a932bdabc075479a6c66980dfbdc5b23ba22d', value: "4" }, "Croissant"), index.h("smoothly-item", { key: 'd8df4696e2e247a3c7232e087b50bfdbe472af5f', value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: 'f9482ccdf526b32bb777ad610702677609d51a2d', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'd01fe18ac6f910689ec3afa06d5b2b26d2b387e7', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: 'ea0f8e9a9ff36fd07ec8c0d2cea804a2264ae0dd', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: 'bd758e0bde57d5a45b03bda9452e2115a1e01f49', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: 'c0ddf61cc4531ceeeefc95cfae0fcc332c558dbc', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '9726789571c7fabdebc881e1ce795d5b4a676319', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '27aa8a425075b603adb69d22af9eeea91652df92', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '74ae63190271d73d4cb066ea33f2eec339555444', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '733594f11581ea601ab93210820fd10b715d8f65', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '822ad1dfde346107af036c1085b3ada0da155350', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '8902c0aa2a6ed38ef650865bc3a82a2fa82c4b4e', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: 'a22d13c2c57fbdbc8d09130e394185fd5e32b99b', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '1d86e3bf857735922fb6fd415b397a9e9bf57e04', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '40338669ca74fe1633c1ae244f6b5b62627347b3', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'be05c621453614ec0c0e21cfc8dd6621ecd32459', value: "folder", selected: true }, index.h("smoothly-icon", { key: '29429e99ebac97412d34ac75d3a9baf58d200272', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '7cb2699d7bd6d244fed3125d61f86dce2e9dbc0f', value: "camera" }, index.h("smoothly-icon", { key: '33163924e2bec71c1b3576eff7f49b44faeb6bb9', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'e5447fb645e04fe2229b5e63ec430b60b7805f88', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '6e67385312c2268b5c98eb8a081bf4f383a43c36', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, index.h("smoothly-input-clear", { key: 'c3e320f9691a8bc94892b255ade54478ea168ba1', slot: "end", size: "icon" })), index.h("h2", { key: '18f4ccaa84069d1f35cbc527bf16b4d19b7d6740' }, "Date"), index.h("smoothly-input-date", { key: 'eb41b2588fb53ae7efe0a1bc0a2ae02df7ac2b23' }, "Date"), index.h("smoothly-input-date", { key: '8b1aa0fe4c3ce6df32d39bb74354cb5d91e4cbe9', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '979c0d7255ee9e07decafac7d254418febf65658', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '76a94f4c2bfdedab350fdffd91e5e476b0175ae3', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '9be7b95ec68a988dbedcf1f59b65580588648c7e', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: 'f7504782876de6185bcc79cf783a8fe7b98cb549', slot: "end", size: "icon" })), index.h("h2", { key: '3a0973234d9ac25836a715c81df129e0ad3ad37f' }, "Select"), index.h("div", { key: '4f0340883b64ad65c265c3dc5d29587369fc7dfb', class: "select-div" }, index.h("smoothly-input-select", { key: '10969d77083f28f2b12000366a5962d96f1bf849', name: "select-dessert", looks: "border" }, index.h("label", { key: '2c653456ff8f9fd3a87b262ef71b590f172c471e', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '46dd6cdc25b1dfae027635a0b3015e43f6d2878f', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: 'c11274fe1700acbc9c5c33cad6529d6a122139dc', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: 'f1d5905d3c0cd636e89dee3a8d840320fd71ee80', value: "3" }, "Cookie"), index.h("smoothly-item", { key: 'c53b070e0ab7884fc69275f06596b5745978e910', value: "4" }, "Croissant"), index.h("smoothly-item", { key: '36ae534d31120ca947763f1c6b155101104a97bd', value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '86d5f2599981381dc196816e4f11fd9515e44f41', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'c7f6268322db571e2ec693788d5b2c35c33fa786', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '70c564d21f49b5ccd96fd3a9d870da2ae2e75557', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '789b5d9c4fa6c415dbfae4515396e7f567b59c98', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '71bcd00cb118bd50a466162993989e3fbd5a6354', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '7ea430156ec346e59c74972904b2c3ac6c25735e', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: 'a76b2c4923f730340093006b3a95b5383db29f0f', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '09e6d0a3f2aa8ef2b1d0af9dc975e68e6f7fcb2f', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: 'd12503973564a3dd906214209a413ba35599d974', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '36322f82ee3c4a5fdb52157d7c80edff03f2f6f1', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: 'bd284222ea57418c09ee55e37c013f2fa77636e2', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '587ec3f9eb650fa9f7b693687d188be450605669', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: 'afc72e2025c7ab491f5b792329b00ebb633681e5', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: 'a449e76b493045c893ff6d20848b44416fb698af', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '9a14e0ce1733fc4b3d86f10c2b45f52d6e372bf6', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'f58ce43ecfcb6863052c6302513c0c113e13c074', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'fbfd64ede3b76bb7c0ad0775c257d3f9006efb7d', value: "camera" }, index.h("smoothly-icon", { key: '600cb76b3fded1923df8e9797addbe5801e1ee9a', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'b5e86cfa6210481b2bd4c1171ba71f19f326d391', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'c6d4e7901e4f0da5c1f889cf1c81fc49b040777f', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: '1bf0b84705cfe28fa01f615637a3f365bc34c7f0', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '0e9b3a715b7553a6ca9ab6a0152fcdc2b41ce42b', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'cff610f88141ac062cf05e4d912772a8c537f207', value: "1" }, "January"), index.h("smoothly-item", { key: '03bf4a76b5634b86869fefeb21b139baa4c8824d', value: "2" }, "February"), index.h("smoothly-item", { key: '5fdc36fd493c77f98551f6491a8364c79cb2eb9e', value: "3" }, "March"), index.h("smoothly-item", { key: '87ff5de630592922afc529731e11effaf9523417', value: "4" }, "April"), index.h("smoothly-item", { key: '5ea92a461996e01d982865211975bee3e9ccb97f', value: "5" }, "May"), index.h("smoothly-item", { key: 'c815b09397e06521bd405f94604df2460772c169', value: "6" }, "June"), index.h("smoothly-item", { key: '141669aca38bd1717cc7e19f5ff652b52dcda754', value: "7" }, "July"), index.h("smoothly-item", { key: '5912aacaec7e6e975e2f277ea23f91fb8e66f084', value: "8" }, "August"), index.h("smoothly-item", { key: '61f304b902db8a53bc995f330af60a6748fa9ef4', value: "9" }, "September"), index.h("smoothly-item", { key: 'ced2bdd32a844588f334ff85adea658a5402aa92', value: "10" }, "October"), index.h("smoothly-item", { key: '0d7e4302efeb711d95823cdd90ced4dcc3e09dbe', value: "11" }, "November"), index.h("smoothly-item", { key: '70a7e6c6bac38bd0728744bdc3589c72b62cdcb8', value: "12" }, "December"))), index.h("h2", { key: 'c776acfa8c5f350795db9a90fc2a6683fb1f976f' }, "Duration"), index.h("smoothly-input", { key: 'c2c8086138d81d5bbc002a2cce25e577003d5ef3', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: '16862fd74a850873d4d094365a00f2eac36086dd', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '937e851b80d06e8d3b9b0e9fd381d9c0349e7385', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '3d227a817b2824c4b1f204fd671ccbe98c1c21a2', value: "1" }, "January"), index.h("smoothly-item", { key: '1e0fb723814aa1c6437543a2464f38f279ceef40', value: "2" }, "February"), index.h("smoothly-item", { key: '9709969f5373affae2dd1bc3d6f3564e7103f002', value: "3" }, "March"), index.h("smoothly-item", { key: 'dbe741500b2f19e346cfbc6b66bf44f5b151a8c8', value: "4" }, "April"), index.h("smoothly-item", { key: '07ff330954c255975db4dbc745cf187ed2f65d84', value: "5" }, "May"), index.h("smoothly-item", { key: 'fe531ab3dac3085d671dcbe2a79ae84f6cc1a5bf', value: "6" }, "June"), index.h("smoothly-item", { key: 'b89b2b1c6cefb1177caa53945d71737ddf3c0207', value: "7" }, "July"), index.h("smoothly-item", { key: '987e87174bdf424d244850d36563c8d003369847', value: "8" }, "August"), index.h("smoothly-item", { key: '5fc0fdc4b5a7fa5fe963e079c78e6e0b0986eb48', value: "9" }, "September"), index.h("smoothly-item", { key: 'b853ce420e91173007c0307e34f59cc17537368a', value: "10" }, "October"), index.h("smoothly-item", { key: '70d74d55773802d228419116172e65ef2949e1f8', value: "11" }, "November"), index.h("smoothly-item", { key: '43cea0f2a57d291703c0c727a6addae322a776fd', value: "12" }, "December"))), index.h("h2", { key: 'd0d6d95cb4eb3e1457fc8f7094d5fe2860a34e1f' }, "Duration"), index.h("smoothly-input", { key: 'cafe6f776e1865e6ee5f4553a13b7e2cc265f852', 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: 'a4461fcc37ea87ac36ed2e7bae754a0ebe6a4de6', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), index.h("smoothly-input", { key: '17be7c32f4e12254ad7958d7887170a1080289f7', 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: '7a7eb1ad7a4cdd511ed1d1e6e6121bfd8e38a9c4' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: 'e472f6bf7ee9af20eea4d3eaa9ae661114569b47', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index.h("h2", { key: 'a777cb187fac54e64882095cf11b234dd4d09fc6' }, "Identifiers"), index.h("smoothly-input", { key: '821ba1a7eae8c9f22b350e892a0552b1fa549976', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '073a2e71552dfdee3dfb8739b30620cca6133293', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: 'cf848064b7a3725f8930a34858de95f5b3c6579c', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '724a0e07f0c58156ed5e433adcfaed00ae279695', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '249497d8a6d616927c39364459ea554104950dac', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '28d3546d0e6e657604f404b8eeb2fd3ab80a7f22' }, "Input Alternatives"), index.h("smoothly-input", { key: '5addb980deedb3fae2f3b798130630e08a470a25', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '40a34d410c688476da365ce73426a30ad035ea7b', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '8cf63e8644111117aed0d7db62cc3a339624e0e9', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '2367ffa22848c566460dd09b6624493efed35a99', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '47c23aaaa84553328a3a46c8c4c666bfff9a211c', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '8cb371794535f88ab3e45fcee4a1db4ce79456a4', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'a38f0251a484c186a785fae521c7239e63452744', placeholder: "test" }), index.h("smoothly-input-submit", { key: '3ea8d5a59d8c61275d94468c79a191d9e9b6f9be', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '670f911f1c0ff9b64daacb6afc55f6570243c08f' }, "Smoothly checkboxes"), index.h("div", { key: 'c298a732d42f8348dd4b60d2155cb62f9086a647', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'febe3d83a3532151e20098bc46bf9f7ce7068880', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '1f676d08f501670767c1fc5415d598829e8b9aa9', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '13418af8c114f6654c7aaf0781ba0b0d4fff8b32', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '506a1599eb2ca3c7180b77805f09594a3ca72686', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '4c088fe6622ffda5a2e032b028e6ed841b2a2eef', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: 'f41c272ef56a449a511a1eea134ea01f9112604b', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'c113d44cc25740eac8810b9b9cde44848ac37528' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '86d54d00a06727f452343c6f2dc81cb7145f05aa', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '9594f4e3dafaf4f834eea695b0242759396618fa', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '05d0a5e6e9ae9e9df966dbee4e3e1ff437c6634b', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '3674ae58bf3443bfd91277f61e1821ec9c9a4dd4', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'a316c3cfa518122c8f90cd7f7eb7a2aaa76a5515', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '34ab3b117d484f129e9d82702a034742109edb5a', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '2f6525494d71d84751d3d38ddc47108fa6341042', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '08e3b427a333c0cef133a326b03b152da5b091cb', name: "radioSecondInput" }, index.h("label", { key: '283fb78123331cfa3c7a42227c712a3eb1f6956a', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'a3833e941f4a5147120c3d889fa8b9148876af0c', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'd3315a20dd2d435f58c0050c8de48a84e37ecbcf', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '1a231837db37cf31eba81c06807c74d7036c40b2', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: 'c46cb2501368311c9d406e9b5f87418db4f0d0c4', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '354a6bdb4fab12e7b285c974a63567a1e2b5d577', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '67fed4416f273a3d5eb3b7c3444d6f7021631da0', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '2967756bba3607c5b3b48d4a92c53ff1a6735307' }), index.h("smoothly-input-color-demo", { key: '1c117bd03e4613223cf75c378b96119aba840279' }), index.h("smoothly-input-price-demo", { key: 'cabbde6829e29cccb421bd4d55ee087a120f3dfa' }), index.h("smoothly-back-to-top", { key: '3319746bab7c5a3b5891059494e55e28749b2a9a' }))));
+            } }, "Duration"), index.h("h2", { key: '8813e27ef8a826c4a2b3f1b6e4e9220ceef27e68' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '7e157d862f37c77c609dc9497141ca1148cc89ee', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index.h("h2", { key: 'c4e7a69935914e657d61411739bbba893e093968' }, "Identifiers"), index.h("smoothly-input", { key: '27048a5bdcd7d4254bafb54d80bcf0bf3555db81', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '87c0d7c72551176e387a286932506a15be1ad249', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '410e405637554b7c79d93e66691b11490ed605bd', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'ed5079bbee4cda88f40c30d068ac024faf37ff91', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '0c6154d7840f7d5a343dc68e06bf83ae72c54ca9', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '2771a8ca39782d11fab286fcb65b867c0286f45a' }, "Input Alternatives"), index.h("smoothly-input", { key: 'ace3e3a84d1facb340e8c5ddb01c26f602968639', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: 'ce6af347f6575b124b9b9d85bd02a13b85952a20', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: 'c95173bd3d21e9cd7c3647ea11704477c6c3beac', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '6f376745f55be6313e0fed61f88edd794ecf6034', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '00a544d3585f9182c8e69f3cb1a103e7e962afa2', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'ea1b82aaa7211dae9589b5787c4b1a7b514b8804', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '80ecbd1fab6e742af5c45d7eeda8e82ac57f2a50', placeholder: "test" }), index.h("smoothly-input-submit", { key: 'f8efd49b66f1fdda88abecdb861544af96f3be22', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: 'a32d6eed0e38bb61824ed6770c89690a8ec304f7' }, "Smoothly checkboxes"), index.h("div", { key: 'd6765a03ee964713d33dafe7101f3944f8a87c89', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '22a994ef413c7daf2755dcd58f6801e39b9011cf', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: 'a17a92b4b844b6fcbfa078e5ce7628d1a06177ad', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: 'dbb134399456e3214b5108bab40a31b5c9ba7d4b', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '6670e21d997952d04e3c1b772800e1ff37d0819f', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: 'a7580f0e29239604403b1baab6fdc72fb67a0c17', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '2c2c505ee8085c1581bbd7c89e057d963c1ae393', name: "third-checkbox" }, "3rd")), index.h("h4", { key: '827b1070f1cd62e1059ebebd1325dca037f7b649' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '072e0eb8354773a26ada02942b832086670d1ac5', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: 'fd636989ea41124dd7c635d847dacb6963300dbd', name: "checkmark-circle", slot: "start" }), index.h("label", { key: 'dee55d551b2d3a7ab2d19c52e0f263c91b943ca7', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '9bf269d4ecbe875330b1e524b1676421f7abe405', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '7d45cf02303833971971bc478d325fa5da620e6b', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '1289212d68348cf167de9bd1868ca0fc93f26d4f', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '806f9888175db03b6e150605877d52ee70f1a5f5', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'a56240825efef2cbe63ddb3d5880d699b6b35e0e', name: "radioSecondInput" }, index.h("label", { key: 'bfc81c30b70f9522737364fcf563b053cf114e15', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'abc6805ce48dffd368ed7b639eb86b3fce5cce21', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '88dfb557ed1aed288f40353a900bc404364dc7bf', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '54f6440c82947c146785299f1f14f1fb4e197d86', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '905278887964aa51a4c237ffdd3e9c70bc2f0497', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'f5a53e4b02d3fcbaccb9d7eac3cb3308b8a19db1', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: 'd29681b24c56db5ca50f8f78c73d7faee68b944e', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '544ca889f35883c24e027bbf7282860e5b6cff28' }), index.h("smoothly-input-color-demo", { key: '306ce7a9603429c5f42bc7787db356d9e372281a' }), index.h("smoothly-input-price-demo", { key: '447e3ce8b8fb1e211ad8be0a92ea33200f3e945e' }), index.h("smoothly-back-to-top", { key: '081f592e35f68264a60da244ebbbd25f7fc256b0' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -9638,7 +9639,7 @@ const SmoothlyInputDemoStandard = class {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (index.h(index.Host, { key: '4719fdbb2328badf8f020fb6b0efa634bb3852c1', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'dd3ea15780cbb44dd4230404b9d76ab76222bc4a', class: "description" }, index.h("h2", { key: '201180d47584d7a37d3a6e2637c51306c84f1f2a' }, "Input Standard"), index.h("p", { key: 'a63a5ee74970647f25a468b74660a582c3103dc4' }, "Height of input should be ", index.h("code", { key: '972fbd77c1efadbf176e69f1db14c5d9462394a5' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '5c801aa407bc7a35ae23531603497e74edc356f8', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '1a48cc1afaefcac85d94004e7fe2155a34cfdee2', name: "looks" }, index.h("span", { key: '992d54cdac53aceaf9c2831cdfc5af70044af196', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '63b7d971224f64e0b1808866b516fd26448a1275', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: 'ddf2534c6ca5d761052ee42fe9214de7e702c0bf', name: "color" }, index.h("span", { key: '7fefb42a32f3440b5c36f897a8faa5ac8a6de602', slot: "label" }, "Color"), Scrollable.Color.types.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '7c05aa6b3d22cc5c58478281fa1d27312987dfc2', slot: "end" })), index.h("smoothly-input-checkbox", { key: '09fdf07734f0c1475c812242133bc20c12cff029', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '0e7f5a06add851c0bdc35cf918020573bbf55cc2', name: "showLabel", checked: this.options.showLabel }, "Show Label"), index.h("smoothly-input-checkbox", { key: 'a90802f03b3fc0ad71506a8cf70b909061da7258', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), index.h("smoothly-input-range", { key: '28b69b453b3759c81e96fc858535a83c1ec33047', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '39d3d462f1daa47ba8c401ca9d88fdde91223675', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '87d5bca2ef878a79ddca03fada7969da305b55b2', class: "width" }, "100%"), index.h("div", { key: '6e357e9a3c0614d90169132187a71be5574705f9', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '49739b4eac9e5915ca9df59949c70cbb5b4e6e6d', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'aa1eef8fedf8ce4efd226d7de7ab72b4d4d46e37' }, "Text"), index.h("smoothly-input-clear", { key: '3f33759a6afd6a2d6d6d8c1da9c001332ae7137d', slot: "end" })), index.h("div", { key: '93e02b23909be172432f9942b03de09a578c30f0', class: "height" }), index.h("smoothly-input-select", { key: '999f786805780537e683ce89b1c674d596e69ebb', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '63d4a3e37ebb68442bcdaa40d66debab489ba3df', slot: "label" }, "Select"), index.h("smoothly-item", { key: '72d2eed6c3403910f8906924f0bd9f62da609b27', value: "1" }, "January"), index.h("smoothly-item", { key: '16834bfa537737854dc7ed042c188aec22c0d47d', value: "2" }, "February"), index.h("smoothly-item", { key: '5241bb5951cced61e5eec6e32e2de79fb08f0a4e', value: "3" }, "March"), index.h("smoothly-item", { key: 'bcf3b5d9c1595e76d10fc21204042602c61d9c3b', value: "4" }, "April"), index.h("smoothly-item", { key: 'ef13dcbbe10a90b86d9b90e5f47aefba0128577c', value: "5" }, "May"), index.h("smoothly-item", { key: 'af3da8c0909d13417835e6dafc302bef70821199', value: "6" }, "June"), index.h("smoothly-item", { key: '8974c5f449e9807d2ecd5699eeb4418ecb619a16', value: "7" }, "July"), index.h("smoothly-item", { key: '1fe441ffd10bbc20dbb86cd8e5ebf4b41e17a813', value: "8" }, "August"), index.h("smoothly-item", { key: '6b8f1f7d1d300b659ea33fcd93ff70048c51ca2a', value: "9" }, "September"), index.h("smoothly-item", { key: 'c9270e8a74d20e51e7752854d84591bc48ed3337', value: "10" }, "October"), index.h("smoothly-item", { key: 'd27392d73235db46f1dad164b1e7f105a30ad550', value: "11" }, "November"), index.h("smoothly-item", { key: 'c6384e32911143860f619f5c64169155782c5c09', value: "12" }, "December"), index.h("smoothly-input-clear", { key: 'ac566355d23456c3c2763256e32dad7e31d9fcc6', slot: "end" })), index.h("div", { key: '3dada69303d1e58aa79b986eeca821c02fcf09cd', class: "height" }), index.h("smoothly-input-checkbox", { key: 'f84c1253de429dcf4bae20f897b0f3345f312034', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '3b5b54c42663986b9b776fd1a7eb8f345c87b17c', class: "height" }), index.h("smoothly-input-radio", { key: 'f91581d99517c537ad37742334e81fee60667b66', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: '3b9cd65dc7898304a468f4d9868b51f6948be746', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '985cfe9ea20ba640110dea9fd489b045eb5518c4', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '8d1db72d9737c384fad3a9e234449cdf5919c1ee', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '0d062c78a15c2477892604a3df64eb1b63595b42', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'a4c2e8e84f7f582cf33b6330b322cee7d9ecf7c6', slot: "end" })), index.h("div", { key: '6240cbbc5f6219f6a2a04ac5f19236a02df6ce96', class: "height" }), index.h("smoothly-input-file", { key: '316475974c81711b670d3f25c224d350df502091', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '9bd629ef27e7dc2a797b313b62f2a69a5dd3d445', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '883607ff5f3be75e109c635e8620ebccbcbfff14', slot: "end" })), index.h("div", { key: '923a93813b3a28992c966bc1b75a4d8aea0a9390', class: "height" }), index.h("smoothly-input-range", { key: '31e9715073909d1ca11f946970ec3d76545b70ff', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: 'cbb6f780158aab6ba6bd7dce2f178f96ceeda322', slot: "end" })), index.h("div", { key: 'b14b43af7674d2bd13dd305f4226a68dd4198870', class: "height" }), index.h("smoothly-input-color", { key: '9a5cd02ba8dbc24129bbf5dffc328c9bbcd03cc5', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '618d1451e7e7fcd00583e8ceddc38dd6bc6b8d3e' }, "Color"), index.h("smoothly-input-clear", { key: '5238442e41846556334216472c680365779e57da', slot: "end" })), index.h("div", { key: '883c8d0ce9069cce8c22074cd78133f9fbd6dfcd', class: "height" }), index.h("smoothly-input-date", { key: '2f375e6e70d6bc9a3c66648eaaddf98d5748a531', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '0fad1deee27a6468badb75fc3e4e7b54a433796d' }, "Date"), index.h("smoothly-input-clear", { key: '94fa813d6e599ab0932e5f5e1f3fabdd46e10626', slot: "end" })), index.h("div", { key: 'fcd1dcd38e1237fd34189d55c27b7551e73675ad', class: "height" }), index.h("smoothly-input-date-range", { key: '63c4b2a8ec672210bccf9223db656eaa3dc909d5', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '8ec49c06f4a8e6b15e228c96e66ad2bf47b1464e' }, "Date Range"), index.h("smoothly-input-clear", { key: 'c7135c49de3110aced9a04bf08384a70bb333463', slot: "end" })), index.h("div", { key: 'ed090b049a9640dbb04ae25534a1e706d44a432c', class: "height" }), index.h("div", { key: '4d3f1e839b1018869e0917170f64e84528e6bc37', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (index.h(index.Host, { key: '5264c1c9cf0f92f86ff0d368522287f8580122c2', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'ffafa5f6546434d2287a1f07469a8e251e9cde9f', class: "description" }, index.h("h2", { key: 'bccc24c712d54c8b6efc2308a8ac73c9f6fda677' }, "Input Standard"), index.h("p", { key: '4955d39f7be77b2c88ba56d759d386a8f389b797' }, "Height of input should be ", index.h("code", { key: '2cba3f4631613cf6c1892c678cf3b6d2489c610a' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '1ede0f00d2816bb598704f5ad828a95410fffb1e', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '0d7dfc6ef6b3df8c79f863b4c4849d6eea0cf4d8', name: "looks" }, index.h("span", { key: '3815a6dfb52bcdc791082f5c7aa6dab4ccca9047', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '1849cc0bfa3811add3bba272ce7eb36932b5f4ab', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: '37de4eaca616147ea628e0005e1066b0db500853', name: "color" }, index.h("span", { key: '135dac6d13c87b5a70e76fcca9ecea2187bb6012', slot: "label" }, "Color"), Scrollable.Color.types.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '87af07afc6a4a46c8cc785d477a333745e843e53', slot: "end" })), index.h("smoothly-input-checkbox", { key: '1d58c89cb01bcc24a928495ca511c38856c0215d', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: 'f6fbabb433bd48583aebca2d12ccb47f819dbb98', name: "showLabel", checked: this.options.showLabel }, "Show Label"), index.h("smoothly-input-checkbox", { key: '78b1007ac65662cdc82794bf4319267a3cb230a4', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), index.h("smoothly-input-range", { key: '0d67c1750a475010c2f555c6d7ffa56f9b616843', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '4ff5e67eb421082c3010756b918ab8788dbbd81e', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '09fcde40dd103c81c550ca71bd96e522c840ca4c', class: "width" }, "100%"), index.h("div", { key: 'd5a14854ee79918e0857d533e37221c5ee088d4d', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: 'a126b8db655f22b7daf861eece15b3f031cbc605', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '33f2cc7f357a3846ccbcaa75201ae42aa369fe1c' }, "Text"), index.h("smoothly-input-clear", { key: '7b06802ce6ec1cf6e66464454f7e2c08c5509cea', slot: "end" })), index.h("div", { key: '74036c4691e7dec9f203a6a36987cec8644b7b17', class: "height" }), index.h("smoothly-input-select", { key: 'd24c977332de2ac0d09e08736dbe68c54fe82f42', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '5413660ea9e0d9779811ce432ea958cd83d9ebed', slot: "label" }, "Select"), index.h("smoothly-item", { key: '2ac5c27083962fa8e1a25c5d15d3843a34d02b41', value: "1" }, "January"), index.h("smoothly-item", { key: '521a8845b6f331ddf040ee52c1f7724fd94f64d3', value: "2" }, "February"), index.h("smoothly-item", { key: '637195be2eb8ebe0faf80b7fb1c5d3860d33df80', value: "3" }, "March"), index.h("smoothly-item", { key: '2527e90e5171d97f3bc8b072d03d561c021188bc', value: "4" }, "April"), index.h("smoothly-item", { key: '5ba652f3e666f2afba3a945bfc674af42fdff10b', value: "5" }, "May"), index.h("smoothly-item", { key: 'e8898598c2132dc1e3dc47bf8b34443d217fdb6d', value: "6" }, "June"), index.h("smoothly-item", { key: '8c1797ec614431add028845b98b32d264a36a036', value: "7" }, "July"), index.h("smoothly-item", { key: '62ac28227f5a066bb5073f1fd90b0b4b1efd3afa', value: "8" }, "August"), index.h("smoothly-item", { key: '70764eeca66cf56ca620cdb1d963d56defdbdb83', value: "9" }, "September"), index.h("smoothly-item", { key: '4d132d530b45db4f8829bfe2bf25afc13a38e158', value: "10" }, "October"), index.h("smoothly-item", { key: 'a4d1ef299f0da9db3bd9973c8452e037c0173305', value: "11" }, "November"), index.h("smoothly-item", { key: '9e72c334c00b4cdcc74fe00086b2a028e33b6408', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '1cf2720994c6f70830425ca2066ad370502dbc65', slot: "end" })), index.h("div", { key: '7b2bd944723409bc21be49273dee40dbe88e8e69', class: "height" }), index.h("smoothly-input-checkbox", { key: '648dbe1784e117de725a16ba4f70b3c8310c415e', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: 'd83bdbe0e7deafdaf375fc92bed15185315f1120', class: "height" }), index.h("smoothly-input-radio", { key: '2d9a8f739f4177bbebb8a3c7f7e4d51accb4a269', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: '8e7b75b87d6b097a2820c1f63fbff106c0b3cac2', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '84f9d894f3608bbf6f6fd18166f148142cd59460', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'f2a62709db12077c1e46d70737a2de14792cf4e0', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '805e4c62d987029192f924a6e305451abcb95feb', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '845398abbf6f72f30060b7e080b2e9d024ab2e45', slot: "end" })), index.h("div", { key: '9b32f05a7587f50d6f02d5606f275f8b636745d8', class: "height" }), index.h("smoothly-input-file", { key: '05d07fd09bc51cf12855458bfeacb0a9a6f661e9', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '696715b9f104cceb8b20b46f8ca0a1eefecc34b6', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '72d276a80a33794c9bcc3e8865ba2c9c2988f6cc', slot: "end" })), index.h("div", { key: '9dbed3e714e898e5c615b6f24ba5ecdc555c056c', class: "height" }), index.h("smoothly-input-range", { key: '7357abaf96f5b24b86b150735b9b0c944a642008', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: '87a942e9be397f8876a099313c67fe292e8f6a34', slot: "end" })), index.h("div", { key: 'f29eea42ea273adf8014fc721040994704c053fa', class: "height" }), index.h("smoothly-input-color", { key: 'b97507b13cb5d9d256466c08981980a8299bf999', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '31bcb93fc12b7d03b0aa0a731d769850ec9ae2ec' }, "Color"), index.h("smoothly-input-clear", { key: 'c12b3d0d204f98c05c27e3df8200bd88b13baae7', slot: "end" })), index.h("div", { key: '41543b5fae1c2e80c6e249f6d2927c56fc92687c', class: "height" }), index.h("smoothly-input-date", { key: '4ea99e2b45a8d67fb109177f828dbfcef5a0b97a', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'e570d7d9be3c0de7f94253d830fd1915c09f649c' }, "Date"), index.h("smoothly-input-clear", { key: 'adf60c1a6e47fd6bb04c44a00b485922148a7c59', slot: "end" })), index.h("div", { key: '8cf5257d16d031fb2f8b5da4f43b18d6ceb51bd5', class: "height" }), index.h("smoothly-input-date-range", { key: '9b658f7d3a95228035d1a431ef44ee4a7e9d7e4e', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '370a96c354d6e8cb3ef2b50f390deda2dca7e793' }, "Date Range"), index.h("smoothly-input-clear", { key: '1735d46c5dd3d104680cf0f44768a8d524c5c294', slot: "end" })), index.h("div", { key: '8bc4fbd1c76eaeaccecf66bb390332d908adaead', class: "height" }), index.h("div", { key: '999019f00da141e750ee11e5c891e5b85f10ce7d', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     get element() { return index.getElement(this); }
 };
@@ -9677,7 +9678,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '18c7155b548d7297c75fbcdcd67bb5ccd774f57f', title: this.toolTip }, index.h("smoothly-button", { key: 'e4d1a4839d096e4d38837165120f2aa52e3e7fd4', 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: 'b3a782cc4e31e0ed591469e0de3652d45c582758' }), index.h("smoothly-icon", { key: 'c4a290afa92476402fd6d90c64b5e8a0ba6ade9f', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '21b58cd9091410ccd7e18bfd0e7ef4cbf7f8c496', title: this.toolTip }, index.h("smoothly-button", { key: '9adc403f9d4408ab31aa49235b04ece843f49d94', 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: '141483162e42d7d8ea60ada89c08e61e8fedc28d' }), index.h("smoothly-icon", { key: '2a09d27319264c6ea07b0a98876ad8840983f286', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
@@ -9791,7 +9792,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '3b4ddb236c513e91beb05431f60120ca8d4834d2', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: 'd41f112574e81c041139582cff537ccff478784a' }, index.h("slot", { key: 'afcb22447326c6ed07e60cc5cde6d5a1262d31ee', name: "label" })), index.h("div", { key: '0d4da24f39206461a5a2ee7827fe8a25b3ac9267', class: "input" }, index.h("smoothly-button", { key: 'b781f3ffb91da232fbeab9d6716003d124ded584', color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '03c68009e00d63da49dd05759a67ecccef2d4523', name: "button" })), index.h("span", { key: '38f5220196a9fb97e596344c7b975a9ae339e67a' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: 'b591096ad0b3d59577979fbeb5a31494290ee3d4', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '4362f727fe294d87605fcf9065f6ecd07fd6aadf', name: "document-attach-outline" })), index.h("input", { key: '9aad5893b2af2371e347e4904073291b3683bed1', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("div", { key: '86127cad40ff969c0e4e093843abf6717ee2ad7e', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '33b15b6fd6d91cd1ebf15caf72ad0ee71b892e31', name: "end" }))));
+        return (index.h(index.Host, { key: 'b39d3e741149d0b0e442b352e61b558cdc2bb13a', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '475bd4fb9ff30dc19b9c518c76556c4f3bf1e2a7' }, index.h("slot", { key: 'e19aa48c27ec6240b01766013a5004d0b87bdc95', name: "label" })), index.h("div", { key: 'a6d5c0ecb60b1b66ecb346c33f417fefb7414278', class: "input" }, index.h("smoothly-button", { key: 'd7e74af6c6c97b9c545a9c8d4d638bee9cdb45a0', color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '3194230dd2b45a1a6f808f36e0a8eea187a69584', name: "button" })), index.h("span", { key: 'ce4913a9f28977541b85fe2efa8e173f28b102a2' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '7d5c8206a2f424da4f3d042a2f21a2a2600b6dbf', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '12a26ab3030ff6c43252bb9b735964a89592fb94', name: "document-attach-outline" })), index.h("input", { key: '60b903e6e81a5e4447ea4c87b1316972a1ac5ceb', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("div", { key: '554dbf6b985f049bf1edcd41d356ba3ad22eb254', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '47f15c7c35b9753684db8dd60f851e1681ee60f1', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9912,9 +9913,9 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '5ccfdc5ba5ff18894dba1686b27e530d486386cd' }, index.h("smoothly-icon", { key: 'e88ed2a5d375dc2115b6a5641e7632adf4812433', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index.h(index.Host, { key: '7e05d80ebe8162924f86140f2335b7581c719a1b' }, index.h("smoothly-icon", { key: '2c74fc9ba9e3b9ae40d15f18ec1503270c153bfb', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '1adc8c5b3482f3361a71c14cc8df763b7d9d3464', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '89726337c57f2e0ffb5877e18fc587890167dd87', slot: "label" }, index.h("slot", { key: '10d30a6c951a86e26b38b6b4dc00bb0f72880b45', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: 'e5de6fa1d36dd48a7a734767997e5b5de44c9517', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '02ce5bf3d34f561a1b5055cd9d455b614559d277', slot: "label" }, index.h("slot", { key: '8e8b369633fd82a532ab6e9a398f95c288318dd5', 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: '140be4b06f2c99ac1f27df35f204145916d54feb', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '60babf60bf9354c30c4745750259f7b5bf6835f0', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '424585680e3e999dc2817dea33be756d350a2d02', slot: "label" }, index.h("slot", { key: 'b658f5a779d57cf7731ba90fea7bf1ae5407e107', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: '10a65c08cb5534b9aa34c4b22e933ec13c48c5ac', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'd2d7f290030344d7ebc4ceed10492c9d4fdd45fa', slot: "label" }, index.h("slot", { key: '45b5a1a76f3e832f3455f717f57d09bdda313af4', 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: '432fdd7e4c46f6694bb7e6461a634bc37053689b', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
@@ -9937,7 +9938,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index.h(index.Host, { key: 'c8116e3afeba258c9a0c0c262aa7b4bb3eb6cb33' }, index.h("h2", { key: '207569884a6a4d72ce2e7a0c94313bb2a4f3361c' }, "State demo on smoothly-input"), index.h("p", { key: 'f9bf647ef66f514f17b3dc352cf7665d97b5a914' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '09bd92a3f2d042a07ebd9414c007012cd2e4182e' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: 'd5d307c61b0bd7c1295a77c792cc6defaf75b896', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '30a6f72abad7d7b1ae38e350d6b5efb0c5ada637', type: "price", currency: this.currency }, "price")));
+        return (index.h(index.Host, { key: 'e4342c6db7e1e4c6281497cd786e4d499257c504' }, index.h("h2", { key: '26aa0c16aa87d5dea4bb092e7104a31e2fb26d36' }, "State demo on smoothly-input"), index.h("p", { key: '163708f05a50f636cc0b9c71d45a692ebac5805f' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '7799fc8b8d38da3dc473c2a65fa51d0521db7ea7' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: 'f55a75be6fa0090e8e55f6ea342bcd157167f0fb', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '6a6e28e0695faddf47599305fc6941fd5dd2e690', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = SmoothlyInputPriceDemoStyle0;
@@ -10046,7 +10047,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: 'c9cf5c30bafa72c29e25f104a0234c3fbcb03fe2', class: "floating-label" }, index.h("slot", { key: 'a17ea52619820b20e1b8096273c5c02c8c7120be', name: "start" }), index.h("div", { key: '64c3e5706c30cfd4e80c162e4d523c9834e85f7b' }, index.h("slot", { key: '1ae54c8e13e69b4e6c2a6a4b5fbea76f5b19c340', name: "label" }), index.h("div", { key: '814b6d72ad719bba5ee9ad8b83f43c1db868ed6b', class: "options" }, index.h("slot", { key: 'eef28a3d616223ba5d9368cacf34b71cd4298961' }))), index.h("slot", { key: '4987cddeeefa3a17e37df4d91af127a70f367501', name: "end" })));
+        return (index.h(index.Host, { key: '8828b7206ca74d8442239af614ed6e1b6bfd4bd7', class: "floating-label" }, index.h("slot", { key: '4e255c47813606895d17d8b47d6d64ae24d07c6b', name: "start" }), index.h("div", { key: '7245bb7a51c937bdbc5f051d2c0dc98fc77d1b68' }, index.h("slot", { key: '8ab92b3da53624c8a8f250614317b5809bbaacb1', name: "label" }), index.h("div", { key: '3e0186d2df6a7af43948a4c6585556d5a066b41e', class: "options" }, index.h("slot", { key: 'cafddf5a5aaac9b6f97e0213ae205878367464df' }))), index.h("slot", { key: '0988751cbc6391d5c33ded7b671e16778d0ebadb', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10077,7 +10078,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: '34e265a1414763c3fad2108f82e28692d2f27162', onClick: () => this.inputHandler() }, index.h("input", { key: '6225dca92613043ef13466598c90fbd7de20f7a1', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '79a239091a54d2bcf413f2bac12be04f00bb7cae', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '2ef68546953608546007e7f527ff967dc35c5a83' }, index.h("slot", { key: 'ded60c7700c48a76236415617ae97e9f64921b93' }))));
+        return (index.h(index.Host, { key: '7008f21a9ed4142acfa0994520bce3e5f34d4cef', onClick: () => this.inputHandler() }, index.h("input", { key: '871b7bfca836308c79a02b07aacef3aae6d4a6de', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '963b122dd7f50253995d8dd517a5cc143f534976', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: 'c06d976ea945ac2ccc5b36fb6a0d1c0702187448' }, index.h("slot", { key: 'b9200aedece8fb161fa370fa6cbb9f1838d9e5ad' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10181,17 +10182,17 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '1ce2c2104db6d9ede8b0d4ecdb8b55bdea8991b5', class: {
+        return (index.h(index.Host, { key: '6eb88b4d79900c496a6c0c41ae56fc12b66f34b1', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: 'd3bd884a5fff7b16d8ceade8a218797553f650dc', name: "start" }), index.h("div", { key: '69b6e1b02a7340aace4b877d69fab56d39dd8800' }, index.h("label", { key: '0c258913aef0492c4010872a4835657e49af34b5', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: 'dd06f046bc9497c6b4b4686010ef24e4f30320f8', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, index.h("slot", { key: '21f1f080b371d4418846270c79019dbb5c13b486', name: "start" }), index.h("div", { key: '3cf86a0fe223bb050a81e1fa40c33a52d4bd9089' }, index.h("label", { key: '8fd4d658aa15dfe1841e21bfaca5904e1189ff2a', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: 'd70471f27095e8ba81dad816068782efd479cef7', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), index.h("smoothly-display", { key: 'a92231dcb3c785b370001b12d83c62e606328ae5', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: 'd2652c0063b3cf9c4eb851a7e3c078456a31fc0f', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), index.h("smoothly-display", { key: 'c4024448438ff16146298c09851089b8b24e2798', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '27569cc45c80a0415098deea69de0d82bc41603a', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'ce71f3afa224e3377999bb746e48d3512f3c3d8a', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'fecefbabd8986602931012316fc79dfc7ffac47c', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'd74289b20e2645fefba9ee362e5d4c6d4bf40924', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'b4e6ac8ac6ca21e394f3cc74facf06d48226fa85', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10205,7 +10206,7 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c4f6eaf158f9d0db4f03bf9c23ad4114f8465e5d' }, index.h("h2", { key: 'ad2e7943610fa77e1e06559c45346b5810349ced' }, "Range"), index.h("h3", { key: 'db0def0c2985efc5b24e572547682f197ed8716a' }, "Phone Number"), index.h("smoothly-input-range", { key: '58e23886a3c30a42cb1658130a6e709aaeef959a', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '22ef3ea3d1c2010e5b54419778a51e8cff19bddd' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '0bc29107a8762b328d333245e330fae5a6ba7266', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '5f247e432c49ba3b964545c3a6998f18691755bb' }, "Percent"), index.h("smoothly-input-range", { key: 'ec20bf8bc5f09e05eb3de5592a4a892c19982187', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '27a5f9dfd606f89d4472fbdb88157310e546e6af' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '267231e78b2617d74f8ead098cebba87f736fa27', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '131b200e0682728cbac84bc90c3022714851c12f', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '29b0417ff5545fd2ea363c0a46bf406652cbfa2e', size: "icon", slot: "end" }))));
+        return (index.h(index.Host, { key: 'c812675343d64f3315f190ad1c908d10ace2c62c' }, index.h("h2", { key: '7638d925da134a917c195e141e9f5cc0ab501322' }, "Range"), index.h("h3", { key: '64ea67fce5489026de55211b6de6e5d181de30e1' }, "Phone Number"), index.h("smoothly-input-range", { key: '932e86e4c6df5b5ce4e64b31db597740628f5113', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: 'ccb928822f4f87d9069863cc195febea279b58a0' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '7232e44dd5a8be19b3fd91232b548a090bd100be', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: 'a8d2891ea79f41a2374030da6c8988b4d63dba2d' }, "Percent"), index.h("smoothly-input-range", { key: '4f9558319cf15a5926e4abe175af9abf8727e5f8', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '2b939b4330ceead0aa93bb2932baa0ceca932961' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '7000d532a0a3086942c05676c3a200c8b942d4a9', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '9ab62a9e0238046064533134ae9e251d10837c98', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: 'e97a0579668dd6dc631e23b58606882b9955bb6b', size: "icon", slot: "end" }))));
     }
 };
 
@@ -10251,7 +10252,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '9f43d36705e755a8ab09ee6325ca8b8a892cdd5e', title: this.tooltip }, index.h("smoothly-button", { key: '0df4658be24f7d95e0a3fc88847b0195b23e43be', 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: '9766362cc5419e9d402bd4f0243ee0f21ea1f019' }), index.h("smoothly-icon", { key: '8664049244460293620d4288a68670cf2bd975e6', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '71225baa49eaeb96d36c3d5dc2f1880d33ac2861', title: this.tooltip }, index.h("smoothly-button", { key: '6de9cca047751443fb84b7ab91e24834604f824b', 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: '31f056aa77bbf74bb2457c4999d699e6892ad437' }), index.h("smoothly-icon", { key: 'cb5f326a194a0ccac34d404d921cc858bf77f8a7', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10560,14 +10561,14 @@ const SmoothlyInputSelect = class {
         this.addedItems = this.addedItems.concat(index.h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (index.h(index.Host, { key: '8cb738160ab593a18665f1fe08bc282f953b2481', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '4695a003779caee96940fda0f61f3137b431708f', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '3262db4626c8b2a0d1458e545568d1ee721977a2', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: '68806d26bd68bf890a03e08f950d18827b5fef0c', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '9da251cd5aac188179e56f4e343a1c6e7ab7c281', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: 'd37facb7c4b42caf98207719033713f6797055c8', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '6e7ea3077767d79789ad3fb6ed969936ba5e4f18', name: "label" }), index.h("div", { key: 'c3c58b54d7b7ff7a36958046bb017ff8a514e313', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("smoothly-item", { key: '6382fec03063e2aacb341badd8cf8e3423c29486', selectable: false }, index.h("smoothly-icon", { key: '09078d789fee5d88dbe68d962077397ff97aa655', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '1411419dfeb8dceacdf7c83a2e039b435ca9f0df', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: '4e0632f2279150363b616f4fb562b14531d3a4b9', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '3f43ae2df3bf57d85a7f596e444eb7ec890c1dd4', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '6d6cacb9cca744dfbe6afe9ff04bf24288fa6480', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: 'e4371a6ea005aad63b7f214bd818ccd889521225', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '86c19de5e8f1ecdcef0c4ac66e1340b5802e9280', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: 'effb63b5a8e00d905b301b31f7c97c35e07fc5b8', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '806bd09cc47d8c35bb01901d7ba20e25dcdc0bb2', name: "label" }), index.h("div", { key: '8792bdb77b6c63e36a73a18a767dd57dbae6cc21', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("smoothly-item", { key: 'bc8b6ee08d787ccf0e2b6b4e2f32eeccee6effb0', selectable: false }, index.h("smoothly-icon", { key: '86d925feceb294c2ebfc7a9b427e19d95d203446', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '4e5733106f07af612cbabcfa3d2fa1e248b4e343', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '04091c6a68fa7955b9c4d47234e908360ef55bb9', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: 'c0168cd488ff01296ff962a9ff4636d2df244905', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '2cd4e2a267befbbdc2ef073b43e2df942ca5d727' }), this.addedItems)));
+            } })))), index.h("slot", { key: '9cd4292d4da25894b44297506ba89e4259ea9cd1' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10628,7 +10629,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'bfc524e55353123cf8fc18de363c7e072329e1d2', 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: '438434b7f94ee3a7d8b5cf3ed6c90113221c4494', 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;
@@ -10670,7 +10671,7 @@ const SmoothlyItem = class {
                 : false;
     }
     render() {
-        return (index.h(index.Host, { key: '14c5e6036576547c98a7ba8cf668a3c40fc44594', tabIndex: -1 }, index.h("slot", { key: '9e1dcff147b318d389bd121b106f3bdcb993b44c' })));
+        return (index.h(index.Host, { key: 'a6ebadd25393a75972ec92c5860de2381825976d', tabIndex: -1 }, index.h("slot", { key: '2eefba52d0cc208111208720bb474a3324a79299' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10691,9 +10692,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '38850da5b4f09267ab5be1a98ae26535f2008b2a', title: this.description, style: {
+        return (index.h(index.Host, { key: '01f79c44a6a9f4d3736efe6e4c0ee5ee3f973a0b', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index.h("slot", { key: 'd69c86d46c3ff6d986ccf35213d5bd75baf254a2' })));
+            } }, index.h("slot", { key: '14273a6f60d52b740355383bfe7c419bb5ea14a4' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
@@ -10712,7 +10713,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index.h(index.Host, { key: 'd3cdf10c0c71f4a31069a1093505e1d177c6a865' }, index.h("slot", { key: '1134b7910396a86996af8e4ba53fc127465cba23', name: "before" }), index.h("smoothly-load-more", { key: '2b556ccb24dd5535a7ae8cbb7f6946c7aef22b30', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: 'a631b0f7705f83d340106f042cf5c9e873f5315b' })));
+        return (index.h(index.Host, { key: '88024c5d322957a45010c9898bd110b8f48f1438' }, index.h("slot", { key: 'a585246e4fc2b4fcd240047b8bb1f2b7530cc25f', name: "before" }), index.h("smoothly-load-more", { key: 'f259e7ac58e3297a85a0ce9b843062a969b38273', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: 'a6ad1c4865a75cb75eaae8920fc280a32105ac91' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -10756,19 +10757,18 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: 'fcbfd0b84c409abefe653ea33c2be67a10de3aba' });
+        return index.h(index.Host, { key: '28ddc5d3fca6524101b268794c4d83186352f77b' });
     }
     get element() { return index.getElement(this); }
 };
 
-const styleCss$I = ".sc-smoothly-modal-h{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--smoothly-modal-backdrop));color:rgb(var(--smoothly-modal-foreground))}.sc-smoothly-modal-h:not([open]),[hidden].sc-smoothly-modal-h{display:none}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal{display:flex;flex-direction:column;padding:2rem;gap:1.5rem;max-width:40rem;height:fit-content;background:rgb(var(--smoothly-modal-background, var(--smoothly-color)));border:1px solid rgb(var(--smoothly-modal-border));border-radius:var(--smoothly-modal-border-radius);box-shadow:var(--smoothly-modal-shadow)}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:empty,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal:empty{display:none}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal{display:flex;justify-content:space-between;align-items:center}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>*.sc-smoothly-modal{margin-block:0}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:not(:has([slot=\"header\"])){justify-content:end}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]){cursor:pointer;opacity:0.7}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]):hover{opacity:1}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}";
+const styleCss$I = ".sc-smoothly-modal-h{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--smoothly-modal-backdrop));color:rgb(var(--smoothly-modal-foreground));z-index:5}.sc-smoothly-modal-h:not([open]),[hidden].sc-smoothly-modal-h{display:none}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal{display:flex;flex-direction:column;padding:2rem;gap:1.5rem;width:var(--smoothly-modal-width, 40rem);max-width:calc(100dvw - 1rem);height:fit-content;max-height:min(var(--smoothly-modal-max-height), 100dvh);background:rgb(var(--smoothly-modal-background, var(--smoothly-color)));border:1px solid rgb(var(--smoothly-modal-border));border-radius:var(--smoothly-modal-border-radius);box-shadow:var(--smoothly-modal-shadow);box-sizing:border-box}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:empty,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal:empty{display:none}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal{display:flex;justify-content:space-between;align-items:center}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>*.sc-smoothly-modal{margin-block:0}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal:not(.header):not(.actions){overflow-y:auto}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:not(:has([slot=\"header\"])){justify-content:end}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]){cursor:pointer;opacity:0.7;color:rgb(var(--smoothly-default-contrast))}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]):hover{opacity:1}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}";
 const SmoothlyModalStyle0 = styleCss$I;
 
 const SmoothlyModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.smoothlyModalChange = index.createEvent(this, "smoothlyModalChange", 7);
-        this.color = undefined;
         this.open = false;
         this.closable = false;
     }
@@ -10776,9 +10776,7 @@ const SmoothlyModal = class {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '55c2f1f1340210d9333d909b1e8225c75c533010', role: "alertdialog" }, index.h("div", { key: '954f5c31a008ba74023ec2dae6982184e4b23ee9', class: "modal" }, index.h("div", { key: 'b6475bfb4e9104db3f548340e0d3792293e41f62', class: "header" }, index.h("slot", { key: 'cee7f5b9ede6541f99333e89a737eeefbcca98ab', name: "header" }), this.closable && (index.h("smoothly-icon", { key: '7445c5ae795ca26a4c3eb67dbf2b1cc39327c496', name: "close-outline", fill: "solid", color: this.color, onClick: () => {
-                this.open = false;
-            } }))), index.h("slot", { key: '7b79007759e6857fabbaf98cc1eae82d09c38875' }), index.h("div", { key: 'e908c2f1ccb7a2adc8aa6acb81c76463193899ea', class: "actions" }, index.h("slot", { key: '4430a296cc58e88d5fe971ee5187a2f0974d7485', name: "actions" })))));
+        return (index.h(index.Host, { key: '8bdd830db07503dc5ad7a485ea41fbd14ae633cb', role: "alertdialog" }, index.h("div", { key: 'd6ba6d97bcae9b4110c3eaef01e6f92dc48d9013', class: "modal" }, index.h("div", { key: '1174aebeb08e2c9d31bfe264230ac12a79db9923', class: "header" }, index.h("slot", { key: 'c5422829ad590bae88ff33798fcea80b0df6e555', name: "header" }), this.closable && index.h("smoothly-icon", { key: '1f54c5792caa7da280803c7eedf2eb5dbac7f0ae', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: 'e568a5e424f3be6fdb79917fcfd0c1487c0535ac' }), index.h("div", { key: '2521bd8a631756db112465be5a04bb34a17ba05c', class: "actions" }, index.h("slot", { key: '3e6f6cbf6c41feee3c6b33c0d468f0737d3b7981', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -10794,7 +10792,7 @@ const SmoothlyNextDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2d659622c989d0c858ff5c99ef7fb2eebf1accaa' }, index.h("smoothly-next-demo-group", { key: '6116a2d49ee1beff32f486a8e763716d715b3995' }), index.h("smoothly-next-demo-colspan", { key: '9797073e9d0f80d828febab198252d867fcbc743' }), index.h("smoothly-next-demo-simple", { key: '1afb26d03fa1b8bbf74a1d9e78dd2626a5b4f056' }), index.h("smoothly-next-demo-nested", { key: 'b99a47847d961e9f53d1c38b2ed3d8e158cba591' }), index.h("smoothly-next-table-demo-filtered", { key: 'f98ab76e04a6db9b535b3fb881b42f9405a3afa3' })));
+        return (index.h(index.Host, { key: 'd68c0979b5132c5dcb0764454ace4fc8f4b64983' }, index.h("smoothly-next-demo-group", { key: '846702fef150fe18cfdd909b1a1c2d64c1ff5242' }), index.h("smoothly-next-demo-colspan", { key: '244cebea8a6e51b398ba7c2af2cfc41da80e5121' }), index.h("smoothly-next-demo-simple", { key: 'fda034e25449569e6543e12cb1836d9421a9285f' }), index.h("smoothly-next-demo-nested", { key: 'c00ed11e4fdd08c2478153ce3bd5391fcef86440' }), index.h("smoothly-next-table-demo-filtered", { key: 'd058bfb651c724b5497eb49b93a90480790daf7d' })));
     }
 };
 SmoothlyNextDemo.style = SmoothlyNextDemoStyle0;
@@ -10807,7 +10805,7 @@ const SmoothlyNextDemoColspan = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '863d60dcbb24dac9fbcbeb2363b485216b6ddae7' }, index.h("smoothly-next-table", { key: '86a2017520c71c5120f64043db6f34737dafabfc', columns: 3 }, index.h("smoothly-next-table-head", { key: 'bdb568a54cfeab1606994d76e2c43b5c008df001' }, index.h("smoothly-next-table-row", { key: 'c47bc0abe7389d9728260227a33621dd4a90abb3' }, index.h("smoothly-next-table-cell", { key: '2a702562304985a6236ff0721d98ac31a292fa50' }, "Date"), index.h("smoothly-next-table-cell", { key: 'f8119d6520b3deeb60753d050fdf0d904f9b8afe' }, "Skip"), index.h("smoothly-next-table-cell", { key: '665f69fe52efd3a8a6f2c82bf1e86fb180e55b92' }, "Total"))), index.h("smoothly-next-table-body", { key: '5a3ec0132bb8e868ca9ecda022383e87f2a84c8d' }, index.h("smoothly-next-table-row", { key: 'f507219d430a9b618c1f6d4fc0e2df3650265512' }, index.h("smoothly-next-table-cell", { key: '0ba5a451fe2375c031a7cc1d5acb2c7313125178', span: 2 }, index.h("smoothly-display", { key: '79a3451362a40be095b6be3ff567704ce09e1ed4', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: '81d22251edee07d77f08d653acdb492310509b88' }, index.h("smoothly-display", { key: 'da5487f22adb4bff9d1c5182b9fb8c896e99d9f5', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '8f3d7bb1b2f6ff655e57e4101f9852b795407354' }, index.h("smoothly-next-table-expandable-cell", { key: '48cb036699a8f4744ab125f566ee5048b49b2eab', span: 2 }, index.h("smoothly-display", { key: 'cfee0e93f05e44ca04ccd51f42ab40ea947b5af4', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '1151792f83953b2a73b225c0880963062c51263a', 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: '58e005534cbaac02e895223c6ab3002b5fbfe13e' }, index.h("smoothly-display", { key: '9cdff71fea6184b56e062f065fef18aaeb785d41', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '371bfe562b9f60cbfc14ab960cc8de40a65ed059', 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: '36a5e3ab529e2948b7a99198d1a2a10ff4ef67c0' }, index.h("smoothly-next-table-cell", { key: '1ce4ff81f76a856caba6e9312370903b89d97a62' }, index.h("smoothly-display", { key: '128ed619ef2b09e0711edc49d2b7fb9e007c1dde', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '6638aacbb3bfd7773e107cfc308b3a11f31b06df' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '5cfed8b41811973bac89e4d2205037f188263022' }, index.h("smoothly-display", { key: '7a9a1d127e35f13ae546f59fc6b27be8d47f0d30', type: "price", value: 320, currency: "EUR" })))))));
+        return (index.h(index.Host, { key: '322f2b276edccd53dfbaeb0a69c3fa177b43cab4' }, index.h("smoothly-next-table", { key: '5f6c1454afd074f410af1bc58b9051e4cc4565a5', columns: 3 }, index.h("smoothly-next-table-head", { key: '996f681fb42d9fa100bb6c1db890d63b45380aaa' }, index.h("smoothly-next-table-row", { key: 'f60c3d4f82d89ff57af38bb496f40d6880e65946' }, index.h("smoothly-next-table-cell", { key: '59ecdb00d518b081233441162f059f0351886a01' }, "Date"), index.h("smoothly-next-table-cell", { key: '4a0fc107f01a3f5990a66d72567fabd5d724f9c0' }, "Skip"), index.h("smoothly-next-table-cell", { key: 'dd73ce38da65de83632820b21af6f05ee07c3828' }, "Total"))), index.h("smoothly-next-table-body", { key: 'fbcd74ddfd81ca8b654a52045f9ac67a2ba086af' }, index.h("smoothly-next-table-row", { key: '974ebd927a3349cc5cee1a5f07456b8a9d04ed3c' }, index.h("smoothly-next-table-cell", { key: 'e23508ac94205d46507bf4035327ba6b8de1c59c', span: 2 }, index.h("smoothly-display", { key: 'ce6dec493c93ab4b56ab766b18a887a5c04b9a88', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: 'b0e802c95f68f126a100154ad9141fc96d4683bb' }, index.h("smoothly-display", { key: '7deb4d4111349fef3aba452cda451f362803ab46', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '77fe0794effe69b2000fbdb83868ed0553d0272b' }, index.h("smoothly-next-table-expandable-cell", { key: 'ac46fc6b2e2e86c40841ba4a3454e67dbf7879fa', span: 2 }, index.h("smoothly-display", { key: 'a8a251e544f1a96f0def89f33431b93d19199e8c', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '707e9fa0004e99b78f509049ae4f8e1abb5aaeb9', 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: 'e94393b2fe556d7a9a66d01f210bf78be31145e4' }, index.h("smoothly-display", { key: '3e9fe0dd066923340c8b6950ac5658280bb4b3ca', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '000469e04b9c9c1decf3bcddf9dae83d57bce855', 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: '1ac46694973e9a7d6ed7b0f963b0821627a9ad60' }, index.h("smoothly-next-table-cell", { key: '6ce70e4a0ba8adc455e96d66c4242730e332dbc4' }, index.h("smoothly-display", { key: 'b63c0e82edf8c8d461b5bb4127724fef865b98b0', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '52cfc79ba1e09a72172d85510627bdad36096874' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '26e4310cfde062fd1bb1edaf4d70e00007633906' }, index.h("smoothly-display", { key: '5f7a96c719a12e7acbc7a26d10e5e39abb9c5cef', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyNextDemoColspan.style = SmoothlyNextDemoColspanStyle0;
@@ -10820,7 +10818,7 @@ const SmoothlyNextDemoGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '098ed5721d47488e2ec477b9393c823820c6cc27' }, index.h("smoothly-display", { key: 'dd1efeab82fb14a8cd01daa0f65a6a1133b7c56d', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: 'd57da525c8dbf285ae8f13feff66b272cbc205b9', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '2ca8db41ef08ceb2142216d1cf21b139dc7a2fbe' }, index.h("smoothly-next-table-row", { key: 'a7328b4727a996bd17d34acbb5bce696d8fd3183' }, index.h("smoothly-next-table-cell", { key: '2b6945b5ec49cf167def8836efb0646cbbeaf1ac' }, "Date"), index.h("smoothly-next-table-cell", { key: 'bff797c9c0e8c6a0b1da6377c3fd064d8def3580' }, "Total"))), index.h("smoothly-next-table-body", { key: 'c90fd640f2a5787a06dfe762d9fd631e9cca2529' }, index.h("smoothly-next-table-row-group", { key: '660341da58c29a36e9de0711cf4fd8cf7f0613e0', align: true }, index.h("smoothly-display", { key: '6140cb3390f7c123959561e2916a6fca7f28bf31', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '61d1f473b3b33809ffc4c005da03eb767582ce1b', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: 'ce246622ccd9204951c2be0c94e9ee495b3915d2' }, index.h("smoothly-next-table-cell", { key: '81c5dd6c64900f3e376d3eaf7d9c204edc574643' }, index.h("smoothly-display", { key: '33b919b9d1021fcb727adf948489ca87ff5059ed', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'cb2babe50a9d191c6cb7d853aea120e1e79d9429' }, index.h("smoothly-display", { key: 'eb6fb1eae1908c85d7007b3e60e62a6705361eac', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: 'e6b14e6ab80fefffd5f3bcebbf5e2b529e7dd30b', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '0569658810e92d68178e32e581d6d156bb66542b' }, index.h("smoothly-next-table-cell", { key: 'ed6c9b7bec0626d3599522de48db99ca56461e97' }, index.h("smoothly-display", { key: '2221b82421625b49f8d93172048ab1accc4c9516', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '7b5c48ec7382adbfd0ae09ecc0773ae1d2cc1813' }, index.h("smoothly-display", { key: '3ad0e0257a4533771b6f4a6171b58eef3978d01e', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '2f705c8df0e36b29e754111cf2fad9a50d698470', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: '9d8d4146047389b3785c373581b370b566091aef' }, index.h("smoothly-next-table-cell", { key: '8dcdda4a2199230964efbc40fdd34fb96a73708c' }, index.h("smoothly-display", { key: '3eaa32a3b770c08141fea8e4e3825df05d7f1385', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '88e888ebfefc53306dbda2bc4b79af720067c62c' }, index.h("smoothly-display", { key: '83fdd526b47911bb505b3022f9166cbeed5be1e9', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: 'ff7d7d907064a03d3b305f9206447faadef1d8b4' }, index.h("smoothly-display", { key: '398f4c4134690c222465457b74e5c9f33e15bea3', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '2a6643526985bb2b9fbf457f5c247c0ddb21f121', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '126e1e14e4c868bf8e917d0b1bb62abe9d834263' }, index.h("smoothly-next-table-cell", { key: '93de7d772975c6472829aa1aaba6735b9c45d9d9' }, index.h("smoothly-display", { key: 'e1309d73225d0d41a1be70333e89544807f96eb4', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '55c7077b8d8d08ea25c2d78042c3efcd9cd50063' }, index.h("smoothly-display", { key: '22649c3db71f226608a9349400fcafca36732d60', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '96b6496da8666362e43f581286b1d6e09f9cf996', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '6eb7273a68de8ed4a288de23b6a8f7f551c03d3b' }, index.h("smoothly-next-table-cell", { key: '384e2a4178690c3dbdb4cfdf2d3f426ba72e46b6' }, index.h("smoothly-display", { key: 'd3a6a99e88675a4e9810700f1d77aec339e0fd44', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'aeb9ed5b36e968a92758b200f4b4b2fc5c1eed13' }, index.h("smoothly-display", { key: 'd43781919082cc7a2818dcbc17dcd5326cfa5429', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'c1cc2c71b325b5be4c63c860ebf88e82a0f9532f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'a6aa1319c12ccd85aa9ab8c1833518c07f50cf7b' }, index.h("smoothly-display", { key: 'dc814abe1975a6081df2c6c3d672aef43403d4f0', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: 'a3e055345196beaf025b1356b5da4373231e6a55' }, index.h("smoothly-next-table-cell", { key: 'ad8654dce8fc763ade47c7bccc96d0d3a0245e76' }, index.h("smoothly-display", { key: '03f954e5f3fc7c733daec96ce0543e7222569973', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '2592d4276b13d7c77433f464f3472b432950858d' }, index.h("smoothly-display", { key: '9f2239869708cbe1872c68914699fcab84e6ab4a', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '79b2a54064d04089c383dc4cfd4ae5f8e094239b', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '45d159bac640c5c67bad19259c740525b7356746' }, index.h("smoothly-next-table-cell", { key: '544c676ba2c672a0bc823e18a5da45a06af25a66' }, index.h("smoothly-display", { key: 'f1906c649bff5e97455edfa75d46a90b6b7440bb', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'b1521586d42c9f051ddb34c1ac76ccbeda413444' }, index.h("smoothly-display", { key: 'c851e204cc21be7cf46fd48e4c7bdb51e7309061', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'eb60f28b135b665f6df21671505516509c306c93', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '52b97099dbffd28b10d3d9ac6cddcd43c6ac46eb' }, index.h("smoothly-display", { key: 'b25f15111a3ae40459bad88105664137bb9c5c25', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: 'ed596717f2f0c23dda162ccc1719f55f26d90b5a' }, index.h("smoothly-next-table-cell", { key: 'c22ca646f532bf0fc33741cd0d40e5a05bf8bdef' }, index.h("smoothly-display", { key: '90b35b8c41efaff4f47ef12279cc0f8359b7882f', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'bfed43cb324809725291bab3339defd4740b9bb2' }, index.h("smoothly-display", { key: '53a108a9ad9da8b967a8b898701b01b0ca984fbd', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'd409764d0635ee33ab0f04b2dab33ef6968f8da8', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '93c06480664e31ac9bc5e314ff94ba32db0c9ef3' }, index.h("smoothly-next-table-cell", { key: '32743eee5e81c83c74fe3012d65c030cd50f89ef' }, index.h("smoothly-display", { key: '54adb9253ab0cba0a0397b2b36338773874fcf38', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '4712e6a9380253720263525ae35b0ead96fffbe9' }, index.h("smoothly-display", { key: '561d24102faf7ff31bb890b1e286529196cd828f', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '3c3916db65c4b86c5d552624583da0db34b3cb42', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '142d1c5b627ae92a1752f7d6ef06d501441cc32c' }, index.h("smoothly-next-table-row-group", { key: '283b4de00b567ae384979c71491ae5b1da68b8a3' }, index.h("smoothly-display", { key: 'c2528bbaee0d1768089e3d65f640c2ec4dde9b17', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: 'd49a4418315e316666a2498bbc7219c9127ed44c', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '8d8156af71ecd1a2191da0c3f6ef0eea2069d2f5' }, index.h("smoothly-next-table-row", { key: '7b5fc6cef1ba76f8d2dedb7bfc7db3a2334a7954' }, index.h("fake-cell-wrapper", { key: '07b950bfa6ec9d08e25044055611bbe33085eb4f' }, index.h("smoothly-next-table-cell", { key: '735b7f2bd5696544ea2dac10b4334c703c1d3916' }, index.h("smoothly-display", { key: 'd48e34a42b66af9e6e3128c7361159bc8b6783e2', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'b796aa04e676ff95464d7a1e57515358eca59244' }, index.h("smoothly-next-table-expandable-cell", { key: 'a2e7beb3bc66ac381882d6436aa95ba40fea927d' }, index.h("smoothly-display", { key: 'cdd6557f9f5be1e75e619aaa43c7be25ecdc25bc', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '373b952c59b56bc9c86ca73716ef260b3e6b0495', 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: '6002630598a704756ab1033d4add3e5be3f70da6' }, index.h("smoothly-next-table-expandable-row", { key: '280218959b52cfddc1d0a76d09d00ea16ce1ceee' }, index.h("fake-cell-wrapper", { key: '929b56a60bb688bea8c0216ddd30b4115ced99e4', class: "span-2" }, index.h("smoothly-next-table-cell", { key: '14ee5e81ebcc49152e4312f76f8bb48ec7705e63', span: 2 }, index.h("smoothly-display", { key: '56d758a97fc974cb4252f13920f17b365561e74d', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '810b564db032af7aa940eaadf47c60fb24d737b6', 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: '0d82be7690fa661b08f06269839abfc01a343530' }, index.h("smoothly-display", { key: 'f917da5169a8cf3b3291f2a7569f940f7b55704c', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '54a827feee811e4af7e34fea3dece9f583f65fbd', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index.h(index.Host, { key: 'd04e8c35153417e76bba14acd36ea4ca7a55c3ec' }, index.h("smoothly-display", { key: '45973c766fa5e9f2de58fb465f175142a750e3db', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: 'cfd126eb4d264e375b58967c659235d736b50c3d', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: 'c3c4ce2044e020cf2745fa8dc40df3c19ca24f63' }, index.h("smoothly-next-table-row", { key: 'fad438c3509dfff4df18082c0b57cb650895e546' }, index.h("smoothly-next-table-cell", { key: 'a53c5c4be617d724e5bc05d2511f983f85b3172f' }, "Date"), index.h("smoothly-next-table-cell", { key: '4d058ee9aa113d8ef0148b96e166ea774967d144' }, "Total"))), index.h("smoothly-next-table-body", { key: 'e0f0747e86439ff3d90f3a6171ca282731eaf358' }, index.h("smoothly-next-table-row-group", { key: '15511e13439150b8a92d52391f21b01d9be82b8a', align: true }, index.h("smoothly-display", { key: 'd6025dfbbd9a9b4d0fa0a7903937d3ad372201a5', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'e0741caeb2ae307a4307ddb757b38fe536c32122', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: 'cf3287e8015acf361d1590fa81f364c3a511a661' }, index.h("smoothly-next-table-cell", { key: '7aa5daa4614bab82c0483f39f7d1fc552c6315ff' }, index.h("smoothly-display", { key: '2edbf7c3201bf10ab21941bd7cd6496307cd770d', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '1bf0b2f56c52546c8691a812c7fb689608580fe2' }, index.h("smoothly-display", { key: '05a8761b2b0cb683363709c4ec5371a824abfa71', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '17b67e01e33757832dffa10015a31affe9500036', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '28f2b114fb220d0adfebdbdae124bb2472ca30d6' }, index.h("smoothly-next-table-cell", { key: 'a200b2197ab8b94e9b3c7e95824f9af8a835e79e' }, index.h("smoothly-display", { key: '9a688195d0a5905f540197085211c6f1e5216d17', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'b20029908c653d5faba884752364c3b3a5876e05' }, index.h("smoothly-display", { key: '8784939571b6805fd657ada73847695e8fa0163f', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: 'b9be8d6d6176960f7a049c20c2edbc14fa88cd45', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: '668ce58755d59879479a02ff46f54a31053fae0f' }, index.h("smoothly-next-table-cell", { key: '7e14ed0793eaf28b4b30a1977d866de86d16d564' }, index.h("smoothly-display", { key: 'd5db14298acd3818a28504fdf90157be80806beb', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '8be549ef0cb3aca8cc88bfb5d7f7d80c10d1d085' }, index.h("smoothly-display", { key: '73e18de7dc992c7bbf44afe16b1f9d2fdbf1dbdb', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: '587669b4c01cd33711a28c8f8d2ffa51f4a42ac4' }, index.h("smoothly-display", { key: '28954087fb6438f6ac144677d95ca4ce8ddf1db4', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: 'bff26087e74f633be84cfdaa1b2b3c0c2212644d', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '045e21ff3f3e7369e5c22227165fd6924e95a7df' }, index.h("smoothly-next-table-cell", { key: 'd48c17ad4d6ad581967bdf285d6f48f8ddd3a2eb' }, index.h("smoothly-display", { key: 'd035a6fab995d18389b87320dffd61142acaf3da', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'cbdca0f53679358b66b71c0d0d5ea6162e07cacc' }, index.h("smoothly-display", { key: '2550e158ae294def827bee82d598c428e300f77c', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '808b6848a47f39544c75106c8fe52d67946cdba1', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'ca2f239d8db4b65c5ec053c606fb78ba9afb3d92' }, index.h("smoothly-next-table-cell", { key: 'b323b68935ab2a21bff9c48795bcdd899ea8c82c' }, index.h("smoothly-display", { key: 'b80e960842a48f8d9f7444dfd15794eeb881a992', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'edb157281e51e08030d353e22d5f3622c03fe82c' }, index.h("smoothly-display", { key: 'c340c065598212a016fd43052b69a326350a7e7b', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'e123201f6341fb44b62818e793a5e7c2c34e323f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'a766e561ba2f5f270c394ee301c650c2d76a6884' }, index.h("smoothly-display", { key: 'f87ae1dd2860d7a5ed692157b87ba3dd2efb8611', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: 'a6fdb5701da825cf3c9fcf8d695e808cc2e5874f' }, index.h("smoothly-next-table-cell", { key: 'a72fae772e958d7d22a688db3a2a81d0c4abf29b' }, index.h("smoothly-display", { key: 'd4f6c8135a71be2eae4fdae73260aeca39a1ee38', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'd039c7016265c977cfef3525e3222c03362fce99' }, index.h("smoothly-display", { key: '50ec614595e3ff2344b243315649d4535c64eb06', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'c1434b0eb47245530e0819275a1cee6ef8271e2c', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'e9e6ebcdd9cef452818d28c71c596a1242b0f205' }, index.h("smoothly-next-table-cell", { key: '2733ff9bc8e16e4acc0a6d9e9c8cc9d886c44558' }, index.h("smoothly-display", { key: '33c4db0fbed9d0221091032fdbb4c1b6c8c5f30b', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '3b29e90b233fd7260c04ca449b65e3f7173c090f' }, index.h("smoothly-display", { key: '978af4218d9af91ff45a462ad6792e5e9eb37a3e', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '66218c9e216b8e4f976442b0fd177ade75ddc42a', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '446d0e34d7ccc20a433933864f46f14b6a4c12e9' }, index.h("smoothly-display", { key: 'f7c4e5c34c0ccb49c07180d54cc576abd3304108', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: 'b9cc6547eb1b3a0bfd7c8825651807b11b86ee40' }, index.h("smoothly-next-table-cell", { key: 'c61156c4d46d9ed051e50a3728c0f1c6e5f11102' }, index.h("smoothly-display", { key: 'c7ec764a0932d07bf8bbe8f5c9c2874d24e71c7d', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'f516de923e16af3f1d81638d9944d3fc29ad011d' }, index.h("smoothly-display", { key: '4be7e012c8849ab7c16c248caecc4fa7cb07473b', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'f92b87c1c882a17362d34fd7113201115a1fc6f9', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '3585351b9a566e40a1a81d3d04e65c3d71ab3489' }, index.h("smoothly-next-table-cell", { key: '4985799bacb6611fc366e079989eb8b96cbef8f7' }, index.h("smoothly-display", { key: 'c932c83068a8786d70e88eda742172a85ad3bc12', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '0d3a603683cd7198c47f98a5c2fa04b8d5ed7ed5' }, index.h("smoothly-display", { key: '72e4a955d95f296bb1b4e23fc516bfa2318a603d', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '90f148647cea3373df3842c92b3dd3e1af24de89', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '77c771394227915988cb8045248c3bdc9d3e7da8' }, index.h("smoothly-next-table-row-group", { key: '1e309ad2bc941f611621adad1ee35d1426d373bb' }, index.h("smoothly-display", { key: 'aeb8df50733526bce7d1c2b45c7e662fdf4a27c1', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '23234d0f7215037c4e0e4a391acf1a224a822a4e', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '1441d65eac330485a0d67ba4da04794701c2a3f3' }, index.h("smoothly-next-table-row", { key: '99169f5e4843630a88cf4ba2feb8995dd1c7a6e9' }, index.h("fake-cell-wrapper", { key: 'f8728758cf1fd2820aa3495a7b14752bf2b454bb' }, index.h("smoothly-next-table-cell", { key: 'a9a795b78df65f1ace69e3a68420a1eaa12f76c9' }, index.h("smoothly-display", { key: '671e72183571983d83cfc9bb12c8ca42289e28bd', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'f63a4cf639ce50a82ebb1215b28198307009498a' }, index.h("smoothly-next-table-expandable-cell", { key: '79077527b9db7986243558f6283a57976fbaaf52' }, index.h("smoothly-display", { key: '4a1684618784970112d56021e33f072efaa8a7af', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: 'e0804b12698c1f69cf02f1ddbea48e6657405881', 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: 'f5ca21a477eb968f7e368966b21e94e215ef7f6e' }, index.h("smoothly-next-table-expandable-row", { key: 'aa84b462d7f31077d57b2edcec07bb964fd22a13' }, index.h("fake-cell-wrapper", { key: '19dd81792f7b4c6e194ddcfbbc3487faee27a5b2', class: "span-2" }, index.h("smoothly-next-table-cell", { key: '0d7c1e44d6ec12f464b3397f2cdb33bee34babc6', span: 2 }, index.h("smoothly-display", { key: 'f29965447072706a42077fc644b9edfc2851eee6', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '66bf15ee9b7ac24ac4807bb12aef379d8bd2e34e', 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: '8e7fd297cab98d86eebd601f8a88e28d2a617602' }, index.h("smoothly-display", { key: 'bee4e8292c9a724d39fe4595d8b126905874e2ec', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '0b2dee430ae48168b00c93e5550e6746bd608025', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyNextDemoGroup.style = SmoothlyNextDemoGroupStyle0;
@@ -11766,7 +11764,7 @@ const SmoothlyNextDemoNested = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '89a29e89849460cc58d0086c4ff8a72f24cda894' }, index.h("smoothly-display", { key: '43ee80dbf910dca06007da141f97aa6ab7305957', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: 'f94c8585784ae56550e6719fd995b1165fcee86b', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: '506fb8a08658b92c019456533fef433b7f05ef42' }, index.h("smoothly-next-table-row", { key: 'ec496a2aa1c8bbfa6e5be6859fcecdfbb857ed5b' }, index.h("smoothly-next-table-cell", { key: '9c0ead531c4252c40dfd90afae6ad784a404147a' }, "Id"), index.h("smoothly-next-table-cell", { key: '2a0e555f9834b8442ec322e31eb0d1ca22f43fcc' }, "Registered"), index.h("smoothly-next-table-cell", { key: 'a9c816eefdd26b12f25d6c33df292fb2d8aeadd0' }, "Name"), index.h("smoothly-next-table-cell", { key: '2b971a0bbf8d2d9fb8e3ca6da5f7d543ccbc1294' }, "Age"), index.h("smoothly-next-table-cell", { key: '6394e8b66f3d1c7cdc1853b4f04ff64fc9a2986d' }, "Balance"), index.h("smoothly-next-table-cell", { key: 'bfd49029f94b71374618ad4430e8145be86eba55' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: '0a6de0a355ac00a13c2140c3ca1a790bd04abf5f' }, "Gender"), index.h("smoothly-next-table-cell", { key: '685f62027378dc13f55a907bb461995983f0f14a' }, "Company"))), index.h("smoothly-next-table-body", { key: '860ca5a46e781a229ed0e269a1efb41b71e96f6c' }, 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: '8a83d1b386433b339047b7a5030aa480b359241a' }, index.h("smoothly-next-table-row", { key: 'f6664b70aded827756499df90c3adc1c07ec84d8' }, index.h("smoothly-next-table-cell", { key: '4cbe5897de6711eb7f42671a8cf2707a032cdd8d' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'ddf7f64df031f06696e64fafe3e78a7ffe2773e6' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: 'adfb7e48147e8015dcb72757c2b31d106a879127' }, index.h("smoothly-display", { key: '7d9c5c7d09369e813b55be6268631b75be70ca2c', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: '5fd37fde775e88fafb20d6784fe82be3ed86412b', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: '525cc6d3a6ae46999eef64fac6041b5fde216238' }, index.h("smoothly-next-table-row", { key: 'e16e37cfb054582e50b38a0dd174922db5274aa1' }, index.h("smoothly-next-table-cell", { key: 'f73b540b514009242730f53813e5781281dff4f6' }, "Id"), index.h("smoothly-next-table-cell", { key: '3b49084a612ccaaa24b5fe1a0f3b5cda68f8c91f' }, "Registered"), index.h("smoothly-next-table-cell", { key: 'd61176c2d4004786a8d46de386014185d7548593' }, "Name"), index.h("smoothly-next-table-cell", { key: 'e8c020d083e9e8646cac57d5591afc555c49df79' }, "Age"), index.h("smoothly-next-table-cell", { key: '236011cf9fac056411a3a01ec487b4169235693d' }, "Balance"), index.h("smoothly-next-table-cell", { key: '52bf0214223130e7ae5e3362f3fdef899fa7d589' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: '7158968cd3f0558b82dce2bc62b83fc1db1fdf73' }, "Gender"), index.h("smoothly-next-table-cell", { key: '3e91a70642866ff714035819f4e016dff8ab308f' }, "Company"))), index.h("smoothly-next-table-body", { key: '74bd43db33fd5533be589117bd471eff82c6bc70' }, 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: '68462c407816da7d352f66f79fc5c294cc076330' }, index.h("smoothly-next-table-row", { key: 'fc862a5173ae9ffa04b6ba81862d71f267b82021' }, index.h("smoothly-next-table-cell", { key: 'e262856b8354c0e76ade754c6a742b0fe4eefe63' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'e2d44a80f3e499006a0cef3b9c2b4e611b632342' }, "Footer Cell"))))));
     }
 };
 SmoothlyNextDemoNested.style = SmoothlyNextDemoNestedStyle0;
@@ -11781,7 +11779,7 @@ const SmoothlyNextDemoNestedInner = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '7d6a874d2afbf62bd1e49e7dadc0b65145ceb136' }, index.h("smoothly-next-table", { key: '72bfd023b189d08e1f3857b4ea26fa0708545fa0', columns: 4 }, index.h("smoothly-next-table-head", { key: '56c59bfce6ec946222917e48876c996cef0b114f' }, index.h("smoothly-next-table-row", { key: '6fc38c165ad49000675b2e71337b154f08eab75c' }, index.h("smoothly-next-table-cell", { key: '34dad67ac1c2fbbf800b13b8db670b7b175cb23c' }, "Id"), index.h("smoothly-next-table-cell", { key: 'eb7238e744ab1906c743f0964fb42abdca3245f3' }, "Name"), index.h("smoothly-next-table-cell", { key: '68a6e03c09b6383fdfd3e2bfbd6675ebe1e9a471' }, "Age"), index.h("smoothly-next-table-cell", { key: 'a25a964780a82e726aad0ad1b5f63ace20f3c9c8' }, "Balance"))), index.h("smoothly-next-table-body", { key: '869c690e4e6f01353729f9ac50c0f4e9f2a474fe' }, (_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: '3cf46f42688d8bdee372084fa0b04314b810a462' }, index.h("smoothly-next-table", { key: '5674e02750e768a5a9cafe74c8475434d554a77c', columns: 4 }, index.h("smoothly-next-table-head", { key: 'b065dec611549c5274030e465445903f88668d3d' }, index.h("smoothly-next-table-row", { key: '6ea7335a05a669cf8a961e4f00bcac956f0743d7' }, index.h("smoothly-next-table-cell", { key: 'fdc8762433fb24d53940f356b367e56ab65f4280' }, "Id"), index.h("smoothly-next-table-cell", { key: 'fffb7b25554673c87e0d3ef3f496bbdf15148c58' }, "Name"), index.h("smoothly-next-table-cell", { key: '4a796bea3dd4973ca3d96d69b36cced794d1b5c4' }, "Age"), index.h("smoothly-next-table-cell", { key: '2498f69c7dd78568daed63fc696ad59a47d29e9c' }, "Balance"))), index.h("smoothly-next-table-body", { key: 'eadb0ac227b2315d311d02031bee05623d33fd24' }, (_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;
@@ -11794,7 +11792,7 @@ const SmoothlyNextDemoSimple = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4bde0d3ee7c28e70e0dd2d07d26f34161d91511b' }, index.h("smoothly-display", { key: 'd379a2be5cd14894d421027c1df1e4cbc01fce58', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: 'f13b6ea02d48139757a2dcbd3cc9511faae2cc5c', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '37e5984ada87c5549c3c72787b03cbb5699796b7' }, index.h("smoothly-next-table-row", { key: 'b129724ae15b6b5a5d55a4b423c555961462a9cd' }, index.h("smoothly-next-table-cell", { key: 'e14c84c49572af67559022e715bbdc8e77366bc1' }, "Breed"), index.h("smoothly-next-table-cell", { key: '36f4fe71c8b0c669bd2c60d2eb0217e504960474' }, "Coat"))), index.h("smoothly-next-table-body", { key: '8efcce79368d3d1ce2009fc589d87d388fa65246' }, 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: '6ad4da6d8254eb2e64b5ad95514f17b4dac3b4ea' }, index.h("div", { key: '8e5582d2068a4c471fef3325b8a9b392474599cd', slot: "detail" }, "Content", index.h("br", { key: '89a49ed01c77bc9a864b2a06eaa1cd81871deddd' }), "of", index.h("br", { key: 'c376c9dcc6b7f97d905016163d34f31067c176f5' }), "the", index.h("br", { key: '48add0198d48e7de1829ae9e21f2f98c46bc98a8' }), "expandable", index.h("br", { key: 'd21a93e148002f3783f024f1737fea9f4fe21d43' }), "row"), index.h("smoothly-next-table-cell", { key: '64e5d929f5f8d30b4e9f421b48656e29e7029056' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: '279cc7f765ccd463e40c6bc0368f50bc9964cf26' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: '9b49c8547fd78c8b670515bb99f1e4136cca1890' }, index.h("smoothly-next-table-cell", { key: 'e09983c68e376c1c7e8f4c23a2498a9c727fbda0' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: '752ae4c92abed2525084cd21ed2554252623a6f6' }, "Expandable Cell", index.h("div", { key: 'f42d3c7d4af3e3d14d7027dcef0edecdd350ce78', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: '0e2187a7e759f2561ffd9d5e650fad0843161118' }, index.h("smoothly-next-table-expandable-cell", { key: 'a321301b2264a6d661a872549582524d8cf9c69a' }, "Expandable Cell 1", index.h("div", { key: 'f9c076bd684723346e39684abc2b585c70465772', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: 'ca4c51d9ee0b4219c6229cfabd8a449fb5ece100' }, "Expandable Cell 2", index.h("div", { key: '59d6bf2e25ed1ddf51573e11bb8a54878adff248', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: '1c1388ae4a1a8081e370fe2402ae1e363b42e95e' }, index.h("smoothly-next-table-row", { key: 'a8725994945941a86df354860dab9b77e6b9bb4a' }, index.h("smoothly-next-table-cell", { key: '07d2b050686f1df849f9e67ab42cb86c51cf9c68' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '785026444230779dc76d667b497cd3f0b3670ae2' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '8e92dd82bac65db9f446b2fc2284ccfbac64a8dd' }, index.h("smoothly-display", { key: 'e086e8c5a183509e94cdce8d840ffd09d2a31fd9', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: '2ff1d639364df62dd128c24c40d000c6a8aa8dcb', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '4c7f07d1f22934cbe522079a80d17a83d52440da' }, index.h("smoothly-next-table-row", { key: 'e6b01ac01b4463c166ac21857ff0385ba8fa15d8' }, index.h("smoothly-next-table-cell", { key: '95fdbcb2794b12f570d2505833a915b810f1f6e9' }, "Breed"), index.h("smoothly-next-table-cell", { key: '5ab8ac49bd797995bfeb04c2f3ab6dfdc1905e2c' }, "Coat"))), index.h("smoothly-next-table-body", { key: '09129020f0828a76250fb8d2500d01cbe807cab1' }, 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: '7b3b756098f77dd01e37c66b9a01798d35483ab8' }, index.h("div", { key: 'be3224db8a7d6da2ccdb59f23696fbdc5d28e59f', slot: "detail" }, "Content", index.h("br", { key: 'e844976e58bfb731c29ca4725d7f67f8e819fe86' }), "of", index.h("br", { key: 'd967b699eb1ae184b4a6a7a469e0a4956518881a' }), "the", index.h("br", { key: '431efe0f037c9d83259aa968974b221ed6782fdc' }), "expandable", index.h("br", { key: '7231b5dfbb73b87829cc39b217bf2c5e91b2be7d' }), "row"), index.h("smoothly-next-table-cell", { key: '5940b87bdfdea6b626062c602b041120bd638310' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: 'ecc2d764d47ddd7006f3a1b8593798b8bb6dfbc9' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: 'e81962ddab33db641e329378b3a0d8941adf10fd' }, index.h("smoothly-next-table-cell", { key: 'a893df7ea912997fca138c6b5018afded0a76f62' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: 'fb7dae6b510c9fc0b3843fd44c183697b90f96f7' }, "Expandable Cell", index.h("div", { key: '190c3258c4a67751712c3b3776b9b13f18ca28c2', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: '8b364487ee3cdcfb7932dd6c40b9b595a45cbe80' }, index.h("smoothly-next-table-expandable-cell", { key: 'fab2682005c738d3da178cfe8da3d61da224e782' }, "Expandable Cell 1", index.h("div", { key: '039b067965568e0d0229602afac0d3c6772b2bd4', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: '9c5eb5eee6c560306951c3d72d228e5cd8d6e8f3' }, "Expandable Cell 2", index.h("div", { key: 'bbbea858863f79a46bf67d050da123215190b3e2', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: '4569ddb85016ea8fc52eab67fa0a86aac0ea0870' }, index.h("smoothly-next-table-row", { key: '3b98144b36882bc7e912a5fe0fa2078431e55456' }, index.h("smoothly-next-table-cell", { key: 'dbe61e4ed793110155b3c0431be76c0eee6d8275' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'c6bc22e00fa6b3648de09d5a132bc618b9900d99' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -11883,7 +11881,7 @@ const SmoothlyNextTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '43c249ace5297e238fbe927d386c09ab1bac9d8a', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '0ec05adc401a50ba6060062442c44a8a759320a6' })));
+        return (index.h(index.Host, { key: '5d5975a4d43d7dace5b52a4acf0ffe82af226a30', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: 'aa7fa731be6c4e0db99cf5460a4c9dbc2ebe0647' })));
     }
 };
 SmoothlyNextTable.style = SmoothlyNextTableStyle0;
@@ -11896,7 +11894,7 @@ const SmoothlyNextTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '505af2c36044e6869d86dc6b26e6302828c34a97' }, index.h("slot", { key: '3d487bf713a64ff2d7a1c3d24f560f0af336d413' })));
+        return (index.h(index.Host, { key: 'afa8929413ad4fcfd8dc091695a46d33666ad94d' }, index.h("slot", { key: 'e7e13990accc4b9cd1532a22d14b9e358077f453' })));
     }
 };
 SmoothlyNextTableBody.style = SmoothlyNextTableBodyStyle0;
@@ -11911,7 +11909,7 @@ const SmoothlyNextTableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'f9dbda8d6802f5e706add1c4dbfa886b2d09f890', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '21817f6a421f8c6171ce1cb608ca6740210c59ed' })));
+        return (index.h(index.Host, { key: 'fc91d1e5fdeaa1a7a595a20e96df44ad7c530be1', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: 'e4b6534934edf4db666e5abb9356a3c42d6af27a' })));
     }
 };
 SmoothlyNextTableCell.style = SmoothlyNextTableCellStyle0;
@@ -11983,18 +11981,18 @@ const TableDemoFiltered$1 = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: '3df9fb90a91084e2848ba9d6d08a388332fa2b27' }, index.h("smoothly-display", { key: 'e5a6ad12b56a089347e235d7c991dc2e1a378ffb', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: 'bc6213511a687b4337223cb80dede154e1858cac' }, index.h("smoothly-filter-toggle", { key: '09dfdca0035b048f742d7024662bdfda7a740108', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'f12deb462badb5b1b8434e03cf946953c1ed34be', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '960d6eb11fc5353e5c74eea8ce5de4f41511b127', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'c2c992dcee89a5ece0a1f6d664a0b876e3122258', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'fceb57ead03f5a939e4efc629c41252483d9b7b4', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '4c341fbd43b5bbd2e04c1e2ee00a07c7ea045202' }, index.h("smoothly-display", { key: '7bbe6ef242a6a1c3a7e2567025a6047c60545a13', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: 'c1ab30a5084a12a02a9b06ceb29ee696e8a169ae' }, index.h("smoothly-filter-toggle", { key: '903bf17689829b658b49940f6bec29a2433480e8', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '66c99d6f0203db09a0d910e7b8a400c0f38a7170', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '2dfaa749577006dfe8f3e2b8e515982bfd55717e', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '6ad16fcad1526fc789ab40a0129a26e8db89bf69', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '332596b7bcdee9807e13ed624d5ad86f1801cb7f', 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: 'b0978309ddf6131415ce3f21072b3c021096291a', slot: "detail" }, index.h("smoothly-form", { key: 'c114e99147ccf9b11f06fc9e2378e017e1065058', looks: "border" }, index.h("smoothly-filter-select", { key: 'f7e91aaf56528edb2cf950554149861211ca510c', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: 'b40256e9e0600b770e75347692db324557948d9c', slot: "detail" }, index.h("smoothly-form", { key: 'c8183d8e51d0d8fa8a213cb045f638e04164dc3d', looks: "border" }, index.h("smoothly-filter-select", { key: 'fc0e067002129f9b75d65b5828ef8f0fc1dfce40', 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: '73dd016ecbf20173e2706bd3e3941b8c85fb1e9a', 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: 'a25076490b756ba7d17c6e0cbb3d0365ce0c4e0f', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names$1)
+            })), index.h("smoothly-filter-select", { key: 'ea9b038234c2e2a257f20f2a3d974e0abd99f12d', 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: 'a49b3b47fe6793d1e58e4accb61d4ae2f03fb45b', 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: '0e1de70a5b0641d12d9073d821219f88f75f5f98', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'e5b6d592672ac9b7b7bc73f7e66cbb10ebcb6c4a', 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: '8a4b00297e311b4d553e92aa83505f2e237fdb1b', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '0d50a452467c6d24e94e881b25082a7fa68eec9e', 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 = {
@@ -12030,7 +12028,7 @@ const SmoothlyNextTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '20867e885ac6a9f679e1dfe1151acf835f1252d4', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: 'f57f0759018fa5ed33e12ed330ac5eb97578ba3a', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: 'ff589f47e23de01d3251f72f78f4d9016faaf359' })), index.h("div", { key: 'ae1ed6182461aa6c79e06666aa36e0788a27b2a4', class: "detail" }, index.h("slot", { key: 'eb96b75a3cd5236b7fb6f5d413d51509c83d1456', name: "detail" }))));
+        return (index.h(index.Host, { key: '5443d2dc59b2b1acb8c17e51a3f44ce452902d0b', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: '3cc268ce7b32eb3c119cc0a6793360c6c8345e48', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '3d595d6411e52f1f9ef57d845e80cca9dcd76244' })), index.h("div", { key: 'e8388be6dd244f76854005ff04342f828a81f27c', class: "detail" }, index.h("slot", { key: 'a7e8cae9582890d2afccf61bdcfe48ff505887a7', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12054,7 +12052,7 @@ const SmoothlyNextTableExpandableRow = class {
         this.smoothlyNextTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '2a54e8c8cb9bcaf124e7d2bb42a08d6d6b82da06', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '98b19e77f6c21a32a0c3f2173bbc6257d1642e17' }), index.h("div", { key: 'd39b943bb196bc19017cd00f18ffc689d04e06f7', ref: e => (this.div = e) }, index.h("slot", { key: '8fc9b2f5f4413120311330f730bf6adf255b7d66', name: "detail" }))));
+        return (index.h(index.Host, { key: '52090a83bed3378cc11f71f89f98ac922e343bcb', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '2f63dbffd0697efadf3fca874eab71dd375b4f07' }), index.h("div", { key: '38c32334b65c8ac49f41225ec471270c686d4302', ref: e => (this.div = e) }, index.h("slot", { key: '3a3e3b102d1cf455f4882f5a827539db82c7c3bc', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12070,7 +12068,7 @@ const SmoothlyNextTableFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '52dc46409103f2a315380ad6e541a81c1ef9fd90' }, index.h("slot", { key: 'ca0e9347b58ae72798f0bf62d92a585074d6334c' })));
+        return (index.h(index.Host, { key: 'f9f687b29c96c6b248dc5bc2671188dbfaad2d9f' }, index.h("slot", { key: 'd0e18614274e61b26704c3dea97d49223716efe6' })));
     }
 };
 SmoothlyNextTableFoot.style = SmoothlyNextTableFootStyle0;
@@ -12101,7 +12099,7 @@ const SmoothlyNextTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (index.h(index.Host, { key: '204c81c04897145a2c712cbd8895d4ce949b7bdf', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '126851e42c32f6109c07203cb6c7e9422252bcd2' })));
+        return (index.h(index.Host, { key: '92e728917e834755a0ddcabb566f9e7ef00e5fb0', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: 'a339f472c78d04d0ec4a2d092983a115f032132c' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -12125,7 +12123,7 @@ const SmoothlyNextTableRow = class {
                 event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: 'b454058d2dee4a498f7a0654079e7b4073a5634e' }, index.h("slot", { key: '47e980e2993cbd4427b125b917b298f5ab259879' })));
+        return (index.h(index.Host, { key: 'bdb75c884f66fdcfe5d3c0f8d7ac0a3afce1c141' }, index.h("slot", { key: '8fbe024b50166b5e811610ec6aa6f9b467101e33' })));
     }
 };
 SmoothlyNextTableRow.style = SmoothlyNextTableRowStyle0;
@@ -12145,7 +12143,7 @@ const SmoothlyNextTableRowGroup = class {
         this.smoothlyNextTableRowGroupChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '4709bffe064ca8000f2c065eac559971c0ca35b3' }, index.h("div", { key: '2cdf3ae92dc2c511c8e144509e5c0377cf88b14b', onClick: () => this.clickHandler() }, index.h("div", { key: '1183805151aa60fd6a5d8da676cbb200c996f4a5' }, index.h("slot", { key: 'd913e76d9a3c4fb644f2c03eef0c04c0bd46dcc0', name: "start" })), index.h("div", { key: 'a6d18d7a074b652dd18775ecd9814358fd055b54' }, index.h("slot", { key: '95a8552d69822561f289ae9582d62b77ca6f5ce9', name: "end" }))), index.h("div", { key: '2f7930c3ea699c2d0e1433e684e9869ce100050a' }, index.h("slot", { key: 'abf4639d9850a19e066d7863423962db7f553b9b' }))));
+        return (index.h(index.Host, { key: 'de058b807b84987392df1e6b5115dbf9b75b1cda' }, index.h("div", { key: 'a17925b2fae86d0e782e2f7ca9c9b1f2ae7c174c', onClick: () => this.clickHandler() }, index.h("div", { key: 'dc49ab6e6c8a87ec6553af0d32cc87de255513dd' }, index.h("slot", { key: 'c09bf7cb34e67f63a6ba68bcf1729e576a2e5436', name: "start" })), index.h("div", { key: '48ec1407c08502e46517c317e98dd13c2e699778' }, index.h("slot", { key: '5eff4bdfe3b98df5c871bdc8dd94d9d7fef8dcae', name: "end" }))), index.h("div", { key: '87e35d3676048f5e30fad28aaa92dfa777aee8e0' }, index.h("slot", { key: 'ba4c943650debe7ecf462969b1144dba0c566588' }))));
     }
 };
 SmoothlyNextTableRowGroup.style = SmoothlyNextTableRowGroupStyle0;
@@ -12205,7 +12203,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index.h(index.Host, { key: 'c59bbeb274b600e0e548203b66f719499e74a893', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '28baed218fdb80c7e559b0ed3938495bae653bdf', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '19475a1645cc740071f812202fb4178d338e5c77', name: "close-circle-outline" }))), index.h("span", { key: '5454deaa11b6855ae85d262c5cbb4e5f420d71cb', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '2cbdc9a62d8bb1d998a02c701ec1f581ca1ee629', name: this.properties[1] }), index.h("p", { key: '50114c412a23fe6eedf36aeeb08dbcf0a134323e' }, this.notice.message))));
+        return (index.h(index.Host, { key: '15fad780b09899bf3eec930c4f44b94d8e3449e8', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: 'f018119de7c61bed2319a34d42c5f593d8777df5', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '73e160b47cca733860abb5461eea1bae7620445f', name: "close-circle-outline" }))), index.h("span", { key: '0f1ff04d65d618b841083fb0b6f72cb6e844cd63', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: 'dca125d726d704c241481d1e706d696f0e996716', name: this.properties[1] }), index.h("p", { key: '8e32aee5e45a331ce7210b746c01fc3de3f23651' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -12230,8 +12228,8 @@ const Notifier = class {
     }
     render() {
         return [
-            index.h("slot", { key: 'ff64a0c26301115f0a221588570ecf0a68b32239' }),
-            index.h("aside", { key: '89c5886ab3cf0ff6a44c82137e68a8c90ef620d1' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
+            index.h("slot", { key: '006cd0996ebcc7ed267d4185f7b19535dd4c6a8f' }),
+            index.h("aside", { key: 'ab767aa730f8bae5621de7bb520149f163af27e7' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
         ];
     }
 };
@@ -12248,9 +12246,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: '69db7a03caefa5ea1af957d9b87bad86b498ff2f', style: {
+        return (index.h(index.Host, { key: 'f8f87e9c4b24c3a8cbd3619c0f769622e0959144', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index.h("svg", { key: '6797c171a2daca6662eff6f3b08a8fb8c6c73aff', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'c348aedbcd4effe35728527c217c33f0da315027', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, index.h("svg", { key: 'f8c14a860e35ef649866549dbfcd0f2eac198e8b', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '8a0422fa7a21feefbe541c9bd8a95e9c6a190921', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = SmoothlySpinnerStyle0;
@@ -12283,7 +12281,7 @@ const SmoothlySubmit = class {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (index.h(Button, { key: '0a23fc9162eda74983ead804c92022b1833a401d', disabled: this.disabled, type: this.type }, index.h("slot", { key: '929b4102441c673a44c156745ff622593dfcff63' })));
+        return (index.h(Button, { key: 'e744ab24a03f09fcfce4126bf1c515cea3d3e58e', disabled: this.disabled, type: this.type }, index.h("slot", { key: '7170d7a7dcab90043a63464774b149cda9eaf5ea' })));
     }
 };
 SmoothlySubmit.style = SmoothlySubmitStyle0;
@@ -12318,7 +12316,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (index.h("details", { key: '834040f9835aae1e77b355bcace12938bd45876b', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '44fc10d98a75627a64be2f385e01e97da6d14074' }, index.h("smoothly-icon", { key: 'bda9f35b9a9a9105b33d78a31fe07c662d5b140f', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: 'be55477e5b84c3a1db0033b869feef9b9dca60c3', name: "summary" })), index.h("slot", { key: '6fa4a282cfe35bf531f13e69df10aaf1c52b02fc', name: "content" })));
+        return (index.h("details", { key: '4117914a048ab6e376a887df7f5c2222ebf96aa2', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '3cb0f1e1f376f2c11f840f6c713660eff9a6d855' }, index.h("smoothly-icon", { key: 'caaf14d47b3853217bb63b42c7fda6e57b077bd4', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '2b33f71121407a0411ab5ee96c2335babd598a60', name: "summary" })), index.h("slot", { key: '295a16e9fd6ad9463792024ba4a18a826c2b8126', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
@@ -12360,7 +12358,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3898783d8e55c3f3a1f1b23b17c2efb589d281a5' }, index.h("div", { key: '46771f042f424d469910a188e2692f3f36405aa5' }, index.h("label", { key: '1e48e3cb0e91f223ec3511c1e7c3fa4a2151fea6' }, this.label)), index.h("div", { key: '9e1fc142cff5bbc15c79a224a507d57cea7e3127', hidden: !this.open }, index.h("slot", { key: '8a6aa9ac747667f69f1b8b585c55286f7e858ccc' }))));
+        return (index.h(index.Host, { key: '417ad462857abdf14e1ec37429e75b689799efb0' }, index.h("div", { key: '6993c98633a3794b71b4b83a3a69423dac7c74e2' }, index.h("label", { key: '0ee24bb008ec1fb28e7c41ae1c282b25bef04a1c' }, this.label)), index.h("div", { key: '3a1c8c42d5ef94e61c632c4eecbc4d2d02ac732b', hidden: !this.open }, index.h("slot", { key: '3d87938f9cb4240dd659a77096fb4d185dbca404' }))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -12411,7 +12409,7 @@ const Table = class {
         event.stopPropagation();
     }
     render() {
-        return [index.h("slot", { key: '4aa8fd7c3ffc62f2d043ef82e3f2c8a06b2bf7f2' })];
+        return [index.h("slot", { key: 'bc7ed690ff5c01071dc2f439b76474122a93d3d2' })];
     }
     get element() { return index.getElement(this); }
 };
@@ -12425,7 +12423,7 @@ const TableCell = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '342e8c9cdfa98a71d9897e1e5376a43abc2b5c75' }, index.h("div", { key: '035cfef7d4f70177b9c62c20b4a2a382727979d2' }, index.h("div", { key: 'fc85f192f5ca54d6988eea0bfcb3932756181b8f' }, index.h("slot", { key: 'a7982d67338f7e72aca950120c2795e780b2c287' })), index.h("smoothly-icon", { key: '9f73e93f4da25e231c1015feade2a2a76948512d', name: "caret-forward-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '112de927446e13a6ff6de0c826e4b33655d5fae0' }, index.h("div", { key: 'e9de207f2c36b6e3f026631241563b392167e1c9' }, index.h("div", { key: '127edfaba1f5a4c80803a77ac63e086169f07128' }, index.h("slot", { key: 'ad6ea04c2b33dcb014cffdb08fcc3cc0a7ecdf78' })), index.h("smoothly-icon", { key: 'e37c9beb47abc85f08beb84b28b157b3f1899095', name: "caret-forward-outline", size: "tiny" }))));
     }
 };
 TableCell.style = SmoothlyTableCellStyle0;
@@ -12438,7 +12436,7 @@ const TableDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '112de927446e13a6ff6de0c826e4b33655d5fae0' }, index.h("h4", { key: '0ca412f01a85db840ac52d9d837f12c7d2eab013' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: '7284df7b8ccc28af03ddb83af5100b312e94ba22', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: '7b31178676c30477f449f63839092c5c0a87f7fb' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: '8e55ca9b78f06394e204913a1eb778acc4d254fc' }), " ", index.h("h4", { key: 'cf543da572eb0fa73036fc50cf758bc71042d7ea' }, "Demo table 3"), index.h("smoothly-table", { key: 'ca3829ae8817782801578d87c1e9917cd8bf5d90' }, index.h("smoothly-table-row", { key: '5c594fb0fbd0e0a9cf1294b28d15708c7a82f5ef' }, index.h("smoothly-table-header", { key: '15185fe9b084f1c1a5887d15808911033d48a879' }, "Header A"), index.h("smoothly-table-header", { key: '032df37c80a4d5f51685896bea298c4cc8673bfb' }, "Header B"), index.h("smoothly-table-header", { key: '66784eb167b97b5de635762f31be13d80977ea20' }, "Header C"), index.h("smoothly-table-header", { key: 'f7b182ce6ff4d4c77d9156b2f03e12117995ff42' }, "Header D")), index.h("smoothly-table-row", { key: 'cd7aab628e20d259972682714e1631782048796c' }, index.h("smoothly-table-expandable-cell", { key: '79da2cbe78cdce45f61794986d9e14608519fb3a' }, "normal row (exp.cell)", index.h("div", { key: '78cc08b82bd5923577804e3dc5b842d29bdd7698', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: 'e775213f6c7c266d2ddd163c10405ca524660581' }, "expandable cell", index.h("div", { key: 'f18c98a475adfe01001208b78725f75102893f80', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: '161cbf3feaef04d304815c4c8d1e349c047b2f61' }, "expandable cell", index.h("div", { key: 'c6b3392e295e7e27fcfb49bcc06404670928d230', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: '25dd7135451cad66cb70eb173f3f103b26f936ea' }, "expandable cell", index.h("div", { key: 'a74e8048b0b174cd64747143a335b0980244fe89', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: '4f925af66ed4a7dbad5e1e96672649b8e1c3e0a9' }, index.h("smoothly-table-cell", { key: '91bb5400761f17a3948a25f2f9c50ac23730b626' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: '546ad1a08b3677f5f6f48c521e29f3aad9b3e470' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: '56d29532ecf1c2eb5c20ccea50b6a193ea2b74b3' }, "expandable cell", index.h("div", { key: '6da7dd2039ada2687a1d542903ac4c6e498b83bd', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: '18083db1b4477ca85a4fd0b4a4cf48f6fbce2e48' }, "expandable cell", index.h("div", { key: '4a23052e69cd408f742ac0eb7ca27a31b3f74cc9', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: '77ad4d2bab4b105140e1841e982d18aa05396b33' }, index.h("smoothly-table-cell", { key: 'a9c1b0e695171b4196f8082922a0097f2a49bd91' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: 'd06dd06a3c1cb2ea4b1e6e827befa4b7b29c071e' }, "Normal cell"), index.h("smoothly-table-cell", { key: '711f6a6f6a43658c504bb179d1c48bba8cfaa0fe' }, "normal cell"), index.h("smoothly-table-cell", { key: 'a52dba5771e75c75211502f346fcfe7c7720bcff' }, "Normal cell"), index.h("div", { key: '14b463c1fc11df6d51716c6b0bc46d9137963f99', slot: "detail" }, "expandable row content"))), index.h("h4", { key: '878aa1af3b9d3bf4cef70646bfec241748f88852' }, "Demo table 4"), index.h("smoothly-table", { key: '5a348142990b362d65150df03f81495f505693b0' }, index.h("smoothly-table-row", { key: 'f722e053b1a8640c22f33c9ebfee982a17026a28' }, index.h("smoothly-table-header", { key: 'c639583df3faf0ac837b17bb85ab76eeb6e1d26b' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: '9976e2ffab16e25ca353b9c3d5f32f5967ed83a9' }, "Header expansion", index.h("div", { key: 'ff01e1df084f325be84bb3c7800253beed422884', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: '2c36a81b262ccb1cc60dece208b69adbba1db930' }, index.h("smoothly-table-cell", { key: '96215d78e2ebdaa50a5427441750e0398c0c6be5' }, "A Content"), index.h("smoothly-table-cell", { key: '5530879a8ad34831834b482e8449cc6c372c08b7' }, "Expansion cell"), index.h("div", { key: 'bdad6b059502ca50cd257bae0603ee8c891b988d', slot: "detail" }, index.h("smoothly-tab-switch", { key: 'fb7ab170a92287e687684c60921c7df84c6f0208' }, index.h("smoothly-tab", { key: 'a77b4537f163caca2cf8a5e1b4f07dbf0c05492d', label: "innertable 1", open: true }, index.h("smoothly-table", { key: 'e95509292af26b9d68ae6110cbb139202cccc227' }, index.h("smoothly-table-row", { key: 'f279813f4c3172296f8766299fd78807ad3a20b8' }, index.h("smoothly-table-header", { key: '77de5e8abf009536a75ac29bbcabacf0362536ff' }, "Header B")), index.h("smoothly-table-expandable-row", { key: 'e9ec1f3d693f9ff1d338c444ed497dec5e85fdd8' }, "B Content"))), index.h("smoothly-tab", { key: '0ce68ac72b2f32bfdc9985dbdbd5ef4331b6fa56', label: "innertable 2" }, index.h("smoothly-table", { key: '9e1bd7a05ba27943006d3ec820cb35b8cd94c13f' }, index.h("smoothly-table-row", { key: '06f52f9fecc06ed8b1a07e34e01e4b83f5b786b4' }, index.h("smoothly-table-header", { key: '255cb4214524b0de1d8ad80cbb507311cef66e92' }, "Header C")), index.h("smoothly-table-expandable-row", { key: 'fd8c0569c999d98758f4804abd5c27927dc0b3af' }, index.h("smoothly-table-cell", { key: '205e6c93960046acaddebed28bdfde8fd342a27f' }, "C Content"))))))), index.h("smoothly-table-row", { key: '78acc08880a8e9c02f92478d73e3779259239835' }, index.h("smoothly-table-cell", { key: '4ca1f4c9f5cfc82c0a9de9c44c46127a8571fb14' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: 'ca9a743df336eff6368e31fda5b40bc68bcfa25c' }, "Expandable cell", index.h("div", { key: '6c54f59f4baf8b8edfceb2e2f6b6b1de9c9865b7', slot: "detail" }, "Expansion content")))), index.h("h4", { key: '64634ebf3a0288a3bdef564ab4e7734b4adc106d' }, "Demo table 5"), index.h("smoothly-table", { key: 'a5294010d3d8b152963ee57f75850a801a396ac9' }, index.h("smoothly-table-row", { key: '50ca377821b29d27913d8305c39a3321ead395c2' }, index.h("smoothly-table-header", { key: 'ca3e91d0a43a76d46a36e99135ec0adb0467e58e' }, "A"), index.h("smoothly-table-header", { key: '38a7cebfddc92776d118cf194b114c91e9c031ec' }, "B")), index.h("smoothly-table-expandable-row", { key: '819203d0e2c28dbd69c075296b85fcc036d99358' }, index.h("smoothly-table-cell", { key: '3f369b33ba6aa175cf93eeb3ec285b2a3a16daeb' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '98b51303271d61644ac1b75c38743a981f52988c' }, "b row"), index.h("div", { key: '042c9b0ea28b722fb38d7cad375bcdee60436aec', slot: "detail" }, index.h("smoothly-table", { key: '09abc7a7f0913d457358078f47d1dd74b29f7c20' }, index.h("smoothly-table-row", { key: '6c1ce5abf10898dd2b3a4946e10d68c64917618b' }, index.h("smoothly-table-header", { key: '2c0d2ca3a8c994ff3d604e30f92a2032448e17e1' }, "C"), index.h("smoothly-table-header", { key: '488349d36ac67128f2d33f6b4a919f5354271db7' }, "D")), index.h("smoothly-table-expandable-row", { key: '84cc2d3d865df8890152dc78394e9075744230c2' }, index.h("smoothly-table-cell", { key: '1e67770d5d98d333125cd52d1a5151101407f6e3' }, "c"), index.h("smoothly-table-cell", { key: '8e183795d240dd4c57ff8c53ee8d031bb158b904' }, "d"), index.h("div", { key: 'e683a2e30afe3504ad58b85200343d2f1538baaf', slot: "detail" }, index.h("smoothly-table", { key: '7ffa6610f76d710be3666911fc186fa2cb989c39' }, index.h("smoothly-table-row", { key: 'bdad27301f1b72c4d75796b31310b8ef62bac213' }, index.h("smoothly-table-header", { key: '7fc6dea3db6b5b699f4f8b89c1bf570fa809aeb1' }, "E"), index.h("smoothly-table-header", { key: '48b76a0f42406b0e92cf63767113c03e53ee6c44' }, "F")), index.h("smoothly-table-expandable-row", { key: 'd4b8dc3153a93e2e96c3e9f77031628208724873' }, index.h("smoothly-table-cell", { key: '2cb53816be9e04b8b8c27274241821b407e5eda0' }, "e row"), index.h("smoothly-table-cell", { key: '47f1d43a0e8d9327580b2c1c53ea879a9b6d06a8' }, "f row"), index.h("div", { key: 'c20259534467a948efd4e3cd7e9da5872c7ae795', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: 'd234705cfcc0cfb16c81cfc43ea683a50038b353' }, index.h("smoothly-table-cell", { key: '90e43ec9e2835869fb11b4d1800e59071ccad982' }, index.h("span", { key: 'e47af24d55eddbdce0cd6fa5a590faa8b3a6d518' }, "one"), index.h("span", { key: '9d4470fc8387a4e66d4190a70ded996de39df318' }, "two"), index.h("span", { key: '1014a78f7dbaf86666fb0154c7b6e5d617036c7d' }, "three")), index.h("smoothly-table-cell", { key: '588619fb1add4c0bc2127284e93706c2a5ae2337' }, "five", index.h("smoothly-icon", { key: '4094a79520fe1228392f08ba4070375968f08396', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: '822d05ad4b3c582db61115a240f49992e2bc201a', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: '39639ef67e55ce304658c081deaa2d323fa71a07' }, index.h("smoothly-table-expandable-cell", { key: 'bb351fe086c9661d0736d9429e4915fdd9e81093' }, index.h("span", { key: '830e083c81a4fa73a77332988eaa918bb68c899b' }, "nested expandable cells"), index.h("div", { key: '6c69c8ddc6e47f9d6d2430709729464639ddcdd8', slot: "detail" }, index.h("smoothly-table", { key: 'c8e03b732d601218e43cf5cde90bbe797a6a8ce9' }, index.h("smoothly-table-row", { key: '1138efe1b5f44439f5e025c0d1e28d2833213f75' }, index.h("smoothly-table-header", { key: '4bb54d4e8a465cea94be96df4dbbf02ba2209204' }, "E"), index.h("smoothly-table-header", { key: '0a91912df392fb774602127c9797b75168acf4a0' }, "F")), index.h("smoothly-table-row", { key: 'b5b87d51ed95f83fd4710a57e353dba34a2fdc22' }, index.h("smoothly-table-expandable-cell", { key: '5080e8cef12fa95147de5c4b96ba345dbe8b411b' }, "e cell", index.h("div", { key: '3fc67a555e2c1f827a930ffaf73090e831dc2889', slot: "detail" }, index.h("smoothly-table", { key: '4ceb69ba4dc2dff14a1f916cb81edad48af8a9fb' }, index.h("smoothly-table-row", { key: '38b5e053d71474a27d7695e1107dbd6c5117e3fc' }, index.h("smoothly-table-header", { key: '266c28527fba05ac4f683e8e66e90406dfd7c96f' }, "G"), index.h("smoothly-table-header", { key: 'eaeab41bfea801a517ddb24d7dedfa18a6ed7929' }, "H")), index.h("smoothly-table-row", { key: '25e5243307118b45625664ce3106cf671a2969d9' }, index.h("smoothly-table-expandable-cell", { key: '20dce28d5466a193870ed62022bb08d342d0b3dc' }, "g cell", index.h("div", { key: '6bf17ebae0769008fbdae1d64ba8f4654486c285', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: '8b976cf17fbee90e1f78646251d6b793ef03ddbb' }, "h cell", index.h("div", { key: '3b7ca428bbdd7605feba54e5764594c341494664', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: 'a8103d635a5af23677ea0abdd20f8b15205fefd5' }, "f cell", index.h("div", { key: '1068f08f5ed362e36ed4e83a6c77a9775f240aa1', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: '8272982c0008038f4c494cd9172e72f66938fdf9' }, "b cell", index.h("div", { key: '634b58dce5106b4e1b5ac807e78d04cf7dbee622', slot: "detail" }, index.h("smoothly-table", { key: 'a1433649c0314ba7cdd2b8d2ec15e341899f4b63' }, index.h("smoothly-table-row", { key: 'c101e6243949b29b10a9088f289eaf5cafd3545c' }, index.h("smoothly-table-header", { key: 'de633374484f852dcdf93f77d70e84a7e8bbe262' }, "C"), index.h("smoothly-table-header", { key: 'ce913d8297fa167932883af79f2c6c8fcd31c1c0' }, "D")), index.h("smoothly-table-row", { key: 'bd489d58cfd016e2d8a5ade4ee2018748054d431' }, index.h("smoothly-table-expandable-cell", { key: 'bfc1f1778132fe6065b696c8e0da6a6169e39609' }, "c cell", index.h("div", { key: 'b60a149194a3a00aafad8ae07edb7e007583fde5', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: 'd9eef722d45393ef7c99bcb3b1d3e7d991cda281' }, "d cell", index.h("div", { key: '9ae8c201b2e25135f012504d5776f262ca5af34a', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: 'c36d23dd1d3982eaf2d05efcc60e698f9c0491af' }, "Demo table 6"), index.h("smoothly-table", { key: 'cbeeb4373e6aa41946e0326640fb4fa4a2a7118b' }, index.h("smoothly-table-row", { key: '97f030cb6b55bcf06fb6472a9f35f944e74ae475' }, index.h("smoothly-table-header", { key: 'cf9ec680c5480bc6833280280b0d30ccc19ae3e2' }, "display"), index.h("smoothly-table-header", { key: '362e3ac84693103393617178850c71a6e9e688c4' }, "contents")), index.h("smoothly-table-expandable-row", { key: 'aec3cf9ec6a47af7a69ab02b7b86ad42d8eef91a' }, index.h("div", { key: '72dd01b0a8592ad340528dfbafd67690edf07976', class: "content" }, index.h("smoothly-table-cell", { key: 'cb4f13006d5b11e34a5a785ea62a50fe6efcae98' }, "A"), index.h("smoothly-table-cell", { key: 'd09524025a8d1a252953f66147b62cdc346ae9ae' }, "B")), index.h("div", { key: 'a526f9a54bd787cc9918ca8c92db7e5762f22149', slot: "detail" }, "expansion"))), index.h("h4", { key: '65ef9ec2fa4709218e564c369494164b52cc4c78' }, "Demo table 7"), " ", index.h("span", { key: 'f413772cb517b938662c323e35f84eba74f8dc5e' }, "nested 1 then normal"), index.h("smoothly-table", { key: '58d58d9e21419a2ba963185d2c3d9993bc5ebb80' }, index.h("smoothly-table-row", { key: '80c1ec64f85096a9262f2c2c85896be2223cad27' }, index.h("smoothly-table-header", { key: 'a1b51d51042c17aab5fcf0298f58f46f340ebf59' }, "A"), index.h("smoothly-table-header", { key: '37a4dcf8017b8d706562cbcd742d4b7591e4a22b' }, "B")), index.h("smoothly-table-expandable-row", { key: '0153690a04931017060b284f76c07dfa3a08a8e1' }, index.h("smoothly-table-cell", { key: '6c1c0d445ce39fd27b312dc1fc1fc0a0e058c2de' }, "a"), index.h("smoothly-table-cell", { key: '44bfb5ad0224971258d2663a5b52e427d4e9951d' }, "b"), index.h("div", { key: 'e15d4f7089be9b7cbd6f7edeea18f8a767f862d5', slot: "detail" }, index.h("smoothly-table", { key: '227f667933a3fa1e7c38584922bb0bde23a8ea48' }, index.h("smoothly-table-row", { key: '028975d1f17b0efc57882fbe4b64c5c9eaedb66f' }, index.h("smoothly-table-header", { key: '20c448585b00b08e8b4be707863e6955f2be3165' }, "C"), index.h("smoothly-table-header", { key: '0aba0045e4d5419401f3218a20c02805c785d6b7' }, "D")), index.h("smoothly-table-row", { key: 'a7bee785cf257b2b95feee39b5901eded2fe75a5' }, index.h("smoothly-table-cell", { key: 'ea34a95fdc3498d1c02c083d018ab218eb2e9a3f' }, "c"), index.h("smoothly-table-cell", { key: '0233ca8aea5f29b30571495a2f0d1dc31dd24e0f' }, "d")), index.h("smoothly-table-row", { key: '70d7de4a19d40c52457c96a1b0ef08e94cd0c99d' }, index.h("smoothly-table-cell", { key: '265df9be85ad94d45e827c406bdf3ff6873afbd8' }, "ccc"), index.h("smoothly-table-cell", { key: '423037af6e2756865aa6cbf6988e49fc96141a77' }, "ddd")), index.h("smoothly-table-expandable-row", { key: 'd5e3a2696d0d01d986fc30d99dd4b75a8f36c388' }, index.h("smoothly-table-cell", { key: '3676c3eb6c8a674b150b418012a16dd5e4491673' }, "cccc"), index.h("smoothly-table-cell", { key: 'ca3243c8ab223ae7b0b76b9130ab59d9981ca39b' }, "dddd"), index.h("div", { key: '710017d79ae4be52ecb797516d9192316d1838ce', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: '558c341772a7b4184639d0efe8eb2f55d069adeb' }, index.h("smoothly-table-cell", { key: '432d38d8eed301e016d975a4a53025e2c674633d' }, "ccccc"), index.h("smoothly-table-cell", { key: '4ad5eb4283a84cc9fb27b1a8df79ad7ca7ae008d' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '578c085d5b99f31e383997baa27ae13e0b05e6b5' }, index.h("smoothly-table-cell", { key: 'ba92a81a34c433e9ba7002ceccfa7a2ff328c7ae' }, "cccc"), index.h("smoothly-table-cell", { key: '15c2556e874e310eb442491ff91802aa95a240ed' }, "dddd"), index.h("div", { key: '83dda4f04b29df46d38ba2e142648a44411dbb6a', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: 'e97327174a441b833fd5a189143243689d68a657' }, "Demo table 8"), " ", index.h("span", { key: '690fc3f1c588da443c933efdc336c7efd2f6c32c' }, "not nested"), index.h("smoothly-table", { key: 'fea1c9fd95e05a4f84a7e4d8cc7919b024e558c4' }, index.h("smoothly-table-row", { key: '5f40aa02eeafdd9da796bf0f84d5b3924aa17173' }, index.h("smoothly-table-header", { key: 'b77d152a3d485b2545852d6fe638526e52ee08f8' }, "C"), index.h("smoothly-table-header", { key: '4b75ca9b0e3771efd9463cf03cfff5c2f4e1734a' }, "D")), index.h("smoothly-table-row", { key: 'ab145aabaaa9874800d4818ebb818e7fadb6e4a7' }, index.h("smoothly-table-cell", { key: '151d7f5c5e07352a038f4c2c4d82d909f0a55911' }, "c"), index.h("smoothly-table-cell", { key: 'b1d36eba7f7cd774a41838a5b54282a119b22d0a' }, "d")), index.h("smoothly-table-row", { key: '1e87721f62fd2e69eccf6d4e191798aaabe9b072' }, index.h("smoothly-table-cell", { key: '4e03b1e62d23c0b58d4433672192ff3f0346b19f' }, "cc"), index.h("smoothly-table-cell", { key: '2cebe5623928632faa34b9ace8566bf207fca379' }, "dd")), index.h("smoothly-table-row", { key: '604c60291ff3f2eae8681526059ad5a8105a1a9c' }, index.h("smoothly-table-cell", { key: 'cfaca20e757519e5d78c95ef605aa8feae9668c0' }, "ccc"), index.h("smoothly-table-cell", { key: 'f54be192d777c7cfdc3fde33c0e12df1cd22bff8' }, "ddd"))), index.h("h4", { key: 'a289bff46284b8fcdf7eb0b67428ec20cbecb89f' }, "Demo table 9"), index.h("smoothly-table", { key: 'edc7057a9018cbdc7d821a874dda7b3e6f998b02' }, index.h("smoothly-table-row", { key: '69cffb1f821746f7e8266bcdaa5c5b784c351608' }, index.h("smoothly-table-header", { key: '8b9c0f55e9ef7c2eddbd6ca98e24bfcce8c5b9f3' }, "First name"), index.h("smoothly-table-header", { key: '0fadda92b7d55fb438fe498204e35967787bae86' }, "Last name"), index.h("smoothly-table-header", { key: '9ab6a8078593493cc48eff988924a7ef24ff3600', style: { width: "1px" } }, index.h("smoothly-icon", { key: '8dd6e1869c11c9bf7743889ba281f683a6a7e8f9', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: '6e866d020e2b0fdc520c50763d09c631b3e5f6af' }, index.h("smoothly-table-cell", { key: '6e3ed40208dd476c089dbb6b8d7e39ae88efbed3' }, "Jessie"), index.h("smoothly-table-cell", { key: 'f95419c44c653c33eb1fd4c765f9dbdb56e4b021' }, "Doe"), index.h("smoothly-table-cell", { key: 'ed0532fc13b7aa9524c33d88e2d55d1a05397a6c' }), index.h("div", { key: 'cbae9a004801614a8430a7c5d5f2827a69e4366d', slot: "detail" }, index.h("p", { key: 'ee0937ca9dd38051d6c77e0aaf3cbf2868ae6003' }, "This is Jessie")))), index.h("h4", { key: '37e35f996b1c5c1f18ba45959e80441a60034bc2' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: '8a3758fd18893878883cbc5f857588a5390a3ae0' }, index.h("smoothly-table-row", { key: '6dca3b6696269076d85964e44441ffa9841f4f8c' }, index.h("smoothly-table-header", { key: 'c814aef74145d839c9917998c8639428707ddfa2' }, "Company")), index.h("smoothly-table-expandable-row", { key: '55ec7c8cb9f96ca5f587229c70032e2d6eadde5f' }, index.h("smoothly-table-cell", { key: '97d9276dfbe5c4a011efc5fafc64cbf68e7e9428' }, "Proquse"), index.h("smoothly-lazy", { key: '02f177aa21f3f3ba85556b945921cd9ea537eeb8', 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: '8cd1a9f002c0538a54abb793ffb8d11a1d315d78' }, index.h("smoothly-table-cell", { key: '38043088ffc3d0c96fe423f065a764f333a9f0f1' }, "Pax2Pay"), index.h("smoothly-lazy", { key: '936263a140c20405d33e6203fb984bf7ccaa5d55', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: 'c1a39e3696ee32d9aea4d0f6fd59e947237d29ff' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: 'daea0e7771798d381050bf2da25587de55404f8c' }, index.h("smoothly-table-row", { key: '0e09ce152e2ea57f514626429eca94600da67334' }, index.h("smoothly-table-header", { key: '8754a2389641ab7a8f1a18ca6a5b6147f5e4e643' }, "Company")), index.h("smoothly-table-row", { key: '22a037215578704299f0ad7463892648689cbdd8' }, index.h("smoothly-table-expandable-cell", { key: '775da09668bb0b0e44cdc02fba9df5e4c1911729' }, "Proquse", index.h("smoothly-lazy", { key: '4518b9115c1b5b190c67878d12e35069338c2640', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: '4671817683949e24e640fa89665454a708c5309f' }, index.h("smoothly-table-expandable-cell", { key: 'de8baed6fa2a2a6be7f3cf665a033d4a96f6e953' }, "Pax2Pay", index.h("smoothly-lazy", { key: '309467301864b8b6d90ebd198d9fd55ca1c846bf', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: '83a239b2580c56f8a48d1e83976c7a58a4b10c18' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: '7ddb6e03f197e0a25cd6162f49753c969e586de1' }, index.h("smoothly-table-row", { key: '60e0b7a61cc7e9cabb8414775d0f9b1f46cbd42c' }, index.h("smoothly-table-header", { key: '7d467b22a6a16c822e0165652794f4ae840f2928' }, "Name"), index.h("smoothly-table-header", { key: 'b6aba8a280624f9878cfabdeb15793e9af7abc7c' }, "Age"), index.h("smoothly-table-header", { key: '5ea1a02d04b300575d8d871282a7dae7202b418d' }, "Location")), index.h("smoothly-table-row", { key: 'bdb696de8b10b595e025a96685206587af11b289' }, index.h("smoothly-table-expandable-cell", { key: '60bf0a98303ce8a6db44df066b9e5113f1cc487d' }, "Jessie", index.h("div", { key: 'b209de95a6b63311658ea1b16b055fc77deecbfb', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: '364f561c53b5fc42625081e3c9bedaf9ca50a060' }, new Date().getFullYear() - 2000, index.h("div", { key: '21fdecb49374bd0097a92ffa247b7516cbacd8f8', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: '1815d3e84d4b0beef8a2f0c246524d71e34d556c' }, "UK", index.h("div", { key: '137fe9c6ebabffe7018c75804d97df439aa8cbb9', slot: "detail" }, "London"))))));
+        return (index.h(index.Host, { key: '084f8dd93e2e896aa0c82a2dbf94d15e590ab6b3' }, index.h("h4", { key: 'b415225da9d340343c1140cece8896618734408b' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: '02f0149fe05a809bddbb5387d76589fa95cf3636', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: '3dd8cf1aa0f290b946924e7d33631ff7ead59068' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: 'a41c384503a52961c08bb410dd88c7519b728799' }), " ", index.h("h4", { key: '8ffd0c73febbec012336e4b74a00ce1e5937082a' }, "Demo table 3"), index.h("smoothly-table", { key: '8238a27bcac022b998c09c26d6fce868fbecfe45' }, index.h("smoothly-table-row", { key: 'b4e62f8d29d73141e4c42f4613e63d3aa1881e01' }, index.h("smoothly-table-header", { key: '0a42b31aa3b59120000525d88aec1ecfd8829c45' }, "Header A"), index.h("smoothly-table-header", { key: 'db14af55f7588b4ff340a847ba8540682bf03c73' }, "Header B"), index.h("smoothly-table-header", { key: '85d56a58d0de295a58995957a0866b79167121ab' }, "Header C"), index.h("smoothly-table-header", { key: '03e8cd286eafe69a2f50e051b2a85ef75e1a8a54' }, "Header D")), index.h("smoothly-table-row", { key: '2682156506f8fb68bf2c234b41a63ac110f8b727' }, index.h("smoothly-table-expandable-cell", { key: '9a15ca31cfe50004d6c49988aadd2225af73fb30' }, "normal row (exp.cell)", index.h("div", { key: 'e0e1b167a5333ff7508f1fda9ce8f46f94fb0c86', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: 'cd23c79877acb9f4ed587b9a196f482c99f77d1f' }, "expandable cell", index.h("div", { key: '70de6e1eb0e37b6e48fc58ab039d1646aecd5590', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: 'c767fc973dcb18cea7a825f4ebacc2fcb8f9f834' }, "expandable cell", index.h("div", { key: 'b87f290f7a61063e91b2dfaf6fcb78ed6d50edcc', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: '5b915248d37d0a76409d4a3f42fa24ec6b3c24c9' }, "expandable cell", index.h("div", { key: '51d32db57bea1de0365bfed946f245a342876c03', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: 'c9b72eea96187a5eac7fa7bb92f46cdbbc236b7b' }, index.h("smoothly-table-cell", { key: '6afd7627309f99ea53ef3878564520e0342291d8' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: 'd807670bbd5847a95b1f7147f90d270ce577fb5b' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: 'e223767b8b762ae7d94e5dfcd18b436d99525779' }, "expandable cell", index.h("div", { key: 'e016a6bf37e842872fdb29278da36993e8b0a164', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: '34f4733b68e0804be594201cf0ae1cbef75fb671' }, "expandable cell", index.h("div", { key: '3ff263ed2c11f61b644359f0bcdfee35d79998ae', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: '2726ff719d4d97f44023645a474050b37693378e' }, index.h("smoothly-table-cell", { key: '00d7919bc16009c730d4bfe2eeb4bd81f586a75b' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: 'a4761fe28dd65afcd183de191305d044b80520ab' }, "Normal cell"), index.h("smoothly-table-cell", { key: 'efbc8a671ae907024a78075c17c40f6786310cdc' }, "normal cell"), index.h("smoothly-table-cell", { key: '257ec4c36bc268ac4cb1607042b9889896d888c2' }, "Normal cell"), index.h("div", { key: '08d7fe72f5ff16098b07ea7d685caf31bac8a6dd', slot: "detail" }, "expandable row content"))), index.h("h4", { key: 'd53e6ff4a6e60aab6de9c0d3ea74c969e5efda91' }, "Demo table 4"), index.h("smoothly-table", { key: '73de9321ac19acc5e7083f65a98db49be93153c9' }, index.h("smoothly-table-row", { key: '8b1f99d3233e48aea2af4dc26070c788f1a80cef' }, index.h("smoothly-table-header", { key: 'f78d80c0395bacb63328aa252f31c6768aea6b7f' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: '633bd520914c060e51d28ff0b3c7449b3d22294b' }, "Header expansion", index.h("div", { key: '271e4f0728dfc22b1843849baf99434c9445909a', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: '039d4ce3aa5dee481d1ccb6cefcb6cd9ceb8185b' }, index.h("smoothly-table-cell", { key: '6ec346a0a7e23185af45bd4fdbf1f60eb3078937' }, "A Content"), index.h("smoothly-table-cell", { key: '5f87c71d9273c2b05571f04cc67063dcba800368' }, "Expansion cell"), index.h("div", { key: '16253ba3ae361d4de560d9f265a122dc1bae0348', slot: "detail" }, index.h("smoothly-tab-switch", { key: '6039dc4d4532d4889be6c32423feed2692573719' }, index.h("smoothly-tab", { key: '264d4a1b65e4c556b33488f25dcb83656abcdd61', label: "innertable 1", open: true }, index.h("smoothly-table", { key: 'a0558c84e47e3b700725c1d30621d9e5ceb8edab' }, index.h("smoothly-table-row", { key: '7bd1bdd05b70c08b609fe508c1e4dd8c710c7a4f' }, index.h("smoothly-table-header", { key: 'f456b7a3928350d4c70710213bb2ff711970de88' }, "Header B")), index.h("smoothly-table-expandable-row", { key: 'b1ba00a79b110a6e62af6650058c6188fc3f4180' }, "B Content"))), index.h("smoothly-tab", { key: 'b46c2ac2124563a2e65d2008f4619af7886c7300', label: "innertable 2" }, index.h("smoothly-table", { key: '3b2f4e9ee7ac056b3f7f6d54f8f8fa99482afdb4' }, index.h("smoothly-table-row", { key: 'a3880dcb6b5f4ab9f45a9a2944f2059ad2edb745' }, index.h("smoothly-table-header", { key: '2781272e470153161befa28cd47b2eab37dc3552' }, "Header C")), index.h("smoothly-table-expandable-row", { key: 'e1b0316a76d3e2139b9bca5e393f504c66661132' }, index.h("smoothly-table-cell", { key: '570a8b77983570a5ae493254bea8613c45f9bcda' }, "C Content"))))))), index.h("smoothly-table-row", { key: '782c89e514003e26997425a0aa803bc0572f3dc1' }, index.h("smoothly-table-cell", { key: '52e0c55e7b96d48165c15eb448f4873739a5bf72' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: 'bea42d590e7dbab7e27310dd1d8dca682d3d6611' }, "Expandable cell", index.h("div", { key: 'c5c1a48ae9b53c4750477ff66020bbeba67047af', slot: "detail" }, "Expansion content")))), index.h("h4", { key: '25e07ce04b63fcc09ab412d7f73edab24b3e6f61' }, "Demo table 5"), index.h("smoothly-table", { key: '89b6d51a1d4a2ea21b251b30fd31ca86766ec7dd' }, index.h("smoothly-table-row", { key: '9d8342fb6eb14f04f0f6fb16cf2f6e23f8f7190d' }, index.h("smoothly-table-header", { key: '64ef56025441774a7bb463ef2fcdb76364acef65' }, "A"), index.h("smoothly-table-header", { key: 'f983b14b47f5ee7ab12610983bcd49a3d25e7542' }, "B")), index.h("smoothly-table-expandable-row", { key: 'd5aa34248de31182fe5f3de2a52417acbfe70dfe' }, index.h("smoothly-table-cell", { key: 'a8c0648d231f3b30ed4d34fcb61d7f1f2254bcde' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '3e15199317d011a121e373b1ae9d6f459dc9c02a' }, "b row"), index.h("div", { key: 'c51357a401d2a6c636f61dfcb8e41c4a76caf82c', slot: "detail" }, index.h("smoothly-table", { key: '7f483c542f6aeb6bfe5f852367a810ffd167fd13' }, index.h("smoothly-table-row", { key: 'e41079da0e1c20212ba906c046a6ee8c7012085f' }, index.h("smoothly-table-header", { key: '574e43d55bc11849bb814b2d3f5afb97b0b483aa' }, "C"), index.h("smoothly-table-header", { key: 'aed74610f19b5833ef2c028f85b75e8147faffc4' }, "D")), index.h("smoothly-table-expandable-row", { key: '8c60b3f2e4a8adafb2fb6b363aa4ff1f496e1683' }, index.h("smoothly-table-cell", { key: '84bbfea75f60ce4d6a9a7820d064b65150272502' }, "c"), index.h("smoothly-table-cell", { key: '6b9dba2e33651fff09599fea52744c8778099c0a' }, "d"), index.h("div", { key: '5ef1ebbf76421a9d563ad8db5f3452b633700e00', slot: "detail" }, index.h("smoothly-table", { key: 'b187dff7aafce9f5fba1e72106cfc5171f6cfb78' }, index.h("smoothly-table-row", { key: 'a8100316b27da94fccb4d06e25c63712653d76b3' }, index.h("smoothly-table-header", { key: '0baceebe9adc45de825ae8c56ae7497d28bf54ac' }, "E"), index.h("smoothly-table-header", { key: 'a63e145febcb38e0b7ee223e0458e2704172d1e3' }, "F")), index.h("smoothly-table-expandable-row", { key: '562049af8dc23b1ae6d0b3cb1e158814549e1713' }, index.h("smoothly-table-cell", { key: '2a8ee7d89a1a259399b11f09296eb66f3af538c6' }, "e row"), index.h("smoothly-table-cell", { key: 'e33339a1468986981cbb0b45eae5d8bf5742e1b6' }, "f row"), index.h("div", { key: '1de47c75ad56b33b7064e0853f28794f920e57d8', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: 'e5b032ae2717048dbcfc8b8efa3cdf2d7a43a387' }, index.h("smoothly-table-cell", { key: 'd5eaaf9d86bddad56d3c4c4d068744a8956955e2' }, index.h("span", { key: 'd18bccfbd3c539699b7794ac24c96ef17a7577b5' }, "one"), index.h("span", { key: 'a5e0a3bd3645e8955b4a947d98ee3634464ad9e8' }, "two"), index.h("span", { key: 'f3fed1d5790af1c9faab9d82857d5a1c5d5111b5' }, "three")), index.h("smoothly-table-cell", { key: '4e84517cfb2f58318199929bba56dc8ac2066f31' }, "five", index.h("smoothly-icon", { key: '724f7c870f6f650366e8b9c8c7e271d9229e8dc9', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: 'c17cef1e13675ed6574ee0ed67fc3e0a809c4f62', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: 'badec24e71bb0bc25eed15baae0bbdd6b34e56b2' }, index.h("smoothly-table-expandable-cell", { key: 'bb47b5ebaa9b57edf86661b8845ecd0b463f76ef' }, index.h("span", { key: '5072e29d8c1ec13b6f0fae9b34cfdf3b17abe76d' }, "nested expandable cells"), index.h("div", { key: 'fa02140e8c1cd37fc9102f8fee1730b0b97521f9', slot: "detail" }, index.h("smoothly-table", { key: 'c98d1425431843f5890ad268f1b4e51a89dd68d8' }, index.h("smoothly-table-row", { key: '62dbaa649f2d931965280496712102d828235dd8' }, index.h("smoothly-table-header", { key: '5ebe0f6612c4fa808af84a0618c20ab63f19e438' }, "E"), index.h("smoothly-table-header", { key: '5303b346f3942a30c91916cbb645c97e1a662388' }, "F")), index.h("smoothly-table-row", { key: '8048a33ac049fc2c4cf2c2bfa17225b37ff8970c' }, index.h("smoothly-table-expandable-cell", { key: 'a428e23eb58ecb10c22707c19779a05f7a935432' }, "e cell", index.h("div", { key: '5dd3c7a3fbf4e5ce5b2a8dcac4ffa70de76da152', slot: "detail" }, index.h("smoothly-table", { key: '5fed534993f7282fd1ceae9d63fb5d5f037e02d0' }, index.h("smoothly-table-row", { key: 'f15b11b8138c12e9262f7346eacc81b516b93052' }, index.h("smoothly-table-header", { key: 'a7b98696fb996541a0a660a3b8426c40dc04a531' }, "G"), index.h("smoothly-table-header", { key: '069e5d94c3905da04d0c459c86bdd84a25c8ac13' }, "H")), index.h("smoothly-table-row", { key: '84cd12fed1dceadd627bb542fb297d08c9733514' }, index.h("smoothly-table-expandable-cell", { key: '27b65a9b475cab095bf13b648b299e584471dcd6' }, "g cell", index.h("div", { key: '0a80848130efad2b6afdfa4e72c55f15f14a433c', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: '65c391ce8ebd26e8acdcd840fc53c3a563ca4f78' }, "h cell", index.h("div", { key: 'b486f11d8eb209191358fa12ae9c7a5fdab676be', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: 'ace694e77923dbc4c25e97667c1210c820e72191' }, "f cell", index.h("div", { key: '49dbb266e4b771c118e17ad6b7386fc7de00e31a', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: '32c9409c941c2f7fe2c05acbcf82b53883621434' }, "b cell", index.h("div", { key: '5c68f26d1cb6deb1a9beb5906ef92f856b1ccc08', slot: "detail" }, index.h("smoothly-table", { key: '2aed703f517727ab63fe300a8fbdf0273d73523d' }, index.h("smoothly-table-row", { key: '0d2add5efffa117a125fb6bcd1b2f658692f69cd' }, index.h("smoothly-table-header", { key: '0a27261642dd02abc897e0f15d867fe36a8a6a74' }, "C"), index.h("smoothly-table-header", { key: 'd2a853ce8ce64d5b9f8e6b9ed8cf0853559057bc' }, "D")), index.h("smoothly-table-row", { key: 'a1ad252e962e305b65a4ad345d4810349c8ffb3c' }, index.h("smoothly-table-expandable-cell", { key: '1a3447c4afc1dcfee4361fd7d33d6a46e1a7228e' }, "c cell", index.h("div", { key: '4d61b7d449f79258d113603b770c32bad133487b', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: 'edc66414c5267890c500920f0e1ce2f560b75103' }, "d cell", index.h("div", { key: '6ea88715023bbb1f355e5bb1c8b17b9b18d98f55', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: '7c6a91e1b9371b17f4f6c0552f212d02e70d4dd5' }, "Demo table 6"), index.h("smoothly-table", { key: '6940b4b31a7950383a5e3ac5476b19a73c83216b' }, index.h("smoothly-table-row", { key: 'c24cc1d61f51475ea694d0071f2e04cd70ff8fea' }, index.h("smoothly-table-header", { key: '66e2e3b67f8dbc26bee8b186dbdd858f47155298' }, "display"), index.h("smoothly-table-header", { key: '6a60efbdc7f23262971580112bc414b65f0718e6' }, "contents")), index.h("smoothly-table-expandable-row", { key: '4a35b9daa08c6e3e8eb067fb917a7e276af1df02' }, index.h("div", { key: '1df2a1a2843bb1107e3ecf9abe2dd95c52668d0f', class: "content" }, index.h("smoothly-table-cell", { key: '62662ad332e4632d3a1a6697549d3711be418a1d' }, "A"), index.h("smoothly-table-cell", { key: '351e6455db278a5ca76dd590e885c863ffd22490' }, "B")), index.h("div", { key: '4aacc22721929095a6c918241179b36ffb39f2b7', slot: "detail" }, "expansion"))), index.h("h4", { key: '3a839ad6f2e3160c7a2965af0a71650f612bca68' }, "Demo table 7"), " ", index.h("span", { key: 'c27d7696dc94d1efb9c9d5c83373d8de03d9141a' }, "nested 1 then normal"), index.h("smoothly-table", { key: '8346a49ab0cda4038b5d7b51ec333f2afaa96316' }, index.h("smoothly-table-row", { key: 'ad07b2deaf123302500654ac8f6c61fed5eacc33' }, index.h("smoothly-table-header", { key: '9feb73643ce3b74f46aa81b7a020d4efab09d4de' }, "A"), index.h("smoothly-table-header", { key: '10a2ca094a531f6ac810e1e070caae59291846f0' }, "B")), index.h("smoothly-table-expandable-row", { key: '903111d118991f769a083308c1b447f9a478949d' }, index.h("smoothly-table-cell", { key: 'd685dc02a9c45933343e63bfaf9a517c0bcdd86b' }, "a"), index.h("smoothly-table-cell", { key: '6204102aafb2ab25a2ab7a77fdfdac9fc5df3cfa' }, "b"), index.h("div", { key: '96e7a93c0941152d5a552a3b7aa82bd0726e2598', slot: "detail" }, index.h("smoothly-table", { key: 'a8f36265b9a846cdc7f5fbe2ae1429791a35055a' }, index.h("smoothly-table-row", { key: '0fb24b370fc86a548c3dd2010479d6ed62457736' }, index.h("smoothly-table-header", { key: '3a53717bf17d02d3967902029e609420580d475c' }, "C"), index.h("smoothly-table-header", { key: 'dc322ab7862c3d7914ea44158cfa15585ee47a30' }, "D")), index.h("smoothly-table-row", { key: '8379365daedde44e239af325dea73df327ed2222' }, index.h("smoothly-table-cell", { key: 'adfb3e913e9f9cf3856b6adcdcb1f47f9c12a05b' }, "c"), index.h("smoothly-table-cell", { key: '7336751d3220cd7a0a1091de6f650b548e6f9410' }, "d")), index.h("smoothly-table-row", { key: '30bf3a3f33bc2eb01ecd34014676eff5cde22665' }, index.h("smoothly-table-cell", { key: '699790b0055bc9c9f7dff3710b5ac83aa5d2406d' }, "ccc"), index.h("smoothly-table-cell", { key: '3f99dd86a7e914de11d93f00acae9fbcedf28f27' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '4ff185adec3071bf09f923d631b8923c38d91fb9' }, index.h("smoothly-table-cell", { key: 'a883e5ac9951d84050ebede9a2cf9f5bbe20dc44' }, "cccc"), index.h("smoothly-table-cell", { key: 'f50ce74734d2a4386ea9981689cd308584ac58dd' }, "dddd"), index.h("div", { key: '2c53f30db73618ffb8fff8a979b0279b4150d9ac', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: '31fd43fc8566c591a042fbdee640827e6dc77368' }, index.h("smoothly-table-cell", { key: '41f75c1ac310ad0949f972d7a6f05f53a45d9ea8' }, "ccccc"), index.h("smoothly-table-cell", { key: '4d4d8120ea96e8a36cfd86fce57bc10b29ee4328' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '28120ef8260c71e0b5300ccc384a6bdb6678bbc4' }, index.h("smoothly-table-cell", { key: '5a5424d55b7da2b636af18af5c8b988df1a8f269' }, "cccc"), index.h("smoothly-table-cell", { key: 'ac72e66032e40d46a727719aae69503c7751f687' }, "dddd"), index.h("div", { key: '48cdf7b6cc87291005e046cfbcbf9b86f5b6077d', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: '5a53cc774f265f09f5d3f33e0da6d70c41d12c48' }, "Demo table 8"), " ", index.h("span", { key: 'ff2a030650a271288702f978eb820282ab287c12' }, "not nested"), index.h("smoothly-table", { key: 'f0506607bc3c1bf066580bd18e793087dc09a529' }, index.h("smoothly-table-row", { key: '73b0e3cf1a3f4f7fa824e235a5499ec0a287d87f' }, index.h("smoothly-table-header", { key: '2b2343f08eed4f99954e61d8ec8433fcfebc8b28' }, "C"), index.h("smoothly-table-header", { key: '8279d7521ea8e53bf041c08966e327fddf497597' }, "D")), index.h("smoothly-table-row", { key: 'd117f53d79fe9976c77a638072aa8665cedd84d7' }, index.h("smoothly-table-cell", { key: '96c67a9bf13a706b54845553edd3aeddabf8c1ff' }, "c"), index.h("smoothly-table-cell", { key: '1100b126555dfeb60aeb26b8a6c88e9ef367d8d6' }, "d")), index.h("smoothly-table-row", { key: '296525eb3c93ce79d920d5842fa472266ae57ed6' }, index.h("smoothly-table-cell", { key: 'fa2a68ff8fe56b9f6a3ce00e25c0aa747a520c55' }, "cc"), index.h("smoothly-table-cell", { key: '1aaae91b4e7b66db8b30d9815dbedef859aba8a3' }, "dd")), index.h("smoothly-table-row", { key: 'f65b4220c79cd12871c00afbe14416b0e457129d' }, index.h("smoothly-table-cell", { key: 'd5a84e0c2034e13321785771ad984a850587c436' }, "ccc"), index.h("smoothly-table-cell", { key: 'e20f9e8e1ee08ff361ccd5d3cea6a889f74bd943' }, "ddd"))), index.h("h4", { key: 'a900cb5746cd921bdfe5c8706425e5a8ddf59898' }, "Demo table 9"), index.h("smoothly-table", { key: '59e97480d428b7e3ca06df2162a81e01e2c337b2' }, index.h("smoothly-table-row", { key: '8d5f079bf0f868fe1e53fb8fc340e32f5eaa2b63' }, index.h("smoothly-table-header", { key: 'b0cb0b97cb301d9ece2d8f951f40f5a0105db609' }, "First name"), index.h("smoothly-table-header", { key: 'e6a1fb4c1c6dee461cc0bba8c8a31ec1eb2a5e1c' }, "Last name"), index.h("smoothly-table-header", { key: '7f6ea59562cc3b6ee9ed1bad91310ccdde157633', style: { width: "1px" } }, index.h("smoothly-icon", { key: 'a380ca2177275401ee96defdbf5cc9a9da876d47', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: '277d38e71ef037cc745a92d1dcb297af1f672574' }, index.h("smoothly-table-cell", { key: '49237dd1700fea81b2a80270848ba0a9ad3d281a' }, "Jessie"), index.h("smoothly-table-cell", { key: '3b7e9e273e5883809e377616cb2b6212538f5741' }, "Doe"), index.h("smoothly-table-cell", { key: '68414432e77af3bbe828a41b4648fda8d0831f66' }), index.h("div", { key: '506223f6fd77d090fed6c76fcfd2595f356d5242', slot: "detail" }, index.h("p", { key: '146e68a3f9cc34215d6704a5cff01314fb415deb' }, "This is Jessie")))), index.h("h4", { key: 'aaa3b0bd7f949f74377bcf6827d093412030c95a' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: 'b0bb59d9539d0fd6c1dd5ede9c32efb42f46efcc' }, index.h("smoothly-table-row", { key: 'deecd22af026a54edc4ff57b3f35a4cbe3d9c8a4' }, index.h("smoothly-table-header", { key: 'ea174f5f29b39dfa28d5a32645f8b94b7a493eb8' }, "Company")), index.h("smoothly-table-expandable-row", { key: '650166a33923c9266f94ccf94a7b74bd9ec4f046' }, index.h("smoothly-table-cell", { key: 'f32f2b7e174d7e0066df89a462893efd145ad8f7' }, "Proquse"), index.h("smoothly-lazy", { key: 'e6c3ca28f4c1c21264e399d5c54f63b5484c3e26', 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: 'b035d415a4c544073f548b62765be411ba3a4516' }, index.h("smoothly-table-cell", { key: '4fbc39e2055d66d3b75977fb561434d6cedee0f4' }, "Pax2Pay"), index.h("smoothly-lazy", { key: '092f9af72ca7cde3dc5e2bd214a97ae3c6912560', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: 'adaee86a43f6684bf70b5ca9cafe4168b2d348a8' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: '2fa365287c5df8f595e6a134d2074014b2dcdaa9' }, index.h("smoothly-table-row", { key: 'feef56cf007d5682e54c224cfbac19468ce8648c' }, index.h("smoothly-table-header", { key: 'bd98a797a038d07cb3db05ab188e951a077e0031' }, "Company")), index.h("smoothly-table-row", { key: 'e3fbc04bbc6bd0293fd2e12110f8a2dbd464f76a' }, index.h("smoothly-table-expandable-cell", { key: 'bdf9ca53eace2765bc5f1057614ee2777f22b683' }, "Proquse", index.h("smoothly-lazy", { key: '9e318ab4caf98f60e162855de7b3ecc385139ab6', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: 'b0bc3892ef4823ecfcc081b287b31dc23b0af70b' }, index.h("smoothly-table-expandable-cell", { key: '9682235912884a15b2fac7c2f97c297a83306eff' }, "Pax2Pay", index.h("smoothly-lazy", { key: 'ce067b4394c9754a7950efb9a1d864cd153cb427', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: 'e72e58977ae1f2c72632e116cfb36f1df0a950cd' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: '506b3c5c8f7c4ac93f585a03048546c2a46ce7f6' }, index.h("smoothly-table-row", { key: 'beb8dc5eebf167f0815f7fafb183c7acd1cc1731' }, index.h("smoothly-table-header", { key: '117921c5a8ce86dfa45bc22c511e1c63ae342184' }, "Name"), index.h("smoothly-table-header", { key: '9a58650c185770fd18f5755767fe2ad44dd0632e' }, "Age"), index.h("smoothly-table-header", { key: '79116a1d1b433cbed0a27d6e2eaf5bdf863df930' }, "Location")), index.h("smoothly-table-row", { key: 'e91298585b10e4094e715f3c48b8453254a33665' }, index.h("smoothly-table-expandable-cell", { key: '909fb0bab82cc414edaa0d48f70c1f5c3ecbadfa' }, "Jessie", index.h("div", { key: '30b45fe235a99f5e78b098994ca6ca2d08be3ef3', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: '7945b46982f8548d4eff5b33083a269dc6206da1' }, new Date().getFullYear() - 2000, index.h("div", { key: 'cb80ca42b04a969699a7c7badfd756ac54fd08cd', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: '433a980dd806cb4fe0958b688189375ba68d4e5b' }, "UK", index.h("div", { key: '1843c042018960e2f44de4873003a6720fd79e84', slot: "detail" }, "London"))))));
     }
 };
 TableDemo.style = SmoothlyTableDemoStyle0;
@@ -12472,18 +12470,18 @@ const TableDemoFiltered = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: '5b93a82e6fd913c9b03530292ff087c2d479c997' }, index.h("smoothly-filter", { key: 'ae91a4bc55790bcd416764e0f715b07fc122f0b9' }, index.h("smoothly-filter-toggle", { key: '037eafefbe30546b2de22f36a333b7c1e4d70dd6', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'af7ac392884df3562ba5ea743a7ea30240511edb', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'c89720b60ff1df43caea8430f6609bfd053c9c8a', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'f6b6edb17fc8508723e936236a5180316b0bb84c', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '6bb5bfd80c45e9bfc6763b6e4536df93cfadec7b', label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '7718989fddf57e670873feeb9c33a043920e0620' }, index.h("smoothly-filter", { key: '5d8017178b78e2edb058131861952dd6794e67c8' }, index.h("smoothly-filter-toggle", { key: '9bc5583d2e3af8cf639073f45ebffd880cc3aaa6', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '409d4b6f205fe82d05d444e64a4ff8ed75e9a2b9', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'ffecd1d61152af6644509b86ba601bd7aadb58bc', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '14207be1b8e46f911badbfdf83710230b2d1f848', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '7cf2f04b79d0fa4cd31b6e45b923f33987dd42cc', 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: '1551b25b69df321440438268137809e130ff9797', slot: "detail" }, index.h("smoothly-form", { key: '9341d72451a0905f95331e835ed8af81e3674717', looks: "border" }, index.h("smoothly-filter-select", { key: 'e43da5a61ebb4a1199a0ad40c897e90731d99734', label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '65f135b91e4d6aba05130189899ab4232bb9c040', slot: "detail" }, index.h("smoothly-form", { key: 'f473103fea1734af2f8edb8a4e08ebd76761de1a', looks: "border" }, index.h("smoothly-filter-select", { key: '804fc172627b7a5089c2168b37b5fde7fc4ae54a', 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: '3cbccf82aab5fbe0755defedcce63ad033146155', 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: 'fd2f5581346baa82f93f9011774b99af55cee168', label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), index.h("smoothly-filter-select", { key: 'ab676a8817c1a5a4c2a5b572630a742bc5ff1840', 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: '0522742d240ad56ce4adc48b928d9bb9b17393d5', 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: '1ccc235f381fbfba1524bf2405b9e09aa895eda9', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '368c015e396dfc8d864b168a0cff58faadf71e44', 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: '489de62a94b5368e29a003cebd0f9b298cd326dc', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'e5bd500f1f2dac97fef063583333b664e18eaf8a', 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 = {
@@ -12539,7 +12537,7 @@ const TableExpandableCell = class {
         event.detail(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: 'd178a79d18b8fa016bde18e83a0166bf3e8a2042' }, index.h("div", { key: '1359d0b436a82eea47092761f0fb667506527b99' }, index.h("smoothly-icon", { key: '1bef44e30bc30561c98571b66a8c2b749fdf1fc8', name: "caret-forward-outline" }), index.h("slot", { key: 'b4b15069a583de04687a13b66d77bf4ee07fce07' })), index.h("tr", { key: '52c2993ae0487f1548ed17a3601423ff5299e94f', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: 'e2dce0be610b15e0268c652e666ef6e25df66db4', colSpan: 999 }, index.h("slot", { key: 'ecb44a42939edf476dc141aa396882b457e41b9d', name: "detail" })))));
+        return (index.h(index.Host, { key: 'fae816857a7a1e11ceaf6e68ec3235bcce42752c' }, index.h("div", { key: 'a5d7d227c773060d3362e6fcbffededb5479ce92' }, index.h("smoothly-icon", { key: '77e05e11dec65bba4ecfe55ef8909d78345369d5', name: "caret-forward-outline" }), index.h("slot", { key: '4b037932f5955cc06f4ce4c0c5335fc5a42fdfcb' })), index.h("tr", { key: '8db6015b46df85bf1398c66c17e442dc6e4857ee', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: 'a1cf80115cacbdf58ea26247eb3ef2ea37f3b4e4', colSpan: 999 }, index.h("slot", { key: 'da8fc38933a283d75c589e63a9083e34e031e1b8', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12575,7 +12573,7 @@ const TableExpandableRow = class {
         event.detail(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: '866d9fd832dca4f86a8d4f16c596b0e65f774ce7' }, index.h("div", { key: 'e694a6e4c21d18b6636a8d37ea1002f4b262eb38', onClick: () => (this.open = !this.open) }, index.h("slot", { key: 'babc5af75b03ba00d02d79117a95fce573eefce5' })), index.h("tr", { key: '6b1208a1c881fbf9a07e586f27126dc7761549ab', class: { spotlight: this.spotlight } }, index.h("td", { key: '128de0fd8462641258d3795685a759c0ac755861', colSpan: 999 }, index.h("slot", { key: '557da8c5cd8d01eade1d9e7349fd7a49782acfbd', name: "detail" })))));
+        return (index.h(index.Host, { key: '28554b39f11e3629095777c054c9a892fa9dcf1c' }, index.h("div", { key: 'f8274bcc990818c513c75d0a736505258c130a61', onClick: () => (this.open = !this.open) }, index.h("slot", { key: '5b2ae89526fdba843d282534ef45a33981a6e2a0' })), index.h("tr", { key: '92f536db44d47755fbf456e7409783729b065044', class: { spotlight: this.spotlight } }, index.h("td", { key: '3ce15c299ee5a3eeb10a0f69ce85d833aecc0837', colSpan: 999 }, index.h("slot", { key: 'cbd7bf72a3376d0c8a5c059f9fced11685c16271', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12593,7 +12591,7 @@ const TableFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: 'ce1072b60fb267ecb005afd4bb8305e868ca8ad9' });
+        return index.h("slot", { key: '9a8fd2ae8c30bc12aeb6b3ed124b09427d9ed9f6' });
     }
 };
 TableFooter.style = SmoothlyTableFooterStyle0;
@@ -12607,7 +12605,7 @@ const TableHeader = class {
         this.name = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'f970c7e0bde6fe240a994fcdcd20cda921f94f06' }, index.h("slot", { key: 'ca229698d77bc840b8292612b57a8f16b3569314' })));
+        return (index.h(index.Host, { key: '3727f46c284d59b2731f18824546968d2ae2a5e6' }, index.h("slot", { key: '16aede7771e7f851432365528d9f79cbc756c11b' })));
     }
 };
 TableHeader.style = SmoothlyTableHeaderStyle0;
@@ -12637,7 +12635,7 @@ const TableRow = class {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.after(event.detail);
     }
     render() {
-        return (index.h("div", { key: '046164ef91cc56c3a1c113e587f4846a1022e845', ref: e => (this.element = e) }, index.h("slot", { key: '97bcfdffea01671f0b07b3f26b7bab1235ee40b9' })));
+        return (index.h("div", { key: 'f4016ec2ba8f871c843780d4d86306344f0a7b42', ref: e => (this.element = e) }, index.h("slot", { key: 'd02e94248182106e5ccb3da95370c2bd7a4e9b75' })));
     }
 };
 TableRow.style = SmoothlyTableRowStyle0;
@@ -12679,7 +12677,7 @@ const SmoothlyTableTesting = class {
         this.counter = 0;
     }
     render() {
-        return (index.h(index.Host, { key: 'fd1ea5640990bfcd387983d72a7b3f8f9d7c6b34' }, index.h("smoothly-table", { key: 'd46513a64c648f8a0f17a09a5771176fe076c436', color: "dark" }, index.h("smoothly-table-row", { key: '7f1b09b5c2818c24ffe6bcc0929805cfaf187705' }, index.h("smoothly-table-header", { key: '32fac74e93d249abf920a3e95ef4f1de84adb2d6' }, "Type"), index.h("smoothly-table-header", { key: '1e7a358f579dac1afef3f819938bdf1a6f01a97a' }, "Name"), index.h("smoothly-table-header", { key: '08c8865a26a2111813fd86d29860d97fc2176354' }, "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: '07cef2ffec33e187262795cb1250345345ffac7d' }, index.h("td", { key: '0eb946a79106bb89e9cdc9a527ce9fa5fd612ac8', colSpan: 2 }, index.h("div", { key: 'd7dca5b373b8c096766ede592a4093f9c4052f1a', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: '06141ee097f434b15ddfd4a2176b83319272a4ea', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: '21eb23014dfb375e4e6e1a897a6b455dac66e165' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
+        return (index.h(index.Host, { key: '95ca99628bf0142068b0b1604d93ed5059a7f356' }, index.h("smoothly-table", { key: 'e68e552d07c554978939ca17b43fad665a77dbf4', color: "dark" }, index.h("smoothly-table-row", { key: '3aa17a5551481edc96cb5b1245ba95a665bd5ad6' }, index.h("smoothly-table-header", { key: '83fa6460c5231e9a63c0fd09e24301cd5d6d5bd2' }, "Type"), index.h("smoothly-table-header", { key: '41653caf3ae5e589eb6f70aee33d089fbb7a37ce' }, "Name"), index.h("smoothly-table-header", { key: 'bad3dcf2e3daff8a63c9e9536d06eefa5cf2d1d9' }, "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: 'cc6775b294db656cf59b3f52c5fd3c23ce42e1f5' }, index.h("td", { key: 'fd50668d12f1059caf1bced562d1028717da171c', colSpan: 2 }, index.h("div", { key: 'b232bd68b7161949b0c9f35f21152c47a072eed8', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: 'd1b94c0f165829cbe755db0394a28ac2e4c396b6', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: 'ecd061dcf8eb6a90520f19627edf5d07da685d86' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
     }
 };
 SmoothlyTableTesting.style = SmoothlyTableTestingStyle0;
@@ -12711,7 +12709,7 @@ const SmoothlyTabs = class {
             old.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'bb4fdd1ad35e0a6680900884d35279f8ec0633d9', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: 'ee4f40f1b2be8e7b785feb23bfd643d188bcf956' })));
+        return (index.h(index.Host, { key: '0e5023ca7717e4560b12fe3a18efa78121b2da9f', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '1b299ba1d8b0945a41016ce7f2da50fa73e36c17' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12728,7 +12726,7 @@ const SmoothlyTabsDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-tabs", { key: '006ae6b149b78de30f07db6ef5520179e6a982f7' }, index.h("smoothly-tab", { key: 'f53c12aa9de46e8d76f11d32f8bcdf4e16e32d2b', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '76abbc0b73327d221a99c3901f2557708d0fc52e', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: 'c9e30e7f7b79577d8ec1148c5c81a6395d3528aa', label: "test3" }, "this is a test message again!")));
+        return (index.h("smoothly-tabs", { key: '533cfc91493d6dceed5aded6e6f26e26859224a1' }, index.h("smoothly-tab", { key: '5984ae187c5cc23a4b7a64d43bbbdd7d48b7d861', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: 'b8a3216625e2408c3c3fab08b0be1bdf08850da1', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: 'bd876638a084205f45c910a842d3e20205db2e7c', label: "test3" }, "this is a test message again!")));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
@@ -12742,7 +12740,7 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '17c0af8ae3f69d90556f06cda84003a946b08a9b' }, 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: '31afa14d4490b5c2d3a09322999ac7ec6084f0b8' }, 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;
@@ -12794,7 +12792,7 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '37a519e0d31c795a6776660e8c56f795f447fd2b' }, index.h("h2", { key: '246963412c6e96b385a2a0b8bbe4832e594c759a' }, "Theme"), index.h("smoothly-theme-picker", { key: '2acc6b78896cefd5820f1434bc7a72a6713da907' }, index.h("smoothly-item", { key: '9230232fb86c916bf2dea9407c6f669f8f1225e6', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: 'b85d3dc7d43982da4b292b863552b158a532d62c', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '8be71ca06cbebb7834068cab48ab36a812ac11de', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '11b972b4b779b08a13cfaac9a369e8609aedba77', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '2acade6e6d973390181dbc3ed2ac295e6956ebd6', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '72051ad0ebc33a97d78bfdffe593e2d929cb9c2c', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'f60cad194305997f74705602355a859ccb6509fb', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '68a0b9913d9f70852bacabeac8ba812c653d6c10', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '143bf1efaf659bf0713cccdf1fd77430ec41a0d3', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'fd71430c81af645c9e894979fc82c537a75a66b6' }, index.h("smoothly-theme-colors", { key: '71394e5b1f806b0fdadc2047a48a27fcbfe48ddd' }), index.h("smoothly-theme-guide", { key: '84323bf55999912e65e1c02ebcf665dc3959a87c' })), index.h("smoothly-button", { key: 'd3ff65683cc2ed09e45fdd45f99e3a54c78cc2ad', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '6cda0c7eda40b8ddb3b4906538ef5f0ae79c2911', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: '1ff04e5ad87908f9d4ef51fd2f948c69649e73e4', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: 'ffce14e9d1923220c4f8fd824177b2c13c9867be', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: 'f372aac59b4dcc24cde0f65888c90b14e7bcc527' }, index.h("h2", { key: 'fbf02d997500cc247c994318d04362c4cf180d22' }, "Theme"), index.h("smoothly-theme-picker", { key: '07248d954a9c4f9ba0ce3520b9d3f52af592f414' }, index.h("smoothly-item", { key: '56f792607d3696823681005ab99c64d2c6c8a26b', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '88ed4bce954338ded99d9e20cc46922e6792fc05', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '62ad657fd2956e4a8ecd6cbe3a4594c419cd4857', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '1a05c71adfd42dce463c65d0f098c065661cc452', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '61fec55bcbecfd26a4d867598e1a7f3aed292408', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '70b0d3a2300539903fbf7ba5252bb1914e065ae7', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '4259aef8ff5e9b238aea52d3f5c629aafadc0d91', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '80f7c765f1de5982f9e833ef54a6635cbf0fe6b2', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '7ff3946958929beeb820e3129b9a654a1b362f2d', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '103fca80dd8858bc227448bd56349026ecd444f4' }, index.h("smoothly-theme-colors", { key: '666897015cfd34976603149ded74fe06be6d9d2d' }), index.h("smoothly-theme-guide", { key: '9a0f02fa88ea4aa79ed2060df5e7ac59baf35b96' })), index.h("smoothly-button", { key: '42bdb748755ed442eb15da5adb7f4781ff3b10e9', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '237d637586ce0f1fa752df6f7c26334437bb6d96', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'f845f142b70b50a75a94e89725caddd0c4c4a379', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '062c928768a552527d1b4238c1a2fdaaf4c4a87f', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -12808,14 +12806,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index.h("smoothly-display", { key: '76b05c2e90fd17bfbca48def8dec17322961330d' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index.h("br", { key: 'c04575e8823229e4576ea3ce09989a685475fa84' }),
-            index.h("smoothly-display", { key: 'c4d5499df0ce5b250842dbb7ad0deb86bb807405' }, "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: 'b2c98d0b8e14666828ce2d55f7b03aa86e9e07a1' }),
-            index.h("smoothly-display", { key: 'af33573258889914e4ac16a06ad8c2977f7b1b30' }, "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: 'adf1edab07f010bb7d9eace4c9e1547b90a4ed4e' }),
-            index.h("smoothly-display", { key: '19f6fa594d7bcd59ee676dd9af74711cfdde27e8' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index.h("br", { key: '7816997e586561e443e89c546b7084f2f16e3401' }),
+            index.h("smoothly-display", { key: '115daaa00fb7a4e0bacb23cbda1ed58cdab2505a' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: '0eacb21aa50f7faebf262e64b5e4c30878f50dc1' }),
+            index.h("smoothly-display", { key: '5eddcb2c707956bc39e7b675bc61bf222ebfc0cd' }, "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: 'f157bd5d1fd2aa1db645aae1650d5e3711c73a1b' }),
+            index.h("smoothly-display", { key: '58804f743836a8fc1822dac667724e24b4dca2db' }, "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: 'bad13ec12d0eab96921b00edaab1cc4acba9d94c' }),
+            index.h("smoothly-display", { key: '4375ae14448373728f92946e9984c55672432beb' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: '357075bdb38d7f2d963dde17c2fd78d88702402d' }),
         ];
     }
 };
@@ -12830,11 +12828,11 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: 'cd973e71a42ed091aabc8a4ad7a80e667c594f5b' }, index.h("smoothly-input-select", { key: '47d91b398b5da42e70008fd44005da88d833fa46', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '4039dc4eb015dd6d869d1896c2be555bc29ee3dd' }, index.h("smoothly-input-select", { key: '3fc86668de12e928bafce4760bed4302267978a1', 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: '8259eb8f098d182c657a46aa18925371186d1143', slot: "label" }, "Select theme"), index.h("slot", { key: '5a9dc670ce5f7e9ae82890583260b60cc50e687b' }))));
+            } }, index.h("label", { key: '79fd10c45933e9b5589b92d2793f89bf0a23afaf', slot: "label" }, "Select theme"), index.h("slot", { key: 'dec18bec76ffc9ee4380e3609fda66196786480b' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -12855,7 +12853,7 @@ const SmoothlyToggle = class {
         this.selected = !this.selected;
     }
     render() {
-        return (index.h("button", { key: '05d17a3e2729a86c8980da5aef754e71ae75f3e2' }, index.h("slot", { key: 'd67aa0d7f6ce810906f7c81e61ac8b96f5c059ae', name: "icon-slot" }), index.h("slot", { key: '4f96ffe5033672d925d5f735081866209a0a5f47' }, this.name)));
+        return (index.h("button", { key: '9ea210115f4c2a7677604a6d1853fc2c5d999ce6' }, index.h("slot", { key: '72df5acb95cdbe522ad162577e4ec34f31aef525', name: "icon-slot" }), index.h("slot", { key: 'd2c81cf33c4da3b4ce0b9443712a69fb38274b67' }, this.name)));
     }
 };
 SmoothlyToggle.style = SmoothlyToggleStyle0;
@@ -12879,7 +12877,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index.h(index.Host, { key: 'ab2e3b389c3a12ae60b634981aaef42dd71bd426' }, index.h("button", { key: 'a1f7e1ccedbb8e5522b4734794eaf3926d7e50c2', disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'f7ace0e0e877c98a58c06fd09f52571e92c37b3b', 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: '191a429c04889d30d5d293657df020d5d14b5e63' }, index.h("button", { key: 'ffa03674786389e8f07874a5bc2d675c360e2a53', disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: '024e4ae444afefe53640b81f2f48fcbd81dfb2e4', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -12892,7 +12890,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '57ef3c6397ff0cccd77d859fceed77e7c00965e5' }, index.h("h4", { key: '4f583c5c83f1bc5aa31f21e925589eae62c3b68f' }, "Toggle switches"), index.h("div", { key: '776a37d3d16ad83078408389e4866629ceb56ca2' }, index.h("p", { key: '0ee9f1efe9532ea1558192db3ac86bf6af11ba1b' }, "Checkmark"), index.h("span", { key: 'aa1bab23ac896138046cb9f81b83c5820fbaec12' }, index.h("p", { key: 'f1fcc1d43607052c32bf1fa5a02b43c2a04a7ab5' }, "Tiny"), index.h("smoothly-toggle-switch", { key: 'dfd05d7991b0068246bc1d559844e61ec9622bdb', disabled: false, size: "tiny" })), index.h("span", { key: 'f92efdd42d426ceb7cf588d451e99023d8651ff5' }, index.h("p", { key: 'e48c6112dd29dd82059010efb01f121e82b124bb' }, "Small"), index.h("smoothly-toggle-switch", { key: '3be986ea9b2af1493cc4bf25f5e7a11dbd236c53', disabled: false, size: "small" })), index.h("span", { key: '016361bc5f710e1a65743fc170f3f66e7499e2ae' }, index.h("p", { key: '763d628bd8f96f8c5dbf7e8075a20cc6cb2ed68b' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'ca3265f04f61a436466a142ce7d4cd3c74a3890f', disabled: false })), index.h("span", { key: '643191356033b3503211c0c4f0bedbb92d9c46e5' }, index.h("p", { key: '6570a9e629407be039fea065095de8e5b7e55a2e' }, "Large"), index.h("smoothly-toggle-switch", { key: '7a71e1a49dc73495d1701fa5a6b070dde85bae28', disabled: false, size: "large" })), index.h("p", { key: '52a354cf4319bebf82a878297c0c5d0fffd1091b' }, "Colors checkmark"), index.h("span", { key: '26e8562a4f7e28cf1cbaa70162216a37b616d3f1' }, index.h("p", { key: 'ba9c31a1c598944f7d62c749a36a8c3c448d24e3' }, "Danger"), index.h("smoothly-toggle-switch", { key: '09f9525a1190b4de78a1d519198804161aac6add', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '6e086b838483b85a3f036d76fd5aba54751df777' }, index.h("p", { key: '812543fe04bdcdd5d3b94ca727ddf0bf14be9a83' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '304d86fc047d50f985f70510710d8a3b60271a63', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'a64dde19b59ac5d42e2f0301441c66c5eecc6508' }, index.h("p", { key: '0b21cacca0b66263261578a5388e6c349c572036' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'd89a16ed8aebb4e94d9acaa149a161c722d43db3', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: '5cc056a554035e089e3c438de050fb75172dc7cb' }), index.h("p", { key: 'fca6c955f0d7ccb62adbee419215a7f9f07c513c' }, "Colors no checkmark"), index.h("span", { key: 'd81b60019b2cf5b57e4c142638c8c23fa6bf5f3b' }, index.h("p", { key: 'efef99d1b5cda0a455f9872b2e1e3cdf0164719b' }, "Danger"), index.h("smoothly-toggle-switch", { key: '955be9d473cb6f2f346b1fb82534423762a07fd0', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '2b561ef3dc5c3ac524f71ea958c9dbf46f334643' }, index.h("p", { key: 'cb03fbd74f648940d6f2dadce87ec321f25576fa' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '5757115ce8c620e622bd75db337a984fedabedcf', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '56f8c5ef98b359f8e9f6c053f7e4f5ee587e6367' }, index.h("p", { key: '27d2518d8fe82e5199024f0952977d92c9839cd0' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '170bef6759a4fb33017874aab421a3197c8c032c', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index.h(index.Host, { key: 'd42c87cbc8367a4bedf1638f05493318ce41507e' }, index.h("h4", { key: 'fabd5caccf3b3076b12a5572dc07544c2343f717' }, "Toggle switches"), index.h("div", { key: 'ef1e2219e77722e2981b542379af6ca281d9b8c9' }, index.h("p", { key: '5ce2ae1f96e4f2298bf5302ffe3ac6573e2b2f90' }, "Checkmark"), index.h("span", { key: '5ecae1da643b292d06d9b825d733282a51a6b39f' }, index.h("p", { key: '941fe1972c919cc5830fd9531a331a2995d7e409' }, "Tiny"), index.h("smoothly-toggle-switch", { key: 'f355ac70925f61e806d7bdeffccf1ff5e60be479', disabled: false, size: "tiny" })), index.h("span", { key: '7baa75d53746d4e01ec4c4c6ce2ef55f8f0bfff0' }, index.h("p", { key: '4bdc3b7f070ff76753e79c54272e50c6cd769f13' }, "Small"), index.h("smoothly-toggle-switch", { key: 'fd72e51ae7f6cc00e1e1b4735cc72c37d03eb784', disabled: false, size: "small" })), index.h("span", { key: 'bf9bb03011a26331720dcdd840d940745d592907' }, index.h("p", { key: '1d2e9e18b8b7b38cc821ffbfdb891e651ecf22d0' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'cb8e3e1809b19916e3d4aa8bd7282e03daa23fc8', disabled: false })), index.h("span", { key: '8900fb069434ff59482369277af9237211c586d3' }, index.h("p", { key: '19e9c7fd9b4aa2bbb75cace03f61efdc64121b49' }, "Large"), index.h("smoothly-toggle-switch", { key: 'dfe75cc413d58776293a88d15bf6817d82659eb2', disabled: false, size: "large" })), index.h("p", { key: 'c0dd0475ce038565b7989dcb8b7d2602e4efc5c6' }, "Colors checkmark"), index.h("span", { key: 'b10d71034ad8d205da901e00b8bc5c6c4fbb2b56' }, index.h("p", { key: 'e06de9836fb3755f242e15ce1fd96a52de476500' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'b01be2ce99dc297789c859dc4a69dee1ceed1ab1', color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'a1d7003f67a971e3e9d1cb0af6c46e63d27fc160' }, index.h("p", { key: '28cc6a5e62a9f2dbd95526ed20a41585cfd59ff4' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '6a0daed9d6d35eddd91e967a7e77f0cd6b798971', color: "primary", disabled: false, size: "small" })), index.h("span", { key: '8e20e504b6064dd24a482c83dc4120105b2e54ec' }, index.h("p", { key: '136267d87422999493d00b6e78f5b798c70663a4' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '9ba7a38b869479df1dcbd275f400a95a03eb2096', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: '5410cfe3c52cd9ec94f9d9be528873b9257dc72b' }), index.h("p", { key: '83957369bb649d1a875249b0c9d3491dc0f35d35' }, "Colors no checkmark"), index.h("span", { key: 'd8852a56a14c1b8575f640010418561dfa515317' }, index.h("p", { key: '1357ba7a51e0fb4676f97adeeabb2bb2988d0fcc' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'e155e0cc9892978e4c6c7d63c63a7fa1fce9b5bb', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '9ab31a62d1cd71dee47a46398935626c3102951a' }, index.h("p", { key: '7429f1e4988c7f84776f78e4a625d209e51bb73a' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '17e853b7aafdeeb35d0bd7e48ce9e2d0a3176b31', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '62e042c6671f30babc6b543f4c17ea140a880a60' }, index.h("p", { key: '832b8c4662871bd1d1c2861ac9f0783e4c0032b5' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '8fb61a82948410571b5d79b064279dc7127b73c9', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -12923,7 +12921,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: '95896964d93f81a4413924fa6a8f32fd27fbbc99', disabled: this.disabled, name: this.name }, index.h("slot", { key: '79919839f1e24ae62b65d095c0aa6a828098a462' })));
+                result = (index.h("button", { key: '60d7037fc7bddb5954b2391c9f0062a72b38a030', disabled: this.disabled, name: this.name }, index.h("slot", { key: '2650651355e3f422337fa3712111d0c73f07693f' })));
                 break;
         }
         return result;