smoothly 1.2.1-alpha.55 → 1.2.1-alpha.56

package/dist/cjs/{smoothly-app_109.cjs.entry.js → smoothly-app_110.cjs.entry.js}

@@ -8239,7 +8239,7 @@ const SmoothlyForm = class {
         var _a, _b, _c;
         this.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true));
         if (this.validator) {
-            const flaws = (_b = (_a = this.validator) === null || _a === void 0 ? void 0 : _a.flaw(this.value).flaws) === null || _b === void 0 ? void 0 : _b.reduce((r, f) => (f.property ? Object.assign(Object.assign({}, r), { [f.property]: f }) : r), {});
+            const flaws = (_b = (_a = this.validator) === null || _a === void 0 ? void 0 : _a.flaw(Scrollable.Data.convertArrays(this.value)).flaws) === null || _b === void 0 ? void 0 : _b.reduce((r, f) => (f.property ? Object.assign(Object.assign({}, r), { [f.property]: f }) : r), {});
             for (const [property, input] of this.inputs.entries()) {
                 this.validate(flaws, property, input);
             }
@@ -8359,7 +8359,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: '3448036f3c0dd4f121b8aa0c862a2f529c5b662b' }, index.h("smoothly-spinner", { key: '08926556d5190f344a9d9c7e69bd3deb5691d8b8', overlay: true, hidden: !this.processing }), index.h("form", { key: '9e9791f8bffa2d785902a1b41762f210fd9a8cc3', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '14f9002f76ba80774efde10013a8675fe11bbb1b' }, index.h("slot", { key: '36dbfcce46275055ffca4f456504da929104333c' })), index.h("div", { key: '1417fbafaebbc28fd72b8954a3f93b6542bacd9a' }, index.h("slot", { key: 'f3409830663415ddecf6999d81db5c0b4a3223fb', name: "clear" }), index.h("slot", { key: 'c72bb74de39d22dfa7d472766523a4eefac83e4b', name: "edit" }), index.h("slot", { key: 'd565a1f978d92afd9a95cf756ab84661672d5587', name: "reset" }), index.h("slot", { key: '9a045bc503ae6b29e155a4fec90f6b629587c35a', name: "delete" }), index.h("slot", { key: 'cc53acd7036d8888c3d667f1673f8c83f333b3aa', name: "submit" })))));
+        return (index.h(index.Host, { key: '1d9d37d4d3c61cbf3fbb844dbe72c1eed2335938' }, index.h("smoothly-spinner", { key: 'b8c7d90a3e089d7d52a1486a1dedbd166e3207e7', overlay: true, hidden: !this.processing }), index.h("form", { key: '1eae5c52bf9a4c92da64f2bf9500b524d9cb124d', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '75a96e948df29ae53698993b122ba1a1b8ca7f0b' }, index.h("slot", { key: '9b197a101f00720485dbe22c7c799ff1c710778d' })), index.h("div", { key: 'c3d2ad2b7007e03afca830609c53a5a744e15167' }, index.h("slot", { key: '0dfb32cdf5a653cf88f3c8295cbd0abe7ac3cca3', name: "clear" }), index.h("slot", { key: '60cbc0922c41c48e9bdfd7921dfade2aef44f920', name: "edit" }), index.h("slot", { key: 'ded5e82b98663d312145f451fdea0224133361a3', name: "reset" }), index.h("slot", { key: '865d5339d8d09ff8edfeb00e8f3f963564226635', name: "delete" }), index.h("slot", { key: 'cbad91b715a714ee8fd1effe79b06965bc3fd4e5', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8377,7 +8377,7 @@ const SmoothlyFormDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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' }))));
+        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-schedule", { key: '2011739c48572e39e1eea2d330e1b04caf0ef94b' }), index.h("smoothly-form-demo-date-range", { key: '11317d1feb82c20fc09284cb996e55f80038ed2f' }), index.h("smoothly-form-demo-controlled", { key: 'd9ac6a284edbe2fe977abbe1947cf3412066cecb' }))));
     }
 };
 SmoothlyFormDemo.style = SmoothlyFormDemoStyle0;
@@ -8387,9 +8387,9 @@ const SmoothlyFormDemoAll = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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 => {
+        return (index.h(index.Host, { key: 'f24ac803db965645290763057bd1230a3123d1b6' }, index.h("h2", { key: 'd0acef992a1610c807639136d041cff6cc6ec269' }, "All inputs"), index.h("smoothly-form", { key: '8edb30c23ed6dca4e1c0df70b4252fba6c973bc6', 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: '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" }))));
+            } }, index.h("smoothly-input", { key: '2a2cb7fcad7d202a4eac70e7afef558423aed257', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '2b735ec5a01555419fd7fbee889aecce3823004a', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: 'b3c5c0105b909e6d12faf1063dd89ac7e5e3f1ab', size: "icon", slot: "end" })), index.h("smoothly-input", { key: 'da05d67ac53bbcaa7d1df327903a88b4bda7ddd5', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '9cea89c87657646a1695784616b2b6528ab29a15', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'd846018ac718c5edaf3af59a799c1f0719295fc7', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '75d8455e9c3fff37ebaf26a0ca9ab96f3fe47ca3', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '4ad289b3f1e6ab329d0d9d5260b3ad805c74947b', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '7567c6aabde81a027372ed78420832b74ba0b12d', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'a24e987bcfd2d8e3c17319f552570568bcc322eb', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: 'b822ebfe6fd9e39c4d8ddebf7560650e897d26a0', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '2b188685740f2986a2905a12a41599d2fb27a387', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '442ddbf643f8593f014e9c8ebfb89b548e25f9e4', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'b426d55f660ea12f314c808970185ba84ca96c2e', value: "1" }, "January"), index.h("smoothly-item", { key: '3bd9373d991fcf8b32464a2911cb94b6ffbe3e98', value: "2" }, "February"), index.h("smoothly-item", { key: 'afad8edbbbd715d6f47d59ff2b0e3b56effa4a28', value: "3" }, "March"), index.h("smoothly-item", { key: '00811873dbc227b95b271f6ffb399ed9cb91ff77', value: "4" }, "April"), index.h("smoothly-item", { key: '1cb9763c83f89593cf5c3acc2fa6c1131b96f4b9', value: "5" }, "May"), index.h("smoothly-item", { key: '162a4852b915c8b4823ba0cfb8b9224a3da02329', value: "6" }, "June"), index.h("smoothly-item", { key: 'a82491db9bdbc0876c368b4753a6bacf10f1f809', value: "7" }, "July"), index.h("smoothly-item", { key: '8c2ef1528a44c3f34baf3a867210791b7db4df38', value: "8" }, "August"), index.h("smoothly-item", { key: '018b8535cd06d8fb76af46807acd67f777aa839c', value: "9" }, "September"), index.h("smoothly-item", { key: '5559631cf35eebf6dbc2daf016ac65cae0100d56', value: "10" }, "October"), index.h("smoothly-item", { key: '7a05b0f47332d3c47b171c7af45616098818cb3b', value: "11" }, "November"), index.h("smoothly-item", { key: '783eba3fc1f02dda35b95bc3168d8fc40a2cfb9b', value: "12" }, "December")), index.h("smoothly-input-select", { key: '708ae228ebac730d88542fadac9eacdbef65816d', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'ab3cc10c5837684c8c3fd31189ab9df3488d484f', value: "folder", selected: true }, index.h("smoothly-icon", { key: '23a5c0fa737f6d2787b68a1f74b1945f7e6db4f9', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'bf26b10ff966c3c228838b97e8193ecbe73fe1ee', value: "camera" }, index.h("smoothly-icon", { key: '0dbc3d1789c62478fcf7a8fe7b3de76a2952f27a', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '04a361a611548788fc62295e38f1a142587171e8', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '1a1be95b3bd3560f7f96b0fdc1c5c183f409cdb6', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: '90e62b694df1dd076c6ae8d2f1a2c300d1fe8667', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: 'fd79baee4d795d8bc85c07da9ad648b6f9be66ce', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: 'f4c6ce348957870ef206697bcc9a48d65ce97039', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: 'c5dc005f7bd1953be10ffa4cab2abb994779aa4f', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: 'bcfcae2f743f64d25b41cbf66835dad3b6859798', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '78a97ca7891fd91b59efe623a67eb96711a79d63', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '3d9c41e44797337be3864d9fbb029e300309aa92', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: 'b3fcea11a832b7b36049d4e4adeb555f80146652', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: 'ef82a2ac85080c6b45efe658e76e9c0bc0469f14', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '1155235a811c711d163c187b1597fb80ee62c8c7', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '87ff969b859405209fb9bcfce698b9d319f34b72', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: 'bf68e9ad454eff0c639b5da2c7242fc402a35c65', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '447e503c8e3c48b93f41f620b5fc277dc4d8d475', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: '1a732b5a30f9e7b5d87a09be76c2fcecec722394', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '9ef5b1fddf599242589f45a77ae81d53cfb6244b', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'a9d1d83e4d1bfd131cec91e4a64ef26134294d48', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
 
@@ -8398,7 +8398,7 @@ const SmoothlyFormDemoCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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"))));
+        return (index.h(index.Host, { key: '6ce5500bac732834bb5dfad51a4176eb6919e084' }, index.h("h2", { key: 'd0bfdef60eb67936e2b4462a1a4bb2c89dc59993' }, "Card"), index.h("smoothly-form", { key: 'a708e697d518fa8950c2cf83cc076e92ebffbaef', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: '166ba0f75ac66c2d5f11f03c8fadb20cf89d6435', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: 'd61c7bd39e8c09ae774606b92a8bb3e537836e57', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: '70b23dd5937565ad6c87f9936b83a02d2f8c070c', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: 'dc59de914f323faed35381b6c4eb2e4c72539178', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: 'b27fdb3e0a8fc1c02d3c570e1e3fb434f97e63b3', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'e76461cffe3afca778b1151a188b47c7ef7d9c8d', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
 
@@ -8434,7 +8434,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: '7844d1e5845e087bc559f6f3395dbffa97ce3059' }, index.h("h2", { key: '56c4d14611046efdf9b06816e59aea0e7e3a2fad' }, "Controlled"), index.h("smoothly-form", { key: '875ef51cf0633aef4bb3510d8a22f0f41dcaa944', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '08550c8bf896ce5996a2ea17da506bf55e6d0cef', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '9f2394024404cee03db2563fa1fc674fb1d23fb8', name: "currency" }, index.h("span", { key: '837b2f0f698e6299eaa6d56dd71ea53558edc502', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'd4cf009fb3f52de30d6f26990d9fa44f21d8f50e' }, "Dummy"), index.h("smoothly-input-month", { key: '9d149577b8ac244b2a00c5643e9d06a332929895', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '36fa1ee96d15026fc2db142c17864e7dcd458a9a', slot: "year-label" }, "Year"), index.h("span", { key: 'cf11d02d8dacaee8c5d073e635997495a1bea1bc', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '06304a23cd66351fb145733e675bd960b5340b5f', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: 'b002ca14148b17cd648602c8b950f65c2106a07b', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: '998f09cbbf11b0e5dbf2efa606fa7ad7a80cc86c', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8465,7 +8465,7 @@ const SmoothlyFormDemoDate = class {
         event.detail.result(false);
     }
     render() {
-        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" })))));
+        return (index.h(index.Host, { key: 'fec03fe6e146f8c4ca93d4cd4418d997e1dac8de' }, index.h("h2", { key: '767fa5fdb9f5474e12bd65857fc97b6e734eb6e0' }, "Date input"), index.h("smoothly-form", { key: '6f5fa68123ea141e005d8f8730f04828298863d0', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: '5e290e7adfeea3b1527763f03bea07614c225402', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: 'c69663690016397e994f7045e57a04ba26f4aba8', slot: "submit" }, index.h("smoothly-icon", { key: '7cf86ec53b1c8d02a44a9fe410a9597051b8baea', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDate.style = SmoothlyFormDemoDateStyle0;
@@ -8494,7 +8494,7 @@ const SmoothlyFormDemoDateRange = class {
         event.detail.result(false);
     }
     render() {
-        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" })))));
+        return (index.h(index.Host, { key: '250862ffe0d53e328905329437e91b5ebad8562b' }, index.h("h2", { key: '536e40aadb53f8ed550fe333e587b93172e8d415' }, "Date-range input"), index.h("smoothly-form", { key: 'e74f74d9b1c5ece5e0d7b0961964322b5cb10bfb', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: '34570b46ba3407959fe53675ca6069d39b1020f9', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '61250eec0b407776f16c883832e6525ed43f4e8e', slot: "submit" }, index.h("smoothly-icon", { key: '60d386f83cc1f370534ba360e5769b300840483f', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDateRange.style = SmoothlyFormDemoDateRangeStyle0;
@@ -8504,7 +8504,7 @@ const SmoothlyFormDemoLogin = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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" }))));
+        return (index.h(index.Host, { key: '2a5f43deb8d5412bd6e3f689121dae61a8e810fe' }, index.h("h2", { key: '4da410bb5c2d0567d2ded09d3d12d2e734754783' }, "Login"), index.h("smoothly-form", { key: 'd7d13e509e44bbf7565c44ffba00ad05d47a0bef', looks: "border" }, index.h("smoothly-input", { key: 'dfe6efa937a9a30356f8fe83ee0f177983450100', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '0f77f8eace6a54580330c59dde1f78d7fc2b9777', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: '9fd28636ee5650135f8d92fe3652952df6fdd0b4', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'a55b68e79b7e4eda5cd0b9b936b8d568d6c395fb', slot: "submit" }))));
     }
 };
 
@@ -8520,20 +8520,40 @@ const SmoothlyFormDemoPet = class {
     }
     render() {
         var _a, _b;
-        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 => {
+        return (index.h(index.Host, { key: 'db081d6ec048537567ff4c3de3efb80f02e875a9' }, index.h("h2", { key: '152ec589606c14d600458d16edd6aa2c45366007' }, "Pet"), index.h("h3", { key: '51ccb3e2d3a10b11579fa24ae5998a10ed2e656c' }, "Value"), index.h("smoothly-form", { key: 'b1e76f0e962498c312fb61b2198f27e177eedeea', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: 'c60c6da48f5e5c62b84a934dd908f18278bd5a7a', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: '92cf53c5a0fc3dbb9d1f7b042c6600458524cfd7', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: 'e4e9f551b36342ac128b5c189e372add1453be38', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "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: '88abf4bf85b3789e5392f1ae50e2131f86f524a1', name: "summary.height", label: "Height" }), index.h("smoothly-input-select", { key: '163c4d30504d2d440bb4e31d42e54286d2ea4d30', name: "summary.favoriteHat" }, index.h("span", { key: 'b803a9d4b5c969f74cf649495ff29b80dc7eca32', 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: 'd4120f7272df1eddf403cd56b8433cb6ca4528a6', name: "summary.month" }, index.h("span", { key: '2cb8eef31ee0980ccb7418d42517b4df6cedaf91', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: '6e3a63f405b74d88d42bbe5f957fee1ba0f9502e', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: '176ac40da54721997c43d0a81666acb4998b37b7', name: "summary.favoritePizza" }, index.h("span", { key: '6871e57f0b47cd6d69f675728cbc8adc04eb07ea', 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: '80670e084705b6dd89313fac93cc9cae199e4d49', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: '54adf6f72e5e47c87420b590c1ee0339917b2443' }, index.h("smoothly-tab", { key: 'bc35a89b5e79189f358204e3dc3f53ff56d36fd5', label: "Dog" }, index.h("smoothly-input", { key: '9cc578a69ab318b029a3e2ed911b8c44fa43a198', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: 'da49e55084302c59403e396216a5662814467d0e', name: "dog.picture" }, index.h("span", { key: '4ba608f3e2ba497a71912385898053e412c8bfe4', slot: "label" }, "Dog picture")), index.h("smoothly-input-date", { key: '0e9aeebaed1e5bc84995008be8fc9f35ea1b251d', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: '6e199a7d72c816a069b7ba1ac71880f82f8b82d2', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: 'e381b1b0f5f15f043135c7c50278a45aad11e70c', name: "dog.favoriteHat" }, index.h("span", { key: 'd4e77a11d6a6967816ad157048917c37c00e6cff', 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: '0a5c74e5716ea1d46e56d0923f60265ecb9645a8', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: 'ccc2fcde4138d6c8873694a197358a89dd203f26', name: "dog.favoritePizza" }, index.h("span", { key: '97bbceaef27ee84dba00348edc30e88f04b9f274', 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: '3fa75d1646e6d15e466452f0c65e4ddf5fbc4f36', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: '1eeffd514378ffe9cc3e0119c3544cd498408116', label: "Cat", open: true }, index.h("smoothly-input", { key: '65ad05667b91c90fd7a220a40b7e7a44e12dfda3', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: 'f52d5879ac3c5f9ff62fad15f2f047b631771151', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: '2eef08cbc4914369df28029689e3e74b63923507', type: "json", value: this.value })));
+            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: 'd4e41bd4f0ea384e45d3c7b0ebcfc8fef0c8a273' }, index.h("smoothly-input", { key: 'a8f6dec76b80683428d77f30c3e444a883d1afc7', 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: '7556e46fc24f10f1ca8252d3759e13ef6be294e7', 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: 'eb895e44123c07d936fbdca933b873aa20eed521', name: "owner.picture" }, index.h("span", { key: '8b44d1b0e331113f3d9c994edd860bcbbaa0235a', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: '5ea7342881dc271817826891f9e4007d4d1f1389', 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: '6209c4291574f87a35c1904defebd4cbde66290c', 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: 'b9dc7ac7da7ff8593e1a2e4a4d328dd81dfc5992', 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: '21d3858ea701a6286251ae44371b2dbb9c370412', name: "owner.favoriteHat" }, index.h("span", { key: '2e8cef55162db373af79645a4b5e374a6b40bbb2', 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: '24133d180e198e554b63de26bc3323cbe3744601', 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: '274fb656b13bde70abea4fa35eb688cdf46eacb8', 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: 'df83a30c36b5177a23d8763d5e66611db3bbe697', 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: '5a733c0b2ff06ddad303ec77097775d4a42fadb5', 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: '6d2fcc2affe9250787419dce8157912339803fee' }, index.h("span", { key: 'b589d7b6ca57d95b621d827cfb5927db3faca50b', slot: "summary" }, "Summary"), index.h("div", { key: 'd4d1293918327030bdee186d4ca5a55682b3703c', slot: "content" }, index.h("smoothly-input", { key: '5959e26fe56c7347f7c15a17cdfd4f2acdfb9fef', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: 'd1bb869132deb842aa805655d552906c80858ec8', name: "summary.picture" }, index.h("span", { key: 'f8b1915acdd0d42eb33978fcb02f662d65a8f2ab', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: 'b64e66df7956ab1a05197fe2d51e44361f984c0e', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: '5466ee7830e653a6f6db25961645c9ab203ccb51', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: '7ce763b3bef80bc5e0e0206c7f66fec8631d29d6', name: "summary.height", label: "Height" }), index.h("smoothly-input-select", { key: '83b72df95cff68356940bdaec14fc5afb136fc36', name: "summary.favoriteHat" }, index.h("span", { key: 'f8b6d174307542335f4da99192b8aaf6c85c9aec', 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: 'b75782058ca787708a313135fc1e8bb152e6b3c3', name: "summary.month" }, index.h("span", { key: '696e8468f1f4ed059418e8ce73630f2e342bbddc', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: '8e667d352bd2c206980b6104c67f9ae2c5a99966', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: 'd1aaf397f6b3ab4f09334b5a7bb29dc8d21c6ddd', name: "summary.favoritePizza" }, index.h("span", { key: 'f3b6a36b33d5a57ae90fed082e49f64009f918cd', 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: 'a3623c6c863c01ececceb3662bc28e866bb02624', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: '560c301f9084430a3116610ecac87526c4c75fe3' }, index.h("smoothly-tab", { key: 'a6daa32792c96cc28522f8be2bedd0cb55c0fd11', label: "Dog" }, index.h("smoothly-input", { key: '7d49e5553a141bddea389bf51dd84a9c77bcefe6', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: 'aa8ad2af83ad5f74e7094cddde1ad86232708335', name: "dog.picture" }, index.h("span", { key: 'ba9254c5c1e741d44136d0f6cbb28d5f4f0dafc4', slot: "label" }, "Dog picture")), index.h("smoothly-input-date", { key: '8e49fb563376bd4349e7151a8ef4292fffa2badd', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: '5a8b95b3fa01a59a7e6cfe32c0158b10d6548805', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: '9db97eab10483487370a2eea58a7b4c69bf1d6c4', name: "dog.favoriteHat" }, index.h("span", { key: '84f01e17a57d9bc3ce1c6c7e3973ebddf6ec1388', 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: '40b05d29bf1fce02de12100fd649d3c24313b104', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: 'e7477ef30a27eced86023fd8463c8982e3c949cd', name: "dog.favoritePizza" }, index.h("span", { key: 'f58e1ccc4ddabc64df4f567ea3b279075acb17e8', 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: 'f02baf4ffd3456d15eda802c1f701e941bf74c08', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: 'cffe512b4e6ac0a4c9ca085de43e1924e3778b7b', label: "Cat", open: true }, index.h("smoothly-input", { key: 'f7196eec6788c2f294ff6743bb4360e1a57b0a14', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: 'f4912e7af63e667a438d389a82cd4292fdcdaf7d', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: 'fa69764806f0a1ba82cc066aedcc1ce9e18e0a50', type: "json", value: this.value })));
     }
 };
 SmoothlyFormDemoPet.style = SmoothlyFormDemoPetStyle0;
 
+const SmoothlyFormDemoPrices$1 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '5ed4038bcc2aaa09d52b20596234e323fb2fc8f7' }, index.h("h2", { key: 'd9a9121129755d8a9f9a38976ac7a277d152b5f7' }, "Prices"), index.h("smoothly-form", { key: 'b1d1646ef95052ecf5e56786132405bc99fcdc55', looks: "line" }, index.h("smoothly-input", { key: '682ab8b618be4ba29d0a0823f76ccc5d4f0fb88d', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: 'a50fde19f136d84e78b33a556ef06132d3de9862', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: 'af5cbc7ba716720732f2ca8378bcd6930c858124', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '26c3529dadcca120c36f4e9e429af3a2a0c67afe', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '1bd61f5772d6cecb4d8122f0bb7e12d0fd78750b', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '7c81bd4291f7530da19745d67c3fb7b791fbf429', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '9b5da213d1fde556b6c5c5295203a8d3abfe14ba', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '9dc494033b06e3a6e14f9ba9f5bc3c7cc7e3bd88', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '6f8a1c4c31461564c2acea4034117f4e78846dc6', slot: "submit" }))));
+    }
+};
+
+var ScheduledEvent;
+(function (ScheduledEvent) {
+    ScheduledEvent.type = TimeZone.object({
+        date: Scrollable.fromIs("isoly.Date", TimeZone.Date.is),
+        amount: TimeZone.number(),
+    });
+})(ScheduledEvent || (ScheduledEvent = {}));
+var TimeTable;
+(function (TimeTable) {
+    TimeTable.type = TimeZone.object({ schedule: ScheduledEvent.type.array() });
+})(TimeTable || (TimeTable = {}));
 const SmoothlyFormDemoPrices = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4fa70a914876be27347456aa343e37ea989be096' }, index.h("h2", { key: '19bdfe20a9fd3afabb3df6dd907b9e60b68a8966' }, "Prices"), index.h("smoothly-form", { key: '9a74bb915a6ad42b2d44db1be65fd76c5866f43c', looks: "line" }, index.h("smoothly-input", { key: 'df774c146082e7c021db91b92993825f1c7b07f4', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '56101c015080db3992b1ff4de2d3f64a83c83d54', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: '2c5d2d37ec98a429417a61d150ef529dfbed1307', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: 'e5132c11343cf8b32b06e4999ecc3177fb100c41', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '0a13cd5f294ff10d9bd331c48548393f559b5c6a', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '1dfece2dfa23775239b2bb808a26eaf684dc6056', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '45862586a44c6d01b5ff19cb86aeaa82dfa1635e', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '6c4f46a729877a979bfa6b77635f32d88e568b1f', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '2cb2b0b473ef51a55afdbb582dc5a183608ddbde', slot: "submit" }))));
+        return (index.h(index.Host, { key: 'a2dfe85cbe9a77c05371417039b053de1ff6438f' }, index.h("h2", { key: '55c26e3adbbf9bd5f96c665f7adfd1ae4f30bb68' }, "Schedule"), index.h("smoothly-form", { key: '4800c705002c5f850ca5bc117d7d2269acdf6df4', looks: "line", validator: TimeTable.type }, index.h("smoothly-input-date", { key: 'a370ad7ed5c8feaf03fd91f3a9fd58e4cf378fc3', name: "schedule.0.date" }, "Date"), index.h("smoothly-input", { key: '7d99e4f920f10aebbb99678f74a9bf46da4e5728', name: "schedule.0.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '11911e751725ad9f2eb47e796d6ed34c55db8bdc', name: "schedule.1.date" }, "Date"), index.h("smoothly-input", { key: '54edda245c6b1803da201addf93942b6d640ae00', name: "schedule.1.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: 'e800f5668d0df1af08c65ed91ec1c3690789d1b6', name: "schedule.2.date" }, "Date"), index.h("smoothly-input", { key: 'fc5e69f6de150b83389b34b4fd51d82eec7422c1', name: "schedule.2.amount", type: "price" }, "Amount"), index.h("smoothly-input-reset", { key: '8b32edd5df32e1e1a12314adf83a701d5b8353c1', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '87350ae3b3bc920cb1f89d8a4b63f13a91f658eb', slot: "submit" }))));
     }
 };
 
@@ -8542,7 +8562,7 @@ const SmoothlyFormDemoTransparent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ac4fab97f13f1b2a04569c444463726ffd7f3f39' }, index.h("h2", { key: 'a1d3881d3e990ccbd065c836a16eca6376ab09d9' }, "Transparent"), index.h("smoothly-form", { key: 'a6223063167021ba9a05f3b9790c1c2527f6b39e', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '7208122dcbf0c3d895c6a8d8164bc22643775101', name: "file" }, index.h("span", { key: '7354840c3086ab9492183dd4d2b2f6c90af38ee7', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'c588ef4e14c7939bfab0bd6451a23541795044fb', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '14041a265b0429b10ce57e09f2230b36701aa38e', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '15ded0d37456a42d8c131ba57ef0307bc33662e3' }, "Date"), index.h("smoothly-input-date-range", { key: 'adef7c0defb1799a3da4dbcfc58217ec2ac0e472' }, "Date Range"), index.h("smoothly-input-select", { key: 'dc021642b27e4c9a82752ee594869893e29fa204', name: "transport" }, index.h("smoothly-item", { key: 'b9bff79a207ac285bba4c1f38f9379b4b3aba38b', value: "plane" }, index.h("smoothly-icon", { key: '78be03c6543b03c26d03b361f86c0d05b8e37833', name: "airplane-outline" })), index.h("smoothly-item", { key: '1b7c79a8319348d9f31896902ba9518c3e510c36', value: "car" }, index.h("smoothly-icon", { key: '3bfef43b7421d4f08d299810082ff64dcafd0556', name: "car-outline" })), index.h("smoothly-item", { key: 'c651b8be36aac65b5d10683314063b0549ba32f6', value: "bus", selected: true }, index.h("smoothly-icon", { key: '5e9387144b2a61ecdc859ce558af956ad53aceb4', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '0baa282b1620879cc24fc0d46e9a0fb5af72c231', icon: "checkbox-outline" }))));
+        return (index.h(index.Host, { key: '33e58258f38663c8283869c8aa751ce54b6ff131' }, index.h("h2", { key: 'd257eb6844086ddff32d309aefe38e3d3c49aab4' }, "Transparent"), index.h("smoothly-form", { key: '215bf30f6faa569f594bfb0dcfbf325dedaced3d', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: 'ce7f5ae99c6fc49fc1ff8aa52accbec42440ef6d', name: "file" }, index.h("span", { key: '3a9770ab2e6dcbdc5cfb77cab7b4dcf5324d9357', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'e6ad4f9a1aae3f1c458ac3c0d2aa36e5b18dfc71', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '5b6e425b22c551e516b7b95f03aab78a4a0bdb70', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '28d44980fcc5b752884afa43a2eb3217d87ff8ba' }, "Date"), index.h("smoothly-input-date-range", { key: 'd98533b265ea972f8cea9f9d7e24a7bbed315afa' }, "Date Range"), index.h("smoothly-input-select", { key: '046e7d26992ec93436b9b55ed0b7ad1d5e9ed0b2', name: "transport" }, index.h("smoothly-item", { key: '8f04e6b1398efd270dc28c72de932f00b967afb8', value: "plane" }, index.h("smoothly-icon", { key: '027bb9786ae542ab1d9ebe25747798999e8afc67', name: "airplane-outline" })), index.h("smoothly-item", { key: '7df0d69db219641e7d0b5f577987a0fb787f8b7c', value: "car" }, index.h("smoothly-icon", { key: '69dd108bcb129943931c80ae65e809851e637b2d', name: "car-outline" })), index.h("smoothly-item", { key: '554f0e330adfa4f357a5403e61f4df724830ebbb', value: "bus", selected: true }, index.h("smoothly-icon", { key: 'fff4c573b60864f3a17336ab999d735cdb1bbac4', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '922e7c4c4cb99315ae58ca6014bad981e39822c7', icon: "checkbox-outline" }))));
     }
 };
 
@@ -8564,7 +8584,7 @@ const SmoothlyFormDemoTyped = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7514b7d1a2ee384a466f06f297f9e9cd9d5981e2' }, index.h("h2", { key: 'd8f291f66794b350b0d0bd55f117c13acf1c040b' }, "Typed Contact"), index.h("smoothly-form", { key: '9a2729aea5f4d35ed9d414aab3899e1df64684d4', validator: Contact.type }, index.h("smoothly-input", { key: '2ffae4d5ca23abab7cc8733ba9af3520d5e4c45e', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'f72e992b163e477d5f9c01dfa40f1c5b69261272', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: 'cc353b4e75915a01fd5fa29d5610ebab76cb4305', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '963b2da1d4e3a9aa67e87474acacdfd8b16f04d3', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: 'ed91212c03b8b44e6f6902c29d281407788b6a76', name: "country" }, index.h("span", { key: '7e4adb1c2b3dbca1f5c78138afa259ffa9c3a877', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '48e15ba2e6ff364c43b66f447f5048e0295625fc', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: 'c0c9bbed57cfbc57455eefc7c28213b0e1049b95', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '43f4f6c832eb5a05acc1e07644dca2fd1ff6f934', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: 'aa45fe19db2b739480b0d6e1acf25f5d25021fe7' }, index.h("h2", { key: '5a75209e55f6082316117ab8202ac29ec45f6fec' }, "Typed Contact"), index.h("smoothly-form", { key: 'dce44554c5d5523c0035a7a51bdd795423e2b682', validator: Contact.type }, index.h("smoothly-input", { key: 'fb7eba03fcca4a8f832ef757b92864fb0ed9c308', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '6acff61dc9c33c18aaa9c2d3c03b1602684a0c47', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '368aadb5ad7ea5807ccc2b0f0b969e0a86c1ad89', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '7f787fd008d9e5915f97ab994834e4323e8efd0b', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '52748a9b0f51a5bb7f7955708544a1e2fb3b4e30', name: "country" }, index.h("span", { key: '779b0df0a80132981dbf8131cb7657c4ac9cd50f', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '5ec8b16b0e21c6d369c0edbb1db313d00aa23eed', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: '1fb641919146d2d69762c1eff443c2a280d42065', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '183df4f3ededc6c7dfd8e1cb27142959e7694a90', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = SmoothlyFormDemoTypedStyle0;
@@ -8662,7 +8682,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index.h(index.Host, { key: '44862417c70dcae3062b98709c60f61c000ac08e', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index.h(index.Host, { key: 'b98eb1398e4508e58a131c6d5ff723486c0a32f7', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get watchers() { return {
         "toolTip": ["nameChanged"],
@@ -8683,7 +8703,7 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (index.h(index.Host, { key: '523622a3392091c05ee2f1eb11df2211adc38a9d' }, index.h("h2", { key: '3001c29af15f29d1d21913187a18a6fc9b6fb478' }, "Filter and Variants"), index.h("smoothly-form", { key: '614c2c1561768339b1b188d3b8dc2a3f07043924', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: '029ef4523d3a50f61d235b770d546993544c2ed2', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: 'da6b39d581f60af7ce9c566b1a6867dcf3f0bd75', name: "variant" }, index.h("span", { key: '227dd90eb85efe5d0cc1620162463702c7fb210b', slot: "label" }, "Variant"), index.h("smoothly-item", { key: 'd0389fd0a171e57cb80ba7d4096cfb1214f5c968', value: "outline" }, "outline"), index.h("smoothly-item", { key: '97853ed1e47f66f29e3f6e7ce2ed5bc19bb13789', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: 'fd0fe606d071aab417d5a62d64bf995018044ee4', slot: "end" }))), index.h("h2", { key: '1056e77e8daa2561375c291c0f3f30bf597a5e4c' }, "Props"), index.h("smoothly-form", { key: 'c55bff5c71b16850f11385da8325db555f04b3cd', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: 'fe44b586d99b1f2c07bdc382750a8762cbf8c0f2', name: "color" }, index.h("span", { key: '125594447b95c8a3370b6b4c8568250e7c4cd710', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '9adcbdda6387357c9789e7e73e813ce5fda4f08f', slot: "end" })), index.h("smoothly-input-select", { key: '0dad470412db27b32a82a61d55c5cbc8a4c11e99', name: "flip" }, index.h("span", { key: '49b7e1b93477d2d9f42b8e5780c776d029a86ad6', slot: "label" }, "Flip"), index.h("smoothly-item", { key: 'bdc4f509ca363f80086d588fe41d6a0236e1b71c', value: "x" }, "x"), index.h("smoothly-item", { key: '98253120ba45e57aa0779b0dce7cd4f8d2a1b8ca', value: "y" }, "y"), index.h("smoothly-input-clear", { key: '2d517d99bf9900dea5db9523a552130f8fe4e7d5', slot: "end" })), index.h("smoothly-input-select", { key: '17f7e6c55a9b69a7b43044c3b679ea82ab4fe549', name: "size" }, index.h("span", { key: '3cfb39003d77c9cf84cc3969120dd12401acc9cf', slot: "label" }, "Size"), index.h("smoothly-item", { key: 'bbd6c2fec392991d26ce5904a031190be2982b97', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '34830196d95b43678d73ab425ba117b1bc3f037d', value: "small" }, "small"), index.h("smoothly-item", { key: '4138766f369e12dfeb86a1940b3fe702551e3675', value: "medium" }, "medium"), index.h("smoothly-item", { key: '432bb148682d033c022677b4bccac19bbfb288a2', value: "large" }, "large"), index.h("smoothly-input-clear", { key: '9c825b5a75922acd92a63bc569598cf3380c7a56', slot: "end" })), index.h("smoothly-input-range", { key: '432402f195632a0c28ed106f2101ac4fb0609ce6', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '71c3425a12c40a0b0757bb84e5e9d0b6978b4590', slot: "end" }))), index.h("h1", { key: '2023d6c2b516099aa4a6da21cc3423175387861a' }, "Icons"), index.h("div", { key: '3c7b0e162a5107c6ab97b5da2403b083cb171cba', class: "icons" }, [
+        return (index.h(index.Host, { key: '1c6981b2ead8d852bd3095ea2b8e167ccfa3999e' }, index.h("h2", { key: 'a674e2334702d721bbe80c38e340dd4df83b1d8c' }, "Filter and Variants"), index.h("smoothly-form", { key: '7ce406f374d1d73f0ef76988f94366a0737dca0c', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: '2880e33baad9499180d57e928a613a839edf5504', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '238a669e80f19114a5530d5fbc46e12d4607818c', name: "variant" }, index.h("span", { key: 'd03a1b35b864531d62e2d09f99a1e3f500170ffa', slot: "label" }, "Variant"), index.h("smoothly-item", { key: '0e826e3272ed4c017ad98a7a7d6b137b71ef9333', value: "outline" }, "outline"), index.h("smoothly-item", { key: '0e330f7e224f1bb4e9a99f5e1e162a786888b14c', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: 'c5aabc95974e08dfc599ff7d639918647c04100f', slot: "end" }))), index.h("h2", { key: '83a640f95d8fce430ece0c95c7a8cb360747e5eb' }, "Props"), index.h("smoothly-form", { key: 'd04aa102e7fa19243158a4927e0fd1073076dc3a', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: 'fb220fa5e5ddd2483d0af445008e8f53132dbfc9', name: "color" }, index.h("span", { key: '469f2b7809c85dab743be2a787deea0f928cf887', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '93d833e82d0329fe42fd699550e7090d2aee8b10', slot: "end" })), index.h("smoothly-input-select", { key: 'ca8185ac3e6dec1b773dcc84eb3e0b67c84fd897', name: "flip" }, index.h("span", { key: '430a8a3e7333ab6f854bfeb26f27375a6f085b39', slot: "label" }, "Flip"), index.h("smoothly-item", { key: 'bdaa614c66e08e12a03b63ecb92e6f8fd4b22477', value: "x" }, "x"), index.h("smoothly-item", { key: '091a2f82865030b1c35d4d974683a35bd2b15f87', value: "y" }, "y"), index.h("smoothly-input-clear", { key: 'a845f8a9224de65fbbec6fca8a25da9126beb661', slot: "end" })), index.h("smoothly-input-select", { key: 'f7c069d6af5a183902268d411bcc6ad2ea7dd11b', name: "size" }, index.h("span", { key: 'e8a85b03fac104008ab9c3351ee1fc604f906762', slot: "label" }, "Size"), index.h("smoothly-item", { key: '9d986f27066f821c253f7604f3c2fe3c2c5daece', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '706de8a8dee95736dfd610c87f0c6ddee4053d8e', value: "small" }, "small"), index.h("smoothly-item", { key: 'fb34e0afcf503ea5a373c110bca59bc500189495', value: "medium" }, "medium"), index.h("smoothly-item", { key: 'aa72f96fcd840ef012d9bb3ea5f4785a2d47247f', value: "large" }, "large"), index.h("smoothly-input-clear", { key: '650667d92f842cc29b2b821a813f6afe68a855a7', slot: "end" })), index.h("smoothly-input-range", { key: '14095e1c264aa84327020bde44c9ed1a16f6682b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '9b70eebe0d7a713d38fd99f02023fb6a1a9b889a', slot: "end" }))), index.h("h1", { key: '9e7af6108684d5a189e7ccaecec8bf4ae9b63d52' }, "Icons"), index.h("div", { key: '1de01a285b956ffe3a540022f2905b6257cea5bc', 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)),
@@ -9107,7 +9127,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: '0b8654395fe79aa68eef51d08ddceb61a898d4f8', 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: '3afc06d1f25d19cacece836a37b4feafd68eb41e', name: "start" }), index.h("div", { key: 'd228589bf532887ab1df14b0c6f84101e64547c6' }, index.h("div", { key: 'bc39e8f5bfe5d408ba5b806b64be5d8137532bab', class: "ghost" }, index.h("div", { key: 'c9e4176802404a3788e832655bc490ec0aebdeb8', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '752250ab58d9d97d60e4b063e918d5ff3391aae7', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '17ad63e7bc3b2b70547abf4d7b5a5bbe6fc4c490', 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: '3fbe62c49a8bb7d7cfb7e15800ae409551955d82', 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: 'ed341e08868536ddcef3d753c9a538eaab339a80', name: "start" }), index.h("div", { key: '61c5e6d8d17e034e4a5a30e2aa7451e190322791' }, index.h("div", { key: '80de8d4b66076c356208fd5aca76a871ea78adb5', class: "ghost" }, index.h("div", { key: '9e03dc99e94796848c823280aa2008e8923057a8', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'f18338e4bb535a353ccd19c011959df294103555', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '011ecaafbcc906ae0d0f4d8e39820a3a63cd168a', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -9120,7 +9140,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: '462bda3be9a8404e95d36d53ff98ccb86722d4f4', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'ecfc30af821c214ab58b7abfdc08da2a8fad830a' })), index.h("smoothly-icon", { key: 'e41e86f0402779d16d962f9a1fefa05241fe684d', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: 'ed933dda84ae06accec1d535aa739b4d94b8d8e2', name: "end" })));
+            } }), index.h("label", { key: 'ea3151b8d79f3475d02c8b0b8761c286ffb4d9a1', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'f7175e37987972a88d5bd7756b61253240835ed4' })), index.h("smoothly-icon", { key: '89f2bf409e15b617656a7cadb96c8b6b4146e4a5', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: '3d1a9674c76bdbac5ebd98137df4eca4a8690322', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9201,7 +9221,7 @@ const SmoothlyInputCheckbox = class {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: 'd50cfacb3fd0761201a7c75d219513276565e355', 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: 'f8c3d4bec3f0db915a23b6307d28a7c95e79deab', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '1cc32b333aeb332d5d61f3abe8e39bf8d89dee62', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: 'bdcffaab26d87f09d6806403f332812549185dbf' }, index.h("slot", { key: '05fe996160e47795fa0998510833cb29eb8df60b' }))));
+        return (index.h(index.Host, { key: '95a1522022f5a25c402a1563187cc1f483d88ec1', 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: 'a8b3077019550c1ff4e44eb9a81f817d5390ee84', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '161bcd14b479d105d143137493a956ab82f46146', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: 'd7f7dfc554a0706ff045a83a95931d50ac124832' }, index.h("slot", { key: 'c6ac7cca4bdb1aa315d4e0ef1811b3c4ae3a655a' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9251,7 +9271,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '9484f284e75befd19d39c3af18e935d345aac3fc', title: this.tooltip }, index.h("smoothly-button", { key: 'fd7d67d5c52092142241cf09ebf9e1d6844f1707', 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: '7f198efb670dc5dd3ace5e46374bc06802106abf' }), index.h("smoothly-icon", { key: '71e47a4704225ad81ee46c5070d0c26bf8469089', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: '443c2519cefdff110d087244d4a153a9b1a2b408', title: this.tooltip }, index.h("smoothly-button", { key: 'c88f9fa84c854b37db34f498addddd95f71b628e', 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: '4dffca4a3499f5fbf79bf2d7a91a1e0e6a7f0052' }), index.h("smoothly-icon", { key: '331c0dcd767585f0711c1072580dff6d91f39e06', name: "close", size: "tiny" }))));
     }
 };
 SmoothlyInputClear.style = SmoothlyInputClearStyle0;
@@ -9401,7 +9421,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: '9da4ea2a1e58eb1a75014205416580539a384f19', style: {
+        return (index.h(index.Host, { key: '7f1cdee26ce9429dcfce8d03d876c66c4bc6b4ad', 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)}`,
@@ -9410,7 +9430,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: '6a6d3f628aefdf5523b5a734a4fbca83e2719c70', 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: '69b0d883ff53fbcebc69e8ee136ab5e4b0c2e6e3' })), index.h("div", { key: 'e047b5bff06a7d4b2d454b9f1e64c4e88ff6702c', class: "color-sample" }), index.h("smoothly-icon", { key: 'd1736a34a2b945aecda80a8ead022decfb15109b', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '10de1092a9d22351ca0806097fb5f68b2c68e9c1' }, index.h("slot", { key: '46827502f847a0750bf5b7b13f2f3d869612131b', name: "end" })), this.open && !this.readonly && (index.h("div", { key: '95f213489fe9f74eebf863b93a2222a3c89625a9', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '8a214e7ddfaf7bc5fd64f8fd06152170c0164e2f', 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: '56287469e8bf02977505c701fe5ed71354928d76', 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: 'a9ab7e21bfc75d25ab1000deb2270fab7dbdf864' })), index.h("div", { key: 'd0512a2df8b8a1de5e64729c616bccc9c89bb296', class: "color-sample" }), index.h("smoothly-icon", { key: '06289ee0bec2159be080b61ace4959d9c51b34bc', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '8133f8753df1b4df9f64783aead0f08c5755932e' }, index.h("slot", { key: '1477cf5aa7ff10134e84eb8807d139ff256d6e60', name: "end" })), this.open && !this.readonly && (index.h("div", { key: '8b190e294cc1b315ad8d3fd769afd544546d914b', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '39c25111b8a835258d2573a9901df7fc632242e4', 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 {
@@ -9424,7 +9444,7 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'd9da59270cd8b8b30bb8bbddd09253bd3e87a6d1' }, index.h("h2", { key: '39bfb6f5cda61721368ee1dad508d4e988e305eb' }, "Color"), index.h("smoothly-input-color", { key: 'f879114fbe6e72d52308c0b69ae76b2b2c916c79', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: 'c2fe23975b38b280a677c518054c4e60e6af2e2c' }, index.h("h2", { key: 'd9c3935d08df05cdf004cad00512a228c39c642e' }, "Color"), index.h("smoothly-input-color", { key: 'ffafa281cf391ee7d741055b4baae0dac8fe6a7c', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
@@ -9516,13 +9536,13 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: 'dd5cb22ac438173fa42b0cc33d30d5f2d2cfc6ab' }, index.h("smoothly-input", { key: 'a5b78b48e4fe1f56394c194f1a204d9aaac9ecc3', 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: '6955944dd414b37f64792071b7cf07f18ed38ed3' }, index.h("smoothly-input", { key: '334571bf04611a652c3feffe1e5faa5c7b1f26c0', 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: '9f926b39e9c5750d8099e77195788cdb0bf757aa' })), index.h("span", { key: '527ecd6825dd1b46d8faf4d97e2522ecc8a1b4db', class: "icons" }, index.h("slot", { key: '8edd6c554ffc9df30d2dde2cea952cd069648d39', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: 'e5adc9ac0dea0c93e87774f81afde215b7bd071a' }, index.h("smoothly-calendar", { key: 'd93d146dbd74f8925dffe92cb181d386e1a9e7ff', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, index.h("slot", { key: '7540f9c4b099fd8a659cc1e39b2a1195b0a7f59a' })), index.h("span", { key: 'ebdb6a365e74a5c635f63811ce309c160d5af35d', class: "icons" }, index.h("slot", { key: 'e5ebb2ef8dbd85a62c6a71e93fd41886ee9ac308', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '6924bc97b9f03e84bc449039f33232b05fc15729' }, index.h("smoothly-calendar", { key: '68964bdc3c4fc4a7e8a84bec206ecb39ae65947c', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, index.h("div", { key: 'cdf37ec29e2150b44fee7c7153fe9eb301aa7548', slot: "year-label" }, index.h("slot", { key: '961d1de6ef85344b433a8405963a817b57f94a5f', name: "year-label" })), index.h("div", { key: '5edd148108c9ad3cce7ccbdcf23985c067c3d324', slot: "month-label" }, index.h("slot", { key: 'cad29d4e9e8932d3547bbe17ce006e99b861f35d', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: '27fac3ecaaebb4ce91f4c6e7503fb9308f3bb6f3', slot: "year-label" }, index.h("slot", { key: '2d3a5016114b92a0036321efc3fa8b86006ed7c5', name: "year-label" })), index.h("div", { key: '47124124ab93b08722058f150101093abbbbb950', slot: "month-label" }, index.h("slot", { key: '06fe48332f022c57e380381b02f30889cad73a39', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9628,12 +9648,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: '0a39feda764bfd21373182adf3b7f5b0b3472eb2', tabindex: 0 }, index.h("section", { key: '6bc56a02490b2e855d9d9c0b6f2b4e79d2f097b9', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: 'bb64b743e16f0f80232a101121475c9b18bf22fe', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (index.h(index.Host, { key: '888acc7f9b13d584516df9b02b00a6d1d355bc67', tabindex: 0 }, index.h("section", { key: '4d48b609e57b5efb08d6a959e5e6493590a4d958', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '9b08f7f4b55ee7c47caae23c60557fee2474d7e9', 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: '5c0304ae71532534e4df6673a2ca538e131ce7cc' }))), index.h("span", { key: '51c98ef57299158e77be485a5355d4a98eda18a2', class: "icons" }, index.h("slot", { key: 'a8e2f3cf5dee52eb181865b6fb6b992a87216a54', name: "end" })), this.open && (index.h("nav", { key: 'e41d58a167a882bff1878fec710c5295dc3f7ea3' }, index.h("smoothly-calendar", { key: 'de6578bbf253dbf6b5179629e1a414d311c40785', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: '05a2ad08ac0a1ffafc57b296c6b307a3e94d93b1' }))), index.h("span", { key: 'a30ab3b21738225028eeb8ec224c1e57e6867d5b', class: "icons" }, index.h("slot", { key: 'dc9950b0053872d98e537dc2b52959ec804dc88e', name: "end" })), this.open && (index.h("nav", { key: '957af34215a9aed9c77a287bb0c9dd0b38130a2e' }, index.h("smoothly-calendar", { key: '4ef33a937d1e3bd08769284d12678ae264d32710', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9664,17 +9684,17 @@ const SmoothlyInputDemo = class {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (index.h(index.Host, { key: '2c21d84c0c387c41621323eac28a6fb0c7aa9eff' }, index.h("smoothly-input-demo-standard", { key: '119dd61fec7d5679e7d71ed8b1cbd7cd7676df8e' }), index.h("div", { key: 'f27fe4ccbce6bcb2bb247a7ca2bdf1a3c0f48eeb', class: "inputs" }, index.h("h2", { key: '14d1b974cd3d39d9bfce6db4db90390829af27fc' }, "Calendar"), index.h("smoothly-input-date", { key: '2554c0764e1c3240fed2a60b1f0fed1debc4b288', name: "some-date" }, "Calendar"), index.h("h2", { key: '566d6aa65ed9d693953c8f16fcfdd84877f948f6' }, "Date Range"), index.h("smoothly-input-date-range", { key: '888e3043ba1f13b4ee9bd00b214cb422745271e5', 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: '40cc239a477203bcec3950ca8f9d58760662b6f4', 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: '5914ae9340c307ebb9f2d237be1c464489af5e11', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '27f7376080ee0194d9b10c1b67fca176171582ca', 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: 'f5fb9f6b4974bc45606cf2d8c8e36d1df5615968' }, index.h("smoothly-input-demo-standard", { key: '76b7f4807acddd7a1abaafc15dd2a831023b1e2d' }), index.h("div", { key: 'cf8fa718aef87f25b5e808ab2e6208b1aaee69ea', class: "inputs" }, index.h("h2", { key: '19b8c7a5a6bc49fb40aee9e84ac9773c5def7366' }, "Calendar"), index.h("smoothly-input-date", { key: '927e3a5305f7ed3b7f0b968580604a8d647d6cab', name: "some-date" }, "Calendar"), index.h("h2", { key: '1764deed7d46371f2e4f788916bab240d4f239d8' }, "Date Range"), index.h("smoothly-input-date-range", { key: '9f5201fc2ee08446de0f9d76651db829866f848c', 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: '7376ad2973f5925d66e859bedefde669fa1150a8', 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: '4b596600cc7f285bc256da0e745797d8d7901c1d', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '4a5a7f575ded4a0279e9281712dc7e89a2d80bda', 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: '68f4e45c98c8ae86540d47dda347f7da2a6311c0', slot: "end", size: "icon" })), index.h("h2", { key: '22fa286405039f0ffad5f3e0699d319e19afab81' }, "Date"), index.h("smoothly-input-date", { key: '234714e87a3d7758ddb461c2e41d8338b08d1dac' }, "Date"), index.h("smoothly-input-date", { key: 'ffa9825d1607cfff36c0f905c54f599eb27641df', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '0996c7930dda251e062c3ddeb3913235945c8770', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'f93840584abbe3bcf42b2ef631b9af0ad3777cb9', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '922eba0deb0d83ef492fc6179729784b65d56007', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '1e1922feaf0d74cbd28838910e76aa4996b79379', slot: "end", size: "icon" })), index.h("h2", { key: '285f1e7ac38d73d1cefd2d09cad980e3bfdb4eef' }, "Select"), index.h("div", { key: '530acc8bb23dcded52f542fd5776b9915d8747a5', class: "select-div" }, index.h("smoothly-input-select", { key: '055b09252fe6854519b55355309123649a1d8548', name: "select-dessert", looks: "border" }, index.h("label", { key: 'eb009b697a58e228e218b03be5c5443f9112813e', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '797c3dacc4cfdfc5dbc844c84792e33bb7717315', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '39663fc179e11bb1dde2d11070a071ae2b6c983e', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: 'b549e9eee27dbdfdfd299b78b99be95524fe44aa', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '009a56f0408101944a17137fa8f7178b2584f0e0', value: "4" }, "Cookie"), index.h("smoothly-item", { key: '7693819dc11bc1cdb742fc674d4cc845e1ac6586', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '4a1d710d03688de60007fc1e30721227deeaee33', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: 'c1c74da741dc5b448f41a5327d2c524a949d3ca9', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'eb718d0b95e209d2127c7f3dfb1941036bd6f964', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '5fc9a3a6f8a668e703ef916367919eafe4e78911', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '426da9fe09849d3a8c7b1f143c2fe2a467be13a3', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: 'c019c5a72262db50d9de576501dfbb26a987d1e0', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: 'e0a00f4c9dc9997c3058fff88ccc5a8fa7d2e039', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '283384daafb0e48ee07fe8a29fe722b5dd30f6ed', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '0e150c523e786fd3dbc868a01f6c24e740111b66', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '4675be762d6b1b16d5142221dcccdf10df4eb4d9', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '96f1246d1d63eac1824f80b2c75701e9a1271c65', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '27858e1758ed565c6c4006ab47da45192677e289', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: 'd09b3c52f365fabf86363e53c92fae0021e9eb8e', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '67ee6c60d35c5d4e27e852ffb1883dc30cdcce7a', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '334bedfc6c4ccb7ea641db54e227c9ba300a293d', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '7b0116b63af2a20f8dc3e7cc63f35149187f8abe', value: "folder", selected: true }, index.h("smoothly-icon", { key: '8ff38f940fcaeebfacf2fa209c60f3f6b9c27043', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'e8d35a3ecac87ceff59cfb6d6b3d66ffca4a837e', value: "camera" }, index.h("smoothly-icon", { key: '081a55729f3a7c59e3b9346626fae299775e7ef3', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'a77b802760c0d81ddf74a1ff7daec037d3db319e', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'dc34381c92461f5c13e51dc60037d45e81240ee7', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, index.h("smoothly-input-clear", { key: '0a6fcc2bf611100b030151f697a92c265cab70ce', slot: "end", size: "icon" })), index.h("h2", { key: '6dff02322fe2e6d046ab87783ee10e2bf8811846' }, "Date"), index.h("smoothly-input-date", { key: '12d8d46d4b3b6c15edaf3dc57b42f8b8ae2e7673' }, "Date"), index.h("smoothly-input-date", { key: 'e29de3a00b02eddf2d1b12bacd3cac2fcd4ba21d', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: 'da1503dc2c330128d6c45cf8ddae57ddfa07777a', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '1928e5521e5f057770e55cb01779f4db5ea2b969', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: 'd2a7c44b60f34eae763e9d2ab0a1638116cb4ab6', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: 'c8f3b4d83b9c7b7e9bc7a77e69f5a5f62574f383', slot: "end", size: "icon" })), index.h("h2", { key: '3fd8792c958f964c72268ea7864e559b23ed0437' }, "Select"), index.h("div", { key: '3a9eb0b50df2f894a6bdd21b929ae6359c861cd1', class: "select-div" }, index.h("smoothly-input-select", { key: '0cfb6c169c267de816dfa241d60fe276e240ab8f', name: "select-dessert", looks: "border" }, index.h("label", { key: 'dc2e67f25a9e838324b0af86086fb383f62ed885', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: 'ffb1b308014b5860cd6211fd474b5fd0b324004b', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: 'ff46f80bed769056e4724b1aa349ab8df6316277', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '7234bcf8495a875b320b44b3cf685960c16994b6', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '368eb6a25a0cab467d6c15ae162d80f9fd2b694d', value: "4" }, "Cookie"), index.h("smoothly-item", { key: 'ba54e39b1ef822b404c7b41d8ede588efffb9379', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '3508452be1107a52a6eae701cfefddb7430a0f83', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '8fbb58174a3ff374d1b6f9ecb41f4eafc42ac3df', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '442fd11b7bed0671dbad3d3c6513f610f068263b', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: 'c25ff454d762fbf5c3753c940c5f19270f77c930', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '3eab5157ea0aced4df728508eceddd9de2108c41', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: 'e091e11fac9863053119399195eb7b151d40d5b1', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: 'f951cf1b3c8921fb7e5a56ce717cbc5ce9ee2105', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: 'd218c0a625bf06749ce47c6771e3d551080c9792', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '7dcf5a03476f818a5843034813da35c185631322', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '27b8c6510f419ed030987fc6279121336549e541', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'a4fee9f21deca306d278d4f9e79107ae6604921b', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '72dffbe468f90f77d86aced927ce371995d5f485', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '1cdfcffbfb7d105ba775827736dea14298c449cf', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '4918e8c669062246ebbc6646b40e3f1b63c03744', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '863ce71edfa5a6812ec68f4d91a5b93bd03cb02a', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '71b4cbd7e1d2f4ad2dd1e1e81f983eb5af57320d', value: "folder", selected: true }, index.h("smoothly-icon", { key: '85a9c63762b5a906e74bd14472caf542308b12fc', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'e376aff6f1f203274cc4c7e5185f429f2ab2413a', value: "camera" }, index.h("smoothly-icon", { key: 'acf038728fb05e63e8ca9a23d86ddfa775e75c88', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'e5e3c9cdbee2bd5d25405bb00bc8a1b0a28bbcbe', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'e8fb5709c0e79b9e38580a16f81fb1d7bbc4a37a', 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: 'a8ec5a6d155bed3a983866ec9345f353688e68a0', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '33368db371d97cf753fe437af3dadf0d3c3aabf1', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '8b4ba97bb9f3cb15fcda8b50b9030f2428b15561', value: "1" }, "January"), index.h("smoothly-item", { key: 'ba14532dffdb07e4eb5b77f7d37abc5903acbd8b', value: "2" }, "February"), index.h("smoothly-item", { key: '232033ab81a5d5b14a01e1ae6a839285e255781e', value: "3" }, "March"), index.h("smoothly-item", { key: '60a76b41a79dffbc4d8e9953fd6e56700e9c87ad', value: "4" }, "April"), index.h("smoothly-item", { key: 'c3112667ba0449590b2fd9921e17f3329921c53d', value: "5" }, "May"), index.h("smoothly-item", { key: 'cec4499331fe728ce5be34aadcc3fd1ed92d1e67', value: "6" }, "June"), index.h("smoothly-item", { key: 'c16df211a33494928925e1d922a7faf0c2618fc6', value: "7" }, "July"), index.h("smoothly-item", { key: 'b0bc36a4b50333a5c3fba07c3f0f3475a882817a', value: "8" }, "August"), index.h("smoothly-item", { key: 'd2d611025f6cffc0e5694b1ce69bf400f31e0a4a', value: "9" }, "September"), index.h("smoothly-item", { key: 'bb6375ecd0d1b233e40871481b54651645ce87c9', value: "10" }, "October"), index.h("smoothly-item", { key: 'fc4f578f7af531d6b36c8812629aa026860525e7', value: "11" }, "November"), index.h("smoothly-item", { key: '75739a388093c006291743dd3faf7c515d8d631b', value: "12" }, "December"))), index.h("h2", { key: '2c6ff5fbf6fb9761cbb136bdfd3ca05612081780' }, "Duration"), index.h("smoothly-input", { key: 'b921f2c6cb53ec97722c5cd7a48671329bba89a1', 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: '9e3f99927f6e54ee05c91f8aa5cf7f6ebcf69998', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '07d0a34094bc6ab9fbef7e4dbcdce146042b2b88', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '152ef005ce3793e97354445a860ad68cbee8ab33', value: "1" }, "January"), index.h("smoothly-item", { key: 'f7e641e238be611474914f9019d8f0c04e1748c4', value: "2" }, "February"), index.h("smoothly-item", { key: 'cc5d5bd3eca19b02bcd890569bba07742dcedc04', value: "3" }, "March"), index.h("smoothly-item", { key: '5c3c1adbb28372473d78d5358025f00c2f179eca', value: "4" }, "April"), index.h("smoothly-item", { key: 'e67ff66dc999b688481fdfdd3f9c401ff0ae308f', value: "5" }, "May"), index.h("smoothly-item", { key: '24fef6b4773f4a541443ed337e9efd6aadd40ad3', value: "6" }, "June"), index.h("smoothly-item", { key: 'd870d078612432334a40908b71d4c80969f6c307', value: "7" }, "July"), index.h("smoothly-item", { key: '0476e0648671e4d40a942a9f0b3d4ceac4c00e70', value: "8" }, "August"), index.h("smoothly-item", { key: '1036c20d89e5e8d2239a3e159d709c6146e5bffa', value: "9" }, "September"), index.h("smoothly-item", { key: '284995044dbfcc51e19d5f0df1573c56b2e4c6eb', value: "10" }, "October"), index.h("smoothly-item", { key: '2db4b959ef88bb76743c5244da2b658e56a92b63', value: "11" }, "November"), index.h("smoothly-item", { key: '32da23e740fa20b0bbe4e659a9676057d0e9aa73', value: "12" }, "December"))), index.h("h2", { key: '156972cad40cac5ffb02ace653cf02befacd6b6a' }, "Duration"), index.h("smoothly-input", { key: 'c94595a4b896161c04d02d6215ba538e29edcdc3', 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: '80ba4b5951af766b67f376660c79f852ca482866', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), index.h("smoothly-input", { key: '6866dd633ddcf17b103ec8cbc5710e52862a2d4f', 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: 'a0382758730f8a8697be85d97756fc8c0c1fc0d2' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: 'e6cec072ea54ec484e2424975a3c86a69fb84768', 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: '77f55666bfb179b50fe1e86cc1422a1b44d64a8e' }, "Identifiers"), index.h("smoothly-input", { key: '5c724be6ed86804033aff4ffee794a314791f7c0', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '954a7c50877ac699f49595563021e974278d56b7', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '5e1cad87e647263d518114210d093f998ed177f3', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'cddf214dc2cd440837eb7a933af0470859a4be94', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'a61bb8db3045aa56e2ca00ac7721fcbacac3a3d6', type: "identifier-camel" }, "Camel"), index.h("h2", { key: 'ee70c72c012c8be8c4e668aae4164168d7b1b42d' }, "Input Alternatives"), index.h("smoothly-input", { key: '204de7c5189607c6b27ca5b7a83b2ba8c698d79d', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '5fbc4e3d8955d6a798bbc10fc276f6fa265b93ad', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: 'd1fc5b1ad786ef2b41ee92ee56321f089b6e9747', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'ef87a78fad8a92488218849b8d0a85de6602e4e2', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'e1c3f4432ec1796dd87b7500afcd262356ef4d10', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'e50e8ec421539cb75e231503d1663de361e20e5b', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '8e0dc0e5749136726671d7579abd8918999754de', placeholder: "test" }), index.h("smoothly-input-submit", { key: 'e062c76561891654d4314785bf09ab33960c9f41', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '2c21b3560fc2ac10780453e40fceb250e8d2403b' }, "Smoothly checkboxes"), index.h("div", { key: 'e31c12b2a888221d0afc7ca6ab7944ff577b6ff2', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '7f3ec126b1b37648139d0f0bbd0372f3ea176416', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '237ba374d970b6a68e78e3450196eaeff1537ddf', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '434a83852c9557715b61af2c44e072b19351e03b', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '503cc88e9bc011974e13a6d71d8620d757f09eb6', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '484294e6448892de287d4b32f9f946b3cfb37c10', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '376db9a07e28f24c4433ffa89ba300665de253c2', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'f54250f0e88eb61833b0db4f9106428533c14b31' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '871a0a0bf6c47e366d8a3730cc1c36ece4ff0e7b', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '8fbaa02d69dd97049a3bdc05c8734c166b5b224f', name: "checkmark-circle", slot: "start" }), index.h("label", { key: 'fca863475732e68c6dfc108a77f3c993dd3d937a', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'c5324e8a2a54ea6f27b34bfd2ea0a9b3cb19ad88', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'f61448a7cc159f9d96d6d6e9b25702176583bdac', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'e081262529ff3d99a04dd57740379273d82a498f', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '18993a083021effe80cd3b876f36047eca70ab5f', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '7c6df271eb3872dbdda0ac06797a553706beefa6', name: "radioSecondInput" }, index.h("label", { key: 'a4b5e4fd1daa151c024cce5d4b0914573ffe7873', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'ed079a2521d95d29b7bde357c22ee16b444e4313', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '38ba2cdd89f654c2ec6bdaf3eecb7cfdfe13910a', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'f34c74b17938da5b5b8b2656de5f9cbbe35e36a6', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '91eddcf895efc3709f2aec01d410c7b2d08c1e8e', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'bda68e4045caf72a5efa37749931937107ab6495', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: 'c1fe867880cfb78d714b7f8e6f838896266b1f0c', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '521088f8a68aad14a287b59f72f4ff3d3bc9bf12' }), index.h("smoothly-input-color-demo", { key: 'b649c8db81ef661169184d777f35b02700f61569' }), index.h("smoothly-input-price-demo", { key: 'f86bad7c5ec9519da3a93cb61d8c7475eb17dd2b' }), index.h("smoothly-back-to-top", { key: '55a63504aec7df294eec9c0593f3a8097a36d082' }))));
+            } }, "Duration"), index.h("h2", { key: 'd0b5633f6333132c4260b3d1cbce7af063e56f6d' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '7b981f8d3094db4beceb49819e39cd64d3a58cdc', 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: '4a6cb992d7a790ac8f90a9457624b39dde605f1f' }, "Identifiers"), index.h("smoothly-input", { key: 'ea8c8c5733677215ebe8bb58dbdb003e0fe2ffcc', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '59d0e1b81408577c66471703272024ea00e65b23', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '0c37d4cc4c095af41847d0481dbaa758344a1f44', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '1f007396c2ce2eeb4b808f6cf685101ecaaa2b39', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'e98f7782122213569d5849aeb51bebef7dc76e1a', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '10370fde30ddc40fb1756fda0a13473ef6b54c5c' }, "Input Alternatives"), index.h("smoothly-input", { key: 'b6477cffb527fe7aadefc72fcea14edec8d9be52', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '8e74243a055105befb639cd9349a8851762d5634', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '3233f8e9ffa51aabef8677a3c6b9e340099fc76c', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '8b44ab9254c128952ce3403930cd0d2b33869f67', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '874ea98d4329a8de0179ab35738439c988c5795d', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '320e158a5b8e453b260a4641dcdd7e7eebb735ed', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '3842e1d2cdb6114319aa7997123e9643b9749efc', placeholder: "test" }), index.h("smoothly-input-submit", { key: '06ce532c4703c3c798c91c9416b21ecddd6db84b', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '2dbce1c8a6d42eba1c40ced7750d4728b999210e' }, "Smoothly checkboxes"), index.h("div", { key: 'a1804c8d0644e13a196a37ae1eec78d27f2aedb3', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'a420ffd579f723297c69ad49ea6cb0ee0c9596de', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '249c0ba3c8745e8333f8b535d4b409f7b37473df', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: 'd784dcad4cf36a3ac7c1de6b01fc2563cee5844d', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '2d547862dc1f1e401ce0e28161ec22518bf50daf', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '660cbd34a71a2f3db60f4bcb71f84d65b0a2e26d', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: 'c611d17fe695f639bece084d60334ec600c29dd9', name: "third-checkbox" }, "3rd")), index.h("h4", { key: '472ff0bc98b21b279f81b6023208b4dbed53da87' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '8d5be0841845fb0077a09d130231ab53c4bd4fb9', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '1405d82a5326946e9b75aaa044c493101cd10cf6', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '0de40dc5cd9ed9c8fc179603c99b506969de235b', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '7a580563ae23ff537bbd3d24949b4c5293301919', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '802ac68270881b22463edb41b1993da3523caf24', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '3fc3d97e8a222e4bb4ed345cc3fd2dc722b15915', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '12edb81d592e715090fb863ba1f813b829eb6c25', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '6eefa5acda608df32bf346f4d39112d416d303d0', name: "radioSecondInput" }, index.h("label", { key: 'adfdd8cccf5066275893d97312bc25f4a534fb4c', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '212a3e5b79ae95879528b06e2c5c171d30346574', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '1b7e69595c0ff030d70c81983f6ba2935bff0a59', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'f021ef6ba5491e532c956770dec1cdb743b2ecd8', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '5e9aeb6fab5d2e163f3dd0af8e6c907d7c216159', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'b89bffddc3d2ecc88f2f77065babd1ed961d9a30', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '2ac6c8f18deefff5e47a4956c482ded44a4bce56', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: 'd745e05ff520d1437f67e7e52a81494f4aad1fba' }), index.h("smoothly-input-color-demo", { key: 'f75787af771c042203883f797b3f018e48f6770d' }), index.h("smoothly-input-price-demo", { key: 'bfd9b06dbbb6626e32687b48bb9cbdce12cc59e3' }), index.h("smoothly-back-to-top", { key: '7c1b9cb3aaf8e709a2c0cd746eb98f9426d51a10' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -9703,7 +9723,7 @@ const SmoothlyInputDemoStandard = class {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (index.h(index.Host, { key: '38c075c6e39abee39371442814d7b4facbc46740', class: { vertical: !!this.options.vertical } }, index.h("div", { key: '3e24def96fd3153a1ce08c41393738b10b72a308', class: "description" }, index.h("h2", { key: '5cfbe23842f9e7bd4098a47b6f2aea7214f613fe' }, "Input Standard"), index.h("p", { key: 'cd59047edf31c03b0300a46bcf9394ebe50fd8be' }, "Height of input should be ", index.h("code", { key: 'd8490a3089215f465f5017a0b94fb4368810e4cf' }, "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: 'f756ac9c17f5cd264ad1adb2700b528cf03886c6', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '2cbf2e8841332d3ccc7985eccf8773eabe5afb4a', name: "looks" }, index.h("span", { key: 'b8186cd7d95f8ddd692c056361bb4839fd9e51ed', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '0efca079e1639c2ab468eecffbb36928b9445f74', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: '8e01eb18f70f2e40770c70f31302e300d1aef3f5', name: "color" }, index.h("span", { key: '9ef95f17b8e56f8d5164706f9b174347d9c96262', 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: '29c264697ca079375881cdf46072e961d711505b', slot: "end" })), index.h("smoothly-input-checkbox", { key: '75039475fad28ff0a2ba3e34dbed6cfcd62a5ef9', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: 'e97e68e056c3e9fc4dac706415006eaeccd500ad', name: "showLabel", checked: this.options.showLabel }, "Show Label"), index.h("smoothly-input-checkbox", { key: '20e721fbafbdc4b7aaac3bcbe1161a33eddbc336', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), index.h("smoothly-input-range", { key: 'f2b1d11816c0397e48c4b144c6eed7d989d07ebc', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), index.h("div", { key: 'd3e0909e821ea5e48d4e509adf4cd05655d6a85c', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: 'db28d4db07e7db4db5a8cd574b0f69861eb81060', class: "width" }, "100%"), index.h("div", { key: '76460e511717e01c4dd76eb210dc7afe4f1d06ac', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: 'c04068737d7d39e1f05e6bf2fc80d933ae1a9d71', 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: 'e06e24a9f2edcc682ea6a5b03e954022f056a522' }, "Text"), index.h("smoothly-input-clear", { key: 'f981cbcc17a0b400ec9e3d8d8a1033970df4b10d', slot: "end" })), index.h("div", { key: 'f9bfb1daf5a0416e0eeb5aa219430a49d43015dc', class: "height" }), index.h("smoothly-input-select", { key: 'f61338f581e7a55a3584a0fb3f44586938911aa3', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: 'd7cc3b68fff754b3e9f05fb2a957d4a31ffcdbcd', slot: "label" }, "Select"), index.h("smoothly-item", { key: '78bfb2ecf67ed0539d6288d2cfe8ac593bb6ad05', value: "1" }, "January"), index.h("smoothly-item", { key: '7aefc3b82026ad42e95a97d42226d2d7d57035b8', value: "2" }, "February"), index.h("smoothly-item", { key: '93370866b06519bd75225dbaa467e797c3783b2d', value: "3" }, "March"), index.h("smoothly-item", { key: '85d990aa4de961691f2437cda8b4789f2fd51a58', value: "4" }, "April"), index.h("smoothly-item", { key: '85311aa790482101e99bdab152ac77907a90395d', value: "5" }, "May"), index.h("smoothly-item", { key: '6606c372bd1e38e69620edc3066f640f09626872', value: "6" }, "June"), index.h("smoothly-item", { key: 'bcc4479a725b29994d6df835f9ef243cd9bb5b84', value: "7" }, "July"), index.h("smoothly-item", { key: '22322d0a9b1ed89b391d7391c12cbdae850ef525', value: "8" }, "August"), index.h("smoothly-item", { key: '6a901e926071cd7efeb07ea8e729c454db8d7d1d', value: "9" }, "September"), index.h("smoothly-item", { key: '9bfc30908294219eb1bb12bba9c5579fb36b2f1a', value: "10" }, "October"), index.h("smoothly-item", { key: 'e674906819f1af24ca0722d4b7997f6a8bdc1823', value: "11" }, "November"), index.h("smoothly-item", { key: '81eb1d572dde2f9f296955b55513c7dcdfe08e28', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '4b8189eb8784dc6e89531908607052fd2c73f2a2', slot: "end" })), index.h("div", { key: '64f3d7061086004be01bbc488dc64bb5d17085c4', class: "height" }), index.h("smoothly-input-checkbox", { key: '19de7aa11812525fb0949c9e5d6368aba5957390', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: 'a50e5ae17b1c12393d95fafdf445f9c03daba519', class: "height" }), index.h("smoothly-input-radio", { key: 'fb05abb658864d96f58f2ffcf23492995b9a644f', 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: 'e8854e052ff5e7bdc422fb0615aafcf055f46c7b', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: 'cecca4e730f677b1c1a253d8e85fb57db3a15bf5', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '1c09fdea140a175cfa1459aa82e123e74d48a30e', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '6c5116b55858f49b8ca0fc02e925f37ba0f6bdbf', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'bf7ac4750d0da1d924f7e10b455dd8b5da71f312', slot: "end" })), index.h("div", { key: '54e65ad335ecd68b4bdaabfb296667d5cfb1fa12', class: "height" }), index.h("smoothly-input-file", { key: 'd807821927813782a885f37010653718b3c20a51', 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: '65e04e2aa71b5af42e955e9a3768edb5dc5a9912', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '6e550848b0aea53217abbdbb68929b7b1fdfb755', slot: "end" })), index.h("div", { key: '342efa07b0d189fe9d230f1b8cdd28e510e61b0f', class: "height" }), index.h("smoothly-input-range", { key: 'dbf387afc5eeb91d8a6d5b230935c38eb50d95c8', 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: '8b6a4dd4d5f7f03cdc3e2a6e4a1fd4ceb93645c3', slot: "end" })), index.h("div", { key: 'efc39dee9e79508dcf5a4289881cef82d948e0c5', class: "height" }), index.h("smoothly-input-color", { key: 'd1d48d8f5e10f1a4cd61c451af8918a2caceef61', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '536cb07ce6ff0879d90762da710f27bf3a34aa49' }, "Color"), index.h("smoothly-input-clear", { key: '0493734afd8a5daf6f3157077a881585251132bc', slot: "end" })), index.h("div", { key: '58a5c412f2f71d4282616f43f6ff1ae38a329f57', class: "height" }), index.h("smoothly-input-date", { key: '58a59050348d97513a9a00e5a5dd766aa531e03d', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '8ad9e7b23669fae7e6a98bdae3b3518d80d78178' }, "Date"), index.h("smoothly-input-clear", { key: '0397233d1794b0248edf257496ff087c5e169498', slot: "end" })), index.h("div", { key: 'a53af14fa2899adfc4c5aca11d5a91a4b78e8611', class: "height" }), index.h("smoothly-input-date-range", { key: '3d7d60738d3b4d03e5f151e4e37f45b41d987cb5', 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: '8c03e4b63ac59aaf342fee6b4c6b86216d7f419d' }, "Date Range"), index.h("smoothly-input-clear", { key: 'a568b0d82420aa79f27b21950e2a8421272d9729', slot: "end" })), index.h("div", { key: '302eda87d0c09683e22fdefb8b872c033fc8fa20', class: "height" }), index.h("div", { key: '78a8185e044b6b6a41caeba6c3ef6ced39d86789', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (index.h(index.Host, { key: '47b726ba113bc1a9f6fc1939a6337ee5a0741e1b', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'c429d933fc8433d42ab46875decd514855cd1e83', class: "description" }, index.h("h2", { key: '3211b544b609eb41c0ff234e60fe1d69c7f5d046' }, "Input Standard"), index.h("p", { key: '4821da07bb22b485566be6edbdfed274dbb5e484' }, "Height of input should be ", index.h("code", { key: '7b9eece83abad5736b3e20008dcd6180be00a0cc' }, "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: '8b7a0f3eb0597bf481193e136878bb9b06e57c4a', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '2f375af36f6b222583aef2c127118684200382f9', name: "looks" }, index.h("span", { key: 'f17cd19cd1c65db729df20cebfe3e29aebdb7f85', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '7102fb6e60c26f369fc333edd177dab299693644', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: 'ea5bd1dac640c8c98d5f2f6673593dfba7ed7d97', name: "color" }, index.h("span", { key: '7980f0882dc8dc731cabab158c7e8e71323bcb09', 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: 'de3487a00564e32a27aa17e098dda3efb9847fd8', slot: "end" })), index.h("smoothly-input-checkbox", { key: '01bcc9cc34538608689edbd72a39ca628b8c0b90', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: 'd0a37ae43bf75b530c245c68e20bb358a651405c', name: "showLabel", checked: this.options.showLabel }, "Show Label"), index.h("smoothly-input-checkbox", { key: '78c63416b6bb19948677fb79b0505c56150e7289', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), index.h("smoothly-input-range", { key: 'd2cb1e9c0507d7adcd680c310bc0fa55092d8789', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), index.h("div", { key: 'd3b4fd9eee3d70175d1225534e87d1f98d5ecf23', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '214c05ffa1d43a097fd5598249e71115cc90c7d1', class: "width" }, "100%"), index.h("div", { key: '7445c862f785d4ca8e0df3c18fc48f1ab03c79cc', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: 'c1d5a3adf710d94a7386d429e4089cb0b0e35b47', 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: '3ae870f1a680a08ebcba67b1e566b7754606914c' }, "Text"), index.h("smoothly-input-clear", { key: '05da5780e131498e29b56b68f5fda946cc572873', slot: "end" })), index.h("div", { key: 'c9507311ebbd91b05617354ece57e32c09412243', class: "height" }), index.h("smoothly-input-select", { key: '8ac37d8cb08d5147ee60cca2e98980a14de2c517', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: 'dd2870e1536d0671798fe2cf268d698c5feff5d1', slot: "label" }, "Select"), index.h("smoothly-item", { key: '54d23e9b1e368c7a740481baa4247ec77c029f30', value: "1" }, "January"), index.h("smoothly-item", { key: '927f087be317bf0f2b166712653b92b4b451dddc', value: "2" }, "February"), index.h("smoothly-item", { key: '9fd277a3f60e6e6cc52566797e4056be56b0e04d', value: "3" }, "March"), index.h("smoothly-item", { key: 'f10d69e96a9449036ef957a01baf09f32d08cc4d', value: "4" }, "April"), index.h("smoothly-item", { key: '151b21bd845de134bbf5396d1c29bd4a9b240310', value: "5" }, "May"), index.h("smoothly-item", { key: '2caa06bdd8d6ce4626e97530463a2ceeef078410', value: "6" }, "June"), index.h("smoothly-item", { key: 'b3bb56d7acfe778609d91e9baf72ea395e9ab89d', value: "7" }, "July"), index.h("smoothly-item", { key: '57778be76f481702639d4fa57d46ce4e5adee6ca', value: "8" }, "August"), index.h("smoothly-item", { key: '16e4109e3c570a2c32b09a3847e64da5d884c561', value: "9" }, "September"), index.h("smoothly-item", { key: 'bebc7d0128740166e9b949c4f6802747403ed540', value: "10" }, "October"), index.h("smoothly-item", { key: '6eff62b76c73599ab9aa9122cb22091e0736320e', value: "11" }, "November"), index.h("smoothly-item", { key: 'bb6159a94027e46dcb5d6b7996c2a3b86a59cda0', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '39c2a60887d89d16ee67acda33a7278be288f6ec', slot: "end" })), index.h("div", { key: '18b0a4eede115170b32c0a120418c33c7c0a4a01', class: "height" }), index.h("smoothly-input-checkbox", { key: '7b6eb4a3ddcf38cd8164515b9487dabecb2cb888', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '7f5fcf95e74535cd4c8622e3dbfb567a9cf9539a', class: "height" }), index.h("smoothly-input-radio", { key: '31be89feab2c450d187bf7101938b237393e4b12', 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: 'd5bdee2736aa83a4a60fffe4dc4f8389d263dbab', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '8a18eb04c6da4a282f772a84c3ff9562bb0a28f7', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'e9e8704f31d673dd6e4ea48386b772b6cca07302', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'cb1994125c6a7c375c95d399585a46ac3dcd6be5', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '39738fd1d1d4e93081fe679ddb5c374e029c0f01', slot: "end" })), index.h("div", { key: '252ccaa1ea0e51f8226e63ae2d7f21e7156176b5', class: "height" }), index.h("smoothly-input-file", { key: 'faa0b5950dd568dfa3c5b2ebab89c21b30247cd4', 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: '0b9968f955b82f53ea92ae3621173ca0f0a164ea', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: 'ea108267cf7ca3209731a39426d0fc944220384e', slot: "end" })), index.h("div", { key: 'd543999aadc649fc4bd83bb1157d96693766d974', class: "height" }), index.h("smoothly-input-range", { key: '8717c01cf5a8dbb452781cab15845c6d4eeb8e90', 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: 'def04faa521043b8c35ae9727d419e87eb8ca425', slot: "end" })), index.h("div", { key: '71f44309b1f61848bd786a17fe160c90a9e6a442', class: "height" }), index.h("smoothly-input-color", { key: 'b176f693f1c259ca42f9251a6409f0aefd315121', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '37bfab45f78dc75b94890fab9adfaaed0ad80dbe' }, "Color"), index.h("smoothly-input-clear", { key: '47ea6ea8da52dcaf79bde93d8b7918d5261284e9', slot: "end" })), index.h("div", { key: '27026781cce6638bb300be29b7ad685f86cfd4b6', class: "height" }), index.h("smoothly-input-date", { key: '4091de15bcb914fbde33b04af065b865b29759f6', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'e504eb72a2cd64972ed3ed2b8ce6b61e3747ece8' }, "Date"), index.h("smoothly-input-clear", { key: 'dd4d203425dba7c6f4915c2ea9c94a802c19f3d9', slot: "end" })), index.h("div", { key: 'dafd7d8ba6c3110c8a05e972bd13d016b5c9f13a', class: "height" }), index.h("smoothly-input-date-range", { key: 'd0d82374c75edc18dfe14c689a4fec49eb73e456', 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: '050227f950e23cb4bb8c0b2cdca392c94a418dac' }, "Date Range"), index.h("smoothly-input-clear", { key: '6d4992842629755749d81375f54f2bd6d41f0348', slot: "end" })), index.h("div", { key: '483d512b770279fa68b71e30c028e0304b31bad5', class: "height" }), index.h("div", { key: 'e47cf778f5146224ba2308bb0e945ba3b66daead', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     get element() { return index.getElement(this); }
 };
@@ -9742,7 +9762,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'fee52dbd225570ae931ca32223cb12965b0846bf', title: this.toolTip }, index.h("smoothly-button", { key: '88bce4f9c7742f238aa8c8903314a3c6dc87e4d5', 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: 'c24c38aae63457205b17398b729679ffd3b93181' }), index.h("smoothly-icon", { key: 'acca80e7e779c7264eaa7322ff7b72d070c7c501', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '4a7251d30dc56d103cce6f4c646e87c1f9dedb2f', title: this.toolTip }, index.h("smoothly-button", { key: '10187eef09463ed960cd9fab4a224c603a3f2ac7', 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: '31a06bf95969d56a3d5d4a2214580ffa1a5a054f' }), index.h("smoothly-icon", { key: 'ae6116c6f7ac25efb5a511d14816b489bee3dc1c', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
@@ -9856,7 +9876,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '288b2077ffa65397ba341daa1533e44014319189', 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: 'c8133835f337bef5ca3e7f9f6ffc70e8cf70b174' }, index.h("slot", { key: 'd8f33183560b5daddca72f488a1c7c81ef726ee0', name: "label" })), index.h("div", { key: '8a69b9ffa47986a7e45e0cb6e60e90ed135822bb', class: "input" }, index.h("smoothly-button", { key: 'fadacb2595c55c3b9d141feb7d98314ded5d9b73', type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: 'a9f2fb2c00ea27942f1ab28abc5eadc3c4c64b1c', name: "button" })), index.h("span", { key: 'd0ff058cedb56cc852da34f99a5f584a6c84138d' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: 'd38bbd185c57edcd7404f0d60a0e2d7345472984', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '89b21f16d915d44107ff627fe50665f302a75ed2', name: "document-attach-outline" })), index.h("input", { key: 'f5d3200a3bf9ea2ca475c3c7a2e9f83037869b82', 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: 'accf1ed5b43e5b5b388a139241491583eaa1c213', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '3727144da66f326890a3605fea24fcfb1300c6bc', name: "end" }))));
+        return (index.h(index.Host, { key: '1c91c11701f45734b2d5685bd0c6a543bdbb6fb7', 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: 'f8ab23e372eabeac02168549ceb03f7a9eb5cbc4' }, index.h("slot", { key: '6eba1aa1e14556c55d647c0afdfc8382f4322994', name: "label" })), index.h("div", { key: '13e73b1c5b9d7e5cd4655237619a94929a2182fd', class: "input" }, index.h("smoothly-button", { key: '6a9f5ae011900e5b80a8106d5ccba3931515f382', type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '582510137aca819dc05ccd6b75fa1168a1eefa47', name: "button" })), index.h("span", { key: 'f91cacc327e3643948633cde61974a7fa433c7bb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '03b0f3af81ff691b034231a7b9bb159e97d60a43', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '8bf1766c10bad401e01a4fa1c7dfbc2aa12af1c4', name: "document-attach-outline" })), index.h("input", { key: '8884488c624c70a0ff57f030b43f2acdd11d2ea4', 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: '63c67251fd574e731d7b4eb926cd0f92e5bfeafb', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '6c880201bcac2587a0e4432015ee9202cf2767a1', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9977,9 +9997,9 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '87aeaf082d1ab71b40d219ab3b7cc982e687f03c' }, index.h("smoothly-icon", { key: '436d542d8b742e88658daba92eabe8d50e7f939d', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index.h(index.Host, { key: '31a5375f473313057fdee7b8d7b87594ac238550' }, index.h("smoothly-icon", { key: '78271c79baeaa0892cff0ef62be3eddc88574d3c', 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: 'bcf7cb766c52e194e7cad69bacfa508d7f1f141f', 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: '6d95cf41e4e4716debe223a1f4bfb4e1fd94a113', slot: "label" }, index.h("slot", { key: 'd6e22ec1e5c93e91f91fc98ec4c9cf85616e0370', 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: 'b984eec0ad9e4f888a55a6c24ace25d09ce64c3f', 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: 'afc3a95ef72f0ba55c1e3c8ec3502abcbc8156e4', slot: "label" }, index.h("slot", { key: 'a5c25c60c73f2d97fb1b4942025bbc9275b37522', 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: '1f85660bf59645f6b1549b5495bad915c8a91bb4', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: 'ae36fb2b6d31d627f29ff20d5a1cf71ab5648626', 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: '14b76d20799c3ffdeee0bd8abc2c17de24a50205', slot: "label" }, index.h("slot", { key: '7a02aaaa7c03963d2a4266fc5f20d595453ff938', 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: 'd7203269b2e6be8b45120bc9315fcba8a207fe32', 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: 'b73693770456df31f3eedce66b344775ecc9cb68', slot: "label" }, index.h("slot", { key: '649381e8437b40b805bcd089b06264d83c078629', 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: '2d5f6e00759a55b9ab596c45e97421081e83dc55', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
@@ -10002,7 +10022,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index.h(index.Host, { key: 'd72e3b611f67d64b015c72481626b3fce6714534' }, index.h("h2", { key: '7ed1febb46f3f7d7e8abbb3c238aed31969cfa26' }, "State demo on smoothly-input"), index.h("p", { key: 'b1e1b143c6ea9bd954ddc2920f9769aa5b851d0a' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: 'c177f5121a66966e2dd85533c5e53af3003f5442' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: '7c4c34d4af3e582b9bf7bbee1b26a42c3ee36bd9', 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: '18cc575d7a0350a56e28f5ac47222f91f7bf18d3', type: "price", currency: this.currency }, "price")));
+        return (index.h(index.Host, { key: 'bad11b3c20ae711a30e32dbe00b0fd9a4fe2e233' }, index.h("h2", { key: '1f0b35ab38d25f7cf85e5d88a94a1155bd9958c0' }, "State demo on smoothly-input"), index.h("p", { key: 'b2f1472ebca834019523652fba825675cbd79c08' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '0b91d3d13dd721e2cb1f0e597eceef6df7b10664' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: 'cfcbe6cb9e757806316b0452e49c621483136391', 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: '697ee9173e9673c9208193a2becdc7d688fa9e4e', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = SmoothlyInputPriceDemoStyle0;
@@ -10111,7 +10131,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: '689c9e90b8b92ee8d4991dfbc564d9b7fbfbf85d', class: "floating-label" }, index.h("slot", { key: '56156f90edbf2d0a8ae45b1a8f263ae6c365e2f4', name: "start" }), index.h("div", { key: '4eec0a7a8fa2a7e658945e1e9932e6a15ecacec6' }, index.h("slot", { key: 'e9c5188cca82f0273c682cea0236e4dea59ecb21', name: "label" }), index.h("div", { key: '0cee52bfa754c92c48fda0661c1d245ce1f084cc', class: "options" }, index.h("slot", { key: '54e2d1322a02c0353e56fe1983112bea45d5e9c2' }))), index.h("slot", { key: '2db4ccf3a8ae062e9b3db7623948fd253d70a234', name: "end" })));
+        return (index.h(index.Host, { key: '84feefdf8a3f79ac031f8f4e12af4eaea6d3b464', class: "floating-label" }, index.h("slot", { key: '5394a95744be929c8a0d5bbce9e09abc53edd8d9', name: "start" }), index.h("div", { key: '34f00d17365ec06c256338f759e24e6d13592997' }, index.h("slot", { key: '528b489815eb69473529b683965fc79ce80aaad4', name: "label" }), index.h("div", { key: '42dc1e97f591cef1ba66d1c16e0843c9f6b21c75', class: "options" }, index.h("slot", { key: '9db82fe518bd4790cf7cb95e2dfd083ef8e67795' }))), index.h("slot", { key: '67ede49d41d2e031da5387f819058031e886e1d1', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10142,7 +10162,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: '3e47c89d1807a0cf1f6a08134bbd19459f2bb639', onClick: () => this.inputHandler() }, index.h("input", { key: '521ba624308bd4915efe04cf068c4e963cf9465b', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: 'f5c4dfee84a1526ff7d8bd89af9def333cddfc15', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: 'bcae74b96adea1d89e4a05ed81071685e3baa17c' }, index.h("slot", { key: '2b1a11e777cd4cb4e12791fca139483372a0eb11' }))));
+        return (index.h(index.Host, { key: 'e7cf32e18aaa3c68ed5f10ddd837d00c57ce314c', onClick: () => this.inputHandler() }, index.h("input", { key: '48daeb5ece6f22f24d7ba0d21d6ab1d5ffe050ef', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '981a3f17ce966be3bd90a3030d5eed18ed1ae087', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '3c3e288cbd8496bd4c2a62b83865eae8e39019a6' }, index.h("slot", { key: 'c660628b0873ef7041a06d90884f1bd88046dfed' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10246,17 +10266,17 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '8e0eb342fc72a753168591ca0092411e3c768d1b', class: {
+        return (index.h(index.Host, { key: '54110def7ede46a497e9f89badfa411f2101f9f1', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: '36fb0a4aa54446fb1dbf844904a65e260b88bd97', name: "start" }), index.h("div", { key: '0b18d96003a26506de55d92dbf34925662f9240e' }, index.h("label", { key: 'd557f7699dc56e21b15b2a587251618e02d61d31', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '31b6ffd3d358aba34d8cee59b09ab224dea40a66', 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: '2a5b1e0011a44f1d61965cf7d5c40fb65810d70e', name: "start" }), index.h("div", { key: '8d6c07448362f9b14c0fbc5e6d12f14ad7900d18' }, index.h("label", { key: '1f0c9181fcb31bb9481e2831d97807824d0fda3b', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '5cfa5a192ec52e3b1542c8b902fc0708f9f7f638', 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: '1d33c45e2fa7c5eb09d0444f14a75edaa55b45c9', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: 'b5130bc1d447e6e63dec46f4794fbb9744fb71a3', 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: 'ba0ffa533194066830cbd8644dc56407ca8e98f6', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '89a2f41c2e5b11ad7ca84be16fce678348b05684', 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: 'f0b71e8aed12a85c09faa8a762dc50f9bde43c74', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'bfd93b7c817a5dc90da42bd3e12e0f819edbf0e9', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'bdb12803d40ceb8205d3f34516e9cc7d5f0c55b7', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'f605bf487c677804bbd6b1da7329fdc10a8f24bd', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10270,7 +10290,7 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4b7bd764144e4626f8ad5d1653e6a92d311ecc77' }, index.h("h2", { key: 'c1f5b56091543a74d55a3f7788bd314c1508bf15' }, "Range"), index.h("h3", { key: '4db7efd42f26ff2766dc27ddf170b9f4df7b0dd6' }, "Phone Number"), index.h("smoothly-input-range", { key: '0211d211ccef2c8a898da081113b1e1cc64684c4', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '7bfd742cec5e965e9ba49c08329660eee10737a7' }, "Stars out of ten"), index.h("smoothly-input-range", { key: 'f633e5363a16851dfa7b3eb1b2bee4efba94b401', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '6a8a82b46638e1c20dbe58d1abec5c4eda73a0d8' }, "Percent"), index.h("smoothly-input-range", { key: 'ed0ff0c0252d54dafa96909d5c14eda7bd4de6d3', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '62389e21990113d6c0d8e66fb84eed119f4560da' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '46cdcd2464e915da60d1732af2846c624b63bf5f', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '5e3d423cfbdc0560bcde3f9ae5e286d6bbd35e66', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: 'b079a72b8cfbf90fbb36681dda5ddce4a02d30eb', size: "icon", slot: "end" }))));
+        return (index.h(index.Host, { key: 'c2c0307b8cfb3649b3829935ceac7a239c0a3035' }, index.h("h2", { key: '3dc59277ebd70ee6d2845111fac8cc705ae274af' }, "Range"), index.h("h3", { key: '50b58f50d58c00c86f0746ce5c05b1f57b57efa2' }, "Phone Number"), index.h("smoothly-input-range", { key: 'ae8d9c8125beb1790cbd642d9b25ed202635c7a2', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '7b8e733f33aa344bdd07be2b23cb566485a4d13a' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '55c63696b90405074cabee9694379befd5aa9310', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '27f0e64c163354a5c7669100e1a074ae2d9a141d' }, "Percent"), index.h("smoothly-input-range", { key: '2035cfb5de1eeaf6edc7086417dc00c9dee8c339', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '04fab376af7923769f62db4246062508c1ef1194' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '145a4d0fa6fa5903f5690cb25554af63a28edcef', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '2a3ff0a0b93638f49fb59015acc37e30f22f934f', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '33cfa613f632309014a96dfd2a678bf9f71b2b67', size: "icon", slot: "end" }))));
     }
 };
 
@@ -10316,7 +10336,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '843d41dca12cf0a78e1f7517aa0459ab55960102', title: this.tooltip }, index.h("smoothly-button", { key: '602f17162783647357bd4d953af33ec8f30b487d', 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: '247ee2ab9e7201df8dee0a7e49a6dba5449b7379' }), index.h("smoothly-icon", { key: '59ec2bc7027454762b73ae5d96261ffb0b74f9bf', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '8542dba163fb848653f31f2559e52aac50826c40', title: this.tooltip }, index.h("smoothly-button", { key: 'dcac9b394999e1751be7786f4eb7b3033ce2d5a7', 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: '5756f37b4fe0cae8e0f6e0e7d0776cae56f2f002' }), index.h("smoothly-icon", { key: 'aecb2d327ddf0b0441c48660c9b061fa338fdd3b', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10623,14 +10643,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: 'e4b6abdb7d526058e450a76e50fc71bb88d9c896', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: 'b4557b6505b69ebead82c85742e537afebcf26f9', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '8830593428e77e82cf09bd40dcde784bd5be7e13', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: '5483ec7ed3cf785cc73ede8be613eb850bb34f03', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: 'b959efe7eef529632f08b4275070c009bf21168b', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: '7990dcb2104e71ff4528d0e1201b2fd9d8c38fa8', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '83d55093b9121b1133e8adf34afcdf0128ea3b0c', name: "label" }), index.h("div", { key: 'f317ba7f6d5226de3483940f96b9afe18a8dea90', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '0970e9c94a82dcc7c5f9c0329d4ab6e3ffe6ea74', class: "search-preview" }, index.h("smoothly-icon", { key: '87b541e8e8a305b71ed43e8885956b6676c0700a', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'f589d0372b7088868cd88a842c9a01984813f480', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: '77b737ac05a0d8b9d3fe8db6306fe81f4ee97b39', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '8f549454e69eb794d47fa643cbc4bad2fc68857e', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'ddd39f505092f309a5d5eb56926df33ddc232935', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: '8df456070caa226409275ac6d50bb90b829c50ee', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '9699f72860c346e361b88817404d4a22edffac5c', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: '4f64b8e04265eb823850429fe8e3ba542afb7aa1', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: 'b36a00495be201be9d1ea10845e913e16e43473b', name: "label" }), index.h("div", { key: '19f27845b4447ef076e3af20cf468c26e58abdb2', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '233c2685b69af4035e5f4c032749739bcef5701c', class: "search-preview" }, index.h("smoothly-icon", { key: '764c0b65b6514ba132e10555a8f657e054b4242a', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'aaf77a87b98051aa1afd3cd451656cba9ce2ba07', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: 'a4df2264444a136f29f95d8e34249d1f9a6f2995', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: 'b8e6dbb740957e94f050717281891d4f72475261', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: 'e1b580a33570c5952219b5b5e58ec8b0c59822eb' }), this.addedItems)));
+            } })))), index.h("slot", { key: '7082316f2573c94e9e05ea2407624b716e93619a' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10679,7 +10699,7 @@ const SmoothlyInputSubmit = class {
                     this.disabled =
                         !this.delete &&
                             (p.readonly ||
-                                ("validator" in p && p.validator instanceof TimeZone.Type && !((_a = p.validator) === null || _a === void 0 ? void 0 : _a.is(p.value))) ||
+                                ("validator" in p && p.validator instanceof TimeZone.Type && !((_a = p.validator) === null || _a === void 0 ? void 0 : _a.is(Scrollable.Data.convertArrays(p.value)))) ||
                                 !p.changed);
                 });
             }
@@ -10691,7 +10711,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '33df276e2d84fe4f5919d32837ba35239c8ac8e2', 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: 'f659d9fcff6418ed79a26b588a0b2392a85affa2', 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;
@@ -10732,7 +10752,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (index.h(index.Host, { key: 'c76d8f4c144db4955c4b2e17c34cabdc8e512b8f', tabIndex: -1 }, index.h("slot", { key: 'f9577b32c4a9c43dfe7faee61c0e1773d361411e' })));
+        return (index.h(index.Host, { key: '51866154258a830cd316996c2995632892c68034', tabIndex: -1 }, index.h("slot", { key: 'd09f55dd228895f53f8ba4231229ea98aab10b48' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10753,9 +10773,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'ac3c8fb368890c916297691f2918bf892622b72b', title: this.description, style: {
+        return (index.h(index.Host, { key: '0fc0990f6f3a09be9ba3d964867e6e964725499f', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index.h("slot", { key: '2679b0388925d2a6ba047a22389e2eab772ea2ff' })));
+            } }, index.h("slot", { key: '6e1b85b84645891087866414a70a9f91aa90a8db' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
@@ -10774,7 +10794,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index.h(index.Host, { key: '6d3776a5b82bcd822ce9e144d567125b753981d8' }, index.h("slot", { key: 'cf51537136436b81f1998409b95cf2eef163ad34', name: "before" }), index.h("smoothly-load-more", { key: '3a3ab2f1da07dfee6852171e9d6c247654960f94', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '790b1f9ee1cabcfb3ef99003594cd092228d8e0c' })));
+        return (index.h(index.Host, { key: 'de115abe3101a1fa5d32e3ae3cef919afca90ea4' }, index.h("slot", { key: '61aa5f412fbbeca1c1b2f9bafde7d87bca0a94b9', name: "before" }), index.h("smoothly-load-more", { key: '6c3bd20f8f1b0d2b8900dcbb640f33dd76c7452a', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: 'f0b6bd381a12f5270797494a6eb414c38763e5fd' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -10818,7 +10838,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: '59cf4fcf14af76bc71f1952fae2f114bcdb4d27f' });
+        return index.h(index.Host, { key: '7169adeca2956b6f0c85e3a7ceab410a3dddd7f5' });
     }
     get element() { return index.getElement(this); }
 };
@@ -10838,7 +10858,7 @@ const SmoothlyModal = class {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '4f083b0fe1cbaba4d88f7f9ad3700acac66eac06', role: "alertdialog" }, index.h("div", { key: 'b51b1ea3960ad12fedcef36c50634c90d6a58b2e', class: "modal" }, index.h("div", { key: 'b94aaab7280074b96b72042b98382368502403f8', class: "header" }, index.h("slot", { key: 'd6d77fad8c51c9c513efa5c5c8c5c642bba42ee3', name: "header" }), this.closable && index.h("smoothly-icon", { key: '6e15ca23cab372e79e1acf61284594f321a62c52', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: '47c76eb20e1fbdd1affb947b3595e6990eca8be0' }), index.h("div", { key: '362ce510142d9ea9f4ebbdaaed6ecd5e93f64014', class: "actions" }, index.h("slot", { key: '0161fc378928109de3628fbd66f84f84195bf8ee', name: "actions" })))));
+        return (index.h(index.Host, { key: '583eadffaf2e24575a5c1cc4e1fddd804b184dd5', role: "alertdialog" }, index.h("div", { key: 'ca8af6bb11f18895f1899db9facd795c061430c0', class: "modal" }, index.h("div", { key: 'bc66d69748c12e5707f7c601717d1f96309ee09d', class: "header" }, index.h("slot", { key: 'b41c4051fd74e25efc53334172724b91070a4359', name: "header" }), this.closable && index.h("smoothly-icon", { key: '138c5ba8fdcf1d1132d92c36299615ea1fda0f3a', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: '0ac2f594b68b53729724f8fc372b9a451d42b909' }), index.h("div", { key: '05b7d6ca01ee55b0e2a1afd34226505a0f9772c1', class: "actions" }, index.h("slot", { key: 'd3395b6b76ace8c9916b9d60e4208bd7a3e8d032', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -10854,7 +10874,7 @@ const SmoothlyNextDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c02089c742688f174ec52fe36dbd31c4164724e0' }, index.h("smoothly-next-demo-filler-row-demo", { key: '17a765c57ce5f695ce4848af02cef62f96a20b20' }), index.h("smoothly-next-demo-group", { key: 'bbd29637a8d453f5d71f792aa9594c4ba2898b03' }), index.h("smoothly-next-demo-colspan", { key: '96784e3394198498f251899a4aeabe26b9dfc84e' }), index.h("smoothly-next-demo-simple", { key: 'cba303bfea82a6941888767afb8e5e98edcff2cf' }), index.h("smoothly-next-demo-nested", { key: '409efbf7ff8afd23a6e9617cadcf09a15e3a833d' }), index.h("smoothly-next-table-demo-filtered", { key: 'aa8ec5efb0ed3a39bfbe635485f8a57afa523efd' })));
+        return (index.h(index.Host, { key: '60c3283a34f49ab6a4659a41c8eafc515f9c7fd3' }, index.h("smoothly-next-demo-filler-row-demo", { key: '77eaf9cf368e33ca06c60cb2b34f18448027f057' }), index.h("smoothly-next-demo-group", { key: 'b62f7ed677da7d68a0fbff87d484957ae4ea4085' }), index.h("smoothly-next-demo-colspan", { key: '2672c58491d55006de5eda3dc7bbea3b125671e3' }), index.h("smoothly-next-demo-simple", { key: 'b701d8f0a5524a35a62c48def77524b41a25cc4d' }), index.h("smoothly-next-demo-nested", { key: 'd259132a77f2a87de80cf994b3fa5ddec4563ee6' }), index.h("smoothly-next-table-demo-filtered", { key: '3a8e47d65dd5c7a6df239724202eac698c1db513' })));
     }
 };
 SmoothlyNextDemo.style = SmoothlyNextDemoStyle0;
@@ -10867,7 +10887,7 @@ const SmoothlyNextDemoColspan = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '777e6e6ec2384e364382eae9572b9247e725043d' }, index.h("smoothly-next-table", { key: '036c24ce0a5229f74f19b308649fd95cf163bfb8', columns: 3 }, index.h("smoothly-next-table-head", { key: '563fa618dc33d60c8934841363b4af960c9f0d0a' }, index.h("smoothly-next-table-row", { key: '8798c330e07d65950f10fa3a8c588d42180c4819' }, index.h("smoothly-next-table-cell", { key: '16b367fd18c0bcc09420253702d6253872999fb9' }, "Date"), index.h("smoothly-next-table-cell", { key: '8d138efb01d9e5fd135cb1a10b0746f3fe24184f' }, "Skip"), index.h("smoothly-next-table-cell", { key: 'a1badc884d8b7668b4b0884c667bd84a343374a7' }, "Total"))), index.h("smoothly-next-table-body", { key: '4632abae2dbd88561ee829603c417a72f7d2f327' }, index.h("smoothly-next-table-row", { key: '364b742acf8a99af7c34a591c94a3430117034bd' }, index.h("smoothly-next-table-cell", { key: '96de6500a7742aaf792a3c6bdc98e2255c514684', span: 2 }, index.h("smoothly-display", { key: '26a5d771614064584fd711af0978f79e1272a55b', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: '91ab9d0572b8118490d7f04260f4e89cb401bfad' }, index.h("smoothly-display", { key: '9fbb484e98193aba96982bfae6bb92bcaf8d3138', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '21981afdf53f2d95e77e8620a348387e03f00e63' }, index.h("smoothly-next-table-expandable-cell", { key: '20261ed10356edcd938cc57984d5d4af2e866b2f', span: 2 }, index.h("smoothly-display", { key: '69b32ed7d90f556c0e01d806ee336e9e4615c46d', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '544dffd87f8d204a5ea18b5a61ce09f3319716c5', 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: 'de63e6eab2fd302a29a67e831c931e12324057fa' }, index.h("smoothly-display", { key: 'f84c5c0aa2be50235759227f511b0fddc5e6d4b3', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: 'c0a2ad47e2685b2942cfd7d6fa60c6a6bcf18795', 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: '94895bb4c63c6b76e5cb586f44a721485cedd4ac' }, index.h("smoothly-next-table-cell", { key: 'a21d3c031c9e640da87e2a9c7b5d1833ad55e217' }, index.h("smoothly-display", { key: 'dbb5bdd71fdcb7aca808ae304659109beeb74632', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '8c05b16de4fec87dbc621f8b735ff9bc571fd6ea' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '32d00e411b23982167fc9f65f05e8e154d583786' }, index.h("smoothly-display", { key: '31bc40bf40d353eff4468220d0407f9795ecb82b', type: "price", value: 320, currency: "EUR" })))))));
+        return (index.h(index.Host, { key: 'df964ef528038285bbb443ee142a458d30a90034' }, index.h("smoothly-next-table", { key: 'e77a70224fa439572abbdd63cec975210e99cdd1', columns: 3 }, index.h("smoothly-next-table-head", { key: '6e51cf68461146e3acdf7003f16763039d9dda86' }, index.h("smoothly-next-table-row", { key: 'ba54cfc7a0a443491b67660c42cc99006fea80a9' }, index.h("smoothly-next-table-cell", { key: '985a23855b1b57c117370e39f66c0d4ee8f1728e' }, "Date"), index.h("smoothly-next-table-cell", { key: 'db397be5b860dfb375116a703129c06aff459c88' }, "Skip"), index.h("smoothly-next-table-cell", { key: '4866035423aeb9be54ecdf4224824736da589e60' }, "Total"))), index.h("smoothly-next-table-body", { key: '3895a9ce7e1e99096e94047986bbaea5e97f4c6b' }, index.h("smoothly-next-table-row", { key: '8e87d59e6ad7375df967a8d8b740cc8239fb417f' }, index.h("smoothly-next-table-cell", { key: '9e5550ddc219055bc3aae5c9c929dfe6933f5530', span: 2 }, index.h("smoothly-display", { key: '8fc193c4898ff3ab664b6b509b4deab457c99a0a', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: '56df306600fad13929a4f08d357c62abe0b1fac3' }, index.h("smoothly-display", { key: '152b90ed8c85136b20ec651d763c154ac8318a0f', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '3f1f972cc513a2b0b82b139ed01875d8d101deec' }, index.h("smoothly-next-table-expandable-cell", { key: '297d2e5331445962a77f669d840274d40ab1d200', span: 2 }, index.h("smoothly-display", { key: '079f748f7c4809c30080862a03f27c9e1daf4fba', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '599db2779c2d88385fff227c7bcc6b3fd508cb9c', 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: '9c92e47338583d58c16374a429fac3d2aedcd2bb' }, index.h("smoothly-display", { key: 'c072fec08a530cf960f42ad03e6f7c67ef305ef8', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: 'ef79407b764bedefb609a539cbab40360c0a7908', 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: '947e544357fc6e210b93ee003e321c73f3c82333' }, index.h("smoothly-next-table-cell", { key: '090db5b1929506fe82979753d286cfa8cbd3cb4b' }, index.h("smoothly-display", { key: '8bce5c18a3de593664aebedb6f38d6d362622fa8', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '63d657c27f8ee3eddb380316d4b390e2b52e638e' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '3bf06598be8daecb99b231f5112fc5efc16b5931' }, index.h("smoothly-display", { key: '73c7ee768c664d8ad24a6683cfdc063482865305', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyNextDemoColspan.style = SmoothlyNextDemoColspanStyle0;
@@ -10886,7 +10906,7 @@ const SmoothlyNextDemoFillerRowDemo = class {
         }, 3000);
     }
     render() {
-        return (index.h(index.Host, { key: '53ff4847b62b85a71392df1b72b8b151d9313644' }, index.h("smoothly-display", { key: '435e2153c6be1fc0da9d879d66455ce75c2338fa', type: "text", value: "Filler row" }), index.h("smoothly-next-table", { key: '8fba6fdf0d46a718357e44109710f5d367013f55', color: "primary", columns: 4 }, index.h("smoothly-next-table-head", { key: 'b5fc5b33b7006c4492178c884dad42127db894e2' }, index.h("smoothly-next-table-row", { key: '5937d97e50292c63216907d675d96f5f6dfb5925' }, index.h("smoothly-next-table-cell", { key: '690c645b8be368f74afadd3ae27f8dfc618133b8' }, "Breed"), index.h("smoothly-next-table-cell", { key: '4f0e887feeee7b9d67735d2615dc6a1c11735711' }, "Country"), index.h("smoothly-next-table-cell", { key: 'c34380ed3e26f66fe706e4b17af626c8f18624e5' }, "Coat"), index.h("smoothly-next-table-cell", { key: '2f132bf19caf889169fac4755d4010df6df3079b' }, "Origin"))), index.h("smoothly-next-table-body", { key: '7c00c4b0f34dd7e89d71ba6e15df7e22ffe230de' }, this.cats === undefined ? (index.h("smoothly-next-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-next-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", null, a.breed), index.h("smoothly-next-table-cell", null, a.country), index.h("smoothly-next-table-cell", null, a.coat), index.h("smoothly-next-table-cell", null, a.origin)))))))));
+        return (index.h(index.Host, { key: 'c1da7082635613c6a9b96c62a18d2f8fe931c16d' }, index.h("smoothly-display", { key: 'f268b945e214f4e6bedadfc8760099c24f1153f8', type: "text", value: "Filler row" }), index.h("smoothly-next-table", { key: '503113478f8567b748215c8c02ce09013252d5f9', color: "primary", columns: 4 }, index.h("smoothly-next-table-head", { key: 'e3f303b449bf0f456887269cb81d8ee067bdc5df' }, index.h("smoothly-next-table-row", { key: 'e16a60bd48e8b2bd43b10d339bb6b97dd514ae3c' }, index.h("smoothly-next-table-cell", { key: 'b28228816e03b8bb8cd1f2fc14cebd4fbe6f1d08' }, "Breed"), index.h("smoothly-next-table-cell", { key: 'c6b3f0030b283b4ad58dff2abe50f59ae5315893' }, "Country"), index.h("smoothly-next-table-cell", { key: '02ccdd4d8b246affde08d0b4e23f375e0911462a' }, "Coat"), index.h("smoothly-next-table-cell", { key: 'd3e2f2581b66cf3af1d477ec54635a562f6a61c5' }, "Origin"))), index.h("smoothly-next-table-body", { key: '1e01764e4db08a222999559d775aa14fee1f5d4f' }, this.cats === undefined ? (index.h("smoothly-next-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-next-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", null, a.breed), index.h("smoothly-next-table-cell", null, a.country), index.h("smoothly-next-table-cell", null, a.coat), index.h("smoothly-next-table-cell", null, a.origin)))))))));
     }
 };
 SmoothlyNextDemoFillerRowDemo.style = SmoothlyNextDemoFillerRowDemoStyle0;
@@ -10899,7 +10919,7 @@ const SmoothlyNextDemoGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '70d2dd2dcbd5c5e3c2d588a366fa9b87863243d2' }, index.h("smoothly-display", { key: 'b0212092a6685c71aa718578dfb0ebd0a72e459a', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: '7f473deee404d56b49f2973910045c1e470fbaaa', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: 'cbb973bb0ffdea0e7410689028d62681061b7cff' }, index.h("smoothly-next-table-row", { key: 'd82759c2e9f780bb53e1e23ee90b177b5eb26abd' }, index.h("smoothly-next-table-cell", { key: 'd7957baaaf9efd8f7a767a54a242d2ce27687a3a' }, "Date"), index.h("smoothly-next-table-cell", { key: 'dfa1042e8d0e6db88c29c61aac4a1f4570a0a023' }, "Total"))), index.h("smoothly-next-table-body", { key: 'edc534b5d69c5655b083db908df120e2f10170cf' }, index.h("smoothly-next-table-row-group", { key: '909330ec7432261f56904717bfa721787a119955', align: true }, index.h("smoothly-display", { key: 'c1db511c75c24e69565d1cc05ef51731ba0fd81d', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '7a7fb0e36259c1adee7776da82b5ff378ff791d2', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: 'cdcbd3f6ce838ce60e8f5d42ead292ccc3729c2e' }, index.h("smoothly-next-table-cell", { key: '7d21a731cc1893ea63e13c50d3cf671fa2fe0011' }, index.h("smoothly-display", { key: '87befa0f97174f23ee9a474635cb818ed964e04e', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '01156a10b8824cc657db43f72756ae1709005561' }, index.h("smoothly-display", { key: '2d1fe31159297857c50c777f9a73f1851386d393', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '16124d2ed2617ca40d92aa880a9d21b1fa04cb45', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '0151b86701c1f3d32fe734babeba1de7af6dcc94' }, index.h("smoothly-next-table-cell", { key: 'a286c3dd314c6e93010dd498b8a1bcaec10b8460' }, index.h("smoothly-display", { key: '77994c252da71ce6bb57434dd7bb002147e73d36', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '22c9f0264a9051322bf8daf51149667a920078c8' }, index.h("smoothly-display", { key: 'b447f3fdc7af526aef677401cecd6de70fa22158', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '4cf39352b8436ecf13a308c3ec9415291cfbe95b', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: '8f53cbf117a984da9ceabdc9879fcc26144d1bfe' }, index.h("smoothly-next-table-cell", { key: '4db43eb57bf0d1e942ca5b7212a764f895661eef' }, index.h("smoothly-display", { key: 'dc473c385dc275aad4a0c744d634ee8e7704075c', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: 'dd6dc7a46f28460c12ba723a27decac0a4a43edb' }, index.h("smoothly-display", { key: '91d6f726fbf5be5ad7c265d5c559f2616862a7f8', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: '068aebe864fb40936257ead559556c777054c2d8' }, index.h("smoothly-display", { key: 'a22fe7a8fb41f36e87cd4cbb2401491c4b3209bf', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: 'b2c6b6f3e67458cd634f5e6c942255695217c01d', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '48da54388f3599d2a67f0111db9cd36e3ee76f08' }, index.h("smoothly-next-table-cell", { key: '6ec917d2b63a4156a2c60edecf342eb1e60e189a' }, index.h("smoothly-display", { key: '1ae142931e8e2c0c0321d4e7a420c63d30882445', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '60584cd04d673ae9ba0086276132cefad4f2c1cb' }, index.h("smoothly-display", { key: '9f6827b5d5740dd6952de3b49c881f00d8bea250', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '450d80c148d3d4170108db329a57408aeb8b5ce6', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '9d867450686277252dc6e8163fc930af3d3bea89' }, index.h("smoothly-next-table-cell", { key: 'f77354087f5f40385943800aed812c9fcec9e4e1' }, index.h("smoothly-display", { key: 'aff7023e5d7f26a13d2e308fdf3909da60c5e930', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'f7f85a4001f2672b22c439c53dfbf32feef0a2cc' }, index.h("smoothly-display", { key: 'a7186b8c6ed0dfe9c2981150906934db7e83fd66', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '3c0f4f2bf7c42b69c42edbeb57a2adc9ae25e866', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '4002ff000a0d2c847f6dbe422c866832d4065dfb' }, index.h("smoothly-display", { key: '93e46371ba6811635476f26e28b3bf89acd8bcc0', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: '3ec41149d5b823304c4f70efed1ce31d23fc8835' }, index.h("smoothly-next-table-cell", { key: '5d02a5f774401a901dfeeb59484e9c85b583ef04' }, index.h("smoothly-display", { key: 'c2de3b4d7471438b0d23042b32b6f7c82858e103', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '6a3f54460d53d8ca3e81a5cb2891989c91e5c57e' }, index.h("smoothly-display", { key: '57e1c12900f5bd907a99c6d399c1ddb52ccc37cf', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'e1d6b95a96d7c283c8b9687299507d6be883593b', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'c78d9e78fc51fc5203b4067e00009887a3d7fc26' }, index.h("smoothly-next-table-cell", { key: 'b19f7aa21fbf4ac62787bd441d79b0eeef54cc45' }, index.h("smoothly-display", { key: '3eecac5f48442242ede4d2217ffbea05c4398401', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '5a95a8cdf0a813728dc3c25e4429d5b30fa0c7aa' }, index.h("smoothly-display", { key: '8805f2d30d0c4dbf183a0abbb77f14369505b8a8', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'd713d8f746d2e5315cf2992e6c3c3467e535288d', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'aea80493eef7265c884af333b169bb3d1f214116' }, index.h("smoothly-display", { key: '3f06be72320a7cb91aef1e8a4723a16ec190f3c7', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '85cb6c9674e3d0a02a91cd5842475491b2a358f1' }, index.h("smoothly-next-table-cell", { key: '3a8c5fe7327c5464856ee4ad5eea01407848050b' }, index.h("smoothly-display", { key: '30ccbf188b381609343f2f5f5dd635188bb82329', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'f31e51f43fc1d9cc8b7cd2a3a4c537d0e59188d3' }, index.h("smoothly-display", { key: '63029e39d20e9f449ae21c68c15776a6e826c76c', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '68a410a5ddcbaa69829f1be2c92a999f916703b8', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'f38999ef55ff663e15bb019ad079b24975274018' }, index.h("smoothly-next-table-cell", { key: '2ac2cda43d4a854868b8202d0807dd7957ad498b' }, index.h("smoothly-display", { key: '77f896cd1ce8952d83f675f0660095f0a48ddb55', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '62b2b32643911ca751c6c046ad3c4d914a80fb81' }, index.h("smoothly-display", { key: '0251fe1a5db76897e9478eb71bc0a6661a8a5e91', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '96a553725e85ae7e35519d3e92457684e3392bd3', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '28c32734ef20147549515e4e971c21b0580e7f04' }, index.h("smoothly-next-table-row-group", { key: 'ff8ff694cfa4dd46dd6444e4e3386000a3e75c52' }, index.h("smoothly-display", { key: '46b0b94ebaa45a4ea0ce5b8f05034630f50f1685', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '22da3f0bbd80a500c30a5a7b759a3ea29671b702', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: 'b3583284edcbec4223471b37a832d16b75d65757' }, index.h("smoothly-next-table-row", { key: '3e84adad7a56dec216230d43db9b8c95deae1a5c' }, index.h("fake-cell-wrapper", { key: '8315b2592865a3397725d37e8b9a714fafb73e64' }, index.h("smoothly-next-table-cell", { key: '4cccdc6caf58746e577e6d058f5cbf0ee3d487b8' }, index.h("smoothly-display", { key: '5b6fc1ebd1416cca42f39f4f2dc980d67dde5d55', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'a08de0a127e624a6a1b8f0140aa19bf39bf19f60' }, index.h("smoothly-next-table-expandable-cell", { key: '08f4283c64872575241104dde960640747d7d52e' }, index.h("smoothly-display", { key: '8c6162749e8f8cdf5450539f359307292ff0c611', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '0b84599a4e9ea3711bd4347c5387387638c20135', 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: 'f60388cdb82d64b6b07337af5aa0e648309092e5' }, index.h("smoothly-next-table-expandable-row", { key: '5f1956aeacec9377d7ae6220c3952821d56e1766' }, index.h("fake-cell-wrapper", { key: '9ead9cd0c04025597d844e5c1b042913e3053ec6', class: "span-2" }, index.h("smoothly-next-table-cell", { key: '5bde0f35613a2464584f68c9bcf016553a7601a5', span: 2 }, index.h("smoothly-display", { key: 'ba8267d1fb2aebbb26e08c97a2d33e185f220fdd', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '3c4d275e604567ff5f149fdb560a6fd7a0a91e17', 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: 'b048b1c3281a00674c50ff995ad9d549cbe2c64d' }, index.h("smoothly-display", { key: '071513d6663b344a3be78067ed369e55654f0d85', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '593e1a857e77fd737cd1fab09459db2b77864a00', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index.h(index.Host, { key: '73e0d51a0e3941caa16b1283f7f5187faadf13ee' }, index.h("smoothly-display", { key: '9fd00526fbe6993eb98bed95c4e8133f3f504fcf', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: 'c6c937a3fa59c2160ae57bf5a9ef23ba722987dc', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '741787df74f06380286cf41f1184f035139d0382' }, index.h("smoothly-next-table-row", { key: '20f9b4b44711073c70949669cb68d0f501bdd3e2' }, index.h("smoothly-next-table-cell", { key: '3546f61d968e85d20b542ea5a92b81a8ce63d645' }, "Date"), index.h("smoothly-next-table-cell", { key: '40bed3b1560bca9dc819fcabc8d33488b7bea127' }, "Total"))), index.h("smoothly-next-table-body", { key: '8a540b22896eb43a08f7020aa8d56508e78ea12b' }, index.h("smoothly-next-table-row-group", { key: '101cf27ef3e9957b4c8254dd9d4f7d41fba2857a', align: true }, index.h("smoothly-display", { key: '9b1630b69a098adc01cc728fe82505c353f1a0e8', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '433febcf1be2636198111e2ff066d9b968c05cfc', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: '490e20cf154a4061ed1a657edbd96656113b102b' }, index.h("smoothly-next-table-cell", { key: 'a0d033cf6d284533ec446061240955d4659e1c65' }, index.h("smoothly-display", { key: 'f8ae356be115913eac2ed8f26a0e76855751a604', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '6881fa42948499ee14d986cd0cd5a368893e5f5d' }, index.h("smoothly-display", { key: 'b2a0fa9795870ae6479f095968f3402d50cfcf5c', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '43a981cb81cf85e3ab7c67ceed9d316a3003d5f3', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '568e724e4c95b267413e3dc7781e72750b633e11' }, index.h("smoothly-next-table-cell", { key: '6a3d8ba835df4fdd5076ef5a5907694f5811a6ca' }, index.h("smoothly-display", { key: '9b95129e71a0664e6689bd6dc857f4cb31cbb979', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'b37ed4086dbfe19631ec46be7e7b1da0859defb7' }, index.h("smoothly-display", { key: '56b504514e11cd5e6e1ceae622996b2027a7dcbf', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '1bc72a8145f2d9b93a99dce1e29ab0ead788487a', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: 'c2c9e92cc455b621889a6eb41e8cdc9687e5c620' }, index.h("smoothly-next-table-cell", { key: '5b5cb852a3ff871701f47866cc37f98c36aba26f' }, index.h("smoothly-display", { key: '0aae4cd0bac3cab1b22ad73de06bf696a333f8d7', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '1192d53740c70a16d01e1e2a8ec03c1d14d9e801' }, index.h("smoothly-display", { key: 'c13c4433a0ba620e16604fb47450727d4ba56e5c', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: '896fecd9312899190a2ecf4579c50073a31c8272' }, index.h("smoothly-display", { key: '1dbcff7150422fc2153a9816ec874dfba429d229', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '8af0f60fb62c097a55b1f14c1d9e02a598f139d9', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '5274bbc35439a4d52d970c77082f0d7d886789c0' }, index.h("smoothly-next-table-cell", { key: '18702a617d8766b19f79a1a2934533d7cf2632c0' }, index.h("smoothly-display", { key: '57f2d3ab2d7098d021c9db4631e9cc6b2d898c70', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'cdfa422283047bb1afe7fe0defd6b4901ac62747' }, index.h("smoothly-display", { key: '2cded0b74d7b9387f7b729b4c2946915bb0871ae', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '492dd23dbf0ce2c01d5c423d9b1b78a9fe237226', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '70607593f49e8087a182352ddb2699f8eb76b023' }, index.h("smoothly-next-table-cell", { key: '46f7e9ba5e04b3e17c1744c5dbd0b865bf4d6071' }, index.h("smoothly-display", { key: '2366d67e25f1280f7c84b56e05120a4a009e02ea', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'fe940858dc68bf595db43924f4089eeae2022b39' }, index.h("smoothly-display", { key: 'e95e4585fbc58e8414b4b8500cc0a399f89fce22', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'b20b19c014495f1fdc58a17bb9e4670b450dde24', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'e6372f8af60c8680990326d82e9bc8039d5d2f7b' }, index.h("smoothly-display", { key: '5918a19899072b4c412bb2d19ef3f204eeb51c24', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: 'a8dd0ade6e75b3332970b5c28dbea16ae872f020' }, index.h("smoothly-next-table-cell", { key: 'c543cc174821d05a7d4975486d6419bcfb48ae91' }, index.h("smoothly-display", { key: '733a433dd0ca61e10fea401f34665aeb6ed0989a', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'bc86fa504846290f49aa36dd765fbf39a883b657' }, index.h("smoothly-display", { key: '5e0e011989b9b1d75b004961abc9193c98426e1d', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '4eb921562f4dff18d46d375cd7a5186ffd1c18a5', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '821ec4169165ea4e4ffac5e0145cec0204fec6e3' }, index.h("smoothly-next-table-cell", { key: '482c9d096428c376fa64e47aa9ae271875b6f871' }, index.h("smoothly-display", { key: '267bade15f3e214d34342ad317195371c9ab1242', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '8bb4e5393b37855c6e00e9a3039017b0e469163f' }, index.h("smoothly-display", { key: '158af69d312342e2307d7be4efbf6d5238f1659b', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '7798eaf8ed6782e1707cfd5c9837f8142d733185', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '9799c11e2626f6a0f7e0e532b781824469d4b6f9' }, index.h("smoothly-display", { key: 'f0df60840283455397ad35e452e69abd7b57cb89', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: 'b4be64833f56b5d1f8c625d544d24fcba34c03eb' }, index.h("smoothly-next-table-cell", { key: '86c434c87a86ab6b595a22f3de7fa931a090e048' }, index.h("smoothly-display", { key: '819b0da7a8fca04342206ab782a7794726ee556b', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'cb73520ad44afc7502da06c4ec8f6af6adfc2aa0' }, index.h("smoothly-display", { key: '5e65f0ca6614d9831b357f120b8a7ed2eafd0a61', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'ea9a6fad058b361c77bb84609dd2e7c6b92d9c35', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'f38de8ba3d30cb2a9d1e7020910d5fe651a2ec4f' }, index.h("smoothly-next-table-cell", { key: 'db56a476ca28a0aeef97bbda8f8317079d9898eb' }, index.h("smoothly-display", { key: '65e33d8d3650a6a5423d47dc2ed210b1a7e083e3', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '50fd46d73a79ac39ea9e531191a7bbfc5cadfdd3' }, index.h("smoothly-display", { key: '676a02bce793ce04d4bfe29a57b12abcda9cb674', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'd49a81b1f0308aed4f9dd0d1a4d11e285f5628e4', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '6172e15917d0c9b07926941c115d0339577b9f6d' }, index.h("smoothly-next-table-row-group", { key: '702cca3f9968b90ca9f60ae7bce2e073fd86d4c7' }, index.h("smoothly-display", { key: '2d3c71c4c17adb59fa8bcb66eb55ee6dd928f240', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '63ca204543351f120d71ee90a1e6e5207056dba2', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '36df63f982fceb5e1b67c2de95dd4ca723e1dd9e' }, index.h("smoothly-next-table-row", { key: 'feb2b626f45881f3a3a62a2a80e77f8f0d4d3b15' }, index.h("fake-cell-wrapper", { key: '09a6f0f745d31db96d20c5ba6ac93826e330e005' }, index.h("smoothly-next-table-cell", { key: '33c207294cc202b6a4dddef00c10e09188ace9b5' }, index.h("smoothly-display", { key: '7fedc6e2142345eca9320691d55bfc6a6c68372e', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'f9bbeba9c8c5b8d3d8a2581640bd87c5d48e1924' }, index.h("smoothly-next-table-expandable-cell", { key: '5480d2f107c282fc1698a4ed5ca58ebb39ff3bd9' }, index.h("smoothly-display", { key: '0132a7d7ba67472992803f43a5ed50732ec6aa1f', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '48690f2e40c2b6123fb66c7ddd3c963f05856f40', 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: '23ebf8d2daf83e932d7cde68f105dac6059be750' }, index.h("smoothly-next-table-expandable-row", { key: 'be8b9c21325679a26baae80c6e833824caf07a5d' }, index.h("fake-cell-wrapper", { key: 'ea1bdce957a2e0677664d276bfe5d22ecc4c708f', class: "span-2" }, index.h("smoothly-next-table-cell", { key: '3054bde065a700326ee80abb13a7ce570197898c', span: 2 }, index.h("smoothly-display", { key: '8dbd6a6fff628c111dba1ffb0138c9126adcd595', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '4c1dff73ee6eb514fe07e314b37f07013baeb817', 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: 'e235f9efbdf19ffe8fb98e68a8689c316762886c' }, index.h("smoothly-display", { key: '42e97b716d151160d2faa8af41e5e5d6aea75196', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '02d3309510ef2a76491a5b64801a9d4a6079817d', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyNextDemoGroup.style = SmoothlyNextDemoGroupStyle0;
@@ -11845,7 +11865,7 @@ const SmoothlyNextDemoNested = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e51e8f2cc538e5dfd1cfa26a3b2e2c1f5fcc2022' }, index.h("smoothly-display", { key: '39ebce7b96864c5e3c7fe179852f4f0b2759a635', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: 'e6e751716681be3b15a2a84e03ab14bbd4540fdf', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: '1540da2a545e363003f7395bdaa12d5dcf76c95d' }, index.h("smoothly-next-table-row", { key: '64d0024e3b49e19f60ab6c6a08693e77ca88e0ca' }, index.h("smoothly-next-table-cell", { key: 'b8573a8380c7b68a0762549dc059a7831122295d' }, "Id"), index.h("smoothly-next-table-cell", { key: 'f0c0a479d0c12acb100310dd70b62bbd60eca8d9' }, "Registered"), index.h("smoothly-next-table-cell", { key: 'f6f25090f7abb02226a03799fcbea7e8e4939333' }, "Name"), index.h("smoothly-next-table-cell", { key: '03f64dbb24a777bb830054bdb0c75dac28b962cc' }, "Age"), index.h("smoothly-next-table-cell", { key: 'ce2308229646b7c3101e487467b704ba71e5e9f7' }, "Balance"), index.h("smoothly-next-table-cell", { key: 'bad44718ea6d4ff480f068778db13c41be22308c' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: 'b5530529ef856b2490cabe568d32169b48afe69d' }, "Gender"), index.h("smoothly-next-table-cell", { key: 'e955f22f3e53b7fcfb89bc3a286dc070ae8f774f' }, "Company"))), index.h("smoothly-next-table-body", { key: 'd7e8b5ebb440d74d1ab8b2b4ccd6e7ddba436d7e' }, 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: '04751be9e9a8e336b1bef025bc81b97980a265c8' }, index.h("smoothly-next-table-row", { key: '223a83ef04cfb43b9122aae69943a46aa3c680b6' }, index.h("smoothly-next-table-cell", { key: 'be67907a58830b8368fd9d864907a6cc7d0dc829' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '7b46824531a861fcdd0af4dc546699f703b97c55' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '8d402c4a13f9c2ae7176508216f6232cde00bcc9' }, index.h("smoothly-display", { key: '3ab020c9699a20216585d74a5cfc9adeb73a5406', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: 'be338a335b25518a43f7e671ac1ed4262c2d4266', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: '38d7656a7f2d12fdd5ca683d6b4f33d36977f73e' }, index.h("smoothly-next-table-row", { key: '3aaa246a20c21e68a37c8c883ba6d2706f19d15a' }, index.h("smoothly-next-table-cell", { key: 'd5a593133612990b2decf038e55ae107dbf9f8cd' }, "Id"), index.h("smoothly-next-table-cell", { key: '0e0f3d8b15b96722ca88ed87125550bd0fb990bc' }, "Registered"), index.h("smoothly-next-table-cell", { key: '34e6651990dc769ba5ef753d28846e65e7ac2ae6' }, "Name"), index.h("smoothly-next-table-cell", { key: '843eee09c7d972d1d4cc0ee7ad199717069b46e9' }, "Age"), index.h("smoothly-next-table-cell", { key: '6f47009c22df7d3efbe4b842dbcb20c21f0a11df' }, "Balance"), index.h("smoothly-next-table-cell", { key: 'ea9ed27fb4f2ef95cbc4ed78142bebf30de4c671' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: 'ae77adcd3055cd6a8c08df9ca1f60a987bef5454' }, "Gender"), index.h("smoothly-next-table-cell", { key: 'e93ff6e84fc354d39ec4631b69f1f99aab9ee03d' }, "Company"))), index.h("smoothly-next-table-body", { key: 'afd73ac894bb93aa31bd99fd589a5487049e6051' }, 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: '23141fcd7197a63216f95a94ecc19cfa68825c4f' }, index.h("smoothly-next-table-row", { key: '546bd6375e4ee101cb4551db132e28f13271eb62' }, index.h("smoothly-next-table-cell", { key: '56649bec5494996c0dcf3ad3a34c24eef081f587' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '8b1fba8cc4f995f1247fc8e72aa83efa9cc8a183' }, "Footer Cell"))))));
     }
 };
 SmoothlyNextDemoNested.style = SmoothlyNextDemoNestedStyle0;
@@ -11860,7 +11880,7 @@ const SmoothlyNextDemoNestedInner = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '13fd06b7b3715a39b884858226aa4e3481667d4b' }, index.h("smoothly-next-table", { key: '7b3c5461c71d9444fcbbe7f1b49df9643d682cfb', columns: 4 }, index.h("smoothly-next-table-head", { key: '82c8eff53e06ff5fd45bbc3a5f6e9da55325c33f' }, index.h("smoothly-next-table-row", { key: '63fa9aa6b383724bb3bf44b0eeb83922804819d3' }, index.h("smoothly-next-table-cell", { key: '646803a5cec7d21c2ae52d34947dd293cb48204b' }, "Id"), index.h("smoothly-next-table-cell", { key: '62852bf4da10cda9e389403caa808e232dabb5b0' }, "Name"), index.h("smoothly-next-table-cell", { key: '2af3b1e6eb17aac4603be290f3f46b58c45f81b0' }, "Age"), index.h("smoothly-next-table-cell", { key: '562f80f9b14379ebd1876908443c40d2806e9872' }, "Balance"))), index.h("smoothly-next-table-body", { key: 'f88a8917e54ee733a574fa14d39af0d7228a6978' }, (_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: '19e0f084a09ccbdfd1b02ad2a303cb4b8fea8b3a' }, index.h("smoothly-next-table", { key: 'e3f73d442144d49b9f5c5ec37b53eaa8d32c9fe1', columns: 4 }, index.h("smoothly-next-table-head", { key: '90b8c436ce8deb7e6fc21749b6bf8446907c120c' }, index.h("smoothly-next-table-row", { key: '3fcb64b37aacd6bf6f2f42e3f72eb7d8cfe4442c' }, index.h("smoothly-next-table-cell", { key: '4df45e5d226a04caaea11e10d6e2913566ccafb5' }, "Id"), index.h("smoothly-next-table-cell", { key: '369eade6f61d7b0b610f27216dfa6cd4a05db40b' }, "Name"), index.h("smoothly-next-table-cell", { key: 'c400606b0bdc1467818f1493a0617529cd0e1951' }, "Age"), index.h("smoothly-next-table-cell", { key: 'da06335fe3248ed4f6cf96d9878682de78aad286' }, "Balance"))), index.h("smoothly-next-table-body", { key: '28a1b173a15e680aa9c6819fdf61575c86488103' }, (_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;
@@ -11873,7 +11893,7 @@ const SmoothlyNextDemoSimple = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a8acc2c650ebc443db8bb1b4317a0611e8f05608' }, index.h("smoothly-display", { key: 'd888c8972a011011165c8e04642a292a428ce8ac', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: '24ba400f4c2f1dfecc1d37869ef76b2ec44fcb48', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '72cbec1185a404a32fa0b3b228737fe99d81cb90' }, index.h("smoothly-next-table-row", { key: 'e8a00ae5c5473c82f74fc6a7dd2a5a56464fa8e1' }, index.h("smoothly-next-table-cell", { key: '0bac8c2dfef404516115d857f765ffe5d2e11ec2' }, "Breed"), index.h("smoothly-next-table-cell", { key: '839bb5f927ada24808e79f1a922bb61461e8cd2b' }, "Coat"))), index.h("smoothly-next-table-body", { key: '1625e465403ff47452f9276b9c2d92d11757092d' }, 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: '05c330996a9a0c778c55c4ead1b7696e709c1be0' }, index.h("div", { key: 'a7ad34c656fea392363226a0fff36edd89ea7886', slot: "detail" }, "Content", index.h("br", { key: 'a5aef051b80c0e0e32e9f67dc7aac1e60bdb3529' }), "of", index.h("br", { key: '33363ed7d377f8a68cb7d165492aa41a76864d47' }), "the", index.h("br", { key: '0b0ff8ccc287886c70a1386a578a54b592a3ab60' }), "expandable", index.h("br", { key: '7e957a24f390d5a2284d6c018a6a6eab0645cd35' }), "row"), index.h("smoothly-next-table-cell", { key: '6814eff2c64ee7113d59a6852f8272c8cf5d026e' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: 'fdf46cdb2c0368e9673c01ddbc66a040e0cdd993' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: 'b66351681a743398fd0e02d3375b21d6fc4ad55c' }, index.h("smoothly-next-table-cell", { key: '08eea1871b06906f22101aae982b04b02ab0cb02' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: '6b5928b4e65b0134aca8ee810b72dadb63526936' }, "Expandable Cell", index.h("div", { key: 'e74060695cf3bd65a5634832c40283ea7d4fd1bd', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: 'cd99c2c345ad20d112af5521a9903c8a3eac8276' }, index.h("smoothly-next-table-expandable-cell", { key: '5b4843ed50b9bd382542e0bfbd0487b23144cda8' }, "Expandable Cell 1", index.h("div", { key: '37af1819f83435ebb575e20be576e66b98efa256', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: '78ce9022f55cc22ca574b9ebdb9c494757e1c597' }, "Expandable Cell 2", index.h("div", { key: 'e375ff3620987b116f08866d7c355d62a3e0d6a9', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: '2717aa90d336fc0205fb0e4c3e26ab9c2c83d870' }, index.h("smoothly-next-table-row", { key: 'd69aced2ded306e79f99792ce3b2ee700e8451ec' }, index.h("smoothly-next-table-cell", { key: '9017281f8ca844f209745d5dd378b9d15f68874b' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '3a98156fa6bd434c4e17a0cdd23f35395f33cef4' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '66b3e68121b5d77bde910b396f198d1753ca8c71' }, index.h("smoothly-display", { key: '25216cd0f6a2d2e14b0492cd430205354adff73a', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: '639281176a112a8a5ed55705214570c36a2ecc41', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: 'd99d3f3cbb215bdf5e980f7a32949cfdba6fa89a' }, index.h("smoothly-next-table-row", { key: '9f9d60323cd22f8d3109df3310daf048312d0e99' }, index.h("smoothly-next-table-cell", { key: '43088a1b90e9161e38d951b86124b7b3601c5086' }, "Breed"), index.h("smoothly-next-table-cell", { key: 'afe9bb2f57af8e7bafedf4970a4d9ef7b3c6bf7e' }, "Coat"))), index.h("smoothly-next-table-body", { key: '1e7c4ac3d94cea0ee68f82bb8d6808dd46ef256e' }, 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: '016ef5b866f560bb6d5b677cb95d8d172bcae52f' }, index.h("div", { key: 'fcb81c069b8c4b46744b40ce427fedf9ae99039f', slot: "detail" }, "Content", index.h("br", { key: '716d0f3cec5a99c3f4be2bf5d637aa79d96895a0' }), "of", index.h("br", { key: '059b52649e48de5cfe0dab3705dfb2bd6d3eeb7f' }), "the", index.h("br", { key: 'fb6a41055c5f031c7020fdc3acc7850b766da7b3' }), "expandable", index.h("br", { key: '0e93dabefbe33ee903bbe669565d358ce4a806b5' }), "row"), index.h("smoothly-next-table-cell", { key: '18a19f3258b40f8599e28cd5982301c149d4f1aa' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: '69d677973b55205f30c189df03ea0e9b7bd26bfd' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: '26ea11b415a30ad7c32ee3d0e4f4d8aea9eda7f6' }, index.h("smoothly-next-table-cell", { key: '8f25926ec015829c5e478622535123318c42f17d' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: 'c3f3c58cb1be39d20ede7e9f3e40319edc38c768' }, "Expandable Cell", index.h("div", { key: '96f13cdd7068afb194661942636d9375815ba57b', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: 'f97abc78791cd5582cc83ce66e21ea2b8495e13b' }, index.h("smoothly-next-table-expandable-cell", { key: '8539c01c7749e704ecf19b07b00a24b49d4abeac' }, "Expandable Cell 1", index.h("div", { key: 'd82b27f6a549600cc32c136b20495f73bc54f978', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: 'a89e91aa1bcb9849f7de2f12f9ffbad0f0035ead' }, "Expandable Cell 2", index.h("div", { key: 'b347602a29cc9ab1bd82ad45b8c397daebd47c60', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: 'dbf4a77570431284f7322090e270d412618dddfc' }, index.h("smoothly-next-table-row", { key: 'c89965f6ea56be40b678f41381cb5985748ec4ed' }, index.h("smoothly-next-table-cell", { key: '9557848e7e943309e7132c61736f0ece5141b623' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '2111281a0a42972c1c9fed6620b27307e72e6604' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -11965,7 +11985,7 @@ const SmoothlyNextTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '6b36be13a7d56f8aa23840dd3a678b2f272f71be', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '9a82439125000847cc4e7e63c285aac3d605cfb3' })));
+        return (index.h(index.Host, { key: '4a0635a7fdb8d4cf9cf69d1a68d0acee29e16868', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '23b51de6de66bd017f63dac920eb13f1f414d099' })));
     }
 };
 SmoothlyNextTable.style = SmoothlyNextTableStyle0;
@@ -11978,7 +11998,7 @@ const SmoothlyNextTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'fc642613d84473320dbcc35e96ddaecc8be9762e' }, index.h("slot", { key: '03441f79c1ad49482323e7bb906919d8faca93f7' })));
+        return (index.h(index.Host, { key: 'fb0f615885030954edd781631fbf110eaa61b2ae' }, index.h("slot", { key: '3915d5a2c5479ae421fdcdb854756cdcbf5545af' })));
     }
 };
 SmoothlyNextTableBody.style = SmoothlyNextTableBodyStyle0;
@@ -11993,7 +12013,7 @@ const SmoothlyNextTableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '15fc06d7b1ce2f0faec61e97de0ef87cb635985a', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '9717765421065994a2ec4071263bd16b114c7442' })));
+        return (index.h(index.Host, { key: 'e96e359c49c923816bf0078fa2989916c10b3f17', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '935ce02ad19e664e7a86be96eb195afd1e4d9789' })));
     }
 };
 SmoothlyNextTableCell.style = SmoothlyNextTableCellStyle0;
@@ -12065,18 +12085,18 @@ const TableDemoFiltered$1 = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: 'c038d0ed269bced01f49d3496e8d3fdca195ce79' }, index.h("smoothly-display", { key: '22c1d3b129e870b354f11a8cc179c85af4204370', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '897382aa4d953eca54e609c422ce00eecb2a51d9' }, index.h("smoothly-filter-toggle", { key: '83cd16b707e3c8b437fa9f19f6ea8f364ebab53f', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '5221fe242168a170c8816b2eaccc3f6399c0dbed', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'd1107c560992f47582b56f7e6304bab3c9a9a35d', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '335d7a236b954564080362b20d626544e95e053f', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'f5a98ce55b433759b8804f0d9a6bca7286d28144', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '447b40076e72611bf082180e871eff0d648c56e1' }, index.h("smoothly-display", { key: 'dff28311d67134417c250df087d787521b566bdb', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '1a9d516641da3145ccc8268d7a4510d489721e62' }, index.h("smoothly-filter-toggle", { key: '6f33cb914309d6725e10c6b87a1044612f3c2281', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '5af94424768de9d6e4135142e66ff7e94c3f227f', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '66224dd74c0fd79a2cb40d1d7e99800ed2075752', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'b11fe5181c76b39b319febe34a58d6f20df1c558', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'ac37fbd330512a3860bb0ee98270bc5b3145f4f6', 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: '0248598e82358270ecfa71552c4c9423679d6d4c', slot: "detail" }, index.h("smoothly-form", { key: '0aadcf20d49a3db14328e9688e4ff7357f07ad0c', looks: "border" }, index.h("smoothly-filter-select", { key: '0332acff6d85bb456181214ee01972f71c03c664', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '6e682a5a475a91eb40fc726ce5ed4f479bd8794b', slot: "detail" }, index.h("smoothly-form", { key: '9acf2fb857029ce04264aa6674b88fc330515d60', looks: "border" }, index.h("smoothly-filter-select", { key: 'bdef0d610c7f49eb118f1101562fff6d2d34ce3e', 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: 'c84f849c15ec131a03d0c8aabf0e06df2f12a7cd', 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: '9869e26462ae7d017c9e191e99028ead47d43425', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names$1)
+            })), index.h("smoothly-filter-select", { key: '4b55eeaedb18374dc42d682b52a21e6ba3150455', 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: '22a44d8ce6798333b3518cd8469f5ffba0302cb5', 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: '3a72eb19d9e25ca286cf30b898963d9b632bc8bc', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '666dc971712734653688ee95fca737518febaea9', 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: '441da24631cc87d3ce523ee5cad032587d670dcd', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'bd5036886b9bb2459b25c8dd21d44df5db651957', 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 = {
@@ -12112,7 +12132,7 @@ const SmoothlyNextTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '9101742e13ee1659f6d8c9b89b9dd01bad8749aa', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: 'ff5dd92a9ce282d4c7461d2776252a0b9994ee31', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: 'e9a7f13a9171569c45545ac78dd8449f80485c9a' })), index.h("div", { key: 'a7c36369e921e648ceb2536ad9e1c58031a4077d', class: "detail" }, index.h("slot", { key: 'ad2b1bebadb19ef0c9daa7d54047acc2a6c55120', name: "detail" }))));
+        return (index.h(index.Host, { key: 'd67b5d0383b0db8f637888a958cb45a9ebacb3ec', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: 'ec2421a6122207a28b348ea536bd001e1c7d495c', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '24bf9aee3934f2330df446815fb752707ea1bc44' })), index.h("div", { key: '2f4a5a1694d6e3db393f715a71d66095e09e50a5', class: "detail" }, index.h("slot", { key: '5ed6449464aa6d8dee7ac9c51d7f2b44f48d0c8e', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12136,7 +12156,7 @@ const SmoothlyNextTableExpandableRow = class {
         this.smoothlyNextTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: 'cf7fc43ab9572639720b6dda4d2ee226fcfd38fe', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '7d90befc65257005379b4bb0564b335c046fd8d5' }), index.h("div", { key: '50f7e0eb66657fb909cf2d912c71ee7b09e1ed6e', ref: e => (this.div = e) }, index.h("slot", { key: 'f0917493dda2b027cb038a3405f3efb0a5e9bc25', name: "detail" }))));
+        return (index.h(index.Host, { key: '6639c71b07e30f5faa471e1f32e2b07aec1c3228', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '4820aaf170a50c48619000f5853e5248dadb6e34' }), index.h("div", { key: '829533fe6fbe2605a4a5a985e8c806444e7db14b', ref: e => (this.div = e) }, index.h("slot", { key: '1c68b5b9cd4da1d74fd5e6156a1497f18faec232', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12152,7 +12172,7 @@ const SmoothlyNextTableFillerRow = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-next-table-row", { key: 'f70c6c5d3585ac1671d4627fa3c3416bc290529c' }, index.h("smoothly-next-table-cell", { key: '0aa925e178ad8d5e538c4adbf440946b33b59212' }, index.h("slot", { key: 'b7cab380329b4de0a7a9e05beb38e8a23d734e48' }))));
+        return (index.h("smoothly-next-table-row", { key: '5f4ba87733659bda82336e0ff7687bde6e5e1030' }, index.h("smoothly-next-table-cell", { key: '48a3a02cebf9872e815357079ac37ea63a34b0a6' }, index.h("slot", { key: '98a43cc284cf931474ac86c4754451b8f5407d97' }))));
     }
 };
 SmoothlyNextTableFillerRow.style = SmoothlyNextTableFillerRowStyle0;
@@ -12165,7 +12185,7 @@ const SmoothlyNextTableFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'aaa1bca3c943b4d98408acf4ce4e42d7a43eac2d' }, index.h("slot", { key: 'd3840c7c3204dc380565bb6d5ccf1e9ea74f5513' })));
+        return (index.h(index.Host, { key: '11dab87838e468aae34fb0632a64054c4aa61897' }, index.h("slot", { key: '55a6a9600d3b5766d11f7f0cbd6cecfabf6f9161' })));
     }
 };
 SmoothlyNextTableFoot.style = SmoothlyNextTableFootStyle0;
@@ -12196,7 +12216,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: 'f181efdba693b2c07b980369fa5d6a71c88f3e93', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '9801166b8be1917bcac3da1dc922d13affb83d6f' })));
+        return (index.h(index.Host, { key: '0d999556a8df7f00defd5921d5733b7ce0ab7770', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: 'e14a7fc873f7763be03e2278d1e734c7fcf90acf' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -12220,7 +12240,7 @@ const SmoothlyNextTableRow = class {
                 event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: 'd73ff5e3a252f364a108f2db773e1789a0a0099d' }, index.h("slot", { key: '8df0952b6573ec71af1959f30c7fda5f32df1cee' })));
+        return (index.h(index.Host, { key: '7375dd10ce7cf0744c2646e8e43dd4f183380cd1' }, index.h("slot", { key: 'af9bb64fb0d6e1602c641bd24b5cf3234cd9b40c' })));
     }
 };
 SmoothlyNextTableRow.style = SmoothlyNextTableRowStyle0;
@@ -12240,7 +12260,7 @@ const SmoothlyNextTableRowGroup = class {
         this.smoothlyNextTableRowGroupChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '43a82196fdfd80f0f919a4f62191c3361f41cba0' }, index.h("div", { key: '9919bacabb6794dd9a71925d7743c37ff2d805ea', onClick: () => this.clickHandler() }, index.h("div", { key: '71d0b9c9f93d826e623ce5e0a38af321e72c13d8' }, index.h("slot", { key: '52a00599eceebc5d1f4eb1db8eae7ffaa6ece430', name: "start" })), index.h("div", { key: '35a90ff17f0f195cce6b894235ab15e4575854c9' }, index.h("slot", { key: '0634ab63a3b9194337b37665b48a74c774348ddc', name: "end" }))), index.h("div", { key: '122e07656e70d691387319b1d674d952323be40d' }, index.h("slot", { key: 'cfcc0518333e93fa47391fdd6371662e9cbd42d8' }))));
+        return (index.h(index.Host, { key: 'e8fe944298d963c42b3be3ca591718065ffc1a10' }, index.h("div", { key: 'd20a811f2f428a88ca5d40c0a13d5f1830920737', onClick: () => this.clickHandler() }, index.h("div", { key: '0334061d3030bbe6e639ce39824fe6d6dc16c194' }, index.h("slot", { key: 'c503323239ebd3c4f4c7eb2dcc71e7ed8aa9ee53', name: "start" })), index.h("div", { key: '03eb020a4fbd59212089a8cd963d4ddd32750a78' }, index.h("slot", { key: 'f0caca039c2d1b074b0dcfa508f15c0bacb2a206', name: "end" }))), index.h("div", { key: '12a61061ae740af8b67057f086c2f89da12910de' }, index.h("slot", { key: '1d5716ab78a61626330058350483e460c85681fd' }))));
     }
 };
 SmoothlyNextTableRowGroup.style = SmoothlyNextTableRowGroupStyle0;
@@ -12300,7 +12320,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index.h(index.Host, { key: 'cf9c96072d6a7cc7766601abdd96989ff1a83143', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '1e5eec6b4da1c394c1593222dcfae0de58243c8d', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '3fc2d6ccbffafe41ada4de5422d0cf164e4b470b', name: "close-circle-outline" }))), index.h("span", { key: 'b9f58c7197a10c4839c9f9ec0f5ad9251773e986', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '515d0b003497ca4de76328e4ab910c34f862985a', name: this.properties[1] }), index.h("p", { key: '7a5f3e3fb368614669833eea3b8a8e351356bf9e' }, this.notice.message))));
+        return (index.h(index.Host, { key: '048bdeec32b7e764a3d116ed5b8e660ba10f745a', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '51bdbda193a605034c8e544305fa96ae4191338f', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '48eb40e9cf25860cf672b7d6fc423f1720056bff', name: "close-circle-outline" }))), index.h("span", { key: '78535ad469c9226fda035709f07622ed6a49da32', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '222f816aae59da65bc3b668653dc07a71dcc5126', name: this.properties[1] }), index.h("p", { key: '8132555c4ea10f5bae91e28da192eef5c4292024' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -12325,8 +12345,8 @@ const Notifier = class {
     }
     render() {
         return [
-            index.h("slot", { key: '95705f447f02f2fd79fcfb9fd914547dcd46fd43' }),
-            index.h("aside", { key: '49abfb85afa25cf8a939d725697698082eda895c' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
+            index.h("slot", { key: 'b806e161fb6393c807902e69f4a87cc6f161c782' }),
+            index.h("aside", { key: '94dbd9b35bb94cbbe88edf283188ba7538a8967f' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
         ];
     }
 };
@@ -12343,9 +12363,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: 'a02b6c6675fb539889cb9b9301d59bca8661e1c8', style: {
+        return (index.h(index.Host, { key: 'a4a43de76df6f5497a710d6a44c4f08ea8d5a8f3', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index.h("svg", { key: '6c73515870d733a25d126e0bbf1e97cbeb6acdf3', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'e20de5f3584d148efaed2390d66577ec6087d202', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, index.h("svg", { key: '8fe085b56c0f56b0cf18838febb24a93db15fbfa', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '67a588b203385240a0a1084187ca76c3e8c3d64e', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = SmoothlySpinnerStyle0;
@@ -12379,7 +12399,7 @@ const SmoothlySubmit = class {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (index.h(Button, { key: '32bc189c2442612efdcb413f2e0a6c21e597676c', disabled: this.disabled, type: this.type }, index.h("slot", { key: '0c85cb939835a49d5d5cda59a6d66f8a5f66d7da' })));
+        return (index.h(Button, { key: '38f2af2c012d59b9d0ebb179fc1c85263083764a', disabled: this.disabled, type: this.type }, index.h("slot", { key: 'a2254b3fa765ab5b07cf41b323cd9b9842720243' })));
     }
 };
 SmoothlySubmit.style = SmoothlySubmitStyle0;
@@ -12414,7 +12434,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (index.h("details", { key: 'ee64137eb2602f80947c504919436f8915ca11d8', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '3825bd22d7d067d5b7db61516bde33c76aa95d44' }, index.h("smoothly-icon", { key: 'eb261691c802689273ea6c0aaaf93ae02a9bc2be', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '5fd15219e08d9b609bc514f76c8ae0ebc5d116e6', name: "summary" })), index.h("slot", { key: '0425b325aa241a80081023ce4e99d280092608d0', name: "content" })));
+        return (index.h("details", { key: 'db42c69d9d5c12ebf3f4cd44304827a479ada63f', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '3c0552d3df2469fb2464612fdad04d7b37aea3d2' }, index.h("smoothly-icon", { key: '1b48642f6cabdcbd8b8e74ff9547c52ee7c8e386', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '19df2566c29cf0d306ccb59255ae5d2cea8979a1', name: "summary" })), index.h("slot", { key: 'a250c33f1a121c4edd454d74a0f0d127a4e61491', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
@@ -12455,7 +12475,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '6a8f9f0ed4050a8e803c7027ab46699a02545d31' }, index.h("div", { key: '287365385a80bd8d92e28096392f26544089a2a4' }, index.h("label", { key: 'c0fb752115acfce430b55a249218be1ea27ab7f0' }, this.label)), index.h("div", { key: 'fdbe867c13983b95011c44716c1afb68f4f38ca5', hidden: !this.open }, index.h("slot", { key: 'ea0d17983043a4573ff1591ab5532bdd2b129e6d' }))));
+        return (index.h(index.Host, { key: 'e9abf085f302382337c13ecc659ce455ef0c605a' }, index.h("div", { key: '6215a3bea53670b063afccdcafebba61262b7923' }, index.h("label", { key: '17139bd2eb67fd86ef9cccf069fa426175f66a33' }, this.label)), index.h("div", { key: 'cf9e34980ad64f038caffa856713e81f2b24864d', hidden: !this.open }, index.h("slot", { key: 'fa720f5aca2c2fd2a2017ada2590aa10f3e446af' }))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -12506,7 +12526,7 @@ const Table = class {
         event.stopPropagation();
     }
     render() {
-        return [index.h("slot", { key: '278cb8ca9f29fcab5127be95c03ad3f82b1935a5' })];
+        return [index.h("slot", { key: '40600ea9817abce274ee559964ded3a4c577e642' })];
     }
     get element() { return index.getElement(this); }
 };
@@ -12520,7 +12540,7 @@ const TableCell = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5062854df0d108862d1d5a68ec3daec19c87baa6' }, index.h("div", { key: '74f3e178740893891eedf00a0eadcb364c00f1cb' }, index.h("div", { key: '7347de0455eec66b9c60578a775bda6f6860ed65' }, index.h("slot", { key: 'ceb8dc424f808039fe50544ac519b281ed2129c0' })), index.h("smoothly-icon", { key: 'f71a3af5f5b1a55925822a35512f9eef70447411', name: "caret-forward-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: 'b2e26c5efa6a0998a9e4f2e386008e5d83b9014f' }, index.h("div", { key: '2647d6b541eab5847b74bb8b4b869926f37fac12' }, index.h("div", { key: 'a56ae7aa84dae912105aff1957ba487c1de3cea2' }, index.h("slot", { key: '0dac2c08fcf86810abb66e19f68d4e79ee1bfb5f' })), index.h("smoothly-icon", { key: '02761a618d0eeb45694baca5c992abf8bc3a4d9c', name: "caret-forward-outline", size: "tiny" }))));
     }
 };
 TableCell.style = SmoothlyTableCellStyle0;
@@ -12533,7 +12553,7 @@ const TableDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '53be42a59eae93cd04089ceff69e4279067cb963' }, index.h("h4", { key: 'eb82922296ddd16ac1755b1ee996eebf16a20d09' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: '7e81cafe928f6e8bc94954aeeaaa1d9ee96d974f', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: '8a7997f79ee7d91a9062452d7e0f67fc231a00c4' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: '737454cdc9fd7ec3877cf3abc20c324682b0b7b7' }), " ", index.h("h4", { key: '0831ab751372c3f4fa3ac915b13a32cd2dbb6612' }, "Demo table 3"), index.h("smoothly-table", { key: '63dbfdd026af3770afe21cdd4423e0ae587bcb05' }, index.h("smoothly-table-row", { key: 'd4aab6e8c91f4a818778b1221f0f8a91f378aa11' }, index.h("smoothly-table-header", { key: '4f67a6f00cf9c58fe7ceec318e0f8eba4379933d' }, "Header A"), index.h("smoothly-table-header", { key: '4b77c188619fcc87bd538e016fc3a18a37de1de6' }, "Header B"), index.h("smoothly-table-header", { key: '77e20fd93103e998d7d99ce1abd784e60d86c2f3' }, "Header C"), index.h("smoothly-table-header", { key: '37c063e78d39652a9faced7fb502b802ee5cbcd4' }, "Header D")), index.h("smoothly-table-row", { key: '53fa8e66d71549e339e25d27e40a1372d9308fbe' }, index.h("smoothly-table-expandable-cell", { key: '6fbf000e9fa22ae8f1fd7d50d34a1509c9b5ca58' }, "normal row (exp.cell)", index.h("div", { key: '065bc1cc7e18d97c6d812957a4572af1283baa9d', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: '5ad4def608cd5e6d4f832d73db0c15a6d88e0344' }, "expandable cell", index.h("div", { key: 'a381374626bb69c50d50274e653e0583954906ab', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: 'fd0fab270484c25c845e33b04765bf3688566e48' }, "expandable cell", index.h("div", { key: '6fec880c00f197a2b53abf24a3abe1093cb3c4f2', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: '719f23b7d5b5dd7d8f71eb7f9db7b3970fc8464e' }, "expandable cell", index.h("div", { key: '2f49608fdaa0a93f201530a896c6ab55a28f4694', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: 'e39ad100aabd0560947f9451eface079cc5310e2' }, index.h("smoothly-table-cell", { key: '5f056437a7d214299d4575c4f2e2632ca522c346' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: '52668cc7d4ccadd22820249347fdf2660ae7a085' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: '521dff0d3a6e771d109410fdd44553c95ea25c8a' }, "expandable cell", index.h("div", { key: 'd264864ed7b4b229dba5c45e25ca8b479c20cb35', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: '89840546bcc7326181c85cce667ad2fb49493fb8' }, "expandable cell", index.h("div", { key: '4610e446018c5d43f8e71886940a8d6ac81e0281', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: '1713a3125720a103ee6e95c63b0b9b1587d8cd7f' }, index.h("smoothly-table-cell", { key: '5a8734b046a1d07e1cedd0985ee4f497e9e136d8' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: '09df788fff971152fecf9d103b9dd62aeebbc296' }, "Normal cell"), index.h("smoothly-table-cell", { key: '8f67df5ff33c39149476871245fc7aeb0e08fc55' }, "normal cell"), index.h("smoothly-table-cell", { key: 'd552f77aaec787156b92775db9af7f39d2df007d' }, "Normal cell"), index.h("div", { key: '57cce465b74d94cdb07c80f573da1eddc31c2fe8', slot: "detail" }, "expandable row content"))), index.h("h4", { key: '21be288e1b027ec3d91c4ae289d0ed3ca910f72b' }, "Demo table 4"), index.h("smoothly-table", { key: '79c5d88554a41218e9e2460d427168264b0cf594' }, index.h("smoothly-table-row", { key: '33f26f80e4b4cb17506d50a29273af3841d8f222' }, index.h("smoothly-table-header", { key: 'd33b1f37b787b14b28c7448194595fadaaecab7e' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: '16a420bf3010f1d943bf0ea8b20a6c2f100c4246' }, "Header expansion", index.h("div", { key: '01f58dab2bb54d466bb349e0ac6319c59a6907a3', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: '412a9dbb500e06828ad3a636cda7ffab111f95c1' }, index.h("smoothly-table-cell", { key: '12443da33ba5636fe7385cdbf885bd795aad53e4' }, "A Content"), index.h("smoothly-table-cell", { key: '2ae92fd591fc09968f0dd64ae4710ab4b8500ba5' }, "Expansion cell"), index.h("div", { key: '61aca20db9b20d153a41809e646af783bc5c0df1', slot: "detail" }, index.h("smoothly-tab-switch", { key: '1c731320d3376f90b1aec4cefe9be81ca59d8e0b' }, index.h("smoothly-tab", { key: '787dfd25409d1eb8c032de03a4e76021273b2c39', label: "innertable 1", open: true }, index.h("smoothly-table", { key: 'bf7ff75d0defd3dfec37e1c9812b08d1fd9fc0df' }, index.h("smoothly-table-row", { key: '9b0976a3bb217182b0c4eccf0d6ce9f6489db5b5' }, index.h("smoothly-table-header", { key: '8318c77201c05f4b02cc41744eb35bf2f4140826' }, "Header B")), index.h("smoothly-table-expandable-row", { key: 'abf930d458088ff00d6894e04ead5d1bf61a0a41' }, "B Content"))), index.h("smoothly-tab", { key: '6f6d637cf420bbac5568137fc600c0d42117e39f', label: "innertable 2" }, index.h("smoothly-table", { key: '2daff30706926cbeaf3cfa172afda97f519f03a5' }, index.h("smoothly-table-row", { key: '37e4ac959eabe3a284a9ede1385f82d515e31702' }, index.h("smoothly-table-header", { key: '6c84a8ebac2350edeef0653f3e59079e5c969dde' }, "Header C")), index.h("smoothly-table-expandable-row", { key: '6b56c777f4286168241e83efa484512d275ae23b' }, index.h("smoothly-table-cell", { key: '918a273d94baf14e27a9042b75f82698fc2679d9' }, "C Content"))))))), index.h("smoothly-table-row", { key: '4c99290f4567f45c8ba2606b19aa38d3950278d6' }, index.h("smoothly-table-cell", { key: 'e24602c2d06e80798ce8ba36644746d724ae98c3' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: '4aaca4f1195f72b963a70881ac080b315676e31f' }, "Expandable cell", index.h("div", { key: 'fd897f99596867ca2644533180023bbd4db57904', slot: "detail" }, "Expansion content")))), index.h("h4", { key: '464e5866782dd5b72f52ecc96626a73eaa8be487' }, "Demo table 5"), index.h("smoothly-table", { key: '3139ea330252eb033895f7d16ebdc0e3980e369a' }, index.h("smoothly-table-row", { key: 'b69b34950d30b773165172cc0a6e3e08de0c7a24' }, index.h("smoothly-table-header", { key: '84a384ad69d58a5d03dda1b68942c087aae877ce' }, "A"), index.h("smoothly-table-header", { key: '9ece563e33a3b3fd6a1104947e4bc7eb77ccde96' }, "B")), index.h("smoothly-table-expandable-row", { key: '5a2a87a7808fa7f6542077d7c7ce1749f2674908' }, index.h("smoothly-table-cell", { key: 'a7dd2f2be706a2f1d5f5613a6933fe98fb038122' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '37e8d1009e76cd6d0d2988a30cf9c53ca3ce6c5d' }, "b row"), index.h("div", { key: 'fa3b423faa8d27d04c799d7633bec0f524cae4c8', slot: "detail" }, index.h("smoothly-table", { key: 'f74b66f981299ae91080332cc1300b3ef250a227' }, index.h("smoothly-table-row", { key: 'ae79b6b1a558535948bdfdb3b0b22c5685918a03' }, index.h("smoothly-table-header", { key: '18ffda1fb5f144c974faaefcf6a473d106029dd6' }, "C"), index.h("smoothly-table-header", { key: 'd6de449c379e1be2627c74ac7d50d1a2bfaf0efd' }, "D")), index.h("smoothly-table-expandable-row", { key: 'a462d2d5e136b90613894c44ace30d5baaf91df2' }, index.h("smoothly-table-cell", { key: 'ff31516efa7b0c1185fa45aed651fa1e64075447' }, "c"), index.h("smoothly-table-cell", { key: 'c50cca9b9dbb1ae62425c2320cddc924f80a21a3' }, "d"), index.h("div", { key: '47b90196c2250a63fc75f30c31b5cf02eb739524', slot: "detail" }, index.h("smoothly-table", { key: 'bc74a905a606424c061b7fcea5f1eaa3d195357d' }, index.h("smoothly-table-row", { key: '6344086cd19faecb48068ea0eb9df6abbc67483d' }, index.h("smoothly-table-header", { key: 'b96fb744d05ef7727d10bfddb8d835403a343c3b' }, "E"), index.h("smoothly-table-header", { key: '4f28edac13b26b5e5a436007cb131103f967b486' }, "F")), index.h("smoothly-table-expandable-row", { key: 'ccb6a3921f90059b4b13516a940c1d47673d93db' }, index.h("smoothly-table-cell", { key: 'c4ac72428b4fa249d248c6962108f919cf91b796' }, "e row"), index.h("smoothly-table-cell", { key: '931265002c1979ff05aad3c9c1b8857c7a303cca' }, "f row"), index.h("div", { key: 'aca1cb61af0b26a1d086d46aed3ee87f702abe3f', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: '1846b0b91e1f6fc8c36eaeff02d8940a487cb375' }, index.h("smoothly-table-cell", { key: '9812fecd9a5d276d71f2e4d7cc961c3b9ca1a40e' }, index.h("span", { key: '5d5b2b8960f9f1d7cdcf37ae8096388476a053a7' }, "one"), index.h("span", { key: '3575c2c34ebd6c74234c994bc3e935f3b075103d' }, "two"), index.h("span", { key: '8b57fdcd4b95d1524757ce8a5b87a29aa5ab7886' }, "three")), index.h("smoothly-table-cell", { key: '8c66989e3216fdaf29c406fa0b8c889d0678289d' }, "five", index.h("smoothly-icon", { key: '63b081c0e50a59303e9a4396e881ccd29433d97b', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: '71ab643847e708d3e662c6abaed05032a183781e', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: 'be51504e8593bd6daf007e0447ff838abc315d1e' }, index.h("smoothly-table-expandable-cell", { key: 'f003dcecc891e1fa2c14ab0e1267dc11a8f88b2b' }, index.h("span", { key: '1eb82cea60c15964020f429a56c2e2de0d103035' }, "nested expandable cells"), index.h("div", { key: '7cfde4f0bd7ac82bbb8abecfc25d34536180ea0e', slot: "detail" }, index.h("smoothly-table", { key: '0d077b70abb3b5c7b000b35c68c7427740f455b0' }, index.h("smoothly-table-row", { key: 'b5e3dca9510878a4e05a6bd5b21204a309ccfe93' }, index.h("smoothly-table-header", { key: '81f4698df8129aa4c1529ef025263d33a0b3c3b2' }, "E"), index.h("smoothly-table-header", { key: 'bdbbb3abe8317a38e4182542b30cdb65e19fe749' }, "F")), index.h("smoothly-table-row", { key: 'c4c77253db5205de697387ddb0e6c47e5180540e' }, index.h("smoothly-table-expandable-cell", { key: '5f6e8709b83d966a6a63008136e63786d3bde9eb' }, "e cell", index.h("div", { key: 'a25d89be67bb681a00fe29c89835742e7ca5619f', slot: "detail" }, index.h("smoothly-table", { key: 'db2918aab38e4e3b4f728436d49abbd3cc603fa3' }, index.h("smoothly-table-row", { key: 'b7498411f85975d4cdbca6b7847b3d9bd12b8bfd' }, index.h("smoothly-table-header", { key: '4e00e77e49ec8a356f87834ef11a56fd47d1867b' }, "G"), index.h("smoothly-table-header", { key: '3bccaa99253e8c6f6b879ee3aae3500330b37014' }, "H")), index.h("smoothly-table-row", { key: 'd7798c3ae8ae3e4bb3e9c4507e9c7dcd15c4d5b9' }, index.h("smoothly-table-expandable-cell", { key: 'ef6860199bae63f6133ac8c618c82d4c963c537c' }, "g cell", index.h("div", { key: 'ba66f3b4ac75731b027e0356a832d67691074308', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: '2c8a43f2ba6e63d6351469e1b55e85a9966064bf' }, "h cell", index.h("div", { key: '42c56ab6922c05a378e24e53f9dbfb3ea3feef1d', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: '09477cbf50821084917fc057b57e981a70fba3ff' }, "f cell", index.h("div", { key: '3cbe5260f269e2bfa1aaa3d572a6cd77491b9876', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: 'e3a91516796ed2261d85958eca6f51d96e562779' }, "b cell", index.h("div", { key: '8aedda49b2422eb69fb2c07b3f192cefc9b67731', slot: "detail" }, index.h("smoothly-table", { key: '42a8077b634bb8233cc1ac84e09f744119fd49ba' }, index.h("smoothly-table-row", { key: 'e018db87eb09f82a374601e662dd2272208e52f9' }, index.h("smoothly-table-header", { key: '8fde0db8cd4caac95a00b178bedc3bdea893ca09' }, "C"), index.h("smoothly-table-header", { key: 'e0a57373f48ea22b8d2b282d6cc927ebdc164d28' }, "D")), index.h("smoothly-table-row", { key: '3f557f3880bbe48ae0c25e0b5424e71e2a8515b7' }, index.h("smoothly-table-expandable-cell", { key: 'ea925a8a132155918d0ed21ead5c6f529abb6aec' }, "c cell", index.h("div", { key: '52b0a1775a5170443035919292e2455510c9f33d', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: 'b76b324f5cb0f52393550cb22222e5bd2c04ff43' }, "d cell", index.h("div", { key: 'ae05f73f18d89f513bb22621c1d12789231872d0', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: '6438b23072b40c3bc099d0cf5daa5b8b5357ea38' }, "Demo table 6"), index.h("smoothly-table", { key: 'f20f628341871564f5d59d19ecddb5546b8d38ac' }, index.h("smoothly-table-row", { key: 'd3d1bbc34e34d7588227ce7cb1186d856e4d8049' }, index.h("smoothly-table-header", { key: '3f0e92b3d7261a7df46926985cba28db7844fdf6' }, "display"), index.h("smoothly-table-header", { key: 'f5707ce56267df67e3cd3df795377b83dceb4255' }, "contents")), index.h("smoothly-table-expandable-row", { key: 'f2bda55afc889531878a3829f777503637679b48' }, index.h("div", { key: 'c5b1957c219a5e339af7af1651381e05ff348dda', class: "content" }, index.h("smoothly-table-cell", { key: '365a004e4b59db24dab6bdb60c72e3a2fcff8b1b' }, "A"), index.h("smoothly-table-cell", { key: 'b5ba9d75db1b029cd5d6132eeb607061a0d6bf54' }, "B")), index.h("div", { key: 'eb91d19f108d7257d0a294f270bf40d6627d0cd1', slot: "detail" }, "expansion"))), index.h("h4", { key: '9d5f1cf978c2664f101ebca6010f476b684ddd56' }, "Demo table 7"), " ", index.h("span", { key: '06b5c34d857967b1aa7586a323cd03b51ce49c35' }, "nested 1 then normal"), index.h("smoothly-table", { key: '3711d238f8777d80bfd10e554a3482dd56f57b03' }, index.h("smoothly-table-row", { key: '909ed9e0085499e2df9a011d4b6bc393a92c6e47' }, index.h("smoothly-table-header", { key: '1bc9a70fcd64fa6ec024a92fd3decd39756d2789' }, "A"), index.h("smoothly-table-header", { key: 'f7d8450307f414480684ae78227c834052a3de0b' }, "B")), index.h("smoothly-table-expandable-row", { key: '89ed4dc28fca818ce6810a048342ac95b1efc171' }, index.h("smoothly-table-cell", { key: '43475fa094b0cda43a36d575a5c276c3f1f5f7d7' }, "a"), index.h("smoothly-table-cell", { key: '066f0d4136ed9666a14f0b054314f665058c3889' }, "b"), index.h("div", { key: '87d5cc45e000b8f3a5837b3eced1ec07a6f38286', slot: "detail" }, index.h("smoothly-table", { key: 'd0f341e85834aada799ed91b921868eaaa6bcce5' }, index.h("smoothly-table-row", { key: '9d3df7952a52b2ea60b7c560f12a5548f64fa276' }, index.h("smoothly-table-header", { key: 'cca4a3e44f8190840954ada48214c96cbd6f73f2' }, "C"), index.h("smoothly-table-header", { key: 'aad16b50d58b290bc92c365d3ad7093ac93c8c42' }, "D")), index.h("smoothly-table-row", { key: 'b2410f573e4b6e5145d1500459cf8c829dfd1b43' }, index.h("smoothly-table-cell", { key: 'b3bb934c325fa2e31dc137e6bdbd17a57df51c97' }, "c"), index.h("smoothly-table-cell", { key: '9af6e85dc3c35be8a0cfd9f0ddec705c30d5f210' }, "d")), index.h("smoothly-table-row", { key: '4e3b2f5e2673272154a2af4f2fca975989c6ed3b' }, index.h("smoothly-table-cell", { key: '14b370359113242ab32710fb90bc4ffd6ad9bdbf' }, "ccc"), index.h("smoothly-table-cell", { key: 'bf682bcf6afc718acab50ce0424c667727027b13' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '8c01e7aaea93262f13bfc94e77d4f17df783bfdf' }, index.h("smoothly-table-cell", { key: '58bcd236abc71d79ea1a161bd6cc4e26b4714843' }, "cccc"), index.h("smoothly-table-cell", { key: '9a1ab4ede2df570c36e4f272c53af7e641f81170' }, "dddd"), index.h("div", { key: '146b2067ee93e6ca4ff7b751011967573c6a0c8e', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: '77aa000c64e986d8bdde7a2be2dc1401ecb740dd' }, index.h("smoothly-table-cell", { key: '420eb1202a5b11b60373d6ca907155e0c999fc53' }, "ccccc"), index.h("smoothly-table-cell", { key: '8f317e48c7b1ffb4021d9ba7530867d29495e69c' }, "ddd")), index.h("smoothly-table-expandable-row", { key: 'd2f2461ab8890259add01e72b4a6fb14cfae103b' }, index.h("smoothly-table-cell", { key: 'c1a391f17e78eade7164f38e39da4654745d0a4b' }, "cccc"), index.h("smoothly-table-cell", { key: '4a21834108de69eafc6afb5c9ba7bc38c68df5b3' }, "dddd"), index.h("div", { key: '67841034f3773a7bb691d5eaa81331b8cc3f8390', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: '212fe2aa1b5f596a50c4f531b0ff878dbf54dce4' }, "Demo table 8"), " ", index.h("span", { key: 'fda94e3d597b2e76b6706c34b87fe43b63cd46ab' }, "not nested"), index.h("smoothly-table", { key: '64a60486ab6a8ee4c4ae9457d398714000614042' }, index.h("smoothly-table-row", { key: '06c60080d5971679267d08e70220071209dfa195' }, index.h("smoothly-table-header", { key: 'b34b6ecd52c21407e1640824bbb6f2d3c79467fa' }, "C"), index.h("smoothly-table-header", { key: '2190dbe3b5416140c407fa2c94b7b8162ff16308' }, "D")), index.h("smoothly-table-row", { key: 'b9daca3cb9bf107e7d8efa49e4699ad14673acb7' }, index.h("smoothly-table-cell", { key: '8c183a97f3c9431c24c9e885eb34b41d51dda994' }, "c"), index.h("smoothly-table-cell", { key: 'a7e2667b937c1d8ed12c5ff7a969101e566312c1' }, "d")), index.h("smoothly-table-row", { key: '5596e62054e2919743ac5d39f4f579645e358b2c' }, index.h("smoothly-table-cell", { key: '311c108dda3a3ffed0184107d9353f8cc7860aa2' }, "cc"), index.h("smoothly-table-cell", { key: '388a86072db44bf753219a97092ed45c99d11a37' }, "dd")), index.h("smoothly-table-row", { key: 'e3d1584898e569ec0def668c03511b757c451244' }, index.h("smoothly-table-cell", { key: 'dadbffc5adc459ded3292ca42d62430acb4fc205' }, "ccc"), index.h("smoothly-table-cell", { key: '0d67878f1d28cb6d7737024a8419d8027b4b6c8f' }, "ddd"))), index.h("h4", { key: 'ed768d6ff1486be23fbcbaeb895df7e7f9ac76af' }, "Demo table 9"), index.h("smoothly-table", { key: '4513ffa1a0993f366a6531033f5e15f4b4acf256' }, index.h("smoothly-table-row", { key: '4871c5b275ece855c9bf7853a224bbc86f2e8698' }, index.h("smoothly-table-header", { key: '4e0e165504502bb6e8e3a42533aa8937491fdc70' }, "First name"), index.h("smoothly-table-header", { key: 'ac042a99df6bd34c1100d78e5ed713613b0ea69c' }, "Last name"), index.h("smoothly-table-header", { key: 'fa2278a5c0245670fb20c1383aca763bae074c07', style: { width: "1px" } }, index.h("smoothly-icon", { key: '808eba27940405b4f5d4b8b2dfe6659b60ef67b6', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: '0f8b1958f4ce3fcf1f1c380247386f09cecb0b7d' }, index.h("smoothly-table-cell", { key: 'ab1468dd6c339a7d3aff94663bdb41d60059b6fa' }, "Jessie"), index.h("smoothly-table-cell", { key: '8fb30d257a9571789b37240f0b149c0baabc1e62' }, "Doe"), index.h("smoothly-table-cell", { key: '845e11d81dd7d39856e76e4ea15b7f08d7200438' }), index.h("div", { key: 'ac7905d0e54b50af47326d3b90e66dc72b914111', slot: "detail" }, index.h("p", { key: '056dcc6010198390547269c2a67fb13647bfb80f' }, "This is Jessie")))), index.h("h4", { key: '5765cda98831141b38f6cc8382c752cb403f1335' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: '5829a6614b1eeb7d702b4e3416c5c309d7b301e0' }, index.h("smoothly-table-row", { key: '0d2e7ede6669addd5b377f994c8fca915328f385' }, index.h("smoothly-table-header", { key: 'db80f2b2d84d91ea428066a7dcb70349b6f4fe74' }, "Company")), index.h("smoothly-table-expandable-row", { key: '834cfd2ba1d4db4e4298db3a28ac461fb6fcf81c' }, index.h("smoothly-table-cell", { key: '8f728d96847b859604cafab5a1bef0c1e612f0e5' }, "Proquse"), index.h("smoothly-lazy", { key: '7e3d68734014e00799f86f1b0be62f9764d18576', 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: '13460803adf16c0d2f2469ffbf8ede151e042bbf' }, index.h("smoothly-table-cell", { key: '6f34443382211e3f339cda6977cfdf19de4f67f4' }, "Pax2Pay"), index.h("smoothly-lazy", { key: '82de1aff69f37df7fe1d373901475204a16e3434', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: '7fb779cbd4c2f6d5a720afd4c51510a38927afd6' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: '067cc248556ea06c41021f0b885b87d842857be3' }, index.h("smoothly-table-row", { key: '20e9e2a2f6354322f35f916403fed7ac437bb642' }, index.h("smoothly-table-header", { key: '3c8b7e1b9507493be02a506ad3db77e63c27399c' }, "Company")), index.h("smoothly-table-row", { key: '176ab380d25c0b47ab2dd396eee77447c636af97' }, index.h("smoothly-table-expandable-cell", { key: '422c328a4f38539c81b3611683d5162c2d006d80' }, "Proquse", index.h("smoothly-lazy", { key: '1b4e48e54ef09fbea0f9d65dccea88ea0fdd6f48', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: 'f1d3848415a2291a24cadc5ff5c6183eadaaaa36' }, index.h("smoothly-table-expandable-cell", { key: '3d76c51793ffada2758a8991d2154bcc0061fef9' }, "Pax2Pay", index.h("smoothly-lazy", { key: '07a5a8744fbc02d6ad4b2e174baf49932070f26e', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: 'de0f29d86ea9406dc33ae6cbb05a985e2fa340fc' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: '6b1c7e3adba982d3b0559ebeb902076267ac5a8d' }, index.h("smoothly-table-row", { key: '012d772d605f309923ac667b5edbc2c90aed56ed' }, index.h("smoothly-table-header", { key: '7d2ade80f993e248cb17cfe6f792efb803d1f137' }, "Name"), index.h("smoothly-table-header", { key: '114ed0393418455c376eac9fbbd7c84c62af2964' }, "Age"), index.h("smoothly-table-header", { key: '025b401043e6a856eab22a25ddd4b0a245ac2aae' }, "Location")), index.h("smoothly-table-row", { key: 'feedb223f8173e0b43725b2f49eab2789c4d6a49' }, index.h("smoothly-table-expandable-cell", { key: '83d20ed834c415c8baa2f96df41168b0a719d4df' }, "Jessie", index.h("div", { key: 'cacc88512e4cbd909cc784fdb117bc0bc1d5d1fd', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: '6b47573a5eb0f807fa7faf820fe662927f29c913' }, new Date().getFullYear() - 2000, index.h("div", { key: '8e5c97a6fd99957bb55c6e7e655a84c8b52826d4', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: '735b452b7df36b50155bdd2d618a1ba585702eac' }, "UK", index.h("div", { key: '708b6efad43c434240dde3cdbea2a74981f75d6c', slot: "detail" }, "London"))))));
+        return (index.h(index.Host, { key: '05f202f2465dcb45de996ad8da83d99ab7d80e38' }, index.h("h4", { key: '4fb706f301922f1e9f40fd9a588509bd13a2dc3c' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: '01ab63987373e6aeb373b86d6588b0ce5550f59e', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: '5df16d4cb71fd74b02f716d54c448f8e4a02f208' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: 'b4d3450eee53c6013a6f168fb402605b17443ea7' }), " ", index.h("h4", { key: '9c0b85ef1f56e844a7398609376fee0dbe003f4e' }, "Demo table 3"), index.h("smoothly-table", { key: '2b8d57ac2ffdf810d1adaaead410a1597b099538' }, index.h("smoothly-table-row", { key: '37688f6eae727d327a9567bb2068d85bebfb7d42' }, index.h("smoothly-table-header", { key: 'ab7e497e138ab880b9e8a60149de142feaa91ce6' }, "Header A"), index.h("smoothly-table-header", { key: 'a650d31e07a5d7c300051a2e7354e49b65ba2d43' }, "Header B"), index.h("smoothly-table-header", { key: 'da026fe6de478911c2b91f88f250bdd0482541ba' }, "Header C"), index.h("smoothly-table-header", { key: '6f4096092dd4d635dc5483ecb2dff0a7b6036a6a' }, "Header D")), index.h("smoothly-table-row", { key: '36ebe1ae15329edecf13aa2dc6da44ba418266e7' }, index.h("smoothly-table-expandable-cell", { key: '5f41b80a041ed39936fc448e99d793ced964a88e' }, "normal row (exp.cell)", index.h("div", { key: '56bc2ef683d6a8db7bc059eec0e61bd73912b785', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: '477ec62e71400eb89f679404831183c440127dcf' }, "expandable cell", index.h("div", { key: '3a654c4d5c05599270bd77769ee67d09667ce35e', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: 'd91a1e8dc0a60e5cd3e7ad55409c38c669b51bee' }, "expandable cell", index.h("div", { key: 'a99ddd91b83589fc577ef6c02081e55973453ddd', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: 'fc0ca417ad26488e566ec3a48689b60cdea751b9' }, "expandable cell", index.h("div", { key: '5faff4c747c77ef4fb6c3f760cbf3084bad6ff62', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: '26bbb75af599754893af2877534f52e48da19334' }, index.h("smoothly-table-cell", { key: '7ad4cc1410e3203a6b6f316c3e392a3a8905a660' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: '2c400cbbefc0bcf889276d0dc65a85384810671e' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: '9d5e82da00b05b10c9a495be604bdcfd6827b318' }, "expandable cell", index.h("div", { key: 'f7850e39aba565986f159f35ca9e0e80ae56d6d1', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: 'bb98edc0b115bcf830320ab5d188a182a1b73574' }, "expandable cell", index.h("div", { key: 'f27137e171c7189a70dc792dc534d649066d71eb', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: '5e54a7f6c06da4fbe552d66bd21b463546d714b3' }, index.h("smoothly-table-cell", { key: '59121b3d6e411c06b163473eafe2f4c01f56a3e2' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: 'e487d13c983c0363b51078d77862c35026f82528' }, "Normal cell"), index.h("smoothly-table-cell", { key: 'e4012866ee117188dd89943b9387c119b71a4329' }, "normal cell"), index.h("smoothly-table-cell", { key: '859122b5626676521e571b35e679a7096a005e45' }, "Normal cell"), index.h("div", { key: 'ba54fad8c30b691f352d4e8bd3dc9d0a7458e6c9', slot: "detail" }, "expandable row content"))), index.h("h4", { key: 'e4cfbd7da1e63b683d091e0df04cdf7db48ff847' }, "Demo table 4"), index.h("smoothly-table", { key: 'd996a18ccbefd79d69d54dd5574e4cc45807989a' }, index.h("smoothly-table-row", { key: 'bee281c92bb204afc5a9833cc2fb056b0a9f3ea1' }, index.h("smoothly-table-header", { key: 'e6a0fdea2462f8557cc442227005d5d85ae78a35' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: 'b0d36ffe7d963dc14b193b0ee2a08faff7029d7d' }, "Header expansion", index.h("div", { key: '4c3eb0fdfb54020bd812d082b981db82ddedaf59', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: '9ca4f969abb65ecb43804ae49ef7ce5e58175a49' }, index.h("smoothly-table-cell", { key: 'e4756003dbdbacaafbe1db02e366d1784e84fb34' }, "A Content"), index.h("smoothly-table-cell", { key: 'd9bb302411c51434676347f1ab7406b1fa10f082' }, "Expansion cell"), index.h("div", { key: 'b507a3600c1f5d13ac7ed4a9894f6cd583a4b10e', slot: "detail" }, index.h("smoothly-tab-switch", { key: '5fad8c37db98a127616d7673e38b38c2d259cba7' }, index.h("smoothly-tab", { key: 'efed1b1c8ec802ca4fc40deaf957ffbfe8299ece', label: "innertable 1", open: true }, index.h("smoothly-table", { key: '7f33b79f3e605642f56a65d243672174b221ca35' }, index.h("smoothly-table-row", { key: '86e41722dd4ca2af660ee3896336d1c151894bae' }, index.h("smoothly-table-header", { key: 'a45d287ad3983d19c2558342cd7d8893d98e37fc' }, "Header B")), index.h("smoothly-table-expandable-row", { key: '4a21193948f233640b2d6f0118aa2bea80f6bb0f' }, "B Content"))), index.h("smoothly-tab", { key: '68231adbcf106c17f3572982f5a5d58740213c2c', label: "innertable 2" }, index.h("smoothly-table", { key: '19add4adc328f1b744b3ee36d24b0923c1500a0e' }, index.h("smoothly-table-row", { key: 'd002836fe5cb9be4020d0c136c1cf7730cd9ec18' }, index.h("smoothly-table-header", { key: '13d4addda48d16e992cf5d2c1c4cffee0165847b' }, "Header C")), index.h("smoothly-table-expandable-row", { key: '6f905a3d79f4f05f33ffa638f684d9ee9a91a7f9' }, index.h("smoothly-table-cell", { key: 'fdaa97d08c14401a94f804b9d18b94338c37a33b' }, "C Content"))))))), index.h("smoothly-table-row", { key: '4c81676b6a633c44c81e74c14a55863573f4fb4e' }, index.h("smoothly-table-cell", { key: '2ea26a31ef0f3b2659cc1c2d32e873e6b7e77164' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: '855e772a47a12735845d671ed521f5118a56945b' }, "Expandable cell", index.h("div", { key: 'cff1b5a9e6d6a80ba5563cdbe0e798353d1da929', slot: "detail" }, "Expansion content")))), index.h("h4", { key: 'dd301800ca3390151a7e2b7552c340871b3ada65' }, "Demo table 5"), index.h("smoothly-table", { key: 'ab270e3d69ab0581922073ae676af5c3e4d36c01' }, index.h("smoothly-table-row", { key: '51511e231342b68bcd6bcb6a5408b5cdf0f8bbb9' }, index.h("smoothly-table-header", { key: '1c6f0c1c5b1a0ae641b6e29f0de63287afd6f657' }, "A"), index.h("smoothly-table-header", { key: 'b157296178ed172bff8237ea3243737829459f0e' }, "B")), index.h("smoothly-table-expandable-row", { key: '72d21b76a187aea5d3f8d9d0037d95315dda6a1e' }, index.h("smoothly-table-cell", { key: 'f72bb26c40ecfc84d9e0d931cdaec94f597690bb' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '6b5a6f9c3246f1cb7d2587f5bffae8d7f2ffea94' }, "b row"), index.h("div", { key: 'c6e651dfe3a597ae41f673634e4e81307b779d6e', slot: "detail" }, index.h("smoothly-table", { key: 'c3bf5c5dfb33de98b23c5e74f3698dc3b353ad1a' }, index.h("smoothly-table-row", { key: '0e5406f1d24248aa82c8ea7537d032e3de884801' }, index.h("smoothly-table-header", { key: 'e465ee0c16a9b35d147e85714e5c1252993b20f2' }, "C"), index.h("smoothly-table-header", { key: '18f38a2f20719e8ae6bcbe6039d25b21fef4b1d4' }, "D")), index.h("smoothly-table-expandable-row", { key: '0e62c20ba70f075d6def447a697354a39a4f38a8' }, index.h("smoothly-table-cell", { key: 'c8819381eddda17c7a7f3f08031ebdfbba5fd0d4' }, "c"), index.h("smoothly-table-cell", { key: 'a616f2a62a0d1883feb465167bbf108283108220' }, "d"), index.h("div", { key: '71c1a8685c1817f187d15f8b171b3285cfa398bf', slot: "detail" }, index.h("smoothly-table", { key: '97dc04e9fe88fc62f6b492fd596ad39dc8bec9ae' }, index.h("smoothly-table-row", { key: '199501009078d13561494af21c8ec0840ee9d104' }, index.h("smoothly-table-header", { key: 'f9e37b800be70c2f480eec874376ce8cbe3f12bc' }, "E"), index.h("smoothly-table-header", { key: '812e05fb00483ac087894496f23264a257fb00de' }, "F")), index.h("smoothly-table-expandable-row", { key: 'f32fa191f4fb8c24e0e1889a3313d05e800d0339' }, index.h("smoothly-table-cell", { key: 'da620105064652b2fd78ed180848b32562bae6d3' }, "e row"), index.h("smoothly-table-cell", { key: '3f1c00270d76defd41b7e482e6417c3ab1e7b80a' }, "f row"), index.h("div", { key: 'abdd6f4a647af8a82f8080f695727687f9bd6e13', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: '6b0fed8fd85b5ac6720e9e5bab76d8962611f799' }, index.h("smoothly-table-cell", { key: '75f9071102edb24f72a8170726e7c301a3a3faf4' }, index.h("span", { key: '90fcf7a251ba34793dc66602598ccc056439d5d0' }, "one"), index.h("span", { key: '9a9f1f69a3153527aed737d1e56a20a337df19c2' }, "two"), index.h("span", { key: '5205ead387624f310cd64f301ca17773ab5c1be9' }, "three")), index.h("smoothly-table-cell", { key: '861582eff0124b03a5f97532322913181358c0c7' }, "five", index.h("smoothly-icon", { key: '356d04dbe0cf5b075f5776fe2aa1a784b108a8f0', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: '8b2f3d2f93d9b8e929032afb282ad982b85eaaa4', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: '226a638694ebf076a5919b431fe31f934c40af6b' }, index.h("smoothly-table-expandable-cell", { key: '7b7815d7615e48097ab17b841fde7cf5127dd862' }, index.h("span", { key: '0d237074de99748f00e5650c21f21bd608277de6' }, "nested expandable cells"), index.h("div", { key: '25c3656aa0a42e9da41fb5c8453ae5b50f5fb073', slot: "detail" }, index.h("smoothly-table", { key: 'd04902b2a68e1be3f897a460a4701cee840d4497' }, index.h("smoothly-table-row", { key: '6f8378ca445613c84228bb6f79e33b5c925fda62' }, index.h("smoothly-table-header", { key: '01406ab549f571dc9f1b7c93694976cb998516b0' }, "E"), index.h("smoothly-table-header", { key: 'e184ad1947135d32d095739c11e37eb663ed76af' }, "F")), index.h("smoothly-table-row", { key: 'dcc40d7510958ceb58f607f1b00bbfdcfa07088d' }, index.h("smoothly-table-expandable-cell", { key: '4bafb838bfce5358ded7456e18bf4e6b01955625' }, "e cell", index.h("div", { key: 'a7a29a42cf1498dd930b211a8c13fa61e4e0f5c5', slot: "detail" }, index.h("smoothly-table", { key: '5fd8eb9523d42adcf8beb802f3771551dc460269' }, index.h("smoothly-table-row", { key: 'f2186ed8479e075b0a917ab98094cbbef29d4da8' }, index.h("smoothly-table-header", { key: 'e0ddb5223b0831808a39d31c8b6e6b2bf57cd423' }, "G"), index.h("smoothly-table-header", { key: '9e3e6fc6f31039d520fa323a7f5549390cc17f76' }, "H")), index.h("smoothly-table-row", { key: 'deeefaba22b977edcf0412d7bb8cb0b426bb0e54' }, index.h("smoothly-table-expandable-cell", { key: '88821dd02885d589f8085f23e6f36c80d13b2d17' }, "g cell", index.h("div", { key: '39dbd0b03e45454d7d250e678ecbace797de9a0b', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: '4d37286adc530cbfe80455a4a66b19c1eef62c7d' }, "h cell", index.h("div", { key: 'b44f5357b900bb7231516f03f9cb78b5f012abf0', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: '6d8088c01c1946415d2e6ecaa452a21d08c0027b' }, "f cell", index.h("div", { key: '55f8999fe29ca292d0aa58568e7ce8a420054f8b', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: 'd5f68a4ec6b87f8852b1c8e7cf197a6b33d65289' }, "b cell", index.h("div", { key: '0b45b5765eb119e4b040aaf9c269f32cc51f847a', slot: "detail" }, index.h("smoothly-table", { key: 'bd483dfee993041149aa77d4b1858662de73542f' }, index.h("smoothly-table-row", { key: '152f5e9742fe66c3d10bb95d697fd89c291e504b' }, index.h("smoothly-table-header", { key: 'd10c9873ca10d7d0ec3693bc1170bccd2d6d3950' }, "C"), index.h("smoothly-table-header", { key: 'd9b0595ab82b9463074253048186a263a80dbcd4' }, "D")), index.h("smoothly-table-row", { key: '13c97897313ad8ed43bb275a796aff2d946d0956' }, index.h("smoothly-table-expandable-cell", { key: '216b700ed3d29cee790d9040624195981b421b42' }, "c cell", index.h("div", { key: 'bffd6278082600b414b1df53d4309b75bc519a7f', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: '63f23114f39b396fd6a2b76bf1b42bd0311dac47' }, "d cell", index.h("div", { key: '1d7b427855aa5171459f09a8d30eb1fd08a7ca5c', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: 'd7d1f71d7dd493aa647ddd78cadafe6c1e2165f4' }, "Demo table 6"), index.h("smoothly-table", { key: '2f54b456aa9dd3df462698ec3574d05629371bdc' }, index.h("smoothly-table-row", { key: 'b3e44cf670beb3480231a53bd64f6bfea4a93764' }, index.h("smoothly-table-header", { key: '58fdc45c8f914d6fdddb7c163b386341658ab80d' }, "display"), index.h("smoothly-table-header", { key: 'd200bcfe5dc61905e8cac792fc09ccd5868be188' }, "contents")), index.h("smoothly-table-expandable-row", { key: 'e0c5ac990df41da2e3af26a8384209eb2f750a34' }, index.h("div", { key: 'f8053809f0e8231645c4275586daf98c5a006c67', class: "content" }, index.h("smoothly-table-cell", { key: 'd3455132fb39edade7ce473444b8121d2c4bf4b4' }, "A"), index.h("smoothly-table-cell", { key: 'a1e1998ec1205c136b14e178d998ce962abd0f9a' }, "B")), index.h("div", { key: 'a091c38f2c87095be721d707b5c2311f09cac5dd', slot: "detail" }, "expansion"))), index.h("h4", { key: 'a121efde3449fe3b0d137d833b6ae341b504e461' }, "Demo table 7"), " ", index.h("span", { key: '1cea473703f5570ec3b831a9b82cf560d626e480' }, "nested 1 then normal"), index.h("smoothly-table", { key: '6e48019d21d7fb678d1b326cc642df179281eb95' }, index.h("smoothly-table-row", { key: 'e7802be1bba803eb03a384d9f1c42f62f5d390d2' }, index.h("smoothly-table-header", { key: '40e805e08a0668a530c3bb4689160f8201f6b8ac' }, "A"), index.h("smoothly-table-header", { key: 'dc4682e849e8a2ee8404141eaa64bd313bd3f1de' }, "B")), index.h("smoothly-table-expandable-row", { key: 'fe90bd61f27a568eb9d08a7608a6f8fa4afb6d50' }, index.h("smoothly-table-cell", { key: 'be5a961485f323b6a7adbe07846671ea5e44e8aa' }, "a"), index.h("smoothly-table-cell", { key: '86849f70da4daea9146fe368ada9af469ca0e24e' }, "b"), index.h("div", { key: '536a13f511d78941b60fd0ca66df440dd812d36b', slot: "detail" }, index.h("smoothly-table", { key: 'cc64421e35a9b194244bf65f62bf912d45b7473d' }, index.h("smoothly-table-row", { key: '2c779f4ca95c05227dc716da7ce5a6b2bc1478bb' }, index.h("smoothly-table-header", { key: '134c7db01d37c2eacb5657b5a5412ee1c49afad5' }, "C"), index.h("smoothly-table-header", { key: '2ea508f7502be2f0a7346bdab7aea557c70786d2' }, "D")), index.h("smoothly-table-row", { key: 'dd7e394bb923e671fd77ec9e92d1e0f988582fcf' }, index.h("smoothly-table-cell", { key: '9b816eb941de433187616b5dc19e298d5531953c' }, "c"), index.h("smoothly-table-cell", { key: '4ecfb6cce1d2f0f7233d7c28ae658bcb102bd393' }, "d")), index.h("smoothly-table-row", { key: '4ee2dd20b58148f56cbc82fbc50e56dc478a1773' }, index.h("smoothly-table-cell", { key: '2cf709ba94dec6405acafc6bf51df9a000442c47' }, "ccc"), index.h("smoothly-table-cell", { key: '191db9f6db47fde77b2ae13a99708281e408a419' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '9348628506f543af56c015787e067845490a5afb' }, index.h("smoothly-table-cell", { key: '5a27eda4518331ebdff51e19f868b54ba81d3db0' }, "cccc"), index.h("smoothly-table-cell", { key: '19491dbe0a49fff575e6f2131f21cd567142664f' }, "dddd"), index.h("div", { key: '0cc05beec1eb2a94276e67e349549b1181c2800d', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: '6ad3a5ad78d7a13ee874aa1e34454b655151e212' }, index.h("smoothly-table-cell", { key: '5f87aefa8c343fed00ded2056f2a3bb4a7bf81f4' }, "ccccc"), index.h("smoothly-table-cell", { key: '6f4cab1a6e713e9919721e943f3a311babdbc514' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '2ade8194c8c81a2622075119bd0a774a8e895255' }, index.h("smoothly-table-cell", { key: '0ca024ae4bfbc7ca1736740bb99a23fd751eecf5' }, "cccc"), index.h("smoothly-table-cell", { key: '30b6ebead0a09cc72778937cc2c8a09cfaac9264' }, "dddd"), index.h("div", { key: '86684916edf971ccda8b60f99a9b14fca41ef807', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: 'a32d1ecac3af32f7d3f1f649e011b08de7d3c169' }, "Demo table 8"), " ", index.h("span", { key: '11805bd521860c5331c8b9f0d4a8a406c014ba61' }, "not nested"), index.h("smoothly-table", { key: '4009576336308323853efa04d38751a57700285b' }, index.h("smoothly-table-row", { key: 'e2844f71096510bb9b20f4e0bc48d9927671b78f' }, index.h("smoothly-table-header", { key: 'a63ac3e592875b8426dede361e956bd6b4662406' }, "C"), index.h("smoothly-table-header", { key: '4c436af23c1b72bea53a2746c284f6a5cd62b1f0' }, "D")), index.h("smoothly-table-row", { key: 'f6c7c46e2add524b441b29034577ff598c7f81a8' }, index.h("smoothly-table-cell", { key: '82eaf9546f4fd04ffd199d20139668a9612765a1' }, "c"), index.h("smoothly-table-cell", { key: '131125bdafc52dc560a2def28a0bc9166f2fff79' }, "d")), index.h("smoothly-table-row", { key: '236112fe5d153cdeb63b046273f8cff31cd5b22f' }, index.h("smoothly-table-cell", { key: '688d94753909a1fd3801bd6d1dc3dead99e67b40' }, "cc"), index.h("smoothly-table-cell", { key: 'bc1caa7f054e948ec18fec235f4b2d06a32402b1' }, "dd")), index.h("smoothly-table-row", { key: '23b9f9f34f4b2b7da11704a85b9fe375e3fedc79' }, index.h("smoothly-table-cell", { key: '1a126531b75c204a734c9b5e0b1bd3375b0fb6ab' }, "ccc"), index.h("smoothly-table-cell", { key: 'a115c869e5d45f6752d7f5e041b4d08a0bab78d0' }, "ddd"))), index.h("h4", { key: '6feebb9f06c57f279ab8a60f5d3243090a912e48' }, "Demo table 9"), index.h("smoothly-table", { key: '29c4d826c117b47c733efa914407f3f29d25701d' }, index.h("smoothly-table-row", { key: '3227be3032ba5f29711afe3269df22685be72a73' }, index.h("smoothly-table-header", { key: '076d1c42e20aebc7584ea5dd5165a33f45382cec' }, "First name"), index.h("smoothly-table-header", { key: '1110901b7d4d40f6c16a9485078640d1148c00f3' }, "Last name"), index.h("smoothly-table-header", { key: 'b9e61cf76ad893838d961521611ed26a3fe55c34', style: { width: "1px" } }, index.h("smoothly-icon", { key: '3a9cc9fd79801293bdad68ab70a74e370ac4d132', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: '1d02f306f52f865ce010e64acb2929228c7bd15e' }, index.h("smoothly-table-cell", { key: '848030e2325ec5ff5fd539752323e8283b131832' }, "Jessie"), index.h("smoothly-table-cell", { key: '30435bba21263764657b3eb41ee0222e15501bb3' }, "Doe"), index.h("smoothly-table-cell", { key: 'a6edb66a4e6edaee7fb70bcbbc4b9b41928155f4' }), index.h("div", { key: '50629ea722f0569758f015bd0437e8a1d66bb045', slot: "detail" }, index.h("p", { key: '87a784ff6f169396885a315e6ad6b0920b22e319' }, "This is Jessie")))), index.h("h4", { key: '0ffdcaa8b0e2b82be3abb880610f323281830765' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: '193fbefb3e6994c6252b159399a2216304d53c30' }, index.h("smoothly-table-row", { key: 'e872ad769cc23dcf369076776b439a7a5913420a' }, index.h("smoothly-table-header", { key: 'bb5573cec75c0a96ce64b417a5950ecca09593ab' }, "Company")), index.h("smoothly-table-expandable-row", { key: 'c8e12a4f92615c3b1dca5ea5434386d6d608682a' }, index.h("smoothly-table-cell", { key: '0f2496508407c14acb8820c22c05822eb9090f1f' }, "Proquse"), index.h("smoothly-lazy", { key: '5ebe1059422b7b05546f0e684da832f9e66befde', 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: '19f0e2c1a5003808858d23dbc48547efdc650c95' }, index.h("smoothly-table-cell", { key: '2e2b0d6eff03ac53f522764140249a1a37b4b7ef' }, "Pax2Pay"), index.h("smoothly-lazy", { key: '72de23a4e67b331f5d8cfaea9412945b29a5de37', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: '8e3f421528e5484987efef812df2e3856f3b17c6' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: 'a4e8d1cb657daea4266f45f6623e54fdf130977c' }, index.h("smoothly-table-row", { key: '8678c8072d2e3ef513c6425290031678cff5d928' }, index.h("smoothly-table-header", { key: '6bb9b99332a14a4ce86049e0b7aa0165b8a71767' }, "Company")), index.h("smoothly-table-row", { key: 'e5a05489897c5407917fa63be289fbb205f2e02f' }, index.h("smoothly-table-expandable-cell", { key: '3180fe43068e9ff3a03dd19099f75adbf6c268ca' }, "Proquse", index.h("smoothly-lazy", { key: 'b66009b63c479e33b057c64c447f78c2cb030666', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: '073a56f66b9896ec6b36f4c044046dffc71f5dc7' }, index.h("smoothly-table-expandable-cell", { key: '8fd513b716f561d50e281e51797126bd1dd87952' }, "Pax2Pay", index.h("smoothly-lazy", { key: '61e795ddcfb53acc6b3598bf944b00a5a4254278', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: '554d064b27480332a853fa3aa74e6b04a7298c06' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: 'c99a3f2196512e9037ddbca6ae12de38d2d3b0e0' }, index.h("smoothly-table-row", { key: 'dc20930e2fa94a7b6be76b96c780fc308f233104' }, index.h("smoothly-table-header", { key: '41206e45c194741515bec5503db4080b5846ab6d' }, "Name"), index.h("smoothly-table-header", { key: '5c80fb1c5ffc1b9a3a26ac36e052a96b06c352fa' }, "Age"), index.h("smoothly-table-header", { key: '2fac1535bd56aa78fde0c5f68163999f87f19b16' }, "Location")), index.h("smoothly-table-row", { key: '774d89720aac88456620fad2aa294313d3a4026d' }, index.h("smoothly-table-expandable-cell", { key: 'c33663348ac58721578053b1e59794d018285725' }, "Jessie", index.h("div", { key: 'a06d9bfd6935dec6e35494e4700ce73fc804039a', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: '286b615fefab1bc4c45e2476541eb2c8379c6bca' }, new Date().getFullYear() - 2000, index.h("div", { key: '82ec68afb6a3552bb0f323c9074e36689f42e0b5', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: '745bae86ec773951391956639c035b13d0ff5655' }, "UK", index.h("div", { key: '12d29d81ccf035f307747c50f14ca69663e69181', slot: "detail" }, "London"))))));
     }
 };
 TableDemo.style = SmoothlyTableDemoStyle0;
@@ -12567,18 +12587,18 @@ const TableDemoFiltered = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: '7e89b205a06c9f1d524782bc39ed0f76333c48da' }, index.h("smoothly-filter", { key: '3e0c0425f82e1d0b3712992d7fb80196db67b9da' }, index.h("smoothly-filter-toggle", { key: 'f83cf44f38531c9e4c18d3fcae37b7b6c8cf01f4', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'f114642fb32785594437c21f15f3c0827a1bc17b', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '73692bcb3101f84dcc250e951a8290d629d7ebe1', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '83a177fcc8b2ffe94babf679fb903a0d3f377020', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'a7bafbb133c673c03aefc84146548d1b19918556', label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '7c04accc5a76683442261f6cb23a61b553dd1dbc' }, index.h("smoothly-filter", { key: '7a1960d7637718005c16814b825e0717ef6de467' }, index.h("smoothly-filter-toggle", { key: 'e545003a8bcb7ad76782d143e3b0d0d52c13deee', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '1b59e1701b91822da437dd5db289fe72b84e08e4', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'bb88ce9e07b0d003a1373ada9f3ec21a88361a7a', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '35a4c1ea2c4f3538965fbc4611abff257a21c64e', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '133339d67b5ea09a456eadf89e6b7b836d4a02d1', 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: '41efc9c597771832388683aab2e074e8bfe9023b', slot: "detail" }, index.h("smoothly-form", { key: '880e4ab57cf803acedb7eb5fa6bf61940b7b8091', looks: "border" }, index.h("smoothly-filter-select", { key: '3bfe3c2822cf97f9e4f71a634f927a3be723bfbd', label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '3520ae0be7fb526fe688e4389fda908369b57c38', slot: "detail" }, index.h("smoothly-form", { key: 'bbec4f5d3a7446205e1490fd891851f01a398343', looks: "border" }, index.h("smoothly-filter-select", { key: '923a40b42a516bdf1d8ec11502068de700972cfe', 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: 'b12933b3e188c7fa9d36168e501665873435d1d1', 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: 'a761a0966af375330aaba63810f252e4caa3ced2', label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), index.h("smoothly-filter-select", { key: '9bbb2a64f7011c6ce2a496119173f5f7caae7bb4', 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: 'd1b9d3f942f5307afd5a794e7be82796b748dc17', 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: 'b55b4c494826458bcd6dbbac7e077dc813d28f27', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'e2a623792c3251b7d93d8d583405dd8766b3cbd6', 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: 'a13b4aebd242e36bcb2413573a94d07dddee846f', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '75e9f70d0bd04e5b7c87d47f0724095e51d0cc07', 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 = {
@@ -12634,7 +12654,7 @@ const TableExpandableCell = class {
         event.detail(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: '808fd676f21ae7f63189c1ed769f5726b5caa72f' }, index.h("div", { key: '14a42d8a10b2b360dcc0cd0a229a580e04737abd' }, index.h("smoothly-icon", { key: '135e8aaf4323b690e97213b08e8b5535d6c8f145', name: "caret-forward-outline" }), index.h("slot", { key: '7f483ac11de8750c332a430abc0557be90ea37bd' })), index.h("tr", { key: 'a7a95e974d4ab556715f89376c9284f947bf3052', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: 'a9e6d2127b555bd6b91cfbba9af1bb12ac2d5977', colSpan: 999 }, index.h("slot", { key: 'fb3c0654386bffd51f0e666508431a53965195e1', name: "detail" })))));
+        return (index.h(index.Host, { key: 'f411536e1e40a6e88dfe7a9c7629c5b58564f7b5' }, index.h("div", { key: '9d6a7345f698eb817ffffe47193e4a65db4befb8' }, index.h("smoothly-icon", { key: '18c56a090eb5c1badb143ee5eae67c96599f2ba6', name: "caret-forward-outline" }), index.h("slot", { key: 'fa98b3e1e3b995427630691dea8af39cef643da7' })), index.h("tr", { key: 'dbcac9fc20df892fbf8442e44b7d57599ced4acc', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: '7cfd2871877b0a9f6d98f1211eff4c66f1143c8d', colSpan: 999 }, index.h("slot", { key: '09d2d7c4e768455c322f19042184c17fcebfa44a', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12670,7 +12690,7 @@ const TableExpandableRow = class {
         event.detail(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: 'd03993dc82724315772638202e3d042a7d766b61' }, index.h("div", { key: '8af4f611d4b436dc8468fda6994b29d12c46e368', onClick: () => (this.open = !this.open) }, index.h("slot", { key: '0f091ff804221336d3c4ad1439cb4f4df1867971' })), index.h("tr", { key: 'a52a4da91b542aed37b792a24fad2defeae077fd', class: { spotlight: this.spotlight } }, index.h("td", { key: '502bcf07e4c8a43a35d1dc99628b3c19e6e65337', colSpan: 999 }, index.h("slot", { key: 'f8271e5aaa5dece22256e758025fe0c9ebef77b9', name: "detail" })))));
+        return (index.h(index.Host, { key: 'e23e27417222e7720baeac8551b60abc10a0842b' }, index.h("div", { key: 'eac1bd46882b2df478999e5fc62f1b96dfbb2e99', onClick: () => (this.open = !this.open) }, index.h("slot", { key: '7335f2e1e36304a44b749480e052cc9534705c13' })), index.h("tr", { key: 'a7bc18eea142d709203c5424a0a5c630640de4e4', class: { spotlight: this.spotlight } }, index.h("td", { key: '7311c658043396c5b902fa4b1b8afda5c64daa42', colSpan: 999 }, index.h("slot", { key: '069bcc48a059cb7d4955f01e4a105ff3b55365ed', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12688,7 +12708,7 @@ const TableFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '366472017dd6ced157b3c13dbed21b18f5d4afb0' });
+        return index.h("slot", { key: 'c8607ab14808db4426066e52b68f3daec99d8d09' });
     }
 };
 TableFooter.style = SmoothlyTableFooterStyle0;
@@ -12702,7 +12722,7 @@ const TableHeader = class {
         this.name = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'd6bbd0deda2293d2f0767b64de6ef3e96a6fc979' }, index.h("slot", { key: 'e43a6de99c586b0bda8e4fe6a4845303c226048f' })));
+        return (index.h(index.Host, { key: 'fbef0c06051b00b98e84b0e7313b605f53b9d4c0' }, index.h("slot", { key: '0886ac73a5692fd482ff781f08659170cac91640' })));
     }
 };
 TableHeader.style = SmoothlyTableHeaderStyle0;
@@ -12732,7 +12752,7 @@ const TableRow = class {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.after(event.detail);
     }
     render() {
-        return (index.h("div", { key: '666cb04189c53ad35e8ad078dd780b3989714e60', ref: e => (this.element = e) }, index.h("slot", { key: '816f9d7a88457912f0e3cd5f6298f8462135970c' })));
+        return (index.h("div", { key: '977cefc7438a7212a424ab903b2378c1cbe40a71', ref: e => (this.element = e) }, index.h("slot", { key: '2b8dab0ef5559cecec9989770a6d012ea6812658' })));
     }
 };
 TableRow.style = SmoothlyTableRowStyle0;
@@ -12774,7 +12794,7 @@ const SmoothlyTableTesting = class {
         this.counter = 0;
     }
     render() {
-        return (index.h(index.Host, { key: '5648a38718203e12eaa67cce3097c3dfc138cdea' }, index.h("smoothly-table", { key: '6dc3f69ab19c5e94dce6fc2e2ff7dc8c712fbb73', color: "dark" }, index.h("smoothly-table-row", { key: 'b6e56343dede2fb9f17cc569673081d1113359eb' }, index.h("smoothly-table-header", { key: 'f19ce75f56f05bbad834f01c895f0ccca7808528' }, "Type"), index.h("smoothly-table-header", { key: '854acb3340db3f663ad44a670d40f0c6f2d1bec7' }, "Name"), index.h("smoothly-table-header", { key: '6d071c920967bb089a1013d241923d8dd8190547' }, "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: '10bbaddce7cc1951f42157c1b98ba813bf9951f2' }, index.h("td", { key: 'c63de455f4fa7bb560a483396a36d15c3abf0377', colSpan: 2 }, index.h("div", { key: 'd5d83339fc626e695fe2a54b229b227f84584814', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: '6dac050dbbe811722b94385ba89d5dda9b672de8', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: '2fca25d5e730d4b6ec31157db2a1954918cb5062' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
+        return (index.h(index.Host, { key: '21215a09e085871094148e63d5f5466e03f3bb1f' }, index.h("smoothly-table", { key: 'ae858527f73f8383a03ba5434f781711d3afbcb0', color: "dark" }, index.h("smoothly-table-row", { key: '4b1489fdf2a2eb36f7c77b7857ea245ebda37c65' }, index.h("smoothly-table-header", { key: '639831c9d6202b8a281dd8d1a5728e9b4cdfc3b9' }, "Type"), index.h("smoothly-table-header", { key: '90c244060d544ef5added3b185f433ce77bd5199' }, "Name"), index.h("smoothly-table-header", { key: 'b99d1ffff751880b5de32e1ea70624e529a57b9d' }, "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: 'd2ebd8cad2d05ad755d59d991af67d0dbde5d686' }, index.h("td", { key: '2ce095b524e4783878894495137474f8944d2fce', colSpan: 2 }, index.h("div", { key: '6455b857455fc13f7f599a213989e7bcfdfee12e', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: '9931a3776728423f6df73a042a043544a62cf0f6', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: 'f08ab8a84d8cfe3b95c769c2f9741b31798ec1f6' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
     }
 };
 SmoothlyTableTesting.style = SmoothlyTableTestingStyle0;
@@ -12806,7 +12826,7 @@ const SmoothlyTabs = class {
             old.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: '03c4aac613f91d7e18c8ab96c9ae797a468da427', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '5984c55b9acfbb1b1980223c62f4ecaff0009cec' })));
+        return (index.h(index.Host, { key: 'a5b7b0582045c02167439c2fcec55f86f4fa9b33', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '50e183b3c4b2d4e30408503415186348db3021e1' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12823,7 +12843,7 @@ const SmoothlyTabsDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-tabs", { key: '5f79f0587df1ec966586984c14ad9390b9a4293d' }, index.h("smoothly-tab", { key: '92ca2b4b3090400a1509f0ce1e61a14365297c0e', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '40cfd71a2ad44e3ffa4fd3f3060dc394c9ee36a5', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: '16c1d576d687a30ff8fb1fb534a007d53af64587', label: "test3" }, "this is a test message again!")));
+        return (index.h("smoothly-tabs", { key: 'be38f49689f79e21017a0573f3a197e708b9563a' }, index.h("smoothly-tab", { key: 'ff0d2c06e9cc5080080eba71891035e0763e11c3', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: 'fed1c968c786138273891e5ed4a86fe40867bc75', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: 'fa1264ff5d40850f4ed5af19f8417e24086b0825', label: "test3" }, "this is a test message again!")));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
@@ -12837,7 +12857,7 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'd44937141874c0438806f87026be2d27f5cc82c5' }, 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: '6b62e176f604438b62079881c825805090b1cd06' }, 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;
@@ -12889,7 +12909,7 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '793d95d5f57a5f91b7ba2e5daa519da8c497d68c' }, index.h("h2", { key: 'b4f8bff98ade37d770bf4d2abb06990892a025a9' }, "Theme"), index.h("smoothly-theme-picker", { key: 'e320933588db47a00bb1885127cd0381e4701d41' }, index.h("smoothly-item", { key: 'f44f44a9ddb381fb3b5c6f82debd892fadd4a014', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: 'a2d1d8e98ad92382fb6c6a924e0c210772b8ea39', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: 'bf14c312720ac6b205c74ca6c597da1451f8f860', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '69f04bd6f92140d2dd953bdc1830c11a4f659eb9', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '705b60314edf91a54b3da938c9765873690e3816', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: 'a04d55f62e07ed512856dcbf15bb33978a1ce81f', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'd70c4eb8c2a9749570484ead07e24cb2a9ffbbb1', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'a452689da71c4e83a58668ed0a2bdcb58d43c32d', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '40d3fd59c77de2777cb9bc8dbe381eac06bd238f', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'aaf07a1f34d3af2b8e95b7d99d13f3f4fcfdfadc' }, index.h("smoothly-theme-colors", { key: 'd7be8b7089e5204bf4f2f18f1b50fe98c79a6761' }), index.h("smoothly-theme-guide", { key: '285d50658ed6911104036007a485602642923792' })), index.h("smoothly-button", { key: '48c1366384b380b423282ad95ac1536b0d5c6916', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: 'f11fdec530ed5ab393d65ecdb79240f8fcbc414d', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: '42372ad9b8992368789b59a4a06ccb02714e98d9', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '7bd40f4f9d1b33ad4ca657f0fd958b58cdf6059e', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: '6cc1af72ad0bde9d00142122a3fa5ffca03bd026' }, index.h("h2", { key: '86c4634e5fe177e7c2e189131abd4a9a2666e6e0' }, "Theme"), index.h("smoothly-theme-picker", { key: '8f7a62dfa572b27ba905d66bf06220f8193b456b' }, index.h("smoothly-item", { key: '729459a73f5e69894914525c052901d5fa9ecd04', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '106fe641b9432d7e247b2199f0a6b02b0535e16a', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: 'c9e620012e86a505b5b5b14ab18d3937fca0dd78', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '35b0d982c84685b3a273dd8a95a86f6b88f723e8', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '136f49334873f0712b255ce098b3f0d98266b32d', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '7cd89c94b5fa0d247b41b34968fc5d1399f09c7c', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'c78fe4025f4bf6c5e3e072d80037b310bbcb7ca9', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'afec0e7fbfcf13b58dc27c5f53505eb39b7c16b5', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: 'f6f40516ff6ac8b26d66a3208bacdb272a7970ff', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'b1ef136924f073771ac50bf7c7804e18d2b92610' }, index.h("smoothly-theme-colors", { key: '311644a5f6988d684db4d28ae0b21a604a656a63' }), index.h("smoothly-theme-guide", { key: '6b2feb5356e74bedc53f8b03cb18c33269ca1830' })), index.h("smoothly-button", { key: 'da921eb58fa407bb306a97648c64a6ecf4695fd0', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: 'f0a9118be465d5f5392cb2d2c6643026f57e714b', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'a4ceb0c7b0c5991b7acd2e7440eb9ea0f4f0f05e', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: 'cbc41766769adc5c07ff3b7f20c34704abde6587', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -12903,14 +12923,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index.h("smoothly-display", { key: '7f0294ef8ef07dc2514f067d30a11d5465cefa0a' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index.h("br", { key: 'b018237ea4efadaae929785cae725c4697fdabf5' }),
-            index.h("smoothly-display", { key: '1391886555ce154328f44ec0015a9127876a54dc' }, "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: 'ba2bd49747e83cb59c7d00ec501fa58e2f3c62bb' }),
-            index.h("smoothly-display", { key: '15b98ab34d5d139994ae6e5de95dcdf9a4995ff2' }, "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: '2c84a19dac4e5a0d37b7f5a63bf7bccea47c8498' }),
-            index.h("smoothly-display", { key: '02c9de731cbde79f35a93cf169c63df3839f38ec' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index.h("br", { key: '5087d642ba0649363a5513f8d93fe2acafd59692' }),
+            index.h("smoothly-display", { key: '77d5537d9483e58433a0266d3065098bd601951e' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: '1dbf202ca245580dd88f2c421c15cb4dfb26c587' }),
+            index.h("smoothly-display", { key: '726ff57a55bb51989ba4bf685dff2dbcfe4ef426' }, "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: '0adc33d33ac13615ed96d7d27d137e255b4adb08' }),
+            index.h("smoothly-display", { key: 'c94b2390d510756fa9fbd8c4346a2f73be1e30fe' }, "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: '5ef4844dd3f283b53e31a9ef0c7de293a6d7f60f' }),
+            index.h("smoothly-display", { key: '65a03835a4ea17a28fbddb87494a8a763859040c' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: 'd6780671360b0d3905174dec43a0082eed28639d' }),
         ];
     }
 };
@@ -12925,11 +12945,11 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: 'ed5111e30efa517b5c6c247c19f3cf0a53d387f8' }, index.h("smoothly-input-select", { key: '9c899632ac4c1d0e5ef5f9fa14093067bd0b3e67', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '7e83f623fd4e94e7b476f6373a83405ad9ba2512' }, index.h("smoothly-input-select", { key: '36388d703eaa1c25655ab9bb2734b9e4b91c8ce5', 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: '72d5d5c54b6c1703a1396e7964e1e8a937d05416', slot: "label" }, "Select theme"), index.h("slot", { key: '9c622ea4dd736b299b4766632f80d0b7fee5270a' }))));
+            } }, index.h("label", { key: '6e4b9e3003adc91bbb7aa6402fca451e7aa51d12', slot: "label" }, "Select theme"), index.h("slot", { key: 'a585a8dc4713ef8e26a2c6baf95a5503db41fed6' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -12950,7 +12970,7 @@ const SmoothlyToggle = class {
         this.selected = !this.selected;
     }
     render() {
-        return (index.h("button", { key: 'fc4e0302087404b96ad3979140fcce6cb6710451', type: "button" }, index.h("slot", { key: 'a30c63b58741834aee67392b338fa882c8e46f52', name: "icon-slot" }), index.h("slot", { key: '218d4c315122ec36ad3e017fd5b3724d6a122f60' }, this.name)));
+        return (index.h("button", { key: '500f95b2ef0cf7419d29ff7a518c63b0229bcbcc', type: "button" }, index.h("slot", { key: 'a16785326bfb15b9a6b3d36d421e18c174064241', name: "icon-slot" }), index.h("slot", { key: 'e78f86bd135d536d8e8c4473976836ea61eaeba8' }, this.name)));
     }
 };
 SmoothlyToggle.style = SmoothlyToggleStyle0;
@@ -12974,7 +12994,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index.h(index.Host, { key: 'fea96dea98bbf7d62dbb82821d363ee2b492ddee' }, index.h("button", { key: '02c4a22dd09328a1e4b8c13441c6d1e365661efd', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'b4e41dc3f88730a34fdd35319437eebb6a8bdd92', 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: 'fc3ac94f429ce8710d1a256a9cf726fef48ef085' }, index.h("button", { key: '62c6e4e69b9cbdd2067a7dbd44650a2f8a9dd5fb', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: '6315f2dd489ba9b549dd71ab234f706e552169fc', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -12987,7 +13007,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '031da63d1248ab68490e544deb8f5bdd7b9aa2c3' }, index.h("h4", { key: 'a2a24ec94bea9dc2cb260361d32515c8549dffed' }, "Toggle switches"), index.h("div", { key: '9337624286e61cc2f5f5e31368ed4b16cc39ba43' }, index.h("p", { key: '640fadaed7ecd9b09780463a453e6fb156905e10' }, "Checkmark"), index.h("span", { key: '909509d2a95692c5f27b50b7323b647cbda2a0d8' }, index.h("p", { key: '9d74e64b1c52affd7a702c5ddbf4c7e919601c4d' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '8c53dc0a44a96e1916eea6999351ecd085aa0a53', disabled: false, size: "tiny" })), index.h("span", { key: '44376aa3af440c53330ac3257e987fac566c35b4' }, index.h("p", { key: '9535aa348024765ca68ffa60d6c354f05e8ee226' }, "Small"), index.h("smoothly-toggle-switch", { key: '27f834ea5aa77af4721481c9d343cb4e9b62e34f', disabled: false, size: "small" })), index.h("span", { key: 'e77a16d23997e88e4ebaadbfe8676ccfcbbc9dae' }, index.h("p", { key: '00c71961096e623b68e60c583feacc5c71359943' }, "Standard"), index.h("smoothly-toggle-switch", { key: '8e94223b118fec6aea600dba4e9afbcd6cc4e203', disabled: false })), index.h("span", { key: '9fc15593113054ac85c21f1a4127ecc86becc2ed' }, index.h("p", { key: '3bcd2e36e3d61b11bbda767431cac1910b9311e6' }, "Large"), index.h("smoothly-toggle-switch", { key: 'e5a1f5ad8c174a70c7a5a29292241135a3daae6d', disabled: false, size: "large" })), index.h("p", { key: 'fe22ed85901e7e3661dfc821a9a58da54124543e' }, "Colors checkmark"), index.h("span", { key: 'a9771555699ffb9c30788ffda3d7b4f47c8f8bb8' }, index.h("p", { key: 'aa8f40d3c1f73d02f99976a876dc357c0a1de12a' }, "Danger"), index.h("smoothly-toggle-switch", { key: '06c3b768b63ee51317b65ee059cef4eae94e84f6', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '5ccb146347cade3819b99bab890ba789bef1372f' }, index.h("p", { key: '6b801be2fa3f184b7d6698d8d1ef572798405ddd' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '674498717c90d62348c36f90cf8741cd5b5ab8ef', color: "primary", disabled: false, size: "small" })), index.h("span", { key: '6e5574c91e0679064ba65ebb07a1b69df33208fe' }, index.h("p", { key: 'e0d51f6819de46a94fe53c44f2bda7b50bf2a1cc' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'd1f091c1a4def71356eccf4e8bc766b55fb8a473', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'ed84ce6fe56f70515993b7e423aeb8d7176dc4d4' }), index.h("p", { key: 'd067af60c3771ac4c0be199a7f3e173c79bd4192' }, "Colors no checkmark"), index.h("span", { key: 'b0b4308eb7c6fbc1d466c84c6f0814f8a6306af8' }, index.h("p", { key: '7ea85b9d52fe1b1d666948babf1e633930b176ed' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'b660d7f1426c75cb3c24d69e2d67d06553016581', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'b6a7884663ade1816fc49962827cbd8936c2d8c4' }, index.h("p", { key: 'b7b33e9ebd268281cf5d654f416068c826202801' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '44b93d3be239010f082d740c21a11ce0e2866f1f', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'e6e6834c079cd6eb9a6ad4541b89649516265296' }, index.h("p", { key: 'add3788dad2b1590ddc89df7750fb44ad8e71487' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '4b22b4510c40a43547ea4b0bc73f73e53f1d20bf', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index.h(index.Host, { key: 'd44e96ed3c64fcf690af376a49719083911dba70' }, index.h("h4", { key: 'b8db83476c90da989c5a5352685b8f5a076ca17f' }, "Toggle switches"), index.h("div", { key: '14f1cb978354b9e881eabafbd161085a3af37a95' }, index.h("p", { key: '9f0f7646a271bbc61113f0adc130604f469138d3' }, "Checkmark"), index.h("span", { key: '67e7f43bcbe9c1190254afd40dfbd1b2391f03f6' }, index.h("p", { key: '779eaae2ab25d007b2de1189ce3461906a4df4fd' }, "Tiny"), index.h("smoothly-toggle-switch", { key: 'be5f4b74488b119d76964b53329edbbf2179fd29', disabled: false, size: "tiny" })), index.h("span", { key: 'c12231fe652d0fb33cf0636d60ceb48c5c6f0376' }, index.h("p", { key: '0b2333abf721e95981da640bc5ed87f9c89eb350' }, "Small"), index.h("smoothly-toggle-switch", { key: 'fdc2dbd57714184aaea52428e085bbdf3233d6ab', disabled: false, size: "small" })), index.h("span", { key: '21d9ede7fa3fcbef7a37ae6ba3f7c4b8e69fe20b' }, index.h("p", { key: 'ba1fdcc8decd7f86bc3f616a3973ac3c33852e6e' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'fb02ae9d896a8fb7dafca574e15787bfb674c32f', disabled: false })), index.h("span", { key: 'e3ddae31c4189e48da19fa5b088fbc4ed7414c75' }, index.h("p", { key: 'dc8a4999b012325d07f62e31a7f1738ebc0abc1a' }, "Large"), index.h("smoothly-toggle-switch", { key: '8e07d6145eaecdba986368575cce31252e6095fe', disabled: false, size: "large" })), index.h("p", { key: '01c06d278717e3acd6f31d0776cd889f8201d5bd' }, "Colors checkmark"), index.h("span", { key: 'dace9a88be649b8eb1d9a83b2a2921a485741e70' }, index.h("p", { key: '65f3a51605a776c4bc08717dfb2ddd851692286f' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'efec024d66830f165c9652c3529dc918953dd26f', color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'f1f20496a7515df4a2c8dceeed09fcb5eb9ad91b' }, index.h("p", { key: '4d377d53265cc5dc9ad78fa3f0365b9fc09cdafd' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '07bc54d2fc990d30da5e69103027d43c04fde84d', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'ab5f67ca7e2065dff62124333146bd55f3e822cb' }, index.h("p", { key: 'c456e032a49febb89187eff9250d079a8582dec3' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'a30ea32233e7ce9552d1cda9a1a32c93275d8c59', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'd4112ad3ca78b9e20083cab4eb4110ceb499f711' }), index.h("p", { key: 'd4db8e46892e0f0b2242f8e9496055b422221b4e' }, "Colors no checkmark"), index.h("span", { key: 'd06820b06dcc667ea394694e9d8c35e2433565bd' }, index.h("p", { key: '4b843aa71ff9e222cc66fa344d22514b6a359df4' }, "Danger"), index.h("smoothly-toggle-switch", { key: '239102ce48ce29201ea856b8239e2c834a914610', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'd0234b78d0b106a7772e3ee6be1b132190f2b9b3' }, index.h("p", { key: 'c3fed6d338021198d517e1feea6f3462932aa13c' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '01d23428b82e7222b5885c099723c89f7b062597', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '5c29f75218d1a209f4c5466472ff751c586203a2' }, index.h("p", { key: '785a6a22e4687852a3405faadd6c3a456fb020b1' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'f7ea7e6e3955d52ea23217758642a7f07b58b45d', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -13018,7 +13038,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: '479c644915049bed07210f0d3af39c53972ffe75', disabled: this.disabled, name: this.name }, index.h("slot", { key: '0fd43622722659b0066b97965400ea1a054cebf5' })));
+                result = (index.h("button", { key: '9f90f57a800588f874792965f1342ac8fd9da77d', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'fc127bbbf5abe08d2fa85682f475e79bf9bc3aad' })));
                 break;
         }
         return result;
@@ -13058,7 +13078,8 @@ exports.smoothly_form_demo_date = SmoothlyFormDemoDate;
 exports.smoothly_form_demo_date_range = SmoothlyFormDemoDateRange;
 exports.smoothly_form_demo_login = SmoothlyFormDemoLogin;
 exports.smoothly_form_demo_pet = SmoothlyFormDemoPet;
-exports.smoothly_form_demo_prices = SmoothlyFormDemoPrices;
+exports.smoothly_form_demo_prices = SmoothlyFormDemoPrices$1;
+exports.smoothly_form_demo_schedule = SmoothlyFormDemoPrices;
 exports.smoothly_form_demo_transparent = SmoothlyFormDemoTransparent;
 exports.smoothly_form_demo_typed = SmoothlyFormDemoTyped;
 exports.smoothly_frame = SmoothlyFrame;
@@ -13136,4 +13157,4 @@ exports.smoothly_toggle_switch = SmoothlyToggleSwitch;
 exports.smoothly_toggle_switch_demo = SmoothlyToggleSwitchDemo;
 exports.smoothly_trigger = SmoothlyTrigger;
 
-//# sourceMappingURL=smoothly-app_109.cjs.entry.js.map
+//# sourceMappingURL=smoothly-app_110.cjs.entry.js.map