smoothly 1.111.0 → 1.113.0

package/dist/esm/smoothly-app_98.entry.js

@@ -6384,7 +6384,6 @@ const SmoothlyInputClear = class {
         registerInstance(this, hostRef);
         this.smoothlyInputLoad = createEvent(this, "smoothlyInputLoad");
         this.fill = "clear";
-        this.disabled = false;
         this.size = "icon";
         this.display = true;
         this.type = "input";
@@ -6401,10 +6400,16 @@ const SmoothlyInputClear = class {
                             this.display = defined && !p.readonly && !p.disabled;
                         }
                         if (p instanceof SmoothlyForm) {
-                            this.disabled = p.readonly || Object.values(p.value).filter(val => val).length < 1;
                             this.display = !p.readonly;
                         }
                     });
+                    if (typeof this.disabled !== "boolean") {
+                        parent.listen(async (p) => {
+                            if (p instanceof SmoothlyForm) {
+                                this.disabled = p.readonly || Object.values(p.value).filter(val => val).length < 1;
+                            }
+                        });
+                    }
                 }
             }
         });
@@ -6415,7 +6420,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '660f4822b0bbd4a73a5b2db9eda230fb54f86581', title: this.tooltip }, h("smoothly-button", { key: '04e1befe3503073f4afbc6be33ea2d0b7c7149d7', 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) }, h("slot", { key: 'c3e17aa940535baa194883e7e669e9da61bd1ded' }), h("smoothly-icon", { key: '64a216ff1d5c24d4603e3e810a9f978fcf2914a6', name: "close", size: "tiny" }))));
+        return (h(Host, { key: 'c3057c346978456fae66b50daa28779d57897fe4', title: this.tooltip }, h("smoothly-button", { key: 'ada585112d53669e71813f504c07f4ea51f8365a', 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) }, h("slot", { key: '5300d48ce3c05f9ba4e7492db5069e5252aba1c3' }), h("smoothly-icon", { key: '771161bfba19ad4f9f875481a75c5b7b65d3d143', name: "close", size: "tiny" }))));
     }
     get element() { return getElement(this); }
 };
@@ -7152,7 +7157,7 @@ const SmoothlyInputDemoStandard = class {
         });
     }
     render() {
-        return (h(Host, { key: '0d47a2dd423a8bcdd889139f74ef2ec375d0ea97' }, h("div", { key: 'a884b4c59f663f8c47aa9e3736e6a82235e9d276', class: "description" }, h("h2", { key: '7c0b8da3728fd79d203de1895c6ae146e1eb8aef' }, "Input Standard"), h("p", { key: '10fe94edd162dd158388508c2470359447e6da57' }, "Height of input should be ", h("code", { key: 'dffd62a251af68595f7c5659a2251ada08999b63' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '3f8c09fbdce4b808a430cf7266d40d25a596803d', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '563356600a698bf3c974a61b79520aa8f77c249f', name: "color" }, h("span", { key: 'e12af511b6921b2d9f7d50b45fdbe3d5b34f6817', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '23c642ae01bb6d0f7aaf653c027eb255ee38d90a', slot: "end" })), h("smoothly-input-select", { key: 'fa106dd22e247954860c217692ca37a24fe4f772', name: "looks" }, h("span", { key: 'c42065aac1f357b670cf2a99bb8be554fb314cd9', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: 'c3b585f898718c9f81ef15c1469eccf08988c00e', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: '8fab112575cb1c02c2019022cee83e5e5e65a9c6', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'c34401c8b28faa79a139869c0766e8f8af357ca8', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '672b5bc96fa9e6886c90b5e8354d7dea8c916270', name: "invalid" }, "Invalid"), h("smoothly-input", { key: 'c395fd3b7ca8d1243cd9e9ea4e006f1fd7ef1a27', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '121d1a50813987b2aeac50afe73e40c6a7c4fb8b', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '265ce4b0e44c8fda1b3188929eb5901e1658bfd5', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '1eafaaaa6696f9f1d696742869d10aba19c2f0c9', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'f6a5d34435c177c5dc64c31632dc7a1e65f3e270', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'c4d82ee52f0d44015df7eb734c98aa41f7c92827', class: "width" }, "width: 100%"), h("div", { key: '2ae68895caf503ba92049a32d0054439f069123b', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: 'f5f4ee65ccf3180d2f9181fbc258c79e916e14ee', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: 'bf32f13cfbfa88add92692bf9ee02b836eeea2be' }, "Text"), h("smoothly-input-clear", { key: '26639066ab906f755f7a42e154b1954f1f34f19d', slot: "end" })), h("div", { key: 'de01a46f39aa6f331c5edf54208a6f9f726337e3', class: "height" }), h("smoothly-input-select", { key: 'abb4be407f4b7ed51d5f796bdfce3b2b56c468a4', name: "month", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '49f71dbb091094f79927778d18a0a58e70689f42', slot: "label" }, "Select"), h("smoothly-item", { key: '4b0e9cb4ce233c50a42fe249a3aef5648dc62558', value: "1" }, "January"), h("smoothly-item", { key: '38380b0f13ddeb83e2e19e0ac645dcdbacf6c4df', value: "2" }, "February"), h("smoothly-item", { key: '4f65be9a949261542191e3b484ad646e17f04987', value: "3" }, "March"), h("smoothly-item", { key: 'b6e9be5fbe31a12865717daddcd1a4039c942205', value: "4" }, "April"), h("smoothly-item", { key: '6c867101a115315e30bcf525d3fde4a8e49a5719', value: "5" }, "May"), h("smoothly-item", { key: 'ba4792a24e862aed054b356a444f9b791add16b1', value: "6" }, "June"), h("smoothly-item", { key: '9cc3a21ed384c2e2415311770925458dc13ac8d1', value: "7" }, "July"), h("smoothly-item", { key: '53cf8809b4dbc8256448b5c08a9d07f274e365a3', value: "8" }, "August"), h("smoothly-item", { key: '47a43966214064dab4d321cf9116b5cd87409dd3', value: "9" }, "September"), h("smoothly-item", { key: 'c71ceab27a3f86a5c2a27dc251b18f119f5ac623', value: "10" }, "October"), h("smoothly-item", { key: '7e824138f3b0b28a414465d69bb71c4d6786c3b5', value: "11" }, "November"), h("smoothly-item", { key: 'e7813efea82efe4cd4a8bfa54a7a55b21f53fa48', value: "12" }, "December"), h("smoothly-input-clear", { key: '7072ef8f9ac5b9a3028cbd2962560fc315f3d58b', slot: "end" })), h("div", { key: '3a1c4b4c2834bbb4921e330a77fe477c4741f181', class: "height" }), h("smoothly-input-checkbox", { key: '50499f2f1a4258a56caeb2266da17a9e881c7993', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: '550d44f73f1ae07461d73f66febd5138867e8247', slot: "end" })), h("div", { key: 'acb1b0eaab732df76e2c586e8f56ee6c81fbdd87', class: "height" }), h("smoothly-input-radio", { key: 'ec7f8b66f806e63a09320e2ebfcda71be001cd3b', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '00de1fcac1f811970b3f1154d6286dc7bd6036d8', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '35ea9212aa0f8eec4a96dedc406b428f58b848e6', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'db11c348c12a468a854c53c5f5f692ae7dcbaeb1', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '65707145740b173f4379c6bf5706a962a91bb021', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '883be5fef36a7e6fb16c57b30fcad312f1f25a6b', slot: "end" })), h("div", { key: '2cd8b1bb4ac90fd34732d2bfc34116bcc8429045', class: "height" }), h("smoothly-input-file", { key: '87739b41a33b7be135c5b3ed02648e702ac386ca', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '0d10524c66e0625ec86431a8c19dcedf83f47eac', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'a95f256a28cf294430040b6c6028921f0c620c8d', slot: "end" })), h("div", { key: '48650848e22a86ca8aa7501e09fbd8c5f0ce83ea', class: "height" }), h("smoothly-input-range", { key: 'b1e96735886d8e3e4b451ed17fa11ecada3e2302', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: 'ab7f71a498ce9404aacc63f0273bd3b715ddf12c', slot: "end" })), h("div", { key: '0ff2870912f9ae2e2b41ba9d982c906124ef2641', class: "height" }), h("smoothly-input-color", { key: 'fa4d779da5bfaea1e9644e721d9f6c4249949407', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '63674017888873443dc7b744114dae7996e79c52' }, "Color"), h("smoothly-input-clear", { key: '6344ad242592e19365961e80cc0814023eaa7dc2', slot: "end" })), h("div", { key: '16e0b71b1b6b1ee68813e3827b96bffe5ec63ef7', class: "height" }), h("smoothly-input-date", { key: '85e2fc24713c7543766e5c88341de28bb235eec9', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: '106776717336dc925ceef2fc726c2acbff48a060' }, "Date"), h("smoothly-input-clear", { key: 'dd31d582a9da8729177e44f0709e20dd22ad1ceb', slot: "end" })), h("div", { key: '7a3b4c683d4d6ba46a09890c3112126911376100', class: "height" }), h("smoothly-input-date-time", { key: '6826e6fad4f1bcb21a30188e489215a785bf9d92', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: 'bfa1fd01c821d467bb322310b56353e8a21b37ed', slot: "end" })), h("div", { key: 'a9b5fac536b744270db8ee2c2e29c05f011a522a', class: "height" }), h("smoothly-input-date-range", { key: '437b2e44f71354330bded70e2ee61a1180b42215', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'ce778323ca7e585f98cb5c6d029593e329eaa3f0' }, "Date Range"), h("smoothly-input-clear", { key: '96a689e9facde44dc827d19c9476fd7191a753ce', slot: "end" })), h("div", { key: '99a70bddd4168419ce44d234a84d5b234de4abcf', class: "height" }))));
+        return (h(Host, { key: '0d47a2dd423a8bcdd889139f74ef2ec375d0ea97' }, h("div", { key: 'a884b4c59f663f8c47aa9e3736e6a82235e9d276', class: "description" }, h("h2", { key: '7c0b8da3728fd79d203de1895c6ae146e1eb8aef' }, "Input Standard"), h("p", { key: '10fe94edd162dd158388508c2470359447e6da57' }, "Height of input should be ", h("code", { key: 'dffd62a251af68595f7c5659a2251ada08999b63' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '3f8c09fbdce4b808a430cf7266d40d25a596803d', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '563356600a698bf3c974a61b79520aa8f77c249f', name: "color" }, h("span", { key: 'e12af511b6921b2d9f7d50b45fdbe3d5b34f6817', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '23c642ae01bb6d0f7aaf653c027eb255ee38d90a', slot: "end" })), h("smoothly-input-select", { key: 'fa106dd22e247954860c217692ca37a24fe4f772', name: "looks" }, h("span", { key: 'c42065aac1f357b670cf2a99bb8be554fb314cd9', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: 'c3b585f898718c9f81ef15c1469eccf08988c00e', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: '8fab112575cb1c02c2019022cee83e5e5e65a9c6', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'c34401c8b28faa79a139869c0766e8f8af357ca8', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '672b5bc96fa9e6886c90b5e8354d7dea8c916270', name: "invalid" }, "Invalid"), h("smoothly-input", { key: 'c395fd3b7ca8d1243cd9e9ea4e006f1fd7ef1a27', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '121d1a50813987b2aeac50afe73e40c6a7c4fb8b', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '265ce4b0e44c8fda1b3188929eb5901e1658bfd5', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '1eafaaaa6696f9f1d696742869d10aba19c2f0c9', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'f6a5d34435c177c5dc64c31632dc7a1e65f3e270', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'c4d82ee52f0d44015df7eb734c98aa41f7c92827', class: "width" }, "width: 100%"), h("div", { key: '2ae68895caf503ba92049a32d0054439f069123b', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: 'f5f4ee65ccf3180d2f9181fbc258c79e916e14ee', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: 'bf32f13cfbfa88add92692bf9ee02b836eeea2be' }, "Text"), h("smoothly-input-clear", { key: '26639066ab906f755f7a42e154b1954f1f34f19d', slot: "end" })), h("div", { key: 'de01a46f39aa6f331c5edf54208a6f9f726337e3', class: "height" }), h("smoothly-input-select", { key: '510076d3203f1fb1e2e506832364710feb15f0c8', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '9bf577f8339bb2c4edde779113b069eeb34ef748', slot: "label" }, "Select"), h("smoothly-item", { key: '60780147390d2cf0e8da424841a50e27417479e6', value: "1" }, "January"), h("smoothly-item", { key: '173c112cb747fe2b85a1633df99fbcb506f58d48', value: "2" }, "February"), h("smoothly-item", { key: 'a7ee7adea1ea9b92362737cc840aca34a6f8d436', value: "3" }, "March"), h("smoothly-item", { key: 'd9640cc6ffef2dd85241ca133b7a145624f4fc9a', value: "4" }, "April"), h("smoothly-item", { key: 'a8481666f7c15b3a0ff0f88602e9dbc4056c415b', value: "5" }, "May"), h("smoothly-item", { key: '0e5303b6e803afe7f7e09e4624319e4ff418a689', value: "6" }, "June"), h("smoothly-item", { key: 'b83eb587d51b7d9921f9d3abef167ff0d936c5ae', value: "7" }, "July"), h("smoothly-item", { key: '3d2b9def6e4a70238e61a0eb84328e90fec966ef', value: "8" }, "August"), h("smoothly-item", { key: '93a12ce1b0e1dd4c9178520a0ecb517df10087a2', value: "9" }, "September"), h("smoothly-item", { key: 'd33c600d87e72fa217a90c2d8ed45d2481cee72f', value: "10" }, "October"), h("smoothly-item", { key: 'fe604dc056ea4a597a8b6d7f1be09c89c879dbdf', value: "11" }, "November"), h("smoothly-item", { key: '51bcb469aa305b0ae7cacfdd875022ec39530e6c', value: "12" }, "December"), h("smoothly-input-clear", { key: '0833dfa02fbc7cff603e37644baed0a6b8c4e4d5', slot: "end" })), h("div", { key: '79f0f6f00a86ddcc2dfdb4a68b0ebe07bc689c00', class: "height" }), h("smoothly-input-checkbox", { key: 'be23f09cb9a5d45fa322399d9990665bb9a4bf34', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'b017bae486a26d0987c569284dcb933c32128870', slot: "end" })), h("div", { key: 'cfcf1788ea24c44ebdc3b66918475fbeadbb7eb3', class: "height" }), h("smoothly-input-radio", { key: 'eb33d705570a661c8a6af35664274d15dadf8651', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '34e9e0a159e7b8132dcb8b83b23b71c7b3315950', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: 'c3eeacc48f78063b3a22d3b8dcfd7e883254d3f1', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '7e268ae592952b97ac20e89519d778b2aadb8fcc', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '79e5d297744e5478f49d68cae946c2ecef34eba6', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'dff06e18033a50015e9108d368824f30b811c264', slot: "end" })), h("div", { key: '9d3c81366b646b71f06c601cf57653ff9c99cc0b', class: "height" }), h("smoothly-input-file", { key: 'b2c1b865f112c22559951812ad2de40d26290a0e', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '4db9c0510129863aeeb39d8752554ae83c69ec5f', slot: "label" }, "File"), h("smoothly-input-clear", { key: '3f5ac4383708baf78c2f916a13c0583a315fcd4a', slot: "end" })), h("div", { key: 'fed8a7e19c81970c362b4795555e27691b04e7bc', class: "height" }), h("smoothly-input-range", { key: '471ff911649f0fff74d0a6a2f1f6ff9836be1e29', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '95cd1bfffa55434df83458f93c72dc7628b9e26d', slot: "end" })), h("div", { key: '89529b1695656c2ddf4eb8ec68186200b0b4054a', class: "height" }), h("smoothly-input-color", { key: '22deff755c1da762df9d27dce227432862a4c3ef', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '62579a646e0c4d6f4a267ab6aa22c1d3a0e24895' }, "Color"), h("smoothly-input-clear", { key: '1f3617c7f813399adcfafaa68e919cca440f2814', slot: "end" })), h("div", { key: 'a0f45e33d4328c5c534f92929617f6fb42577827', class: "height" }), h("smoothly-input-date", { key: 'b2217e88e18bbb4f4bb8ecc768fcd67a022ff05b', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: 'acc7706396f3923db94d65cc12e25df341052a3f' }, "Date"), h("smoothly-input-clear", { key: '962a1961612037e2171caa40a25397ff501de2fa', slot: "end" })), h("div", { key: 'c2b39662f59227a0feedd322db39055d52f4b3fc', class: "height" }), h("smoothly-input-date-time", { key: '9144e9af51bc9ec45f771eae3b1ab80cec7d3f67', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: 'b40b0db65ab9d9ef61527f14cd951d2e337b3a31', slot: "end" })), h("div", { key: '1e39a4410aae2f4b7bb6501fa7a436c46034028e', class: "height" }), h("smoothly-input-date-range", { key: '8be62583be2bc8955ac923b18155c60ebe7e216a', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'a893c51241fd2935145f97dd68ff7fb7226ccdfc' }, "Date Range"), h("smoothly-input-clear", { key: 'de9180934a9b8396e54aaafb39d25a0777433c81', slot: "end" })), h("div", { key: 'a7493fe9750ab795e22aa3fc543405f5d627440a', class: "height" }))));
     }
     get element() { return getElement(this); }
 };
