npm - smoothly - Versions diffs - 1.2.1-alpha.55 → 1.2.1-alpha.57 - Mend

smoothly 1.2.1-alpha.55 → 1.2.1-alpha.57

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

Files changed (453) hide show

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

@@ -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;
@@ -8617,7 +8637,7 @@ const SmoothlyFrame = class {
 };
 SmoothlyFrame.style = SmoothlyFrameStyle0;
-const styleCss$15 = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:flex;align-items:center;justify-content:center}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}.sc-smoothly-icon-h.sc-smoothly-icon-s>svg{width:100%}";
+const styleCss$15 = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:flex;align-items:center;justify-content:center;box-sizing:content-box}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}.sc-smoothly-icon-h.sc-smoothly-icon-s>svg{width:100%}";
 const SmoothlyIconStyle0 = styleCss$15;
 const SmoothlyIcon = class {
@@ -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)),
@@ -8974,7 +8994,7 @@ var Key;
     Key.create = create;
 })(Key || (Key = {}));
-const styleCss$13 = ".sc-smoothly-input-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-h{border:transparent solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-h,[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-h>input.sc-smoothly-input,[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within)>input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-h.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .label.sc-smoothly-input{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h.floating-label.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.floating-label .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder] .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly] .sc-smoothly-input-s>[slot=label],.has-value.sc-smoothly-input-h .label.sc-smoothly-input,[placeholder].sc-smoothly-input-h .label.sc-smoothly-input,[readonly].sc-smoothly-input-h .label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-h:not([show-label]):not(.show-label) .label.sc-smoothly-input{display:none}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);overflow:hidden;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{left:var(--input-padding-side)}.sc-smoothly-input-h:not([show-label])>div.sc-smoothly-input>input.sc-smoothly-input{padding:0 var(--input-padding-side)}.sc-smoothly-input-h>div.sc-smoothly-input>div.ghost.sc-smoothly-input{position:absolute;box-sizing:border-box;align-content:center;height:100%;padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side)}.sc-smoothly-input-h>div.sc-smoothly-input>div.ghost.sc-smoothly-input>div.value.sc-smoothly-input{display:inline;pointer-events:none;opacity:0}.sc-smoothly-input-h>div.sc-smoothly-input>div.ghost.sc-smoothly-input>div.remainder.sc-smoothly-input{display:inline;pointer-events:none;opacity:0.5}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input{padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side);box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}.sc-smoothly-input-h>div.sc-smoothly-input>smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}[invalid].sc-smoothly-input-h>div.sc-smoothly-input>smoothly-icon.sc-smoothly-input{display:block;z-index:2;cursor:pointer}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:focus{outline:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:hover,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:focus,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--smoothly-input-foreground))}";
+const styleCss$13 = ".sc-smoothly-input-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-h{border:transparent solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-h,[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-h>input.sc-smoothly-input,[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within)>input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-h.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .label.sc-smoothly-input{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h.floating-label.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.floating-label .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder] .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly] .sc-smoothly-input-s>[slot=label],.has-value.sc-smoothly-input-h .label.sc-smoothly-input,[placeholder].sc-smoothly-input-h .label.sc-smoothly-input,[readonly].sc-smoothly-input-h .label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-h:not([show-label]):not(.show-label) .label.sc-smoothly-input{display:none}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);overflow:hidden;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input{position:relative;flex-grow:1;height:100%}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>label.sc-smoothly-input{left:var(--input-padding-side)}.sc-smoothly-input-h:not([show-label])>div.sc-smoothly-input>input.sc-smoothly-input{padding:0 var(--input-padding-side)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.ghost.sc-smoothly-input{position:absolute;box-sizing:border-box;align-content:center;height:100%;padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.ghost.sc-smoothly-input>div.value.sc-smoothly-input{display:inline;pointer-events:none;opacity:0}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.ghost.sc-smoothly-input>div.remainder.sc-smoothly-input{display:inline;pointer-events:none;opacity:0.5}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>input.sc-smoothly-input{padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side);box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}.sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:none;z-index:2;cursor:pointer;padding:0.5rem}[invalid].sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:flex}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:focus{outline:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:hover,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:focus,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--smoothly-input-foreground))}";
 const SmoothlyInputStyle0 = styleCss$13;
 const SmoothlyInput = class {
@@ -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: '2919cd51f7d7b3ba2176eddc1ff831816c92c987', 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: '5145e533a3a92d3af606feac8a293d3970c9ebf8', name: "start" }), index.h("div", { key: 'c3994ad092c25b645d28ee356abd6162b7e33f48', class: "smoothly-input-container" }, index.h("div", { key: 'd17593ce3fc28fd323aca60246cd5220be409d63', class: "ghost" }, index.h("div", { key: 'e36e8596487c7010d060895ff659a52ff6797c34', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '7c00c930e40ae6dc5d5af224235f41e1bcfbcabb', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '7575ecc7896b798e4005b42f7b6734344efe6657', 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: 'cf0a7fd7232276a7171dd4ab7e6a0415cb1cbf36', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '9bc5693244bb31c83ff78c101c6e1c324ceab39f' }))), index.h("smoothly-icon", { key: '9717625bea2486d73fe336222b1daa573fd5f381', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'c4517ef1496aaf425e4273264a85bc1fa0be7051', 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 {
@@ -9531,7 +9551,7 @@ const SmoothlyInputDate = class {
 };
 SmoothlyInputDate.style = SmoothlyInputDateStyle0;
-const styleCss$_ = ".sc-smoothly-input-date-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-date-range-h[looks=\"border\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-range-h{border:transparent solid 1px}.sc-smoothly-input-date-range-h[looks=\"line\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-range-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-date-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-date-range-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h>input.sc-smoothly-input-date-range,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within)>input.sc-smoothly-input-date-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-range-h.floating-label.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.floating-label .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder] .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly] .sc-smoothly-input-date-range-s>[slot=label],.has-value.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[placeholder].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[readonly].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-range{display:none}.sc-smoothly-input-date-range-h{position:relative;display:flex;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range>div.sc-smoothly-input-date-range>input.sc-smoothly-input-date-range{cursor:pointer}[readonly].sc-smoothly-input-date-range-h,[readonly].sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range>div.sc-smoothly-input-date-range>input.sc-smoothly-input-date-range{cursor:not-allowed}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));max-width:22em;min-width:18em}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>smoothly-calendar.sc-smoothly-input-date-range::before{content:\"\";position:absolute;box-sizing:border-box;top:1px;left:-7em;z-index:9;transform:translate(10em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;width:100%;background-color:var(--smoothly-input-background);border-radius:0.25rem;cursor:pointer}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{min-width:15rem;background-color:transparent;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}.sc-smoothly-input-date-range-h>span.icons.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}";
+const styleCss$_ = ".sc-smoothly-input-date-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-date-range-h[looks=\"border\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-range-h{border:transparent solid 1px}.sc-smoothly-input-date-range-h[looks=\"line\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-range-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-date-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-date-range-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h>input.sc-smoothly-input-date-range,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within)>input.sc-smoothly-input-date-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-range-h.floating-label.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.floating-label .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder] .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly] .sc-smoothly-input-date-range-s>[slot=label],.has-value.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[placeholder].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[readonly].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-range{display:none}.sc-smoothly-input-date-range-h{position:relative;display:flex;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range>div.sc-smoothly-input-date-range>input.sc-smoothly-input-date-range{cursor:pointer}[readonly].sc-smoothly-input-date-range-h,[readonly].sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range>div.sc-smoothly-input-date-range>input.sc-smoothly-input-date-range{cursor:not-allowed}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));max-width:22em;min-width:18em}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>smoothly-calendar.sc-smoothly-input-date-range::before{content:\"\";position:absolute;box-sizing:border-box;top:1px;left:-7em;z-index:9;transform:translate(10em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;width:100%;background-color:var(--smoothly-input-background);border-radius:0.25rem;cursor:pointer}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{min-width:15rem;width:100%;background-color:transparent;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}.sc-smoothly-input-date-range-h>span.icons.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}";
 const SmoothlyInputDateRangeStyle0 = styleCss$_;
 const SmoothlyInputDateRange = class {
@@ -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;
@@ -9686,7 +9706,7 @@ const SmoothlyInputDemoStandard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.duration = { hours: 8 };
-        this.options = { showLabel: true };
+        this.options = {};
     }
     connectedCallback() {
         this.updateInputHeightText();
@@ -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: 'f801d0ca2e585a3e8775aecd56392be0ad18f322', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'f308006ee7d5a5ee74bdfd6e4c0a396d5943344a', class: "description" }, index.h("h2", { key: '1786838f1f0618009ad88cb3e7118f377115ccfe' }, "Input Standard"), index.h("p", { key: 'a855497d229e1460e0a391a4eeafc4319e319ad3' }, "Height of input should be ", index.h("code", { key: '7315775949288b674244360d9b71a68db0ba63ec' }, "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: 'e99c009de95c9a336f55f205d6c0095978065fe4', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: 'ea85f606a17014c35939c7b03382387f941c7d45', name: "looks" }, index.h("span", { key: 'e65ced6505c629ca053f448ebdde22464ea0d4ec', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '6d2f3ad828e435adc7fececf895a227ff8794c54', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: '63b277bad1655eb8684e55d54f12eaa1472eef3a', name: "color" }, index.h("span", { key: 'e21fc88c66ea60bf93132b69c37eeea6ee0df079', 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: '101a4fd136d354e63d61cfdf49bf1cbff1f9122e', slot: "end" })), index.h("smoothly-input-checkbox", { key: '5e534abe2dc92da3c53dea0ca219f28a86df9ddc', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '4418a73f24ae416737954e43ed543795f5b25218', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input-checkbox", { key: 'ba03de22f1f3395ed792c959499881dfb54f2f0b', name: "placeholder" }, "Placeholder"), index.h("smoothly-input-checkbox", { key: 'd16eeb2a080eff475a865ae3539c65c2dd845c85', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: 'e6b74813ff8548ed316f162ac1361d8b56c37461', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-range", { key: '051b4b2a13728bf248a1173db5f2dedb0e349428', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '8dcf1f2a2e93d3844579adfc4111084d6af30158', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '0a963e124569f0d001c4123244875d0202b0101a', class: "width" }, "100%"), index.h("div", { key: '3146298bfdf86c8acb3801c6031d3c56de357237', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '377154e6ccfc475e159e1402d7f355b088639b8e', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '7ba4aae924980bbbf20b685dd9200d009ba8c118' }, "Text"), index.h("smoothly-input-clear", { key: '07d1c750c2e8b206df1792749862dd9e05cd0081', slot: "end" })), index.h("div", { key: '428184fd6e353ef4fb5b2f09eb298631f28ea806', class: "height" }), index.h("smoothly-input-select", { key: '720bc2716b3e179e5e58d2223ad2e5c5ab945b0f', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '07ce6eff5aafb6e59309fa5f2764d698ab6aabb1', slot: "label" }, "Select"), index.h("smoothly-item", { key: '329eb5df9b843bada0107b7d7e70cb4ed2d65c12', value: "1" }, "January"), index.h("smoothly-item", { key: '02c18fc00ff6bd79ebea43430e42880252170876', value: "2" }, "February"), index.h("smoothly-item", { key: '3d3f3d9b6970a5b6171430c9b4ac77dc28ee15a8', value: "3" }, "March"), index.h("smoothly-item", { key: 'bbd6a45806844288797cf6dd54a1f0f6241613fb', value: "4" }, "April"), index.h("smoothly-item", { key: 'ea16ddebeb69043bbf81b00d24d7579c3c460ae4', value: "5" }, "May"), index.h("smoothly-item", { key: '65b5079f6bcb347c0bd7607ab1d254aab6587b08', value: "6" }, "June"), index.h("smoothly-item", { key: '112ae9deacf35b229b21b5ba98ccd6b6cf20b3d4', value: "7" }, "July"), index.h("smoothly-item", { key: '6357123ba774f460c3d472796440bcdea31cabff', value: "8" }, "August"), index.h("smoothly-item", { key: '7e152148473ba0a78095bf958a47ff250ca3f7ae', value: "9" }, "September"), index.h("smoothly-item", { key: '18ec71e93e318bbc26219c255e41e044f8f581d7', value: "10" }, "October"), index.h("smoothly-item", { key: 'dcda8c3efc3252db74fa2996394437199ae26bfb', value: "11" }, "November"), index.h("smoothly-item", { key: '0664655a80357d780f14683275d94746bea0acac', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '34703e234f2d283f5b2bf1bb7786e40d463b6640', slot: "end" })), index.h("div", { key: 'b378b73ec0f9068d04c274348a9802de24cf61b7', class: "height" }), index.h("smoothly-input-checkbox", { key: '7f29bd8cf5a22ee998b0fe1621772c6da9db6afe', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '205b4f56f31677ab496b39e5b8b70e2923569031', class: "height" }), index.h("smoothly-input-radio", { key: '70b98121b60a4ff5b09b35b7ce100b00cf9f91e2', 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: '06ad97853a1d43877843eb19b4309c9fdf2e79ca', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: 'de0e8a10725c63cb558505983d2a30d7d4529851', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'a82a4fe51692ea235a14c19d3e6368aa286c88ff', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'fbcb1165ad5da5dfe59ed3e354d4c3fc1782027e', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'a18902a2746e7706b076b6184887396cf6a3b149', slot: "end" })), index.h("div", { key: '1cfd2b4ad56c3fd4ebd7f391588546898bc917c1', class: "height" }), index.h("smoothly-input-file", { key: '37d561139145352286dbefd2536cc2eb4dfa7755', 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: 'a786ef8c9b450e13b494a51739afad7022c34ba8', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '561d9ccdc2eab0fd9782a39ac07ecba92268e80e', slot: "end" })), index.h("div", { key: 'f787cd9ec44d38988dd30892bf54f2e8ec6a4c44', class: "height" }), index.h("smoothly-input-range", { key: 'f467e42c4add7954da4183236493fd229ba95f32', 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: '546d10f1c7bf5bdd153bf5acea8dcc570f89938a', slot: "end" })), index.h("div", { key: 'c82cabb2a0746af4d10340632011cd4c57a7d47f', class: "height" }), index.h("smoothly-input-color", { key: '017d27dab7c05d7113cb647ab8c90c82142a4df9', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '8d95c32f98043872cda16442aed23d889751bc6d' }, "Color"), index.h("smoothly-input-clear", { key: 'fb813435fcef0bfc196ad89f552c6a9465cfca99', slot: "end" })), index.h("div", { key: 'd0dbe76654cd3e96954aeb0ed77f89249e186f20', class: "height" }), index.h("smoothly-input-date", { key: 'ddf1219d69dead7028cae1d97a009a11f0031921', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '5ffa6841300743bff16347451140fd59fe04cf50' }, "Date"), index.h("smoothly-input-clear", { key: '822cdbf10ea7ff2dcdca5cb2b42eabf419f76aad', slot: "end" })), index.h("div", { key: '49411f5b1f1a847a7a4ef623af0496366a2e172b', class: "height" }), index.h("smoothly-input-date-range", { key: '8e2eda1171ae3c705b3691b8fb300e95d9b59a64', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '7763d6f09482427b40d2070add839ef6ff3b59a9' }, "Date Range"), index.h("smoothly-input-clear", { key: 'ebaa2a654561246dfe5914d2eda6077c0c94011a', slot: "end" })), index.h("div", { key: 'cd19dc2bbf52e9afcb8d29f4aba60885ac9b2fb5', class: "height" }), index.h("div", { key: 'd446c605508523f32111dba2b3e2758f4112e5f9', 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: '4c82763575091a9e53ed58a308c0d506c584753a', title: this.toolTip }, index.h("smoothly-button", { key: '9e14baa0ac6e202fa3416630c9fa8703ebdb7ba8', 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: '8a0ef151886a6fc09874f68c1367826682bd9e87' }), index.h("smoothly-icon", { key: '2078d35ea1fdd67224c58684245cb169a71f3c3e', 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: '491be622870e2e5217bfeacc20acdccf4bf42be1', 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: '47c1ed4c5ad27b176a8b14a3749ec4d05229ef64' }, index.h("slot", { key: 'd134c8621f220fed69e11cd4100a1360c5e45bb8', name: "label" })), index.h("div", { key: 'efc23d0c156e488040cde379a6e4aff45a248768', class: "input" }, index.h("smoothly-button", { key: '6ef15877e7195e9e92fbb86e708c56a409acab1d', type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '88eefbd5b2be014c36c5aa00bfc643c943b7fff1', name: "button" })), index.h("span", { key: 'b8bad33bcf514befc3f02cdb3c6a5d2f83a3c362' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '3bc1075f3d478345787eed612fad5904d5a3140b', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: 'f1d3fcf2cb8921654eb694e74e6425dc83c60355', name: "document-attach-outline" })), index.h("input", { key: '6b1a8c513be73af93a942a3325d57350656ff406', 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: 'b3b2b22f77ca1dacbea0a369b7eb2ae13b8c9f98', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '8dd99bb19272b490a1a22582ec1c6182a31fa7f6', 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: 'aa0b40073f5f9bcf32241509ed90d4b8ae4b0f34' }, index.h("smoothly-icon", { key: 'e85c13db823491d60f653b4d6be7655f6027060c', 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: '668d3851808a3f4081c40a038110dd92ff70b472', 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: '4daa5c21a6e912f1c68070f61787093cbd7b76e0', slot: "label" }, index.h("slot", { key: '6128ae5b123b765f06c79955b65ae6615c2dbfbc', 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: 'def2544540acfe361de31656f257caa42e00ec70', 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: '6ce12ac4ae5d6106fbd2a24100dedbae5fe2ef4f', slot: "label" }, index.h("slot", { key: 'd4735ee00f44e15696f3f8c2ea97c2ec7cd6367b', 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: '8c23347945ff433523df1d8b3b0f5907e194fd14', 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: 'd5c9b50ade17c87ee4207620548a1756452dd7f1', class: "floating-label" }, index.h("slot", { key: '0bb47eacc21cd80ad57cef2e264c22c30408170e', name: "start" }), index.h("div", { key: '1a128681cef051664cad9c99a65cc5af7f69ee7d' }, index.h("slot", { key: '81d055488a0f0b1089459413fbc0835e6726d0b7', name: "label" }), index.h("div", { key: 'babf56f83549be2478dc43e3f0cd1efcafb7d9df', class: "options" }, index.h("slot", { key: '434fd9a81af5a5ff6813bc247b95b2cec6f85272' }))), index.h("slot", { key: '99fe30e834b74f9a518f4df1ec58a220474c97d3', 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: '4050066bdb8e251aea327a2793ff76fa8328ccb1', onClick: () => this.inputHandler() }, index.h("input", { key: 'b084c07081ca1ec30b6babc95c20edacbab38dc8', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '789673f1d35f1e8df752c9613bf7e91f0f85cbb8', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '7471bd5c94859d74f2a939211bbb3908b1cd2f2c' }, index.h("slot", { key: '56b5c28d9393c2552d9361e405b84b0ce5dabb32' }))));
     }
     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: 'db364d48a08c466ba61bfd2379499309c57548c6', 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: 'a44f61849476e4bf811486a555c3f81c3a21ad11', name: "start" }), index.h("div", { key: '50a390145faa95bc18c76f0177aaaf6316a48e02' }, index.h("label", { key: 'b3896b960fce4e257bf250044d9446bf13b4d05f', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '98f34e1d9f3d314f1d36ea51570ade80248e09e9', 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: 'ba539540cebbcdf6b8ed8074069ded8bd9083a53', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '9c4d96d7954a42d3acdd87559143237665e12ca3', 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: 'b6c57b76d0f3f640af5e3bb40c91b3c2ca4fab7c', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '62120d5aae2ad288a41202ed279a7c973f8ae210', 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: '7755296b3ff4f4d0ef6985a7926ce037208483a3' }, index.h("h2", { key: 'f8dbb6c4b466de2f05ac82ea261be961f35f3d2b' }, "Range"), index.h("h3", { key: '690a16cfba6122e9a927dbf9c8dc078038cdadcb' }, "Phone Number"), index.h("smoothly-input-range", { key: 'e197f625e981e2507122af04920e13e6663ad9cd', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: 'fcdeeac93c47c4cf96f8d7a52811f09e2f75ea1e' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '8a9693949a16495e411f944ea18d882044b9501b', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: 'c0dc4bb173e2d01acce664076d65dbe306f43302' }, "Percent"), index.h("smoothly-input-range", { key: '95f56d349df31ff4cc1879f585250cec0662fbb0', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: 'd97aad1bd87a1237720d6dd06ebc47e226acb96a' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '693dce4b8ce3a2991656da0d758ef56e4b1bc7ca', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '3a0f308943942de7306f5b5c616cdc344f9ef553', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '0a724a9f326c4ccc8440561a817ceb1d5d2cd354', 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: '9ee18eb0aab780f7646269da2ff328d91428d4a3', title: this.tooltip }, index.h("smoothly-button", { key: '42de50f9d8a82f1b0cd77cd780a4974196c70416', 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: '052e1b22942b64a527981f537f183a74318da4f9' }), index.h("smoothly-icon", { key: '2cafb12e9fb7a0856c65415dd255ba87cc6e1897', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10337,7 +10357,7 @@ var Item;
     Item.is = Item.type.is;
 })(Item || (Item = {}));
-const styleCss$P = ".sc-smoothly-input-select-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-select-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-select-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h>input.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within)>input.sc-smoothly-input-select{background:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .label.sc-smoothly-input-select{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.floating-label.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.floating-label .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder] .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly] .sc-smoothly-input-select-s>[slot=label],.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,[placeholder].sc-smoothly-input-select-h .label.sc-smoothly-input-select,[readonly].sc-smoothly-input-select-h .label.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-select{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-select-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h{display:flex;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));padding-left:var(--input-padding-side)}.open.sc-smoothly-input-select-h{border-radius:var(--smoothly-input-border-radius) var(--smoothly-input-border-radius) 0 0}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{box-sizing:border-box;display:flex;cursor:pointer;padding:var(--input-value-padding-top) 0 var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not(:has([slot=label]))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>div.select-display.sc-smoothly-input-select{padding:.6em 0;align-items:center}[readonly].sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{cursor:not-allowed}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select smoothly-icon.sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select-s>smoothly-icon:not(\"color\"){color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));filter:opacity(60%)}.sc-smoothly-input-select-h:hover>div.icons.sc-smoothly-input-select-s>smoothly-icon{filter:opacity(100%)}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{opacity:.7;cursor:pointer;height:100%;box-sizing:content-box;padding-inline:var(--input-padding-side)}.invalid.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.invalid.sc-smoothly-input-select{display:block}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.invalid.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h .label.sc-smoothly-input-select{left:.5rem}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>div.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:10;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));left:0;right:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);min-width:fit-content;border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select{left:-1px;right:-1px}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>smoothly-item,.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{padding:.7em .7em .7em .25em}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{display:flex;gap:1em;background-color:rgba(var(--smoothly-primary-tint), .5);color:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));stroke:rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name=\"backspace-outline\"].sc-smoothly-input-select{margin-left:auto;margin-right:0}.sc-smoothly-input-select-h>div.options.hidden.sc-smoothly-input-select{display:none}.invalid.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.sc-smoothly-input-select{display:block}";
+const styleCss$P = ".sc-smoothly-input-select-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-select-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-select-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h>input.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within)>input.sc-smoothly-input-select{background:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .label.sc-smoothly-input-select{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.floating-label.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.floating-label .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder] .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly] .sc-smoothly-input-select-s>[slot=label],.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,[placeholder].sc-smoothly-input-select-h .label.sc-smoothly-input-select,[readonly].sc-smoothly-input-select-h .label.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-select{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-select-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h{display:flex;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));padding-left:var(--input-padding-side)}.open.sc-smoothly-input-select-h{border-radius:var(--smoothly-input-border-radius) var(--smoothly-input-border-radius) 0 0}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{box-sizing:border-box;display:flex;cursor:pointer;padding:var(--input-value-padding-top) 0 var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not(:has([slot=label]))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>div.select-display.sc-smoothly-input-select{padding:.6em 0;align-items:center}[readonly].sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{cursor:not-allowed}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select smoothly-icon.sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select-s>smoothly-icon:not(\"color\"){color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));filter:opacity(60%)}.sc-smoothly-input-select-h:hover>div.icons.sc-smoothly-input-select-s>smoothly-icon{filter:opacity(100%)}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{opacity:.7;cursor:pointer;height:100%;padding-inline:var(--input-padding-side)}[invalid].sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:block;padding:0.5rem}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h .label.sc-smoothly-input-select{left:.5rem}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>div.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:10;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));left:0;right:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);min-width:fit-content;border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select{left:-1px;right:-1px}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>smoothly-item,.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{padding:.7em .7em .7em .25em}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{display:flex;gap:1em;background-color:rgba(var(--smoothly-primary-tint), .5);color:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));stroke:rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name=\"backspace-outline\"].sc-smoothly-input-select{margin-left:auto;margin-right:0}.sc-smoothly-input-select-h>div.options.hidden.sc-smoothly-input-select{display:none}";
 const SmoothlyInputSelectStyle0 = styleCss$P;
 const SmoothlyInputSelect = class {
@@ -10354,6 +10374,7 @@ const SmoothlyInputSelect = class {
         this.items = [];
         this.lastOpen = false;
         this.invalid = false;
+        this.errorMessage = undefined;
         this.name = "selected";
         this.color = undefined;
         this.looks = undefined;
@@ -10623,14 +10644,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: '4504ac07b8bf4cf9cca3dcb8940c23312f515e60', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '95d2b27548a22908478cab1f198df216ad2bc29d', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '1c64ca38fad25046d160b7dabe20bbeff9d6039e', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: 'c01d911fcf4243f8f14e7509838778576d368ce8', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '64ab88efbc7dc266bb23782684a0519a79fad7c8', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '0c298580239d66f231443607c4d17ef060b5521e', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: '4f068fdd583639ca1ece34b5730f79ac033d6629', name: "label" }), index.h("div", { key: '28be42612595dd29726eb179d26b4a06870816dc', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '2773ae2fdc7ea0a8bb3149fa66617dd948546329', class: "search-preview" }, index.h("smoothly-icon", { key: '6ebd89df60b86ee71b887657e4b051daddcee282', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'c5c689051167bf3ba0312c9c0e2e54fb99eb977c', 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: 'd8101bce9ca797f3aade26475d4046da69c5ce3b', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: 'e1b580a33570c5952219b5b5e58ec8b0c59822eb' }), this.addedItems)));
+            } })))), index.h("slot", { key: '808eb34f3ca3efa1ed144039faaad03d17e6acea' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10679,7 +10700,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 +10712,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: '9e88fd69d424fde703b43ff3982e50a7dd22ea9a', 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 +10753,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: '43c89251f05f6c6e6d9b6364c44cc4625ebb560b', tabIndex: -1 }, index.h("slot", { key: '51384f68f245a159fb854a9c1240b02f4eccf672' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10753,9 +10774,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'ac3c8fb368890c916297691f2918bf892622b72b', title: this.description, style: {
+        return (index.h(index.Host, { key: 'e707400400f0a62c9f515b8b8b7eeea0e2b8341f', 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: 'a15aa17b778520de6770aa51780532625ef97b12' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
@@ -10774,7 +10795,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: '456486b3992a1f20395368286a55de3354ec032c' }, index.h("slot", { key: '529fa4229d8d4425fd591a49cbf02d5511b4ba43', name: "before" }), index.h("smoothly-load-more", { key: 'd8412e6f119340e3e41a53118ff432ba68daa5bb', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '81acba6b30bb362cb35a8e4b1b5f24544c1eecd2' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -10818,7 +10839,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: '59cf4fcf14af76bc71f1952fae2f114bcdb4d27f' });
+        return index.h(index.Host, { key: '88d78cc2de5316901400d9aaf4b4821c41141a6f' });
     }
     get element() { return index.getElement(this); }
 };
@@ -10838,7 +10859,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: '801947ef6b4a478a8f886a8c4ae1dd56524a63ea', role: "alertdialog" }, index.h("div", { key: '7c985ac2faa462ba5032eda403590bb2f7a4ee54', class: "modal" }, index.h("div", { key: '76980f70e1ee060a8ed350bdf0853541c0ac405d', class: "header" }, index.h("slot", { key: 'd44475efdc67173d95fa445dd0c315e19e945d66', name: "header" }), this.closable && index.h("smoothly-icon", { key: '208721565897332ba64c7dfeca45c7963f281447', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: '94c8fefa8d6fecd8cddeb1081e7a8e0e3f9037b8' }), index.h("div", { key: 'f9a0794ce0b7b950c7cbd49fb1129a5d3b4bf8b1', class: "actions" }, index.h("slot", { key: '2b248577e2099e7391bbbc10f9c68594db42fc16', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -10854,7 +10875,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: '77f3283fde37e54b01579e48c68c902d2bb86c87' }, index.h("smoothly-next-demo-filler-row-demo", { key: 'e444e7bf46afead76768a7b28c4c6da1f54f25d1' }), index.h("smoothly-next-demo-group", { key: '3f9156e7f83e2702c61a3b138f1315e040b0074d' }), index.h("smoothly-next-demo-colspan", { key: '9505639e7f3c473e9c5709b378258b685053070b' }), index.h("smoothly-next-demo-simple", { key: '170dcda20a68650c765f40df09a9c66a3744c73e' }), index.h("smoothly-next-demo-nested", { key: '606abd8e4cd0aeb491ff6cb90de1dfbc9eaeb407' }), index.h("smoothly-next-table-demo-filtered", { key: '8d052af6a38c5b2b95259357b75b9157924faaa1' })));
     }
 };
 SmoothlyNextDemo.style = SmoothlyNextDemoStyle0;
@@ -10867,7 +10888,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: 'f4b9dedf21ff1bc10b8b5846f31066e8b982df5b' }, index.h("smoothly-next-table", { key: 'fcc3275be4f42a5655ed6c31afbb4e99e566f430', columns: 3 }, index.h("smoothly-next-table-head", { key: '22baac2ea55e6f5109fe7eeb9a5307acfbb01b33' }, index.h("smoothly-next-table-row", { key: '2b5ef747bcc723acc2a587c683cfaae1fc236926' }, index.h("smoothly-next-table-cell", { key: '2d7d833c0f5f4d617470b74b8a45c68bd691464c' }, "Date"), index.h("smoothly-next-table-cell", { key: 'ca2a65a1319363134923542878524b31967aac43' }, "Skip"), index.h("smoothly-next-table-cell", { key: '7834a87db66b346cc9bc6c5fa2cf29c76c94cea3' }, "Total"))), index.h("smoothly-next-table-body", { key: '91cb707c1edb81d26df9b95fa311ce17be675f48' }, index.h("smoothly-next-table-row", { key: '133a083be06cccb72d0ab04b5782b4b644a4f422' }, index.h("smoothly-next-table-cell", { key: '0f6ba7ca4bf7e40950862a256e4dc6fb7e95733d', span: 2 }, index.h("smoothly-display", { key: 'bc17db67687b098609e1be26ad1c6f6a62537ec2', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: 'ede7cc9b3a41505a1bf3ed95c66f71235f2ee7f0' }, index.h("smoothly-display", { key: 'cbe24d66d6922a51aecd1d8ec43564887a31a2cc', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '210fc2e7486179f9018ec60c857e3fae7e9b5212' }, index.h("smoothly-next-table-expandable-cell", { key: '8e4812931707a514be28b4b21bdabc4181454716', span: 2 }, index.h("smoothly-display", { key: '20fc43a45a6fd58a5a28c6a7195366caff87433a', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '32ab868369e465b891408cdb89391dab342452e9', 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: '028d8ea8539bcb61de41074b0465b24c4ee2d7fb' }, index.h("smoothly-display", { key: '88f1ca1dcb24fd7753be901fa5f361ab8b0bd788', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '928ae7c789c543dba2dd18a93b4ef8d4e8e2941d', 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: '4dc6398001ea9fbefba2300eabaa7046ae8bcf8d' }, index.h("smoothly-next-table-cell", { key: 'a4ddd0e4adb3969bfb21cdbaa722d54443e589ae' }, index.h("smoothly-display", { key: 'ed638e181d9907dd9f10a74a23ae8121e3c9a0d2', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '3d65be363fff107f6a81e872bedbcee3f03cfb6b' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '0bc8547528f9dc2f75bd46dad39661114606a3ac' }, index.h("smoothly-display", { key: '724b68d3980c0bba5cd82cc97ee3fd47bbf6936b', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyNextDemoColspan.style = SmoothlyNextDemoColspanStyle0;
@@ -10886,7 +10907,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: '30e3c4d25ef807be7419dab29ccc640b8b31bf06' }, index.h("smoothly-display", { key: '6591ac275302c2d8281b377d4abdbeb8d415e0f0', type: "text", value: "Filler row" }), index.h("smoothly-next-table", { key: 'ebfce17362e0fcb5cd63caba4f0fe1313c8ea3b2', color: "primary", columns: 4 }, index.h("smoothly-next-table-head", { key: '4cd56033a6a04a4e4217be8fb1b8b4bd68e56b36' }, index.h("smoothly-next-table-row", { key: '7e46a458e7805266fe3eca11973e4c8ee529387f' }, index.h("smoothly-next-table-cell", { key: 'aeb99aa8c144dc58e0b4c029d937a52c8dce59d8' }, "Breed"), index.h("smoothly-next-table-cell", { key: 'f6a5be96cbe6b2ed93db037ba3e7dfd0198d83db' }, "Country"), index.h("smoothly-next-table-cell", { key: 'c92067b9d661d669b2941d6e8d6d2fa1100faa4a' }, "Coat"), index.h("smoothly-next-table-cell", { key: '867960d040823b2a28850e0ddca464c0bcbbcb51' }, "Origin"))), index.h("smoothly-next-table-body", { key: '3d4a400189f57525c9148d573f5059f383e7d697' }, 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 +10920,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: 'f438f845e508f119760a5d9d1417537e0a187c8d' }, index.h("smoothly-display", { key: 'b063c8b2e634ad0334c5eee04fac31d3d2fa5cea', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: '52246d8d8cc18b2c732722f78a8f92ed9f7fc56f', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '03d8a1fd2afc66618c4636efabfc242b8107ce89' }, index.h("smoothly-next-table-row", { key: '389efc99c30410173841b3898b03bfa344c84fc2' }, index.h("smoothly-next-table-cell", { key: '2a1252bf188f55b0c8530490c7e5a191933c2e51' }, "Date"), index.h("smoothly-next-table-cell", { key: '981a383ac216ad3a763b10b77a78e56b2e0acb9d' }, "Total"))), index.h("smoothly-next-table-body", { key: '352c32809ef5a0a6f026f121b3e9fa7c5602fc9b' }, index.h("smoothly-next-table-row-group", { key: '34b2cde15f636a4a1bd8219f3b82655014a6827f', align: true }, index.h("smoothly-display", { key: '6d08243f9bed82544920f2b1e29c8cd87ac6fc7b', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'c36b911fb892d60f7285bb44cdd531dd49f32f80', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: 'dc9d0a9925e00e9f8cb43a417d3967678a4cf793' }, index.h("smoothly-next-table-cell", { key: 'd15f4087317aab19ca1c4f8082e53ef73b5f4e72' }, index.h("smoothly-display", { key: 'e97116560bc6cec0faca35bb072e2513d933a6ba', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'dd63e1ac67603230824f3eb3dbd0608d885dda1c' }, index.h("smoothly-display", { key: 'd2a71eebcb034dae79995da03e1a158aa27c86c6', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '217d130757e685618c2e880852765916eea69a4e', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'a493c7ac95042b65c65919ec8e8f446008e95727' }, index.h("smoothly-next-table-cell", { key: 'f80da21fdaf0ed83ffeda20884f79868488994f9' }, index.h("smoothly-display", { key: 'f0fcc94ccef41a242cc1a3993b79970e79798d29', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '354a83be386ed4dc31e2cc9e3dca5f5c03e89a0f' }, index.h("smoothly-display", { key: 'df7600b467501dce2faf70a97f493f4a28ee31f0', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '2472126497a4abbe6dff4878c12e922620611a01', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: 'ea225e8856b326e1b26a7495b42905853ec4bf60' }, index.h("smoothly-next-table-cell", { key: '2f32e34fe19a259d3212770e342092a7831a3e7a' }, index.h("smoothly-display", { key: '21ff447d38f07c50e6101438e61dddf43a0cf3bb', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '55052d34e1bc2a4cf7e092785e12153e05632bed' }, index.h("smoothly-display", { key: '631ac0e93aaaa61d9af8f9096b3a6d7d1fea9ad3', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: '5b9248a9e92120d03766c3ce67865a59e8b5bfd8' }, index.h("smoothly-display", { key: '41197505cd1a42721c0d9844616e04e870d2e0a2', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '7302e8c593ef5bc023bb233282f327793856593c', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: 'e0a6c69ab62a15c43e44816cb5130e58ceec4492' }, index.h("smoothly-next-table-cell", { key: '4a48560719d745cf3015d8d34c151276bb13eaea' }, index.h("smoothly-display", { key: '2fdae1cb2862c52c685f9f7ed9087fcbb4a08b60', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '2f00eb73e451ad74bfff8b01f2eee8adcae5f94c' }, index.h("smoothly-display", { key: '304430905b43e8995f90c3812cfebc8104d3e150', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'e141401ae7f5b7c45a00b09e9cfe12e9b8c597ab', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '50de8386a3d931a717f14720c8f352532943b773' }, index.h("smoothly-next-table-cell", { key: '6739fea91bb41955864d52cb4a5c85e4c2f81b83' }, index.h("smoothly-display", { key: '94fd10189e30070f6ea7d210e09c9ecfd9ad64d7', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'f78b644c126d08151babb3e024e2a79e61ffaf46' }, index.h("smoothly-display", { key: '720a36e523dd6eabfe3b3f71abf7087955c52224', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '340d8a3270f6128d0bc19504d88f1732bcf84bee', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'c34727de27d394bb98b879884b673d0bd75750ae' }, index.h("smoothly-display", { key: '567b2e5b524c9cada1aa51785c9da29a3ff8f6e7', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: 'e9397664dfb67b2aa789c258cbb7db52331b9f11' }, index.h("smoothly-next-table-cell", { key: '133d0c0bbad9906cdd7fed0002281e6bd8f95735' }, index.h("smoothly-display", { key: '12553307bd2858b815d1b1fd3bb60cca3a9ac172', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'bb16cb23cd3bf926a3e7cff600ec5e46afb49d95' }, index.h("smoothly-display", { key: '946cb985b7983915c63cb9bec0c77bc014c057e5', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'ec0e18ee5349eb4c741033ffab823a603d818d40', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '7de78cf016e32c3377629ff7839493ed17655c9c' }, index.h("smoothly-next-table-cell", { key: '77683b0d026583ba660324feb22e098f7f994a15' }, index.h("smoothly-display", { key: '8e278dc09aa54b862b5eba6b9bcc37207a790c71', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '158c5fc2040dedf1d7a243db4ddd94bcd1830b31' }, index.h("smoothly-display", { key: '61f2712bb9661e12899b47596ba0600972c4aa1e', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '7e36c202eeaa9f50c9dee678bf7701f1309f5a76', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'bc2b345fdc9685d08783167a6bbdbbfacda38862' }, index.h("smoothly-display", { key: '5585c6dcc49ebb4618884ae160bf912897a0518c', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: 'a82a7353e74bda8c0ad2cc0ee67ae01999d4166c' }, index.h("smoothly-next-table-cell", { key: 'c05d7d3a0be4835275dcc3843a00a59f04ab254f' }, index.h("smoothly-display", { key: '2b9558f096c0b9b5aa1079a62ab16ca13f1254e1', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '41eba08c01304a4f9aec7551a1ef4625a678a30c' }, index.h("smoothly-display", { key: 'f473141b066e0d2068e0ba6c08bc20ccda7134b9', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'b779ad6c760e839bcabf6510a87b103400d062a6', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '6866db858e2f5790f213fd12dd3c60f1fb8ec852' }, index.h("smoothly-next-table-cell", { key: '53f0601d302570f2626ac4585b421b1eab0b9a48' }, index.h("smoothly-display", { key: '4415bed74423eb3278d389edb9fc86aabe673fed', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'eb182a27716b2e2301a3dcd7384204ab4805f536' }, index.h("smoothly-display", { key: 'e33ea69bdeb61f7a8f6b3c86bf83599e3c9560e4', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'a3ce825e7a5aa4ef6d8b675376f51f43fbc9e928', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '472cde886820cf1be0c77f6e914770496722775f' }, index.h("smoothly-next-table-row-group", { key: '2a12af1141467042452b99b402e276357854b2b2' }, index.h("smoothly-display", { key: 'a8e15064f175eea2cce9e383b6946f8ac11cfb3f', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '7a66dd85295a699f11e24db5107528bd9dacbe6d', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '4824c878c60b359b8297947f3c73c95068ec1ede' }, index.h("smoothly-next-table-row", { key: 'd5fc8fd89983b5e298f1e64202f398c62aef84ec' }, index.h("fake-cell-wrapper", { key: '29039fbb6d1385c10f9bd1545e5693b6a909dd09' }, index.h("smoothly-next-table-cell", { key: '5884c013998c5a34ab6d2aa5dbc17f86dcd6336d' }, index.h("smoothly-display", { key: '2074cb5957766f3af4ac271dbb335a45f98a9934', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: '4a8d45a72dfe1b1e5cfd9143ea68d667f74fd683' }, index.h("smoothly-next-table-expandable-cell", { key: '8c773ef6fd9ada6046a8aaa6265f8db5d3de49ca' }, index.h("smoothly-display", { key: 'e101a532017ccd5b1a8c7e58f8daa4f2f0323b2b', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: 'b56e9ec28b863ad72afe97442be081655c18c4d3', 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: 'f086248ed75c7f3f13869b68e9ccbb66a1f3504a' }, index.h("smoothly-next-table-expandable-row", { key: '3b91cdcd4900102f3628c761617ca864a102b8f7' }, index.h("fake-cell-wrapper", { key: 'f84d006ffa6d69515ecdcfa0f9f2d1a6f85b722a', class: "span-2" }, index.h("smoothly-next-table-cell", { key: '62bb0db4db5beef2ac5cbf44e3bcaff1b597a0b3', span: 2 }, index.h("smoothly-display", { key: 'd0376da98c0bb2dd5169718f6574d0d8c2a496c1', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '98fe8efda94c4771d5a11283886512115a46cc8c', 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: '81e12dd71cb3dc1a43168a10df3c08e751c1f7bf' }, index.h("smoothly-display", { key: '8caaad42fc515599c80fdd773da393e1a5a2e000', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '97b7d127b051bbf25ae93fca3c7bb2be01b0e3aa', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyNextDemoGroup.style = SmoothlyNextDemoGroupStyle0;
@@ -11845,7 +11866,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: 'ac8b819ed68a0fc335daf5836b943d1893535c7b' }, index.h("smoothly-display", { key: '1876305df37da314e0859e0857e9d1fab90c21cf', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: 'b403ee029a6128fe077110877d8632b9af90cea5', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: '5bbd2f1ad09fe5dcace93880c78506d5484c4eda' }, index.h("smoothly-next-table-row", { key: 'a16bee62f8ae68a7922bdd27ce38a09c4bba102d' }, index.h("smoothly-next-table-cell", { key: '5a9deb384aa90652576801be5193879a09638eec' }, "Id"), index.h("smoothly-next-table-cell", { key: 'bacf06de880e02186416119846d60149850b6300' }, "Registered"), index.h("smoothly-next-table-cell", { key: '72097acbf587110feca0b46c6fd539cf4c57b007' }, "Name"), index.h("smoothly-next-table-cell", { key: 'c9bd54f8c6bdd0449a1dbc01bd45e0fd93fb38a1' }, "Age"), index.h("smoothly-next-table-cell", { key: '74bb02db61b2750620fb3d7a0c295a9ab9ac1475' }, "Balance"), index.h("smoothly-next-table-cell", { key: '365e126a9a8de563d60dd19076058b19b528bbed' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: '2c8fcb094da0cf5042e5a138a37e109d79f398c3' }, "Gender"), index.h("smoothly-next-table-cell", { key: '0b10a8d72633a7ee7087cdd2f941af842570be46' }, "Company"))), index.h("smoothly-next-table-body", { key: 'c5a41f8b6185f0c49d23f63cfabc6e1e1831c707' }, 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: '0ab984aaec3f9875ef7732374ccd22ce753aca5e' }, index.h("smoothly-next-table-row", { key: 'de147ff0b4b130fe9b3130590313b4d7fc701c5b' }, index.h("smoothly-next-table-cell", { key: 'fee07b3789bbb5ec11eb0b41d065bef1ae9b2f7b' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'cf687206d40467456fb30facd28c742880a0a6b2' }, "Footer Cell"))))));
     }
 };
 SmoothlyNextDemoNested.style = SmoothlyNextDemoNestedStyle0;
@@ -11860,7 +11881,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: '1062b8d6fba3a84174feb5211fb04c0fd989ad51' }, index.h("smoothly-next-table", { key: 'c72db56d3f0357edf110eebcbef76c68cb8fe8e6', columns: 4 }, index.h("smoothly-next-table-head", { key: '5871f66a70b4493ee55585ad9c945dc81d33d926' }, index.h("smoothly-next-table-row", { key: '5010c8279548c690f9b760f761f8aa62d5355388' }, index.h("smoothly-next-table-cell", { key: '77cbfff256e218565ac3a3cfa61641a1f4fa294d' }, "Id"), index.h("smoothly-next-table-cell", { key: '75456ebc4d8b510678ddaba496c6ac33e4c4d20b' }, "Name"), index.h("smoothly-next-table-cell", { key: '9e6f715453f564ae310d7d1293443602136d264b' }, "Age"), index.h("smoothly-next-table-cell", { key: 'af45cc242d04f9797e4f27ec74ae96d5ac81e8e2' }, "Balance"))), index.h("smoothly-next-table-body", { key: '165151de9cdce730d6a3fcf9854ab5a88603826f' }, (_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 +11894,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: 'c7a387e18e1a0ad7a93b0f7017ef14d02d83a080' }, index.h("smoothly-display", { key: '5fa46ce5ca3b08722f4a81a7b0a6e3c0ceaa0f05', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: '50ff0ce43b710ba66813e75eb5fcf61b35bac119', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '8cb12dd8221bf13dde4b980739d6a70ed5182459' }, index.h("smoothly-next-table-row", { key: 'c2dff6a966cf78b7afec05692f49a331b0dce7ca' }, index.h("smoothly-next-table-cell", { key: '9ad3c0cbcc04b65a4ef62ccf6a52182275637e68' }, "Breed"), index.h("smoothly-next-table-cell", { key: '42a77d3ee2f95b1e3589c73e1d89fb4fd099e712' }, "Coat"))), index.h("smoothly-next-table-body", { key: 'b8ad170167657fdf32c5bfd0020a8fc920aff7a4' }, 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: 'ebd68bd3341545fe985ad7ef01577b3327d4dcd8' }, index.h("div", { key: 'fe08666bdfc246d7136715b63fcc57a1ed24e008', slot: "detail" }, "Content", index.h("br", { key: 'ff6f04fa14792219eac639b8825f9b2f2aa582c9' }), "of", index.h("br", { key: 'aaff7afd83edb8585e4bcccf91b649f7c1942568' }), "the", index.h("br", { key: '1cd00b863b05eb86f706fb2dbf9eade4a0830d3f' }), "expandable", index.h("br", { key: '681aff287c7420f5da807882806b4bffdd9897e0' }), "row"), index.h("smoothly-next-table-cell", { key: '754c125a05adcca4c08104e4aa7020e91a0d1700' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: 'dbb5ad17a7d13d7e3f330480bf1b6c74123ebbdf' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: '300acbbdfad5ee1cedbbd9748e3d7a57e16fec86' }, index.h("smoothly-next-table-cell", { key: 'ec1a3b814b324ac007d4a07dd6c40f4cfbbc25a4' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: 'd2e3f4b636cd2aa55526a08f4a4268137618ab55' }, "Expandable Cell", index.h("div", { key: '9bc93e19463e94a49526a218da1daac775eb7203', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: '5c7b02cb821b4a23b733c94b0a804649865c6b2c' }, index.h("smoothly-next-table-expandable-cell", { key: 'f49a2d857eb6b90c3fd375113f6ee443debf9d17' }, "Expandable Cell 1", index.h("div", { key: 'caf38888f3081b4be3c4f79616f992fb7a40508f', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: 'dbabef0729d5c038782da8307573b45f60438a1e' }, "Expandable Cell 2", index.h("div", { key: '52f0bf6a13bcf46e4f927e2cf93f97eb25947808', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: 'cf8bd92b99724f997ad35393630d6acd83f498e4' }, index.h("smoothly-next-table-row", { key: '246ae7fdc74a4ef67f5230dd208ad56b261f300f' }, index.h("smoothly-next-table-cell", { key: 'c5bec448e27ac5888f95fed87a4bb00914e68cc7' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '4003e5d8ee32cf0bcbc333cad1e80f75497c963b' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -11965,7 +11986,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: 'b26059040484b92b47073a4a1b131e0961cb7beb', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '367756c156480524dedd898c79b4e609fe1ca137' })));
     }
 };
 SmoothlyNextTable.style = SmoothlyNextTableStyle0;
@@ -11978,7 +11999,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: 'fc5b3f777e5da3121ac41f5ed46bd48de4d6566a' }, index.h("slot", { key: 'a5a92fe0af635d355cbd006c1ad326a9fdfbe093' })));
     }
 };
 SmoothlyNextTableBody.style = SmoothlyNextTableBodyStyle0;
@@ -11993,7 +12014,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: '78a499f0a16c677f1834f1704ecc53952b08a5ae', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '5ec1cb941acd0ff5fecf223cde1e797119b40a61' })));
     }
 };
 SmoothlyNextTableCell.style = SmoothlyNextTableCellStyle0;
@@ -12065,18 +12086,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: '819c08970d7851e60ec03ebc75b5762636712313' }, index.h("smoothly-display", { key: 'd85d2d9d2b290b64a5163c7eb5b4185558fc01db', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '25fc6a71565a5a02c3ce62b03f1ac5280c7b37ce' }, index.h("smoothly-filter-toggle", { key: '0f0aadc2296c8b86eaddd7680cdb4333050ac398', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '70a20a4079ecb827ee4386308a1b95687417eae3', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'dec5e592bb5bab7a636221f4877f29957dbbe504', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'c84f8aa97c89a024a58f0635d24f5e254ed69931', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '0e36dba26303cf7575103119375ec76c3c629133', 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: '12bc508938faeeca2ff380dad0bc0e0add984849', slot: "detail" }, index.h("smoothly-form", { key: 'fd018c0d14b5b7a66cf8fcd9358c0466990f75e4', looks: "border" }, index.h("smoothly-filter-select", { key: 'a5e9324423f7adba4db420ac82e7712088dccf99', 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: '39eacd58fac8964b5a2a4be46041ebe5703fea89', 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: '8605a94f31d45afbe9f339eecae0737c318cf9f8', 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: '9ea45abf079f3844da63f6d9f046a35fa3a0d7a1', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '87437930089acc044bb1c3c2dd86054059701709', 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 +12133,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: 'f4e00f34b020024107236090f248c9b29f1569cd', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: '671c8f23c8372b1746a88fb9b628791aafe94dbc', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '98c2aac2a0b26b833d67e2acaae2b91a6f53ea30' })), index.h("div", { key: 'acbf37b2e9612cd8c68939147efdb70722a89832', class: "detail" }, index.h("slot", { key: 'f1112de8599b7c62b0ce8e18b67fa0246837a498', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12136,7 +12157,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: 'ae127ed0832293efd673f48d7c84dbd788d30bb4', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '14c8a0f4a3dfb73d054cb410b2b34316aef3a593' }), index.h("div", { key: '475653118c4b0297ae2944c0b6569802fca4ee73', ref: e => (this.div = e) }, index.h("slot", { key: '3d9149d0c0dfc63d953c53358643411d8cd9e9b3', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12152,7 +12173,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: 'b1115b06ee32528145d95e83bafbbd494deac5e3' }, index.h("smoothly-next-table-cell", { key: '664c9b9de47c08ec60506f4bef8eed26667d3ebd' }, index.h("slot", { key: '81df8108154d511bb9b054518e0e1ae460bd2d7e' }))));
     }
 };
 SmoothlyNextTableFillerRow.style = SmoothlyNextTableFillerRowStyle0;
@@ -12165,7 +12186,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: 'cd3059ed84b8029caa4704f79d9be300f7d84bba' }, index.h("slot", { key: '19716629341805a42a04b8120aa5d621dc99783e' })));
     }
 };
 SmoothlyNextTableFoot.style = SmoothlyNextTableFootStyle0;
@@ -12196,7 +12217,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: '979e66bdf8727780501e8f2315c022d7f8326a07', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: 'f83d2e0de19aa2ddc4eaeffac977ec75803b9643' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -12220,7 +12241,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: '6c4ba8bb78dc9f436eefa8573bdc734385857cf4' }, index.h("slot", { key: 'e36b1c6630859bb833c6fc43d7fe119f79cff9c8' })));
     }
 };
 SmoothlyNextTableRow.style = SmoothlyNextTableRowStyle0;
@@ -12240,7 +12261,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: 'd3b00684150badf532b9e22875f5336b3046c2f6' }, index.h("div", { key: '97df58601849cc6d33927c57df492ac7d1c3a3f2', onClick: () => this.clickHandler() }, index.h("div", { key: '9eb12d4d482d9a7281bda20e2fab7786b57304af' }, index.h("slot", { key: '9c16eb02aa173f60ccf9511ec9e3ed6326a69e52', name: "start" })), index.h("div", { key: 'd42092eebabe3aa692a683611bcf0b39346df059' }, index.h("slot", { key: 'ff10f4778d37364614497d63e6409941175677e0', name: "end" }))), index.h("div", { key: 'e31785e564d6a0070252beed387109683db6cf9c' }, index.h("slot", { key: 'a3cddc81231e743c8e35ce25e72011e3449f084a' }))));
     }
 };
 SmoothlyNextTableRowGroup.style = SmoothlyNextTableRowGroupStyle0;
@@ -12300,7 +12321,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: 'b465684388e211b2ded5fd95c2606598836eb9f7', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: 'f9c192c92023caa247d76d2b429aca24f344eadd', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'd2d9149ed8e0223269ed2f07f520916d526e183d', name: "close-circle-outline" }))), index.h("span", { key: 'f039aac3b2c5552dabf88890906e5d884da223aa', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '832732e4e3794174cd334664d76859ec0c8591db', name: this.properties[1] }), index.h("p", { key: 'c10b5d2560bf2a61c8ecf30b1ab1fc2311978aff' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -12325,8 +12346,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: '1cdd6270fc1a9040c2c086e2f144e2e2c0428c16' }),
+            index.h("aside", { key: '86367dd48e79c97440bae007fe1ef8c8f4e8a8d0' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
         ];
     }
 };
@@ -12343,9 +12364,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: '792938768d1a1ddb59946572417c670e80c3394e', 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: 'd64fc32ce94e45ae866b6c9cf446e9e722992911', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'b69441f0e8f46fe235ce5aa0c2b436a026a6c6c4', 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 +12400,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: 'f781491f3c975123d85054ccbe8a743ab386e6cd', disabled: this.disabled, type: this.type }, index.h("slot", { key: 'b667f21e7cb7eaf090e605360a961071be1e5ba6' })));
     }
 };
 SmoothlySubmit.style = SmoothlySubmitStyle0;
@@ -12414,7 +12435,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: '2e7c82742cbb10a395c875c66696811d1de29c6e', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '28adf6434b953eef82b707bdcccba74cd1ffe145' }, index.h("smoothly-icon", { key: 'cfa652669f478a9b12e8895f8d2bdc2187456ae3', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: 'f2ccc1c98284600c7c029e5cd6698a3b2fc25fcd', name: "summary" })), index.h("slot", { key: 'f6b3ea00b87675164d8c78c11dc8f4e7aa79acd8', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
@@ -12455,7 +12476,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: 'e3b8ce1e4d8c920cf35f403dcd55d4ff4d0715e5' }, index.h("div", { key: '9579fce4fe5a38698c0ee55dbd3f02eb21ba8cab' }, index.h("label", { key: '576b85cb3df20264de65fe0857f1ed50d8c5cae8' }, this.label)), index.h("div", { key: 'e610c3b56b96ed0f9bb2e853b57a7e08ced5c7b5', hidden: !this.open }, index.h("slot", { key: 'a2ee7a416f0320022248f226e4750ae3531f59c7' }))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -12506,7 +12527,7 @@ const Table = class {
         event.stopPropagation();
     }
     render() {
-        return [index.h("slot", { key: '278cb8ca9f29fcab5127be95c03ad3f82b1935a5' })];
+        return [index.h("slot", { key: '752a663b8b13236087774b1de3e6b6ed8e149908' })];
     }
     get element() { return index.getElement(this); }
 };
@@ -12520,7 +12541,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: '12dc536e6c34db5fdc5917dd24a00779a9b686a4' }, index.h("div", { key: '40d94360ed7dfd15447ac62b4f8285ec3b4f9be9' }, index.h("div", { key: '22a3e08c5e3daa9a71a620b5e2d1f6179631c757' }, index.h("slot", { key: '49b76835654a627f0e4b6cefa68426d3f572f49a' })), index.h("smoothly-icon", { key: '406786469dde8704e84ba600d13cb14ba83edf8d', name: "caret-forward-outline", size: "tiny" }))));
     }
 };
 TableCell.style = SmoothlyTableCellStyle0;
@@ -12533,7 +12554,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: '51b35ded9f79fd725f62621440425fb4158fb499' }, index.h("h4", { key: '23c261386ae6d407b41bd51875fb273efbc2eb8c' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: '1ae795cac6bd7b13d44dc28ec448c5dfb1eab8d6', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: 'ce7604a8859eaa145b243c2074718699a62cd38b' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: 'af13be417b896c4cacd5962bbcce1f1eed36b515' }), " ", index.h("h4", { key: 'fe0b0d95a28506fa9c53765bd85d4aa1380b5ac1' }, "Demo table 3"), index.h("smoothly-table", { key: '7c8df77c92d50bc0cb7b30fa9b3c347b5c4c6617' }, index.h("smoothly-table-row", { key: 'b1dda122006333ea3b811ae0ef26ccc78874252c' }, index.h("smoothly-table-header", { key: '44bd732bdcb5ffba2c0cd98890d36bba72d41884' }, "Header A"), index.h("smoothly-table-header", { key: '60a4b83a8a90bac3605e2a458883b0301b0ab79a' }, "Header B"), index.h("smoothly-table-header", { key: '8e747ba13137cd4c514341453b30bf220ea23cad' }, "Header C"), index.h("smoothly-table-header", { key: '612ed44db5916a271c28ac484da65bfa58f1e746' }, "Header D")), index.h("smoothly-table-row", { key: '6ef4d1d4562c5379084c9cbf944446f399255830' }, index.h("smoothly-table-expandable-cell", { key: '6c97ac4bf3356ba626925e7d05f97a8897b5c0cb' }, "normal row (exp.cell)", index.h("div", { key: '5880c6015f001618827158c71ff0e6194f3474b1', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: 'a5308992866c604bb19b2bf2751962005eb42fea' }, "expandable cell", index.h("div", { key: '6f34518760161e5122fb0e5c5421c26afd1fd7a3', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: '1d7260ebd83fd3af49ceae40f84b1140e6cc8fac' }, "expandable cell", index.h("div", { key: '0f6fca306db05fcc62492b15b2796fcfea454f4d', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: 'f340f2ffdd41d973e07321b0b223c12373e2f099' }, "expandable cell", index.h("div", { key: '2d7d2b9a11a5c5a2fea1291a43667d652018fcd1', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: 'fa40908672f9ee6b4dda4c4f624c2cb86ec8b9e0' }, index.h("smoothly-table-cell", { key: '67b3e59e9d63021095168cc4a929e6ec986ac840' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: 'e8bc8bf95802917ad9d2e07365eb3b6d502bb3d2' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: '22554689665c7dd33e4bae24a89510c7cd4ffdf0' }, "expandable cell", index.h("div", { key: 'e9d7e1929ff9543ed5ae36e731c0d22582a95959', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: '00387a856b04a6b14c3d83b0563923286118db33' }, "expandable cell", index.h("div", { key: '8be0a558b9b16f08168bd32192e29ea499990267', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: '95d701f8e523fccf5f2e02e121e0fbe4ba947026' }, index.h("smoothly-table-cell", { key: '3700c8d7e36232b86fdd7246fd7c59483b6517b9' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: '60344f1b89546b74eb4236ddb71918b3ab6516db' }, "Normal cell"), index.h("smoothly-table-cell", { key: '0e572179151ea06370591d6feee336458f62b8d4' }, "normal cell"), index.h("smoothly-table-cell", { key: '1ee1a28a276760c1b0de7fcc4580afdb5aaaa32f' }, "Normal cell"), index.h("div", { key: '3b67d84399d5de8d2c2801ac078d1168bc51bb2e', slot: "detail" }, "expandable row content"))), index.h("h4", { key: '498f8bff4c0537fd1dc47413bcbb4d5328fde4d0' }, "Demo table 4"), index.h("smoothly-table", { key: '5d5e61c8a261f5efd6b9cb6440ef356de54e30b4' }, index.h("smoothly-table-row", { key: '7bb88e25c5ce755b851d2809bb40f8670bc603ba' }, index.h("smoothly-table-header", { key: 'd38a03f7d37db39c48932a6c43cb1fae5974697c' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: 'f3ef8a67806b3c6afb1e330f2c54b5b88e2b6027' }, "Header expansion", index.h("div", { key: '89a34e92fca0028ee35f1ff5a139b644ee6732f8', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: 'a8c947b92c3716f70409ddb3f5f765bb2ef21c21' }, index.h("smoothly-table-cell", { key: 'b9a4a84c69f62cdb426de5a885ea71a1a65fa94d' }, "A Content"), index.h("smoothly-table-cell", { key: '5d9920de7838ace6cc62634363ba2052be0ffa28' }, "Expansion cell"), index.h("div", { key: 'c3c90b0433ceb8425f97fad5ff24671825a93da4', slot: "detail" }, index.h("smoothly-tab-switch", { key: '005b9f476134a11709754dd0dd2ec65d1a49efd8' }, index.h("smoothly-tab", { key: '6e3ba20b0cd120e514887ef4f6dcdf1194fae440', label: "innertable 1", open: true }, index.h("smoothly-table", { key: '98a5031bc6455f71ea7271186ed19606e91bf2d9' }, index.h("smoothly-table-row", { key: '9602024d5b3d043c4181d4f154d61b242f60f85b' }, index.h("smoothly-table-header", { key: 'b1a48298c6d5c4b5e2dbb81b2b67fe9b808330cd' }, "Header B")), index.h("smoothly-table-expandable-row", { key: '12923478bd85699910491a90fb1ba79037a747a8' }, "B Content"))), index.h("smoothly-tab", { key: '38a211fcb2fa39f08b4abab4a6bf062077420957', label: "innertable 2" }, index.h("smoothly-table", { key: '0c52b2ec005ee2b9e217354a121dcf3cd1085575' }, index.h("smoothly-table-row", { key: '6e49f8762c43c2aeb0804089e113f630d7229c29' }, index.h("smoothly-table-header", { key: 'e0a1640d345ae80ba113a363ecf92c9a88708de6' }, "Header C")), index.h("smoothly-table-expandable-row", { key: 'b3df3069c0ee3cc27a69efa23a5dbf01f9b39017' }, index.h("smoothly-table-cell", { key: '2d59298537b43937184f824b1894dae09f1093f3' }, "C Content"))))))), index.h("smoothly-table-row", { key: '398950c51e841302cf70c6c4906de57560d9e286' }, index.h("smoothly-table-cell", { key: 'a35a442d9383de212850c335fc7aa50d643a66fd' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: 'd5bff81775abbabe606838b2b9abfe00c596bac9' }, "Expandable cell", index.h("div", { key: '4d2b6959b83f5c2577d39940f07cf60f3bd75934', slot: "detail" }, "Expansion content")))), index.h("h4", { key: '48e4c3931aa50a8cd4962720785b707cc8d4abec' }, "Demo table 5"), index.h("smoothly-table", { key: 'fe5d1a032e950b478df5fe05f7965f164af978d0' }, index.h("smoothly-table-row", { key: '254569ae6f28d55511b35dc6a44a768562fdd53f' }, index.h("smoothly-table-header", { key: '21e41414dfc044a80fc254716f5899580187c076' }, "A"), index.h("smoothly-table-header", { key: 'ece90aaefe8ce0908f417599798f3a09cab76ec5' }, "B")), index.h("smoothly-table-expandable-row", { key: '9810a18ffe57eae5a1605fa3447eae0e98e30c72' }, index.h("smoothly-table-cell", { key: '25d32f1932d51028a8451428861139c1685daa61' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '88c2e50333cf22982868c495035862ac0c9d48f9' }, "b row"), index.h("div", { key: '4936c3a53fdc6e5e7f437a24d04585aab0308ff0', slot: "detail" }, index.h("smoothly-table", { key: '97ce2398a891ca1824d8d231fe969fdc2194f9f7' }, index.h("smoothly-table-row", { key: '97c34fe0b3824e31844b225f3dccc4a4c07a1834' }, index.h("smoothly-table-header", { key: '67c548534556e287c85b5baa615b9ee4a6a09980' }, "C"), index.h("smoothly-table-header", { key: '8607d26470e447d7b243f2ae1d09ed231d2c30fc' }, "D")), index.h("smoothly-table-expandable-row", { key: 'af3dc065a497ac0481b244500f9aaee3a9ea2e92' }, index.h("smoothly-table-cell", { key: 'ecb14c34536e25b26b2085243b7dcbf6dfd9eb08' }, "c"), index.h("smoothly-table-cell", { key: '6b785fb1e1a988fac6923e16e8d10046b8e79895' }, "d"), index.h("div", { key: '778f347547d53773f7ca7d78f1e27aa9f1f514ed', slot: "detail" }, index.h("smoothly-table", { key: 'b3e43661a405fdcdf38129835dc81f72ab1e9513' }, index.h("smoothly-table-row", { key: 'ff63e122ffb5cbd576428e8c55bbbe2caa0eb0a9' }, index.h("smoothly-table-header", { key: 'e200c49bccc18e76a8f26af8c2fd91709f0ab1e7' }, "E"), index.h("smoothly-table-header", { key: '474e143069858b5b529841beafc897ff9a9916e9' }, "F")), index.h("smoothly-table-expandable-row", { key: 'eadd405f57e633696bd2db052a4ad36d8bd75273' }, index.h("smoothly-table-cell", { key: '51318cc6f2d98f73d579c8895fb3c76ba1400c95' }, "e row"), index.h("smoothly-table-cell", { key: '5ff6bf2ae2a24c67aad41f1bb361fd7a1f76d052' }, "f row"), index.h("div", { key: 'fc9cc6b21ce1589c7f45a3c9a52f12ffcb74619b', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: 'de4a7061c8e3505874a988c09d155736d81072bf' }, index.h("smoothly-table-cell", { key: 'c45b37d4f85b6d872ee4d5745651f12ba53c5455' }, index.h("span", { key: 'f1ccaab3bed7286d4c0ad80e1c0b4d1bf2607cc0' }, "one"), index.h("span", { key: '8674af810ea990e8be3f4237d2a3a57db8db2e4a' }, "two"), index.h("span", { key: '95c7141959bbcb2c8c9929c2bc9bc384538c5ac5' }, "three")), index.h("smoothly-table-cell", { key: 'ec7db910dc3cc2e3e2e7927e1af4b01c30f23bc2' }, "five", index.h("smoothly-icon", { key: '0d98f968459807290548568b951dd4294f073032', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: '198ade6e521dc295afd66dbb122f721d3445c6b5', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: 'a70fd6842edf7b94fb99dbe0b2829c6ac302e8e5' }, index.h("smoothly-table-expandable-cell", { key: 'a2a4c921e1d9e4f1ca56ab04df93b0f1425c7df0' }, index.h("span", { key: '99ae2dea6e49dffd0efc90d4e1290f96b121e411' }, "nested expandable cells"), index.h("div", { key: 'e214102ef72d47d8003f0c4660721f3e73bbb55e', slot: "detail" }, index.h("smoothly-table", { key: 'fbba9ecaa67ccf1ff5c7d23539b3c4faf11d37ff' }, index.h("smoothly-table-row", { key: '5b356b5abe955986091795c86972e7c8dedfb0e6' }, index.h("smoothly-table-header", { key: '3a387b80348beb6593df2e21373427239725a132' }, "E"), index.h("smoothly-table-header", { key: '990944ca9580d1276647f1001be1897143ffabfe' }, "F")), index.h("smoothly-table-row", { key: 'a24cd6cd06bd02455749a5813dff08884ff7d730' }, index.h("smoothly-table-expandable-cell", { key: '96f632226a852491811fabb166d30ad3232390e2' }, "e cell", index.h("div", { key: '85f936ac49d1b8cfd909df0aec2f7d76120c458c', slot: "detail" }, index.h("smoothly-table", { key: 'add17081f7a3dc48a1b475ac6dae5b815e7967b1' }, index.h("smoothly-table-row", { key: '7054c59a67d524b905707d30a83e103d291ce695' }, index.h("smoothly-table-header", { key: '82950d41f1b24e227dd7d9128e3d6cd419f88935' }, "G"), index.h("smoothly-table-header", { key: '7ce42ef76c3d943363ce142f1b5c01dd7b4dab5f' }, "H")), index.h("smoothly-table-row", { key: 'b6681ab1291a07775dff7e771c09806b7882da70' }, index.h("smoothly-table-expandable-cell", { key: 'afddc209176b2c7568582af0421bc0d75452a952' }, "g cell", index.h("div", { key: '0fce912ac8e5218ad6c05b7062723a16949994aa', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: 'dff026211bfd19c7a8ef9e428323ae57c773eaf9' }, "h cell", index.h("div", { key: '2279bc7734a0f5794177a92490c61467de71423c', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: '92abfad6d298498850261f1fc2198da12cfeb257' }, "f cell", index.h("div", { key: '3dc31a972a8bfa6f393b68c703ab91affec02a55', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: '7a8f3bec9e794e6b678519b0b263a8ebf1a178cf' }, "b cell", index.h("div", { key: '4fbea5fc06942974d01fca3e4a5691f17b057830', slot: "detail" }, index.h("smoothly-table", { key: '77d25149f84328019709cc2e9ad2ce7a217be911' }, index.h("smoothly-table-row", { key: '399228c5534dccbdc3a7f150ab9c4b5fa5a5b983' }, index.h("smoothly-table-header", { key: '1ee897e7b8d3ce871deb4b2d89bac5a6d30b4af6' }, "C"), index.h("smoothly-table-header", { key: 'f3c0c86c9aeae5805eff55eaf2319efbbfe95752' }, "D")), index.h("smoothly-table-row", { key: 'fc6618e4c1f7a5a981ba9af172dbd96043dae82a' }, index.h("smoothly-table-expandable-cell", { key: '5612caa5f79b80ff181b703f4ee7aa2237bf2a7d' }, "c cell", index.h("div", { key: '4dbdddb850c53ca4c21bac31a6acb62f636ac6c9', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: '6b651fd10dc99b9a1fbcf0fae07c31b360c0fe69' }, "d cell", index.h("div", { key: '958ae4bb7fc6adad65f30c5bd87512d59302cf65', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: '884e8ebdcb911f2600c24e18f108bd445b7ab44b' }, "Demo table 6"), index.h("smoothly-table", { key: 'd98c7e0bff92551854080a6893232ef52ef73d9c' }, index.h("smoothly-table-row", { key: '9e9e16cf3dbcbb770200ccfb9c64b8a6eb678e99' }, index.h("smoothly-table-header", { key: '91aad45887e6f06329e9146d802155e1da317107' }, "display"), index.h("smoothly-table-header", { key: '97b7a29f0b381cdeb3302f331f8b8c8f70949d6f' }, "contents")), index.h("smoothly-table-expandable-row", { key: '91de275cd0d3fe7b7053a0310e73ff289254728b' }, index.h("div", { key: '1891ba933e601ac77df5b55831d7de8b56af6157', class: "content" }, index.h("smoothly-table-cell", { key: 'b2660bd964a4030328df78ce92ca7daede8eed5b' }, "A"), index.h("smoothly-table-cell", { key: '949104774b8d8b6f3c00f5e435360c8a5b0acc1e' }, "B")), index.h("div", { key: '2b9322f1138b53d9d2b9ab9068e5e0bc6e8f9d35', slot: "detail" }, "expansion"))), index.h("h4", { key: '56378a1ec3e4f7567538cfde94c0bdd87446512e' }, "Demo table 7"), " ", index.h("span", { key: 'bb9685ee9ff98dfcf0d383ba9804d52849d32c35' }, "nested 1 then normal"), index.h("smoothly-table", { key: '9ae6f5b81526a775b2eb0122d9f11aa6735c53e6' }, index.h("smoothly-table-row", { key: '3e9be7613b2402eeeed6e1ada1bee80779140036' }, index.h("smoothly-table-header", { key: '812ba2a3c4a7bd32f47ed76747a95070c19d8a5b' }, "A"), index.h("smoothly-table-header", { key: 'b240b0b9d0624b1dd677aabce2423a064c6c08bc' }, "B")), index.h("smoothly-table-expandable-row", { key: '092f059addebb8806b0902339d325f44cff42fd1' }, index.h("smoothly-table-cell", { key: 'ec88368f12ac9985881121d1cf41d55fea614403' }, "a"), index.h("smoothly-table-cell", { key: '01e029ba16ae7174f44163a17539c7d827a9fcb3' }, "b"), index.h("div", { key: '89fae13e100f7bf3111c763fe0a5f892f97aa4c5', slot: "detail" }, index.h("smoothly-table", { key: 'd98d1ae09ff1ca5fb5928b0c2c9b04af9460480c' }, index.h("smoothly-table-row", { key: 'd088825f427f1abfba3e4e729be598d2a9f52271' }, index.h("smoothly-table-header", { key: 'bbe9e4fdd58637d1f047061d8ff21f424c69b118' }, "C"), index.h("smoothly-table-header", { key: '3fa1124d1921267ae31129c592369e549d42b7f8' }, "D")), index.h("smoothly-table-row", { key: 'cb9e993adaaaf705f26915842e05714cf9df711d' }, index.h("smoothly-table-cell", { key: '0ae9cb561d4959f7fb810c06395c405e143fe127' }, "c"), index.h("smoothly-table-cell", { key: '071b888b03a43d0eed525501bfabc4c79f44796f' }, "d")), index.h("smoothly-table-row", { key: '0d4e99cbc7139ee9adf72e828c4a33fb353f904d' }, index.h("smoothly-table-cell", { key: 'ac48c46e781f7737915705e750dec5ef53f611cd' }, "ccc"), index.h("smoothly-table-cell", { key: 'f9274be68c34c202145a8783ecf1c9a102e5236e' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '526ce3d98a6ec359bd2a270a1f4306b94cc15f06' }, index.h("smoothly-table-cell", { key: '6b3d45595b284244c68914495e195215d95a5db5' }, "cccc"), index.h("smoothly-table-cell", { key: 'c462e0eb709b026b842df45cf06aec2348459d6b' }, "dddd"), index.h("div", { key: 'f69fe21672deaa27ab406e5a01e60ecff46f0e9e', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: 'ba3629c04f136319dc904965eda31382d9690bfb' }, index.h("smoothly-table-cell", { key: 'ca3b595163ce24fb198cf55d2ace684f9501b5d7' }, "ccccc"), index.h("smoothly-table-cell", { key: 'ae00dbe6489535d79bb92eeb1bf0cd4301d82b10' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '271eb2685bb55e7968a4f72724351931413281db' }, index.h("smoothly-table-cell", { key: 'f70ebd4310de1e44f6a30c7a68439bb9b0eac15a' }, "cccc"), index.h("smoothly-table-cell", { key: '9ede6fd9b1589f0b511610717a241d5c92f88b7f' }, "dddd"), index.h("div", { key: '1886b1e36182359488e97f4b1042b3b78eff9735', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: 'c5541946942c9749f553faef3b7c85e84202da93' }, "Demo table 8"), " ", index.h("span", { key: 'caf31f46cde96cb7dfcd044d41dae130aa84b4d4' }, "not nested"), index.h("smoothly-table", { key: '05e22b3f749c16472520155d3fe4c7b8f2e05a5b' }, index.h("smoothly-table-row", { key: '3bb391a4bca51d9885eae83007d3f9bb4b93f17a' }, index.h("smoothly-table-header", { key: 'bcd6278cca1fc6fe3428cc3764e5a8359fb209eb' }, "C"), index.h("smoothly-table-header", { key: '7952bb1adef6eadaf2a84f29b8abc4d3ca402cd7' }, "D")), index.h("smoothly-table-row", { key: 'd25ddb631b030f3fc90874739cb00b0c5552f121' }, index.h("smoothly-table-cell", { key: 'e4f2a03d24f7efcb01874dfa3c199879dbab28c1' }, "c"), index.h("smoothly-table-cell", { key: 'c417b230cedbe9e4dd87ef0b1bfa20f3f6c3688f' }, "d")), index.h("smoothly-table-row", { key: 'adc0c86a1002d03231129acfce5cd7a40f3cb089' }, index.h("smoothly-table-cell", { key: '732943a8b65f134d9d0502f64713bca443a79af9' }, "cc"), index.h("smoothly-table-cell", { key: 'dea2f0020f4c8dd7e3367d14bc9c6d6d0acc8d63' }, "dd")), index.h("smoothly-table-row", { key: 'ea869528b5eee2e6dc18cf3e9a40c91a207ea6db' }, index.h("smoothly-table-cell", { key: '5a1794e075f346bde3951ca71096f46c30ba195d' }, "ccc"), index.h("smoothly-table-cell", { key: '0abb14eb7a0ba89e8c9554c5f19c30ac4402d45f' }, "ddd"))), index.h("h4", { key: '224f98ff987b968e26631bb207527c07025a2d57' }, "Demo table 9"), index.h("smoothly-table", { key: 'cfc6f020da76331640b71aff11ae8b9ede4675fc' }, index.h("smoothly-table-row", { key: '349eb0c4d8a78ff23c78018e710c7659903e5e1e' }, index.h("smoothly-table-header", { key: '643b76621a4153759118ce25153d117608cca347' }, "First name"), index.h("smoothly-table-header", { key: 'c6aec6d1d6e71e0f37b8f892e05f6de95cca7800' }, "Last name"), index.h("smoothly-table-header", { key: '90f9c6aaa2c1183a083a366ca06ac4d16d3a8188', style: { width: "1px" } }, index.h("smoothly-icon", { key: '849630497b0b9f909160dc1fe52e9ea61adca3bf', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: 'd9e6bf70df8bb6456e969fe1587dc0df8f0b3a41' }, index.h("smoothly-table-cell", { key: 'f07ddb540da19e99dd841caca74f4ebd9f96783b' }, "Jessie"), index.h("smoothly-table-cell", { key: '03807f60095d97dc7790366fb5d8c50f68194189' }, "Doe"), index.h("smoothly-table-cell", { key: '9eb039e7aca0a5135af193794541b52379206da2' }), index.h("div", { key: '1e07d22ac5f6544c86b253482da9125009f1c106', slot: "detail" }, index.h("p", { key: 'd5acae7db701d5fb4d5a1803ad923214309e3ae5' }, "This is Jessie")))), index.h("h4", { key: 'ec36a21f08b5fb689c148b6da319ce5ca9d257c1' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: '142fa7aa03feba15c3d0be3abeaaebb3bf57d2fb' }, index.h("smoothly-table-row", { key: '5afff6455e38def419becd81d9ee30a727010581' }, index.h("smoothly-table-header", { key: 'e5cf3d96b7db6dbb18375076021447483ae618b1' }, "Company")), index.h("smoothly-table-expandable-row", { key: '6a69baac2ca1639d151e8f1da051cc84e00a4185' }, index.h("smoothly-table-cell", { key: '269dfec64b91c1b65e1204d95867dc499beb3d92' }, "Proquse"), index.h("smoothly-lazy", { key: 'c00915b08957723e10387cc5f404fa6c34d3ece2', 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: '2f51137e19f15bd766a382358d354bee5992bb8a' }, index.h("smoothly-table-cell", { key: '97aaa589538275a6d5ab63646bc110298bf47e13' }, "Pax2Pay"), index.h("smoothly-lazy", { key: '1dc54430c599285aee13fb26a1b5de588b585569', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: 'a11b7428bd565d38e90615fc07ea65961ae1fc56' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: 'cd2972ec07c66aaa1b5cf9c9630422fedf541f10' }, index.h("smoothly-table-row", { key: '8b76eacdad16e7cb431de8a85a4e3c7fa106392f' }, index.h("smoothly-table-header", { key: 'a072c5bc21db606346da479fb44313aacb2eb609' }, "Company")), index.h("smoothly-table-row", { key: 'c184aaa82302b8ebe9c309f3f984d4ae2e2a5a96' }, index.h("smoothly-table-expandable-cell", { key: '2ef22098494d03e5dc908fe728c8982a9b3b92b7' }, "Proquse", index.h("smoothly-lazy", { key: 'e090426f9729024858fbbbfad50dc19b30199d06', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: '7550d5a6f932c38fbb0d85e97aae750121847e21' }, index.h("smoothly-table-expandable-cell", { key: '098b30f7661e8b983f038f0ec9a29baa0ccdc7a1' }, "Pax2Pay", index.h("smoothly-lazy", { key: '15e7264414e10b010a6fa18dc2dcc6ff1fa89e69', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: 'e64f1315e78a6e57b7c2506d4ea32422d8ff9339' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: '53a12803827744bf37720f60c3cd99439bc65eee' }, index.h("smoothly-table-row", { key: '3a45a13afaf3eba9bcf1c31a913d53c7bd996ac4' }, index.h("smoothly-table-header", { key: '4766556d4c34028d1bfada4f1eba93a6957ab8d0' }, "Name"), index.h("smoothly-table-header", { key: '95890692aec371f1ee7c3b772fa73b060b9f9113' }, "Age"), index.h("smoothly-table-header", { key: '648f385ff6ae89e95ec9d0a5f8e7b8ba422818e1' }, "Location")), index.h("smoothly-table-row", { key: '63721c569f6f084449561140168994b06afde157' }, index.h("smoothly-table-expandable-cell", { key: '486425032788b8da0381e11ebd17dff792e36bf6' }, "Jessie", index.h("div", { key: '637e06af0b62528f5f56b59fa2f4ca8471b1962c', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: 'a552c0a280737e1e126e5689662bb134c65d0438' }, new Date().getFullYear() - 2000, index.h("div", { key: '9bf19736d79312b4f24cf5e80887748505e2409a', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: 'b48dd4c3cabb278b50d9276db5ec0538d06d249b' }, "UK", index.h("div", { key: 'daded4b764817e9cb9b6a99768228480f44444dd', slot: "detail" }, "London"))))));
     }
 };
 TableDemo.style = SmoothlyTableDemoStyle0;
@@ -12567,18 +12588,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: 'd7e233c053fba323a74a573623a6bf141d6f8ab1' }, index.h("smoothly-filter", { key: 'c246ea99ae3427350e8e1687cd53a3cd6058fe08' }, index.h("smoothly-filter-toggle", { key: '029e46bfb50aa37caa536d8ca9daf64bdb855a38', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '8288a44e699236f0694329ecb1d7017b9524ff9f', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '2589be0e3ae5c8a4883580570b1df34ab99245e1', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '9b2cb2fbf15b34cfb246e2bacb5520df18bd1893', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '71c2925f794a486d0ca442ca202ff53cb94ec02f', 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: '3ef0a91d058fd3baa540573ae9a7455994a2864e', slot: "detail" }, index.h("smoothly-form", { key: 'e204f91a3fed50535f1ce501354c549726ec7e6b', looks: "border" }, index.h("smoothly-filter-select", { key: 'c9192a202234e985c3c731d85cb3dd8b430e1b6b', 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: '66da328498d889b2a87c3b93c66c185c6ecd987f', 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: 'de26f6af10598652eafe5805125754800cf509c8', 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: 'd76165d44907e57898cbbdfb426630a59bc6c4fb', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'e34e1f06642bf8a1e5d2f135a77386f3522cdd69', 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 +12655,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: '7f99296c8b258bcac935f91bf61766ab55b7cb7f' }, index.h("div", { key: 'c4177f1f85595d7618dabe68bd3a4ac52528d2ad' }, index.h("smoothly-icon", { key: 'e68d816b11f7f5948be9b28f6e3f8ad1a1deba63', name: "caret-forward-outline" }), index.h("slot", { key: 'f494db81c816da589b12de1ed1d1562cf30ee36a' })), index.h("tr", { key: 'd974329b89730630cca0873471796493b19a4b12', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: '88b9d0602373ee07c224dc179480cf359d4ffdb7', colSpan: 999 }, index.h("slot", { key: 'c304e44346c82d9b6743f71403262937f3c76d3a', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12670,7 +12691,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: '784a683f40536548d1542c5dae42a58c93cc80d7' }, index.h("div", { key: 'bdbd93a9b79b97e6ef11a3de7c864a3f5f520dc8', onClick: () => (this.open = !this.open) }, index.h("slot", { key: 'eac3be2e5a17eae0171d69659a84f6a1ca012abb' })), index.h("tr", { key: 'd5d553074bc8663cb820de9c1db912c67731d749', class: { spotlight: this.spotlight } }, index.h("td", { key: 'f74d6d53ad0ec47c5da68796a9a96572710a2553', colSpan: 999 }, index.h("slot", { key: '4b2b30c415b95564673bc6bd97dc192575592078', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12688,7 +12709,7 @@ const TableFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '366472017dd6ced157b3c13dbed21b18f5d4afb0' });
+        return index.h("slot", { key: '8caee25c663413b4d07322ebaa29e4c4b81e6d5e' });
     }
 };
 TableFooter.style = SmoothlyTableFooterStyle0;
@@ -12702,7 +12723,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: '9c50912894be88d8ad12e05455997404e0a6dcff' }, index.h("slot", { key: 'c7db69ee0fd006b5f4afe86e41cfae29861e2915' })));
     }
 };
 TableHeader.style = SmoothlyTableHeaderStyle0;
@@ -12732,7 +12753,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: '7a3b1f9bf7edcfc68a3c130c0bc1f54dd079a8e5', ref: e => (this.element = e) }, index.h("slot", { key: '3f8f3c027aa32505d2748ee2f3252e27e2d2c5ac' })));
     }
 };
 TableRow.style = SmoothlyTableRowStyle0;
@@ -12774,7 +12795,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: '3aa3e45e3b498bd83810d5175914264902e12ed3' }, index.h("smoothly-table", { key: '972ea10b0c8d61c3635ee82aff40cd97b195f924', color: "dark" }, index.h("smoothly-table-row", { key: '3d1c5e266bea1efed0218b55e2f3d51585adf554' }, index.h("smoothly-table-header", { key: 'f5a5b9c6b6d3b981f37a885161c1b4ccee95d984' }, "Type"), index.h("smoothly-table-header", { key: '954ea4f900d2b6da85721ff157475376153ded84' }, "Name"), index.h("smoothly-table-header", { key: '795796b0e2832e308e054077241ec5e7927cc4ca' }, "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: 'ac52f912c309fd8ff4966f88112e1734f1dca260' }, index.h("td", { key: '28882429e3af78f158c3de362cad4a5d7dc041bc', colSpan: 2 }, index.h("div", { key: '8264ea4c5ada70d8da21d37d973cb19482e87c20', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: '17bef8c3ed5e3a7d24d0ab58ecd88857d345ea02', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: 'b09e77a40ec3825d266ba203ffd66bff584f9d86' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
     }
 };
 SmoothlyTableTesting.style = SmoothlyTableTestingStyle0;
@@ -12806,7 +12827,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: '4723171c49acfc54de0dd366c86dc4ae36a748c0', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '4da89c3ff15e778573f76dce6cf51801d16f56c1' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12823,7 +12844,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: '79909b0d6b9863f1f35726c9742424d09eceea67' }, index.h("smoothly-tab", { key: '6ba9e1b36f71e562b935c7ffe106743a57cfe843', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '2e98a96cabaa91794571cf01e212034cf7e528da', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: '6f82adb60adf95b201785ed8c8616337468e6e44', label: "test3" }, "this is a test message again!")));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
@@ -12837,7 +12858,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: 'f9885148a3e90c5211fd5cb50d4612b5c2c80cd5' }, 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 +12910,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: '59cc052519c330103c1ee7af8841c87d5834beab' }, index.h("h2", { key: '38d434f987900cb30ee0067861a40f0531c9b9e0' }, "Theme"), index.h("smoothly-theme-picker", { key: 'd53c94c8166e671ec18eb92823037ca4aa519ef2' }, index.h("smoothly-item", { key: '4525c1f1c28807319252c5ce1a2cf959c2d4602d', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '54d67c1a54318b3fdc789ad299f6cb1eb174fd5b', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '92c34281b810fa2e12cf3ba2c43fd283a1a828ff', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '19e3e20be1923bed0c35fb77c41049131f9e5acf', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: 'b5aab0bd881c9747ce44968f9fe56473b9f2619d', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: 'eab343b90f723397cf0dab1d0fddc9f58b4c877d', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'e1700ecefee65dd925a08b7ebbb3695762191163', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'ceb97c7061fc1089710f32e559dffbb96e6ea8bc', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: 'ddbc893e8dc443656fbdbcd589e2835095807751', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '88549ee7826c8acca0f8483e43d22c5ac305beca' }, index.h("smoothly-theme-colors", { key: '892b29c01a5612f924c797d057e6ac646a106499' }), index.h("smoothly-theme-guide", { key: '7b43bc2d185856c5079aa314f618fff3cad7cb5c' })), index.h("smoothly-button", { key: '8afd9ff1ec59e21ff50768b5c5ec691f18b83410', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: 'fdc0eff0412161470e9e82e0c8967b5fdf069338', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: '509e5cd8fe45ea78a244af67f06130f9900aefb4', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: 'ca22e79d75a602dbbaa028707f35648bb404b8e5', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -12903,14 +12924,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: 'eccf9cb726e22d4487cb6ace27703e7dfbe04134' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: '0aed5ffa747946fd7cd6902115c1e37e26be7d48' }),
+            index.h("smoothly-display", { key: '05d7b06bb92058cb0979e6c05e4f250b93b2daa9' }, "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: '00ea5bbf23e0810f03aaed53dddd9047a34bbab7' }),
+            index.h("smoothly-display", { key: 'cb5d6c1b34213ef8910bddea90407fa616d7cdad' }, "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: 'ed757e80775b76dd7dd5f23b770611f58d61729d' }),
+            index.h("smoothly-display", { key: '522fa6897643a768040295d1dcaf57e8a1be5435' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: 'a640d0e6529ce9213b45eb11204d088bd32fea72' }),
         ];
     }
 };
@@ -12925,11 +12946,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: 'b04d09142b7fc625ed15fc1fddf9ef1fe152a95e' }, index.h("smoothly-input-select", { key: '7f0252291789ce32deb059120398a51f9e04bcbd', 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: 'faa6bf731ea355b0e6dcab3762b89a6fadcb7c7a', slot: "label" }, "Select theme"), index.h("slot", { key: 'ff72c60cea8adeeda53827354a43158af8fa3c75' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -12950,7 +12971,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: '644987b51fbf33c412d226db07f8b8f1cc2f9d6a', type: "button" }, index.h("slot", { key: '250550a1656bf524bfa26876a0f84186b71fe30d', name: "icon-slot" }), index.h("slot", { key: '70e62636f0f3248cdf9f65085f451003118b65e4' }, this.name)));
     }
 };
 SmoothlyToggle.style = SmoothlyToggleStyle0;
@@ -12974,7 +12995,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: 'd033fcac30226c928b480e2bc0f92c488ce68c69' }, index.h("button", { key: '1689f4e4211089535dbfc5183a7d5004cd89c008', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'e196b57b5fd5251695d289ea4249e32297954958', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -12987,7 +13008,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: '7e2ff9133320bf46ed21b80e411f8581c6ec757d' }, index.h("h4", { key: '9f22c89fb1d4c5e877b177a7c16badfa9088f2f4' }, "Toggle switches"), index.h("div", { key: '9099b945cd068c2b2e249b32cd8da32bbd147233' }, index.h("p", { key: '689b438c4bbaf0ee4f1a8dd22f65d59c7a131a18' }, "Checkmark"), index.h("span", { key: '2d38884ff8cf48f5f36b352c4e16887491eef7d4' }, index.h("p", { key: '327cda20b0a05941339d6d389bcdc5e8097d2716' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '636f256204747ee42744e09b66360b5841541520', disabled: false, size: "tiny" })), index.h("span", { key: '6c86ebfb8d47205f73d7bacf3bbca08f24e53a2f' }, index.h("p", { key: 'df4225909b433e645f8e3019aaf537dac49c402b' }, "Small"), index.h("smoothly-toggle-switch", { key: '0c662f0416479ed68702ba9a1a73b37690245868', disabled: false, size: "small" })), index.h("span", { key: 'de477be9882509062c463383ace02c4d332752c3' }, index.h("p", { key: '8a20b8b1066f68a35e3c292aee02e4295d24f47e' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'ea18a16d7b2606f34c6c7e231d763d7769c307a5', disabled: false })), index.h("span", { key: '269699331f23db6209e5b17f6936a0729c7ceb87' }, index.h("p", { key: '2e9493b944415c1e4b12c59760eb71bc30875b5d' }, "Large"), index.h("smoothly-toggle-switch", { key: '1f84a5491cc25112633009e7c3b4a27dd74cf506', disabled: false, size: "large" })), index.h("p", { key: '56cb36e8507fdc1835820b76df4a1dbd89d8703a' }, "Colors checkmark"), index.h("span", { key: 'c3eeb5c1f8170e1aae021648364cab5b3315fc63' }, index.h("p", { key: '5d134f7e3f2476d1c37a21db94f490fa4fe43c00' }, "Danger"), index.h("smoothly-toggle-switch", { key: '43c56d79de55bebed1430629dbace401e5f42695', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '839c98a783ad5216e16a71e7bb77e5f81bb1dfd5' }, index.h("p", { key: 'b07bc350ec742cb530fcf52868a236bb55b7d775' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '0fdaccb0ab55dbcb643d27853cc1c788c9ca2a3c', color: "primary", disabled: false, size: "small" })), index.h("span", { key: '65b04b502eb9f1e514738697661cd719bcc3b4b1' }, index.h("p", { key: '4908170cecf35cdc9764d7b00564b56f503ce89e' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '529f8152c6b55d43f7f21ac5c8cd7457322baa5a', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: '5fdde40e44e99d39a667dd72ec00eb4fc39944cd' }), index.h("p", { key: '23fe45d95d7ede42486b6bd8fc0408f2d90c269a' }, "Colors no checkmark"), index.h("span", { key: '2f551618300d7b451738c75acfb7c5d0b8a4519f' }, index.h("p", { key: '4f11c6cf7191a6720023e6e0a9240b55c85ee48d' }, "Danger"), index.h("smoothly-toggle-switch", { key: '903a863c56b8626c53a76c34af27c0420d3fcdf7', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '22a10ff174a4882b3197cd7efbdedbe5a2afa69c' }, index.h("p", { key: '96df0c1c662d450691144ed1ce4f43742d619d06' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '6950a09e8408d8afb9a9b551fd3de877e5f1e0e9', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '9cd32feede5db2e9c2ff22b8e966e704c5365fbb' }, index.h("p", { key: 'bd8dc83aea679f56bba1906cb4e0cce77fe08a15' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'd2473f0e064ae79f4d071c3e274a0e251f529643', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -13018,7 +13039,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: '2241059488fc44870d9c81d04b0a6ee3cd07292a', disabled: this.disabled, name: this.name }, index.h("slot", { key: '7fb2335d9f3cebfc867384122f62c1ab1f45679c' })));
                 break;
         }
         return result;
@@ -13058,7 +13079,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 +13158,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