npm - smoothly - Versions diffs - 1.2.1-alpha.34 → 1.2.1-alpha.36 - Mend

smoothly 1.2.1-alpha.34 → 1.2.1-alpha.36

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

Files changed (467) hide show

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

@@ -1668,7 +1668,7 @@ const Button = ({ disabled, type, link }, children) => {
         index.h("slot", { name: "start" }),
         index.h("slot", null),
         children,
-        index.h("slot", { name: "end" }))) : (index.h("button", { disabled: disabled },
+        index.h("slot", { name: "end" }))) : (index.h("button", { type: "button", disabled: disabled },
         index.h("slot", { name: "start" }),
         index.h("slot", null),
         children,
@@ -1948,7 +1948,7 @@ const SmoothlyDialogDemo = class {
         this.showFrame = false;
     }
     render() {
-        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" } })))));
+        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 and top-aligned."), index.h("smoothly-button", { key: '90b57556f3c083e437e6adf978ca5985d2dcbdac', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), index.h("smoothly-modal", { key: 'd3302307ea096a2f80305f2d5ef18fa5e97a723e', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, index.h("h2", { key: '7659aef15bb808a8057ecf1be592d3a98c84000c', slot: "header" }, "Modal"), index.h("span", { key: '68eec929d76adaf9abb535220d7fbe7a7fcf8b0a' }, "Are you sure you want to confirm this action?"), index.h("smoothly-button", { key: '85963882f77a2d5d05076a873dc612a9dbb1d735', slot: "actions", color: "success" }, "Confirm"), index.h("smoothly-button", { key: 'a106ae037ea3c9ec9bbcc33f6a00324220b07b61', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), index.h("smoothly-modal", { key: '9d91b3f59755964920ae0a9dba277b7de4795d09', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, index.h("h2", { key: 'b8f58b34e93ea54fdb83880b6a132aedd530d69b', slot: "header" }, "Modal"), index.h("smoothly-summary", { key: '454a5f57522f0dbb0e2eb56365d62968a07b8f8c' }, index.h("div", { key: '17607ba2a7b918eed58e4f827697aaccc1a3849b', slot: "summary" }, "Lorem ipsum"), index.h("div", { key: 'fda1929764661b8ceee7fff0de965716590d04fb', slot: "content" }, Array.from({ length: 10 }).map(() => (index.h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))))), index.h("smoothly-button", { key: 'c176e661ec34df09bde9beffdf502264851a9548', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (index.h("smoothly-dialog", { key: '0596a4eba8b82b63d6711cb8f9e840eebf537072', closable: true }, index.h("smoothly-frame", { key: '1a027bc120e983af8790e4b03d47195b092deaa4', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
     }
 };
 SmoothlyDialogDemo.style = SmoothlyDialogDemoStyle0;
@@ -3789,16 +3789,16 @@ const SmoothlyDisplay = class {
         const type = this.type;
         switch (type) {
             case "json":
-                result = index.h("smoothly-display-json", { key: '6b31a96e16b4b4f5a881fe9de434326d7262d302', value: this.value, collapseDepth: this.collapseDepth });
+                result = index.h("smoothly-display-json", { key: 'dae527906c3ef17061176ca4fa2b609136029d2a', value: this.value, collapseDepth: this.collapseDepth });
                 break;
             default:
                 result = format(this.value, type);
                 break;
             case "email":
-                result = index.h("a", { key: '8cdbbe4ee158e11761a3dabeffa6fd7165004639', href: "mailto:" + this.value }, format(this.value, type));
+                result = index.h("a", { key: '473961d0ae2df537bbd562de4c303b8a78579fe6', href: "mailto:" + this.value }, format(this.value, type));
                 break;
             case "phone":
-                result = index.h("a", { key: '17745ad8ad63df1451e314608b210dd31b35c8e7', href: "tel:" + this.value }, format(this.value, type, this.country));
+                result = index.h("a", { key: 'ccb2abfa11f6240d8e2defb0d603db7910d9bfa4', href: "tel:" + this.value }, format(this.value, type, this.country));
                 break;
             case "postal-code":
                 result = format(this.value, type, this.country);
@@ -3835,35 +3835,35 @@ const SmoothlyDisplayDemo = class {
     }
     render() {
         return [
-            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: {
+            index.h("main", { key: '39eb7bb72cea0c312714780bd9db27a77836a07d' }, index.h("fieldset", { key: '46b0779510e3c6ee1106a6b3a83a13d41ac63b2e' }, index.h("h2", { key: 'f680e63af56e7d50cc660eac1a1b81de653d48bd' }, "Smoothly display"), index.h("dl", { key: '26c00ce48352dde5b499bdd170488ffc0e9be984' }, index.h("dt", { key: '8dbadab550b83b5bfc4acf8cff7b61d7ffd43af9' }, "Duration"), index.h("dd", { key: 'fc8689620efd6dd6e1ab8d1390b8d813be2520ca' }, index.h("div", { key: '6ef111616240ac903eb2af7f2636936611c0a4f8' }, index.h("div", { key: '7dc311657409ada5e96ce832158c020e55c4cc45' }, index.h("smoothly-display", { key: '80fa4e17d62413c7699b94ef3ffa286f04b3f7b8', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: 'e36d5b6131c20a99397c4c59f1dd2aace482dd9d' }, index.h("smoothly-display", { key: '2858bd44eda1a0e81e22cd7f156ada646ce74e4b', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: 'ad4757c65bfdee5ec7eaec6ca93985f8205ef629' }, index.h("smoothly-display", { key: 'e6b76219a8a754060a122303f9946fd3bac53ac3', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: '5448e1f01cde73667fcddb1c12322bb3580570fd' }, index.h("smoothly-display", { key: '716327a3acf4cc15693d1dd4bc4a2652ed10c6e5', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: '7163c5acb2a9f3dcb9c620866a1bde90548f1d9a' }, index.h("smoothly-display", { key: '75f2c509df90c14512e0ff6f9b218806c3b1d690', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: '67bf890913db1d4907a7d8dc4a1386a85b30bb49' }, index.h("smoothly-display", { key: 'f38320854b7cbe1133ac214fda629cdb6e34fd04', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: 'a0a553d3d7f1bf1e28c58f307e1cfc56dede0a86' }, index.h("smoothly-display", { key: 'dc28a4fab596e16a1180a6ff1d0ee081d2250efb', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: 'cc4498418d1266333357fa9a47cfe267fefc4cb1' }, "text"), index.h("dd", { key: 'dbd253f9d092d730792090edc0d1c7294cd3268b' }, index.h("smoothly-display", { key: '4b140b91c5b2e268dc691c4b2789ab1ad113cf9f', type: "text", value: "text" })), index.h("dt", { key: '7a7655e9282322688e901e034483e09aefe8dc69' }, "postal code"), index.h("dd", { key: '3f880dcdad765deeb5bce0cfa92341cf08e42ceb' }, index.h("smoothly-display", { key: '253b67d433924b812db35ac4b9442e8df6fb456e', type: "postal-code", value: "752 31" })), index.h("dt", { key: 'a344618739cc1ce559ac80554f09405901643514' }, "password"), index.h("dd", { key: '0f6f97055179d534b56754e9f4ffe868982f8364' }, index.h("smoothly-display", { key: '0a95e73ffd18edec818388c6451e10e74ac25a1f', type: "password", value: "password" })), index.h("dt", { key: 'd799959280bd357c59c1458620947ceb8261a8bc' }, "email"), index.h("dd", { key: '6d822ad99d14d7ac68dfe5e60e76bc4f62039c60' }, index.h("smoothly-display", { key: 'df086753232838bbec2b4d6fe17a02e7640c7ec3', type: "email", value: "test@example.com" })), index.h("dt", { key: 'eade96bd9319f2782533ad3ee6e73a279780dcc4' }, "price"), index.h("dd", { key: '82580ddd52f3ec732054a92803c608241a03870c' }, index.h("smoothly-display", { key: 'db4df7924f25fe5c4b8c1ef79e4a2ccbfdb2b759', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '6218fda2e606e48855cf22d2541a1b811f568a31' }, "price without decimals"), index.h("dd", { key: '6f7b2d3f397e98bfcf7031739b8ded01b39c45b8' }, index.h("smoothly-display", { key: 'eec6de2446c60659d6fcfba09d1e1867dc5bb5f9', type: "price", value: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: '049e4dd01a1ecadf48febcb0c651b3a463373be7' }, "price with decimals if they are set, otherwise no decimal"), index.h("dd", { key: '55b856f1380424862dc75ddb5a5d4ff9d6d4393b' }, index.h("smoothly-display", { key: 'd53fa00ba54c27011a7769bf89fb048d5ac43c2f', type: "price", value: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: '90d8a4d1e1649038656607cb0b65d805e3cb2aab' }, "price with decimals"), index.h("dd", { key: 'c9632b9d6252727300a101c585a8b26e5cc7fe51' }, index.h("smoothly-display", { key: 'fef95d8888886353708964a0bad03d716975c183', type: "price", value: 200.2, currency: "SEK" })), index.h("dt", { key: '7abf3203c89e5c502717cd9757c937e582c1b6c7' }, "percent"), index.h("dd", { key: '2fd5b7ec91de2fb4e0cbaf864ca258b852e88cca' }, index.h("smoothly-display", { key: '0e241291b20784a4d802a83e15dadf318079f236', type: "percent", value: "42" })), index.h("dt", { key: '6c48237d73aba23ab3f35980f898eff5c2b87364' }, "phone"), index.h("dd", { key: '53f16cee1b5c59599e8283cb4c22e751e8be1f3b' }, index.h("smoothly-display", { key: '0338829b491a27c9d345cac5190203339c41ac6e', type: "phone", value: "0101881108" })), index.h("dt", { key: 'afb89b8f0a49ad5bf1ef8bba4a51637f7ed57af1' }, "card number"), index.h("dd", { key: '29e4eb02d6924ed8f7ac2797377ea3bf7b3e0623' }, index.h("smoothly-display", { key: '745fefbafe113e1c12ace365f34c39938b3bb659', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '54a9b3bf222d4a9fa1bf1444b64fa7e6b4b7d5fd' }, "card expires"), index.h("dd", { key: 'a538c6af31872884cebb5e5667cd799d1cbe92dd' }, index.h("smoothly-display", { key: '511a2c804811e9e1d3195d4ab8dad15e3e73cae4', type: "card-expires", value: "7/22" })), index.h("dt", { key: '16fa7df01a7d60ec01af68a37d196e35ff8d6503' }, "card csc"), index.h("dd", { key: '0a3df0ba09f6fc7be53d17f0c87eece817a8145c' }, index.h("smoothly-display", { key: '1351526da17988597fd739fe805a0da21689b520', type: "card-csc", value: "987" })), index.h("dt", { key: '4ac6ff219663982e06b96e7b3d7661b7317cee7f' }, "date"), index.h("dd", { key: '6474b93898b9d357a4276a1801c0b1d739e8ae30' }, index.h("smoothly-display", { key: 'e6a43b2f91d87d9de7dd49583c97c93660157dfd', type: "date", value: "2022-07-07" })), index.h("dt", { key: 'ad203d97c4b014f6235005882d1e35f32c37d291' }, "date time"), index.h("dd", { key: '7869f2afaba99fd6c277707fd06dbc546e912377' }, index.h("smoothly-display", { key: 'c63424a1d505cedcd348aeddbc4083ec0fb99b43', 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: '81829d196bd5886e41d896369a9c20a0e9ac6475' }, index.h("smoothly-display", { key: '69d3bce166d11def43480659575c51c171c22a45', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: 'bad6623c83aa440db37bba77404a0e3261406359' }, index.h("smoothly-display", { key: '70e4ab1844a5c575c54ef14314ce6f40423df47b', 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: '9f8913ccf6eb9aa0320ccc96c5f63d1368e03cb5' }, index.h("smoothly-display", { key: '440dec80b84e484440f55e568d018a46ebdcc199', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: 'b7d2b44b723b3d32e063a517034db9c6478a77c5' }, index.h("smoothly-display", { key: '12492a2754ccdcfa781e2ef46a2579ad3bbb49a0', 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: 'ca5f7e206cf42b4bee3e885c8dd6fb5ce1fb414e' }, index.h("smoothly-display", { key: 'c2258980a847c8d2ac8c77a47e7a5772bce08ec8', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '72fda443ec030240fd29071d1a3eca87e2fa77d2' }, index.h("smoothly-display", { key: '3bf63c1395a81d5da4c6594825a3120d99d36fd3', 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: '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: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: 'd9a5a251c68c83e51610bc8aac39c23a14a0da10' }, index.h("smoothly-display", { key: '8a7438690f5b6ba0bbad4d676ebd161538024540', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: 'f426a55591ef6e03405cce72c0e64eaff677beb3' }, index.h("smoothly-display", { key: '3402255ed959acefbc71333683b92dee43275d7d', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: 'cc2b1b59c5d789358fb67a6d48a5a9cdf7fe599b' }, index.h("smoothly-display", { key: '1f3a0edc25b8b9b34d6ffbe88787133bd145bc4c', type: "date-time", format: {
                     year: "2-digit",
                     month: "numeric",
                     day: "numeric",
@@ -3871,21 +3871,21 @@ const SmoothlyDisplayDemo = class {
                     minute: "2-digit",
                     second: "2-digit",
                     timeZone: "Europe/Stockholm",
-                }, 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: [
+                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: '747992d0fa309d7c8cbd13d8eb7818accbb6d522' }, "Display JSON"), index.h("dd", { key: 'bc2d0785dbb216170fd320a3e7ba000d532e54ff' }, index.h("smoothly-display-demo-json", { key: '6d23c6c7cc4720d60ea2160780f26ad10384d6f9' })))), index.h("h2", { key: '2e29c1a9d6b24b00ff6fc6c41201fecd16003684' }, "With labels"), index.h("dd", { key: 'e60a4cf0fa048db54972698f0c41c10dd420231f' }, index.h("smoothly-display", { key: 'c31dc1154af9e19ae130336862060106d3e1ca80', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: 'f442d5b680e29cffa32a35b5beab2281bb41d1e8', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: '7054be327820ae495a87652e4eee220bd224835c', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: '164ed80432c0342192e83ddaea4f27a1b283b222', label: "Logs", type: "json", value: [
                     { type: "trace", message: "Hello" },
                     { type: "error", message: "Oh no!" },
-                ] })), 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: {
+                ] })), index.h("fieldset", { key: 'ae8fda6783a1045b24a90f73d95eb75fef524c3b' }, index.h("h2", { key: '8b735feede5041d16621b35ab4ed65b4f6893e02' }, "Test of different kinds of notifier"), index.h("button", { key: 'eff36a6ecd92f817fcb196996b6677945e535c6a', onClick: () => this.noticeWarning(redirect.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: 'bedcbef25de624da67f1ce3b1d6413d7f170113e', onClick: () => this.noticeWarning(redirect.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: 'c6a9ac7dacf8cc450d2bfb02a2bcb85f484f0f24', onClick: () => this.noticeWarning(redirect.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: 'a31c5b25807dac6438f1d3aad447610260611dbf', 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: '6875bd9cadd9f5eedfdc1dc41a68ef602f3ba160', 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: 'f7493cc029025477c394be2e48640f943e7d45df' }, index.h("h2", { key: '14f549bdca342919dd0cc6b6e039b387ca9d5f47' }, "Smoothly spinner"), index.h("div", { key: '2532ec422ca3c7f482fa2f80b8f0e188d00ed9e7', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: 'ca6bff694dfae13cbe31781fe75dc5a7f22726ce', size: "large", style: {
                     "--spinner-background": "200,255,200",
                     "--spinner-background-opacity": "0.2",
                     "--spinner-color": "0,130,0",
-                } })), 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: () => {
+                } })), index.h("div", { key: '94e96d5ea29719b5ed508879df5905db45e9b892', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: 'a54f39247c27520000ec8a35acc4dca1eab61269', size: "medium" })), index.h("div", { key: '694bb6839a34c4d3c159674ac9d7b8764e715a0a', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: 'a4842814663b330faa6eb266722507dea1f1b0f0', size: "small" })), index.h("div", { key: '11dd2fd0047e3de22abe1de29f63ac56898b715e' }, "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: '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: {
+                } }, !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: '8e492b4dbad096875ccc36db465cd7441d33a6fa' }, "Spinner with overlay"), index.h("div", { key: '00c85d4ee92d8f2cefec690537912abd43f97707', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: 'd340e0a508673de5a44756e13a85cedcfe328e71', overlay: true, size: "large", style: {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), 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"))),
+                } })), index.h("div", { key: '016fe696e6e74e25bda569a1699e6049ac92c889', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: '66092e4011ae66dfaa436c55a39721be315c519a', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '36a1cc846982bb5a1dc54c2f543c476b1fce8c91', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: 'b693e53a081661680f6a19ba81dacd2e41371902', overlay: true, size: "small" }))), index.h("fieldset", { key: '5a7e3b61ad86969f26a3679a58323a5a3e3eab65' }, index.h("h2", { key: 'bcc731681d6db9513cfc7391fcf3689233c2d540' }, "Smoothly summary"), index.h("smoothly-summary", { key: '28698a792708b9630138d21a00bd6e367c8d2836' }, index.h("p", { key: '43cddb839948c05ee1abe3e972b465601edcfa57', slot: "summary" }, "Some title"), index.h("p", { key: '7e170421c947e618d3c88c2c78bc937cf895e7d5', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '7766bc278e892e217b6e6441e41aa626d7ecf2d0', size: "large" }, index.h("p", { key: 'a0d83a3dacd955442983b2cbf086c95e5f54b87b', slot: "summary" }, "Some title"), index.h("p", { key: '2d5957d9d8bd0d0ad1a8f0b11eb2ff211879c393', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '9a03d40210651f64b7e3146b4f1f90d0af8e3b68', color: "danger", fill: "clear" }, index.h("div", { key: '91888525a78ae6cf2bfbf492d4b8dc205d4ac1da', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: 'a22f933241a444da80c6d89b65275c4f6592609d' }, "Person"), index.h("smoothly-icon", { key: 'c79775e186b742d77715789887948c93c2c5867b', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '41b5c81feda26d37aab0d42093de072484c53045', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: 'b7d82ffdf718528fbd038b9ce51490cbce1226fe', color: "danger", fill: "clear", open: true }, index.h("p", { key: 'f09c420f105318297999e44fb90b3e22f3a89a67', slot: "summary" }, "Some other title"), index.h("p", { key: 'b2761d6607e63756c7e0ee18a9da1f16f5c48969', 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: 'de8ca3994652d8f1dd8b364d79879a8ee638f9e6' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: 'dd8c4d057d26e554b03aefc7a1cc63ccb4f162c4', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
         ];
     }
 };
@@ -3912,7 +3912,7 @@ const SmoothlyDisplayDemoJson = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '67b8c263dfe7d72e1072ba3d630ea74f0a05788a' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (index.h(index.Host, { key: 'a3e2a042bff06a25da98b43e95705b303a4e2d7c' }, [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 })),
         ])));
@@ -3947,7 +3947,7 @@ const SmoothlyDisplayJson = class {
         this.collapseDepth = undefined;
     }
     render() {
-        return index.h(JsonValue, { key: '4794f1dc5f6a104cc37ef15d6ff54650c2e162e6', value: this.value, collapseDepth: this.collapseDepth });
+        return index.h(JsonValue, { key: 'c09039321486768334c742e4efc26dab510d2ffc', value: this.value, collapseDepth: this.collapseDepth });
     }
 };
 SmoothlyDisplayJson.style = SmoothlyDisplayJsonStyle0;
@@ -3981,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: '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)
+        return (index.h(index.Host, { key: 'f0d5f6e755c48269ebeddd210961a91a45ac637c', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '9d8da480999cb92e162e1472c4cf0c4253033553', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: '4e540c3b7ab63546106d485b5e88849be5e497a3', 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: 'ea5f8fbd4f35a2c5a462c66fbb9133f806655e64' }, 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: 'b8bd52db35dcf7bc14de9fdfe3b928eebdc04d7a' }, this.closeBracket)));
     }
 };
 SmoothlyDisplayJsonObject.style = SmoothlyDisplayJsonObjectStyle0;
@@ -3997,7 +3997,7 @@ const SmoothlyDisplayJsonPrimitive = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '7fb3f1eae3a5a4e958aff79b218347ad089810cd', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return index.h(index.Host, { key: '2b2dbfe65a076ca4c5e5b4f16b9431eeca85ffbc', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
 };
 SmoothlyDisplayJsonPrimitive.style = SmoothlyDisplayJsonPrimitiveStyle0;
@@ -4011,7 +4011,7 @@ const SmoothlyDisplayJsonRecordKey = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: 'e7e589428127bdfdc3a226523417e256788003f9' }, "\"", this.value, "\"");
+        return index.h(index.Host, { key: 'e76d5030ff940c6a7d9acf859603e6be834a3b81' }, "\"", this.value, "\"");
     }
 };
 SmoothlyDisplayJsonRecordKey.style = SmoothlyDisplayJsonRecordKeyStyle0;
@@ -7040,11 +7040,11 @@ const SmoothlyFilter = class {
         this.filters.forEach(update => update(this.criteria));
     }
     render() {
-        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: () => {
+        return (index.h(index.Host, { key: '8fa96851dc8a5b97455ffcc90d8edb4f556e1a5e' }, index.h("slot", { key: '0a3c57ae72c5f8902d2b5f97de96c78fe6b1e091', name: "bar" }), index.h("smoothly-filter-field", { key: 'fdc85964b77a2aa02effa9f1a634164a35086f52', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '5a2a3f4582bb4ceb282c4ef6be1d439efd19ddc0', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
                 this.clear();
-            } })), 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: () => {
+            } })), index.h("div", { key: '6b7bba3c3a30cb4f9b562481d2921d595ea7e5fa', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: '5cdea6994206c24a2c62e1ac3208e03b6263468e', name: "detail" })), index.h("smoothly-icon", { key: '85d0324d62c557048e3caaaae33b2d8b0d0d4897', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
                 this.expanded = !this.expanded;
-            } }), index.h("div", { key: '31f476a863f44affca3c643529331e769f9658a0', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
+            } }), index.h("div", { key: 'f57ac805ce77fcc263d7c68581db9ae98566cf41', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
     }
 };
 SmoothlyFilter.style = SmoothlyFilterStyle0;
@@ -7067,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: '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 => {
+        return (index.h(index.Host, { key: 'f6098aa0fdc4a8be864ae688e5d792dfe5d7734f', onKeyDown: (e) => e.key == "Enter" && this.filterFieldEmit() }, index.h("smoothly-input", { key: '1f607179ee4cd0951e005a0a68f5d455a9bf3672', 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 => {
@@ -7146,7 +7146,7 @@ const SmoothlyFilterInput = class {
             (rest.length == 0 || (!!criteria.criteria && this.findInstanceOf(criteria.criteria, rest.join(".")))));
     }
     render() {
-        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' })));
+        return (index.h("smoothly-input", { key: '743a8c6c26b12a10833791e322c06887a93a23c2', 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: '68eacc299a625d16ce66b0eec27e4db1b0b6fb4c' })));
     }
 };
 SmoothlyFilterInput.style = SmoothlyFilterInputStyle0;
@@ -7255,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: '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" })));
+        return (index.h("smoothly-input-select", { key: 'd033eebdc74a6a25c7c9059d2f5ce06dc1c3fadc', 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: '74642e91b226596e425c6f676f6f855354bd0a39', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: 'bf075d1fee4c85cd8953b79cf9831c2d47b71b23', name: "items" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -7339,7 +7339,7 @@ const SmoothlyFilterToggle = class {
             (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
     }
     render() {
-        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) }));
+        return (index.h("smoothly-icon", { key: 'dd151c8e540e1808b87d0a291f3a2c5aba7ee321', 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;
@@ -8346,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: 'eb4403b534ae7629c459e69bbed7c58a992b071c' }, index.h("smoothly-spinner", { key: '7eb8bfba00f9bf4e95fe4662f67f81374e38d7b9', overlay: true, hidden: !this.processing }), index.h("form", { key: '887c85d997e05934396093909b77e54de3d02d27', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '452b818d209ae7785b40fd06b718325a49dacdb3' }, index.h("slot", { key: '689bb37245a0c4261a08330f4b72ad33b7c3393b' })), index.h("div", { key: 'd04270e156ed642fc38e3d55ca29b461d1337857' }, index.h("slot", { key: '11b1f505e69b521adac65781a8a0ec37d12b85fb', name: "clear" }), index.h("slot", { key: '43bbeff85b06a7729c857cd9108482fb01a9b924', name: "edit" }), index.h("slot", { key: '3a3add89ab58ad53cf32e9c717aeb8afd0cf66ed', name: "reset" }), index.h("slot", { key: 'dbf0cc018156aa28d052d6045c8768ad1ff40245', name: "delete" }), index.h("slot", { key: '1c0f3d61f4b650ef35745b5dac3294696831ced4', name: "submit" })))));
+        return (index.h(index.Host, { key: '1b5a8589adeaa9ce2e0bc5ad5f9385f3c725461d' }, index.h("smoothly-spinner", { key: '4b10b16462c627a3e804243d3b48a96a53a5e575', overlay: true, hidden: !this.processing }), index.h("form", { key: '40b864912ad52f0617289a15edbd6c9345bc7e65', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '9099df052261a9151d2c93feb8e6fa21ff575fb8' }, index.h("slot", { key: '8bf3863b233cb54433b315dc4073ba7ac73dc68c' })), index.h("div", { key: 'c43d6fe3ea79dd724aeeb538dfed049814ec8d05' }, index.h("slot", { key: '08050f524f3e2ff8fe2e6da95035ecc1ad989a4e', name: "clear" }), index.h("slot", { key: 'c819468427a92c7e9714592d4636f3b7fce06cbd', name: "edit" }), index.h("slot", { key: 'd2617f64c3015da52af33f31752df078d481b226', name: "reset" }), index.h("slot", { key: '787f88e7ea092d7778dc7dc0347a0f6cd49329f4', name: "delete" }), index.h("slot", { key: '9623c0eeec07d511055172b016a5d34d9d963ad6', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8364,7 +8364,7 @@ const SmoothlyFormDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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' }))));
+        return (index.h(index.Host, { key: 'f1ca7be120d87c8cdb9bd0c9121b7ccc2346d812' }, index.h("div", { key: '0a57eceabdcb885bb2b114c107bbdbf0297c4396' }, index.h("smoothly-form-demo-all", { key: 'ceedbb7ddd84562a8e4ee35e15b7b9ea51c8e979' }), index.h("smoothly-form-demo-pet", { key: '4cba93208eb3e1ef043a19713d08a286e705c5ff' }), index.h("smoothly-form-demo-card", { key: 'f5f566679b5dae179121e826534594daea439bc9' }), index.h("smoothly-form-demo-login", { key: 'befffde4476de1a6b3e5918fea806391482bfdd3' }), index.h("smoothly-form-demo-prices", { key: 'bd187e2eed55caf537cdb4383f2ef8d08de2de96' }), index.h("smoothly-form-demo-typed", { key: '3d059700b23d5cdb4bca6b133bec53b44bec85a3' }), index.h("smoothly-form-demo-transparent", { key: 'ebfb7021b446605a417d1ef7a839ddd7d565cc54' }), index.h("smoothly-form-demo-date", { key: 'a9af3ae6f5d7e4a71d3ebe4c1c3bf029fb2bb9b7' }), index.h("smoothly-form-demo-date-range", { key: '84c92fbabfb53309846028de50aa588004da1a03' }), index.h("smoothly-form-demo-controlled", { key: 'a137a49656c067babc3dfaf3768a4addf1d7fcdd' }))));
     }
 };
 SmoothlyFormDemo.style = SmoothlyFormDemoStyle0;
@@ -8374,9 +8374,9 @@ const SmoothlyFormDemoAll = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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 => {
+        return (index.h(index.Host, { key: 'bfb388adc1db43ec7287e404cd7d3c045ebccc6b' }, index.h("h2", { key: '22e727c2752992b85da8fc4292432ce05bfdb55e' }, "All inputs"), index.h("smoothly-form", { key: '4f06760fb8f66f246c4c89aec330029b0bf1c0d0', 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: '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" }))));
+            } }, index.h("smoothly-input", { key: '254ed8f85cb159a5af93d599609667088b4449e3', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '7eacb1f23d475a21033225eef8c250c5e8c06538', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '1124f037abb4a8d500c0a7986cf13c26dc64e925', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '251918938159fe0cdc97a30dfb3039e6bb0dfb30', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '7b3cdc3fdfd0b6a69410e200dcb3bd36bf79bacf', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '99531672f356a01b94b578bea0147bf9a29f9ffc', clearable: true, name: "radioFirstInput" }, index.h("label", { key: 'd29a95e1f8ab6ab7afc4f39563ffcd5d55b96b9e', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '21fd7a7d149fa8c9d6b57132e69daee11a2f65f0', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '6038befc020652cf246170b00ae827cdb00d8414', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '6958375a1942980ff4848eac8b34f8810f356901', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: 'be65bda31cab2d5d5e88a4028ee1980b8a828dec', name: "color" }, "Color"), index.h("smoothly-input-select", { key: 'a6242f5ff75f4be66b3cf83abe95279ad724dfa9', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '105edf256973242d9b3a25ae72ffc886e897b726', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'ba20725d9d9c742323e744eb022a698c4d3329db', value: "1" }, "January"), index.h("smoothly-item", { key: 'a48e992441eae172b275d9ebc082f7efae8359dc', value: "2" }, "February"), index.h("smoothly-item", { key: 'afcd5ef7d7b9adf0c1cd7d3883c817eee24e4094', value: "3" }, "March"), index.h("smoothly-item", { key: '52d2a5247e4dd727b4ae30d859b6bd6e9e85ce96', value: "4" }, "April"), index.h("smoothly-item", { key: 'cb65e2be5db79a67e8eef259529dc13bc4165c72', value: "5" }, "May"), index.h("smoothly-item", { key: '2a52b71909607fb27dbe792e9faa7c30c689d31e', value: "6" }, "June"), index.h("smoothly-item", { key: '68010b3920797ae55199a09f5aa4d0c02277b3e3', value: "7" }, "July"), index.h("smoothly-item", { key: 'd96655195f93af1cdec4c3afa1ff5a8716df0af3', value: "8" }, "August"), index.h("smoothly-item", { key: '74de65ffe848a2a20e18ea23cca052f68647e633', value: "9" }, "September"), index.h("smoothly-item", { key: '8b36e48f30e16df1ae3d997c7a2d268613998ce0', value: "10" }, "October"), index.h("smoothly-item", { key: 'b0784ebd2bb7e7227b806bc92d04b1e2090ad8e6', value: "11" }, "November"), index.h("smoothly-item", { key: '1a2a7e4e6511f955a18c813c84e58a28bc404248', value: "12" }, "December")), index.h("smoothly-input-select", { key: 'c2226b1ae4c7047b0ddc4253f5a7606b7f2fc9e8', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '9bdd864c8272b2ab73547074189e16e93bbcb95c', value: "folder", selected: true }, index.h("smoothly-icon", { key: '58cce63b8b1ee021e662048d91985f75cc8fb41d', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'f26e4fa4f9866d771b0eee93c846501edd0c59a1', value: "camera" }, index.h("smoothly-icon", { key: '17f8216fd071284f115b35f067a40fc20803e955', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: 'cf4f2cca30379914d19a4cb2ed34010d93910b46', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '74a5b23416500762fe906037d17e04fb718f0128', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: 'c3cd9df502de377b2bbb9320118f5177bd35ee23', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '47afd204f75f650056ae56f929e5d8ae7565d40c', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: '1db6e482e8e9dfff2a85e63bbd0b4ee68c6c7f29', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: '5e2fbd3adb3b466914f50744bff8431419d9ee8b', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: '31f6bf08c0f8e34317f6b89a144e20953fc6a764', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '25a5b5d189a8a36acb5b1d91b128d71d8483325a', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '72e4cc632ac58f1726c0f15f1d42900eeaa3054f', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '9100b7fc807914b6ddfc9f9c899a2653b8b77fe4', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '44fa5714baf0c2589673e9b002803a3c1cf22f87', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '4324f2e51a50f2c4e6a93135deef3c1aeca87c9a', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '06cacbee33b21ed926c28da95ca954e45613f646', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '40370e9e2ed1cd6abc3905478fa602f3860d8f31', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: 'bcd3d7cd4a2e02392a7435dbdd8757ff24bca012', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: '28104349d7e84bcc1bd08344361b0dda74b53136', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '9132ad785a35630de34b35dd6e7ddc2cfef59950', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'd8e762e2fa8133d09583f6a1fec6c997017812d5', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
@@ -8385,7 +8385,7 @@ const SmoothlyFormDemoCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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"))));
+        return (index.h(index.Host, { key: '9b131a43df2d8b5279cd0efb2cc7396a487061e7' }, index.h("h2", { key: 'ef59d5297d4218d625922176e2d9a11d5fa764bb' }, "Card"), index.h("smoothly-form", { key: 'b6b5aa1655870826e4a559cc79580a4ad9992ce6', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: '61101c45489123b34ad5ebde54ca1762afa257ad', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: 'fbab612637278f6497f034499deb8586e69892b6', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: '6516eb3313f574142c7a81d045997f98527d5e3e', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '7b2b4a7499a39285b90da3759e143944fde4d303', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '0f44231971a174ceeeae6bf66972931bdc11c97c', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'd064204b1e25b4192c955d4c4ae5e4c63e9763e0', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
@@ -8421,7 +8421,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: '1a39b78ff59692b8f790a0ca041960d4270bc8ab' }, index.h("h2", { key: '4a3177a4e7d38a59f9fa65552767bb395714c27b' }, "Controlled"), index.h("smoothly-form", { key: 'bd1b3bc05d0879c45e6867a13dad70b2f6ce94e7', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '3918be00220566daef557039bc4c703fe8e09b50', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: 'a9206282200f7e681243999da8c5d2cdf9fac7b5', name: "currency" }, index.h("span", { key: '53df31e738298a8f78681a4ac546e6599acfef6b', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '6a1b06a8fadb7fd5a46d8b26b66339a342880fad' }, "Dummy"), index.h("smoothly-input-month", { key: '3eb933f1cbbf7134db6c735d402478371271c3b3', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '344cc723f01f8df0710734ef2c5476f32e975187', slot: "year-label" }, "Year"), index.h("span", { key: '1a2517f170acfa04c76770e51ab4a396518e2d7c', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: 'a1438be3092367b439956fa2ade8edf0a00f4255', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: '7ed2d852f6887e19acffc8ee6485df88a5c4cbec', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: 'e51b75c4d335047d0faae77207f1135f164d8a79', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8452,7 +8452,7 @@ const SmoothlyFormDemoDate = class {
         event.detail.result(false);
     }
     render() {
-        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" })))));
+        return (index.h(index.Host, { key: 'aa19ebb22d681b287b2ec81202c01482e4a83f60' }, index.h("h2", { key: '88cf2ed5415dee5bf3a122b2a1a8abe20babe925' }, "Date input"), index.h("smoothly-form", { key: 'd8d010a2cc02a94b0f2f277c530d2cf3ca1a697f', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: 'cd3a8896484802bea38f330d3cce6cd1f369b6cf', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: '370b34543bbef943c67d46ca46df7e5216e2759a', slot: "submit" }, index.h("smoothly-icon", { key: '0be6193b0a290537c1d2579b22a4d962aa200296', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDate.style = SmoothlyFormDemoDateStyle0;
@@ -8481,7 +8481,7 @@ const SmoothlyFormDemoDateRange = class {
         event.detail.result(false);
     }
     render() {
-        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" })))));
+        return (index.h(index.Host, { key: '022dd0567e2b7bf321d9879b83b49c66cd1f04bb' }, index.h("h2", { key: 'ce79ae7c7408ce41e1dd8528717d52efb644b8cc' }, "Date-range input"), index.h("smoothly-form", { key: '9cb3a9b8a32949ea5dd0d472eecfef7793a7409b', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: '6f0f1eea169f5516fe5c994cd80a2369d33e5502', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '93e8e2e6f5f3bf7656c6a6753265366b13dfbaef', slot: "submit" }, index.h("smoothly-icon", { key: '28236dfe106123ad3ebefb3f5e64594d31fa388f', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDateRange.style = SmoothlyFormDemoDateRangeStyle0;
@@ -8491,7 +8491,7 @@ const SmoothlyFormDemoLogin = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: '559985f2133b7f86de5c22a88cfda3e8bd1a344a' }, index.h("h2", { key: '693658791fff278e231556b4aadcac20c311190c' }, "Login"), index.h("smoothly-form", { key: 'fd420a522a1c7f51ce277c5250ad5cc2f300af7f', looks: "border" }, index.h("smoothly-input", { key: '656686c2d6e54047aa05b2431e059da3bfb656ed', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: 'ef679e989bea7e4c5af277fe2b1a6f4ad1fec063', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: 'e7f58c64563e0e2a6feb789a9dea1aca186631ae', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'abc12666abee47139e05db5c583bb9f458f21c8c', slot: "submit" }))));
     }
 };
@@ -8507,10 +8507,10 @@ const SmoothlyFormDemoPet = class {
     }
     render() {
         var _a, _b;
-        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 => {
+        return (index.h(index.Host, { key: 'f926cc45f0cc0291f2c24c7b398606a85b50d234' }, index.h("h2", { key: 'fb0ba15fe080450f09989315d3c145028217b692' }, "Pet"), index.h("h3", { key: 'd3dccbcc9b23b2cd8218936424e17a278feea2a4' }, "Value"), index.h("smoothly-form", { key: 'bf16fa9747ed9b5a6a0208cb6f412b3203077de7', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: '517b4234109763201875c4894ab5e9627f7f4abc', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: 'ee6ac67d9818a76c10462980c445ca33ae46638b', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: '28b630a35af9ce0976bbb7057c4fdbb4c47cef58', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "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 })));
+            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: '8ee49fcf125cd50beaf4fcf593a16b58778e76cb' }, index.h("smoothly-input", { key: 'bfafcac88d20b89c67e5d1e222812f2851888633', 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: '874b59bc35579337167b159cd64a80be4504bb2f', 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: '8a489e5bb6483336c2977a5f8b64220ea29ebbdf', name: "owner.picture" }, index.h("span", { key: 'e457cee963a8060ecfc4b6beeabf0457dd45c496', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: 'a6485e71de11cde954fb55f0a08013e9674c83b6', 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: '43ecabe7e035de133f1394ddfab21b0ca8866a2b', 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: '5586a1e0ad8d9c76dc918f23b15ff653006ab436', 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: '418a7a9e76171c20d948c4175ed079b235c57f55', name: "owner.favoriteHat" }, index.h("span", { key: '7be6a6723da871f52ca827f8e65d6c0416caf881', 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: '7d10d88c10060bdd6c686febed826ad0684fdda4', 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: '51ae6d26dc3472dc34bc039f0a149e87d3a2f2f5', 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: 'af419a86d160c269862e474de0c5e354453fd8a2', 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: '003b5e3f6ed34ec8d73f2dccb1482350d2c25f86', 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: 'bb73afe0dd4b31f56ea336b9dc103367cdc627e3' }, index.h("span", { key: 'd8f5a03c901be8a2aa586011a0faef34ce712d5c', slot: "summary" }, "Summary"), index.h("div", { key: 'f7083c2d68d2e8d44ea3eb39a4f308816bdcda9a', slot: "content" }, index.h("smoothly-input", { key: 'b2efc307607f9933eec46f9b7a2c1fa9cc4d6cca', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: '0de58d7552d6fe19d3338251d7160d8fa07e4f41', name: "summary.picture" }, index.h("span", { key: 'f617802b638f635a38d60561098e14844dd22d50', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: '12f8e38b0be8b6d4448a1a210b279f234723d089', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: '4183ad71048f2a2b83d9a3cc15c342e70d32eb36', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: 'eaf4fd928b7cf9809236a25ae9aaece4db40ebee', name: "summary.height" }, "Height"), index.h("smoothly-input-select", { key: '0340202daca1bf8be541d1065306abdb73994216', name: "summary.favoriteHat" }, index.h("span", { key: '455bd818a3896e691344eee0290c8e4b2b6b99f9', 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: '95cd6a00fa1310c8411f5449e86a8380ab23f893', name: "summary.month" }, "Summary Month"), index.h("smoothly-input-color", { key: 'aaea740dcda58e663d77fe278af20a37d23c3c29', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: 'f0abc5f653d76d4a8e80db253f73478808772f26', name: "summary.favoritePizza" }, index.h("span", { key: '2e8aae93b6f3023d90d46b0661da993069254ad9', 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: '62fb76ee63e7ca04acace1d704b7162007dc6113', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: '5694a29b9cb38faf9b5bda9872e6acc89e9b815b' }, index.h("smoothly-tab", { key: 'c8fdf7364cfd3e0ba67c0737585c460339860428', label: "Dog" }, index.h("smoothly-input", { key: '73ba074a24956a96b8ae05c5d6e1b4ce0f2f5904', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: '38635ba92663dba7ef33bbda1bbd28006795f9a3', name: "dog.picture" }, index.h("span", { key: '69fe9e2e95cab3a6cf63a2b9032164e858da0056', slot: "label" }, "Dog picture")), index.h("smoothly-input-date", { key: '873516c880d3be1b82fce0d2b170f26fc8edcb7a', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: 'a4df495a378d7d69b36a3112815ab28eebdafb18', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: '4fd169248a34652e2afa5bd9c82f54ec80cc925f', name: "dog.favoriteHat" }, index.h("span", { key: 'c367310b392845a2b647c2c1ec18136da4d62982', 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: '4c6c3d2b49b914f261dd2c96b720e6664e852f58', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: '47d1c6868f78ed5b1480385a430f81fec77de458', name: "dog.favoritePizza" }, index.h("span", { key: '3af8fa1b379b9c7d2817c0f10c0651dbb440f478', 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: '3eb0518c0833b098a68dcbac9171fc533015e34c', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: '7828d4ca2378c3e7c21ac98c6696991f8ede4452', label: "Cat", open: true }, index.h("smoothly-input", { key: '58a99bfe09285c7698f0463a4e9ad2c5dc94e300', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: '21482df51ba28296f09a6f38c57008ceae652055', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: '4aa5da7331a5af8db6b69a34c541d9ec23ab3529', type: "json", value: this.value })));
     }
 };
 SmoothlyFormDemoPet.style = SmoothlyFormDemoPetStyle0;
@@ -8520,7 +8520,7 @@ const SmoothlyFormDemoPrices = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: 'fefcedbfe8f22921bea912762f1f6d8caf6ea3e4' }, index.h("h2", { key: 'c18e909d513549a9a8cc28b2b1d8982b96703343' }, "Prices"), index.h("smoothly-form", { key: '1eb8cab4a08f19f246c5cd46362452b416db1573', looks: "line" }, index.h("smoothly-input", { key: '75439c727baa6c39b500deec470d0a32953fddc7', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '11b3a7ab0e4dd1626e7efea03c56ba4c1c5e9c27', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: '837b810384d7818df18c2ed9d6d08eb965124627', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '6ffb11da5cecbbeeef8b6482cbe3cee39e16b6ef', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '4409191ea5b5b0ded31bffc9408927c36bb1bd3b', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '8dc492d719d9e2eabba22c402e0349fc5aa7dc9f', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '2def9348a43704dafc21e3738de05d074f189285', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: 'a788708ac62aedac125182d8b2e85ce1e9a62001', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'b8952a88dfb22db800ae00540c83d90feb160152', slot: "submit" }))));
     }
 };
@@ -8529,7 +8529,7 @@ const SmoothlyFormDemoTransparent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: '04a9b341275b0e795c4eb76aaacd3fb87df733d9' }, index.h("h2", { key: 'e91d5932abf4ccf5004b55fcbf112796654bd787' }, "Transparent"), index.h("smoothly-form", { key: 'e8e57518dbc350268b30c66283687d06ad269ac1', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '9f550901327e83cc39cc8d4ff35374eaba49637a', name: "file" }, index.h("span", { key: '15b9a81653d0786929b179ff2ab84ec0ff2fc534', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'f1c27d7dfeccd0cb9e2138ec9c41ecfedc4bf65e', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '0997d66db8a8a8e3e1a6efcfd0a93179dab690a8', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: 'd8e809c2304d60c231a8cab78d5dc7aa5afdc218' }, "Date"), index.h("smoothly-input-date-range", { key: '0739bbdd6fe540e8b1a8a722632d614d35fd0d1c' }, "Date Range"), index.h("smoothly-input-select", { key: 'be68afbc1bb355a9f8e220fb50a55ff7337fb162', name: "transport" }, index.h("smoothly-item", { key: '694c5daca6cc3b1ca62e3483418951705cf3d2b1', value: "plane" }, index.h("smoothly-icon", { key: '1620bcd508ce6edd6e39056c04a36c2ba96ce94e', name: "airplane-outline" })), index.h("smoothly-item", { key: '06a6bca3d2ff01577a12dde4aaaaee4d0c635f51', value: "car" }, index.h("smoothly-icon", { key: '9e593b841666d8aa7afbe3c59f3da2848f3e4e1a', name: "car-outline" })), index.h("smoothly-item", { key: '35dc7d4d75ae3c9006567800c5d1029042746a53', value: "bus", selected: true }, index.h("smoothly-icon", { key: 'f22dfee878b8bec5950229e5baf0abe2e18207c6', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '71c442650bfb27d4ecf0556b1f4b917bc7033a8b', icon: "checkbox-outline" }))));
     }
 };
@@ -8551,7 +8551,7 @@ const SmoothlyFormDemoTyped = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: '4ed477f128d5b098d3310aaa266c4af1922832a1' }, index.h("h2", { key: '1e8f3c9b75144462366853f9f6cf5a1c5f0faf65' }, "Typed Contact"), index.h("smoothly-form", { key: 'a519b7dbafb502af88cbf9a5ba47901ef4be0cb6', validator: Contact.type }, index.h("smoothly-input", { key: 'f147113ea3704978efcd40cba1cc37f0ca0eb9bf', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'a9a36af0fa69a2a05e96d8de774f5c688c9c1bfd', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '0717cf0ca06d930b20c9462b8d0b1e14ff6d82a1', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '57afba493b35c43327790befeb1269cdec67b605', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: 'd01d7aa69d6f1e24e3790580867cdccfeeb5fc50', name: "country" }, index.h("span", { key: '41d0cc36d65c3661101f9a17d37c037f76904a59', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '7e169ca0ec70c91d19b54c1b7a982947d40dcaee', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: 'b051e825afa1f684438e9190c8c26de4036473c9', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '02c15203368038bd7692528587764d27cc36b8e3', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = SmoothlyFormDemoTypedStyle0;
@@ -8649,7 +8649,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index.h(index.Host, { key: '61cc062ccd91964eead610a03cf88160052b9ab3', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index.h(index.Host, { key: 'ea8f2550f4cd026b7840ca65b05fa6fffe9d0a8e', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8669,7 +8669,7 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        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" }, [
+        return (index.h(index.Host, { key: '674cc4aedb027419d9df487644beefaef9a1533d' }, index.h("h2", { key: '0c7b78cb56ad8db8c4c693b941bfafdf899b524d' }, "Filter and Variants"), index.h("smoothly-form", { key: '5bac7acfbb224363829d2bb139f3607d25367fb0', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: '2b70aa984f91cfb64331d35a77fd7036e66d1a21', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '5acddcb3aedecf9e766ead9ea29c452ed99cad35', name: "variant" }, index.h("span", { key: '2bb2ff71c921c2d27c022add44214b9ad03422fe', slot: "label" }, "Variant"), index.h("smoothly-item", { key: '5306c841dc4a11685ac19cee1ab5afdecf756ecf', value: "outline" }, "outline"), index.h("smoothly-item", { key: '9e33539f82e06e0f0d4a97bbbd967ea888b68dcd', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: '1187b4c1921322c2ce13736a9ef587047666ffc5', slot: "end" }))), index.h("h2", { key: '4b81131f04c46e2079f39554a80216303350e1a6' }, "Props"), index.h("smoothly-form", { key: '64b35110052a66a0363da63a8dff49e7adef340c', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: '6a49518ab85500b14c6f8b622cf77728e9c75e1f', name: "color" }, index.h("span", { key: 'ff1f1cd98b3de6f1b73cd64a04532500e9285250', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '1753e3e8cbb671ae14d52d5e853245f2e124d3eb', slot: "end" })), index.h("smoothly-input-select", { key: '7843e1ceb727c43ee40456c5a75db3f379875e01', name: "flip" }, index.h("span", { key: '9ad5e11478ca98b0ce69fb73d446e1a08f9f7b6c', slot: "label" }, "Flip"), index.h("smoothly-item", { key: 'a7f0dc7f4fd11669a352ddfaa8653e5fa772640c', value: "x" }, "x"), index.h("smoothly-item", { key: '9efeac6f3ff2c93ef983334b2e4b457787b0eb11', value: "y" }, "y"), index.h("smoothly-input-clear", { key: 'bf513c36b33cc280b8338a34e11a30f4a861dcba', slot: "end" })), index.h("smoothly-input-select", { key: '368d13edb99a8851e6ab0473e99b2970f062729e', name: "size" }, index.h("span", { key: '1257ad59cc7a5e292e1845d1e2d0a9a9e87446dc', slot: "label" }, "Size"), index.h("smoothly-item", { key: '29e89d7040869bca4c33163765b1786d95d4c27d', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: 'd6f63b9c23cc7cda3ece629c447973ec6963ef05', value: "small" }, "small"), index.h("smoothly-item", { key: 'f9d77054fad8b3b4a546b55502c05e7d2b2b5db7', value: "medium" }, "medium"), index.h("smoothly-item", { key: 'c77d11dc47be389fd98c9f23ca43cb9966afb00f', value: "large" }, "large"), index.h("smoothly-input-clear", { key: 'f931d095db60103f2f18cbf3d38f440e508ce29b', slot: "end" })), index.h("smoothly-input-range", { key: '8a8015fe74c617fa36fe9e55a2edf46eaaa401bd', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: 'ae84a4483bafd836106d7e120feaef64c837329a', slot: "end" }))), index.h("h1", { key: '8887068f17681fa3056bd6b1114a5bdc427cd295' }, "Icons"), index.h("div", { key: '7d94cac9fc59953fe9c4ffe6a3f7c969e0300481', 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)),
@@ -9046,7 +9046,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: '6cd7aa8a819bb907669e1ab37160653363eea7d7', 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: '0cb34738baae3f04cf1b571c2216b3b156e37af6', name: "start" }), index.h("div", { key: '7d903f93a5eec82c11ae11ad353ffc4d6367935d' }, index.h("div", { key: '476b41ea405c5535a26c6031fec5a1a7dc525d57', class: "ghost" }, index.h("div", { key: '6df340bc0af606853148a89e35058e117699c9a3', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '8536db3c4b3f11c7b7461af4c5275620ea032d0e', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '78716f7025f1b224ece5439cedba196d7eedf471', 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: '488da348621b80d3cce00d253fe59ad967d4243f', 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: '0c454e5e090958f8d9be3ba57c5aa2b6bc42be31', name: "start" }), index.h("div", { key: '7ce07e645553ed5e0ecdf0547ddd4b01c3ef57ed' }, index.h("div", { key: 'b8f0936c66be5fd781c7acc051fc61e0bb04e248', class: "ghost" }, index.h("div", { key: '3df46f48fe6831d428d5106d77d8c9d5eb9f5128', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '2f71893d7211225d7add357a7dcd76d3ffaa970c', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '0aee0a897bc4f3794e8d177fba2c6d09d681f06d', 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();
@@ -9059,7 +9059,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: 'f58d7b17ee3d85271d2176af3467d486dad75242', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'c60916793141a30eed9a9bee88d91d6f4b0691a8' })), index.h("smoothly-icon", { key: 'ff2b6d441306f6ad9f06b2d9097caa7bfea1d0a0', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: 'b776850e4b5fb350aac85ba09ea234c075d4ca3b', name: "end" })));
+            } }), index.h("label", { key: 'fb3bcebc770543e7811d68c7930c09cf2370859d', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '1881af7df48fab8b47e9f337ef8db3e277b6c3ac' })), index.h("smoothly-icon", { key: '459cc05ea72fd98cd43d64acdd60c58327a2677c', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: '219c8d02c6ef657d4e972fb667e959f3803ab4f9', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9140,7 +9140,7 @@ const SmoothlyInputCheckbox = class {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        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' }))));
+        return (index.h(index.Host, { key: '70df4c0650ffe6d9bce09712909a376247d038a0', 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: '092644e6b2fbf348f5dfc5cea42ab7874f90a1e9', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: 'e3f90fee414b5c257f0ebf0f550817773ed02b0e', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '0073f250da12bd83b6daaefbca16a72101b74636' }, index.h("slot", { key: '5478e8791c8b957afa7a0935c38a08420634bab2' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9190,7 +9190,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'a0d238a896afcda6611c7586b27b4e9b287aff44', title: this.tooltip }, index.h("smoothly-button", { key: '2275a4e66801744b2fcf751e089d34d86cdefc2a', 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: '9de9c388ac7d872e12c1520cc5fa74d3619c6b91' }), index.h("smoothly-icon", { key: 'cd5225e037c955febc9ce5f6a9e7c81694da86d0', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: '135be2560f0a4859b73f0ddd6a5572b0d404c939', title: this.tooltip }, index.h("smoothly-button", { key: '9dc3e2381407021be2a9a464774943698dc8259d', 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: '81d4ed34b419fcdd6c94158dd01719487b790b01' }), index.h("smoothly-icon", { key: '2706b2b7c553e4778dbffad5654aa530b524eac8', name: "close", size: "tiny" }))));
     }
 };
 SmoothlyInputClear.style = SmoothlyInputClearStyle0;
@@ -9340,7 +9340,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: 'bfabfb0cb6364a367ad580aaff7b2c0420cf5f08', style: {
+        return (index.h(index.Host, { key: '5bf7bca75257855d0f475be05dae42392fa37b6b', 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)}`,
@@ -9349,7 +9349,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: '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() })))))));
+            } }, index.h("smoothly-input", { key: 'aeb2e4dcf34ef5dde693d3a0627c24846e4d99d9', 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: '1448f81dfefd2ab6141716bc4c2549e5ca2d60a7' })), index.h("div", { key: 'ec83428a03f990ad59c391b8f4485463290ddb63', class: "color-sample" }), index.h("smoothly-icon", { key: '13cb09c74b7827943fb3d21dcdd6b3968f0a27c5', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '8aec96224aebcbd91420f42993e7aa919e06ef26' }, index.h("slot", { key: '5658e43f77e2ffd56852322f9eae6ea1dfd94b5f', name: "end" })), this.open && !this.readonly && (index.h("div", { key: 'e9d944bdac33e77bc053f7e455ac1911e30c7531', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '5a7862b24b66257d0cb82608e38260b0f418c47b', 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 {
@@ -9363,7 +9363,7 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '32b690c4dd7460549299e38a5da3fb06d93044ed' }, index.h("h2", { key: 'f2a1c4bfce5ab9ae0cb568c37184776882678a08' }, "Color"), index.h("smoothly-input-color", { key: '97265d41ebcf18e1d9282d90898b325c7b807e56', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: '9c124314b12776a21c4fb18f061774ff2cf46985' }, index.h("h2", { key: '63ed15658bc3cdeec16a69b154043256d1a76d17' }, "Color"), index.h("smoothly-input-color", { key: '1d0df5f73becd460e39518ef5ec812c94875b59a', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
@@ -9455,13 +9455,13 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        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 => {
+        return (index.h(index.Host, { key: 'd0aa2669b708dd54eb52c3c2c021d5d3dd243a75' }, index.h("smoothly-input", { key: '5546c946cb664ac1ae41b882bced85ea2f653792', 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: '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 => {
+            } }, index.h("slot", { key: '99977a8ca529f4cf48c170d01d9fd55bd78f2a04' })), index.h("span", { key: 'c6bef02818d5f07c426c6584ede08a488a65d260', class: "icons" }, index.h("slot", { key: '956733ea747dbf023ebab46936ed92da170c7b95', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: 'e9c4a2034cc79163972d78300f1c29df2883bc3d' }, index.h("smoothly-calendar", { key: '8b7d430ef9daf4a4c6475b1384813b516bd9b706', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, 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" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: 'e2239089b7e57b9841dbfe192959e78bc8d4fe38', slot: "year-label" }, index.h("slot", { key: 'efa0ea2ec671291aa801db4114ea015c50d9f6a6', name: "year-label" })), index.h("div", { key: 'f026d9a5e9aa30eb7ecf9426978bc6cbb289c321', slot: "month-label" }, index.h("slot", { key: '9367a4dd4b80e1ab6568005d394569687cbc652f', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9567,12 +9567,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        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
+        return (index.h(index.Host, { key: '8d0c83ab36b5392715311a6419d1edacfdede8ca', tabindex: 0 }, index.h("section", { key: '99d6dda96a17e16314434a1819317a7d2b3e8acc', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '42eedb4b26f847249b109342ffd60ef2aba62f06', 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: '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 => {
+            } }, index.h("slot", { key: '18df7411ef4fd886dfddd8352eaa7ad02f7880d6' }))), index.h("span", { key: 'a3163b9d70827d440bfcd27ba5a3cf6d20d873ac', class: "icons" }, index.h("slot", { key: 'e74a80a35e7f3dbb1bb314df9a226c9b2d46a428', name: "end" })), this.open && (index.h("nav", { key: 'd33e76fdc7030ab08592c4d1c8db6d5365b59fcb' }, index.h("smoothly-calendar", { key: 'd122e52bb71a2a9faa37f371b4340c1e25030ce3', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9603,17 +9603,17 @@ const SmoothlyInputDemo = class {
         this.alphanumeric = "!@##";
     }
     render() {
-        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: {
+        return (index.h(index.Host, { key: '4d22468a080d1988e357ceb32b5df876a4c6db20' }, index.h("smoothly-input-demo-standard", { key: 'fc7fb5262f36fd7f953751fcca8b5056f08eb858' }), index.h("div", { key: 'e7b88f15dc9b8099bb60a9e336214e3b7b9f57db', class: "inputs" }, index.h("h2", { key: '38b73daf079236b55df1c6eb8a9e62039d636cd4' }, "Calendar"), index.h("smoothly-input-date", { key: 'd0515c4d2d38fb373c9df8ce388df33667b40846', name: "some-date" }, "Calendar"), index.h("h2", { key: 'c2cc92d5fa683da3ac36918b7089e4d562bc3236' }, "Date Range"), index.h("smoothly-input-date-range", { key: '01c970d18df033178939d14a7d690fc6eef35570', 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: '7470398fa98ccb00d749bcbc5f8370234f1d5ab7', 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: 'ec7d4687d0e66aac5110a61f4db380f9aa677f30', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '0c3d14c0cb2773bd20a8f894523a9f00b3da7d3d', 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: '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 })
+            } }, index.h("smoothly-input-clear", { key: '03ea6127b0abe9f8a99e65c3e9c0aee7f57b35d9', slot: "end", size: "icon" })), index.h("h2", { key: 'd9f827401eac78533a5797f184971b0d9e45a1e7' }, "Date"), index.h("smoothly-input-date", { key: '8afba635563e6833d94a0085b1623aeeb9e1cf00' }, "Date"), index.h("smoothly-input-date", { key: '43084ccfa8d45e94e0b54d9bb18f9b3540c09a62', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '884a35070dd150e600b40deeb611af0363f2b07a', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '09171749b51c63cc8b6c319114c0bd7d570af033', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: 'ee0f606241ecec42b70e4f92db3100acf8b1730d', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '976e9376f119bc3e8196ef32177ca898362c0c99', slot: "end", size: "icon" })), index.h("h2", { key: '055cd19bcf92b14d77818a25b07a737da282c85f' }, "Select"), index.h("div", { key: '7856e723310021883018078276ad28d38a76e900', class: "select-div" }, index.h("smoothly-input-select", { key: 'b147b8137ae583d9c3df8be484fcc5fa3034034a', name: "select-dessert", looks: "border" }, index.h("label", { key: 'cba34105b7c98d4956e4a9ec7931ae6bed50d0e7', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: 'd085fb3d7667b8baf785660868e57e81603053b4', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: 'cc9a94fcdd9270e89572a72f258ca1c70640c3a7', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '624c9e9ef3f76ceddb3eb54348739304fc537297', value: "3" }, "Cookie"), index.h("smoothly-item", { key: 'bfc710e98f216544dc76a68e602f0c16be88a599', value: "4" }, "Croissant"), index.h("smoothly-item", { key: 'ffc432e8854cc83883e0169cadafd19aff635cb9', value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '2c6ee00939da166c9ce3cb4c72f204e9c88a882a', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '5592d116149f40ab8fc234276aef37d9e38e42a8', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '784bf8122cdcc84641ab9424f7092ad9c6ee5eba', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '4dc7f7b95a38860bad0888999f19ad38f66f414a', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: 'ad2b235845e8b1490fb2fb9b097e637724663fb4', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: 'aaf053c467477856fea93b48b61c899ad26b4a02', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '75977992ad2bb03d68b43bd72f387917391a4201', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '26e4d2b1796807ebe3d68a39893096346669bd62', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: 'f3417f59ced46f59ac7262af4a8a065367732542', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '906591c99263c695520f6f0c09d0d291e0a19bd4', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '1f26bb3c7429fea49657d60502e5a75439cafea9', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '21698bc033c9cfa8059344213b1e714b949f2bc7', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '2728237616137cacc93a23ffac8427ef5093dd06', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '512228c9a18f1b9f7acbad35db98eaadcc5a394e', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'b0305ab339117b64d8804b0e8c911b35c73daeb2', value: "folder", selected: true }, index.h("smoothly-icon", { key: '778c15a8e46b9f5970b64a26d11f376205294075', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'fec4a02325b69e05095690e9f058a011a056a643', value: "camera" }, index.h("smoothly-icon", { key: '306687342fe6eae48619bb38721dc9cbef1c3cf5', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: '36b1d351540b475aa68d78e265cf0f2d7a190990', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'd9f0f8fc58fa3645267bb2c3299e28405e10f42e', 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: '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 => {
+            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: '5020ba6265bc99779adc5650e96e9dabfc10e075', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '24554f38718cf6d7004d259a3ba10ad4fb9f80d4', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'b4963b60050f9efae657feac6e5b571705762ec8', value: "1" }, "January"), index.h("smoothly-item", { key: 'dd6e1ff7e14942c7b4ca1a64f338c9cf9c4e2fe1', value: "2" }, "February"), index.h("smoothly-item", { key: '900f59510c01bea81d6781422b168a94c4613982', value: "3" }, "March"), index.h("smoothly-item", { key: '1f2ff24ab65b57f691e84315294432ad50770ce4', value: "4" }, "April"), index.h("smoothly-item", { key: '5cb75032b63fc55fc67097658e4f69ad4136107b', value: "5" }, "May"), index.h("smoothly-item", { key: '9021507682e64aab64ab5de05fa4fce121111525', value: "6" }, "June"), index.h("smoothly-item", { key: 'a75a032f711d2ea85e201257dc31477687b71e83', value: "7" }, "July"), index.h("smoothly-item", { key: '3f1866f398b3dc53b922e6e5e04b9462ee915fd1', value: "8" }, "August"), index.h("smoothly-item", { key: 'a64b2ffece74644ca9a8f9250eb7a4d1d0b706b1', value: "9" }, "September"), index.h("smoothly-item", { key: '90c89adff7c4ff81e25420bea5f513b0f5f6af3f', value: "10" }, "October"), index.h("smoothly-item", { key: '7f62a1baccaa22c0d922b6efd66ac7cd3fecca62', value: "11" }, "November"), index.h("smoothly-item", { key: '653b0c116b9a5b27f1192ebe087acb130fe5f50b', value: "12" }, "December"))), index.h("h2", { key: 'f99e5afaa18b4c2369abf1d9a619b34ee805fc8d' }, "Duration"), index.h("smoothly-input", { key: '9e93a731fc53e4a69e5cd9a5c07041160e43516f', 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: '17be7c32f4e12254ad7958d7887170a1080289f7', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), index.h("smoothly-input", { key: '8ef85b5978a8a326278a36a592a926f6eaab6281', 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: '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' }))));
+            } }, "Duration"), index.h("h2", { key: '8eb690e348aea96c400404e7992472edac18795a' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '08b42135cc435ddbafb2131d9772accb42c5f4f1', 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: '87aad539e0890e9e5eed23d95358de520aff3317' }, "Identifiers"), index.h("smoothly-input", { key: '3a9e58436f5ab310fa00bea3aca46ecab5054025', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '6ac9a05ecc748e2dbfbc59b4991d484447ef1eee', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: 'fbf58d1f86bf1b59a54dbae539d4b4ec7fcb5319', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '284bd28fff1e622993e6c83065d08821676238e3', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '198bb3b455345ef55300defa7411d96af5156985', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '57326ca3da86d81501ba335b5b0e60ff8b322ef3' }, "Input Alternatives"), index.h("smoothly-input", { key: 'de23357ca03d0071ccfa4162bb460352c16c5960', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: 'ed79db703b001d8f00599e2798c9189aef87be86', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: 'cebfd6b49ddd4dd79e0bc8126a77f1247ae4c88e', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'c5eeb09907182ee27f89b6f04ac085a63614fab2', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'ab2ae9b2cea41d42bb7f07a22118ffcb6a1a0672', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '6e4c13216c7b0e363f47ecccea6bd9f63a6340cc', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '3d284b7eb0bef9446f0c72a4a45fce496db0f398', placeholder: "test" }), index.h("smoothly-input-submit", { key: '1cc1c632686e13887b944ff8404c911ee1097062', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '96f73750c93ebb6f4a50499207a3a1a0d9076073' }, "Smoothly checkboxes"), index.h("div", { key: 'aa4929a5917cea5bcf8961d5f313805fedd9e109', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '0f907e9eb97671d69efd0cadf0a4b1b002735b68', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '25f477455d12951d0033c06f28a811a6f3255973', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '962bc40f831ddcc142ca159b26a1e2fe555aab89', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: 'c439fe413fb5341c670c3f7b76e7c2945d021f34', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: 'b858dec527a132f04e47468fd787757598978f53', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '38657e43d5d220e0bd839ab61bf3a1a0179f4df1', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'ec14c6fce7abdd68c29448feba56d19e64385ae0' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '2e478fb1582c26ef129ff6828d61598195f1803d', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: 'c940cf5f00400fd7d44907ffa14e7ac37628c32f', name: "checkmark-circle", slot: "start" }), index.h("label", { key: 'fa0a5525d6c1bfff1eb43a4e9b05ead8560617a6', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '61241218e980c5709132079759b1b84c27e2ae98', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '91e2ec2e00a856e63c3d39075751dea0347c1cd4', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '65e6dc162f6c63e2b3c23b2be07a77f1c25854b3', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '394c9e6f5c267f756008170e51c66552632883aa', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '7a8ad22f29f4b8f835d5ac6579a053547e408102', name: "radioSecondInput" }, index.h("label", { key: '8ee8c01660d6cc0d29288b2eca40316fc6038d1a', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'db0299fefc79b9467c2949c0a201dab87f08dbe9', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '11e05b7d42219a3053fa25521812244f2f0e7428', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'f725a62deff05d78b6ca6cabefa4343193c7589f', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '85d184fca2e5f1283f0775ebb544060d3bc8b8d6', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '7d8aaafc412c456769667ed7174b86e025ce3ec0', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '5b22de409c7c057c6d2e3b4bc5ac20e5313ac3ea', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '8d51603cec738f75d64420c892d4f3ed70e56c0e' }), index.h("smoothly-input-color-demo", { key: 'e5b826ed6916c0b1ed09ed126aa0d22cedaa0c13' }), index.h("smoothly-input-price-demo", { key: '9471cc31ced0f7a56855e9f31467bbfae382590d' }), index.h("smoothly-back-to-top", { key: '0ac3807cb7f8e57a286b8ee4a0beedbd6a0e5704' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -9642,7 +9642,7 @@ const SmoothlyInputDemoStandard = class {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        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"))));
+        return (index.h(index.Host, { key: '044fa8c4b9d8f5e7bfc3e57e4ec8c5549da8a011', class: { vertical: !!this.options.vertical } }, index.h("div", { key: '3662aa7286e3c71ee96b38446ed734c370ad11fe', class: "description" }, index.h("h2", { key: '831d2d5567a4a520b02730521c8e81a2973eaf5c' }, "Input Standard"), index.h("p", { key: '05480bcb96442c64da4323f707781d27e3aae2ee' }, "Height of input should be ", index.h("code", { key: '6c6c7ac45af02f09c11b1a4d62a5164e426a94ec' }, "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: '0ce7d4bd476dfd902f835e858ab5f6ebe645a16f', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '25f2571c6d3f5ddbc9efd0899756024010e2773d', name: "looks" }, index.h("span", { key: 'ec4db36ee38f76903ff8df4379af65f2f0766646', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: 'ebb2fc0c074c89af17e6df50d38a4caef91024bf', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: 'bd5cef034392cebc5c6000cd43b7c473368421b0', name: "color" }, index.h("span", { key: 'b6722cf63cb9f995f829704c21833e20d5d31232', 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: 'd29d56ccb184ff45572f0b67e6a341a9a1ba2825', slot: "end" })), index.h("smoothly-input-checkbox", { key: '83d811121a1be17b1fed20014014e5c3c556881e', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '68aac64ededa8b02b761f3cd56cb3d6f31b45bdb', name: "showLabel", checked: this.options.showLabel }, "Show Label"), index.h("smoothly-input-checkbox", { key: '128e2f5022cf0cedc5d2f69195e16458b9fc8c61', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), index.h("smoothly-input-range", { key: '787c162c2497211a78a0b68d44f6329d0858371b', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '35c08c03e943a73a875ed852d739d738db13fabf', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: 'a0564063144d6db7656baff3776990e1ddf7fe70', class: "width" }, "100%"), index.h("div", { key: 'af1770e8636f7f4864b1e9f8d79d21310fc6d5a5', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '684c9e2fb3f232b3a13b7f87dda970a273e06ffe', 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: '56e2def6fb71ab72d3a3f156d674c4f0130b56d8' }, "Text"), index.h("smoothly-input-clear", { key: '7eba7d6a4953d6198e1fda0ed2fdadc97b1ea3c1', slot: "end" })), index.h("div", { key: '78a7aae500ccc6197dfc64190a8b5e282adbdb35', class: "height" }), index.h("smoothly-input-select", { key: '064cbc97f54d9efea21c318c5598c2ea9e6a321e', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: 'ca332bfd4e40666e4454a9b10115f8adc345f6be', slot: "label" }, "Select"), index.h("smoothly-item", { key: 'c93d3bdbb3f77f4599552638a535bec594847468', value: "1" }, "January"), index.h("smoothly-item", { key: '0c3d8ecce9c8dff3fe3ac0c13fcbc1d85a8a3d84', value: "2" }, "February"), index.h("smoothly-item", { key: '47f2a838b2f26507d7f52559f5655dd0f6796b1d', value: "3" }, "March"), index.h("smoothly-item", { key: '42a4dfe12c71630f4896003dde6b8acd96b02655', value: "4" }, "April"), index.h("smoothly-item", { key: '4bb5861ee318b39b3ac1fa35ecd4f9b640a8229e', value: "5" }, "May"), index.h("smoothly-item", { key: '3c43648f442f21c2856d4220aef7f1f622c70507', value: "6" }, "June"), index.h("smoothly-item", { key: 'd470ea78848fb51a989655d6de6c722cd2aaa9e8', value: "7" }, "July"), index.h("smoothly-item", { key: '5bf658eb99e5d7ea1db8013de92f23e381d2f8b0', value: "8" }, "August"), index.h("smoothly-item", { key: 'd494ba5400321c08a46bb542717f734d49d5417d', value: "9" }, "September"), index.h("smoothly-item", { key: 'c75a04e1aaef26dc8ab3869671db48d2e39c097c', value: "10" }, "October"), index.h("smoothly-item", { key: '9c996849ae914f908d0719a7cf08415b7509e951', value: "11" }, "November"), index.h("smoothly-item", { key: '1bbdcd5845e428fbfeb91d773c0198ffb9c1cc60', value: "12" }, "December"), index.h("smoothly-input-clear", { key: 'cc274431a7236faef0147eef2c29c70403ae44b5', slot: "end" })), index.h("div", { key: '965e84ff3436d07777084992f391349e3e4e0969', class: "height" }), index.h("smoothly-input-checkbox", { key: 'e25d58dee03f22d22708da8a26783944da473b19', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: 'f429538b28976aa446799e160a909f7b57c69ce9', class: "height" }), index.h("smoothly-input-radio", { key: '9854849f5c559481ca4c2b9e94f3b690f3818d0b', 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: '318f3a3e48ce06b6af452f717cdc63ca1e3257c7', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: 'cb47131f2fbbca8f080277e9185a726f59a8f831', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '221e96bbddd2cfff9f587d1ff4fb1b87cae9bc9f', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'e55e72b32046dd8ad8a7cfcb1c851a98ecc90fec', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '091bd8d97c1181c7cc279e1d3ae9308734408f07', slot: "end" })), index.h("div", { key: 'db06d7584c5aa208ee858e53f9ed5d0c5e0d95ba', class: "height" }), index.h("smoothly-input-file", { key: '39b93bde42d37989305380fba2979d33eded3156', 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: '9c6247a33d43de0e5ed649515f33109caeacbe06', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '1671d4ce52d245ee1e4cb0985e74dfc358e7c881', slot: "end" })), index.h("div", { key: '07677318b0ebcb654d4cdb53440380e1ad37e7a0', class: "height" }), index.h("smoothly-input-range", { key: '4e284dec0fc57a37eb4ab06d32d01d10ed3a5c6f', 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: 'cdbb48fd450975c3781c6b95bad242634fa080c1', slot: "end" })), index.h("div", { key: 'c24c1881a74e91831c2e4559ae13505d1027d376', class: "height" }), index.h("smoothly-input-color", { key: 'b617db1b66a73dfd298aa6a17b48b0a537eec64a', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '21e5c0b4f020c63031da90d7668f70d659eb2bd4' }, "Color"), index.h("smoothly-input-clear", { key: '33b518103b68f12837a4ee25d5f72ccfcbb3b8e7', slot: "end" })), index.h("div", { key: 'e7706aa12b6cfabc23ae1d9499641d5b3df6bda2', class: "height" }), index.h("smoothly-input-date", { key: '47c0964845648b7ff59eafc7d9080692b11f8614', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '0a85480963e8f78279a9ee5751643576de0c7c26' }, "Date"), index.h("smoothly-input-clear", { key: '3f1b5355882e84c53bfd571be1ee73754f257bcc', slot: "end" })), index.h("div", { key: '35a82c5f250b6e4d24ece68a0b02c01e53272441', class: "height" }), index.h("smoothly-input-date-range", { key: '8c06cad779884cadeaaced5c5f934b16776fca70', 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: 'a08d77047d018b960f60754359229a3681f2ce03' }, "Date Range"), index.h("smoothly-input-clear", { key: '8ba119dc695c705749677ff7eafa7bde2d5eeb5f', slot: "end" })), index.h("div", { key: '216ac78045d830384411de3d5d2f4ee3bd4bca41', class: "height" }), index.h("div", { key: '24241b7d95382f3a3cd509e86d4a784195c825ff', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     get element() { return index.getElement(this); }
 };
@@ -9681,7 +9681,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        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" }))));
+        return (index.h(index.Host, { key: '0b15d6fa5f06856dcf50fa85e6c70574cfb8f22e', title: this.toolTip }, index.h("smoothly-button", { key: 'ac8f4e69cc564c1c580b8d9650626f9c34486d0e', 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: 'dedf30644a1b42cfdf39be7df53094457da4e698' }), index.h("smoothly-icon", { key: 'f1237a29936486379e732f82f47595643e45596f', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
@@ -9795,7 +9795,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        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" }))));
+        return (index.h(index.Host, { key: '6a8f4866c1fe41c863df77fc56867ea9ef894a1d', 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: '1f4e0aa503fa8c7434d782e6255e270615d6dcba' }, index.h("slot", { key: '40c4a96f6e5140cb0c42bfc3cbc2a76c3d8bd430', name: "label" })), index.h("div", { key: 'ad4a5eba13f8743a7454d92c699a9356d8f7f1b8', class: "input" }, index.h("smoothly-button", { key: '1ca0073fdfbaefc1c95cff97198ee0a846902857', color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '8504273921a1b3ff6795592ccb4ad7a2d9242f84', name: "button" })), index.h("span", { key: '2d1d1293ec1d7621375598821e6e9607f45139bb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: 'b877d7af3e3cd96238b95e7b3599087c6e09b7d8', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '816248a36d060bd217a01bd6b6dd4b5e9b7560fe', name: "document-attach-outline" })), index.h("input", { key: 'cbe1e61cd982f89843f91652c728ff2c95cd4a00', 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: 'dc9dde4d839683bed42ede9090308921479dc84c', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '9ac84050b1dd036501fcfe89ccb59be8a3ac3589', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9916,9 +9916,9 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        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: {
+        return (index.h(index.Host, { key: '8326dd10b2cb03a49c3df12c484d794ee42422e5' }, index.h("smoothly-icon", { key: '03d5ab4562e48c9d345dd28f8ba7260d8ca84534', 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: '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: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: 'cd2085f09d9ccf1c49ab6e7716301b270449cb8c', 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: '026788ad6b0d4f12b71478b04fee7ab9ec5f705c', slot: "label" }, index.h("slot", { key: '911d041691ed519c2485ba979f50a9936bd76611', 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: '08ada4e1dfd316a7c406e5e19f8c826f4e8a855e', 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: '8eff1f76b4388c488a773b234604794b83268bfa', slot: "label" }, index.h("slot", { key: 'c15e6145cb9bacc40843abdd1ad1a9cb7afe4baa', 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: 'f5f0e3b60b17279611012998265600b1a59f54e5', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
@@ -9941,7 +9941,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        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")));
+        return (index.h(index.Host, { key: 'e0130489f4c93fd3d843f2462b2c5149f157b3fe' }, index.h("h2", { key: '1995cbab87f15c67f143d463564ea7f36daae94f' }, "State demo on smoothly-input"), index.h("p", { key: '125ab5ad3c3edd286fdeec42a751412dd0f48fd8' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: 'f7cb859f06e3e22661346c8784ab639410b72aaf' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: '0cf33db6e4b836c71a5847e5a1ae084a75774b13', 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: '51f7e92ad5e05e7f0272859aa80fe65c01eb5874', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = SmoothlyInputPriceDemoStyle0;
@@ -10050,7 +10050,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: 'e57746c2bec5f30fc57caa9e7159436c19bb44e7', class: "floating-label" }, index.h("slot", { key: '4cde319cff145536d92afc992723d413af4b483c', name: "start" }), index.h("div", { key: '9acdd7631c4f98059801a62385b94201238c9926' }, index.h("slot", { key: '2764bc78bf6aea432ee8615cbe06155bcf3be343', name: "label" }), index.h("div", { key: 'f6aed08f2bc4ab55a5361f4e25f8e503fd5d1e49', class: "options" }, index.h("slot", { key: 'a7e98902742dd3255fece1692b91ca9e18699fd2' }))), index.h("slot", { key: '1f90dc67b62832bf374c6abf73612feccecbbff4', name: "end" })));
+        return (index.h(index.Host, { key: '94325a8156ac640837a500e5c28f68ce2c06e72d', class: "floating-label" }, index.h("slot", { key: '61a87a363ffc2667860db9af4ad52a08edd99b62', name: "start" }), index.h("div", { key: '6b7a40b69d699f420f3c610b3fbaddd477fe37ca' }, index.h("slot", { key: 'a6676f95118a14e4814a3704fbc9808077bd8c1a', name: "label" }), index.h("div", { key: 'b8a3e6e7b6e173501e5e160db39791f6be61425a', class: "options" }, index.h("slot", { key: 'ecbed40f61155505265f5f8d6b3c7601dd6635e6' }))), index.h("slot", { key: '8dd360a537b119abb284c51243d3427d1a95c630', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10081,7 +10081,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: 'abf7bcf3e4097671cdb53ec9a7909f10a4a98b73', onClick: () => this.inputHandler() }, index.h("input", { key: '9a5e3d668f1fdad37f114119a980726025f3fd83', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '05aa10f3e7f5a8ed0e4e7f8d903df23dcd3d2c14', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '22f8d1b96b318e90cae673e6405659ccc1bf8b5a' }, index.h("slot", { key: 'd0a730e5a0cacb96eef896a4a12dfb000fab6bdd' }))));
+        return (index.h(index.Host, { key: 'd881877d7a8cd254071fe0202554e25e359a78e5', onClick: () => this.inputHandler() }, index.h("input", { key: 'ebd98073073f29821aae7ab753f19c3ffea0aec6', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: 'ced600a185b7853039c093d855a699950c8e221c', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: 'fc9b714d55603e377ffe0c9341ec8ce242dc5881' }, index.h("slot", { key: '6bb1ab286ea926069e31e48fb23415257299ab00' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10185,17 +10185,17 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '6eb88b4d79900c496a6c0c41ae56fc12b66f34b1', class: {
+        return (index.h(index.Host, { key: '90232044ed7c86886c63e0f3a3247cd9615416bb', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, 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(),
+            } }, index.h("slot", { key: '7504c2e4c61bfa725571afed2f9081f4b86e8fb8', name: "start" }), index.h("div", { key: 'd62e225b32966530fb7ec9c82c39520ac3bc1238' }, index.h("label", { key: '5547ce5921cb8fda0a25a32c132c639c5eba10b9', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '08d86ea1cb133fede356dc71d4342fe6802f738e', 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: '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 => {
+            }, 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: '7ee11f59b572f7ad3bc943154981ae582ea18bec', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '4c96c9a690942a98638725062656861f331d66d1', 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: 'd74289b20e2645fefba9ee362e5d4c6d4bf40924', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'b4e6ac8ac6ca21e394f3cc74facf06d48226fa85', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '85d93077d0dfed541c2979132616981d1f5d231c', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'c671e7d73d701eab03855ec487bdcb967df01cc4', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10209,7 +10209,7 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: '4051df0b6e7e3616d4003fbf6041d7114e42bca5' }, index.h("h2", { key: '1bc9976be3dd1bdd9cafb957804721bfc2d35e8f' }, "Range"), index.h("h3", { key: 'c2d36a50622ab5aa5a91e7d07128710042ead62b' }, "Phone Number"), index.h("smoothly-input-range", { key: '9e3df23e6f60dee8edcb2dca05ff8fabc3f3f0b6', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '30124f483876140e0b75fbbeea412e34430c00ee' }, "Stars out of ten"), index.h("smoothly-input-range", { key: 'd4aa30a14fea1abe86520faa74db9671397c75c9', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '855cdcf0cf5968c42dc038d3cb636a4aa0c4c75c' }, "Percent"), index.h("smoothly-input-range", { key: '78a4f0ddb5615947071bcc05cd2bdd6e14c83a96', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '3ccd439f2d386f40d87d92d22b5e9539bb7a2b9c' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '3c1aa4fa46ac4c7e73fdf9df8628bf2459b354e5', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '989b64f1e98a59d34e710eff806cdf7a2fec2e9b', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '3cfabb3409c3ba4a3bb1ecd63dd51c2b79277552', size: "icon", slot: "end" }))));
     }
 };
@@ -10255,7 +10255,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        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" }))));
+        return (index.h(index.Host, { key: '3783efaed2304cc336fa8659579dfce6801fcd07', title: this.tooltip }, index.h("smoothly-button", { key: 'fbea13e6f94c40b97ff55ce8a6cc86bc50f4ce73', 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: 'ad1384e929cb9414dfdfec1a3863b5b4106b041f' }), index.h("smoothly-icon", { key: '36d9df6c1bc74b62940a4de263cfc260e604bbdc', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10564,14 +10564,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: '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 => {
+        return (index.h(index.Host, { key: 'fb0756c6066361bd2287aebc6d28b5f2496bc394', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '9bfa5562754d20fb476b2e31c0ec2893c03d51cf', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'a16dd0637d4a14ce7c0c4087722c0290928f8d05', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: '1205952806dbbc15ae2f21d6c28bf38f3098c97c', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '4f8ef15bd401a71207b649bea68c1fc1f9459896', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: '8e132252a0c1f1385b2abd12959d677c817c6958', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: 'fd83ad097c45d8fff14e9f2283cf98235ff8fba5', name: "label" }), index.h("div", { key: 'fb839d6052e539a55269290220ac5b6556fd384e', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("smoothly-item", { key: '675b123e1c9dda89f283bc90dd3b5cf187b3913c', selectable: false }, index.h("smoothly-icon", { key: '98bf2c68ab35af19717bbdcbb4afb70b13eb14ff', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'd841fbef1a3ab0cbb0106917d73236a1a06fd2aa', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: 'c0168cd488ff01296ff962a9ff4636d2df244905', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: '2341fc5864c70c90f2d2629bf1168bb0bb669f95', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '9cd4292d4da25894b44297506ba89e4259ea9cd1' }), this.addedItems)));
+            } })))), index.h("slot", { key: '9f4727478c8483f3e35ed3e24604f4bb18d9c7c4' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10632,7 +10632,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        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" })))));
+        return (index.h(index.Host, { key: '5768d9069f8002611288580dec67d6119f4f4559', 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;
@@ -10674,7 +10674,7 @@ const SmoothlyItem = class {
                 : false;
     }
     render() {
-        return (index.h(index.Host, { key: 'a6ebadd25393a75972ec92c5860de2381825976d', tabIndex: -1 }, index.h("slot", { key: '2eefba52d0cc208111208720bb474a3324a79299' })));
+        return (index.h(index.Host, { key: '1ad7925c7766f48131a3b868e29a8d3b4ef81167', tabIndex: -1 }, index.h("slot", { key: '9b813b0b3f1caafd72cefebed40b6e6c48aace9e' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10695,9 +10695,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '01f79c44a6a9f4d3736efe6e4c0ee5ee3f973a0b', title: this.description, style: {
+        return (index.h(index.Host, { key: '2e33f0d93baee1a2589bdcad782c57b52a63bc33', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index.h("slot", { key: '14273a6f60d52b740355383bfe7c419bb5ea14a4' })));
+            } }, index.h("slot", { key: '645b66d7fea66cb7b5bf1045e7e2400358a22608' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
@@ -10716,7 +10716,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        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' })));
+        return (index.h(index.Host, { key: '35a95fb4af778600b397523dd64bdc8f36db6624' }, index.h("slot", { key: 'b5aa77a8c758fe97602d099e7cfa5af3cf981199', name: "before" }), index.h("smoothly-load-more", { key: 'f469461edc4759aa9c898ae6edf8d0461b253c87', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '41e879c9ddcebe32934aa54de2b34b700b6fb146' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -10760,12 +10760,12 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: '28ddc5d3fca6524101b268794c4d83186352f77b' });
+        return index.h(index.Host, { key: '828ce432656973cd3dc94015a4f7a350cffc2814' });
     }
     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));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 styleCss$I = ".sc-smoothly-modal-h{position:fixed;display:flex;justify-content: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}[align=center].sc-smoothly-modal-h{align-items:center}[align=top].sc-smoothly-modal-h>div.modal.sc-smoothly-modal{margin-top:calc((100dvh - var(--smoothly-modal-max-height)) / 2)}.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 {
@@ -10774,12 +10774,13 @@ const SmoothlyModal = class {
         this.smoothlyModalChange = index.createEvent(this, "smoothlyModalChange", 7);
         this.open = false;
         this.closable = false;
+        this.align = "center";
     }
     openChanged() {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        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" })))));
+        return (index.h(index.Host, { key: 'ca8c015be405179688f7eacb9becfd437733d136', role: "alertdialog" }, index.h("div", { key: '05afa423533ecfe7eb42578bb32e93d3b0189916', class: "modal" }, index.h("div", { key: 'a1ad92a2aa33376be6a210cc3d2b356c61a6b612', class: "header" }, index.h("slot", { key: 'e446def80df406f67a7db346e665cc72ab6c3994', name: "header" }), this.closable && index.h("smoothly-icon", { key: '73df336557af04d2cdc601c3e8d2f5c8a8a19222', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: 'aca2bb1c7221fbce49a00a2fd33539463414dbc5' }), index.h("div", { key: '802d7b631ae8fd42853120dc1c857fadb8c289ce', class: "actions" }, index.h("slot", { key: '31e0f0cc09d4567cc4ddb8a0a4e1b46c5229f11b', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -10795,7 +10796,7 @@ const SmoothlyNextDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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' })));
+        return (index.h(index.Host, { key: '623ee286c870010d07f78c86d65a5e0acfddc0fb' }, index.h("smoothly-next-demo-group", { key: 'ead07b554223bc4c8a178aaad2b933e6fcf6be29' }), index.h("smoothly-next-demo-colspan", { key: 'd5da62f2f5c67b5ba2e2524050b631e927487a71' }), index.h("smoothly-next-demo-simple", { key: '50eaaaf73bbf68eff78068eaeace5eb793b7a979' }), index.h("smoothly-next-demo-nested", { key: 'a695bb7ff0dcb529866b9484c01e33a5da5dc894' }), index.h("smoothly-next-table-demo-filtered", { key: '05246c90e3650d4e12279639e63b93944885e4a3' })));
     }
 };
 SmoothlyNextDemo.style = SmoothlyNextDemoStyle0;
@@ -10808,7 +10809,7 @@ const SmoothlyNextDemoColspan = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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" })))))));
+        return (index.h(index.Host, { key: '9fae5ae5fd52417900b85cd1b7286226211988ae' }, index.h("smoothly-next-table", { key: '7fa918696ff0cbc055fc9679fada1682d83c30db', columns: 3 }, index.h("smoothly-next-table-head", { key: '953b379bc04dfbc70c48555be37634cc633bbe89' }, index.h("smoothly-next-table-row", { key: 'a57b92a5a37e839f5de4e33d2d0b1c36dfea9c4d' }, index.h("smoothly-next-table-cell", { key: '93aae315bf7dd8067602f31497c7d88453551d4c' }, "Date"), index.h("smoothly-next-table-cell", { key: '691050621549e189413af27ad3abebd7b1d06631' }, "Skip"), index.h("smoothly-next-table-cell", { key: '769cca5e01095fd8c4a99f9c88d0c5ee605c0ce6' }, "Total"))), index.h("smoothly-next-table-body", { key: 'ba10a91dc9b7dd6e36c5251316365054190e5f65' }, index.h("smoothly-next-table-row", { key: '0ef1e28d588a03cd17c49ec4b311d049404722df' }, index.h("smoothly-next-table-cell", { key: '2f01f179122351a37aa4d9bfee49c3a9f7a9f1b0', span: 2 }, index.h("smoothly-display", { key: 'cdce0e78b6cc01a43fcad4cf4f8f2ef985b3b51e', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: '5d17373e81827518dfb5e719b6501aa2cad32f56' }, index.h("smoothly-display", { key: 'ac37b31a93d75ec0cc51b8f026a044fd5c38968c', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '96632fe65093c0a5ffb0a99f13bbe673144e3cf6' }, index.h("smoothly-next-table-expandable-cell", { key: 'ccfd950b1e3f891501de681727fb04e30eb3e644', span: 2 }, index.h("smoothly-display", { key: '133eab18da8f74a9b5a1b062c503d517fd6f5483', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '0038fc2344f62cd389599c8259b1c688c6d84e1f', 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: '52ca0b3bc98dd236105cbd1070840f911f7088b1' }, index.h("smoothly-display", { key: '835f4f495f37982e3eeccf4fd1fd52b3bf06a884', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '294b4a0bd1348ceafeb2bc97e7dd91ca7adfd1c2', 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: 'a816070b9f7e2452e454c068ba820936158d32a9' }, index.h("smoothly-next-table-cell", { key: 'ba8caee508c08f738a05f94d77f94afff212a044' }, index.h("smoothly-display", { key: '12e4191c74895446481c8ef2b18c562139f63781', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: 'ac0a9f374fa3213b236b61eb703b8817f7e36faf' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '1281d3957bb7ba877a594c1b3fd39e659ebe6a95' }, index.h("smoothly-display", { key: 'e861b9022b6ade127f99014d24cb2a4767733f51', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyNextDemoColspan.style = SmoothlyNextDemoColspanStyle0;
@@ -10821,7 +10822,7 @@ const SmoothlyNextDemoGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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 }))))));
+        return (index.h(index.Host, { key: '6812f172370b2f33eff4df66ce64cba3ea507950' }, index.h("smoothly-display", { key: '34e7fcda101824ebc5c838fd8a86b6c0b53f4e6d', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: 'ad19427f7f4f5429852c813e96f558703f0d896a', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '5d6082020030f6f62061d4478c09f133937e6f9f' }, index.h("smoothly-next-table-row", { key: 'a6429aace4d69831d5dfbfa202edd32c2a0be838' }, index.h("smoothly-next-table-cell", { key: '67907d0e1f8b428f2e830a34e4431f94f2c31d92' }, "Date"), index.h("smoothly-next-table-cell", { key: '4fd987d8b36cb50c326f0a244e6aeed180c584cb' }, "Total"))), index.h("smoothly-next-table-body", { key: '08a6d5633c917d73b34bb1c3794ebb19cc58693c' }, index.h("smoothly-next-table-row-group", { key: '2ef152f2278b642de82a4419320e079d8bdf2917', align: true }, index.h("smoothly-display", { key: 'f0c7e2c271d99ecbeb3b02bb118b1770f90c788c', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '738562449da05e24eddaf2b1a8870eb77eb871f4', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: '6f2e6dd98f8ea4e8fe1fa0a5d89c65e040618e35' }, index.h("smoothly-next-table-cell", { key: '2033c732353e85743f88579d81e799fffbb8767a' }, index.h("smoothly-display", { key: '29caa5fd660855ce740b9a5e62030f7ddab88d75', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '8d52795adea316c6b0a6582a56b1506304362e0c' }, index.h("smoothly-display", { key: '54c0b7d38b5d001693909e40c835a905bf06f18e', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: 'afc33b08bdaa21b1c2b9718c6a3a20947ef4ccec', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '003bc5f38a5a893f2f175a167d36aacb4e66bf55' }, index.h("smoothly-next-table-cell", { key: '7679e43a33148cb91858ca51c1e003fefa54fbea' }, index.h("smoothly-display", { key: '323ed36c5717aa2744dc8a0e4dd2179b992be795', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '44f86caf0ab0eccc70b0daaeb61dd4a02673727d' }, index.h("smoothly-display", { key: '7a0385eda926bc3685c178bd90bc62e1c40609e1', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '2823addb8cb61d132f28fec06b201b669fe8a8df', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: '49de0ac612ab238e713281237c302c6b2d3fb08b' }, index.h("smoothly-next-table-cell", { key: '17badf73bb16e2e2d032cfdc9c83242cf962fe90' }, index.h("smoothly-display", { key: '37e150c03c577e514d1ffa2d520e92252ccf08ce', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '6df8ac2e9838332a15eaad0e1b5fdf3385d11fe0' }, index.h("smoothly-display", { key: '3ef7763132aa6820b981f80c08670949126ce1e4', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: '5e52abbedd65ce832012b2851f866334d63f6ca4' }, index.h("smoothly-display", { key: '29a670d47bb52e16ffcf455ca2526172877901c6', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: 'aa1d996473e2ccdd5b9b808150538d8c6c3dbe4f', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '7270edcce4b824073f410b284a65e3bb88057f0c' }, index.h("smoothly-next-table-cell", { key: '8a25cb24a0794394c5a5a8bc95e2edb7efaa25f1' }, index.h("smoothly-display", { key: '22dc2fb4fd39a8647f88559cde0bb36b2a3d0d64', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'b09d3259d98629932d8f65ac5b7cf0b4b9eb69f5' }, index.h("smoothly-display", { key: '81f0c27f64cad92003cf51ab291a4c3633dc0d46', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '19164346935e3b584774e91f9339c0044fbb1125', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'ceb7e2376ad4572abe07e9a6a3dc032278583e7b' }, index.h("smoothly-next-table-cell", { key: 'af444c1d74c4b7698a9d475802340e8923841dbe' }, index.h("smoothly-display", { key: '6019baf37aed2aeab3acd6a801e05d2e416e8269', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '755825e84e1f80b5266ab4f212761b752c1a5f01' }, index.h("smoothly-display", { key: '5489a5f9482863aa3016af95e7bef41977f9a038', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '3e8c4bfb8d26f580bb0a67f16e6bdb0b3d24b0d2', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '1415ea3d2c7dbdbad280b377d34dd46c6d1f2d6b' }, index.h("smoothly-display", { key: '6968e1670f576d4f3d0aef3b55369e9bcad51a92', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: '3e4f458a90d9845f29ba2220e1d5ac54f4b0e83e' }, index.h("smoothly-next-table-cell", { key: '005d4bb9cf77c6776f58e48b7e09ae3e297dca41' }, index.h("smoothly-display", { key: '7f71630981bc0f89d99fc6ee9cc5231a6053a12f', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'cca41e35a46199eb5282b209b0d9dd40af0a40b7' }, index.h("smoothly-display", { key: 'c141ca1622aac2802fc9a6c2eadc6427f33ecddc', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'ee6f89969c77c83a545e7350016723efd15b6920', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'bd9fbcbab9f33fc30845cb6d6768483f6a5e3b4a' }, index.h("smoothly-next-table-cell", { key: 'f27f36c7ac11adf79cd434601a906b12927bf8ed' }, index.h("smoothly-display", { key: '5e167c7a000590aa9ad80d10df9c8a6700305ee1', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '4affa13546c2802454f88874ede921d609c9d1c2' }, index.h("smoothly-display", { key: '6e6d9f7fb5cc6978f16dae939d54a9a86e589088', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '2fb8b325d27a7491ec3350b66105bd46b2740057', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '28c5673d8e2b70ba2d46aa7b573b3e28f829a78d' }, index.h("smoothly-display", { key: '257db1a81e89f3ab4baeaca246e338a60733e044', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '2589b697446de13a1803a46555f538c8183a91ef' }, index.h("smoothly-next-table-cell", { key: '3242eac11e4baefe389723e5dfa01aea00b9bf4d' }, index.h("smoothly-display", { key: 'a9024aeffa7c484a641625141c5c503e2437694f', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '11abfc5a4c581cf603a2d177956dec6b9943785d' }, index.h("smoothly-display", { key: '59d018ad4bd98109206d36ad7506e7193b3b9e1b', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'e6e9bc6ab1dbd9a199aa8b9a0a6269d6879a8538', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '013fef3e59696278aaf3330cd3ff8fc8a74f8302' }, index.h("smoothly-next-table-cell", { key: '88994bcdaa43d1bc01f4b0bcf632899690403ad4' }, index.h("smoothly-display", { key: '34b22b944b032128277471dfed92934e774d74f4', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'a49b3e12ae016f2f1a7bca634e1640bf92880883' }, index.h("smoothly-display", { key: '63196fb68baa16350c0b21638332f34a7c0dfc05', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '0dd6f9e4b9779241ec1932dc31e1f24b885fb0ff', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '2c4118b69e01d8bbcbe70e4af42d852f81f0d1ed' }, index.h("smoothly-next-table-row-group", { key: '5279ebbaddc45369f9e4272b445816ea1413030e' }, index.h("smoothly-display", { key: '5aa00f2016608e3aa26a6141220160851dd8d13f', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '79aaf1e8096a00b62a90b6eae78da7c064e61d84', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '4577c1485bc26468c22d122b21d31f4bfdd2c374' }, index.h("smoothly-next-table-row", { key: 'cc10b4565c1967a119ac785fcb52be8c26af2672' }, index.h("fake-cell-wrapper", { key: '8825c2125fb69ba280c1d6aaba26f382a549be27' }, index.h("smoothly-next-table-cell", { key: 'ffcb5e9dcc8d4484052911432d702a81b998fe1b' }, index.h("smoothly-display", { key: 'ab21c5efd0cb92ca571cbb591cb75c985891c3c6', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: '2f236ad7a1ac83b3b0f4f2920f88a7876c46412e' }, index.h("smoothly-next-table-expandable-cell", { key: 'dde72163ce70689ecc2ade6feba3d73b120a84dd' }, index.h("smoothly-display", { key: 'a721d0ca5ecc6b1791dc718c9f4372325da7763d', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '4abba2a13db57cb8a7dadbebd00900ad633f67bf', 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: '3a5f1574d5eb17004dd10b579a13e9002f216bdf' }, index.h("smoothly-next-table-expandable-row", { key: 'b6d9de9f3c3513fa225265c96162a4d23ad3f4f3' }, index.h("fake-cell-wrapper", { key: 'bbf2a862515fa0fcbcf375e57ece305bec73dad1', class: "span-2" }, index.h("smoothly-next-table-cell", { key: '9f4623b7bd2e88ed451b28226fb5b714ae60e5e4', span: 2 }, index.h("smoothly-display", { key: '1dde9cab0330ab4233bf35a156d33d588f2fdef2', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: 'edcdd269b9acbbce57caa1bf30e25fdbd23f2d1d', 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: '1aa93e2c3a25258217f8675430797d343809d0b4' }, index.h("smoothly-display", { key: '6c5ab0e9a2b94add4883f1d905fea7a1cf49f39c', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '3e86daea52b5404e33e8a50ac11f9b2099f3c31a', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyNextDemoGroup.style = SmoothlyNextDemoGroupStyle0;
@@ -11767,7 +11768,7 @@ const SmoothlyNextDemoNested = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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"))))));
+        return (index.h(index.Host, { key: 'afcb91d12b2188a832b5f344fa80aed2ae377917' }, index.h("smoothly-display", { key: '4eb71bbf17e1ddbb233478e4faa2947c702e8b7f', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: '2c0bf69688b33746c0a274418df65a10464b420f', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: 'f5c1e7bd1ba7e218f2ad31a698598262413aa04c' }, index.h("smoothly-next-table-row", { key: '2e7269938614a4677a793b4165e564c0085270a3' }, index.h("smoothly-next-table-cell", { key: 'a381ac27bad403059bc2a10d6b828ea6e595ad5d' }, "Id"), index.h("smoothly-next-table-cell", { key: '558aa07a3d1deef689f80956374d3c3af547b604' }, "Registered"), index.h("smoothly-next-table-cell", { key: '366b0cec95d3baffac284038cd5403c199f180c8' }, "Name"), index.h("smoothly-next-table-cell", { key: '94b41c5aea9b089cd5a79b9be15c98cde5bc395b' }, "Age"), index.h("smoothly-next-table-cell", { key: 'b4fc9626909c9704ccdc27a0b82a9e69a6ea406b' }, "Balance"), index.h("smoothly-next-table-cell", { key: '77fa6fa37704c286862b57bdfb7ab207fcccec51' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: 'd7943dc79f9706f889b76bf0a661c91797072522' }, "Gender"), index.h("smoothly-next-table-cell", { key: '9f222000a5c566ea794c195229150ef9b9821aaf' }, "Company"))), index.h("smoothly-next-table-body", { key: '40f669ce19da8d005095220d43cea0234410cf5a' }, 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: '31cb73ea50fe4cd712337a36b347496e2e4e4668' }, index.h("smoothly-next-table-row", { key: '565ce53718e7e9e730e9864316242d166513af39' }, index.h("smoothly-next-table-cell", { key: '8c26e7318ff853f3048e28c578b107780dca82e4' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '4996825b9fadaa50472fb905269db3acc02acb8e' }, "Footer Cell"))))));
     }
 };
 SmoothlyNextDemoNested.style = SmoothlyNextDemoNestedStyle0;
@@ -11782,7 +11783,7 @@ const SmoothlyNextDemoNestedInner = class {
     }
     render() {
         var _a;
-        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))))))));
+        return (index.h(index.Host, { key: '8db0be536678e9cf653acdcd8f65e70306483a7e' }, index.h("smoothly-next-table", { key: 'ea1ee8a17f81747b929e7a4fcef32f05292b22d8', columns: 4 }, index.h("smoothly-next-table-head", { key: '4f97f9784254d15e28c2f71e80400fa562f5a8ba' }, index.h("smoothly-next-table-row", { key: '0721f418e5240df4ca449cc481890eaaf93eed66' }, index.h("smoothly-next-table-cell", { key: '197ed222bda59545ee2ca5d949a530330cc0605f' }, "Id"), index.h("smoothly-next-table-cell", { key: 'e2a4b1f2805500e9de651dc01ff3547dfb995d6c' }, "Name"), index.h("smoothly-next-table-cell", { key: 'e914bc23240d7e5a4e6a4b3f4a0c4fabb4254acb' }, "Age"), index.h("smoothly-next-table-cell", { key: 'fc23f3e454dea6711140804a6edc1cf7d27028c5' }, "Balance"))), index.h("smoothly-next-table-body", { key: 'a87388656c70945ca653606bf77400bcca3363e1' }, (_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;
@@ -11795,7 +11796,7 @@ const SmoothlyNextDemoSimple = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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"))))));
+        return (index.h(index.Host, { key: '6f6e02e1a0a93e11b4f9294b8c4d4dfcefc5b668' }, index.h("smoothly-display", { key: 'ad351c68be667eedb947ff37193d90ccc4ce4ce0', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: '3f8322372589ce9567ceb14e20005b20cbcf6aa1', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: 'da8c36a5d6758bb47c2d2c5add980a1c48bbdd0a' }, index.h("smoothly-next-table-row", { key: '4df2b111e3e526162081e2751646e95c106e6cfd' }, index.h("smoothly-next-table-cell", { key: '29c6e2bc7af77ea1431d31d870f8be515ac27138' }, "Breed"), index.h("smoothly-next-table-cell", { key: 'a58286cb4e77ca0ab1677aaaaa76f0ba32219e87' }, "Coat"))), index.h("smoothly-next-table-body", { key: '1cf696614d12f2045f770b5f35c0470ba57760d0' }, 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: '83d989d2bb55599a34b3fe361cfd91fa5ad04c7f' }, index.h("div", { key: 'ac585b05b9ac042998d35005455f46172bccc052', slot: "detail" }, "Content", index.h("br", { key: 'eec546625e2dbd862bc9aaf8ef3dee06a5ed2aa9' }), "of", index.h("br", { key: 'e8b3e8e0c78c88150dace00999fd929cb52da2b5' }), "the", index.h("br", { key: 'd81a9a180f2245b3320852f8789060876ba9ad45' }), "expandable", index.h("br", { key: '082a9157cbe26a0f37b82ee138c0d4ebe24da619' }), "row"), index.h("smoothly-next-table-cell", { key: 'de3d20a98e85ecb572a0fe6c731140a63396dd30' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: 'b5927ae96248919daf9b63da397b371f14621b3c' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: '655aca493f190f32dbd6e4ac47a9e79351c64396' }, index.h("smoothly-next-table-cell", { key: '1e8318d4f95eb194266c69bc44fd86ab8b98e68b' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: 'f24610489f8d76028e5ee8e8f9626bc295896f6c' }, "Expandable Cell", index.h("div", { key: '338c13299f41207d1af53fbf1d157091e7382298', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: '4164ed04dc06bf7a838bad2fc6c8346bf1ee87eb' }, index.h("smoothly-next-table-expandable-cell", { key: '87c03514d1058a88c66378c88ad8939999184069' }, "Expandable Cell 1", index.h("div", { key: '4d0030352cd904a3345502e753f25b2476656a87', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: 'c8b1493a54e009a8c42fc523c7ae2ab2bf1beaa1' }, "Expandable Cell 2", index.h("div", { key: '32862c7611bb2cde4f107299fbc80ace9dbe10e7', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: 'ffa7a9012106c1a48bf10cbf71fc22466710297e' }, index.h("smoothly-next-table-row", { key: '18d3c18fb6baf2bc236b4a82662702ce26fac4da' }, index.h("smoothly-next-table-cell", { key: '2ecec2cb536b241cb4fd870b0458295de107ee85' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'e412bf8b3200d5885dec739a0f71370fd750e2cb' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -11884,7 +11885,7 @@ const SmoothlyNextTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '5d5975a4d43d7dace5b52a4acf0ffe82af226a30', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: 'aa7fa731be6c4e0db99cf5460a4c9dbc2ebe0647' })));
+        return (index.h(index.Host, { key: '4d754d79dee9b2666dfd8c09f4ed9b2a0e663746', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '0f0d0669f101793cf9db96bdf1e6cc543be2aa45' })));
     }
 };
 SmoothlyNextTable.style = SmoothlyNextTableStyle0;
@@ -11897,7 +11898,7 @@ const SmoothlyNextTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'afa8929413ad4fcfd8dc091695a46d33666ad94d' }, index.h("slot", { key: 'e7e13990accc4b9cd1532a22d14b9e358077f453' })));
+        return (index.h(index.Host, { key: 'c059ac18af9ca4e1548426337afbe190c68ccfb4' }, index.h("slot", { key: '5b2a1ca990935fe0d36142c37319ed5f158aa639' })));
     }
 };
 SmoothlyNextTableBody.style = SmoothlyNextTableBodyStyle0;
@@ -11912,7 +11913,7 @@ const SmoothlyNextTableCell = class {
     }
     render() {
         var _a;
-        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' })));
+        return (index.h(index.Host, { key: 'e1d89f9205ee275b8ca39f3804d8689bfd3ab45d', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: 'f2edaf031290ab53caad9201b9ba74d1338d4d01' })));
     }
 };
 SmoothlyNextTableCell.style = SmoothlyNextTableCellStyle0;
@@ -11984,18 +11985,18 @@ const TableDemoFiltered$1 = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, 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 &&
+        return (index.h(index.Host, { key: 'c404d58def3c3f7914736425f44b84ed0cf62441' }, index.h("smoothly-display", { key: 'a9cbe527936a663f454e7946397404f0d61af565', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '00613bd320d8e7d244649e3aabb4ef8f35626abf' }, index.h("smoothly-filter-toggle", { key: 'dfdb7ef8c4ee1cb66836d1577a2b0315d3fc94ab', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'a53b725089f7909b8dba61c681be67f3b6a22648', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'a9946e90151c488dca6cf485aecb7e9280eab2b1', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '4d77c916108266c02800615a85ac4e86c035d002', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'fc584e7577ae6cf7ffcf3cbb4376a113bca12041', 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: '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 &&
+            })), index.h("div", { key: 'cd47ae3e7fde506a0fee97fccc62a0fe2cb13758', slot: "detail" }, index.h("smoothly-form", { key: '843a2f2d18ff4a5d226362c05271de9fdd208370', looks: "border" }, index.h("smoothly-filter-select", { key: 'ad9c7bf21e573c01fdadd3ebfe6bdc0a1ef58cf5', 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: '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)
+            })), index.h("smoothly-filter-select", { key: 'f9e28061b92518d2f2c6fb76bab76232ea21611b', 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: '20950cf227e487754578871d8cbf7f5d1ec341aa', 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: '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 : "?"}` }))))))));
+            .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: '4ae6421aeff8d0d33c4d1241e27af31cfc58a536', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'd9b10a96f555bc1ca6f468a58309cce0eab8fe35', 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 = {
@@ -12031,7 +12032,7 @@ const SmoothlyNextTableExpandableCell = class {
     }
     render() {
         var _a;
-        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" }))));
+        return (index.h(index.Host, { key: '3d39e6ee0042e2aeb858d759cf32e24b582401bb', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: '76f58ea04fff2d99d957bf277800188d9c03224e', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: 'b4950a570cd39ddfc184314edfa4fe72db9f1fa1' })), index.h("div", { key: '86bf0fa6dff3855667a125ec3771c8cf0b9a28e5', class: "detail" }, index.h("slot", { key: '774928608a4a85370fd1d854466036d7a2f6f2f9', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12055,7 +12056,7 @@ const SmoothlyNextTableExpandableRow = class {
         this.smoothlyNextTableExpandableRowChange.emit(this.open);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: '50be61ce8020cebf50901b637bc1e7cbc7025f8f', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: 'c82e4510eb7073106b846db0ab5e9051a73f11fd' }), index.h("div", { key: 'b334189f1e50102b5f2e31b0a589dd69ddb037cf', ref: e => (this.div = e) }, index.h("slot", { key: '4afb77d300dc59eb316507ee996bf58d85b5a556', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12071,7 +12072,7 @@ const SmoothlyNextTableFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f9f687b29c96c6b248dc5bc2671188dbfaad2d9f' }, index.h("slot", { key: 'd0e18614274e61b26704c3dea97d49223716efe6' })));
+        return (index.h(index.Host, { key: 'fc642613d84473320dbcc35e96ddaecc8be9762e' }, index.h("slot", { key: '03441f79c1ad49482323e7bb906919d8faca93f7' })));
     }
 };
 SmoothlyNextTableFoot.style = SmoothlyNextTableFootStyle0;
@@ -12102,7 +12103,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: '92e728917e834755a0ddcabb566f9e7ef00e5fb0', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: 'a339f472c78d04d0ec4a2d092983a115f032132c' })));
+        return (index.h(index.Host, { key: '1043bf4bd8d6c8a1bbba8bd41b5a0c9f2a02f0a6', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '83f593f29da158b6db03989d657df67cf48d0d91' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -12126,7 +12127,7 @@ const SmoothlyNextTableRow = class {
                 event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: 'bdb75c884f66fdcfe5d3c0f8d7ac0a3afce1c141' }, index.h("slot", { key: '8fbe024b50166b5e811610ec6aa6f9b467101e33' })));
+        return (index.h(index.Host, { key: 'ea3b4ac10c81442db3b99ce3e668d46db6a8fa09' }, index.h("slot", { key: 'edff1558674b1e24e9dcec1dff6664756ac88dbe' })));
     }
 };
 SmoothlyNextTableRow.style = SmoothlyNextTableRowStyle0;
@@ -12146,7 +12147,7 @@ const SmoothlyNextTableRowGroup = class {
         this.smoothlyNextTableRowGroupChange.emit(this.open);
     }
     render() {
-        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' }))));
+        return (index.h(index.Host, { key: 'baeea3f08966fec8b30ead88b6cafd3c4f1fd176' }, index.h("div", { key: 'd20069252b79e2ab3808f7da0d466dc92500e69a', onClick: () => this.clickHandler() }, index.h("div", { key: 'b7415fb8b61f4fb75526e944ea5f2dd1706e12f1' }, index.h("slot", { key: '277dd8f6a037de979757a15d82541f996c6600a8', name: "start" })), index.h("div", { key: 'c6c1744fa296a962aa0b0845870bcc53a7ce5f42' }, index.h("slot", { key: 'bbc0a96a039055237c37358b31f8cff7a4abab78', name: "end" }))), index.h("div", { key: '44c0c4335f4d894b406741b5f6d1d004f38f7b4c' }, index.h("slot", { key: 'a2f405015c0c8e5cb171308c35d1941af694f2e1' }))));
     }
 };
 SmoothlyNextTableRowGroup.style = SmoothlyNextTableRowGroupStyle0;
@@ -12206,7 +12207,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        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))));
+        return (index.h(index.Host, { key: '43a3c3b3102412e3025e89cbb42b766e726ac713', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '7f642488fb4104d4150de311d08205fc2af23d48', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '58ed12291f9fa6316e83beb67469ecc7186aa79d', name: "close-circle-outline" }))), index.h("span", { key: '5a402e3a00398560ec1eda603a1492b4f1a6a3c8', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: 'b0d92f719da18df0ebab3075a278d0a468e73dc3', name: this.properties[1] }), index.h("p", { key: '5a488d2493680c97d67f5f94eb2a05d4a09e069f' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -12231,8 +12232,8 @@ const Notifier = class {
     }
     render() {
         return [
-            index.h("slot", { key: '006cd0996ebcc7ed267d4185f7b19535dd4c6a8f' }),
-            index.h("aside", { key: 'ab767aa730f8bae5621de7bb520149f163af27e7' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
+            index.h("slot", { key: 'e960448898c2c370923824509f94c86e7a32d3ba' }),
+            index.h("aside", { key: '087ec28784d586acca0024579f71a9cf201ec091' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
         ];
     }
 };
@@ -12249,9 +12250,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: 'f8f87e9c4b24c3a8cbd3619c0f769622e0959144', style: {
+        return (index.h(index.Host, { key: '63eb430e6fab4330e9819884645455867633ff48', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, 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" }))));
+            } }, index.h("svg", { key: 'abc002cff5906b3c882d908382d41028dfa69dc8', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'ff47ae8ca20d0912e4faf98aa13b506ba5813232', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = SmoothlySpinnerStyle0;
@@ -12284,7 +12285,7 @@ const SmoothlySubmit = class {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (index.h(Button, { key: 'e744ab24a03f09fcfce4126bf1c515cea3d3e58e', disabled: this.disabled, type: this.type }, index.h("slot", { key: '7170d7a7dcab90043a63464774b149cda9eaf5ea' })));
+        return (index.h(Button, { key: 'e626224ff9e4f244914f9de0ad48e4a73570a3fc', disabled: this.disabled, type: this.type }, index.h("slot", { key: 'd8bd3b258e250bfa191d0298f5aaa22aae8aaeeb' })));
     }
 };
 SmoothlySubmit.style = SmoothlySubmitStyle0;
@@ -12319,7 +12320,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        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" })));
+        return (index.h("details", { key: 'a8d5d1503aeaa1ec9cc738ddae8603f2a3f6988c', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'd9982b3e2c4b3d273066dcbfd457fb239f54f0b4' }, index.h("smoothly-icon", { key: '40949f769814b95525c7239c685cb61ae5d13173', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '1d1fafd0549b8da6150c7299fc8fde77b8879dfc', name: "summary" })), index.h("slot", { key: 'd02d70dcc5145413c1d34c51634f4b744f50b7d7', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
@@ -12361,7 +12362,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        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' }))));
+        return (index.h(index.Host, { key: 'cdbbca6716b3a1d87e442e10755e56e228a5ddf6' }, index.h("div", { key: '90fc76872efeec9892a1ad9a89aab0e13e86eea6' }, index.h("label", { key: '0c48385c46cb4c5aed14415505cd248a94d5e1eb' }, this.label)), index.h("div", { key: 'eceb62687b2e1eb4f022976e60daee5b42bb3f8c', hidden: !this.open }, index.h("slot", { key: '0d1d67d5c332d89e15e9eb1e7b7249307946027e' }))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -12412,7 +12413,7 @@ const Table = class {
         event.stopPropagation();
     }
     render() {
-        return [index.h("slot", { key: 'bc7ed690ff5c01071dc2f439b76474122a93d3d2' })];
+        return [index.h("slot", { key: 'f820bba496a87eec4d3a16f455493511aafe9bfc' })];
     }
     get element() { return index.getElement(this); }
 };
@@ -12426,7 +12427,7 @@ const TableCell = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: 'dbeaef35c8882ed996d835b1b43e4ec3aa426f0b' }, index.h("div", { key: 'f6be207b91e0b99e3fb829b7a83ac333502a0871' }, index.h("div", { key: '3d879455c464bba77b6c73d58f24cbb0e1fb4740' }, index.h("slot", { key: 'c3709444fb691f18cd7adeca85ee6326b525a286' })), index.h("smoothly-icon", { key: '6319347b9432db0fe25beba8c978daa26fcc568c', name: "caret-forward-outline", size: "tiny" }))));
     }
 };
 TableCell.style = SmoothlyTableCellStyle0;
@@ -12439,7 +12440,7 @@ const TableDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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"))))));
+        return (index.h(index.Host, { key: 'c2d52ed632722eed2a62ad7a8a1579532d535ee9' }, index.h("h4", { key: '6c2693b2a15e519fdfeaaad2babcc5a692d1df92' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: '7370339c630782920d4ea3f87d9ca2a9fed09300', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: 'ec5ddba9aab436b3ea95416de3253c96f2619c39' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: '6aa1c41adfa38ae2a28fdae872105000feebae48' }), " ", index.h("h4", { key: '939935ca5079dbb902054281239160cc8043ba61' }, "Demo table 3"), index.h("smoothly-table", { key: 'd6dd1dcd03f7a8536dd35d947875b123868f363c' }, index.h("smoothly-table-row", { key: '44b5a11d7a6a946caf0026e987a7aecab47a46ba' }, index.h("smoothly-table-header", { key: '5c82e46165bfc38e1da1c9bf16a7c622cdc1cbb2' }, "Header A"), index.h("smoothly-table-header", { key: '9793a61c1baa8ed1a05385d8ba6d5ecc8feabca8' }, "Header B"), index.h("smoothly-table-header", { key: '2fdcec65ab24358281cec2f9a234b20320fe7310' }, "Header C"), index.h("smoothly-table-header", { key: 'be4f0c72552082bf4db899dcdc7c817e613b525d' }, "Header D")), index.h("smoothly-table-row", { key: '685202c84404570268fe43b9d15bded227d21412' }, index.h("smoothly-table-expandable-cell", { key: '0c9a6e9f61e686a12ef51ddfd5573951838ffe08' }, "normal row (exp.cell)", index.h("div", { key: '9cf941c6bd38cc9da27da2ec2003587a9d61245c', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: '44f09c71e18c1dea662b7536e1b85e774e60b3fa' }, "expandable cell", index.h("div", { key: '7cc27d884ef807845990859b6220bbc3a00e0f74', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: '39ac19023b51b98928685c28453a62c175ece490' }, "expandable cell", index.h("div", { key: '1feb7f59580a2d3236a754acaf3736c4b12a3522', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: '4596552b8df58fa0fd7163db0e3dfa2ab8830a01' }, "expandable cell", index.h("div", { key: '322cc72dffa047c63de26e76415b6405acb9c37f', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: 'b302f6bad02d9ff463f4d6d341f27b17839fbcdb' }, index.h("smoothly-table-cell", { key: 'f53be8bf1ac7d14b00f7d6d5ddce430e966df180' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: '8daf7d43483e973e62d10f189b4c9c340fce78b8' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: '56d7c49a27529332278fc39e87c2882f311fe245' }, "expandable cell", index.h("div", { key: 'bff87d82c49e2e67863d6993d93a261d2eec6a13', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: '53bfb99470e8de53b6ca24dd1ecfafbe0e74680f' }, "expandable cell", index.h("div", { key: '1a708007780b119386020462e0c76f6accdaa789', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: 'e18677d9c3a94f4836a10a536632ffc70f51b283' }, index.h("smoothly-table-cell", { key: '7f978bf73194847f9febf4aaac80134ffcebb58d' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: 'd528b2a72ddd039c82fdabd4e8851f7944e19f96' }, "Normal cell"), index.h("smoothly-table-cell", { key: '6b0b4d3f30b31a95133defff1c1c02dba990b723' }, "normal cell"), index.h("smoothly-table-cell", { key: 'e0539d8af66a3ae4d17fd5ef02967dfda589b38c' }, "Normal cell"), index.h("div", { key: 'f49755576fda95ee0348da9e24169bd2bff01142', slot: "detail" }, "expandable row content"))), index.h("h4", { key: 'ba5f2843a357a782b0347d475ee4dd5360572813' }, "Demo table 4"), index.h("smoothly-table", { key: '181ad9a0c236503c1288ff3e371e1fe323154cd0' }, index.h("smoothly-table-row", { key: 'a9dc6f2fb604e9f07355c87fc5ae13e45daefea2' }, index.h("smoothly-table-header", { key: '1bd1d0e1549da881ce3040f6c927816455089259' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: 'c119128d0589bf3b771d8165ee358a547650e51a' }, "Header expansion", index.h("div", { key: 'd0428eba89739b88956fb71a68be68c610b3861e', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: 'a54c5b76e8e8db3b63af0a98ec58a955bbf48a60' }, index.h("smoothly-table-cell", { key: 'e8a46e0600bed42f94985bcf09d7581a9f5f8f5b' }, "A Content"), index.h("smoothly-table-cell", { key: '3941e1804625493e3e17963d83ab81f483072f0c' }, "Expansion cell"), index.h("div", { key: '4df8506a7bafd4cfd53a328d8c68f93f017e99f4', slot: "detail" }, index.h("smoothly-tab-switch", { key: '098ad77004c72f3fd0fbdd43364ae44a99aa1d96' }, index.h("smoothly-tab", { key: '626f48ff879c4fa885c370b2635ecb19a20c5f28', label: "innertable 1", open: true }, index.h("smoothly-table", { key: 'd010ef824f9e9881871cd58748f9099d2ad9a33c' }, index.h("smoothly-table-row", { key: 'eabd83af25882bbd229998ea5e1f4c521206fba7' }, index.h("smoothly-table-header", { key: 'fc2c448bc2a04e81b51b21eba3df60316506b23c' }, "Header B")), index.h("smoothly-table-expandable-row", { key: 'ba8fadbebcf9171a41d49c5cb90c5ecfa29cd9aa' }, "B Content"))), index.h("smoothly-tab", { key: 'ba476cffc2b17330cbf507c61fb5b834297c1547', label: "innertable 2" }, index.h("smoothly-table", { key: '3d25f6dea0616e0319de7b5dd61dba63b977babf' }, index.h("smoothly-table-row", { key: '792b9a85a866175b6bbbe1f2aa8056d614b59212' }, index.h("smoothly-table-header", { key: 'f7d5eecb605554b95c6df5fafbce00ea69cac00b' }, "Header C")), index.h("smoothly-table-expandable-row", { key: 'ac614f28e0c29a952f5cc9915568a57deba9409a' }, index.h("smoothly-table-cell", { key: '997018995ca3b0e127e1e58f60ac51a03b5a1d17' }, "C Content"))))))), index.h("smoothly-table-row", { key: 'cdae56eb4afb25d3ed32d2c4dd3a9593b60d58f9' }, index.h("smoothly-table-cell", { key: '9dbb1105388962d101bd18aef1ed79c57baf017b' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: 'ea35ad9b5073c97d68f31c9d825e5d751e8a09ab' }, "Expandable cell", index.h("div", { key: '2eadd761c83b837d097194ab38d37668e6b57367', slot: "detail" }, "Expansion content")))), index.h("h4", { key: 'c0921bb24450881229d7c0144ac12d60c3bf8802' }, "Demo table 5"), index.h("smoothly-table", { key: '8b8b27a06a924553770762449aae0d692dcffb02' }, index.h("smoothly-table-row", { key: 'ef0757b3eb3241dca02d69cb5b6ecff660788677' }, index.h("smoothly-table-header", { key: 'e2394dfc5ad2aae143ed754cfcf1b16b587cf678' }, "A"), index.h("smoothly-table-header", { key: '976f42f99dfb0aa1ee9e44f41ef869762eb11273' }, "B")), index.h("smoothly-table-expandable-row", { key: 'ea9d260bc85c98fb1823a6d518e93fac6049cf16' }, index.h("smoothly-table-cell", { key: '42b115fba57971d490fefbf952f0c5d254ec7ba1' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '3c7079b17695ae5dccc3a6ae5b5c482995cc8c53' }, "b row"), index.h("div", { key: '164765386ecc86a447e4137e87e9d7e1cb573295', slot: "detail" }, index.h("smoothly-table", { key: '75450c230a01788649351bc80de0853b1f8935df' }, index.h("smoothly-table-row", { key: 'b14c7ae5a9dd28decbe2128d0ceba6e5e80244b2' }, index.h("smoothly-table-header", { key: '9057cc610f407115f0822c86a60a17568c78a603' }, "C"), index.h("smoothly-table-header", { key: 'efc795aee91ff54f23f4e7960229807a67f8cc30' }, "D")), index.h("smoothly-table-expandable-row", { key: '91e50c30ceb62307e4ad1df65e38566659aad7af' }, index.h("smoothly-table-cell", { key: 'a24d04856a8497c8f25a4a1b7744e9e973cc1c14' }, "c"), index.h("smoothly-table-cell", { key: '043e58686a7541ff38e98cc33e3586c2ff5f0c1e' }, "d"), index.h("div", { key: 'b7731de099d67a42654775781c3a96ee0810af2f', slot: "detail" }, index.h("smoothly-table", { key: 'ca775626562496b8dc0434079316b0f4fd1d89fa' }, index.h("smoothly-table-row", { key: 'eb1fefb44df5c188c4db01ff41d7cf7c00cc2b95' }, index.h("smoothly-table-header", { key: 'f3164f22ddac32daf151fcd5eba6f45bbba965dc' }, "E"), index.h("smoothly-table-header", { key: 'ab67b9c9e21dd0e6e6638c24cc9cd775054b1c91' }, "F")), index.h("smoothly-table-expandable-row", { key: '356ed8bb3a77a72a20756b9af76e19ac0069afdf' }, index.h("smoothly-table-cell", { key: '76b4d9fd59c7b553ba1ad1504ed16af968913f11' }, "e row"), index.h("smoothly-table-cell", { key: '9bf94026759eb18cc35cde3e471e24e7528f4324' }, "f row"), index.h("div", { key: '409341d673cf5dd2f9b0030a65068d913eaa362b', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: '2d0eba2de8835b8fcbba2145bb554454d8690cdd' }, index.h("smoothly-table-cell", { key: '177e9d24417f34c7d73b1053eaa81e5494deb6a5' }, index.h("span", { key: 'aa67f856f35c3abdc27d9c6e1c1f531c438b9e01' }, "one"), index.h("span", { key: '7282142fb079c4732c462bbabd5d89e9e905140c' }, "two"), index.h("span", { key: 'abb82c348c566994a35a7989a9c7c23c98786b85' }, "three")), index.h("smoothly-table-cell", { key: 'b5365ce005d7a4e7f9ec6a13572a293b5c07117b' }, "five", index.h("smoothly-icon", { key: '7b4594aa25c395070cf2f5abcad75798d89b9878', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: 'f0cb3e4fdee2c1593106f1504e2ef7a638089f07', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: '67341204442bc35d5e036cce9ebf7165e2e5beea' }, index.h("smoothly-table-expandable-cell", { key: '1fd020b62e4752e4da359b9072b29a1c469164f1' }, index.h("span", { key: 'd9987a50b30c2dbbacf430950cec88b71df7c4bb' }, "nested expandable cells"), index.h("div", { key: '7dca663955279cf553bdad10fa7ba1ba9ad849eb', slot: "detail" }, index.h("smoothly-table", { key: 'b12943e4c64294fe3dc852ea9a387f2bd4103f0e' }, index.h("smoothly-table-row", { key: '815fcae633d87d07229b224bd285b45fd228a0cf' }, index.h("smoothly-table-header", { key: 'a4232bbf78259925b401c60b2e02a734e88d5992' }, "E"), index.h("smoothly-table-header", { key: '87be1bbde66b839a61043266e4f74a081db84c6c' }, "F")), index.h("smoothly-table-row", { key: '85bac83d081136be7b4e4641cec5565f141c647b' }, index.h("smoothly-table-expandable-cell", { key: 'db891efb53153b21e57f234536428607fe7ff8dc' }, "e cell", index.h("div", { key: 'd58b72b0d6d4e8c1a47cad77acaedbe3aa333277', slot: "detail" }, index.h("smoothly-table", { key: '2d831b60e3916e9c55c996c77cc388fa90a9a6d8' }, index.h("smoothly-table-row", { key: '341fc2cc9b75690d5992629e3860dc53884b3642' }, index.h("smoothly-table-header", { key: '085c7ac43082a11505e6d790c65193221820016f' }, "G"), index.h("smoothly-table-header", { key: '53d8981cb7b99a61d40ea23e2ffce1e88a2e5f4f' }, "H")), index.h("smoothly-table-row", { key: '037a91700c10a9b9ad73aef8385ac5044b661cfc' }, index.h("smoothly-table-expandable-cell", { key: 'db716a543afa17ceba2227b6ab34e6b7f59223af' }, "g cell", index.h("div", { key: '6e9f9921827564a4923dd73e67fc37a5f76beea6', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: 'ee77e6b9f6d335958d715180690f5a43b03e712d' }, "h cell", index.h("div", { key: 'f71a934e96a051fcc972d5fe931a6f424da334a5', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: 'e5aea1356b4b6e46b34cdbaf958355d31a43facb' }, "f cell", index.h("div", { key: 'f77e4852d7654966b1d2daca4b81f7c52e9a9118', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: '21aedb52d291091d7dfad74c58eaebf11d21be54' }, "b cell", index.h("div", { key: '47774e13cde8f000da0bd172b295bafb5630bb97', slot: "detail" }, index.h("smoothly-table", { key: '59f9a71b6007d59160ae43f2167bf496f45b35d7' }, index.h("smoothly-table-row", { key: 'c446e2b029dbd5a2077906a8a965fd125013357c' }, index.h("smoothly-table-header", { key: '6c03213f88f20ee03bd8afb43ede67e5a3311285' }, "C"), index.h("smoothly-table-header", { key: 'f5c41638e374d59a772907d419ce3cdcd7c5b46e' }, "D")), index.h("smoothly-table-row", { key: '75a903bac35ab067415f6b3d2ea32eab3d1b50fe' }, index.h("smoothly-table-expandable-cell", { key: 'f3ef1fa6e1cb1fe528446bb4db238c13d1ec5328' }, "c cell", index.h("div", { key: '0d1b95ea59a79821b834a593196107da82a15b80', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: '0e7dee7e59a504516cf1dbfc564da6629e525ea7' }, "d cell", index.h("div", { key: '8a1442355a0d1bcc5ceded1749450bf83bfd84a6', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: '491844dd29dbea41bd33109e67bf58328718699c' }, "Demo table 6"), index.h("smoothly-table", { key: 'c71e325906a58796a3cb941a6d8d8195f838f7f4' }, index.h("smoothly-table-row", { key: '2a299a63fbbd9504b4734042d313815205b74f26' }, index.h("smoothly-table-header", { key: '10f8529b9ea32afb41a1879ef374b9e26659729e' }, "display"), index.h("smoothly-table-header", { key: 'e037e3c9674164926b2e1129446a2cd4bda1780c' }, "contents")), index.h("smoothly-table-expandable-row", { key: 'a7604f7aa4e574e04270edda2ce140dc9173d0cf' }, index.h("div", { key: '6e6ee07f7c67bc6f1b5b3157ef7f3d6bd16f7995', class: "content" }, index.h("smoothly-table-cell", { key: 'c560559faf746657f3637acfc0e13b38bb7b5ac7' }, "A"), index.h("smoothly-table-cell", { key: 'ee15ec06c1246e4e5b234adbcf96514e746b7064' }, "B")), index.h("div", { key: 'dcd83cfcdf0a1f1002467bac155ea00a68d540db', slot: "detail" }, "expansion"))), index.h("h4", { key: 'c976d7cce548795f7776ac78013c5ead5ff46442' }, "Demo table 7"), " ", index.h("span", { key: 'a41fff757011f21692cf7b48f8f6dceb710c90a8' }, "nested 1 then normal"), index.h("smoothly-table", { key: '30fc70242dcb689f44c2d10c6da06f0bf4ff3b29' }, index.h("smoothly-table-row", { key: '83ab53ecc50c0c58d5095a54dca7ef71dbfca94d' }, index.h("smoothly-table-header", { key: 'ba57eee8d8a906417da048536ddd4b7848abfa83' }, "A"), index.h("smoothly-table-header", { key: '75070cc5d7f9b378ec5cf1dd09cf938ce2627466' }, "B")), index.h("smoothly-table-expandable-row", { key: '5c238acce39b7b16fd29b5681b2fa0beb92f9d6a' }, index.h("smoothly-table-cell", { key: '0e84b683e6dd2cab1fb9b56e7b3d634a1db6b6d2' }, "a"), index.h("smoothly-table-cell", { key: 'd0b5f45e24f7207b6e4929297f77960a893b5ea3' }, "b"), index.h("div", { key: '2a4d70833716ba05f63f30bf414ef073ed544f5d', slot: "detail" }, index.h("smoothly-table", { key: '91f965115edf80e695cfab022c333ea75580553e' }, index.h("smoothly-table-row", { key: '0b16751c58986a2827bf86d9eb8609ac4149a6a2' }, index.h("smoothly-table-header", { key: '694d93cc20a0de953d9a1ccce8531fa1a3be15d0' }, "C"), index.h("smoothly-table-header", { key: '6e8f1b2412ca56766c02974e7b0f6c23c8b7e7c2' }, "D")), index.h("smoothly-table-row", { key: '9dd5836a7780bc96b98dea02534a94d46f413b0f' }, index.h("smoothly-table-cell", { key: '60d1507e3768c8e771fc2862204a75c6d65d0949' }, "c"), index.h("smoothly-table-cell", { key: '2a234c36950600f5c038aed22db95f806d95fd78' }, "d")), index.h("smoothly-table-row", { key: '06083e22aaa76953478b3d91b1cf1bfa33d36e91' }, index.h("smoothly-table-cell", { key: 'c29952966e7fe73c5c5487ab81a9ee79f9dc1ca0' }, "ccc"), index.h("smoothly-table-cell", { key: '7b2a22e7c5698da2ff9ecd10c7b91bb489192ac3' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '067641facfd8e83d89d520155533feb17a19628c' }, index.h("smoothly-table-cell", { key: '5a738afa3444170250850a7d00ce9ec5c52a0827' }, "cccc"), index.h("smoothly-table-cell", { key: '34598e8935e09e660001548cd2f5f0049e0ba71d' }, "dddd"), index.h("div", { key: '8350e5e1ef3fca4e1423987e3d99328683156703', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: 'e4ee719169cc338d2420f7d3fa09b19ae022e6f7' }, index.h("smoothly-table-cell", { key: '66f289b9d4e5bb8fe6bfce7f8ae0629143a28ea3' }, "ccccc"), index.h("smoothly-table-cell", { key: '9e36c00f691b106ef5e58c25d3376618a1861759' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '67f476453f943b6b75249ce633b1a652e72c0838' }, index.h("smoothly-table-cell", { key: '9218b679173b883967e4fd9f61622220a4e69cd5' }, "cccc"), index.h("smoothly-table-cell", { key: 'a0d921e79a8302d7e0b8f3fd702aead3c146a032' }, "dddd"), index.h("div", { key: '32ff6ed3b7dd8fe2769838a0ec9c08457f578ac0', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: 'a5b4ae5de351c406d071e8405307486b236ae22e' }, "Demo table 8"), " ", index.h("span", { key: 'a7c396b267a5728a3ebd12033e0419c449bcacc6' }, "not nested"), index.h("smoothly-table", { key: '2b940b2551b11b5eeeb44f9fb78955848a9bb88a' }, index.h("smoothly-table-row", { key: '86a38a2dd5c238596452292bd5790d55436dc332' }, index.h("smoothly-table-header", { key: '16b53657c35dc13eec74f7944418f736c62745a8' }, "C"), index.h("smoothly-table-header", { key: 'de229cdfa50eafa737b2782f94120eff5d26e897' }, "D")), index.h("smoothly-table-row", { key: 'f034a73023a7f8ef3718ad795cc52043e7c83001' }, index.h("smoothly-table-cell", { key: '0fd9f2f32d6749d5cb66e7c8e70baec5eef46edf' }, "c"), index.h("smoothly-table-cell", { key: '59e23af09d690d700d877e2db3a7ffa4f5a989a6' }, "d")), index.h("smoothly-table-row", { key: '9d7c2e33cb3c81ca56eb444d044a04a155a618e5' }, index.h("smoothly-table-cell", { key: 'dc705b145b3731c6f32a1b2c8b6f67e10210be69' }, "cc"), index.h("smoothly-table-cell", { key: '1e5af428e4e23992db8452c9cdf9d7ca5e24be0c' }, "dd")), index.h("smoothly-table-row", { key: '536edadf240428490176429bd97e609164bd44fe' }, index.h("smoothly-table-cell", { key: 'a55ca0c9736ad2cc944a9055da21ba0dcd5b96b0' }, "ccc"), index.h("smoothly-table-cell", { key: 'e2e00ded28fe8cff0c7ba57b9911d9816e691171' }, "ddd"))), index.h("h4", { key: '7151025dac0d88842ec049d208b68e6b6c8e8ccc' }, "Demo table 9"), index.h("smoothly-table", { key: 'a648bbeee0de8645e8feabeea36dd82cdcdb26b1' }, index.h("smoothly-table-row", { key: '69f82749ace01c70f12e12bf973c4e68a7c0681f' }, index.h("smoothly-table-header", { key: '6741692157f9711406703a258661d363d46ad9cc' }, "First name"), index.h("smoothly-table-header", { key: 'c6471154158fda30b2a85f247563340713d5544b' }, "Last name"), index.h("smoothly-table-header", { key: '317bf1cd0457790c1185e2b0450ce1b23323374f', style: { width: "1px" } }, index.h("smoothly-icon", { key: 'a2d8633ddd3277777ca1754d1e0f6406ba4537e0', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: '2e0c8471bd93774be4d39229cb07fc06de847025' }, index.h("smoothly-table-cell", { key: 'ba8aa8597cde75f5fc3a8bbc49c5b1ec388c8205' }, "Jessie"), index.h("smoothly-table-cell", { key: 'be279abe4d48f4f72bb1b2e5daf7b5622be26469' }, "Doe"), index.h("smoothly-table-cell", { key: '64375d0aaa75e484d51f1c19f6050c541feb8f70' }), index.h("div", { key: '701af93629039213c83f78009863eeb4f3cfa7fd', slot: "detail" }, index.h("p", { key: 'a2ef105c6d6e8c86604db5282cd91687a562be0a' }, "This is Jessie")))), index.h("h4", { key: '3e4bdf297eb97a83987575d9e63094e0791e0dc6' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: 'c4b7b9e0579fc5687aef6648f0cfde1b38227cae' }, index.h("smoothly-table-row", { key: '5e02e8b9fb5651300a9d3f7d73fb5b74ef56ecf1' }, index.h("smoothly-table-header", { key: '0c11cf42e600eb64a75699311036f8321b45086a' }, "Company")), index.h("smoothly-table-expandable-row", { key: 'eed4aefbe379f9e1f48039dbc19c96e5d4c5acd1' }, index.h("smoothly-table-cell", { key: 'a25c1eaa63d072db92da7f2c62cc46488163a2ee' }, "Proquse"), index.h("smoothly-lazy", { key: 'c968706a18a250fc87eeadff46b7e64091e95456', 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: '7733a8c3d37db1d3f4a0960567ce8e552e902cae' }, index.h("smoothly-table-cell", { key: '0cc350bef843e7bfa88a48e134a3e38fb4cf8e6f' }, "Pax2Pay"), index.h("smoothly-lazy", { key: 'dd2acc4f5ba563f02c8d64534863b09164c38c83', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: 'e33c1260f6f6b78f81f5170444e9fb306d156554' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: 'ea08d324eb273bf135b601e3cee2fab094cea944' }, index.h("smoothly-table-row", { key: 'b1b3d06556f18f5e524f1ee9c090ec333aefaa77' }, index.h("smoothly-table-header", { key: '53673b0956468b3eda784f2874140c1b331f5345' }, "Company")), index.h("smoothly-table-row", { key: '32b918aef1324fdd92fe33b5697c25e7a34e32cc' }, index.h("smoothly-table-expandable-cell", { key: '1c03cfc9d836db81f9347d816bc1c113b75cc845' }, "Proquse", index.h("smoothly-lazy", { key: '90d9c35c58d99145dfb3e466b930231d4e9c5260', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: '00c7267ef997b669765a6d842bc2592485ca9317' }, index.h("smoothly-table-expandable-cell", { key: 'a20dd3662febafb60d52bb67459c8418289e3bfb' }, "Pax2Pay", index.h("smoothly-lazy", { key: '25f2445bcfc58807711963f3be6a123608adb212', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: 'ad5adf734d61be4daf3ade3b6a0371164ce6eed9' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: '08eb6233562f117458dcfd19eb03524624506606' }, index.h("smoothly-table-row", { key: '0426d4016fa6092d6b205ee100a881b26389f87f' }, index.h("smoothly-table-header", { key: '125bf5f4ec3f13812556e94931999755128bf920' }, "Name"), index.h("smoothly-table-header", { key: 'bad40f5c6846cca62ceaa6da5567421c63928b77' }, "Age"), index.h("smoothly-table-header", { key: 'f09c9e0d0cbb39f2ca395b55ec69a63897137f9a' }, "Location")), index.h("smoothly-table-row", { key: '0049a5c72aa974d066067d2e6a2092a08edfc830' }, index.h("smoothly-table-expandable-cell", { key: 'b712269f190e0b8d94dd37bc53b4f0e4a114f256' }, "Jessie", index.h("div", { key: '3d8d620af2e9ac062a381ea1e3bb60b3e98f73e7', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: '4ea5d099083a57923a8d64c1ac10300300347662' }, new Date().getFullYear() - 2000, index.h("div", { key: 'e6823568399487c76df82e5078167cdc45310e5d', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: 'c6fcc32668399cf74b2193982ac2cf02c968ae74' }, "UK", index.h("div", { key: '012b0fad1a980d79e208382ea034638204eec7a6', slot: "detail" }, "London"))))));
     }
 };
 TableDemo.style = SmoothlyTableDemoStyle0;
@@ -12473,18 +12474,18 @@ const TableDemoFiltered = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, 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 &&
+        return (index.h(index.Host, { key: '3b35faf2f32943e94a5725c1aad1dd3d7033da39' }, index.h("smoothly-filter", { key: '72e0e3dba8da4581d2d50bae13a33149255f6787' }, index.h("smoothly-filter-toggle", { key: 'e363d96f0776dd90b33f4ea3a95d892a6a8e94d0', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'fd9fc1b5f89298dc58843376d6b0b10c2802160a', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '8c79a61b500443cbf864a1bdea1b4fcecd820c4d', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'a8c3692f45f65ca45c1f8298bc5ff4601e763b30', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'd9fb4e55e7602277b5d341bba18564f523bad68d', 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: '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 &&
+            })), index.h("div", { key: '4ee92bf8c746b76d6745e759ca05ded79aca5d88', slot: "detail" }, index.h("smoothly-form", { key: 'be533ea49efe25ee8f3f4fc8ec83fc09771ef048', looks: "border" }, index.h("smoothly-filter-select", { key: 'aaaca00a01cce7e5ffb54919e4c8ba9cf79cf118', 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: '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)
+            })), index.h("smoothly-filter-select", { key: '0a697f07d239d2e3c2f8565e83fc8e931206ebfa', 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: '61801211fb2972c80aa8898e1b2ad1c33b2ed659', 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: '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 : "?"}` })))))));
+            .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: '61bece7090400a19b727d79d95dd3a2afee1b0fd', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'bfdeb6016c654179d12d7f7cf332d99c6b69f0e1', 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 = {
@@ -12540,7 +12541,7 @@ const TableExpandableCell = class {
         event.detail(this.element);
     }
     render() {
-        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" })))));
+        return (index.h(index.Host, { key: 'c18073e79ed648b097932f65afc57b1a086d2aef' }, index.h("div", { key: '7b1ca3f50b8c2c1e2ccd009188a883d606f8f89d' }, index.h("smoothly-icon", { key: '38e25d23939f163e58e61541d5456d30842fc237', name: "caret-forward-outline" }), index.h("slot", { key: '6a6854a144d228579fd929a6454778e70c54a48b' })), index.h("tr", { key: '76832340657756d93f8257c7089ff4ec7a0c5b56', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: 'e786ee682b26589bf7d66ef358f042111eb63749', colSpan: 999 }, index.h("slot", { key: 'fc7df9a42bd8b719fe1c486cd0d47e730401b195', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12576,7 +12577,7 @@ const TableExpandableRow = class {
         event.detail(this.element);
     }
     render() {
-        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" })))));
+        return (index.h(index.Host, { key: '362c94fec5a6a946fa4cd3bbb0a7f1cd4b90de30' }, index.h("div", { key: '3f52cfe9f9bd4f40644473372b9917942659405a', onClick: () => (this.open = !this.open) }, index.h("slot", { key: 'a9973318d66636bc402e25cfb41233f278169aab' })), index.h("tr", { key: '580cfcc88440342a6705e87a95218d662303bed2', class: { spotlight: this.spotlight } }, index.h("td", { key: '833beb04554be089cc7b963287c5853216d8d90b', colSpan: 999 }, index.h("slot", { key: '0a5baffcc73ef8a859235ea3796c81f40fdded8d', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12594,7 +12595,7 @@ const TableFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '9a8fd2ae8c30bc12aeb6b3ed124b09427d9ed9f6' });
+        return index.h("slot", { key: '01a691843d07bc7434c9ffa2d86767ca3e45fa18' });
     }
 };
 TableFooter.style = SmoothlyTableFooterStyle0;
@@ -12608,7 +12609,7 @@ const TableHeader = class {
         this.name = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '3727f46c284d59b2731f18824546968d2ae2a5e6' }, index.h("slot", { key: '16aede7771e7f851432365528d9f79cbc756c11b' })));
+        return (index.h(index.Host, { key: 'fb355436a7e5cdbc99236125054ea66721d6bda4' }, index.h("slot", { key: '1ca0bc6b9058546578507cbd73f96c6aa306fb8f' })));
     }
 };
 TableHeader.style = SmoothlyTableHeaderStyle0;
@@ -12638,7 +12639,7 @@ const TableRow = class {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.after(event.detail);
     }
     render() {
-        return (index.h("div", { key: 'f4016ec2ba8f871c843780d4d86306344f0a7b42', ref: e => (this.element = e) }, index.h("slot", { key: 'd02e94248182106e5ccb3da95370c2bd7a4e9b75' })));
+        return (index.h("div", { key: '52a85d45e77f78a479c1e314650c38b7b97502e4', ref: e => (this.element = e) }, index.h("slot", { key: '7438dcbe1986dd6d286cd9c2961d51a34f181c37' })));
     }
 };
 TableRow.style = SmoothlyTableRowStyle0;
@@ -12680,7 +12681,7 @@ const SmoothlyTableTesting = class {
         this.counter = 0;
     }
     render() {
-        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))))));
+        return (index.h(index.Host, { key: '19325eb2444ed608c0e080d3fa2d05632d5b01d5' }, index.h("smoothly-table", { key: '84b5fc3a45ac4f5fe56deb66edbfe381b72dc905', color: "dark" }, index.h("smoothly-table-row", { key: '389c265a2ee60633f7967170922d1092f90c4e24' }, index.h("smoothly-table-header", { key: '4d7ea68b2fe5216e1cfb64ba8bf6f8869c0416df' }, "Type"), index.h("smoothly-table-header", { key: '9c85bb77bf35c744f4f22943616c1ca041fb4341' }, "Name"), index.h("smoothly-table-header", { key: '111bafb16e97d7e21f3672b0eab58d00d46f1e09' }, "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: '5c635161e1051765ca304cde3b91ed2c235bb773' }, index.h("td", { key: '12728755d5bd9d560ed68f1cd5a7452f0b8a55af', colSpan: 2 }, index.h("div", { key: '1f160cf8459caaca8511c1ad7b1fb6244f11908c', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: '0b5d373d788d1d6e05ebb5ea9f5ef9038219cf4f', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: 'a1d3f62994b9c015c7fddff0208c88339d25f4f6' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
     }
 };
 SmoothlyTableTesting.style = SmoothlyTableTestingStyle0;
@@ -12712,7 +12713,7 @@ const SmoothlyTabs = class {
             old.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: '0e5023ca7717e4560b12fe3a18efa78121b2da9f', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '1b299ba1d8b0945a41016ce7f2da50fa73e36c17' })));
+        return (index.h(index.Host, { key: '13265df1e5924c455ab8b94b2e1d3942722120c5', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: 'ef457b562f8ea6c2d00f52c1049ae644bc0fadba' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12729,7 +12730,7 @@ const SmoothlyTabsDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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!")));
+        return (index.h("smoothly-tabs", { key: 'bf3e5c01fa0476ec17008f510c3627b12f41907e' }, index.h("smoothly-tab", { key: '65819b7cabe33f935ff283400dc5f242894a8d1e', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '77baaf959e4bfe230e5699b8c684c364eb2290e9', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: '6db948cc03dc3c952e2453b0a98bdac5fbc9e917', label: "test3" }, "this is a test message again!")));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
@@ -12743,7 +12744,7 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        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 })))));
+        return (index.h(index.Host, { key: 'a7d4302217c958ba525227484df493bc8fa312e5' }, 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;
@@ -12795,7 +12796,7 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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")));
+        return (index.h(index.Host, { key: '67785f5a8f7b0dfcc05ed3db061b16847f0cf2be' }, index.h("h2", { key: '010fc56a1a101557b8f6aa2d58e8e0d08f5e9a19' }, "Theme"), index.h("smoothly-theme-picker", { key: '78859336f91dc966250d92714dd68669f8fea47e' }, index.h("smoothly-item", { key: '7f7dfdc5179fcfe81129f0d29a057211ef37b7c0', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '5200084b7f82c9d2684d8891d2edabd3910c7af8', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '842c142cf1c1e22d082ea773ecf68762d33955c4', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '272f4ccd9f2a242ace94b07e49331d89af093c06', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: 'cc4a39a589fc9b763b8f01f528537661929699eb', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: 'dd9058c57fc46878af36f0a6957d7b010bc25f0c', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'da173ddd9a73cf8259adf9d5d292d2a799fb5bc9', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '44dbf248be4a3515834defd174f0dc2bea726f7c', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: 'c5e345aa503265dd8e8ef9d3c4023493f4c8fc42', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'f3578ff957b2a03ccc96d99b21255edb29c582ba' }, index.h("smoothly-theme-colors", { key: '5e293d62e394aa20f7e01f9d037cca5ecad36406' }), index.h("smoothly-theme-guide", { key: '447122ad26e6a3aa2944377e4417cab78c13988e' })), index.h("smoothly-button", { key: '13a8176fa6057cec8e980e9e327e52c4ebd405b0', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: 'c6e60ae0a148040df8880b44697f167d3b2802b9', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: '397c225e488ffd99c0054c18b807b2539f6ad961', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: 'e6651a36be501ac3e862512f83825e27c3b0f364', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -12809,14 +12810,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            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' }),
+            index.h("smoothly-display", { key: 'd78f620cf75a4531322bf69c0b9edc1ad0760fb0' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: '82afe82bdbf31fe782fe2a25a13b1786172ce8d9' }),
+            index.h("smoothly-display", { key: '036aec35c1a3707770e0cc858050d7ad3cf80c2b' }, "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: '6f78be3cf45e8a8a255ee14f8ebfe344f4a2e461' }),
+            index.h("smoothly-display", { key: '7169ee0c18d1f5e96e4c8f5c813cb88699f3cf49' }, "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: 'c653eb38519794d49abbbc1c50375d624b07fb37' }),
+            index.h("smoothly-display", { key: '437ed227e0ad31891c165849373cfbea265d333b' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: 'bd99df5526d7a1178779ba7810acdc2fef644924' }),
         ];
     }
 };
@@ -12831,11 +12832,11 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: '4039dc4eb015dd6d869d1896c2be555bc29ee3dd' }, index.h("smoothly-input-select", { key: '3fc86668de12e928bafce4760bed4302267978a1', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'a2b3e60ee78f0d719db88d169a6a0acb63de474e' }, index.h("smoothly-input-select", { key: '41cd3a9dcac297edd67e5e07e5f2fd634c3e021c', 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: '79fd10c45933e9b5589b92d2793f89bf0a23afaf', slot: "label" }, "Select theme"), index.h("slot", { key: 'dec18bec76ffc9ee4380e3609fda66196786480b' }))));
+            } }, index.h("label", { key: '3e1f6a91391bfcb8baf9920e16e185f70a0a2b92', slot: "label" }, "Select theme"), index.h("slot", { key: 'e0499d19e385e8aa23ad10706b2efcc869efd9f8' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -12856,7 +12857,7 @@ const SmoothlyToggle = class {
         this.selected = !this.selected;
     }
     render() {
-        return (index.h("button", { key: '9ea210115f4c2a7677604a6d1853fc2c5d999ce6' }, index.h("slot", { key: '72df5acb95cdbe522ad162577e4ec34f31aef525', name: "icon-slot" }), index.h("slot", { key: 'd2c81cf33c4da3b4ce0b9443712a69fb38274b67' }, this.name)));
+        return (index.h("button", { key: '1197f56c537ebeac3d65e66f329eab2efe5bd5bd', type: "button" }, index.h("slot", { key: '9e7d5c1bd176809c47809577281397fdb549c802', name: "icon-slot" }), index.h("slot", { key: 'cedb75a43b1cdbe42460ac64964b3de48c962181' }, this.name)));
     }
 };
 SmoothlyToggle.style = SmoothlyToggleStyle0;
@@ -12880,7 +12881,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        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 } }))));
+        return (index.h(index.Host, { key: '96fc3020027e002266e463f12602426620acc78c' }, index.h("button", { key: '54935f0112f0b8f5b9206929ed802900543a93e1', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'c978637753cd03f94fe222b3d4e9a0932f994bde', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -12893,7 +12894,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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" })))));
+        return (index.h(index.Host, { key: 'e4decc2823333a5a791092e8e34a92258d5b808c' }, index.h("h4", { key: '8f2d3332e00c539d493ab8fd5a5f8f8ee6732715' }, "Toggle switches"), index.h("div", { key: '6da6533cddf5fc818d2d6aa68427e8cfa1496ede' }, index.h("p", { key: '766ebc883c9879d0e798309a88c3021f0387c54b' }, "Checkmark"), index.h("span", { key: '6cafbd95e9157237ad07b78b22ef434f4494987d' }, index.h("p", { key: '89c96abca44265f7b134a7fc971638d33c3b35cd' }, "Tiny"), index.h("smoothly-toggle-switch", { key: 'f41097e4819f5f18d68520b50111bf2c3b3303f7', disabled: false, size: "tiny" })), index.h("span", { key: '2abdefe0c854ddbe984d2cbfa228af0fb1c2be43' }, index.h("p", { key: '25b22d0ba23a34b2b93f6272abdbd56dcb26f9f6' }, "Small"), index.h("smoothly-toggle-switch", { key: '3152dc8eb87f3b70383942bfa9571d9c05dbef71', disabled: false, size: "small" })), index.h("span", { key: '6c49c1476a6145a3699bfaae389d67fa08284d97' }, index.h("p", { key: 'cdc8a155962f2db1314b4612f69c46f6e10e438e' }, "Standard"), index.h("smoothly-toggle-switch", { key: '5567ecc1cb679afad70edf324cb9a683e933870b', disabled: false })), index.h("span", { key: '3651352629c6555d322cfae0433735d813656de3' }, index.h("p", { key: '4698eba882ff962b05eb5e461e89b4a02abdba6e' }, "Large"), index.h("smoothly-toggle-switch", { key: 'ef884c9c8644f42d0f8a7c342e3e63026ccb454b', disabled: false, size: "large" })), index.h("p", { key: '6c4c2cf44cb00a6966456f1eb625ffe7a20ece0f' }, "Colors checkmark"), index.h("span", { key: '06257fab92ae6fb47da27b1b42a7beb01509ae0e' }, index.h("p", { key: 'b02c3e1f9a7e4d977743b57711bc1167607c3f73' }, "Danger"), index.h("smoothly-toggle-switch", { key: '68cf0c6ecaba81cbca33a41d646f90185897f61a', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '31e12e703bd5b746a3bbb15520aab241cab92df8' }, index.h("p", { key: '374d0ab72fe29c01a2e1aa0dfea8648eef8df5e2' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '8d6ee4f423a439c864882d5d1d731de6a4ea2c0a', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'ba8c1546ca7bd9f8e2216a54b3fa801bbbf5f0c5' }, index.h("p", { key: '4da8260d03362b0c42e298e9fa8528a278e6296a' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '76e608995b4aff9912fe454e34253e25fe63b33d', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'cf18f647898cbdb270a936fa6c3f09384ec10308' }), index.h("p", { key: '3baf367e5396e228746af376bf600466adaf699a' }, "Colors no checkmark"), index.h("span", { key: '82fdd9f4d57c6f1df933681a2585870e8a92f87b' }, index.h("p", { key: '78e34f4bf07011afee3bf81afa6cc058d5f3cb00' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'f15d080393f73866d7d83aa49037b14480de0608', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '50a556b0630714a435b706cd75aff01da5ac994c' }, index.h("p", { key: '1a574f415960e5b32928d3123a378a383376250d' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '77f466f0e5fe38f0cbf46d41ea3d27ec64570cfb', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'b1ee16f7d6bc445afd7054325b5a7ec8edb469cb' }, index.h("p", { key: 'e1c2eabf3e079467052370dd47101f44daeee106' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '96aaa6e9392f03a1843f8ec137d8dcfb1208d85a', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -12924,7 +12925,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: '60d7037fc7bddb5954b2391c9f0062a72b38a030', disabled: this.disabled, name: this.name }, index.h("slot", { key: '2650651355e3f422337fa3712111d0c73f07693f' })));
+                result = (index.h("button", { key: 'd15f2a85ef75c7ff5e3c79b2a2c0fb26389532b1', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'dabc32f8e23ccd3b63a3afe2acf4b828bc116032' })));
                 break;
         }
         return result;