@@ -7811,7 +7816,6 @@ const SmoothlyInputReset = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.smoothlyInputLoad = createEvent(this, "smoothlyInputLoad");
-        this.disabled = false;
         this.size = "icon";
         this.display = true;
         this.type = "input";
@@ -7821,7 +7825,6 @@ const SmoothlyInputReset = class {
         this.smoothlyInputLoad.emit(parent => {
             if (Editable.Element.type.is(parent)) {
                 this.parent = parent;
-                this.readonlyAtLoad = parent.readonly;
                 parent.listen(async (p) => {
                     if (Input.is(p)) {
                         const defined = typeof p.defined == "boolean" ? p.defined : Boolean(await p.getValue());
@@ -7829,9 +7832,16 @@ const SmoothlyInputReset = class {
                     }
                     if (p instanceof SmoothlyForm) {
                         this.display = !p.readonly;
-                        this.disabled = !this.readonlyAtLoad && !p.isDifferentFromInitial;
                     }
                 });
+                if (typeof this.disabled !== "boolean") {
+                    this.readonlyAtLoad = parent.readonly;
+                    parent.listen(async (p) => {
+                        if (p instanceof SmoothlyForm) {
+                            this.disabled = !this.readonlyAtLoad && !p.isDifferentFromInitial;
+                        }
+                    });
+                }
             }
         });
     }
@@ -7843,7 +7853,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'cff6bf87e1bc037cec6f46d6c2588fcea30a91a3', title: this.tooltip }, h("smoothly-button", { key: 'b26d4ea446cf62de69d817f1d3799b0f12e2ced9', 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) }, h("slot", { key: 'aed086c207c6ed79df2552b4d03377191f6f8751' }), h("smoothly-icon", { key: 'cd506e93eca085433eb3a3d6fd5e37a714001960', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: '07fe387d6e31ee4b8733dd797ccbb6bc2a602450', title: this.tooltip }, h("smoothly-button", { key: 'db64da157afc163be326cc342d344881b0dd665c', 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) }, h("slot", { key: '6a6a1f5f60b8dee75d3adeba5a7dfd611a84d256' }), h("smoothly-icon", { key: '5d37c4a5f21cf620ab223979e1b0d0e589b97d73', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = styleCss$D();
@@ -7864,7 +7874,75 @@ var Item;
     Item.is = Item.type.is;
 })(Item || (Item = {}));
 
-const styleCss$C = () => `.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)}[looks="border"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within::before{content:"";position:absolute;inset:0;pointer-events:none;border-bottom:2px solid rgb(var(--smoothly-input-border-focus));z-index:10}[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="grid"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within{position:relative;box-shadow:0px 0px 0px 2px rgb(var(--smoothly-input-border-focus));outline:none;z-index:10}[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-color:transparent}[looks="transparent"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-select-h{cursor:not-allowed;--smoothly-input-foreground:var(--smoothly-input-disabled-foreground);--smoothly-input-background:var(--smoothly-input-disabled-background);--smoothly-input-border:var(--smoothly-input-disabled-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],.floating-label.sc-smoothly-input-select-h .label.sc-smoothly-input-select,.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,.has-text.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 smoothly-icon.smoothly-invalid.sc-smoothly-input-select{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.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;padding:var(--input-value-padding-top) .8rem var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.select-display.sc-smoothly-input-select{cursor:pointer}.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:.6rem .8rem .6rem 0;align-items:center}.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: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;height:100%;padding-inline:var(--input-padding-side)}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{cursor:pointer}[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:20;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}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item.sc-smoothly-input-select::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:0.5rem;border:1px solid rgb(var(--smoothly-input-foreground));border-radius:0.15rem;vertical-align:middle}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item[selected].sc-smoothly-input-select::after{content:"✔";position:absolute;left:0.65rem;color:rgb(var(--smoothly-item-selected-foreground))}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item[selected].sc-smoothly-input-select::before{border:1px solid rgb(var(--smoothly-item-selected-foreground))}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item[selected].sc-smoothly-input-select::after{color:rgb(var(--smoothly-item-selected-foreground))}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item.sc-smoothly-input-select:hover::before{border:1px solid rgb(var(--smoothly-item-hover-foreground))}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item.sc-smoothly-input-select:hover::after{color:rgb(var(--smoothly-item-hover-foreground))}.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:.7rem .7rem .7rem .25rem}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{display:flex;position:sticky;top:0;gap:1rem;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview::before{content:"";position:absolute;inset:0;background-color:rgba(var(--smoothly-primary-tint), 0.5);z-index:-1}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name="search-outline"].sc-smoothly-input-select,.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{color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, 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}`;
+var layout;
+(function (layout) {
+    function firstItemHeight(items) {
+        var _a;
+        return (_a = items.find(item => item.clientHeight > 0)) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    }
+    layout.firstItemHeight = firstItemHeight;
+    function applyMenuHeight(element, itemHeight, menuHeight) {
+        var _a, _b;
+        const height = menuHeight.endsWith("items")
+            ? `${itemHeight * +((_b = (_a = menuHeight.match(/^(\d+(\.\d+)?|\.\d+)/g)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "10")}px`
+            : menuHeight;
+        element.style.setProperty("--menu-height", height);
+    }
+    layout.applyMenuHeight = applyMenuHeight;
+    function applyElementHeight(element) {
+        element === null || element === void 0 ? void 0 : element.style.setProperty("--element-height", `${element.clientHeight}px`);
+    }
+    layout.applyElementHeight = applyElementHeight;
+})(layout || (layout = {}));
+
+var menu;
+(function (menu) {
+    function next(items, direction) {
+        const selectable = items.filter(item => !item.hidden && !item.disabled);
+        const currentIndex = selectable.findIndex(item => item.marked);
+        let index;
+        if (currentIndex == -1) {
+            index = 0;
+        }
+        else {
+            index = (currentIndex + direction + selectable.length) % selectable.length;
+        }
+        return { current: selectable[currentIndex], next: selectable[index] };
+    }
+    menu.next = next;
+    function hasVisibleItems(items) {
+        return items.some(item => !item.getAttribute("hidden"));
+    }
+    menu.hasVisibleItems = hasVisibleItems;
+    function markOnly(items, item) {
+        items.map(i => (i.marked = i === item));
+    }
+    menu.markOnly = markOnly;
+    function findFirstSelected(items) {
+        return items.find(item => item.selected);
+    }
+    menu.findFirstSelected = findFirstSelected;
+    function findFirstMarked(items) {
+        return items.find(item => item.marked);
+    }
+    menu.findFirstMarked = findFirstMarked;
+})(menu || (menu = {}));
+
+var scroll;
+(function (scroll) {
+    function centerInView(container, item, behavior = "smooth") {
+        var _a;
+        if (item && container) {
+            container.scrollTo({
+                top: item.offsetTop + item.offsetHeight / 2 - ((_a = container.clientHeight) !== null && _a !== void 0 ? _a : 0) / 2,
+                behavior,
+            });
+        }
+    }
+    scroll.centerInView = centerInView;
+})(scroll || (scroll = {}));
+
+const styleCss$C = () => `.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)}[looks="border"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within::before{content:"";position:absolute;inset:0;pointer-events:none;border-bottom:2px solid rgb(var(--smoothly-input-border-focus));z-index:10}[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="grid"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within{position:relative;box-shadow:0px 0px 0px 2px rgb(var(--smoothly-input-border-focus));outline:none;z-index:10}[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-color:transparent}[looks="transparent"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-select-h{cursor:not-allowed;--smoothly-input-foreground:var(--smoothly-input-disabled-foreground);--smoothly-input-background:var(--smoothly-input-disabled-background);--smoothly-input-border:var(--smoothly-input-disabled-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],.floating-label.sc-smoothly-input-select-h .label.sc-smoothly-input-select,.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,.has-text.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 smoothly-icon.smoothly-invalid.sc-smoothly-input-select{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.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}.sc-smoothly-input-select-h>.select-display.sc-smoothly-input-select{box-sizing:border-box;display:flex;padding:var(--input-value-padding-top) .8rem var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>.select-display.sc-smoothly-input-select{cursor:pointer}.sc-smoothly-input-select-h:not(:has([slot=label]))>.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>.select-display.sc-smoothly-input-select{padding:.6rem .8rem .6rem 0;align-items:center}.sc-smoothly-input-select-h>.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: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;height:100%;padding-inline:var(--input-padding-side)}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{cursor:pointer}[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}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:20;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));inset-inline:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);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}.sc-smoothly-input-select-h:not(.open)>.dropdown.sc-smoothly-input-select{border:0}[looks="grid"].sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select,[looks="transparent"].sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select{inset-inline:-1px}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select{display:flex;position:sticky;align-items:center;top:0;gap:1rem;padding:.7rem .7rem .7rem .25rem;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)))}.sc-smoothly-input-select-h:not(.has-filter)>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select{height:0;padding:0;overflow:hidden;pointer-events:none}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select::before{content:"";position:absolute;inset:0;background-color:rgba(var(--smoothly-primary-tint), 0.5);z-index:-1}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select>.search-input.sc-smoothly-input-select{width:100%;background-color:transparent;border:none;outline:none}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select>smoothly-icon[name="search-outline"].sc-smoothly-input-select,.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select>smoothly-icon[name="backspace-outline"].sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item{position:relative}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:0.5rem;border:1px solid rgb(var(--smoothly-input-foreground));border-radius:0.15rem;vertical-align:middle}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item[selected]::before{border-color:rgb(var(--smoothly-item-selected-foreground))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item:hover::before{border:1px solid rgb(var(--smoothly-item-hover-foreground))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item[selected]::after{content:"✔";position:absolute;left:0.65rem;color:rgb(var(--smoothly-item-selected-foreground))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item:hover::after{color:rgb(var(--smoothly-item-hover-foreground))}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select{min-width:fit-content}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.menu[hidden].sc-smoothly-input-select{display:none}`;
 
 const SmoothlyInputSelect = class {
     constructor(hostRef) {
@@ -7912,18 +7990,24 @@ const SmoothlyInputSelect = class {
         this.onSelectedChange();
     }
     componentDidRender() {
-        var _a, _b, _c, _d, _e;
-        this.itemHeight === undefined && (this.itemHeight = (_a = this.items.find(item => item.clientHeight > 0)) === null || _a === void 0 ? void 0 : _a.clientHeight);
+        var _a;
+        (_a = this.itemHeight) !== null && _a !== void 0 ? _a : (this.itemHeight = layout.firstItemHeight(this.items));
         if (this.menuHeight && this.itemHeight) {
-            (_b = this.element) === null || _b === void 0 ? void 0 : _b.style.setProperty("--menu-height", !this.menuHeight.endsWith("items") || this.items.length == 0
-                ? this.menuHeight
-                : `${this.itemHeight * +((_d = (_c = this.menuHeight.match(/^(\d+(\.\d+)?|\.\d+)/g)) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : "10")}px`);
+            layout.applyMenuHeight(this.element, this.itemHeight, this.menuHeight);
         }
-        (_e = this.element) === null || _e === void 0 ? void 0 : _e.style.setProperty("--element-height", `${this.element.clientHeight}px`);
-        if (this.ordered && !this.multiple && this.open && !this.lastOpen) {
+        layout.applyElementHeight(this.element);
+        const justOpened = this.open && !this.lastOpen;
+        if (justOpened && this.ordered) {
             this.scrollToSelected();
         }
     }
+    scrollToSelected() {
+        const selectedItem = menu.findFirstSelected(this.items);
+        if (selectedItem) {
+            menu.markOnly(this.items, selectedItem);
+            scroll.centerInView(this.dropdownElement, selectedItem, "instant");
+        }
+    }
     async disconnectedCallback() {
         if (!this.element.isConnected) {
             await this.unregister();
@@ -7957,15 +8041,15 @@ const SmoothlyInputSelect = class {
         this.selected = [...this.initialValue];
         this.displaySelected();
         this.isDifferentFromInitial = false;
-        this.open && this.handleShowOptions();
+        this.closeMenu();
     }
     async clear() {
         var _a;
         if (this.clearable) {
             this.selected.forEach(item => (item.selected = item.hidden = false));
             this.selected = [];
-            if (this.displaySelectedElement) {
-                this.displaySelectedElement.innerHTML = (_a = this.placeholder) !== null && _a !== void 0 ? _a : "";
+            if (this.displayElement) {
+                this.displayElement.innerHTML = (_a = this.placeholder) !== null && _a !== void 0 ? _a : "";
             }
         }
     }
@@ -7993,9 +8077,9 @@ const SmoothlyInputSelect = class {
         this.observer.publish();
     }
     async smoothlyInputLoadHandler(event) {
-        if (event.target &&
-            (("name" in event.target && event.target.name !== this.name) ||
-                (event.composedPath().some(e => e == this.iconsDiv) && !event.composedPath().some(e => e == this.toggle)))) {
+        const fromSelf = event.target && "name" in event.target && event.target.name !== this.name;
+        const fromEndSlot = event.composedPath().some(e => e == this.iconsElement);
+        if (fromSelf || fromEndSlot) {
             event.stopPropagation();
         }
         else if (Item.Element.is(event.target)) {
@@ -8007,7 +8091,9 @@ const SmoothlyInputSelect = class {
         this.displaySelected();
     }
     onWindowClick(event) {
-        !event.composedPath().includes(this.element) && this.open && this.handleShowOptions();
+        if (this.open && !event.composedPath().includes(this.element)) {
+            this.closeMenu();
+        }
     }
     onItemDomChange(e) {
         e.stopPropagation();
@@ -8035,144 +8121,120 @@ const SmoothlyInputSelect = class {
     onClosed(open, before) {
         this.lastOpen = before;
         if (!open) {
-            const markedItem = this.items.find(item => item.marked);
+            const markedItem = menu.findFirstMarked(this.items);
             if (markedItem) {
                 markedItem.marked = false;
             }
         }
         this.smoothlySelectOpen.emit(open);
     }
-    handleShowOptions(event) {
-        const wasButtonClicked = (event === null || event === void 0 ? void 0 : event.composedPath().some(e => e == this.iconsDiv)) && !event.composedPath().some(e => e == this.toggle);
-        const clickedItem = event === null || event === void 0 ? void 0 : event.composedPath().find((el) => "tagName" in el && el.tagName == "SMOOTHLY-ITEM");
-        !this.readonly &&
-            !this.disabled &&
-            !(clickedItem && this.items.includes(clickedItem) && this.multiple) &&
-            !wasButtonClicked &&
-            (this.open = !this.open);
-        this.filter = "";
-    }
     areValuesEqual(selected, initialValue) {
         return selected.length === initialValue.length && initialValue.every(value => selected.includes(value));
     }
     displaySelected() {
         var _a;
         const displayString = this.selected.map(option => `<div>${option.innerHTML}</div>`).join("");
-        this.displaySelectedElement &&
-            (this.displaySelectedElement.innerHTML = this.selected.length > 0 ? displayString : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : ""));
+        this.displayElement &&
+            (this.displayElement.innerHTML = this.selected.length > 0 ? displayString : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : ""));
     }
     onKeyDown(event) {
-        if (!this.searchDisabled) {
-            event.stopPropagation();
-            const visibleItems = this.items.some(item => item.getAttribute("hidden") === null);
-            if (event.key != "Tab" && !event.ctrlKey && !event.metaKey) {
-                event.preventDefault();
-            }
-            if (this.open) {
-                switch (event.key) {
-                    case "ArrowUp":
-                        visibleItems && this.move(-1);
-                        break;
-                    case "ArrowDown":
-                        visibleItems && this.move(1);
-                        break;
-                    case "Escape":
-                        if (this.filter == "") {
-                            this.open = false;
-                        }
-                        else {
-                            this.filter = "";
-                        }
-                        break;
-                    case "Backspace":
-                        this.filter = event.ctrlKey ? "" : this.filter.slice(0, -1);
-                        break;
-                    case "Enter":
-                        const result = this.items.find(item => item.marked);
-                        if (result === null || result === void 0 ? void 0 : result.value) {
-                            result.selected = !result.selected;
-                        }
-                        if (!this.multiple) {
-                            this.open = false;
-                            this.filter = "";
-                        }
-                        break;
-                    case "Tab":
-                        this.open = false;
-                        break;
-                    default:
-                        if (event.key.length == 1) {
-                            this.filter += event.key;
-                        }
-                        break;
-                }
-            }
-            else {
-                switch (event.key) {
-                    case "Enter":
-                    case " ":
-                        this.handleShowOptions();
-                        break;
-                    case "ArrowDown":
-                        this.handleShowOptions();
-                        this.move(1);
-                        break;
-                    case "ArrowUp":
-                        this.handleShowOptions();
-                        this.move(-1);
-                        break;
-                    case "Tab":
-                        break;
-                    default:
-                        this.handleShowOptions();
-                        if (event.key.length == 1) {
-                            this.filter += event.key;
-                        }
-                        break;
-                }
-            }
+        event.stopPropagation();
+        const key = event.key;
+        if (key == "ArrowUp" || key == "ArrowDown") {
+            event.preventDefault();
+            this.handlerNavigate(key);
+        }
+        else if (key == "Escape") {
+            event.preventDefault();
+            this.handleEscape();
+        }
+        else if (key == "Enter") {
+            event.preventDefault();
+            this.handleEnter();
+        }
+        else if (key == " ") {
+            event.preventDefault();
+            this.openMenu();
+        }
+        else if (this.open && key == "Tab") {
+            this.closeMenu();
         }
     }
-    scrollToSelected() {
-        const selectedItem = this.items.find(item => item.selected);
-        if (selectedItem) {
-            this.items.map(item => (item.marked = false));
-            selectedItem.marked = true;
-            this.scrollTo(selectedItem, "instant");
+    handlerNavigate(key) {
+        if (menu.hasVisibleItems(this.items)) {
+            this.move(key == "ArrowUp" ? -1 : 1);
         }
+        this.openMenu();
     }
-    move(direction) {
-        const selectableItems = this.items.filter(item => !item.hidden && !item.disabled);
-        let markedIndex = selectableItems.findIndex(item => item.marked);
-        if (markedIndex == -1) {
-            markedIndex = 0;
+    handleEscape() {
+        if (this.filter) {
+            this.resetFilter();
         }
         else {
-            selectableItems[markedIndex].marked = false;
-            markedIndex = (markedIndex + direction + selectableItems.length) % selectableItems.length;
+            this.closeMenu();
         }
-        selectableItems[markedIndex].marked = true;
-        this.scrollTo(selectableItems[markedIndex], "smooth");
     }
-    scrollTo(item, behavior) {
-        var _a, _b, _c;
-        (_a = this.optionsDiv) === null || _a === void 0 ? void 0 : _a.scrollTo({
-            top: item.offsetTop + item.offsetHeight / 2 - ((_c = (_b = this.optionsDiv) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 0) / 2,
-            behavior,
-        });
+    handleEnter() {
+        const item = menu.findFirstMarked(this.items);
+        if (item === null || item === void 0 ? void 0 : item.value) {
+            item.selected = !item.selected;
+        }
+        if (!this.multiple) {
+            this.closeMenu();
+            this.resetFilter();
+        }
+    }
+    move(direction) {
+        const { current, next } = menu.next(this.items, direction);
+        current && (current.marked = false);
+        next.marked = true;
+        scroll.centerInView(this.dropdownElement, next, "smooth");
     }
     addItem() {
         this.addedItems = this.addedItems.concat(h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
+    resetFilter() {
+        this.searchElement && (this.searchElement.value = "");
+        this.filter = "";
+    }
+    setFilter(filter) {
+        if (filter) {
+            this.filter = filter;
+            this.openMenu();
+        }
+        else {
+            this.resetFilter();
+        }
+    }
+    openMenu({ focus } = {}) {
+        this.open = true;
+        focus && queueMicrotask(() => { var _a; return (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }
+    closeMenu() {
+        this.open = false;
+        this.resetFilter();
+    }
+    toggleMenu() {
+        if (!this.readonly && !this.disabled) {
+            this.open ? this.closeMenu() : this.openMenu({ focus: true });
+        }
+    }
+    onClick(e) {
+        const wasIconsClicked = e.composedPath().includes(this.iconsElement) && !e.composedPath().includes(this.toggleElement);
+        const wasSearchClicked = e.composedPath().includes(this.searchElement);
+        const wasItemClicked = e
+            .composedPath()
+            .find(element => element instanceof HTMLElement && element.tagName === "SMOOTHLY-ITEM");
+        if (!wasIconsClicked && !wasSearchClicked && !(wasItemClicked && this.multiple)) {
+            this.toggleMenu();
+        }
+    }
     render() {
-        return (h(Host, { key: 'ca6c2263ae2ef16cb0548e10ead81e15b2b42487', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '032b8a92bb4c74c48a9ea22b3ae552c2cac8d30a', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: 'b1d1e8f9143643a69c23cc16668e901e5329c1cb', class: "icons", ref: element => (this.iconsDiv = element) }, h("smoothly-icon", { key: '958d9fa44174d2b4933e34b5a6c89963e42cb7de', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '0a9725e2e1b37159f392ed2c8cb0e69b0253ec53', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: 'fb656bc03fbec14da5e1914bd6bebed50ad5fbcd', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '743b3bc40c4bd7254225fd3f0962fcb67d07df59', name: "label" }), h("div", { key: 'ac6b4007348834d933c8673710ebdacc3def6001', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("div", { key: '502094a51085fa634e98b0d511713757ff30877d', class: "search-preview" }, h("smoothly-icon", { key: '78729a52979f85bced39cecd9e861ff06185beb0', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: '50956a5cc4a63ef0515947ddbbb7962d38e260c1', name: "backspace-outline", size: "small", onClick: e => {
-                e.stopPropagation();
-                this.filter = "";
-                this.element.focus();
-            } }), this.mutable && (h("smoothly-icon", { key: 'b6f99488a836ad3e33d03ebb600bc5c5fc42e8cc', name: "add", size: "small", onClick: e => {
-                e.stopPropagation();
-                this.addItem();
-            } })))), h("slot", { key: 'a60d0d54bfc5dbae48ec336f92c5556a5ba13b2e' }), this.addedItems)));
+        return (h(Host, { key: 'fc69e6b3aa75a286df61522835899bf05893e887', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, h("div", { key: 'dc0215f0d88bb06e505f9392334926e337ede251', class: "select-display", ref: element => (this.displayElement = element) }, this.placeholder), h("div", { key: 'bee374985877632d52d267f69b35bdcf0e59e3a2', class: "icons", ref: element => (this.iconsElement = element) }, h("smoothly-icon", { key: 'd7a72d5df184d7f9196ee8cab6240a71755f89e3', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'f201848287035627b54f3a0eff16c4b2dbc19164', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '4953076b51e480e34240dfa6378839d4a6c215e0', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '58d76a74b9b1c67b238e63fa267ed091a274c534', name: "label" }), h("div", { key: '4266c5f1701da8c0abd861e0bbb093a972d6c56e', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, h("div", { key: 'b775dddd5cbe75d1fe1bfa5cc1c5fe16315abda1', class: "search" }, h("smoothly-icon", { key: '0399e20f7a99b228ba652b6d1d2202e75a3e84a0', name: "search-outline", size: "small" }), h("input", { key: '950d94085d70803847237e0308eac7a7bea1720f', class: "search-input", ref: el => (this.searchElement = el), disabled: this.searchDisabled, onKeyDown: e => this.onKeyDown(e), onInput: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); }, onPaste: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); } }), h("smoothly-icon", { key: '10e8603c1bb8b5061a7615f15392b1cbc519a0f5', name: "backspace-outline", size: "small", onClick: () => {
+                var _a;
+                this.resetFilter();
+                (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus();
+            } }), this.mutable && h("smoothly-icon", { key: 'bd9f5b3eb6d8ef4f0802878ca327f29ccbd0795e', name: "add", size: "small", onClick: () => this.addItem() })), h("div", { key: '210cc7a519f44cb0ab8800145aa55e02353fba83', class: "menu", hidden: !this.open }, h("slot", { key: '0d159f5f2ceb3ecc45b314f519505982ca4622be' }), this.addedItems))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8219,14 +8281,20 @@ const SmoothlyInputSubmit = class {
             if (Submittable.is(parent) && Editable.type.is(parent)) {
                 this.parent = parent;
                 parent.listen(async (p) => {
-                    var _a;
                     this.display = !p.readonly;
-                    this.disabled =
-                        !this.delete &&
-                            (p.readonly ||
-                                ("validator" in p && p.validator instanceof Type && !((_a = p.validator) === null || _a === void 0 ? void 0 : _a.is(Data.convertArrays(p.value)))) ||
-                                !p.isDifferentFromInitial);
                 });
+                if (typeof this.disabled !== "boolean") {
+                    parent.listen(async (p) => {
+                        var _a;
+                        this.disabled =
+                            !this.delete &&
+                                (p.readonly ||
+                                    ("validator" in p &&
+                                        p.validator instanceof Type &&
+                                        !((_a = p.validator) === null || _a === void 0 ? void 0 : _a.is(Data.convertArrays(p.value)))) ||
+                                    !p.isDifferentFromInitial);
+                    });
+                }
             }
         });
     }
@@ -8236,7 +8304,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '5bc6d17920c9a5dfa81e81b02df300b661e960f9', title: this.tooltip }, this.delete == true ? (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() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (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() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (h(Host, { key: '0fed4a319580841ba1d3281fb084b91a4d7b5a68', title: this.tooltip }, this.delete == true ? (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() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (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() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
 };
 SmoothlyInputSubmit.style = styleCss$B();
@@ -8282,7 +8350,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (h(Host, { key: 'd76e2737454ad914f831482c98d30978975506fd', tabIndex: -1 }, h("slot", { key: 'edef0a2718d076ad33b6f874591a8a2791fb6876' })));
+        return (h(Host, { key: '5a606bfedb2eb8cf6a503386d2d5e16f0f60c090', tabIndex: -1 }, h("slot", { key: 'a7912c7b3ac7ecb40e61058d949b4cc62806246d' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8301,9 +8369,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '351e89e82587e7ccb66dc55451c53f05648ac9d4', title: this.description, style: {
+        return (h(Host, { key: 'd6dfddb0df4c99de8e075141cf16d3f4ca4c861a', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '9e2eedbf6c74f923cbb0c0ae8648ce207aabcdb7' })));
+            } }, h("slot", { key: '1f56e22de589b47ac208c96ee5c84edd8484e3a4' })));
     }
 };
 SmoothlyLabel.style = styleCss$z();
@@ -8320,7 +8388,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (h(Host, { key: '93b333ebfee933e5f5b147895a04385389b5c03d' }, h("slot", { key: 'b10226510296688cb58fc005c01c68a16ffd150c', name: "before" }), h("smoothly-load-more", { key: '9a097a7489d5e670418250abcc0d5870d11f460c', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'bf5243f15e485eae1203272284b06f0e51d47fa9' })));
+        return (h(Host, { key: '0b17b27ef091a5cbf3efedc7560c0af506f8927a' }, h("slot", { key: '7cb9a362b4540fbdcdc579bf95a273e7c13fad25', name: "before" }), h("smoothly-load-more", { key: '7dde9ba1e78a9a7f0eeeefbe124c3410f367bd3e', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'fbe22ffca8fa781a19bf07537f294be36a8bc212' })));
     }
 };
 SmoothlyLazy.style = styleCss$y();
@@ -8364,7 +8432,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return h(Host, { key: '9f0e2e8278780438f214286cd990ee54a6b5546a' });
+        return h(Host, { key: '1b86dd2400a791b125a24513cb9514face925d3d' });
     }
     get element() { return getElement(this); }
 };
@@ -8389,9 +8457,9 @@ const SmoothlyModal = class {
         this.open = true;
     }
     render() {
-        return (h(Host, { key: '601bd96e27c500c08df01457b2951449e4392c37', role: "alertdialog", onClick: (e) => {
+        return (h(Host, { key: '36caaa17bfd076dd297f58ccb9ac4a12871343a7', role: "alertdialog", onClick: (e) => {
                 this.closable && !e.composedPath().some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("modal"); }) && this.closeModal();
-            } }, h("div", { key: '9deaaf0008f61aecd194a2094d65544cfa97b425', class: "modal" }, h("div", { key: 'b041b4418cfc98753f6fe34ffca610f2da25ba6b', class: "header" }, h("slot", { key: '848fecf8ba6a2efcacd1b1c753df17ab5a96fcb3', name: "header" }), this.closable && h("smoothly-icon", { key: '1d51dc003fa0604b29530202cbf0fb743322698b', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '802bd940f81748477962b9c4d615913f073fcd34' }), h("div", { key: 'b31e5dbbf56573298464b071414977be7acf5178', class: "actions" }, h("slot", { key: '85a6a0753237febc205e02a52da4086de9f47fad', name: "actions" })))));
+            } }, h("div", { key: '4c0f2d6537496a8b2392aacddd9ba9db9c5d6052', class: "modal" }, h("div", { key: '0ecf5c976360402e1117570ef10bd3e46f69ff2b', class: "header" }, h("slot", { key: '93b7f39f4a41f83743bc766a3c6e35f3ac1c324f', name: "header" }), this.closable && h("smoothly-icon", { key: 'c61e00a97962890149cb89c0daf5df907c7dfb6e', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: 'fda69f545df08c71f58c85ea096fed500a6c6ff6' }), h("div", { key: 'c7e180ef59712c1096aa12359eac3e97d0c42d6e', class: "actions" }, h("slot", { key: '7cfef8c5cdf40fc9eedb5a0fa2538e02d82be8a7', name: "actions" })))));
     }
     static get watchers() { return {
         "open": [{
@@ -8456,7 +8524,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: 'a8ac459d3c94d3df653723e0d93f6e72260806fc', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: '27e7521a477d0eeb67717166ccc252cfa0a2ce35', fill: "clear", name: "close" }, h("smoothly-icon", { key: '5dff1f73b2937bacf2d81b4e2a528dce8a3c3868', name: "close-circle-outline" }))), h("span", { key: '60584d5ee874685807f6b613592f64e57bba771b', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '186656f3d0f19a4b087a50c5af168be3973cc271', name: this.properties[1] }), h("p", { key: '23547fd1eb3e3d524fb850ff00749f937902a4fb' }, this.notice.message))));
+        return (h(Host, { key: '02ae0659b1c3c7e4e5e74ac356bb94cf91ef8835', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: '4525814eb8b98479507575f107ea3f89f708bc56', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'd611ae4917fa50ef7d0e397a96fec34aee39cb72', name: "close-circle-outline" }))), h("span", { key: '30b99783d4c02842315a782a4029f97a450f5a2b', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '147a0858cc23b98e8aac82463ab19b1891896d1a', name: this.properties[1] }), h("p", { key: '45d9c9e89189a31941461500868439768c3199e6' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": [{
@@ -8481,7 +8549,7 @@ const Notifier = class {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (h(Host, { key: '6d3724d096d8e0547b7b336206f5bb1c97af54e9' }, h("slot", { key: '86d13b581dae9bfa29714e59b272b68d5143dd08' }), h("div", { key: 'fb0790db93da5415e2ce9a05500675d1e13a0f0c', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (h(Host, { key: '6da528516e01fc32e6f17fd480068664b5c9e021' }, h("slot", { key: '1067e9afd266e04d3e0b32a79f974762f3bad7d2' }), h("div", { key: '493f3f5119c9c66fd6e5f9ee90d7b4fea22dc30f', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
 };
 Notifier.style = styleCss$v();
@@ -8495,9 +8563,9 @@ const SmoothlySpinner = class {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (h(Host, { key: 'cc63c3d7a177c5119f9dbd6c38038c06f9fe5093', style: {
+        return (h(Host, { key: '9a0cc6ad21f0c3bfce350ba2a2c83272891844d6', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, h("svg", { key: '50736fa849eb8112f5f0356d4d2233b70eff5248', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'f5e92d9993f413213c5cf59d290b4d52316cc06c', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, h("svg", { key: '669a73232e58cb2d87dca969cd32150f2fd010f5', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '31faf5cfc5a15e627ad7875af4cd16f6e9adac09', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = styleCss$u();
@@ -8517,7 +8585,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (h("details", { key: '307957b81f396381ad9eb975137299e7429dc9b5', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: 'b0951b6f61956f2b7c5253c8c839679af6b4174c' }, h("smoothly-icon", { key: 'f12054adab15e894617ed408fdbb6f6160b42c95', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '5138f3df6492a607ac2a0398204f4a95b9e8c547', name: "summary" })), h("slot", { key: '14aba4cf6b25ed41cb002585d4a117168e7a6169', name: "content" })));
+        return (h("details", { key: 'd77e78b718fca10f4d8e9e2bdae4112cffb4cfc3', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '5e264e08db22ec0eb85433d3d72f0f12d10cd2c1' }, h("smoothly-icon", { key: '36d49d1d21151034a35fca5b93a064074d49bb84', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '55164da27444d19c18b6b931813d12a3d5a4abe4', name: "summary" })), h("slot", { key: 'b459e14735415bee4c85af02cff23c0675372931', name: "content" })));
     }
 };
 SmoothlySummary.style = styleCss$t();
@@ -8562,7 +8630,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (h(Host, { key: 'cc20ba3ae6f849d6dcdab3f1c53c8467ab73dd2d' }, h("div", { key: '421083c3fe13a80ae1417952b51cbbfa838f3b98', onClick: () => !this.disabled && (this.open = true) }, h("label", { key: '0111434d9bac6d843b368fd74d81e323c22ac186', "data-smoothly-tooltip": this.tooltip }, this.label)), h("div", { key: 'de2b298da72c39caa6d3f4d39265e8b569a349cc', hidden: !this.open }, h("slot", { key: 'fcc770a8f2782f0c1135bf49d48696ff26f645ab' }))));
+        return (h(Host, { key: '3e4ab8c68f5ffa9eee15277b8c629ac11afd4d73' }, h("div", { key: 'e5aeb2372baeaeb090b911b44e23a601e27e1a78', onClick: () => !this.disabled && (this.open = true) }, h("label", { key: '77ed6ef274b240e5029110eac46695f198d61bc2', "data-smoothly-tooltip": this.tooltip }, this.label)), h("div", { key: '418681197eb143ea4bc79e4dac8b8b3de2671572', hidden: !this.open }, h("slot", { key: '7e888a42abfb3f81b8650dafedff8d84141d2280' }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8587,7 +8655,7 @@ const SmoothlyTable = class {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: '1103836f2752eafb6216c7e591c7fd37fb77e2ce', style: { "--columns": this.columns.toString() } }, h("slot", { key: '141f5cbcd6f2f0fd988bfa98bf9774f9cd61fe66' })));
+        return (h(Host, { key: '3a7738442ae2ebe705e9c75fb9aa06862a4157e8', style: { "--columns": this.columns.toString() } }, h("slot", { key: '67b59f54351d43e5c3fdf73c77aa991b2fe73acc' })));
     }
 };
 SmoothlyTable.style = styleCss$r();
@@ -8599,7 +8667,7 @@ const SmoothlyTableBody = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '399b61d93f037a694f0e3a8f99ec433c06b3c640' }, h("slot", { key: 'a8325da9f0ffac6857b6a7a6e5625544b5c46899' })));
+        return (h(Host, { key: '383e7918b3e1e57f2970da2d97f19f2628a53e64' }, h("slot", { key: '8d9059eed589799ad9eea2132a0bd2b10aabc03e' })));
     }
 };
 SmoothlyTableBody.style = styleCss$q();
@@ -8613,7 +8681,7 @@ const SmoothlyTableCell = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '0778ff0d0b6e7d5d960f4eb1bc3e63156ac9cc23', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '7f735c3219f7107f895008a6fb76e022cee5b2f2' })));
+        return (h(Host, { key: '2c1a6679cabf05342c1e8a783a4a8fb27fd8c6f1', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '3a33c09387abdf5f499ba1f92dcf92b5b7f71a2d' })));
     }
 };
 SmoothlyTableCell.style = styleCss$p();
@@ -8625,7 +8693,7 @@ const SmoothlyTableDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'd7277fac7e25efa923ce5e7263b7fe07b3d1ae7c' }, h("smoothly-table-demo-filler-row", { key: '74942c1891773856c68b58eae197b663476e1892' }), h("smoothly-table-demo-group", { key: 'f307da0e9acdb2269e15e58dd0299539a3f6f3a5' }), h("smoothly-table-demo-colspan", { key: '80c976bd5cdbc95a0248b4efaa48805236f0bf08' }), h("smoothly-table-demo-simple", { key: 'b9de2b65113c2ee7543733abef20476b19b440db' }), h("smoothly-table-demo-nested-no-cell", { key: 'd6b6c367cd66b9cc2eb8cfa86800e6697a258071' })));
+        return (h(Host, { key: '35794212738d56a6ee77383f2cdee89a57db82f1' }, h("smoothly-table-demo-filler-row", { key: '4eeaba2055e5ad58c8e9942264a5f8d81c04e29e' }), h("smoothly-table-demo-group", { key: 'e8d15d7d715d993385df9de46b4dc42597f3a120' }), h("smoothly-table-demo-colspan", { key: '7ae3ade7115e92e55cb992749b6a5e5a6371634d' }), h("smoothly-table-demo-simple", { key: 'edd4c2e7e16c3c9bbb2e28f4321b66fad061e339' }), h("smoothly-table-demo-nested-no-cell", { key: 'd07a40ff623a290ea90367b1b170ecd93b150565' })));
     }
 };
 SmoothlyTableDemo.style = styleCss$o();
@@ -8637,7 +8705,7 @@ const SmoothlyTableDemoColspan = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '206c3432bf7936b15e972c161424e6b0e102a15c' }, h("smoothly-table", { key: 'fd9a1adfc79d7e3fa130e55614c8956aa9993ce7', columns: 3 }, h("smoothly-table-head", { key: '079086e32eab6c27ec06646b7cc1addc5a45e218' }, h("smoothly-table-row", { key: '6b421c777d5857d7b8c6e92dfa8ebb9e65c24f0d' }, h("smoothly-table-cell", { key: '9c0f4181cefa485af433741c55eb8033057333ba' }, "Date"), h("smoothly-table-cell", { key: '6b089e4d9d9d43ead73b8602d1f482b019810ee7' }, "Skip"), h("smoothly-table-cell", { key: 'b3a5f766b5a7bc15fe29aa2ba35d908f33883f7f' }, "Total"))), h("smoothly-table-body", { key: '12be40d0b1546ef3bcb8d95815e3a6751a34dc95' }, h("smoothly-table-row", { key: '22d3015ebb0c1a19b412c175f231de9cd3f9f04c' }, h("smoothly-table-cell", { key: 'cb591fa2b41381aa1c663a701a76b953ff610262', span: 2 }, h("smoothly-display", { key: 'a9dfcaebab3333ea62c290c9952ecc7c77ba33a7', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'b3680b9847f0e5635538af75af7c117d86464fcc' }, h("smoothly-display", { key: 'c89fca16b3f2e836dc9dd8c2378f4b26bab2be1f', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: 'd2574793e06a73ede9721349f9e26ea596947500' }, h("smoothly-table-expandable-cell", { key: '2ab7fcbb3c3f54298e7b9f4b6b8287f0e5c07c04', span: 2 }, h("smoothly-display", { key: '40f846739879908115983e730c2e135fc3473977', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '9989441f4da6a580d7d7a21a8623a1dafc0d6a3d', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: '20f47281da324a3fe529553b57c2e50de7a7039d' }, h("smoothly-display", { key: 'd9d02229b0bfa49122ede86d2513648a1448d8bf', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '7803a63f59d968622edfb07fed2b40338fb1b460', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-table-row", { key: '0bf9dd84e89fef204799961f85e24b5a14d4c4d4' }, h("smoothly-table-cell", { key: '7feacfd6127864b97ac910256f434b42ee57dcd6' }, h("smoothly-display", { key: 'df857a1e9f9503c08c49f564a47bbb4b3b96f170', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'bd1848a3218ec7b9177b0354570fc3a96f827c0a' }, "Not Skipped"), h("smoothly-table-cell", { key: '1656b57464928e417afa36732fe710654c6c1e8d' }, h("smoothly-display", { key: '6097190c8c8c9ae2899a0497d524da52f42a145e', type: "price", value: 320, currency: "EUR" })))))));
+        return (h(Host, { key: '1b9dfde05087d6be2711b86baca19630286b2322' }, h("smoothly-table", { key: '0ba0536e747782d879f6a2cf099388435c881ad5', columns: 3 }, h("smoothly-table-head", { key: 'e14bea187af499007f4173c261526c72f3b89c8e' }, h("smoothly-table-row", { key: '9104850519968b86ba1f48f5ee997a1ccfa49a12' }, h("smoothly-table-cell", { key: '26dd9041355d04f517e3951ce608cc8b60b8caaf' }, "Date"), h("smoothly-table-cell", { key: 'b78eb957ed8ec68b5919362fe0afedc1f6375c5d' }, "Skip"), h("smoothly-table-cell", { key: '1f8ef467f5a9e9ba2157e126fc3adedb2821c9ea' }, "Total"))), h("smoothly-table-body", { key: '6679b94c153ce61b39957e64d453f8f5edd47cf0' }, h("smoothly-table-row", { key: 'd0f0c0b13b0e56b7fc761701897f9304c531c5d9' }, h("smoothly-table-cell", { key: '8e022e2e5befad0983c8d6e0567dc92a8fe1bb0c', span: 2 }, h("smoothly-display", { key: 'efb5e464048093e3855163818b6b38d86f084995', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'c9912c8e499f751cd84323b15b282f58e1a2a052' }, h("smoothly-display", { key: 'f618c45ed3960424e46ef6f40adf2b69c7307a08', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: 'a8605b2eb3eb80ab039f2cc6e257842045e16909' }, h("smoothly-table-expandable-cell", { key: 'cf8436e7d932f4ff0d92a054c74275551961a1ab', span: 2 }, h("smoothly-display", { key: '2013f65b67bf9f03de31fabae41e2fa4cfab338c', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: 'e8d3b46995025d2f3af0f2f587b555bf4d1c0daf', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: '0409b2d3c90ada5737e6bb9069fb1066ff7063af' }, h("smoothly-display", { key: '82bd4a3cde9062604343fd53161a7d86838f4fed', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '4592efa154194347becf15f00275303577d743b7', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-table-row", { key: '0aa33698c9d9de3f41d04298d60a15b62f9294e4' }, h("smoothly-table-cell", { key: '5e7265ba2d08b2aba02decd78ad88319cc407f72' }, h("smoothly-display", { key: '5af078d9ea92c4a6865a3f7545ece78d709c85fd', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '606899c1227efff03793e7108f413ca727b77304' }, "Not Skipped"), h("smoothly-table-cell", { key: '9fcdda1bad4686bf2c8a5a78486a05d25d923402' }, h("smoothly-display", { key: '033cf9f7f2f090738f71320df238d26152acdcd1', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyTableDemoColspan.style = styleCss$n();
@@ -8655,7 +8723,7 @@ const SmoothlyTableDemoFillerRow = class {
         }, 3000);
     }
     render() {
-        return (h(Host, { key: 'e2842ae7ee217b160d69fc5fa6cb686af528e2fc' }, h("smoothly-display", { key: '8ec4889c9bc004f61f6b9d91b87e9135f2b7ba11', type: "text", value: "Filler row" }), h("smoothly-table", { key: '39f5a22a15a05631cf015918050e94215a336d62', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '271ced47bcbc64f53cc70bf3f1ca757059ac81dd' }, h("smoothly-table-row", { key: '7a7566c40b27be58ab6bc3f6eeea2b5e90726cf5' }, h("smoothly-table-cell", { key: 'c3f0eb89f019759418b4524fa923194e1eaa05c9' }, "Breed"), h("smoothly-table-cell", { key: 'beb4c8b9c55d96c4f3e9faa71bfc9bf3971a1e25' }, "Country"), h("smoothly-table-cell", { key: '6c8e3177e07f82961707a6f31729ede9da79acd9' }, "Coat"), h("smoothly-table-cell", { key: '71023e2b53ab05e19b5d2f973f4b45c6ad1b7525' }, "Origin"))), h("smoothly-table-body", { key: 'a4a2e96740dbb0191031fb008fba9c349f4d37b1' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
+        return (h(Host, { key: 'f857bf2706fea0bc7bef38da1231c17460e9c609' }, h("smoothly-display", { key: '56bb55f00ea43d80e8b94460bb2e951bc741aa72', type: "text", value: "Filler row" }), h("smoothly-table", { key: '3a6c43bc37797672d40417395ffdacca1b52f327', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '09289f8564422ceb0f8b7d33040a561d35dc9a02' }, h("smoothly-table-row", { key: '9675f44ce397953bc4b674bc768299d3a018820e' }, h("smoothly-table-cell", { key: '8fde03da5517c6f75c7c8da3c5bb336d2ed5a4b0' }, "Breed"), h("smoothly-table-cell", { key: '721fc804d59cb6dca7b66b2fd38dd700172322be' }, "Country"), h("smoothly-table-cell", { key: 'e8fbd6258f7167841eef83776e00406cd9ed3690' }, "Coat"), h("smoothly-table-cell", { key: '3e514eab5bb013da0d23cdde06324492bb97632b' }, "Origin"))), h("smoothly-table-body", { key: 'a14df5fcfad26c2d54ef13810e409ed65f72ac39' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
     }
 };
 SmoothlyTableDemoFillerRow.style = styleCss$m();
@@ -8667,7 +8735,7 @@ const SmoothlyTableDemoGroup = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '044be2a5a9260e32e91ee8375a225a0dee587ce9' }, h("smoothly-display", { key: 'c8a77f7bcd0bc541ad217e1df6828a2b0815e2f8', type: "text", value: "Group" }), h("smoothly-table", { key: '807f4357d1197b355711e01d5edffd8d3983db6a', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '6b1b3b0e281764d1430fe6b765f2872884e2e09e' }, h("smoothly-table-row", { key: 'c9b2dd1d3b4c17256cbc1d7214a7654cb82d4436' }, h("smoothly-table-cell", { key: 'b1c8d54323e816490f28005e6bbe618c2ffe0e4a' }, "Date"), h("smoothly-table-cell", { key: 'e45d0a4862cbe71c8cca27a8d6aa6a0956709019' }, "Total"))), h("smoothly-table-body", { key: 'c0bdce1d860654b8ba88bac33a9f035363061d19' }, h("smoothly-table-row-group", { key: 'a11c8367f087e12e0a02d25f8b48a29689107e06', align: true }, h("smoothly-display", { key: '8ab3110cbf9d57591bfa9a2dcc9c7e224792a104', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: '826f0acd265a99d445b6786458c232172d2cf381', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: 'ccc0645a756649d0e748f147eec063aa5c7c7036' }, h("smoothly-table-cell", { key: '3a7e33ab43dca04d24872c2041833bff916e8934' }, h("smoothly-display", { key: '972c99f625f6b27352b3e3c17007a6923a1cbfce', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'bfe695bac2c193687738aafd05a78cb23feac052' }, h("smoothly-display", { key: '934d9207b9971fa1d7787822e7405f1e9def7a13', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: 'a94346f2caa9c0edfa9608485b458da151fae5f9', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '51f21f7bc12d6662392b96f7582a78f19d7dc0af' }, h("smoothly-table-cell", { key: '9bf2051dbb810a8eaa7da2ffe850435a943ab7b2' }, h("smoothly-display", { key: '1abb624a6c4cd85f191576e4155e90f12529ac11', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'a796212e2c36cbaac2d2d9d10960310c23b7d3e0' }, h("smoothly-display", { key: '605eeaac1fee2ccfd96d900cdbda80e98cf86886', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: '8905ac1b38a2acf766c60c74284399a44331874d', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '4d49a3ada2507ec28ae70b3361e620758bd95977' }, h("smoothly-table-cell", { key: '9d6c8b5ba8f0704745e014eeaa0eec94f1957739' }, h("smoothly-display", { key: '851e641172245203cc8c80fe191c629c1e8036f6', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '7a6160c20b31624b7f181526da09ffe4df40ef36' }, h("smoothly-display", { key: '229e788a885e95aa6abb8a0ef633579a17e87a95', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: '42fbdb5745b91dc7f42d19f3fb4e7a9c53b96a78' }, h("smoothly-display", { key: '6dcfdbe08def271dfeaf89a1d8fff32e921971b1', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: 'fe218184eb784cc7cd3094775096f81981ee8733', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '8611b77389d19cb2463ff654328520acc0229030' }, h("smoothly-table-cell", { key: '75d7572ca30ae4a051f3756794a7117c5c7f3c46' }, h("smoothly-display", { key: 'fb86017176633bc226dafc03e37b9ac282f88ddc', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'be847bc7c1ac7781c2bc9637b6143b493e9688eb' }, h("smoothly-display", { key: '553cd5b7591033b6f8743b1e6b14e7ec15552889', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'f3dfa33ba846fdcb5172b0ad47c3ab14e29ee6fb', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '7e5acc9b813857a344b7ffde22549088f26bda0a' }, h("smoothly-table-cell", { key: '5cba3d4839ba15c0193e7eec1ac664bc9b3f5f61' }, h("smoothly-display", { key: '312c552c6ccece6028c4cdd8ab0f5f2af3391d5c', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'a4273386dd793a0ecb8284727869a51345d0e5bc' }, h("smoothly-display", { key: '21a7a1c5c0a9bcf5e3594a4b48f7c54eb5af0b9a', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '04ee16af0d0033862aa7e29033d0edf95a9b6bfb', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '7ce12fc20fea9844d23e773e19a0296e8dedcbb2' }, h("smoothly-display", { key: 'ece4ded9117930fc4c64c8d2740ed8add76f4fb6', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: 'b43e2f3e5e51beb019da6b4b823014df4fb9b7ad' }, h("smoothly-table-cell", { key: 'd8ec8e3397e6c702a0ce7ffc1148258b357d850f' }, h("smoothly-display", { key: '663260db0785da46c8978f561aea13ffe434a319', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'd526a2aa10c7be28d6e2be439984604c25e98ae8' }, h("smoothly-display", { key: '68f15b2b6bfd5faff55b3421e914633f7e54abc2', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '32eacc646bc96494eab5c117f22f543044a28a16', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '419ca2c46ff03e1ef1a78e2089198337c5aeb180' }, h("smoothly-table-cell", { key: '06a07b9699ffe395dc0c68fd8993ab3e4ae27117' }, h("smoothly-display", { key: 'a2cba094f5178e043d930f445304ed7eab4f7fdd', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: '8e974a68dd724ece0945ff277229f8c70a6c9e04' }, h("smoothly-display", { key: 'beb312d995aa44c5138cbb748237d5cf02c944f3', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '75801728d6f20f9e4acbe38a2b302b73ce8cbd32', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: 'a5d4d32fcb7ac204a3734dea7a616c88307e6cbe' }, h("smoothly-display", { key: '2331960fe63909aef8f9b35ecdd76bc37deb6375', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '19b69cb0e6265bcae3413ff3deacb31359825110' }, h("smoothly-table-cell", { key: 'b1573bf5ea27d637dd429e80c012192fc22e0660' }, h("smoothly-display", { key: 'd8777e74c334c73a60a7fcd377c8ef1d69fae20e', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: '49f464b913486092a2de9b27750a71b00061eef3' }, h("smoothly-display", { key: '0d716ae1f80fa8f98c84e623d1935b7a0213a648', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '7c8d2f82680b35d8f231d828c6ffdb2b6ebb31da', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'b64d7b474e70a8d3334660a01feb0b26c8403e40' }, h("smoothly-table-cell", { key: '64bf40d93b8ff419695fa7d69d4894585e77d92d' }, h("smoothly-display", { key: 'ba5694ed645bb9b5105fa0ffe1dacd63dfa4d72c', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: '837a934ab755965bfad88ed07a5b21a7c7877738' }, h("smoothly-display", { key: '6e2b0d5a372e022374c514393f8a9a439cb06480', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '13966802b164b23cd3959c54373a91a4b99d1ab8', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: 'dc7031260e2ca39650f89659822ed86320701751' }, h("smoothly-table-row-group", { key: '8c4f9f5fd19f9c144c439aaba701c0b0a1b22272' }, h("smoothly-display", { key: '9458e205c4be0d91ce42eff9bcecded48c69c961', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: 'a139382798f85d6922dea91e86b473cd2bfd486a', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: 'ae33f14933f819975a4313ad4255d00b371bd677' }, h("smoothly-table-row", { key: 'ececad7f1be8f60215da7e2f2dce838fefcdf279' }, h("fake-cell-wrapper", { key: 'defb123cb025e0dc64085a248645c635bc488507' }, h("smoothly-table-cell", { key: '97cd28e0c190afcab36d300de24bd5ba4c42139b' }, h("smoothly-display", { key: 'd5ec9b80ecffcac24cb936ac8383161523de7e60', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: '08d0df0f2c099dab483a9c2c48b286e3bcba0346' }, h("smoothly-table-expandable-cell", { key: '53b96521de90492a28d44c74ecd6674828a9d54e' }, h("smoothly-display", { key: '9bf466b6f3090ad44103e1eb2be42fde3a337910', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: '55f6d59ab1c85058c5634774f33c9a71a9451917', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), h("fake-expandable-row-wrapper", { key: '8476b93642f2b53e5c8ae23698c54edb072c6361' }, h("smoothly-table-expandable-row", { key: '8535dad53ba0eaf19f5ee5d2f5b1f3d6f3e1c6bd' }, h("fake-cell-wrapper", { key: 'ff5facddb89a2cf15f18634ad8f7e8780a51cb6d', class: "span-2" }, h("smoothly-table-cell", { key: 'a4508b413fd6e98ac9d64043dee769bb2ff5c97b', span: 2 }, h("smoothly-display", { key: '65865507298b01080b39b2c7b856e37bcac1ba46', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '2e6baa60bcdcd7a892b9863975d2ff90a11fbc9f', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: 'bee25e3af1397c26cbcb59fe0aeb178f672d60c3' }, h("smoothly-display", { key: '89e48e848f09c8edb0a5a71de18f6a6e02e298f8', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '8eb48628fe13eeef290c1b086d3baa338c010cc2', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (h(Host, { key: '9af97a2dd73e554ea9c1bff231782e9889157fde' }, h("smoothly-display", { key: '2257c3cba1ba5ce0431e32f53dfd92573b25bcb3', type: "text", value: "Group" }), h("smoothly-table", { key: '90b901a78ae391af9f7acdd0ef1c494a8f6fe133', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '972dd604c495658a4655c9d4afbe7585b7f34e9e' }, h("smoothly-table-row", { key: '71e959f5666e68ad006252a4591a194840495936' }, h("smoothly-table-cell", { key: '62d2bd26dce8826b74dc4c8e8c569532cc07ca45' }, "Date"), h("smoothly-table-cell", { key: 'f866b0f9719d679f6a7830c65ac3391491c00349' }, "Total"))), h("smoothly-table-body", { key: '70dc05107403877ad47644460a09d3250c1ddd1e' }, h("smoothly-table-row-group", { key: 'e7f2268c625dcdb0350b9b6171fdbeb3163d8413', align: true }, h("smoothly-display", { key: 'dac67a56a4fc3ab520128b3b63646cde0c6fcbce', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: 'ed4b8fd5dcafc2cae49e475b4c091d35b2b30b3f', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: 'ff08cffdfcec5945cb13ea713e5379ff16e8e917' }, h("smoothly-table-cell", { key: '2575df31b1c799750a491c07400b90f3c8c0732e' }, h("smoothly-display", { key: 'a72e50c14f31b8061a78eb378fdf243e6a757d9a', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'b88eb73fcb09cbce241d452905f767498da92335' }, h("smoothly-display", { key: 'bf82b932285431bc9beb341f8c5bd9aaa5b56766', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: '0f51682b219b4130d614bffb8399011764f81018', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '24aedfa873558b5bfc91d12ed8a1283097b11add' }, h("smoothly-table-cell", { key: '5e7a30c94f9c8b5607ced0bdc1756ba89a9b19e9' }, h("smoothly-display", { key: 'bc14c1e289193e3be9bf3ba4940e11eb2db915f7', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'd82b33d05e427ec17f8aae619b168e6968addb68' }, h("smoothly-display", { key: 'a9b7548b18d6ba3dfa509ce436bc90848a485f15', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: '5f6c95d971232a61ba4366a0506c6a4d6e143b08', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '5e50d0d8833c2d51d3926dd13d13632be5d4a14a' }, h("smoothly-table-cell", { key: '500e6fa274591bfa46fb7df980e5c00e66950f1f' }, h("smoothly-display", { key: 'f3b0357299f95a2708a205a2d6a36fc9153a113c', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'e714d0a9d84bc9c2fb7e63df0a5a2242ff0aeb47' }, h("smoothly-display", { key: 'f77b5b7645e03522332aad7c867cc9cc7d50ce5a', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: 'd5563da2fba612869aee7e52891dbe3bbbb3eb5b' }, h("smoothly-display", { key: '938b397b77eccae59e9d75c6095314b04d49005d', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: '94cf02e6a97968bc0698e36db986b8f201f383e3', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: 'cd8a0312c1308565eecd1989eff865836259e9ec' }, h("smoothly-table-cell", { key: '6e53dceadf261cfd110895b6803f85f428fbc788' }, h("smoothly-display", { key: '7f006f2a033a00961c7a6a3d68c22f873857ad98', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: '039d08030bd0f63af9c1afa1a728dadc9680ae82' }, h("smoothly-display", { key: 'd88710af1a900007217541f3943e5a7efb5a2a3f', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'fdcd37bb700758be174cc0e5713b4c07403f8682', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '79b4d9f391ef6ab8841d2de05cf8aa55ef8a59ec' }, h("smoothly-table-cell", { key: 'c1261022a5c3fffe6119e321d129907c07fe18ac' }, h("smoothly-display", { key: '5748d8bc6db59fab0f80ce1812f569287d808b81', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: '118a115ba40c16775073062b039d382e5501cca4' }, h("smoothly-display", { key: '42d80083625b2e8374f00c629ea64802788c8459', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '808b3347c13ec37e4a4a1b63c91392eb667e4f66', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '6f0a95e81ca788091fc90768f1a0f295fa35b6b9' }, h("smoothly-display", { key: '731be311b19de2a133edc969fc6561ded4e6aa99', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: 'e09a2691c08602f3fda9b2803a30ea5056761c27' }, h("smoothly-table-cell", { key: 'e50ef37a30a54a6d1b76cd27fe678c6d4e998486' }, h("smoothly-display", { key: '2b2147f209ef7ef3fcdefe8526d8332188a64e60', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'df7f27802f806d3d63c9855f49b26a7281ab2c7e' }, h("smoothly-display", { key: '0945da5982870fab2637680ecaa974801c046690', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'be7bcd85defabd41296f9e428cbac22bdf52fffc', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '4caaa5c8890ff1aca72adea083a6fe58f23ffc1d' }, h("smoothly-table-cell", { key: '46ffccf1ff8e575e1784a8a8b62799c163f76bff' }, h("smoothly-display", { key: 'df4c90a165a16556072af954ddd2ecf2a25fb6cb', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'c42afea6b5256e18b5c0bd235abb00a5589a1639' }, h("smoothly-display", { key: 'afd91932af6b3d9df399e31f3a3dfb3710dd67da', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '116923536874fae3bf8f248c654620d7e9d84caf', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: 'c5bfe45b4fe1f13f93cfd525ae19d50442851294' }, h("smoothly-display", { key: 'bd7d161f3cafdcbd699db62bc17723818ef72549', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '6c23d8c95b24d54b1b331353e18b75069d088ead' }, h("smoothly-table-cell", { key: 'bb493a1fd99fffea71a80b2ee6896461c6690b67' }, h("smoothly-display", { key: 'a97142706d066ef6044dd8c2ffebf1dd205a42aa', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'd1dc093bebe2b4983aba8a146958dd91ba25e3d1' }, h("smoothly-display", { key: '375f129f914048e76c1fcb32b9f95eb83acca27c', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '0b75809560b5a2eef3e8efb5a1d4b413430ffff9', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'b53719c5188bb125812eec710b00bf93a7d64fce' }, h("smoothly-table-cell", { key: '20012bd7ea22477b21ca4c6522e04a2296cb5e95' }, h("smoothly-display", { key: '6bbd6c62dad1231cb57e68df58ccceaa33ec76ea', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'a04700a2c7ba95e6912a0c8685dd394e1116e56a' }, h("smoothly-display", { key: '28993df17be6cd71f9d8da5580bd13173e5b1728', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '716d3711fb1ba17f1b07e40d0cc4e42f77d6e48a', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: '5a8d87d22055a3cc9a6eb3fac647b3b10ddf3107' }, h("smoothly-table-row-group", { key: '6c29d6604c34f297e75f4b5d6b1599b38e3f5c4f' }, h("smoothly-display", { key: '25835c64a61ef3ef5ded3ec48be000c759f3c263', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: 'b986fbafe80daab7dd7a2c522785c633406c01c0', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: '6f0817c4ed598275401f6d86c869dd39b3b900bb' }, h("smoothly-table-row", { key: 'c627b346517b950d2883bed648e8acd06991f7dd' }, h("fake-cell-wrapper", { key: '2136dcadb092ce67f4ce986fe3bd1d73759ad03b' }, h("smoothly-table-cell", { key: '21f1b8c4df866a68caee5da599e1bb8219e042b7' }, h("smoothly-display", { key: '857236ba64c06093da4c1ecb7eae6710c2cddbce', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: 'c840c1896076ee2ca7e6bf3217b6f89ec3cfac7e' }, h("smoothly-table-expandable-cell", { key: 'b5dd3983275b0e6948b71d4d5d4e8696ed9a0373' }, h("smoothly-display", { key: '44b2aa3acfebb161747e8e693fcadd6a95c1f2df', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: 'e555b070d789e2ec97a730de08dd5b4c479eb06a', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), h("fake-expandable-row-wrapper", { key: '47afe4d30b2e7a0f29f019489d00f93679b3b3f5' }, h("smoothly-table-expandable-row", { key: '0e066e8ef7beb4f5212b7ab366faa8e8a766f8fc' }, h("fake-cell-wrapper", { key: 'c1e8f9e0bc80e21f5cf13a9e1c08dccfc69812a6', class: "span-2" }, h("smoothly-table-cell", { key: 'aa446fc3558e1777af3f7db9de01838e2f7da1b9', span: 2 }, h("smoothly-display", { key: '80800c6bc0d00193c959425eb1e72d82f74519e1', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '761732bea1df5e3e78dadef9c2817610e50169ff', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: 'ccc5676e70c09b50f05a5429c8bbba6e7c0031df' }, h("smoothly-display", { key: '8ef9e40351c078324f6f599addbf8d767b4d4a77', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: 'fb97dc92fb8b501a5bcf89e68a1d8ebba1a856b4', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyTableDemoGroup.style = styleCss$l();
@@ -9613,7 +9681,7 @@ const SmoothlyTableDemoNestedNoCell = class {
         this.loadedRows = [];
     }
     render() {
-        return (h(Host, { key: 'f0cccc2533446b88de6b0956cb2c24c3ec106962' }, h("smoothly-display", { key: '997fa002f0a3a14e1516d2fe4eb7cf9491979819', type: "text", value: "Nested" }), h("smoothly-table", { key: 'ec7a88e096863fe59f1c5f7c80aaa4a538bb1b48', color: "primary", columns: 8 }, h("smoothly-table-head", { key: '821e802acadb9d8158badd884ee120228feb41de' }, h("smoothly-table-row", { key: '029120e75a85535c08a7bde66ae8835270716e2f' }, h("div", { key: 'acbe3da2f1f60da436c44523b2797b30221996d8', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'd764a06cee565fdb4361161090c7d3ef57b5e5cf', class: "smoothly-table-cell" }, "Registered"), h("div", { key: '17f3a9f0b08bc9b9f22a590942faf5fdbc7344aa', class: "smoothly-table-cell" }, "Name"), h("div", { key: '5a1e9388b4bec34d26cc186cd0d801b9ff8ccb16', class: "smoothly-table-cell" }, "Age"), h("div", { key: '80e4ff513a81355d9e6526057c19d93b65bc457d', class: "smoothly-table-cell" }, "Balance"), h("div", { key: '55594b070d4f81852eab51086bec06a7b04c0635', class: "smoothly-table-cell" }, "EyeColor"), h("div", { key: 'bd684d81b4b52fa721c34846c8cd94b61eca490e', class: "smoothly-table-cell" }, "Gender"), h("div", { key: '3b078a0ee2ea599d54be265f24796024b23ededd', class: "smoothly-table-cell" }, "Company"))), h("smoothly-table-body", { key: 'db35dab7f93e802c1d95c686dd8bc5262362a8f8' }, data.map((entry, index) => (h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
+        return (h(Host, { key: '460dd1e98f1ee50a19fbbcc297389ce8406bb59c' }, h("smoothly-display", { key: '36a48c1134c56fb73ee494a3d5838a07485473a1', type: "text", value: "Nested" }), h("smoothly-table", { key: '8eaba9ebaaad200fa7bd0addaca098651dff32c4', color: "primary", columns: 8 }, h("smoothly-table-head", { key: '0a4c113f707aa20076ea30a3a5dd2f27152fedac' }, h("smoothly-table-row", { key: '0c4d3e3ded2c62be537c7304d37533ba3a53e9ac' }, h("div", { key: 'f59f569ba6872affb34f6cf043f08a597f171e2e', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'a72101553c2d7af6d2ce92d488b7cb0aaf622fca', class: "smoothly-table-cell" }, "Registered"), h("div", { key: 'c442f7e5260320209001d6b381089a68f33cf0c1', class: "smoothly-table-cell" }, "Name"), h("div", { key: 'd5c73e0cafdfa5db279babe93176b0efebffb256', class: "smoothly-table-cell" }, "Age"), h("div", { key: 'd668bf984ce8de36976bf95f2ede82f0770336d6', class: "smoothly-table-cell" }, "Balance"), h("div", { key: '9f92f505cef3b3fa10538a33ce94d1aea27e8496', class: "smoothly-table-cell" }, "EyeColor"), h("div", { key: 'def6a9aad7bb6fb64bf6400650c75c5bf89fcec4', class: "smoothly-table-cell" }, "Gender"), h("div", { key: '1e0aad645cb72a7dc7cde05d0e30cb46a86de437', class: "smoothly-table-cell" }, "Company"))), h("smoothly-table-body", { key: '409e2bb51254cbfcb7f87bc77f0723e4ecbf162f' }, data.map((entry, index) => (h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
                 if (event.detail) {
                     this.loadingIndex = index;
                     setTimeout(() => {
@@ -9621,7 +9689,7 @@ const SmoothlyTableDemoNestedNoCell = class {
                         this.loadedRows = [...this.loadedRows, index];
                     }, 1500);
                 }
-            } }, this.loadingIndex === index && h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.registered), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance), h("div", { class: "smoothly-table-cell" }, entry.eyeColor), h("div", { class: "smoothly-table-cell" }, entry.gender), h("div", { class: "smoothly-table-cell" }, entry.company))))), h("smoothly-table-foot", { key: 'f09a7c7bdf3bf6a423f0dbbcd6999fcdb7d2c0b0' }, h("smoothly-table-row", { key: '6237c3e3f1e5eecb050caacac3a18c70fb7a1d13' }, h("div", { key: 'fa63fb23e29dbe508bec40b0349910597b016164', class: "smoothly-table-cell" }, "Footer Cell"), h("div", { key: '5ff91ed21cf8857ce5d89b2d9d028ad85b4172af', class: "smoothly-table-cell" }, "Footer Cell"))))));
+            } }, this.loadingIndex === index && h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.registered), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance), h("div", { class: "smoothly-table-cell" }, entry.eyeColor), h("div", { class: "smoothly-table-cell" }, entry.gender), h("div", { class: "smoothly-table-cell" }, entry.company))))), h("smoothly-table-foot", { key: '5c99a61adab8729709a0887dd866b462e6737554' }, h("smoothly-table-row", { key: '2d224a2a8ad6e35ff2c36eadec885de9f0203b48' }, h("div", { key: '78480235c2e055b5960c5a049314e323528e6030', class: "smoothly-table-cell" }, "Footer Cell"), h("div", { key: 'ba6d2fb174d44ad05eb6d99deec082a8180a247b', class: "smoothly-table-cell" }, "Footer Cell"))))));
     }
 };
 SmoothlyTableDemoNestedNoCell.style = styleCss$k();
@@ -9634,7 +9702,7 @@ const SmoothlyTableDemoNestedNoCellInner = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8695c1d15d2eec8b9ee575ed963af80f6319d2ef' }, h("smoothly-table", { key: '45cffac7f3ae618ce4ea0f5f8671f55ed9ba8ab2', columns: 4 }, h("smoothly-table-head", { key: 'c0bdfe025083af1569395f48452d7c1bf2ce2e8e' }, h("smoothly-table-row", { key: '70ef7fc95d6327e8c50134a3815f2b025c4d1f89' }, h("div", { key: 'c9d2b13223be6eddbb4831a9107b1a862d296f94', class: "smoothly-table-cell" }, "Id"), h("div", { key: '14cad91fd59c36a04673ea16250014ea894e0006', class: "smoothly-table-cell" }, "Name"), h("div", { key: '714b0198d5bc725eb78f937741b588b20eed003e', class: "smoothly-table-cell" }, "Age"), h("div", { key: 'f65a8705ba26a84827e11db27c763ea0f2308328', class: "smoothly-table-cell" }, "Balance"))), h("smoothly-table-body", { key: '531c1e3c65c0947291ab22cc888c18615f6b4ee7' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (h("smoothly-table-expandable-row", null, h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
+        return (h(Host, { key: 'aac05d43b4512b20fa4cec737ccb31ec3a528b56' }, h("smoothly-table", { key: 'b022de2650d8db21e46aab409b8d1df0dc409f80', columns: 4 }, h("smoothly-table-head", { key: '6516f877eb54fdebc85619885a92389af7ec34da' }, h("smoothly-table-row", { key: '8951f89b3230404a2fc8fc6ef1d48a20abea803c' }, h("div", { key: '82ee1252466066d77df7f70385faa4f83850d9a7', class: "smoothly-table-cell" }, "Id"), h("div", { key: '7145ba1e199eadecb5dd727ae1adfa52d25e4bce', class: "smoothly-table-cell" }, "Name"), h("div", { key: '60d99a7d209367adea18000214d01b4a3e1905b9', class: "smoothly-table-cell" }, "Age"), h("div", { key: 'ee489d4b66d755c9590cf0dfe23fe09c440773aa', class: "smoothly-table-cell" }, "Balance"))), h("smoothly-table-body", { key: '86837cf19c76e57fe423dd185e1c877e4f04b192' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (h("smoothly-table-expandable-row", null, h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
     }
 };
 SmoothlyTableDemoNestedNoCellInner.style = styleCss$j();
@@ -9646,7 +9714,7 @@ const SmoothlyTableDemoSimple = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '91f4891d9b3f238bbf5897254a8e709af436905a' }, h("smoothly-display", { key: '4b2dd92dffa7b2853be7d70a331308f12b04c5c2', type: "text", value: "Simple" }), h("smoothly-table", { key: '6a9840d72c42ae57008fe773a1e2efaaa598271f', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '033754254544d75ce9c7ae69af93803eebc4136d' }, h("smoothly-table-row", { key: 'de2622eda56a4843b7b1b91d9b9ee2c700fcb3c6' }, h("smoothly-table-cell", { key: 'e445efc0c5585fc269ca0dc74873daef7679cf26' }, "Breed"), h("smoothly-table-cell", { key: '0f054ac68fae8dbdd09e467cede70e397529e722' }, "Coat"))), h("smoothly-table-body", { key: 'f80f23b30de2b1dcd6a266b8d1e1ae10b96c1e46' }, cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country:", h("br", null), cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), h("smoothly-table-row", { key: 'd469f986bbf4e1172906d081be9c73123e3940b5' }, h("smoothly-table-cell", { key: '437a8c8262a11e7270248adb3c8ee8598d4cf4e6' }, "Cell5"), h("smoothly-table-expandable-cell", { key: '3b58406815a7ce4568528d84aabb78627dba819c' }, "Expandable Cell", h("div", { key: '852283739f4d7085726ace98dfd4bf40c5572d95', slot: "detail" }, "Content of the expandable cell"))), h("smoothly-table-row", { key: '249c5a4b449506fc29fa6de81f3018c4f3afdb69' }, h("smoothly-table-expandable-cell", { key: '89bd889979a763f5d122f4b702955f6ec8a875a3' }, "Expandable Cell 1", h("div", { key: '8c022dbeb53e51f4cfa7dfad98c2040d04d453fa', slot: "detail" }, "Content of the expandable cell 1")), h("smoothly-table-expandable-cell", { key: '31cbf39571004b680efaecffb7674804191a5997' }, "Expandable Cell 2", h("div", { key: '3f2fb41ed70a88f413b0133dd5d85aa53bb9f062', slot: "detail" }, "Content of the expandable cell 2")))), h("smoothly-table-foot", { key: '814c8d8d2faab31d6edc4af6f20ad150352f96ea' }, h("smoothly-table-row", { key: 'c9c8981af50d5f2daf71f234f14a0ae2213d2c2a' }, h("smoothly-table-cell", { key: 'f7ee5b1e9bafd407ee9d191645efea768e9998f9' }, "Footer Cell"), h("smoothly-table-cell", { key: '85a523e583fbd8d45fa0c62ebc14d4f4f6be9ced' }, "Footer Cell"))))));
+        return (h(Host, { key: '70206f06c6f0927b7fd56f6c447441883cdb8cbb' }, h("smoothly-display", { key: 'fe882f04329755107f28029e6c3ed3162e2a6f2d', type: "text", value: "Simple" }), h("smoothly-table", { key: '943c5b0e05764d07eb88e9723c42214c7c785a74', color: "primary", columns: 2 }, h("smoothly-table-head", { key: 'e26f7945d199844450707d36aa848e7ef5e85e4c' }, h("smoothly-table-row", { key: 'f60bcd540697bf27ef22ba3b2db828c1eaba8a18' }, h("smoothly-table-cell", { key: '5e2e2d9f3724051fd61ff787caae7e47c120e31f' }, "Breed"), h("smoothly-table-cell", { key: '5ac9dddc03f397574b16d7809938f133be3a5e32' }, "Coat"))), h("smoothly-table-body", { key: '48228f02bdc713ef18e1e9400c7b274b6ed7a91f' }, cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country:", h("br", null), cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), h("smoothly-table-row", { key: '04146e8b286cede980153a96645635ec21d87135' }, h("smoothly-table-cell", { key: '37ff22202464b1ef68aecea476a5070e3612fa5d' }, "Cell5"), h("smoothly-table-expandable-cell", { key: '0db694a71548c2a27909bd2b74e9c4e24e1368cb' }, "Expandable Cell", h("div", { key: 'f73430644f301ba65ff5b10affee17b767dda779', slot: "detail" }, "Content of the expandable cell"))), h("smoothly-table-row", { key: 'd8e43c4f6104f2ea9ed4a3e1d5526f4216cd1755' }, h("smoothly-table-expandable-cell", { key: 'd63e6c60646e17005dcd1502603ecb0a0bc58519' }, "Expandable Cell 1", h("div", { key: 'f7892854c7a6284ac783062ddf9a99dda3693dc9', slot: "detail" }, "Content of the expandable cell 1")), h("smoothly-table-expandable-cell", { key: 'f46176b69a8f96ad79ab20d0c7ad48dc25830437' }, "Expandable Cell 2", h("div", { key: '7a77dc2d15bb99724a61c606cc21760361f03187', slot: "detail" }, "Content of the expandable cell 2")))), h("smoothly-table-foot", { key: '48288078e1087b9a080970b292019f34c154516f' }, h("smoothly-table-row", { key: '36df570d42c5b836f46876778c1be549ddacf5d9' }, h("smoothly-table-cell", { key: 'b428dbfbc9460d84ca3c86d3e9b3c911e4bf174e' }, "Footer Cell"), h("smoothly-table-cell", { key: '3f288427d5c543e60e9aaf1419b265ce7a26d452' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -9754,7 +9822,7 @@ const SmoothlyTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '83c526f00d51b0168a455e9bf868ebe197665443', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'bd6ef753fad107892472d513d3e85e2303496bb1', class: "content" }, h("slot", { key: 'ce3529ccc72dcc4434fc759be3de926b923952b4' })), h("div", { key: 'bb6ecf54d7568c46a582e5e9b7e34040d3318800', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, h("slot", { key: '55da6c2611dfa327b27b24d5f93f19f58f273c34', name: "detail" }))));
+        return (h(Host, { key: '80017dcf8950e676a48dc9aedc3d11ba12cf011e', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '57e34f20710f1694470a5e8d481d51480d4afb36', class: "content" }, h("slot", { key: '664f3698eb43707e4a53a252a57e0e43ddebfb40' })), h("div", { key: 'e010fe7654eaec8fc4418cb1560d0f8b3b82df7d', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, h("slot", { key: 'c524d17ac1f1fd7ed8070cf9eb07590fd0059ca7', name: "detail" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -9786,7 +9854,7 @@ const SmoothlyTableExpandableRow = class {
         this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (h(Host, { key: 'ff903b0e76d26c2b0828b970b5543cfd0032d64a', onClick: (e) => this.clickHandler(e) }, h("slot", { key: '483c340f950cad51409b816cb72edb5de6f06856' }), h("div", { key: '296d3287e2106d7e0f1703f0f51745e22abac101', class: "smoothly-table-detail", ref: e => (this.div = e) }, h("slot", { key: '23d911a603915e5dfbd807b29c22609382edd008', name: "detail" }))));
+        return (h(Host, { key: 'c3888ffed7c052d5df798d01e6137bbe7057e4e3', onClick: (e) => this.clickHandler(e) }, h("slot", { key: 'cdd186acc3862b6125c85942a673415da659ffa7' }), h("div", { key: '1be46ebc8404b04d5bcc7174f4fa36e0e29a8bee', class: "smoothly-table-detail", ref: e => (this.div = e) }, h("slot", { key: '2d16b8dbcd03e0672f585a6d89e72d070b572299', name: "detail" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -9803,7 +9871,7 @@ const SmoothlyTableFillerRow = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("smoothly-table-row", { key: '8d580002c87f7b0e829c8611ff035bc6b135fd94' }, h("smoothly-table-cell", { key: '3ebb3485d3fe53900dea32010e5174f9bc27013d' }, h("slot", { key: 'a30dd8ac3c009058d6fba5acebe6608368b92af8' }))));
+        return (h("smoothly-table-row", { key: '74889d28c93b9142041a444f3c88842851eabfee' }, h("smoothly-table-cell", { key: 'f085bb29ceb64ec8a0e6a1b2ef07323aaf79dbff' }, h("slot", { key: 'c09f20c0fe10bac51d4c2ebb12127935092e8d90' }))));
     }
 };
 SmoothlyTableFillerRow.style = styleCss$f();
@@ -9815,7 +9883,7 @@ const SmoothlyTableFoot = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '6fd2e248de8df09b4b20908c00272e7751c63a6b' }, h("slot", { key: '66634f6fcbd68eed2628c4d16e7ff3cf4d7ad78c' })));
+        return (h(Host, { key: '6e3eec46ba1665a4c6cc1131fbf406b1aa997364' }, h("slot", { key: '816b86c8c621a8625378e307df634a1b820fdff3' })));
     }
 };
 SmoothlyTableFoot.style = styleCss$e();
@@ -9861,10 +9929,10 @@ const SmoothlyTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (h(Host, { key: '4e36d52e779e650ece819865062e1b2e3c910aa3', class: { scrolled: !!this.scrolled }, style: {
+        return (h(Host, { key: '7649393821cbe7b9c336b9ae5d88e4a9edf8a409', class: { scrolled: !!this.scrolled }, style: {
                 "--top": `calc(${this.depth} * var(--smoothly-table-cell-min-height))`,
                 "--z-index": `${10 - this.depth}`,
-            } }, h("slot", { key: '0ffd90e5c1661e52c1a2047ce754889c51cb7727' })));
+            } }, h("slot", { key: 'c20ebbb80c1d9b5e1210fd2c194a754f0e9e1755' })));
     }
     get element() { return getElement(this); }
 };
@@ -9889,7 +9957,7 @@ const SmoothlyTableRow = class {
         }
     }
     render() {
-        return (h(Host, { key: '79c849e4643bb16dead2af107b205abb420084f7' }, h("slot", { key: '193f73152f488024219ed4af47d1b34d81fca26c' })));
+        return (h(Host, { key: '4336ffac2830c4b434a1c987c9620cfd98d336fe' }, h("slot", { key: '568632a78f16c07aa4e0ebd28c1577cb8eac5132' })));
     }
 };
 SmoothlyTableRow.style = styleCss$c();
@@ -9912,7 +9980,7 @@ const SmoothlyTableRowGroup = class {
         }
     }
     render() {
-        return (h(Host, { key: '06b9db603c4254382dcd7fc3d7dfaf3a2c6be521' }, h("div", { key: '22b594f2c066cf6b2f92139b5847972e204bda1d', onClick: () => this.clickHandler() }, h("div", { key: '9c082d0cbccf65d45637e5e3999aa0e4503eb3b9' }, h("slot", { key: '2530eb7dd1162dc407169270b20fe0fc14a747b1', name: "start" })), h("div", { key: 'd2b06391bca18891401c5a31e4f98a0e2e34479d' }, h("slot", { key: 'f64c478dd61c7abd1c35fa809b85a3a8e0264cab', name: "end" }))), h("div", { key: '8d3c37ffa856ddfea5b0275104c055a75540168b' }, h("slot", { key: '9856a2795799b61ddd4c231054208c960eaba96f' }))));
+        return (h(Host, { key: 'e7c58f7d7b9fcc27145e398a64c04451b3169a29' }, h("div", { key: '93b4472da7d3c7f0135862eff75390b0ad0ca2c2', onClick: () => this.clickHandler() }, h("div", { key: '36579099012a695455c882f8888f54b49acab4ac' }, h("slot", { key: '75921365a284a67e75723d2618dbc58568cd1a43', name: "start" })), h("div", { key: '9eec76375486c07dcc1e1a4e2474b4ef4b3fd804' }, h("slot", { key: '668fe80f0dd42ac7a103b5952f8c15215fa70076', name: "end" }))), h("div", { key: '60747a2e17ae4fa7fd44c02fdb140bf59f233736' }, h("slot", { key: 'f333d49e6caf4f252a3db59ee0768a8d07961086' }))));
     }
 };
 SmoothlyTableRowGroup.style = styleCss$b();
@@ -9980,7 +10048,7 @@ const SmoothlyTabsDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'c0a6d3252227ca35115022479e20eae1518a0ea0' }, h("div", { key: '987c89d2b7d434a7ededccad9aa2592370f35c56' }, h("smoothly-button", { key: '9d1e4baa19cbfd20f0741b62cf1faba0eee5e9f9', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '00e5d3f1a502d466d8f7bb57dc99b8f43b4cec5c', tabs: "multiple" }, h("smoothly-tab", { key: 'f349ea433e31c9fa0601552c83744fb0fd59c0dc', label: "Single Tab", open: true }, h("strong", { key: '1d9e472b1bcb6eab690b534d9c54c85df6ff6bad' }, "Single Tab content here."), " If only one tab is available setting ", h("code", { key: '69f193a4e9a7022eb5a57bf6ba1ce25642440932' }, "tabs"), " to", " ", h("code", { key: 'a2e44255abc6ffcbb97fa40620795d66b708dbe4' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (h("smoothly-tab", { key: 'dd469d65650aef03d78794be04a3753e9f6503b1', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), h("div", { key: 'd4c74375b2a2462272536302cae4c2b8d156d9e8' }, h("smoothly-button", { key: 'b8cb8984081584464d24ac00f8eb31beec0a1ec6', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '13b0f9af28c870dc8eae74930e358b8c2c3e3a31' }, h("smoothly-tab", { key: 'fb2a32bf6a82f57c6f17684262448dfa7ca7312f', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), h("smoothly-tab", { key: 'bc21b1abc992aeb53f934b528888e44e334c651a', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), h("smoothly-tab", { key: '9fb5f89c51f22e527fb3f18c48f5018ef1624364', label: "test2" }, "this is a test message!"), this.extraTab2 && h("smoothly-tab", { key: 'e563eaf2cffb105047505abee23958965108fba1', label: "test-extra" }, "this is a test message!"))));
+        return (h(Host, { key: '5781b5ebdcad292a5b08f40f31ebebb24222014f' }, h("div", { key: '0988223a7ffccdb2cab03999dc462ced6f6996cd' }, h("smoothly-button", { key: 'e97edc5cf05136e6ab3032e6271275a6fdc947b9', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '87a0b317fbfb07a8f2f03ec0e866dc4376c7cae2', tabs: "multiple" }, h("smoothly-tab", { key: 'd644206d3f7b6baf6c0900f2f461d18f3dc16e23', label: "Single Tab", open: true }, h("strong", { key: 'd02c9f64638183e494f0c903aedb31ecb07e5791' }, "Single Tab content here."), " If only one tab is available setting ", h("code", { key: 'a62e17aa9f7ac71c74a2796f9491610ef3ecaadc' }, "tabs"), " to", " ", h("code", { key: 'b14b0cdbaad33dcda4a8a824e60351779966895b' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (h("smoothly-tab", { key: '6576f69475e5c5a97ffca76f2481acc6983ef451', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), h("div", { key: '55be8c4f25e2a4bb806a355307b48f8a0c3430d3' }, h("smoothly-button", { key: 'e456813c237a864bc2f21e6af147a63f62daec22', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '2cafcf41ba65de3f65ce1090e03d7e2f8690e2f5' }, h("smoothly-tab", { key: 'f67c211b8436be3361fe382c67c88690ad745e1e', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), h("smoothly-tab", { key: '731625fa3d088cc441f8434af3a6723463d10e0d', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), h("smoothly-tab", { key: '27af20a8bd5902978986f98b0b54d5bf8cb0cb0e', label: "test2" }, "this is a test message!"), this.extraTab2 && h("smoothly-tab", { key: '76ce0bd1c7fe46c76b1401bd7dfd5d3dde777fa6', label: "test-extra" }, "this is a test message!"))));
     }
 };
 SmoothlyTabsDemo.style = styleCss$9();
@@ -9992,7 +10060,7 @@ const SmoothlyThemeColor = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'fc491c82a4336ac22b0ae27664dc30b8ad2e6ddf' }, this.color, ["tint", "color", "shade"].map(variant => (h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
+        return (h(Host, { key: 'a1fcf6ce5205459d5f58c9dbe2b5585975638a9f' }, this.color, ["tint", "color", "shade"].map(variant => (h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
     }
 };
 SmoothlyThemeColor.style = styleCss$8();
@@ -10040,7 +10108,7 @@ const SmoothlyThemeDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'f0c5a5037d8d733f786d8ce3b21e0979856ea24c' }, h("h2", { key: 'ffc46c881e6f125cd636f48ed99e9b09483777a3' }, "Theme"), h("smoothly-theme-picker", { key: 'fa85e3f66a7396add5817d5865a9ec72e189ed82' }, h("smoothly-item", { key: '5d0d85fb7891f8128f773cce4541853bec86c218', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), h("smoothly-item", { key: '4c55805827a7429ee79c3b5b2bdb77ef101c1755', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), h("smoothly-item", { key: '5317ebcb61a09140363221a803aa26a3dbfb1c56', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), h("smoothly-item", { key: 'c4ec847f0f40e1ddf9ebb35a11a20965ffa8c7b9', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), h("smoothly-item", { key: 'eb5645045d8906ee1ef1d7ef9878f0d3a85ad194', value: "https://test.dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), h("smoothly-item", { key: '70e9b33c310e0a882c72d22581a0b15d731585cf', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), h("smoothly-item", { key: '94fce8e04541ce2b9f0ef82a18be6639f74973be', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), h("smoothly-item", { key: '97e2ba87bea89e4757bd57295941148046f3917f', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), h("smoothly-item", { key: '50c90c022145e5f03cb83bc69e31e25f1d7cc28d', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), h("div", { key: '1e29f47ff30f071b712a20fc204a975a32370a06' }, h("smoothly-theme-colors", { key: 'b7a0d1e92bb6a6e2c89018b72fb64457dced7b46' }), h("smoothly-theme-guide", { key: '6dbfe67e1241557f3d3ac2411ad01d39119f877a' })), h("smoothly-button", { key: 'd91c71c4a3fd05d492acffb741b215dd6c4b957c', type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { key: '3d47ad9f1472edbf824405924068b588aca5013c', type: "link", link: "/redirect" }, "To /redirect"), h("smoothly-button", { key: '914d0de16407dae3f29d412c64b799bd0d6c220a', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), h("smoothly-button", { key: 'db36742a02c5c56ab0f80daa99d3a2bd6d10984d', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (h(Host, { key: '4705bffb21e4f2ab9efdceb8937f6853beb20cdb' }, h("h2", { key: '468ec56882ec195388d555e5185eefd74409908a' }, "Theme"), h("smoothly-theme-picker", { key: 'a7902615f05a82b2e5c2b9dc0a9395640e5e9621' }, h("smoothly-item", { key: '96a947fd68ccb402b60ed737b0494aea2b857b41', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), h("smoothly-item", { key: '976b9696e68c0202084c6b07558bca83f6a7fa36', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), h("smoothly-item", { key: '6236ade7730e1af2b97e7d93b3901f897f242c2a', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), h("smoothly-item", { key: '8c53d77ad90596a2fcd99ad8c03bd760f8b22e1d', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), h("smoothly-item", { key: '48dc39f3309bbaa544e501bef6cec04035d4e8af', value: "https://test.dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), h("smoothly-item", { key: '71c3a0df112ccd2ef193e15aaa81dc52b08da648', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), h("smoothly-item", { key: '8243afce902c6b00aa5373c8e8380b7624f68c32', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), h("smoothly-item", { key: '8fcbb1292d126e0b6ff854e64ddf9dced0d2dc10', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), h("smoothly-item", { key: 'c75faf15d890bacdced32360c27aa3db342b31cc', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), h("div", { key: '8b559865c0458947fc98da3fd576ee904b4de051' }, h("smoothly-theme-colors", { key: '6fa3dfacbba76871c3619b6f2d09fb1360a9b9b4' }), h("smoothly-theme-guide", { key: '0f33c003d9055c36bd0cbe367d892172bd341624' })), h("smoothly-button", { key: '257acc2032881cacefafb552e372ceabc7ef50f9', type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { key: 'd3184eb10e2e0002f4e96f68ced1b963887e4aa5', type: "link", link: "/redirect" }, "To /redirect"), h("smoothly-button", { key: '082b1930a2ad252eed0c1861073b64227c30a7f6', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), h("smoothly-button", { key: 'acdd8c707231d45d0828b25a2d6dd28250fe3df1', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = styleCss$5();
@@ -10053,14 +10121,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            h("smoothly-display", { key: 'f1df988e927d7a410fb804c256d83fd2e5df3270' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            h("br", { key: 'd88375d6837282086c1b28679979c5c30535bf6f' }),
-            h("smoothly-display", { key: '92197798a41f3637cdb44eb0d771314994f8558b' }, "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."),
-            h("br", { key: 'f3babcf46ea37dd12f0963dc5aea96663192b36d' }),
-            h("smoothly-display", { key: '62bcb9535f7bdd1278867a5c7ef64a523f8165c2' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
-            h("br", { key: '10c741b12802f9afdfce58261f02f3d82c313ea7' }),
-            h("smoothly-display", { key: '3611691ee95a6349d47fcd73361bbb24e944ea97' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            h("br", { key: 'abfa804436d8eae1a12e021ee848ddd63ade667a' }),
+            h("smoothly-display", { key: 'ee1bdee159fc056d9d816c7be16066a7d5da63e1' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            h("br", { key: '4345df918088a5bc0830d76ad577a8d9021722a3' }),
+            h("smoothly-display", { key: '70a922600fa428e25e39b0b8043f896edca77da0' }, "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."),
+            h("br", { key: 'dd886d7a85f3c57a5d944c4baee8f82f352b33a1' }),
+            h("smoothly-display", { key: '0fa99779df3b249e2c4123a44b12f139a13333d3' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
+            h("br", { key: 'e666fe45f25956f1f37b3f1c79344c133c914bff' }),
+            h("smoothly-display", { key: '952a2cc2973a61046e100e7a1347352d64024702' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            h("br", { key: 'abb9cdf2d96ccb56053b4db4b2f90aba054f9c04' }),
         ];
     }
 };
@@ -10074,12 +10142,12 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (h(Host, { key: '3d64ad9ce926088343c92623b0c1a160f8ac6b12' }, h("smoothly-input-select", { key: '6d5fd6f6e60d38230bb5e5093ae3a3c363bcbf46', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (h(Host, { key: 'cb423fa145741455a271c877f13093c5172b7dca' }, h("smoothly-input-select", { key: 'ef47ed51099360c415eeb7f9ddfa89d3ac89cf76', 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;
                 }
-            } }, h("label", { key: '833d1f1acc791ab7eaa91c6ac44d0a49fe4730d2', slot: "label" }, "Select theme"), h("slot", { key: '40db0ed1a542a37e5b7eb3c605927d9ecb52ba0d' }))));
+            } }, h("label", { key: '2b54b1ae3b0a7f6be35234ec90b5f4178058d396', slot: "label" }, "Select theme"), h("slot", { key: '6612441eed70e810214e212aec0026e1c5015000' }))));
     }
 };
 SmoothlyThemePicker.style = styleCss$3();
@@ -10102,7 +10170,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (h(Host, { key: '945d2ccf63b6151062eb53a452e0f0f692dc4c24' }, h("button", { key: 'b9c395ce35fc7bc680217e09ad206b54a7b62241', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, h("smoothly-icon", { key: '7ba58e7bb4e71ee39dc447534f5ff020ebbc6147', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
+        return (h(Host, { key: '0ba1d148bb5f5259f513190289e0b6368754e083' }, h("button", { key: '439a47ec12ce5b3403a89564ce7a80900f2ece18', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, h("smoothly-icon", { key: 'cef810d0fd803a7ec02edd56e049a14f412efc25', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = styleCss$2();
@@ -10114,7 +10182,7 @@ const SmoothlyToggleSwitchDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '6d75883f10a6927501fbbe6a03f82ef7528133be' }, h("h4", { key: '625ba905112acc2df7c3126199167707b03c210d' }, "Toggle switches"), h("div", { key: '5f2287372e9c1052aed9b1479e8bbbbf6dd64757' }, h("p", { key: 'edef7d5d95c5fa0419555941c1e45ea40b045ce3' }, "Checkmark"), h("span", { key: 'c397f7c3cfc3409b82cb530e03f0c8e670041435' }, h("p", { key: 'ab0a7e9ba7b3e413b0d7019c09a252592840da21' }, "Tiny"), h("smoothly-toggle-switch", { key: '2afce65a2ec65e39c88d8fb4520edc6dff419ea2', disabled: false, size: "tiny" })), h("span", { key: '67696d9cb555e62ae71f9c40fe4f8ebee7931e35' }, h("p", { key: '6b304afb35f96bb0dfd8aed9db8490dd7ca40298' }, "Small"), h("smoothly-toggle-switch", { key: 'bc35c4113a7f9393d53806f789a54589e3dc2353', disabled: false, size: "small" })), h("span", { key: '865f6cccdff04345c79ec1bcee9f5e6534dec7fd' }, h("p", { key: '6d5519e11c79219503d715320d738950c37d780c' }, "Standard"), h("smoothly-toggle-switch", { key: 'd5602d7f3f60b7ded9eb7248e71d1b3f750b777f', disabled: false })), h("span", { key: '273f17415a1e8c9f108309e6d4fcfdcf17c608b7' }, h("p", { key: 'e8c5ad08bc97b6694f1b2606a5d8626c2f278126' }, "Large"), h("smoothly-toggle-switch", { key: 'cf6cce07734bbf3c50a4a443c68fba38d63fc8dd', disabled: false, size: "large" })), h("p", { key: '147584c6d76a94f2a2588d15154113f94402464d' }, "Colors checkmark"), h("span", { key: '37e5370fdfc007d0368a28d2bea98d37ed288312' }, h("p", { key: '5500276de9dbf6a9fdf2fd15ecbfd2b8299809e8' }, "Danger"), h("smoothly-toggle-switch", { key: '78879aa4d4277bf89dc24e6cf287c1accfdfec6f', color: "danger", disabled: false, size: "small" })), h("span", { key: '4b86b7193d1982ff84bc5691a342916f62281059' }, h("p", { key: '4da64077bf3f54d0800abab5b6f2a10b8b4c97d2' }, "Primary color"), h("smoothly-toggle-switch", { key: '534d2e2bf89fd7dea185eff41d8a3f1711d76078', color: "primary", disabled: false, size: "small" })), h("span", { key: '72f8aad6e84051d29e1f9ba18ecb4895612c936c' }, h("p", { key: 'f4aa9ffc25c89dd66d17483dfa7a0489ae1d6bba' }, "Secondary color"), h("smoothly-toggle-switch", { key: '15bfaeed2c51163bc7de95f061cde923b7607654', color: "secondary", disabled: false, size: "small" })), h("p", { key: '199c1a9d0a3d6eae579a5b7df8d0d9e2758a6fe8' }), h("p", { key: 'de9327fe62e464761eb16462480a1802226221aa' }, "Colors no checkmark"), h("span", { key: '571bbf458b871cf5cac9876a476b7754df87ae44' }, h("p", { key: 'ef59738e2b79bf43de0b1192842173157d5e3406' }, "Danger"), h("smoothly-toggle-switch", { key: '97a4641ae8fe82838241816b46b2d8f79c4f9908', checkmark: false, color: "danger", disabled: false, size: "small" })), h("span", { key: 'b58b64c313b1d4f9aad01d581920e52be572de4e' }, h("p", { key: '1a794486d86bccac605e8faa18c87cb5e85dc69a' }, "Primary color"), h("smoothly-toggle-switch", { key: 'dccb06b7ba71fc9ec9e5e1cd430ae8c82f6e03c4', checkmark: false, color: "primary", disabled: false, size: "small" })), h("span", { key: '29477d34ea6de176fe86cd7979d0e638219c38d7' }, h("p", { key: '4180155f37c46569c583d626f7c6c528f77daf86' }, "Secondary color"), h("smoothly-toggle-switch", { key: '3dc6be79be809e7b13e5510538221a7d58044137', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (h(Host, { key: '1dabdcd10d3df43ffc5671428e044b0cd39f1fdb' }, h("h4", { key: '0f582a81edc486b03a2ff398a01ed1ef57a325b8' }, "Toggle switches"), h("div", { key: 'e0a64865e306cc58778453e277eb6f23e95b1c83' }, h("p", { key: '64b2322cb11ed3d133752347510553a425c32893' }, "Checkmark"), h("span", { key: '48529dcf99d765bf123d4f9b7465d12b78d8f71f' }, h("p", { key: 'ded34c748d733b482bd9dc04920000c58994e232' }, "Tiny"), h("smoothly-toggle-switch", { key: '3ef57d723c3d5773d3e50da21a70acd14f6b9d4b', disabled: false, size: "tiny" })), h("span", { key: '805cafb2f78c83d429134f13b09755230d3c7f28' }, h("p", { key: '07b997916e3b76db73974a8217efd4a0a0da852e' }, "Small"), h("smoothly-toggle-switch", { key: '8630ffacea58d4226852d87de203485f69d6d0f0', disabled: false, size: "small" })), h("span", { key: '47ec6fe9f8cfdb7b73f1a36ec9a989270ae0d970' }, h("p", { key: '5dd9f3b10fd19c0f38f97d3a0a6cda8c94974ea9' }, "Standard"), h("smoothly-toggle-switch", { key: 'b464c8940d0fb07bfcea65833873968d9595e343', disabled: false })), h("span", { key: 'dc46167d726418bacef291f6b4de36fa97d58a33' }, h("p", { key: 'b15bc73943b69415ce8e3df9e757fae2ba0a4207' }, "Large"), h("smoothly-toggle-switch", { key: '7db93ebeb96861b23db045672d6a3c5146b8a194', disabled: false, size: "large" })), h("p", { key: '94eb15785b3acc86d6a18cf8f882cb1a7d72d049' }, "Colors checkmark"), h("span", { key: '97df09fcf36c26d8bf6088f5504db6d0e8fa7882' }, h("p", { key: '00f1854bde03e6973af5ee3b4e496f7d61bd3f03' }, "Danger"), h("smoothly-toggle-switch", { key: '34969714ea4c6b3e86d69941d5e338761654f6b6', color: "danger", disabled: false, size: "small" })), h("span", { key: '5b91054e5fe2c122d1196b1e1ef16ab48045d4e4' }, h("p", { key: 'e2f26a0c6dc32798c74cb8b0ef80077fed51cdd2' }, "Primary color"), h("smoothly-toggle-switch", { key: '6b7c1f733ffc932b01163002158c1a5d4516b536', color: "primary", disabled: false, size: "small" })), h("span", { key: '7af0d75bd42b73c42b3731decb6b86374efacf82' }, h("p", { key: '185b51e8f85e3cf1b45643cc36eab6ce397ce674' }, "Secondary color"), h("smoothly-toggle-switch", { key: 'cc6b462ea28082ed9a78f4eced47c854cb399c3c', color: "secondary", disabled: false, size: "small" })), h("p", { key: 'e327834dce8d87541969283181fe61d895543a1f' }), h("p", { key: '6432b470d13671b7ad08c8dd2a9c89367c62b0b5' }, "Colors no checkmark"), h("span", { key: '5aab6ec8dc84d76e328f5e553c5a2c77da87d6eb' }, h("p", { key: '37e2f84bb470c9d18bc63b632df96628de40a665' }, "Danger"), h("smoothly-toggle-switch", { key: '5f54698d7b60a66ef5652678f69c5ea84cd77e7d', checkmark: false, color: "danger", disabled: false, size: "small" })), h("span", { key: '8ad6b7f5a8e583a492b870e938583a20af9013be' }, h("p", { key: 'e8a62c15ec765fe0b677e07e7a38785ee9f0ddee' }, "Primary color"), h("smoothly-toggle-switch", { key: 'fe5491ba3676d9cc74ac86e79e2e0d56bec269fe', checkmark: false, color: "primary", disabled: false, size: "small" })), h("span", { key: 'ab1d27ec6816b4a1701be605eae402563c57d895' }, h("p", { key: 'aeaaa479d30dc09adc6cdb3253eae9bf60d8b058' }, "Secondary color"), h("smoothly-toggle-switch", { key: 'c15f8d04f0d4e4ba5b67a7ba8415d1622d0f6dfb', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = styleCss$1();
@@ -10140,7 +10208,7 @@ const SmoothlyTrigger = class {
                 result = this.disabled ? (h("slot", null)) : (h("a", { onClick: e => this.onClick(e) }, h("slot", null)));
                 break;
             case "button":
-                result = (h("button", { key: 'b29e3e2eb0ab5d17b9602df55ad9afb0d0565243', disabled: this.disabled, name: this.name }, h("slot", { key: 'df1757d80fe0e05d8d497b1aa168e9992ee423a2' })));
+                result = (h("button", { key: 'e5464a11e71f956f08e7c02a72f49246c411d679', disabled: this.disabled, name: this.name }, h("slot", { key: 'aa8aed4cddd4978a5636b816ef4d5ff2737dedc3' })));
                 break;
         }
         return result;