npm - smoothly - Versions diffs - 1.121.0 → 1.123.0 - Mend

smoothly 1.121.0 → 1.123.0

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

Files changed (366) hide show

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

@@ -6788,7 +6788,7 @@ const SmoothlyInputDateDemo = class {
         this.alwaysShowGuide = false;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'cbba15250597a6d89b26f48ae9e79d6fced8e48d' }, index$1.h("div", { key: '15e49388b292c871a95ef08c250e60211bd7da69' }, index$1.h("h2", { key: '5027fbeaad76df66416ad518ba62e5d406f9aec2' }, "Date input"), index$1.h("p", { key: 'e0fda7a58506997767f4f8fd3fee8adf14ce482f' }, "Different locales formatting the same date"), index$1.h("smoothly-button", { key: '0b83e9e07173233d5a071a4799069b59dbbcf641', color: "primary", onClick: () => (this.date = this.date ? index.isoly.Date.next(this.date) : index.isoly.Date.now()) }, "Set date"), index$1.h("smoothly-input-checkbox", { key: '237b78757e9984326376f0e9dc838f4481d02930', looks: "transparent", onSmoothlyUserInput: e => {
+        return (index$1.h(index$1.Host, { key: '9602907d9ae0152643b48455bdd21da2a8a91a50' }, index$1.h("div", { key: '2e9244031f62cb552fff12fd107050c42065bc1d' }, index$1.h("h2", { key: '26b155267a35157e779724e7b805496aa01d61e5' }, "Date input"), index$1.h("p", { key: 'b2f4a4d204e681869e2a3067b4f08bfd53700077' }, "Different locales formatting the same date"), index$1.h("smoothly-button", { key: '2e8e18bc20722b720f6f26b5c720cf31c6ba236b', color: "primary", onClick: () => (this.date = this.date ? index.isoly.Date.next(this.date) : index.isoly.Date.now()) }, "Set date"), index$1.h("smoothly-input-checkbox", { key: '13101795d8056cad4581762357226c669181f56b', looks: "transparent", onSmoothlyUserInput: e => {
                 this.alwaysShowGuide = e.detail.value;
                 console.log(this.alwaysShowGuide);
             } }, "Always Show Guide")), ["en-US", "en-GB", "de-DE", "se-SE"].map(locale => (index$1.h(index$1.Fragment, null, index$1.h("smoothly-input-date", { locale: locale, name: locale, looks: "border", value: this.date, alwaysShowGuide: this.alwaysShowGuide }, locale, index$1.h("smoothly-input-clear", { slot: "end" })), index$1.h("smoothly-input-date-range", { locale: locale, name: locale + "-range", looks: "border", start: this.date, end: this.date ? index.isoly.Date.next(this.date) : undefined, alwaysShowGuide: this.alwaysShowGuide }, locale, " Range", index$1.h("smoothly-input-clear", { slot: "end" })))))));
@@ -7134,10 +7134,10 @@ const SmoothlyInputDemo = class {
                 "--smoothly-input-border-radius": "0.5rem",
             } }, index$1.h("smoothly-input-clear", { key: '7f6081c65f5280584d04b6ce8f7905ac77634a3e', slot: "end", size: "icon" })), index$1.h("h2", { key: '37f34f036ee7dc8fb75c4c00659da25e601ff5b1' }, "Date"), index$1.h("smoothly-input-date", { key: '511529a03ebe91114a24ac5a1942bf2007e1c338' }, "Date"), index$1.h("smoothly-input-date", { key: 'f0b777d7e776387614b9cbeb866f91fd20c86710', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index$1.h("smoothly-input-date", { key: '11c9d53699c3f56ab059fcc4ae23ae3ede7c3ef7', value: "2021-10-28" }, "Date", index$1.h("smoothly-input-reset", { key: 'd8f02f6d1c3a5866f9666199b8dff8bffa2f020a', slot: "end", size: "icon" })), index$1.h("smoothly-input-date", { key: 'b818db6b9c7b7a3e52bd110795f814f440eab4f7', value: "2021-10-28" }, "Date", index$1.h("smoothly-input-clear", { key: 'c099251b5d2925af72bf10d4e897f4102f62be43', slot: "end", size: "icon" })), index$1.h("h2", { key: '8033cbfa7ee22ca7440d58952676a43f092c1304' }, "Select"), index$1.h("div", { key: '1de49162035bde4ab43a46cea27a2e4ef016c784', class: "select-div" }, index$1.h("smoothly-input-select", { key: '2d2acbd594c6a260b1bd571f00a35e53db9f904f', name: "select-dessert", looks: "border" }, index$1.h("label", { key: '4a1ebbb1757580ebfba6c58651fa8207a186274c', slot: "label" }, "Select with clear button"), index$1.h("smoothly-item", { key: '10fe2d4eec5af17e61f704b594be8a700dde57e8', value: "1" }, "Ice cream"), index$1.h("smoothly-item", { key: '50f3be0902fa5d9989e0827df63cbbc1e4969a4e', value: "2" }, "Sponge cake"), index$1.h("smoothly-item", { key: '54d4950affc3378a23311d30f01a6b75877921a8', value: "3", disabled: true }, "Disabled Item"), index$1.h("smoothly-item", { key: '2b669d8c3138b6bef8b2c0a5b0a17f07ea2b1fc3', value: "4" }, "Cookie"), index$1.h("smoothly-item", { key: '1d222cd2827315a43f1d8412777f2deab42c707e', value: "5" }, "Croissant"), index$1.h("smoothly-item", { key: 'f5582ec1306d69273508415467d56ef166d59592', value: "6" }, "Chocolate fondue"), index$1.h("smoothly-input-clear", { key: '903c91c69080f05179a1d4c5c4176f651bbac1a7', size: "icon", slot: "end" })), index$1.h("smoothly-input-select", { key: 'a73b2cdcca14bddac369727f65113cfe2e36f9c8', multiple: true, name: "select-dessert-multiple", looks: "border" }, index$1.h("label", { key: '264c0c5c870d69ccd4acd552c0c69b75bdf41322', slot: "label" }, "Select multiple with reset button"), index$1.h("smoothly-item", { key: '1b013b6fce5892e21cec768704c1c7847f9c2d6b', value: "ice cream" }, "Ice cream"), index$1.h("smoothly-item", { key: 'cbf0fb98cd04b4c21d56c4640ebc7fea61de1b8e', value: "sponge cake" }, "Sponge cake"), index$1.h("smoothly-item", { key: '5244238b76c116e31888c36887b3f4ac5c88f2d0', selected: true, value: "cookie" }, "Cookie"), index$1.h("smoothly-item", { key: '665cd5efa69f937a8de2e16549f6b5030f87aadd', value: "croissant" }, "Croissant"), index$1.h("smoothly-item", { key: 'f33f606105a30eadeb8ad91d1d098b59f03f1de2', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index$1.h("smoothly-input-reset", { key: '903d7955210a152bdd397bf011ede1bdff121949', size: "icon", slot: "end" })), index$1.h("smoothly-input-select", { key: 'a3b64c46106cc3059130d7c3a91d7f490d1d2751', name: "spirit-animals", looks: "border", mutable: true }, index$1.h("label", { key: 'a004cf922bae1aad8f4df3af6898096e965cfc6a', slot: "label" }, "Select or add new options"), index$1.h("smoothly-item", { key: '4aa4ef91d108edb11936203365632dfc604e6973', value: "manatee" }, "Manatee"), index$1.h("smoothly-item", { key: '12985b2fd02dec4a942274c1ecd0b8d64045fb62', selected: true, value: "cthulu" }, "Cthulu")), index$1.h("smoothly-input-select", { key: '926065319fff2eb3024955686991469cf4128a36', name: "select-icon", clearable: false, showSelected: false }, index$1.h("smoothly-item", { key: '1ac998cba750b6779c9d2159cef8245ab915f528', value: "folder", selected: true }, index$1.h("smoothly-icon", { key: '30d4832563d4b16c0bbb77cb33e0da404b743090', size: "small", name: "folder-outline" })), index$1.h("smoothly-item", { key: 'b04f79adc06b65369baed20874f53ef04a33f80f', value: "camera" }, index$1.h("smoothly-icon", { key: 'b16eaceb42a9e0b56587ce78e8cfdc6452dddd7b', size: "small", name: "camera-outline" }))), index$1.h("smoothly-input-select", { key: '5e225cc4758897b81015db7495c7d7a224776e53', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index$1.h("label", { key: '4b9bcc2a3fe30dabc8669888a19ce86f369cc41e', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (index$1.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index$1.h("smoothly-input-select", { key: 'a171d4ffb8e1bfc698f0fc9ae4ed69e98ced36c9', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index$1.h("label", { key: 'a23c78b0a859472f5e0123b0c02c010911417369', slot: "label" }, "Month multiple select"), index$1.h("smoothly-item", { key: 'a733057d56e91b60e5baa989e26dddbd91e0241a', value: "1" }, "January"), index$1.h("smoothly-item", { key: '376d92471d5d2eaa9dd88812a8fc583153410198', value: "2" }, "February"), index$1.h("smoothly-item", { key: '7a1fce8efd0b7974e5528a5fa5662c1dfd778394', value: "3" }, "March"), index$1.h("smoothly-item", { key: 'cb9baf077486cb9bcdbbf89649530a5e0d6063c7', value: "4" }, "April"), index$1.h("smoothly-item", { key: '0a3473edcc3c472a629ba3d8a79f902acb2e26f3', value: "5" }, "May"), index$1.h("smoothly-item", { key: '5fdae912db41bffabf3b295d2c3032277dffaa94', value: "6" }, "June"), index$1.h("smoothly-item", { key: '80047591254fd32dc669b14753e4786d43d3c97d', value: "7" }, "July"), index$1.h("smoothly-item", { key: 'c9df20403a3c394c64aba952b9fedf32e79ccb4d', value: "8" }, "August"), index$1.h("smoothly-item", { key: '68313242691a68d57283d668fe9b515793737c7e', value: "9" }, "September"), index$1.h("smoothly-item", { key: '443d7a691c41599d0d89db84b537eb1f257ef517', value: "10" }, "October"), index$1.h("smoothly-item", { key: '9744bb0bda7582ad2b8b1f90fdf8032258463c54', value: "11" }, "November"), index$1.h("smoothly-item", { key: 'a96a75320e5c546549c4fa35f4176f35a82f5441', value: "12" }, "December")), index$1.h("div", { key: '3e7603380ceba63da34a828e2516632da73e39c4', class: "select-div-row" }, index$1.h("smoothly-input-select", { key: '408634ba59447206b05b3cd1fd1cc33d1eb8c65d', name: "select-icon", clearable: false, showSelected: false }, index$1.h("smoothly-item", { key: 'ee676953d6e5787b02d09f18296c90f0de191c1d', value: "folder", selected: true }, index$1.h("smoothly-icon", { key: 'a904b9c0a3606d2427f70b0de7038c58e126eb8f', size: "small", name: "folder-outline" })), index$1.h("smoothly-item", { key: '3005772f6f0db186e465eaa8cdf0664acc8df98a', value: "camera" }, index$1.h("smoothly-icon", { key: 'd6d6da52e16928ffae5914bb57c5d507dcd753d7', size: "small", name: "camera-outline" })), index$1.h("smoothly-item", { key: 'e7f997b52e887a470a300bde751cb2972a8a6d1c', value: "boat" }, index$1.h("smoothly-icon", { key: '7d2fa7593473fea8a742b06451b86234dc2c984f', size: "small", name: "boat-outline" }))), index$1.h("smoothly-input-select", { key: '72b7dd2b8193e7daa76e87e2b2c0229e6542b95d', name: "select-number", clearable: false }, this.numbers.map(number => (index$1.h("smoothly-item", { value: "number", selected: number === 3 }, number)))), index$1.h("smoothly-input", { key: '2eaf99ab88e42d799677b83d1e7cac4bf27b2cab', name: "name", value: "Sten Qvist" }, "Name"))), index$1.h("h2", { key: 'bdf117c705543939f57d4f8c001b9bd6b0f6d419' }, "Duration"), index$1.h("smoothly-input", { key: '8c58c7e2d86e031ffb41a6a46fc738bd87d73a8d', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index$1.h("smoothly-input", { key: '0e0b25be2290f7adfc1dc72807e11791965a1ad8', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (index$1.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index$1.h("smoothly-input-select", { key: 'a171d4ffb8e1bfc698f0fc9ae4ed69e98ced36c9', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index$1.h("label", { key: 'a23c78b0a859472f5e0123b0c02c010911417369', slot: "label" }, "Month multiple select"), index$1.h("smoothly-item", { key: 'a733057d56e91b60e5baa989e26dddbd91e0241a', value: "1" }, "January"), index$1.h("smoothly-item", { key: '376d92471d5d2eaa9dd88812a8fc583153410198', value: "2" }, "February"), index$1.h("smoothly-item", { key: '7a1fce8efd0b7974e5528a5fa5662c1dfd778394', value: "3" }, "March"), index$1.h("smoothly-item", { key: 'cb9baf077486cb9bcdbbf89649530a5e0d6063c7', value: "4" }, "April"), index$1.h("smoothly-item", { key: '0a3473edcc3c472a629ba3d8a79f902acb2e26f3', value: "5" }, "May"), index$1.h("smoothly-item", { key: '5fdae912db41bffabf3b295d2c3032277dffaa94', value: "6" }, "June"), index$1.h("smoothly-item", { key: '80047591254fd32dc669b14753e4786d43d3c97d', value: "7" }, "July"), index$1.h("smoothly-item", { key: 'c9df20403a3c394c64aba952b9fedf32e79ccb4d', value: "8" }, "August"), index$1.h("smoothly-item", { key: '68313242691a68d57283d668fe9b515793737c7e', value: "9" }, "September"), index$1.h("smoothly-item", { key: '443d7a691c41599d0d89db84b537eb1f257ef517', value: "10" }, "October"), index$1.h("smoothly-item", { key: '9744bb0bda7582ad2b8b1f90fdf8032258463c54', value: "11" }, "November"), index$1.h("smoothly-item", { key: 'a96a75320e5c546549c4fa35f4176f35a82f5441', value: "12" }, "December")), index$1.h("div", { key: 'd873c1eec59cde6d8922fe4a50e243a63cab66c5', class: "select-div-row" }, index$1.h("smoothly-input-select", { key: '50e5308ef0fd5c89c0ef0994a1614e633a3d79e0', name: "select-icon", clearable: false, showSelected: false }, index$1.h("smoothly-item", { key: 'a2126b796f28e4c49dd55ca407bfe9c2d71a732a', value: "folder", selected: true }, index$1.h("smoothly-icon", { key: '9e59ce322358f4648b7b2cf603f4fa0bbee5e7e6', size: "small", name: "folder-outline" })), index$1.h("smoothly-item", { key: 'c5695fa853b6cd50323c0bb19b179e66241f7c6e', value: "camera" }, index$1.h("smoothly-icon", { key: '63fc661e772f7b8f425d1aa3acb7d151169e0ca8', size: "small", name: "camera-outline" })), index$1.h("smoothly-item", { key: 'beaa91042b1183a2fe5eb9f84309cddab6cdaf74', value: "boat" }, index$1.h("smoothly-icon", { key: '9214d9c9c794dc289f1d99e65877a05a92be2c51', size: "small", name: "boat-outline" }))), index$1.h("smoothly-input-select", { key: '9f1f41dce39f38e5fe63e5d771be4ea768732018', name: "select-number", clearable: false }, this.numbers.map(number => (index$1.h("smoothly-item", { value: "number", selected: number === 3 }, number)))), index$1.h("smoothly-input", { key: '73f079ee5dc954e5274c0d4506687186e985ebc7', name: "name", value: "Sten Qvist" }, "Name")), index$1.h("smoothly-input-select", { key: 'f180ea82340d92cfd514a8f02b0610de97955db6', name: "persistent-search", isSearchPersistent: true, menuHeight: "7.5items", searchPlaceholder: "Not here? Type to search." }, index$1.h("label", { key: '0bb5a665c356d9262946b012e97e5ebfa6e3a2cc', slot: "label" }, "Persistent Search select"), this.numbers.map(number => (index$1.h("smoothly-item", { value: number }, number))))), index$1.h("h2", { key: 'aa748593e7a304b916fe003db3574355e861f91f' }, "Duration"), index$1.h("smoothly-input", { key: '6665cf5c786a67bfd315ca5e698201a28ac58bd9', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index$1.h("smoothly-input", { key: 'acc1524d8f3d81b502f152b9c4a4269f04ec28a3', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), index$1.h("h2", { key: 'ed1c66a6809ae277a848826be61161405e712e89' }, "Integer with Min/Max"), index$1.h("smoothly-input", { key: '220dca7d4c2fe1111025b6e44d23a40d105efe89', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index$1.h("smoothly-input", { key: 'e2b1ae2d00b98366ee26f02d37915e319736f002', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index$1.h("smoothly-input", { key: '1ecd944814b02bbd94314507d76bea0f988352f4', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index$1.h("smoothly-input", { key: 'b8990cc9cad14d470ca47ab3c6c04b4f685a0c55', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index$1.h("h2", { key: '2a747aa7ff1fb76fa374c730b59802c8f3a508cd' }, "Invalid text with warning icon and tooltip"), index$1.h("smoothly-input", { key: '817b52d0ef2e31056e8ee8a7faab79990797c732', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index$1.h("h2", { key: 'cd628bebd9e2b9de77eb82b0f9591cfe8d7b3ca2' }, "Identifiers"), index$1.h("smoothly-input", { key: 'fe1d2d89f25cd8a60fd537bfb5a9580548491604', type: "identifier-code" }, "Code"), index$1.h("smoothly-input", { key: '14d47570684ca9165381718becda2f318c9c88bf', type: "identifier-attribute" }, "Attribute"), index$1.h("smoothly-input", { key: 'fb5ed7f2a284640369bf648a548161d233756dd5', type: "identifier-snake" }, "Snake"), index$1.h("smoothly-input", { key: 'cde9cde9c787d99c0eaf75085f0567139b8130c8', type: "identifier-pascal" }, "Pascal"), index$1.h("smoothly-input", { key: '509c743780e2d2f0d759ab3cff67893318256443', type: "identifier-camel" }, "Camel"), index$1.h("h2", { key: '81ea90cb970b799945d3aeb14b70bb8184d911e4' }, "Input Alternatives"), index$1.h("smoothly-input", { key: '01ba72593f0e056a20d87c8722e2bc4317932962', type: "text", name: "name.last" }, index$1.h("smoothly-icon", { key: '70491c3ed08d7f0d13a3cd8eba72e47fa1de1008', name: "checkmark-circle", slot: "start" }), "First Name"), index$1.h("smoothly-input", { key: 'ab3a45839ee4d8bacfac8ca96bcd7ec260ce36d9', type: "text", name: "name.first" }, "Last Name", index$1.h("smoothly-icon", { key: 'a7996638a9ec278f74d967e0fcb03dcaf4445315', name: "checkmark-circle", slot: "end" })), index$1.h("smoothly-input", { key: 'f524fc067947a8637a1c416a74d3de0c37744255', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", index$1.h("smoothly-icon", { key: 'ec440199d9625155037e1cd9e614266748997f7a', name: "checkmark-circle", slot: "end" })), index$1.h("smoothly-input", { key: '27cc6d614a7bae4893462b5e708cb663bcffcec1', placeholder: "test" }), index$1.h("smoothly-input-submit", { key: '789ee37616c3c27e8e6414992be1f9ee2117a5d3', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index$1.h("h4", { key: '5c256926b8f451dca0b5297992f6a6312a2f5494' }, "Smoothly checkboxes"), index$1.h("div", { key: '6650b3b1b27d5fbca72ef5679f03d11c3c5cc1a7', class: "checkbox-group" }, index$1.h("smoothly-input-checkbox", { key: '9030dedf496556b87212376fbd15617f6abebf48', disabled: true, name: "first-checkbox" }, index$1.h("smoothly-icon", { key: 'e3a47da2376066cdfc082fbf4100adf340b70f36', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index$1.h("smoothly-input-checkbox", { key: 'd86dbe0e70d983c82791caf5729ed0510df48b4d', name: "second-checkbox", checked: true }, index$1.h("smoothly-icon", { key: '28505106b36406f9a24fdd0f8f27dea211544f38', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index$1.h("smoothly-input-clear", { key: '7240cc38a40cfe3ca5ee3cdbb5ae971ebbf23efb', size: "icon", slot: "end" })), index$1.h("smoothly-input-checkbox", { key: '64df44307f15d6ca5878b5933b847931973a4bd4', name: "third-checkbox" }, "3rd")), index$1.h("h4", { key: 'd6cd694e036d14b16241a4664ed9e9a6b9257c80' }, "Smoothly Radio Buttons"), index$1.h("smoothly-input-radio", { key: '43f5fe05e6889b3f009a85a996ca9f3df8418d85', clearable: true, name: "radioFirstInput" }, index$1.h("smoothly-icon", { key: '67303cd42725a67937687862934c5eb4efb08617', name: "checkmark-circle", slot: "start" }), index$1.h("label", { key: '20faf3230a26de4d0578cc142212f849447826b0', slot: "label" }, "Clearable"), index$1.h("smoothly-input-radio-item", { key: 'c8f0663f1aca55d837179e535675837b8c5dc486', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: 'f699d87b7edd1e815068671279f6454a071dd26f', selected: true, value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '6c76a26cbcf6c0279ea178a8c2fa5cb70d592614', value: "third" }, "Label 3"), index$1.h("smoothly-input-clear", { key: '146770892b8d84fe6686d7d360b2c119271b068e', size: "icon", slot: "end" })), index$1.h("smoothly-input-radio", { key: 'd15590998dacc095683e2a2149bd4d0008458c6c', name: "radioSecondInput" }, index$1.h("label", { key: '91206150e39f16cc6b63c27e936e0890d085dd3c', slot: "label" }, "Not clearable"), index$1.h("smoothly-input-radio-item", { key: '4be57f196fceca8c421b1a76539383e583815d47', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: '64fb53d589cbc3c41d2716bcd0a94e0852b61984', value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: 'cfd1618ca1085b04f892a0f7c41c3ba015817f8e', value: "third" }, "Label 3"), index$1.h("smoothly-input-radio-item", { key: '5204c85dc39eb90eb2203f7bc95465fd3505e0ee', value: "fourth" }, "Label 4"), index$1.h("smoothly-input-radio-item", { key: '7beb685e25cd77b0c4ee67d52c08d3dda77bbb43', value: "fifth" }, "Label 5"), index$1.h("smoothly-input-radio-item", { key: '2e540abce5ef3a5ef00f9bf66e28d4dcc2dcf033', value: "sixth" }, "Label 6")), index$1.h("smoothly-input-range-demo", { key: '0734d3ef8222645914a3de1baca3a564658155b2' }), index$1.h("smoothly-input-color-demo", { key: '4efc6abf40e3b21f406e0bc0c56e0b1549bf7c62' }), index$1.h("smoothly-input-price-demo", { key: 'bd457e1f8ac312ee0feb1685bee15b7ec9cfd451' }), index$1.h("smoothly-back-to-top", { key: 'a1795f547d9bcfc820f76df3e60f9611a8d654e8' }))));
+            } }, "Duration"), index$1.h("h2", { key: 'ec697e0d8a4c08cf76096f8ecea3cf928ac8ffed' }, "Integer with Min/Max"), index$1.h("smoothly-input", { key: 'd93e6fcb19b42a47bfb083731678f70aa29e6b91', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index$1.h("smoothly-input", { key: '5e08ee5eacadbe550677ed2f80bf120d31f330bb', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index$1.h("smoothly-input", { key: 'dd76431b7c0aab1d449d1008e4b8f304e569981f', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index$1.h("smoothly-input", { key: '9f505d2068e98d936255a2077ce4a7fe10120237', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index$1.h("h2", { key: '0e6dfdc5d485752df47122337bb0e15b052cde03' }, "Invalid text with warning icon and tooltip"), index$1.h("smoothly-input", { key: '0c015c17a330733637adbd5e60fed447f4224456', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index$1.h("h2", { key: '3443f52822907571e8f158e8fbd5ee31db147e0c' }, "Identifiers"), index$1.h("smoothly-input", { key: '04f0103307050d20d7a3c8aac48f872b7bed47a9', type: "identifier-code" }, "Code"), index$1.h("smoothly-input", { key: 'ada6bccee4f18ce4cb4f43bacc170bdcac4e5f8d', type: "identifier-attribute" }, "Attribute"), index$1.h("smoothly-input", { key: 'd1dd0cd0fb145e64da7622e650d08068034234d7', type: "identifier-snake" }, "Snake"), index$1.h("smoothly-input", { key: '6bb9c33e28690ad8ba5910f57f4323b17380bd4d', type: "identifier-pascal" }, "Pascal"), index$1.h("smoothly-input", { key: 'c6d0145666d97941bf4e3cc3f000dcf7df622456', type: "identifier-camel" }, "Camel"), index$1.h("h2", { key: 'a0fd68fd64318c72d4fb5617999eb28434f46acb' }, "Input Alternatives"), index$1.h("smoothly-input", { key: 'b258a367eb583950f4e88462759553304b34ab5f', type: "text", name: "name.last" }, index$1.h("smoothly-icon", { key: '6680c161daaa98a7eefb134fa6ac01e057a4cda8', name: "checkmark-circle", slot: "start" }), "First Name"), index$1.h("smoothly-input", { key: 'c3fbc85c3dd1548a2e13dfefb72e999c2e540af3', type: "text", name: "name.first" }, "Last Name", index$1.h("smoothly-icon", { key: 'b870dd9c6a9ec3c8cff7eb0d72b8ff8d01ff4787', name: "checkmark-circle", slot: "end" })), index$1.h("smoothly-input", { key: '56483f22dadebefc68a137ef7ea47c201455f9ac', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", index$1.h("smoothly-icon", { key: 'ab1a1418475389089a04e781020fdec0843db208', name: "checkmark-circle", slot: "end" })), index$1.h("smoothly-input", { key: '235e4ba12e66afc201a687d67ba68c09e47c6ae3', placeholder: "test" }), index$1.h("smoothly-input-submit", { key: '6cd11548c4da7a358b0c41fc17872173fb5542ed', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index$1.h("h4", { key: '6426ff9a5dcd88a79a0e25f8131a905111e1100d' }, "Smoothly checkboxes"), index$1.h("div", { key: '2ee293c7ee7cc7028cc5a64c7514089f6e513970', class: "checkbox-group" }, index$1.h("smoothly-input-checkbox", { key: '04543bfef656a978cfa97278be15ee98ac340226', disabled: true, name: "first-checkbox" }, index$1.h("smoothly-icon", { key: 'd6364cf232eb21eb05d8c0d2c561b5f83c2bfc22', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index$1.h("smoothly-input-checkbox", { key: '6002b3d4d656de70f45268684091700bb51a34d9', name: "second-checkbox", checked: true }, index$1.h("smoothly-icon", { key: 'a62dede44cee8482cedf454666d74eadcae5b648', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index$1.h("smoothly-input-clear", { key: 'efa5fb6d1c0b98657fcdb2f767a1b540cfbe64c2', size: "icon", slot: "end" })), index$1.h("smoothly-input-checkbox", { key: '7e9bae820feaf07266c5855521656fb77795f213', name: "third-checkbox" }, "3rd")), index$1.h("h4", { key: '5e82e2cabd6bfba777cb525f9327f8d0b44bb0a4' }, "Smoothly Radio Buttons"), index$1.h("smoothly-input-radio", { key: '2f509cac6e45fede44fb781e0d89e3641cbe7087', clearable: true, name: "radioFirstInput" }, index$1.h("smoothly-icon", { key: '3d8d785ab281ced175b9eff30588e456b9d467c8', name: "checkmark-circle", slot: "start" }), index$1.h("label", { key: '7818d1cd7adf436e618c2c1657a9cdb703bd9872', slot: "label" }, "Clearable"), index$1.h("smoothly-input-radio-item", { key: '8dcef2f957dec38a75138907c0f7b90dfd60eb06', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: '8abcba992493b5a48c52e83354accb5cd811600e', selected: true, value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '258b7a4eeed806d90bf532232204c5816138f0e3', value: "third" }, "Label 3"), index$1.h("smoothly-input-clear", { key: '8162121c8509d4dbfa817f8da1ce83e772635eae', size: "icon", slot: "end" })), index$1.h("smoothly-input-radio", { key: '1fb58d1a85229c423cfcdc3cc9dda03e2656a156', name: "radioSecondInput" }, index$1.h("label", { key: 'aa058078296bf6bdb306014dbb2bfff8f4ea4127', slot: "label" }, "Not clearable"), index$1.h("smoothly-input-radio-item", { key: 'a5705cd459d7d23a673bebb2922d96b05886b174', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: 'eaf40dd525cc87eb6945c2f2c13fa3bc88a87b8a', value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '804cab03ddaaa8117ede9be9c64a7702a6a80e9e', value: "third" }, "Label 3"), index$1.h("smoothly-input-radio-item", { key: '5fb7e710781e5fbb151dc7e1375e558f2f5b31d6', value: "fourth" }, "Label 4"), index$1.h("smoothly-input-radio-item", { key: '8eb82275acfeb773ed48a3a16e9185655811f1ac', value: "fifth" }, "Label 5"), index$1.h("smoothly-input-radio-item", { key: 'ca59f13504dabd0cbfe5f990df73b4d1cf3fba40', value: "sixth" }, "Label 6")), index$1.h("smoothly-input-range-demo", { key: 'fb8307d6c518fcb16fe272cbedba69c5a824b631' }), index$1.h("smoothly-input-color-demo", { key: '3a5e50a5f2aee26c49a2f0ffd879f6efe6717697' }), index$1.h("smoothly-input-price-demo", { key: '69c1564a1952541b35af40a5675029b32bc43256' }), index$1.h("smoothly-back-to-top", { key: '574445159a65c986532d39d381a37a606cde04b0' }))));
     }
 };
 SmoothlyInputDemo.style = styleCss$O();
@@ -7152,7 +7152,7 @@ const SmoothlyInputDemoRadio = class {
         console.log("selected", this.selected);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '1d9b9369e8ab2eaef5660633873c4e9d6688446c' }, index$1.h("h2", { key: '3ce4a937fed4e899be4becf616b328eb3bbf6807' }, "radio input - column direction"), index$1.h("smoothly-input-radio", { key: '3f99a12df3e65d6e43ca7c1f592dc4c358b4f173', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, index$1.h("smoothly-input-radio-item", { key: 'feda533691060ea6c92b08268e5ce977b535e8cb', value: "1" }, index$1.h("span", { key: '3635ace507b96b4596f612244f47bd52fa4efbde' }, "Option 1"), index$1.h("span", { key: 'fed88b7f85dcb5f40bd76defb20d337945ae1973', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), index$1.h("smoothly-input-radio-item", { key: '4973ad139be68dadadf3632b10734a70cd9dadec', value: "2", selected: true }, index$1.h("span", { key: '0c00fc9d3fe743d98322e37b04d250207ccb86dd' }, "Option 2"), index$1.h("div", { key: 'd2eda29ea9aabb04c4f017b7cb9f3500033efc38', slot: "detail" }, index$1.h("smoothly-tabs", { key: 'df82602edfa7865c748dfc801b275ee6ad420798' }, index$1.h("smoothly-tab", { key: '5d0d4ad5de30797b4146bbd3b49f3d437eeb7be0', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), index$1.h("smoothly-tab", { key: '96c1e24f24443f3ca5ed9110c1f61bfe83e77922', label: "Cat", name: "cat" }, "\uD83D\uDC08"), index$1.h("smoothly-tab", { key: 'fec1d4386c7221ed7164f89b0c4b74caac413a54', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
+        return (index$1.h(index$1.Host, { key: 'c5f13f1f1719524fa54e2b506974c031693361a2' }, index$1.h("h2", { key: '16b9142736583c06f5d4fdccb7f2cb3883ad15b2' }, "radio input - column direction"), index$1.h("smoothly-input-radio", { key: 'fd8665109263a23b2a8b1f57888388cb232f1307', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, index$1.h("smoothly-input-radio-item", { key: '7509bdba2358b4ce60e121dfaa76874ad388f6a0', value: "1" }, index$1.h("span", { key: 'd8ed1cf2ba7e979239e35286b561151f81ffe220' }, "Option 1"), index$1.h("span", { key: 'e87b5fb84fef10c368acc6ed0dc77a5dd2f6e2c5', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), index$1.h("smoothly-input-radio-item", { key: 'c76b0016d8f9c519166b121642bea547a0f1ca19', value: "2", selected: true }, index$1.h("span", { key: 'e573119b6a2be32a078de84bc4941f1f3a9ee76c' }, "Option 2"), index$1.h("div", { key: 'f7b4e4bcf85bd8cacc52d119e6cae9925fb6474a', slot: "detail" }, index$1.h("smoothly-tabs", { key: '75bf5aafdbd8f4186f70f12af13c4bbbdc4e6a43' }, index$1.h("smoothly-tab", { key: 'c02c4b6d471fb5b37dff0758b53d5dde4e1b705a', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), index$1.h("smoothly-tab", { key: '83e8e9179dac5f74d87ca5c9011a77d2c8185b3d', label: "Cat", name: "cat" }, "\uD83D\uDC08"), index$1.h("smoothly-tab", { key: '4be8b9bc53065ed86c0a46b337aeb961bd040006', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
     }
     static get watchers() { return {
         "selected": [{
@@ -7184,7 +7184,7 @@ const SmoothlyInputDemoStandard = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '54cf2b88dfb0ae3326c332e0d608b5e2aab4e2af' }, index$1.h("div", { key: 'c549a1f2bf55faa1db79e85170fd5106269400d0', class: "description" }, index$1.h("h2", { key: '4cd8be6f457b84c4363c93262a0a8c57d6ad794a' }, "Input Standard"), index$1.h("p", { key: 'd704b09fb11c51a92fa618c106039ed01695ce58' }, "Height of input should be ", index$1.h("code", { key: 'abee88ddb4d762af1cde9a6f7c94ad13fd069152' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index$1.h("smoothly-form", { key: '0922d6713e44cffa51cc253e94fb1ae98a823f24', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index$1.h("smoothly-input-select", { key: '1cdba85a6cddb32a49a763394b8cdb7b36d2c24a', name: "color" }, index$1.h("span", { key: '58013cb8ab43cc7cc05f6ab58670ec5f41eab179', slot: "label" }, "Color"), Scrollable.Color.values.map(c => (index$1.h("smoothly-item", { value: c }, index$1.h("span", { color: c }, c)))), index$1.h("smoothly-input-clear", { key: '0eae109840ebc9b0101fb08f7daa61253826da9c', slot: "end" })), index$1.h("smoothly-input-select", { key: 'f48cf9bd8f86d1eb5e68e3383bf9178ea27b5f22', name: "looks" }, index$1.h("span", { key: 'd6f665f4cbc8e871229312e611180bc0bf9607d1', slot: "label" }, "Looks"), Looks.values.map(l => (index$1.h("smoothly-item", { value: l }, l)))), index$1.h("smoothly-input-range", { key: '955d191d8da75e9dace4c57e6f6f3d427bdac864', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), index$1.h("smoothly-input-checkbox", { key: 'cbd64dab264df038bf40efa6c2d8733f6c767185', name: "readonly" }, "Readonly"), index$1.h("smoothly-input-checkbox", { key: 'e5a2a80fba021019871563ac7197360060ccb451', name: "disabled" }, "Disabled"), index$1.h("smoothly-input-checkbox", { key: 'f1bca93555a7cc9fa7a56a39e6bbdfc5b7570edc', name: "invalid" }, "Invalid"), index$1.h("smoothly-input", { key: '15361ba7d104e800e627aebc52d8fff1623782b9', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index$1.h("smoothly-input-checkbox", { key: '649cc21e6575e27e765e17443678f14ac73ba84f', name: "showLabel", checked: true }, "Show Label"), index$1.h("smoothly-input", { key: '59125e661fdf79f98c9d5a0f8f2c97eeb52f2b52', name: "placeholder" }, "Placeholder"), index$1.h("smoothly-input-checkbox", { key: 'bc3803d7f0e97f5f8b7c863153aa0ce0d382e1de', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), index$1.h("div", { key: '44d87477325a59e8b62c1f7ce3a29cdc29705916', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index$1.h("div", { key: '0adfeb398a2f6f969d206cb46eb4776808fd4fc9', class: "width" }, "width: 100%"), index$1.h("div", { key: '1e617acd8e12c75a00259062602a8ef8775651cf', class: "left-padding" }, "padding-left: 0.5rem"), index$1.h("smoothly-input", { key: '9521d2afdc06788925f96c2d0702fd3f00466359', 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 && index$1.h("span", { key: '75e835255286d02e1b8185902b4df7fc2b0a1147' }, "Text"), index$1.h("smoothly-input-clear", { key: 'ddd739321caa1aad97518efcde5068fef178b456', slot: "end" })), index$1.h("div", { key: 'a4ad7dae327fc4cf6fb5caa803f388f31d06ecff', class: "height" }), index$1.h("smoothly-input-select", { key: 'f231934cefc5d3821b6f520e72ce616c8df1edf2', 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 && index$1.h("label", { key: 'a2b4eebb1dea9f2d1b22fd1be6b93a93b0597f7c', slot: "label" }, "Select"), index$1.h("smoothly-item", { key: '1fb2b0202b27ce56ca8e2fa06caed522ff0b5b3a', value: "1" }, "January"), index$1.h("smoothly-item", { key: '72aa6742664a98052cc7141e5a687b1cf813faff', value: "2" }, "February"), index$1.h("smoothly-item", { key: '27a92cf4d1d270763606d11a1b2b863d714a18b9', value: "3" }, "March"), index$1.h("smoothly-item", { key: '376e37b6c878d72052c0567c7ea8c5ddaedde42c', value: "4" }, "April"), index$1.h("smoothly-item", { key: 'ee5cb30a384b68ac775d4f2dd14d999876cc6e01', value: "5" }, "May"), index$1.h("smoothly-item", { key: '1cccb653d2ba1e1c26f71b9d6d8d21b10c21640b', value: "6" }, "June"), index$1.h("smoothly-item", { key: '53d755ca36cda89d4940b7870a2deab407b4aa8e', value: "7" }, "July"), index$1.h("smoothly-item", { key: 'bd2d030a7572e8deab0c4fb4bb5d46909e2152f5', value: "8" }, "August"), index$1.h("smoothly-item", { key: '4aced24179d7ea64fd2e2974d121ede5530cbc4e', value: "9" }, "September"), index$1.h("smoothly-item", { key: '175e1169c83cc572769b74b6e3423ed8c2cf16ff', value: "10" }, "October"), index$1.h("smoothly-item", { key: 'c9c658f19451bb0fa45deb3b1474ea26d303ec6d', value: "11" }, "November"), index$1.h("smoothly-item", { key: '02072c3b0f758a906a37c389d74dc9d1f5afd448', value: "12" }, "December"), index$1.h("smoothly-input-clear", { key: '363af4a49d65196a12635c968b2c8c4af91a056f', slot: "end" })), index$1.h("div", { key: 'c81bee8b491579b8707397127ecbf54f3539034b', class: "height" }), index$1.h("smoothly-input-checkbox", { key: 'edf6953cc408b492b44e68c62607a530a8874438', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", index$1.h("smoothly-input-reset", { key: 'eb5e4c9ac0a1589a42aa19923232cfe13fa64361', slot: "end" })), index$1.h("div", { key: '97202244d11753ea46184bec8c5b9dfe31e2e0d3', class: "height" }), index$1.h("smoothly-input-radio", { key: '8302f3b0ed032f66c75c286b4f0cf4aae285c35a', 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 && index$1.h("label", { key: 'cd39ed8dc900e22b6efa93e2ef5b4255dad1660d', slot: "label" }, "Radio"), index$1.h("smoothly-input-radio-item", { key: '8bb8c65b1e90e4e442de1d1329965112667d2eba', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: '933fbb50487b72cd8f1ecc196547de5aee5e1e3a', selected: true, value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '6ae375b8ea906bc5f8cfa8f8407a9aee8eb29ab0', value: "third" }, "Label 3"), index$1.h("smoothly-input-clear", { key: '78c245bd8bf62b9df6937d572f3f815e84cd9bd3', slot: "end" })), index$1.h("div", { key: 'f5df508ced55175718eaa0f19431f900ff0d2788', class: "height" }), index$1.h("smoothly-input-file", { key: '5d4ae4418d3f7013cf22f8fb0f78bd93f0ecb979', 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 && index$1.h("span", { key: 'd462612c0e9e13643f4a7df616edcbee8f006b1d', slot: "label" }, "File"), index$1.h("smoothly-input-clear", { key: 'ffc7bd441f3dff66eacb3ed51f5844d63aee7ef5', slot: "end" })), index$1.h("div", { key: 'c29124164ed913c99cfe804486c354ffa7653132', class: "height" }), index$1.h("smoothly-input-range", { key: '6aa933677354590b9ddd1f95fea3a1cf541f7696', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, index$1.h("smoothly-input-clear", { key: '46d9c421bf413d7af9f4a8d2cdd695600af7ded5', slot: "end" })), index$1.h("div", { key: '93acf05936faabd3aa658e2ea7bb9dcf012d908d', class: "height" }), index$1.h("smoothly-input-color", { key: '93b1fe1b0383b938248d54827bf9983a9914b3ef', 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 && index$1.h("span", { key: 'b796f92deb8e0d60d1ac58cd8106009e2ed1c2cd' }, "Color"), index$1.h("smoothly-input-clear", { key: 'b28f8a1870a419d0afe6cfa8e0f9fc7302909e86', slot: "end" })), index$1.h("div", { key: 'aea88b754fff22bae5ab652fbcd1a41d9c8cf895', class: "height" }), index$1.h("smoothly-input-date", { key: '1c910d8bc7eb1d7348afc5206d6d934e645cec82', 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 && index$1.h("span", { key: 'ba7c7b9530c8890283b2357bb21e92bc25d64f7f' }, "Date"), index$1.h("smoothly-input-clear", { key: '6abc2e55907861115339e3e13171751c0db11bac', slot: "end" })), index$1.h("div", { key: '164956934ba95e7edaf0631840da001d195ac246', class: "height" }), index$1.h("smoothly-input-date-time", { key: '6cfe15912a517a36a9398bb9aaa8bf0d18a67171', 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", index$1.h("smoothly-input-clear", { key: '79304b822a99ca3c24573e6383bf53855352ce0e', slot: "end" })), index$1.h("div", { key: '8a7d1e32a5e7599813f9e3e1c6e53ccfcb0ac546', class: "height" }), index$1.h("smoothly-input-date-range", { key: 'ad46ae4f0436a0387daf5a8f4dd9f408d96454f8', 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 && index$1.h("span", { key: 'f2855738add5a20423d72a6faeacf9184feb27af' }, "Date Range"), index$1.h("smoothly-input-clear", { key: 'f84b6db52dafa6b2c85f8cb807daf0c6199007a1', slot: "end" })), index$1.h("div", { key: '54f5a41d2d404c7d17ab212ddbd07c85a2b45966', class: "height" }))));
+        return (index$1.h(index$1.Host, { key: '565969b29cb4026161d464de5f1098867eb349da' }, index$1.h("div", { key: '8dfe9097349f2a7e7d6213f21148451d67f3a2dc', class: "description" }, index$1.h("h2", { key: 'ab251407c1b18d95ab4acd9c2a16ce528b8e1916' }, "Input Standard"), index$1.h("p", { key: '9991d8aa06f8c0315473506dc96abea6c32a95f5' }, "Height of input should be ", index$1.h("code", { key: 'f35b5bae310077317f25a440dee0fb91b7ad1c49' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index$1.h("smoothly-form", { key: '834178266280b7dfe37ab9294846ce7344f7ffa2', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index$1.h("smoothly-input-select", { key: '173b6aa75c138f16a6f39a8153c53520e1cb4667', name: "color" }, index$1.h("span", { key: 'ca1d64b4cdbc55de31e0b8e3debba0bcb1062283', slot: "label" }, "Color"), Scrollable.Color.values.map(c => (index$1.h("smoothly-item", { value: c }, index$1.h("span", { color: c }, c)))), index$1.h("smoothly-input-clear", { key: '725b080604c10861eca04ffb2b031743f7dde0c7', slot: "end" })), index$1.h("smoothly-input-select", { key: '3b095e076235b0bd7c8668def6b357a807e573bf', name: "looks" }, index$1.h("span", { key: '8394ea2aaa44301db48cbf85539721b76bfcae8c', slot: "label" }, "Looks"), Looks.values.map(l => (index$1.h("smoothly-item", { value: l }, l)))), index$1.h("smoothly-input-range", { key: '04621b7e3fe74a983f5827cfbbf7dffd62c01b0d', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), index$1.h("smoothly-input-checkbox", { key: '7845252b0f9628b6c8ddaaddf6e603b5c793a564', name: "readonly" }, "Readonly"), index$1.h("smoothly-input-checkbox", { key: '11160109586cc4bff53de12230c200a739bb2855', name: "disabled" }, "Disabled"), index$1.h("smoothly-input-checkbox", { key: '38a61ebe5da7cc5fafc56cf311ed821c66ad58d3', name: "invalid" }, "Invalid"), index$1.h("smoothly-input", { key: '7371362ea0fe16f777d816ed26c2bbd96b9c6531', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index$1.h("smoothly-input-checkbox", { key: 'e405da1dd51a6b741fd284e3b84fd272bff1e5f5', name: "showLabel", checked: true }, "Show Label"), index$1.h("smoothly-input", { key: 'c9042135f21280ad38eae8ea1b15e810650a34cb', name: "placeholder" }, "Placeholder"), index$1.h("smoothly-input-checkbox", { key: 'c43ee5611eed8d05392b8af7bb51289cc7c81252', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), index$1.h("div", { key: 'bbeb50ec5367e51297a5636d7e98b19e1e943079', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index$1.h("div", { key: 'ab3ed4cd95f58bcdeee1a606ca93228a80a23e60', class: "width" }, "width: 100%"), index$1.h("div", { key: '1c0e7739a2c085b5795143700e407b75b00c4119', class: "left-padding" }, "padding-left: 0.5rem"), index$1.h("smoothly-input", { key: '66c1e55882d9eac4827a612f1e2bc23d647ab3e5', 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 && index$1.h("span", { key: '138636342ba55fe7123c2c2a6c20d9dfb4ee5f60' }, "Text"), index$1.h("smoothly-input-clear", { key: '3b3a28fb80a525f59eb268807b2343c0719af331', slot: "end" })), index$1.h("div", { key: 'e5ae5e25f0e038678c2e51c5de7b15df9f50995e', class: "height" }), index$1.h("smoothly-input-select", { key: 'd4e65e0e5ec3ffa9a20982853b8ec4eeccf944d9', 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 && index$1.h("label", { key: '6aebe9d702f31518eaac40a18d5fd576c59e9375', slot: "label" }, "Select"), index$1.h("smoothly-item", { key: '3313ee1b456498764ec67d2c315d341188be997f', value: "1" }, "January"), index$1.h("smoothly-item", { key: '8f401f914c7dba15ff927d0630b4f981b46fbff5', value: "2" }, "February"), index$1.h("smoothly-item", { key: 'e92167e28806a39e68648aa87b9c4b428f0c22c8', value: "3" }, "March"), index$1.h("smoothly-item", { key: '2ed2bccc780279cdeb5c9ec14ee774547735bb3b', value: "4" }, "April"), index$1.h("smoothly-item", { key: 'f4c9e6138ec0f470b86057cc8f472d14ea38a6ee', value: "5" }, "May"), index$1.h("smoothly-item", { key: '86666e444e49a4fad6a0e62d7572159a7b530cd5', value: "6" }, "June"), index$1.h("smoothly-item", { key: 'aa409f39093a8c2cdf8577834928d62b94a82a5c', value: "7" }, "July"), index$1.h("smoothly-item", { key: '98ca4aefcc72bb0b62f9fef6a2a06d97fa19c636', value: "8" }, "August"), index$1.h("smoothly-item", { key: 'ac4236a6dc21b2b52b57b983a622552751321aed', value: "9" }, "September"), index$1.h("smoothly-item", { key: 'b6aa81c1adc8b28bc306f850b3b35f3d01026935', value: "10" }, "October"), index$1.h("smoothly-item", { key: '9067b78e9a5c8024321ed20c9c11403f6171124e', value: "11" }, "November"), index$1.h("smoothly-item", { key: 'f4a2448b92497773440a7602f96c2f007bba6bf4', value: "12" }, "December"), index$1.h("smoothly-input-clear", { key: 'bda865a858903d63b0c0f3b599aabdfbd11ff906', slot: "end" })), index$1.h("div", { key: 'c4c21ffe5abb9a278e58495d148488cb2fa0efb7', class: "height" }), index$1.h("smoothly-input-checkbox", { key: 'd329acedf41e7a97dbd9722b47b0bbb685c03fd1', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", index$1.h("smoothly-input-reset", { key: 'b65bbc409d050d7530a141d0ba27b67a9ef02b95', slot: "end" })), index$1.h("div", { key: '6ce56c0613de52c5e7ea9cca1625386d36e39c9f', class: "height" }), index$1.h("smoothly-input-radio", { key: '9ac8654a0369a7a3e1f5d4e6021d19f65c481151', 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 && index$1.h("label", { key: '834e8faeb267255422065b193872a9a55e8f21fa', slot: "label" }, "Radio"), index$1.h("smoothly-input-radio-item", { key: '6a9c64355615f74973d23d31d226a41653cf04f0', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: '90aeffb2a08bb1a4ead6fac140022e1fbb6562de', selected: true, value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '659a872eb48ec26a4dfdd8865b79d47378d266b6', value: "third" }, "Label 3"), index$1.h("smoothly-input-clear", { key: '2b852706751a90a1954596dbeeabc7d10c1e62a3', slot: "end" })), index$1.h("div", { key: '35ae222dd32c0a24f5047c589b1240b3e1dbadc2', class: "height" }), index$1.h("smoothly-input-file", { key: 'd2c1b6df5cf570bf46874c9472ed3ceef60729b8', 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 && index$1.h("span", { key: 'c076b435acdd7a14a6a377bb3f9772904736caf7', slot: "label" }, "File"), index$1.h("smoothly-input-clear", { key: '20e32d6fbac42c4617b5aaffca12f1e68f09156f', slot: "end" })), index$1.h("div", { key: 'bf99bffecc00feebaa1027ec7f99bcd51d7661f6', class: "height" }), index$1.h("smoothly-input-range", { key: 'e266bbb8ceb3dcf33bbe745d43a108d40fe97d96', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, index$1.h("smoothly-input-clear", { key: '329f737f8c88d1c68f62d0227293cbff2668b903', slot: "end" })), index$1.h("div", { key: '5f5e44e62c2658812f79fff1ceb47f2fc70e0018', class: "height" }), index$1.h("smoothly-input-color", { key: '8c39c11aa2d6551e67658f6b17a2be577bfc0be2', 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 && index$1.h("span", { key: '69ff977d1d74c9c1575930668cdd8cd25c63cb7a' }, "Color"), index$1.h("smoothly-input-clear", { key: '62ef604e4ac15e5808151c44d951c9ee14fcfcc4', slot: "end" })), index$1.h("div", { key: '5f2cf9fcffd64dc04a7f92c812e8eb74d4574d7b', class: "height" }), index$1.h("smoothly-input-date", { key: 'f9778ed78fafb18e5786c522a3dbac2b8a29941f', 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 && index$1.h("span", { key: '71cd8a2aaff8724eb2cd1f61312939cde42628ba' }, "Date"), index$1.h("smoothly-input-clear", { key: '3a457f21009edb59edda1486cd15861e3f477441', slot: "end" })), index$1.h("div", { key: '1adc30f659052cc8a4bcb39d9f7ae9ee098c8d46', class: "height" }), index$1.h("smoothly-input-date-time", { key: 'dd2744ca25ad41f47e74c1fcdcd18a35d6727cab', 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", index$1.h("smoothly-input-clear", { key: '79d65744abdb53f4ba552e804ed8c4b7876289a5', slot: "end" })), index$1.h("div", { key: '0c9fa58c169272bc1cfe98760c977d898123f195', class: "height" }), index$1.h("smoothly-input-date-range", { key: '8d0530766b4278c9a0e1bf752c5201a8a1150cb8', 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 && index$1.h("span", { key: 'ced591c321b40cb26ac60adc79c9aef515ba84d4' }, "Date Range"), index$1.h("smoothly-input-clear", { key: '126e55235695f0e2ce4bee0c4a9f51699dd9ef63', slot: "end" })), index$1.h("div", { key: '30cfa18368611c241479cbfc0f6c4de2067a0e41', class: "height" }))));
     }
     get element() { return index$1.getElement(this); }
 };
@@ -7203,11 +7203,11 @@ const SmoothlyInputDemoUserInput = class {
     }
     render() {
         var _a, _b;
-        return (index$1.h(index$1.Host, { key: '3835c578ea7d246169e793bf4aa2c7a51fa5363d' }, index$1.h("div", { key: '7b58c28df58685c05871b3b2e0ac1be312929ade' }, index$1.h("h2", { key: '51ad8ea9e3aac7d2b86c8fd174f3e9a48697c15e' }, "User Input Event"), index$1.h("p", { key: '47cea5b74881ab7616adfae6ebce65da42dbb313' }, "These inputs demonstrate how user input is handled. The ", index$1.h("code", { key: '2866d17687a295b23b453f5b1379e5e66bcbff41' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", index$1.h("br", { key: 'e16f064c937a6f9308630304c583ea341f832ad9' }), "Check the console to see the details of each ", index$1.h("code", { key: '78979ae82ed46d5a06a595e02df97ba33c89d2c0' }, "smoothlyUserInput"), " event.")), index$1.h("smoothly-button", { key: '138b41ca59399b09ff53e52b129ae97748ed387f', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), index$1.h("smoothly-input", { key: '7d09fa4861e311009ab12e3c60002de3301927ec', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), index$1.h("smoothly-button", { key: '0d502c95cb5db26bdce3ba41d15556da80d64433', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), index$1.h("smoothly-input-select", { key: '435dd06d5ce59811c106ca7c69b6dfa1be50c12a', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index$1.h("span", { key: '33a6bd3e72cf03ec750a14924a837b7e684a8773', slot: "label" }, "Select input"), this.values.map((value, index) => (index$1.h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), index$1.h("smoothly-button", { key: '21adcb09ac47b9478957c45905170a860c49e1a8', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), index$1.h("smoothly-input-checkbox", { key: '359e7c7c033b09f9245ebc6be57bd34219d78ecf', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), index$1.h("smoothly-button", { key: '51fa448a76d00d5f1998ad57f03d21a054e8113a', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), index$1.h("smoothly-input-radio", { key: 'b59321ca66af38b90a01d2eb3d0e17f18a904095', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index$1.h("span", { key: 'fc5fb9f656c6c6e999a552dced58d28a8acd1ef8', slot: "label" }, "Radio input"), this.values.map((value, index) => (index$1.h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), index$1.h("smoothly-button", { key: 'b200be8a41c98d4f219a9f3530f3558fa971689c', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), index$1.h("smoothly-input-range", { key: 'dd284aa8c1ea6ad1cf4f0881250c105cb2a6ff0c', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), index$1.h("smoothly-button", { key: '20cc5a84fa556220aef39a2ae15ae412ea2fef0c', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), index$1.h("smoothly-input-color", { key: '7590af1c0425b6219743d81726e05164b970187c', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), index$1.h("smoothly-button", { key: '3b3cc2b584fc194bd1386a710cbbbbf50e2968fc', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? index.isoly.Date.next(this.dateValue) : index.isoly.Date.now()) }, "Next day"), index$1.h("smoothly-input-date", { key: 'f38b4dd2f3e9bbf56f998ba8ede15b3c47b8dfee', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), index$1.h("smoothly-button", { key: 'dc47c4b5003bfe3c2b9408d56a2b0646fa7d60b9', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (index$1.h(index$1.Host, { key: 'f2a4d41e58f06ede6a72fb3f8b172ffba324ba1d' }, index$1.h("div", { key: '6730bc3f89a2d8a01d2225b520709d8ccf3e7890' }, index$1.h("h2", { key: '8894c809fd95504f8f01579a11a975b8f143c656' }, "User Input Event"), index$1.h("p", { key: '741a6f7d9baf8b8bda50330141d87a0160d7bacb' }, "These inputs demonstrate how user input is handled. The ", index$1.h("code", { key: '467a82db0e06629f333754223ce39645339d777d' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", index$1.h("br", { key: 'ab05e1e07d915dbc118a72a9bdd0e6a091bb21f1' }), "Check the console to see the details of each ", index$1.h("code", { key: 'efa4627f8e89c03732e2dcab4d1fdce5d0ac1ef6' }, "smoothlyUserInput"), " event.")), index$1.h("smoothly-button", { key: '2dd9580d4ef091d5c2c6a0591b9318ebb7359fe2', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), index$1.h("smoothly-input", { key: '0f616b3fd91d0b759f3dbb5d8c8c3ff8f46347b8', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), index$1.h("smoothly-button", { key: '190d254c825bd58806a35853aff82a48a7e80f7a', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), index$1.h("smoothly-input-select", { key: '1f8241f1cbd29d9c72b91c064d00960fcf8e67be', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index$1.h("span", { key: '0ee1caf5240b16279f225e77c61eec8ddfa9af96', slot: "label" }, "Select input"), this.values.map((value, index) => (index$1.h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), index$1.h("smoothly-button", { key: 'ab912c84539c520b0822afcba1f467ad486a3502', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), index$1.h("smoothly-input-checkbox", { key: '4561b0608b11b9da9acaa0dd48d80284994bbdba', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), index$1.h("smoothly-button", { key: 'aaae7c8f2458babc9631388b0e968528fd138148', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), index$1.h("smoothly-input-radio", { key: 'f70403edaf65e8ff1358461a0d773e1aaeee8718', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index$1.h("span", { key: '9c8c3237fdf0ff4aac2dbbf6c7c1b9832993929b', slot: "label" }, "Radio input"), this.values.map((value, index) => (index$1.h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), index$1.h("smoothly-button", { key: '8eae0440201647bbceb3ad3464ddadbaefc4ea38', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), index$1.h("smoothly-input-range", { key: 'ff18785f22364aa89c709f0a156c3c824e802a26', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), index$1.h("smoothly-button", { key: 'd6bdc4a1471dccd98a001044bf22375e38c11279', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), index$1.h("smoothly-input-color", { key: 'c65c8a43e19bb1502da3098d57288d139ffe2faf', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), index$1.h("smoothly-button", { key: '6d0f8d7e46b889fcbc94d5dd79b274fc623cd7ba', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? index.isoly.Date.next(this.dateValue) : index.isoly.Date.now()) }, "Next day"), index$1.h("smoothly-input-date", { key: '3e2c83fc75562f0d755cb5440bc2d1aa539dcde9', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), index$1.h("smoothly-button", { key: 'c9db4d875e2fcb1f913fcd941f6d9ba9eb6393ee', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? index.isoly.DateTime.nextDay(this.datetimeValue)
-                : index.isoly.DateTime.now()) }, "Next date time"), index$1.h("smoothly-input-date-time", { key: '564c412728fabb0a62c8344fb4f8f833805eda2a', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), index$1.h("smoothly-button", { key: '4028e3bc5a9625b4c0d302c1e856f618bf59fb22', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : index.isoly.DateTime.now()) }, "Next date time"), index$1.h("smoothly-input-date-time", { key: '2a582db04d01beb54682436d3663a0adeeeb897f', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), index$1.h("smoothly-button", { key: 'c1623f533dc310005f206282f3ba11a6697b15ca', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: index.isoly.Date.next(this.dateRangeValue.start), end: index.isoly.Date.next(this.dateRangeValue.end) }
-                : { start: index.isoly.Date.now(), end: index.isoly.Date.next(index.isoly.Date.now(), 10) }) }, "Next date range"), index$1.h("smoothly-input-date-range", { key: '6416081389e857c3c18d2fad0dc11159a2aa93a6', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
+                : { start: index.isoly.Date.now(), end: index.isoly.Date.next(index.isoly.Date.now(), 10) }) }, "Next date range"), index$1.h("smoothly-input-date-range", { key: 'f884728adae7e57072deef782aab61f8b57d8147', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
 };
 SmoothlyInputDemoUserInput.style = styleCss$L();
@@ -7240,7 +7240,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '5a29f86218e6badfd620668a6c506fd9a028710d', title: this.tooltip }, index$1.h("smoothly-button", { key: '3fd484afcf17e8fd985b38fbc0b04c4520e584c5', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index$1.h("slot", { key: 'b3c2a52b3b1548816d6c6ff935cf0aa61acbfa64' }), index$1.h("smoothly-icon", { key: '3858475de79ce842dd4c1e5b7007281d7af36d5d', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index$1.h(index$1.Host, { key: '66d55a905800c79f0233f8b6bdecabaad8cb1f1c', title: this.tooltip }, index$1.h("smoothly-button", { key: 'b0223593b49e61f9a6c4b3bd2401318493e6c1eb', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index$1.h("slot", { key: '0b70d6c8b09bcdd5925ee9f68bcdd4d9da849cf0' }), index$1.h("smoothly-icon", { key: 'dc4374413867b160df4d4f7bdeda25fded4fd59c', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = styleCss$K();
@@ -7356,7 +7356,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index$1.h(index$1.Host, { key: '6ea6dc53a6eb337bb6c5f87535cfbb4cc51d4233', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index$1.h("label", { key: '8d1c4b21e5dcf4dc4e4c02a5d6492964fa25df0a' }, index$1.h("slot", { key: 'd29618d938fa828877f7bc08885c8ae0ddb84583', name: "label" })), index$1.h("div", { key: 'ad66b522311cf41cf03477c9e6eb3654f5c5acc2', class: "input" }, index$1.h("smoothly-button", { key: '11e2a2d526d1667817115fa8145353b0fc8ea4c1', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, index$1.h("slot", { key: 'ddea3b18a6d43d4347da9a9c6b0b3657399f4ff5', name: "button" })), index$1.h("span", { key: '5390e1365f1d6d46828330d0a25917f973a90b59' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index$1.h("div", { key: '1056e639ed54e7945ac316122deb893415d0f427', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index$1.h("smoothly-icon", { key: 'fc737003eaa5939ca734fb56961a5652500ae663', name: "document-attach-outline" })), index$1.h("input", { key: 'b4e6d41f124ee2eb3b9348cc91fda0ec9df3be48', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index$1.h("span", { key: '02db98c3712e669dc3934be7f148746744dbaae3', onClick: (e) => e.stopPropagation() }, index$1.h("slot", { key: '0fa43441ac10f081ecae36f6a56d199534e72de1', name: "end" }))));
+        return (index$1.h(index$1.Host, { key: 'd63c83a8c7d482b7c210c1fded958380954f3b82', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index$1.h("label", { key: 'cf5fa329f49e4872149c93e8efc9f83878a89bac' }, index$1.h("slot", { key: 'efe68f3fba462c6b2a9ef1a597ea4eb49f0e504c', name: "label" })), index$1.h("div", { key: '8e34635be73902eaec3468afb87680daf40ac39e', class: "input" }, index$1.h("smoothly-button", { key: '23f3be8ca6a8bd78a261ebc79802d7a817a6f4e4', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, index$1.h("slot", { key: '51844c80711695c452a2dd651b7c6c1536daab2f', name: "button" })), index$1.h("span", { key: 'bdb73c10af8ccf56429e0c5e5e8a535f9059ccbf' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index$1.h("div", { key: '818709c47b75b7ca86af458c911b2836541a3a88', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index$1.h("smoothly-icon", { key: 'b12c7d64c0b184214abd9b102f7a35c871dfee0c', name: "document-attach-outline" })), index$1.h("input", { key: 'a636dedfdb289f59476fe9310abaf1d1045c90e5', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index$1.h("span", { key: 'cde8d6765cf6e954504878ffd787df8796c553ec', onClick: (e) => e.stopPropagation() }, index$1.h("slot", { key: 'd258247cd13eddc30354c1f10322b82636b7eab2', name: "end" }))));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -7482,21 +7482,21 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index$1.h(index$1.Host, { key: '6961d2bfa73e6ebeac106cb5e20a67c33db81757' }, index$1.h("smoothly-icon", { key: 'ae629d1af60656eed05f26e61aff23a7659b1cce', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index$1.h(index$1.Host, { key: '24ca26112a36f8f6337339152021cd5acfd04408' }, index$1.h("smoothly-icon", { key: 'a67121015379d6a0faadf6eb869324bbfdbd146e', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index$1.h("smoothly-input-select", { key: '8abd101ed10fdf906cbc5ce558bfd520b7149304', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index$1.h("smoothly-input-select", { key: '14f7906ad5a9ba3e91afec77d8bd841fc1df5f23', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const month = e.detail.value;
                 if (month && index.isoly.Date.is(month)) {
                     const value = index.isoly.Date.firstOfMonth(month);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, index$1.h("div", { key: 'f207c4c4078b0e06b9271e84f9a9c13acfe375e5', slot: "label" }, index$1.h("slot", { key: 'c3e5b86f8de7a94027625c455ca90a410a6e0376', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : index.isoly.Date.now(), this.min, this.max).map(year => (index$1.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index$1.h("smoothly-input-select", { key: '1681d220124e615137b47fa559b029a7e0a9d817', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, searchDisabled: true }, index$1.h("div", { key: '975e5cf4e7044d3fe0c59eaec95ca4df60b94a84', slot: "label" }, index$1.h("slot", { key: 'f643c99feb9f9c44a45f3edf8e92e053a59ddf34', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : index.isoly.Date.now(), this.min, this.max).map(year => (index$1.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index$1.h("smoothly-input-select", { key: '660d45c6f7d8a8e1f0922be07103f9b3af6cdc5b', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const year = e.detail.value;
                 if (year && index.isoly.Date.is(year)) {
                     const value = index.isoly.Date.firstOfMonth(year);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, index$1.h("div", { key: 'fc7d8b8bcaf3fb5d1f3751cfee4d50d7c8933651', slot: "label" }, index$1.h("slot", { key: '4f60fb1c4b5f8a17e4c27f614201f1e024dc2f30', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : index.isoly.Date.now()).map(month => (index$1.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index$1.h("smoothly-icon", { key: '9a79babdcef483316c46a524a66c48c7f32fc490', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
+            }, searchDisabled: true }, index$1.h("div", { key: '54ec84b0ce44034e6443f540d8db2e2ab04b20e9', slot: "label" }, index$1.h("slot", { key: 'cc8ef88cf3edc267fe0e8a61222d779df6b91075', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : index.isoly.Date.now()).map(month => (index$1.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index$1.h("smoothly-icon", { key: '82ebdb05ec217778b024e7ab30b641c4ce1e5a91', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -7529,7 +7529,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '2643df3e90deb2ae7492de2e95307210c9d96a1a' }, index$1.h("h2", { key: '8d7c08032c0fd5d42ea0a4b83bbc789ee12ad60c' }, "State demo on smoothly-input"), index$1.h("p", { key: '7bd734e458356493b22a048bf6b3cc33eb089a88' }, "This demo/test the internal state of the smoothly-input component."), index$1.h("p", { key: '9129cc133c3e16c1473ce93c4bf4e85f02e1dc76' }, "The currency of the price should update when switching between the currencies."), index$1.h("smoothly-input-radio", { key: '100da1f7a7e0a4e8ccb610211dc1ef0f9a324853', name: "currency", onSmoothlyInput: e => (this.currency = index.isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index$1.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index$1.h("smoothly-input", { key: 'b60680c3c0a27ab6e1616844da966aaf5add80fe', type: "price", currency: this.currency }, "price")));
+        return (index$1.h(index$1.Host, { key: 'c7b07f8d277b3a91da7389f15338e1c3ceeb71e6' }, index$1.h("h2", { key: '1ff6b680677204eb802cb3fe21ed533903c17cca' }, "State demo on smoothly-input"), index$1.h("p", { key: '5e322e242eb2ef3dc4400e59745e8cf806126735' }, "This demo/test the internal state of the smoothly-input component."), index$1.h("p", { key: '839cebc0650dbe161f76620a62809a3213f11889' }, "The currency of the price should update when switching between the currencies."), index$1.h("smoothly-input-radio", { key: 'ef6d1e619f0ae3598de284efa24bcfcebcc92e13', name: "currency", onSmoothlyInput: e => (this.currency = index.isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index$1.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index$1.h("smoothly-input", { key: '36eb82850d2472f5e9e02c88bbdcda3a9a4a8184', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = styleCss$H();
@@ -7688,7 +7688,7 @@ const SmoothlyInputRadioItem = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ba40442e0cfa56832fda03a30ae5eef5350bbbd4', onClick: () => this.inputHandler(true) }, index$1.h("input", { key: 'd4dd1a20cb0df6caa6b2c8c7e1049ea79b5d14dc', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), index$1.h("smoothly-icon", { key: '886da298d551259c886758a4cc92c1b2ab8c218f', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), index$1.h("label", { key: '4d0aaa685928491791b1b83994f354383202879d' }, index$1.h("slot", { key: '19ae10f4d377e166b12656ffe2ef234e3ebb13b8' })), index$1.h("slot", { key: '9411d93a2e3e753fbcc30d968cb010f4f4db536f', name: "detail" })));
+        return (index$1.h(index$1.Host, { key: '1b1afa5ebdb26239b0a7229c3ee1aeb8e41ba05b', onClick: () => this.inputHandler(true) }, index$1.h("input", { key: '1b738c88ce589a0ff9d8ef4b805126a8f308c9fc', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), index$1.h("smoothly-icon", { key: '4b7630b061c6abd992b5e5d9ae7d492ac7234dba', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), index$1.h("label", { key: 'f2aca1d982c9cdcda621bb08d529b266c1d80f05' }, index$1.h("slot", { key: '05f1fcbf282038d10ab95b98629d41a423e913af' })), index$1.h("slot", { key: 'baa173c7a12a735a701dcfbdd99cbd66f6d3440a', name: "detail" })));
     }
     get element() { return index$1.getElement(this); }
 };
@@ -7739,7 +7739,7 @@ var Range;
     Range.percent = percent;
 })(Range || (Range = {}));
-const styleCss$E = () => `.sc-smoothly-input-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks="border"].sc-smoothly-input-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-range-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-range-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-range-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-range-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-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-range-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-range-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-range-h,[looks="transparent"].sc-smoothly-input-range-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-range-h>input.sc-smoothly-input-range,[looks="transparent"].sc-smoothly-input-range-h:not(:focus-within)>input.sc-smoothly-input-range{background-color:transparent}[looks="transparent"].sc-smoothly-input-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-range-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-range-h.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .label.sc-smoothly-input-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-range-h .label.sc-smoothly-input-range{transform-origin:top right}.sc-smoothly-input-range-h.floating-label.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.floating-label .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder] .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly] .sc-smoothly-input-range-s>[slot=label],.floating-label.sc-smoothly-input-range-h .label.sc-smoothly-input-range,.has-value.sc-smoothly-input-range-h .label.sc-smoothly-input-range,.has-text.sc-smoothly-input-range-h .label.sc-smoothly-input-range,[placeholder].sc-smoothly-input-range-h .label.sc-smoothly-input-range,[readonly].sc-smoothly-input-range-h .label.sc-smoothly-input-range,.sc-smoothly-input-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-range{display:none}.sc-smoothly-input-range-h smoothly-icon.smoothly-invalid.sc-smoothly-input-range{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}*.sc-smoothly-input-range{box-sizing:border-box}.sc-smoothly-input-range-h{position:relative;width:100%;justify-content:center;align-items:center;display:flex;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-range-h>div.sc-smoothly-input-range:not([slot]){position:relative;display:flex;justify-content:center;align-items:center;width:100%;padding-right:var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{width:12em;--input-min-height:calc(3rem - 2px);--smoothly-input-border-focus:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{white-space:nowrap}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range{padding:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{text-align:center;margin-left:var(--input-padding-side);border:none;box-sizing:border-box;width:6rem;order:3;margin:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-display.sc-smoothly-input-range,.sc-smoothly-input-range-h:not(.output-side-right)>div.sc-smoothly-input-range>label.sc-smoothly-input-range{display:none}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range input.sc-smoothly-input-range{padding:0;text-align:center}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{width:100%}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>label.sc-smoothly-input-range{position:static;font-size:inherit;text-align:center;margin:0 var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range{-webkit-appearance:none;width:100%;background:transparent;height:1.5em;padding:0 .4em}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{-webkit-appearance:none;height:0.8em;width:0.8em;border-radius:100%;margin-top:-.25em;border:none}.sc-smoothly-input-range-h:not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{height:0.8em;width:0.8em;border-radius:100%;border:none;background-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-range-h:not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3rem;border-radius:20px;background-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-range-h:not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{width:100%;height:.3rem;border-radius:20px;background-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-range-h:not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.sc-smoothly-input-range-h:not([value]):not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background-color:rgb(var(--smoothly-primary-tint))}.sc-smoothly-input-range-h:not([value]):not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-tint))}[disabled].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb,[disabled].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb,[disabled].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track,[disabled].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track,[disabled].sc-smoothly-input-range-h,[disabled].sc-smoothly-input-range-h *.sc-smoothly-input-range{cursor:not-allowed}input.sc-smoothly-input-range::-webkit-outer-spin-button,input.sc-smoothly-input-range::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dual.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{width:6rem;flex:0 0 auto}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range{position:relative;flex:1;height:1.5em;display:flex;align-items:center}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range::before{content:"";position:absolute;left:.4em;right:.4em;height:.3rem;border-radius:20px;background-color:rgb(var(--smoothly-input-foreground))}.dual.sc-smoothly-input-range-h .fill.sc-smoothly-input-range{position:absolute;height:.3rem;border-radius:20px;background-color:rgb(var(--smoothly-primary-color));pointer-events:none}.dual[readonly].sc-smoothly-input-range-h .fill.sc-smoothly-input-range,.dual[disabled].sc-smoothly-input-range-h .fill.sc-smoothly-input-range{background-color:rgb(var(--smoothly-input-foreground))}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range{position:absolute;left:0;right:0;width:100%;margin:0;background:transparent;pointer-events:none}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background:transparent}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background:transparent}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{pointer-events:auto}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{pointer-events:auto}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range{-webkit-appearance:none}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3rem}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{height:.3rem}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{-webkit-appearance:none;height:0.8em;width:0.8em;margin-top:-.25em;border-radius:100%;border:none;background-color:rgb(var(--smoothly-input-foreground))}.dual.sc-smoothly-input-range-h:not([disabled]):not([readonly]) .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{height:0.8em;width:0.8em;border-radius:100%;border:none;background-color:rgb(var(--smoothly-input-foreground))}.dual.sc-smoothly-input-range-h:not([disabled]):not([readonly]) .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.dual[disabled].sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb,.dual[disabled].sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{cursor:not-allowed}`;
+const styleCss$E = () => `.sc-smoothly-input-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks="border"].sc-smoothly-input-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-range-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-range-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-range-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-range-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-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-range-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-range-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-range-h,[looks="transparent"].sc-smoothly-input-range-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-range-h>input.sc-smoothly-input-range,[looks="transparent"].sc-smoothly-input-range-h:not(:focus-within)>input.sc-smoothly-input-range{background-color:transparent}[looks="transparent"].sc-smoothly-input-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-range-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-range-h.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .label.sc-smoothly-input-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-range-h .label.sc-smoothly-input-range{transform-origin:top right}.sc-smoothly-input-range-h.floating-label.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.floating-label .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder] .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly] .sc-smoothly-input-range-s>[slot=label],.floating-label.sc-smoothly-input-range-h .label.sc-smoothly-input-range,.has-value.sc-smoothly-input-range-h .label.sc-smoothly-input-range,.has-text.sc-smoothly-input-range-h .label.sc-smoothly-input-range,[placeholder].sc-smoothly-input-range-h .label.sc-smoothly-input-range,[readonly].sc-smoothly-input-range-h .label.sc-smoothly-input-range,.sc-smoothly-input-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-range{display:none}.sc-smoothly-input-range-h smoothly-icon.smoothly-invalid.sc-smoothly-input-range{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}*.sc-smoothly-input-range{box-sizing:border-box}.sc-smoothly-input-range-h{position:relative;width:100%;justify-content:center;align-items:center;display:flex;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-range-h>div.sc-smoothly-input-range:not([slot]){position:relative;display:flex;justify-content:center;align-items:center;width:100%;padding-right:var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{width:12em;--input-min-height:calc(3rem - 2px);--smoothly-input-border-focus:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{white-space:nowrap}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range{padding:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{text-align:center;margin-left:var(--input-padding-side);border:none;box-sizing:border-box;width:6rem;order:3;margin:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-display.sc-smoothly-input-range,.sc-smoothly-input-range-h:not(.output-side-right)>div.sc-smoothly-input-range>label.sc-smoothly-input-range{display:none}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range input.sc-smoothly-input-range{padding:0;text-align:center}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{width:100%}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>label.sc-smoothly-input-range{position:static;font-size:inherit;text-align:center;margin:0 var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range{-webkit-appearance:none;width:100%;background:transparent;height:1.5em;padding:0 .4em}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{-webkit-appearance:none;height:0.8em;width:0.8em;border-radius:100%;margin-top:-.25em;border:none}.sc-smoothly-input-range-h:not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{height:0.8em;width:0.8em;border-radius:100%;border:none;background-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-range-h:not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3rem;border-radius:20px;background-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-range-h:not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{width:100%;height:.3rem;border-radius:20px;background-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-range-h:not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.sc-smoothly-input-range-h:not([value]):not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background-color:rgb(var(--smoothly-primary-tint))}.sc-smoothly-input-range-h:not([value]):not([disabled]):not([readonly])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-tint))}[disabled].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb,[disabled].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb,[disabled].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track,[disabled].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track,[disabled].sc-smoothly-input-range-h,[disabled].sc-smoothly-input-range-h *.sc-smoothly-input-range{cursor:not-allowed}input.sc-smoothly-input-range::-webkit-outer-spin-button,input.sc-smoothly-input-range::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dual.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{width:7rem;flex:0 0 auto}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range{position:relative;flex:1;height:1.5em;display:flex;align-items:center}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range::before{content:"";position:absolute;left:.4em;right:.4em;height:.3rem;border-radius:20px;background-color:rgb(var(--smoothly-input-foreground))}.dual.sc-smoothly-input-range-h .fill.sc-smoothly-input-range{position:absolute;height:.3rem;border-radius:20px;background-color:rgb(var(--smoothly-primary-color));pointer-events:none}.dual[readonly].sc-smoothly-input-range-h .fill.sc-smoothly-input-range,.dual[disabled].sc-smoothly-input-range-h .fill.sc-smoothly-input-range{background-color:rgb(var(--smoothly-input-foreground))}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range{position:absolute;left:0;right:0;width:100%;margin:0;background:transparent;pointer-events:none}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background:transparent}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background:transparent}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{pointer-events:auto}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{pointer-events:auto}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range{-webkit-appearance:none}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3rem}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{height:.3rem}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{-webkit-appearance:none;height:0.8em;width:0.8em;margin-top:-.25em;border-radius:100%;border:none;background-color:rgb(var(--smoothly-input-foreground))}.dual.sc-smoothly-input-range-h:not([disabled]):not([readonly]) .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.dual.sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{height:0.8em;width:0.8em;border-radius:100%;border:none;background-color:rgb(var(--smoothly-input-foreground))}.dual.sc-smoothly-input-range-h:not([disabled]):not([readonly]) .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{background-color:rgb(var(--smoothly-primary-color));cursor:pointer}.dual[disabled].sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb,.dual[disabled].sc-smoothly-input-range-h .track.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{cursor:not-allowed}`;
 const SmoothlyInputRange = class {
     constructor(hostRef) {
@@ -7904,7 +7904,7 @@ const SmoothlyInputRange = class {
         ];
     }
     renderField(part, value) {
-        return (index$1.h("smoothly-input", { ref: e => (part == "start" ? (this.startInput = e) : (this.endInput = e)), class: part, color: this.color, name: `${this.name}-${part}`, showLabel: true, type: this.type, onSmoothlyBlur: e => (e.stopPropagation(), this.commitField(part)), onSmoothlyKeydown: e => void (e.detail.key == "Enter" && this.commitField(part)), onSmoothlyInput: e => e.stopPropagation(), onSmoothlyUserInput: e => e.stopPropagation(), value: this.type == "percent" ? value : value === null || value === void 0 ? void 0 : value.toString(), readonly: this.readonly, disabled: this.disabled, right: part == "start" }, part == "start" ? "From" : "To"));
+        return (index$1.h("smoothly-input", { ref: e => (part == "start" ? (this.startInput = e) : (this.endInput = e)), class: part, color: this.color, name: `${this.name}-${part}`, showLabel: true, type: this.type, onSmoothlyBlur: e => (e.stopPropagation(), this.commitField(part)), onSmoothlyKeydown: e => void (e.detail.key == "Enter" && this.commitField(part)), onSmoothlyInput: e => e.stopPropagation(), onSmoothlyUserInput: e => e.stopPropagation(), value: this.type == "percent" ? value : value === null || value === void 0 ? void 0 : value.toString(), readonly: this.readonly, disabled: this.disabled, right: part == "start" }, `${this.label ? this.label : ""} ${part == "start" ? "From" : "To"}`));
     }
     renderRangeInput(part, value) {
         var _a;
@@ -7924,11 +7924,11 @@ const SmoothlyInputRange = class {
             }, value: value !== null && value !== void 0 ? value : (part == "start" ? this.min : this.max) }));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '93a4e9afcd01c8eda143e413360f20e14bcaa920', class: {
+        return (index$1.h(index$1.Host, { key: 'e6c7859a0b3d9d7aa65954e2bf5ab27645b5a247', class: {
                 "output-side-right": this.outputSide === "right",
-                "show-label": this.outputSide === "left" && !!this.label,
+                "show-label": this.dual || (this.outputSide === "left" && !!this.label),
                 dual: this.dual,
-            } }, index$1.h("slot", { key: '72711b5578bab0320901dbd513bb312b54b3ff40', name: "start" }), index$1.h("div", { key: 'be83442baeb8cd97fd650ac17717a0e4d703976e' }, index$1.h("label", { key: '17c0d638d8a9550c01de699efae66f55e1b27b8c', htmlFor: this.name }, this.label), this.dual ? this.renderDual() : this.renderSingle()), index$1.h("slot", { key: '1162b21a65fdd05c5703ff547201765b28858554', name: "end" })));
+            } }, index$1.h("slot", { key: 'e6536df1839f5784ec98811059c0b7b75fbcf2e5', name: "start" }), index$1.h("div", { key: 'aecd457a3c0d380d5cb8c890361490663f4843fd' }, index$1.h("label", { key: 'f87b1212516a92ffdd5ddf541b0c2c556b9dfa89', htmlFor: this.name }, this.label), this.dual ? this.renderDual() : this.renderSingle()), index$1.h("slot", { key: 'a2055f612918cec6ea2961264bc135beab00310e', name: "end" })));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -7953,7 +7953,7 @@ const SmoothlyInputRangeDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '850a5ea8cc3b512e2661333525b28eb5019287b3' }, index$1.h("h2", { key: '0a0f623f23a6739f5aeb96c4b5f1679e9e0fcb34' }, "Range"), index$1.h("h3", { key: '53535b3d6a89421a97851d0bd9fae947cc13b9ac' }, "Phone Number"), index$1.h("smoothly-input-range", { key: '87041e028b3e3679261c04f13a0a191f382a19a5', name: "first", min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index$1.h("h3", { key: '9875d80de18b17eca10c223004f8860e49057b8d' }, "Stars out of ten"), index$1.h("smoothly-input-range", { key: '45a7669fc4115edec078db9d7d02038f5ebd0b7d', name: "stars", max: 10, step: 1, label: "Stars" }), index$1.h("h3", { key: '7b0dfeef448af88731df524c2616062d97fade53' }, "Percent"), index$1.h("smoothly-input-range", { key: '16cc894decd70155beb121fd8ca3d6e4e743f3b3', name: "percent", type: "percent", max: 1, step: 0.01, label: "Percent" }), index$1.h("h3", { key: 'f71216975dea018c658b0501eb20cf266750e210' }, "With icon at start and clear button"), index$1.h("smoothly-input-range", { key: '2acb17d8d7173d3c8f2cbddf7b0626fba989fdb0', step: 1, name: "withClear", label: "Select" }, index$1.h("smoothly-icon", { key: '773be31ffa04141dac37b6a9b54fde28c1499cf2', name: "checkmark-circle", slot: "start" }), index$1.h("smoothly-input-clear", { key: 'c72262a6951103b03fa1af298a94152937e76338', size: "icon", slot: "end" })), index$1.h("h3", { key: 'de256bcef1e529daf7df1f49c5874def1e5e6248' }, "Dual (start / end)"), index$1.h("smoothly-input-range", { key: '0021e39e8db099b1afa54c9716e6923f535a2a05', dual: true, min: 90.86, max: 10000000, step: 1, name: "dualRange", label: "Range" }), index$1.h("h3", { key: 'add2d05dc7abb04da120eaea454b8ea2bd2cc552' }, "Dual percent"), index$1.h("smoothly-input-range", { key: '65fc586b860a04e5253b560800d1dd55ba05b2d4', dual: true, name: "dualRangePercent", type: "percent", min: 0, max: 1, step: 0.01, label: "Percent range" }, index$1.h("smoothly-input-clear", { key: '0ab70bea08f1d4473f85652f8f1ef1a1ae22f10c', size: "icon", slot: "end" }))));
+        return (index$1.h(index$1.Host, { key: '93085adc52dbed67cd824108eaaf64b3bda0fb6e' }, index$1.h("h2", { key: 'a91437c641e21986ad592c73f92a14234eddb9b9' }, "Range"), index$1.h("h3", { key: '5003225e9af30f278a7f37ccc1daab93df370e80' }, "Phone Number"), index$1.h("smoothly-input-range", { key: '38c9a1cf1be25dec16410ca010c5ae734746e28b', name: "first", min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index$1.h("h3", { key: 'd698c7cc1fe2f6a8bd6acdeadfa2ed1e5feaada1' }, "Stars out of ten"), index$1.h("smoothly-input-range", { key: 'dc0f9fa7347edbdcb7bbe8ea454fd9f45f4d9415', name: "stars", max: 10, step: 1, label: "Stars" }), index$1.h("h3", { key: '0a9a613efb97dd6c8493de427aec5c24408cc4fa' }, "Percent"), index$1.h("smoothly-input-range", { key: 'ded29f7d3daac293b6c27a19869b31c91775a14f', name: "percent", type: "percent", max: 1, step: 0.01, label: "Percent" }), index$1.h("h3", { key: '589f59a5a0fb056d09d73bb233e2d255630bc951' }, "With icon at start and clear button"), index$1.h("smoothly-input-range", { key: '80a584d2d100d35cc573c3e4c08345a83c2722d4', step: 1, name: "withClear", label: "Select" }, index$1.h("smoothly-icon", { key: '9aeb80b3577a69016be5ce6e5bb874e08d58e435', name: "checkmark-circle", slot: "start" }), index$1.h("smoothly-input-clear", { key: '61d3b0a8b0e97c94a8eb1f042c0b7ee60891d90b', size: "icon", slot: "end" })), index$1.h("h3", { key: 'a4cca86315fe12f0f65925efaf9e9996cd6437b7' }, "Dual (start / end)"), index$1.h("smoothly-input-range", { key: '14e337185e98ff57664e34a50df68f1999818680', dual: true, min: 90.86, max: 10000000, step: 1, name: "dualRange", label: "Range" }), index$1.h("h3", { key: '6bcd7e2e726e75faea6b630eb65baea6aa867cd9' }, "Dual percent"), index$1.h("smoothly-input-range", { key: '33a08332e9ee254819afbff1bff39c8e84edd6e1', dual: true, name: "dualRangePercent", type: "percent", min: 0, max: 1, step: 0.01 }, index$1.h("smoothly-input-clear", { key: 'e4125366bf47fb0dafda9fa254f88c023af2760f', size: "icon", slot: "end" }))));
     }
 };
@@ -8000,7 +8000,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '29a3490c49e3b9d9e5f308b151c1fe4f6767cba0', title: this.tooltip }, index$1.h("smoothly-button", { key: '7c6c4f6ddf30a5118731012f645fc40fdc0ecde7', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index$1.h("slot", { key: '515048d8827b4be6d52c9b094f501a9face42bb3' }), index$1.h("smoothly-icon", { key: '6f20b342b2606118bca317997a6c54fe11a8f1ca', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index$1.h(index$1.Host, { key: '13185b139b729ca9597dc2677c2014684c250ce7', title: this.tooltip }, index$1.h("smoothly-button", { key: '34f4dc13947bbdc6b1975cdfd2b3bc868cb7a941', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index$1.h("slot", { key: '1add7cbbb4b0cc5372156c4b6f448cc5a7d52380' }), index$1.h("smoothly-icon", { key: 'af9284edf39c8b346903e42fc51dcb20bb7ad7c3', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = styleCss$D();
@@ -8089,7 +8089,7 @@ var scroll;
     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}[right].sc-smoothly-input-select-h .label.sc-smoothly-input-select{transform-origin:top right}.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;width:100%;white-space:nowrap;gap:1rem}.sc-smoothly-input-select-h>.select-display.sc-smoothly-input-select>.value.sc-smoothly-input-select{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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 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}[right].sc-smoothly-input-select-h .label.sc-smoothly-input-select{transform-origin:top right}.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;width:100%;white-space:nowrap;gap:1rem}.sc-smoothly-input-select-h>.select-display.sc-smoothly-input-select>.value.sc-smoothly-input-select{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)))}.has-filter-persistent.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select{z-index:1}.sc-smoothly-input-select-h:not(.has-filter):not(.has-filter-persistent)>.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) {
@@ -8101,6 +8101,7 @@ const SmoothlyInputSelect = class {
         this.smoothlyFormDisable = index$1.createEvent(this, "smoothlyFormDisable");
         this.smoothlyItemSelect = index$1.createEvent(this, "smoothlyItemSelect");
         this.smoothlySelectOpen = index$1.createEvent(this, "smoothlySelectOpen");
+        this.smoothlyFilterChange = index$1.createEvent(this, "smoothlyFilterChange");
         this.isDifferentFromInitial = false;
         this.initialValue = [];
         this.initialValueHandled = false;
@@ -8119,6 +8120,7 @@ const SmoothlyInputSelect = class {
         this.defined = false;
         this.required = false;
         this.searchDisabled = false;
+        this.isSearchPersistent = false;
         this.mutable = false;
         this.lastOpen = false;
         this.open = false;
@@ -8217,6 +8219,7 @@ const SmoothlyInputSelect = class {
     }
     async onFilterChange(value) {
         value = value.toLowerCase();
+        this.smoothlyFilterChange.emit(this.filter);
         await Promise.all(this.items.map(item => item.filter(value)));
     }
     watchingReadonly() {
@@ -8303,7 +8306,7 @@ const SmoothlyInputSelect = class {
             event.preventDefault();
             this.handleEnter();
         }
-        else if (key == " ") {
+        else if (key == " " && !this.open) {
             event.preventDefault();
             this.openMenu();
         }
@@ -8381,11 +8384,16 @@ const SmoothlyInputSelect = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '1cfb5cdaeee4ecebbef19ba89e81ce750b748fd5', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, index$1.h("div", { key: '8b70e7ed56604f4bdc9efea35f7ab030ae71ef28', class: "select-display" }, this.display.length > 0 ? (index$1.h("div", { class: "value", innerHTML: this.display.join(this.displaySeparator) })) : (this.placeholder)), index$1.h("div", { key: '61c7ed152c3a0e190a0acba91f0b16d868326d5a', class: "icons", ref: element => (this.iconsElement = element) }, index$1.h("smoothly-icon", { key: 'ad06e05c043692038e51e785414597de4d9fbb7a', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: '53d7011004fe7e76514b5a25cb93643b64115713', name: "end" }), this.looks == "border" && !this.readonly && (index$1.h("smoothly-icon", { key: '59cf62f39652ac58e42854e5552d7f097e8c031b', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index$1.h("slot", { key: '83b8024bc79bc83f7f75a20cc324d4555c683818', name: "label" }), index$1.h("div", { key: 'b03bb76da9b2e55d4111a958cf48c10611fbaf02', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, index$1.h("div", { key: '3aa51b8ad250108d83da3741e4d9e0f684d1e2e0', class: "search" }, index$1.h("smoothly-icon", { key: 'b759aa93d460e8eae8e0bea32e77222b9fad12a5', name: "search-outline", size: "small" }), index$1.h("input", { key: '2089730dd304e16e38b09bb4c90aa0932031588d', 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 : "")); } }), index$1.h("smoothly-icon", { key: '1ec0ce82744829f004b19fdbddfc39fc3e667754', name: "backspace-outline", size: "small", onClick: () => {
+        return (index$1.h(index$1.Host, { key: '25f2bd12bdd838b7405297411a103aeee38d3c5d', class: {
+                "has-value": this.selected.length !== 0,
+                open: this.open,
+                "has-filter": this.filter !== "",
+                "has-filter-persistent": this.open && this.isSearchPersistent,
+            }, onClick: (e) => this.onClick(e) }, index$1.h("div", { key: '95302cdb09bcd5c218e5f05baed904f24dba193a', class: "select-display" }, this.display.length > 0 ? (index$1.h("div", { class: "value", innerHTML: this.display.join(this.displaySeparator) })) : (this.placeholder)), index$1.h("div", { key: 'fee48291df4fe018b7bd2933cdfc3ddfb9fc469c', class: "icons", ref: element => (this.iconsElement = element) }, index$1.h("smoothly-icon", { key: '8686946d896e5812bb2137c7d564cee0f55a879d', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: '2fa1e318cf0388d3b9bc937962899c1e3308ba18', name: "end" }), this.looks == "border" && !this.readonly && (index$1.h("smoothly-icon", { key: '0caad9d99e1bc011fbb60b8682556b95149173c3', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index$1.h("slot", { key: '8c3c7a67b3b0d71302bb92bd093b0a16b0382e91', name: "label" }), index$1.h("div", { key: '3e7875eeac42fd417c7b47a69830ebb28f34978e', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, index$1.h("div", { key: 'c7053135260263324b3f6a3d933694746df5231d', class: "search" }, index$1.h("smoothly-icon", { key: 'cc144d8b70e0fdb87749c033a03a279840b3d0ba', name: "search-outline", size: "small" }), index$1.h("input", { key: 'ec12d0f1eeb5786cea018e42289e6b98dc269012', class: "search-input", placeholder: this.searchPlaceholder, 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 : "")); } }), index$1.h("smoothly-icon", { key: '1883da80f3a3f34f3fb83ab2c856e8e9edf4a43a', name: "backspace-outline", size: "small", onClick: () => {
                 var _a;
                 this.resetFilter();
                 (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus();
-            } }), this.mutable && index$1.h("smoothly-icon", { key: '8a4c8af59466704939254337b0f8bae842631ab5', name: "add", size: "small", onClick: () => this.addItem() })), index$1.h("div", { key: '756d18dc29cdb02499b693fd25f5bf5b5e3799dd', class: "menu", hidden: !this.open }, index$1.h("slot", { key: '04471237e2fc63ae6b07d140a3dac4f4bfb6b16a' }), this.addedItems))));
+            } }), this.mutable && index$1.h("smoothly-icon", { key: '612c07080f7b81e0e3998ce3176e9b44c0c34fa3', name: "add", size: "small", onClick: () => this.addItem() })), index$1.h("div", { key: '27c8a711d5f14efcf0a0e0a74e7276f3b5e19230', class: "menu", hidden: !this.open }, index$1.h("slot", { key: 'ac93c1d16f9ee11c1ed486b1f9d4ed190e665e83' }), this.addedItems))));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -8455,7 +8463,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index$1.h(index$1.Host, { key: 'da63e0307d63ffa906c65d2d28e9e5f1d4c481cb', title: this.tooltip }, this.delete == true ? (index$1.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index$1.h("slot", null), index$1.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index$1.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index$1.h("slot", null), this.icon && index$1.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (index$1.h(index$1.Host, { key: 'f97c4457da695841b39984556b399746d603eb36', title: this.tooltip }, this.delete == true ? (index$1.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index$1.h("slot", null), index$1.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index$1.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index$1.h("slot", null), this.icon && index$1.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
 };
 SmoothlyInputSubmit.style = styleCss$B();
@@ -8501,7 +8509,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b0d6998fcd5645acb5e00e9f733b2a614d375858', tabIndex: -1 }, index$1.h("slot", { key: '44c9550fe4711d850eeee02ace037e97a39b9ab7' })));
+        return (index$1.h(index$1.Host, { key: 'c5146bc88a4b9c1b1f62f61f00031cb5a5696cc4', tabIndex: -1 }, index$1.h("slot", { key: '4193764aac8e58e2922c250c8f9d648205ae3510' })));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -8520,9 +8528,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: 'a50f72481a39b6a4b46665263f1fa36b2d88e797', title: this.description, style: {
+        return (index$1.h(index$1.Host, { key: '20e6de7cb0e9feec21743e338f7c8c0a5b99efe2', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index$1.h("slot", { key: '9aa109ec1f4be0dc0907a31849ef358b6d2c132f' })));
+            } }, index$1.h("slot", { key: 'd0f7b0af42f7b6e48d960b972b73422d54e557e2' })));
     }
 };
 SmoothlyLabel.style = styleCss$z();
@@ -8539,7 +8547,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '50d332d965cae055754032d40db1cc5c3b2d5015' }, index$1.h("slot", { key: 'b9d235d7cf347bcf4bd9a3736d0db572633b8a1a', name: "before" }), index$1.h("smoothly-load-more", { key: 'c54a2473376d12954c0d7a661a47285827317999', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index$1.h(this.content, null) : this.content), index$1.h("slot", { key: '7304f07a8ebac3104c8a491dd42934c016bc44a8' })));
+        return (index$1.h(index$1.Host, { key: '906ca97b847fc15eb317b18a14c89736b05171a8' }, index$1.h("slot", { key: '124f5b9a92582b1b396ac9d32d9cb62be98437dd', name: "before" }), index$1.h("smoothly-load-more", { key: '773685e7c085099f02ed2be90b3e7770799a2b28', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index$1.h(this.content, null) : this.content), index$1.h("slot", { key: '3b852c53060b7ca6355fd15ac34ce03f30f20fe4' })));
     }
 };
 SmoothlyLazy.style = styleCss$y();
@@ -8583,7 +8591,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return index$1.h(index$1.Host, { key: 'e0443cf851d13bd9825e8d36d5995be9cd80b241' });
+        return index$1.h(index$1.Host, { key: 'bb19876d56183b2cb5350f775e0072cced3152ef' });
     }
     get element() { return index$1.getElement(this); }
 };
@@ -8608,9 +8616,9 @@ const SmoothlyModal = class {
         this.open = true;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '3115f076e4b06f293e88000e64a86d1095784bbb', role: "alertdialog", onClick: (e) => {
+        return (index$1.h(index$1.Host, { key: '2d4d99ee6e4abfb35ac797df0b23a5021e7f005d', 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();
-            } }, index$1.h("div", { key: 'd97da55c896003fe24013eb0ccea37406f547814', class: "modal" }, index$1.h("div", { key: '098a855a30eb75daf69c490f1ca5949c82cc8880', class: "header" }, index$1.h("slot", { key: 'b998fe6685ecfd420f4180ebcc3d0ba7431fbeb8', name: "header" }), this.closable && index$1.h("smoothly-icon", { key: '970706e6e4260c1823e83349b4dfd385512fb45b', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), index$1.h("slot", { key: 'e5a3a23588ee6e93199a218a2bbbbb230a36f8c0' }), index$1.h("div", { key: '4eea7bf04fc3235862c556285bcf3a47dcb55a65', class: "actions" }, index$1.h("slot", { key: 'd53ca115e72b1d8cf109739bbec38c64114540a7', name: "actions" })))));
+            } }, index$1.h("div", { key: '3bf2318cf763ecd5374fcc2038b9eed817348783', class: "modal" }, index$1.h("div", { key: '111d3c15f0b59d840936dad804c5802447584c5b', class: "header" }, index$1.h("slot", { key: '806558a7918a07f205d40cb47d50d5204c7de251', name: "header" }), this.closable && index$1.h("smoothly-icon", { key: 'd5f7711fe4b558018bc69ceb49d909b4f9f52b1b', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), index$1.h("slot", { key: '2e3e96839359404f885e8003a6541e1b012dd6ea' }), index$1.h("div", { key: '6afa87e4c5f621a1f71de288b0a8b73fb07db73c', class: "actions" }, index$1.h("slot", { key: '7a38d753f855f76da81b97e88aa08300056947e6', name: "actions" })))));
     }
     static get watchers() { return {
         "open": [{
@@ -8675,7 +8683,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '956faa02fe9f3afa9b7e337bdef11a4c32784d22', color: this.properties[0], fill: "solid" }, this.closable && (index$1.h("smoothly-trigger", { key: '3bb82140212380cabb45c3577e4568e9203b6556', fill: "clear", name: "close" }, index$1.h("smoothly-icon", { key: '1a652894e5ff74a73c4679db9ee89a711f40cc4f', name: "close-circle-outline" }))), index$1.h("span", { key: 'ebc7533fbe05e4028936505acd7d9a2eadfc2001', class: this.icon ? "icon" : "clean" }, this.icon && index$1.h("smoothly-icon", { key: '1bfa56aff982ae6011c066b4e2e74656f5a07ed6', name: this.properties[1] }), index$1.h("p", { key: '7b1755d6a7d65939404a3d2c7f72e4f0f5f21201' }, this.notice.message))));
+        return (index$1.h(index$1.Host, { key: 'e2385684cbe97b13c8015dd0a991bb202ca2683c', color: this.properties[0], fill: "solid" }, this.closable && (index$1.h("smoothly-trigger", { key: 'fff9263c900dd2e8b572288371994572ec12229b', fill: "clear", name: "close" }, index$1.h("smoothly-icon", { key: '2d090ca0063ea0c8decbfaea13fb4839cc790ddf', name: "close-circle-outline" }))), index$1.h("span", { key: '3b0c67031c982f1bfa3d34a42c674e9eb3500fe2', class: this.icon ? "icon" : "clean" }, this.icon && index$1.h("smoothly-icon", { key: 'f8e0c9c2174f56662f44a04b5d83c7b59d5000fc', name: this.properties[1] }), index$1.h("p", { key: '4d7abf1d375b3b81e0af90ac5fe9dc72d234f770' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": [{
@@ -8700,7 +8708,7 @@ const Notifier = class {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '4eab0b03bcd2b49a1fed8c6de67ecfcd045673bf' }, index$1.h("slot", { key: '65ba8affecf54b00f39b5ceec891a04d390b9312' }), index$1.h("div", { key: 'f1caed9cedb41c1922f3f694347871e4465b043f', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (index$1.h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (index$1.h(index$1.Host, { key: 'cedcdf563610fc4108e41f179352239a8f8707b4' }, index$1.h("slot", { key: '21fd4ba39cfa657c771723be6bfdd258b72c205b' }), index$1.h("div", { key: 'cf6f577a4a2e78c1358d40fb4e4bc50d832670c8', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (index$1.h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
 };
 Notifier.style = styleCss$v();
@@ -8714,7 +8722,7 @@ const SmoothlyNotifierDemo = class {
         return () => new Promise(resolve => window.setTimeout(() => resolve(succeed ? [true, "Task completed."] : [false, "Task failed."]), ms));
     }
     render() {
-        return (index$1.h("main", { key: '146ef695280d078bf7bf8f4904aa602cbd5ec572' }, index$1.h("fieldset", { key: '5da1bd70292622a4c6eb817895a1ce9bfd64fc6b' }, index$1.h("h2", { key: 'b602c1520b2fe55565972682bb1c50b9066d1398' }, "Immediate"), index$1.h("p", { key: '4d28ffa7c0cc9d44f4d1262043576cfdd9ef8c6c' }, "Fires right away and closes after the default 15 seconds."), index$1.h("smoothly-button", { key: '071c91c26d9c3e1b8b2f6703faa39406deca9819', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.succeeded("Payment processed successfully.")) }, "Success"), index$1.h("smoothly-button", { key: 'c354273b9af901839a92f85cae02d903694d861a', color: "danger", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.failed("Payment could not be processed.")) }, "Failed"), index$1.h("smoothly-button", { key: 'fc817f6b4f8324d237fc390581416cf568c783b3', color: "warning", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.warn("Balance is running low.")) }, "Warning")), index$1.h("fieldset", { key: '8b3da9c5028b2a579d492a26475ca76bbc4c652f' }, index$1.h("h2", { key: '9c870f38c9355783cbc36975900e0490a8455505' }, "Task"), index$1.h("p", { key: 'cbfa853c985a0f5e3d9af217d874f4889e46cffc' }, "Shows an executing spinner while the task runs, then transitions to success or failure."), index$1.h("smoothly-button", { key: '22279e8c6ce0b08259b01daad95f023cf762ccaf', color: "success", fill: "outline", onClick: () => this.notice.emit(Notice.Notice.execute("Processing payment…", this.task(true))) }, "Execute (succeeds after 2s)"), index$1.h("smoothly-button", { key: '8caa0313dfe4a0f05a67ec9d4e650a6886f102a0', color: "danger", fill: "outline", onClick: () => this.notice.emit(Notice.Notice.execute("Processing payment…", this.task(false))) }, "Execute (fails after 2s)"), index$1.h("smoothly-button", { key: 'bd8946a1f33c9d890cb367865b41447ad9d58004', color: "medium", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.delay("Payment scheduled…", this.task(true))) }, "Delay (waits 5s, then executes)")), index$1.h("fieldset", { key: '40682996c0a8a1fdb1dd71d347892fe8bf7f2543' }, index$1.h("h2", { key: 'a26ec98a143c642c2f9a3e718e3277a982079a90' }, "Custom lifetime"), index$1.h("p", { key: '3b3e49441c2a65d532cf0a5fc55d4b53f3275470' }, "Controls how long the notice stays visible after resolving."), index$1.h("smoothly-button", { key: '65d58658c46948a83943eb463a9a2c57b92be03d', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.succeeded("Gone in 3 seconds.", 3000)) }, "Success (3s)"), index$1.h("smoothly-button", { key: 'fb9442e7af99347f04e6cd9404674f48810adbe8', color: "warning", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.warn("Sticks around for 30 seconds.", 30000)) }, "Warning (30s)"))));
+        return (index$1.h("main", { key: '89bcaad40b076b4a8c1cfe2c216d2b20527f393a' }, index$1.h("fieldset", { key: '73bab8643afbb9ef097a9ccc5a792898ebdce19d' }, index$1.h("h2", { key: '6849f90ff51a964722cc4feedd848cfa12e7c65e' }, "Immediate"), index$1.h("p", { key: 'eb8f61c5e649843efe412a34741a98de1c0e64e3' }, "Fires right away and closes after the default 15 seconds."), index$1.h("smoothly-button", { key: '538cb741614f0ab44ece81b12398ef68c3710b17', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.succeeded("Payment processed successfully.")) }, "Success"), index$1.h("smoothly-button", { key: 'eebe0c36038ab1a5ce7637ceda4a25526e735043', color: "danger", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.failed("Payment could not be processed.")) }, "Failed"), index$1.h("smoothly-button", { key: '7df609d43e4ef4bee60506555155c1e41e4b847a', color: "warning", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.warn("Balance is running low.")) }, "Warning")), index$1.h("fieldset", { key: '280afc55d056e96ab0ed3bfc8cba5646aefdd3ee' }, index$1.h("h2", { key: 'f51f8d45dd8d4f3a8798b79f9b30d1576ad80da4' }, "Task"), index$1.h("p", { key: 'c0158f4afc81179bc0ea8b4bb3df8e14d9f4435a' }, "Shows an executing spinner while the task runs, then transitions to success or failure."), index$1.h("smoothly-button", { key: '4cc217d8c98ed6905217332c985b7350089c0bef', color: "success", fill: "outline", onClick: () => this.notice.emit(Notice.Notice.execute("Processing payment…", this.task(true))) }, "Execute (succeeds after 2s)"), index$1.h("smoothly-button", { key: 'e9f7ce24d96a4780a3bcf551ae00787c18bc473e', color: "danger", fill: "outline", onClick: () => this.notice.emit(Notice.Notice.execute("Processing payment…", this.task(false))) }, "Execute (fails after 2s)"), index$1.h("smoothly-button", { key: 'e2a25f963bc54afd22aff374d921d63387484285', color: "medium", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.delay("Payment scheduled…", this.task(true))) }, "Delay (waits 5s, then executes)")), index$1.h("fieldset", { key: '2d818587234f716e6c8faa27f48dd4af276efb42' }, index$1.h("h2", { key: '4c959f5b6c8cc5ff7a9d387ee69258851d6b527a' }, "Custom lifetime"), index$1.h("p", { key: '1cc81b1b109dde48d2249b55bcc6e10ad3563805' }, "Controls how long the notice stays visible after resolving."), index$1.h("smoothly-button", { key: '3ddc8d92b022fe9036a24f22e98afb189df18eb4', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.succeeded("Gone in 3 seconds.", 3000)) }, "Success (3s)"), index$1.h("smoothly-button", { key: '4fed4a77c132e2288df49d0ef7d9d2c7a05dc197', color: "warning", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.warn("Sticks around for 30 seconds.", 30000)) }, "Warning (30s)"))));
     }
 };
@@ -8727,9 +8735,9 @@ const SmoothlySpinner = class {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (index$1.h(index$1.Host, { key: '48a168ea0d5598ec2266057893db21f7a22a3b2f', style: {
+        return (index$1.h(index$1.Host, { key: 'dda320c04e0b5f513b01e4ef44a4d9008c0b8fe4', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index$1.h("svg", { key: '1fb3b47404feb63c361efc84957c422f9b28dd11', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index$1.h("circle", { key: '4f04487db147ae2f9cb468e952fa18912c8315c5', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, index$1.h("svg", { key: '2edf8c5b50ee649ab78744b1d495af848bc43b10', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index$1.h("circle", { key: '443e16c5103e59c4089f8e41e8755653d1c8b5ec', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = styleCss$u();
@@ -8749,7 +8757,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (index$1.h("details", { key: '1a7f9409224434bde63b1ae60c65eb0c805b5de0', onToggle: e => this.toggleHandler(e), open: this.open }, index$1.h("summary", { key: '8eea074a35ab7f7cde8710164b6c6215a041d2c1' }, index$1.h("smoothly-icon", { key: '2446788e5744b49bae80aa43ab63f6a857ab1f04', name: "caret-forward", fill: "solid", size: "tiny" }), index$1.h("slot", { key: '87b1d6b1e2e11518bad2f891be6c8c7f64927c11', name: "summary" })), index$1.h("slot", { key: 'cf188e8cdf176c258d5955a7ff1f9e4ef8822332', name: "content" })));
+        return (index$1.h("details", { key: '288fb538d03bbfd1a71b2943b291093219ae2dec', onToggle: e => this.toggleHandler(e), open: this.open }, index$1.h("summary", { key: '50421f335a303578bbb761b59cff85c952bd51ed' }, index$1.h("smoothly-icon", { key: '988c093ab1e4fcd4af0e755827091cc85e6d5087', name: "caret-forward", fill: "solid", size: "tiny" }), index$1.h("slot", { key: 'a3bf5f55b4f950ef6e6b97a008fe1b99effbe498', name: "summary" })), index$1.h("slot", { key: '8d80364b8acfb634e7e687b972e339cd2141526e', name: "content" })));
     }
 };
 SmoothlySummary.style = styleCss$t();
@@ -8794,7 +8802,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '72e5406ce5ae673e34e213567eaf1d43b75cf24f' }, index$1.h("div", { key: '75c33d46e9b35bebc9081479278ce1e77adc620f', onClick: () => !this.disabled && (this.open = true) }, index$1.h("label", { key: '3a8814f4f922d771676c36438d21acc985e8ac63', "data-smoothly-tooltip": this.tooltip }, this.label)), index$1.h("div", { key: '0380e8b9a90d88369068e376179b7612563bbe0e', hidden: !this.open }, index$1.h("slot", { key: 'dff526563cb73af041668992693c70927da87a5a' }))));
+        return (index$1.h(index$1.Host, { key: 'a93d651d7e086f30a2f7cd86855005d028591a36' }, index$1.h("div", { key: 'e6fc9b8cac4479fdb717437fe27ed212c218bf4f', onClick: () => !this.disabled && (this.open = true) }, index$1.h("label", { key: 'a4bb76ef8387eeaa26a9ce359c5b7cba807edbaf', "data-smoothly-tooltip": this.tooltip }, this.label)), index$1.h("div", { key: '5fc87df52118a57aac0c2e7ac4b74364f4b256bc', hidden: !this.open }, index$1.h("slot", { key: '05b035045f0523f97792127c1f540eea48317c5e' }))));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -8819,7 +8827,7 @@ const SmoothlyTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '9de6a10f4520cfe2468366b3acbfaf1dd57ab71e', style: { "--columns": this.columns.toString() } }, index$1.h("slot", { key: 'af3e663420afe9809198147276b8ab12f400dab6' })));
+        return (index$1.h(index$1.Host, { key: '9f503e8d029a4954a7745e96063590ccd730e69f', style: { "--columns": this.columns.toString() } }, index$1.h("slot", { key: '74fe191de90d8e99beae5b5a71805337350d6438' })));
     }
 };
 SmoothlyTable.style = styleCss$r();
@@ -8831,7 +8839,7 @@ const SmoothlyTableBody = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b3bb5a5626087fbae34f99cdab7ca7ff9f783b5f' }, index$1.h("slot", { key: 'b8020b8b324fccfd9749664f8ce991b2212b8a5e' })));
+        return (index$1.h(index$1.Host, { key: 'ce870c3cb75e3021ae6df094be0beb4e15a4fa96' }, index$1.h("slot", { key: 'c10f9e14bd9f2737ec480b1fe54bbf20f43d76a0' })));
     }
 };
 SmoothlyTableBody.style = styleCss$q();
@@ -8845,7 +8853,7 @@ const SmoothlyTableCell = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '891d8de013f8deeb367d60f5d2edd13da377b613', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index$1.h("slot", { key: 'b776897f5657b4766dc21dcae5a6b676b4a38493' })));
+        return (index$1.h(index$1.Host, { key: 'ca07767049aaf36422712f91d7b6fb5c3969ad97', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index$1.h("slot", { key: 'bf432616f663835262a56fe03edd8e0798f5bcd0' })));
     }
 };
 SmoothlyTableCell.style = styleCss$p();
@@ -8857,7 +8865,7 @@ const SmoothlyTableDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '61b819ebc1b3602cf48e0d35f8df2067fd139604' }, index$1.h("smoothly-table-demo-filler-row", { key: '2f088db0302743327648525060c7dea3f7576b66' }), index$1.h("smoothly-table-demo-group", { key: '9c76fe69c75d4dd11de6f506ecbe28cab9ba9f5c' }), index$1.h("smoothly-table-demo-colspan", { key: 'e78177d0e46e4cbf899cc13b8fbf72540132d04a' }), index$1.h("smoothly-table-demo-simple", { key: '542544d59d3cd4878e4c9497d052e2bda926829b' }), index$1.h("smoothly-table-demo-nested-no-cell", { key: '0e258a2b1e018a3098397b548e8539bed9004ea4' })));
+        return (index$1.h(index$1.Host, { key: '392f756a60ce9696d3751f3acadef93297c3e643' }, index$1.h("smoothly-table-demo-filler-row", { key: '5661e2020b5c73c204c394b88de0265573092758' }), index$1.h("smoothly-table-demo-group", { key: 'fe474555113d6507b02d6782184ea01d03a8a662' }), index$1.h("smoothly-table-demo-colspan", { key: '2bb99bf815f006ea91ce30c9c7a0d7cba544d002' }), index$1.h("smoothly-table-demo-simple", { key: '88c7fc4ac07e640aa0fe70e8bdb6102dcb98c357' }), index$1.h("smoothly-table-demo-nested-no-cell", { key: 'deed98e8c8e2b7185ffdebf64076553323cb8019' })));
     }
 };
 SmoothlyTableDemo.style = styleCss$o();
@@ -8869,7 +8877,7 @@ const SmoothlyTableDemoColspan = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '4a92e415a226d4ebab31782cc871f6d11cdefdde' }, index$1.h("smoothly-table", { key: 'e414d700eb6cf3776f9fc9e86e2d67f501a71a15', columns: 3 }, index$1.h("smoothly-table-head", { key: '1cce9f1369a01fc233b80d1afa3d4a1b2f5d923d' }, index$1.h("smoothly-table-row", { key: '36e6474a6215eb5687ba9465c3c7877a7bff743a' }, index$1.h("smoothly-table-cell", { key: 'cfa2d4e243716d5f3fecded39d79bf3544a97905' }, "Date"), index$1.h("smoothly-table-cell", { key: 'c43fdf05f18bcb9c4846c5a845e16073ba32236c' }, "Skip"), index$1.h("smoothly-table-cell", { key: '620b37da396df4a5603fb5d55ba2b813c29526d0' }, "Total"))), index$1.h("smoothly-table-body", { key: 'aa63908d28d5bfb34c5b993902e8e0f99ea9ceb6' }, index$1.h("smoothly-table-row", { key: '0bdf0fc5da6579b5982bc5cf0c54cd32e6f21ec5' }, index$1.h("smoothly-table-cell", { key: '89a6978ec56e6fd376a91fa6e58a1db321d26cea', span: 2 }, index$1.h("smoothly-display", { key: '425d36ae8667386e31d6b12e6ebdd8c9c944ce66', type: "date", value: "2024-01-01" })), index$1.h("smoothly-table-cell", { key: '4349637266fbcfa739aa4e14d6ade43aa4698536' }, index$1.h("smoothly-display", { key: 'c10d1f4a35422b603b5267d588def34e1d559641', type: "price", value: 120, currency: "EUR" }))), index$1.h("smoothly-table-row", { key: '17786deabad8d2a2f94eecd504c411d81253e7ff' }, index$1.h("smoothly-table-expandable-cell", { key: '369b069e39d14c08067549c52e10ebc9e0431017', span: 2 }, index$1.h("smoothly-display", { key: '93c961cb863e773e9a388fb0a1409229170efd11', type: "date", value: "2024-01-02" }), index$1.h("smoothly-lazy", { key: '50925a7d20eba6489894db04ac0d5a33ae79c2cd', slot: "detail", content: index$1.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index$1.h("smoothly-table-expandable-cell", { key: 'd8ddb511da5dd1db25dacf6d6e2db86ab18f537a' }, index$1.h("smoothly-display", { key: '424ab8257361fb07d36a2315ee9f2f026e0231cc', type: "price", value: 220, currency: "EUR" }), index$1.h("smoothly-lazy", { key: 'b31ab7ce96a94604ef3eab1c993b500ae66cb568', slot: "detail", content: index$1.h("span", null, index$1.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index$1.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index$1.h("smoothly-table-row", { key: 'a62e60f23acdf0868205a383ef8acb4eb93195c2' }, index$1.h("smoothly-table-cell", { key: 'fe4d044b2e908ecff06ef8d1674773cff69ed793' }, index$1.h("smoothly-display", { key: '0e30d7ae0b6b47dabf0da4c54100a5fca974b9fd', type: "date", value: "2024-01-02" })), index$1.h("smoothly-table-cell", { key: '6b2643ea2eff46c72aa670846f5b093370a97557' }, "Not Skipped"), index$1.h("smoothly-table-cell", { key: '2ac9fe5d54115d68704871af45d61dd9fb457036' }, index$1.h("smoothly-display", { key: 'e1c21920c896ffa73155d69f3a4afa4146db587d', type: "price", value: 320, currency: "EUR" })))))));
+        return (index$1.h(index$1.Host, { key: '5bb9813d47d1db3bc22220f37684497c4ca8f2bd' }, index$1.h("smoothly-table", { key: '6f7b0f991acf1b7f5acf0fb65b5c819ed013cf3d', columns: 3 }, index$1.h("smoothly-table-head", { key: 'edc99ec7f702e6fe8dd756ed69e565a95dcd472b' }, index$1.h("smoothly-table-row", { key: '47b2b2fe6cb7f51b442f4c81e9126202b1c7c8c3' }, index$1.h("smoothly-table-cell", { key: '55f3222178c889b5973f667219da7ae264888015' }, "Date"), index$1.h("smoothly-table-cell", { key: 'b66af5e27fadc4c433d1e770fa42595dad35c91c' }, "Skip"), index$1.h("smoothly-table-cell", { key: '945ac4f2179e932a19e4af3c5984b438cdf66aaf' }, "Total"))), index$1.h("smoothly-table-body", { key: '7a78a928b7698a3d4dbb8cc110cba6e092f9d0e1' }, index$1.h("smoothly-table-row", { key: '2366aafaabb790d4e4f623d3223def5a5157b80b' }, index$1.h("smoothly-table-cell", { key: '388661156ce57cceeca8dba5cf949c167243664f', span: 2 }, index$1.h("smoothly-display", { key: 'dc4994f0086d6f95fcf3610caef8c33994285700', type: "date", value: "2024-01-01" })), index$1.h("smoothly-table-cell", { key: '34a6c4374ff76e6bfea930b6df6efab6555bf527' }, index$1.h("smoothly-display", { key: 'f077e002fc6e67894af561548a1b640b293efdbe', type: "price", value: 120, currency: "EUR" }))), index$1.h("smoothly-table-row", { key: 'd80a66ab18c26be3cb098c15f8516bd7b7f4f311' }, index$1.h("smoothly-table-expandable-cell", { key: 'c87f637adece3cb7be000f2c79804a4d6cb18493', span: 2 }, index$1.h("smoothly-display", { key: 'e98b2f42a4f239f0392cc3061afc1a17843b01da', type: "date", value: "2024-01-02" }), index$1.h("smoothly-lazy", { key: 'cf4208c25aef5035c832fdc56f21af00f067a7d0', slot: "detail", content: index$1.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index$1.h("smoothly-table-expandable-cell", { key: '3b7e2255b4ce1b0d8c2a135164af48cff025e3f2' }, index$1.h("smoothly-display", { key: 'eb34c6cacb66fa18cf597427513bdaad1a358629', type: "price", value: 220, currency: "EUR" }), index$1.h("smoothly-lazy", { key: '3e1b1418fa38a7fa4e283386fdace44845c558fa', slot: "detail", content: index$1.h("span", null, index$1.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index$1.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index$1.h("smoothly-table-row", { key: '031144a69c437d09bc4eba7b155de56acb89e500' }, index$1.h("smoothly-table-cell", { key: '22d04fcea0eced05eba133bdaa255345a46885b3' }, index$1.h("smoothly-display", { key: 'c039a6c696c335d50bae24058f2f523c0fd22003', type: "date", value: "2024-01-02" })), index$1.h("smoothly-table-cell", { key: '7d36890a8f8c7e1516094aed5395995531f315cb' }, "Not Skipped"), index$1.h("smoothly-table-cell", { key: 'f15c8f77ea83e115038b9f822fa1c740b2ca20f1' }, index$1.h("smoothly-display", { key: '51f9706d24f3187a9c0edeca8b505ec4aa11b0e0', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyTableDemoColspan.style = styleCss$n();
@@ -8887,7 +8895,7 @@ const SmoothlyTableDemoFillerRow = class {
         }, 3000);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '25288bea73e0bcfcbdd318b59dd9cb65da21dfbe' }, index$1.h("smoothly-display", { key: '436fc469f5ce4c0f02fc09b444b33f6a228c0891', type: "text", value: "Filler row" }), index$1.h("smoothly-table", { key: 'cd18f110fa492c3088e52199ff4bb9ac9245e89c', color: "primary", columns: 4 }, index$1.h("smoothly-table-head", { key: '863dbf37da3bbf9a71de66ddb4464593de005d2e' }, index$1.h("smoothly-table-row", { key: '33c3d1ab7047868aa6c7dbebe4cf8c9165670177' }, index$1.h("smoothly-table-cell", { key: '920a891a121e5d7149790757f967965dfa5403f2' }, "Breed"), index$1.h("smoothly-table-cell", { key: '82514455110654a943b8dcbfe5e4048dbab0cfe8' }, "Country"), index$1.h("smoothly-table-cell", { key: '72450b6321af7bca9966b9ec480068f89f3b7a50' }, "Coat"), index$1.h("smoothly-table-cell", { key: 'c2fd119131f985b0bf9216a3bacbaf9c0555f021' }, "Origin"))), index$1.h("smoothly-table-body", { key: '8882df67aa8946a730191cf98e6bface5b87583f' }, this.cats === undefined ? (index$1.h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index$1.h("smoothly-table-filler-row", null, index$1.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index$1.h("smoothly-table-row", null, index$1.h("div", { class: "smoothly-table-cell" }, a.breed), index$1.h("div", { class: "smoothly-table-cell" }, a.country), index$1.h("div", { class: "smoothly-table-cell" }, a.coat), index$1.h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
+        return (index$1.h(index$1.Host, { key: '09e5d41ab4453db60da3d6882e3a249b5b7e1efb' }, index$1.h("smoothly-display", { key: 'c884544b6be16e6db27aa14fd74c945ff7791739', type: "text", value: "Filler row" }), index$1.h("smoothly-table", { key: 'fb21fd98abb9f1932d1588759925b51915986778', color: "primary", columns: 4 }, index$1.h("smoothly-table-head", { key: 'ff1eca4566d2438b7554c3916c15ac09baabb3c8' }, index$1.h("smoothly-table-row", { key: '2c023e03a6f8f857368fefc3c7556c1c7898cb21' }, index$1.h("smoothly-table-cell", { key: '02b65f85b79633ed7256bb8b18a77de7d980873e' }, "Breed"), index$1.h("smoothly-table-cell", { key: '027ef71ae92b3ba437db7985852e20aa216188d8' }, "Country"), index$1.h("smoothly-table-cell", { key: '864265604fca102d3f9a185b2711679ead048ed6' }, "Coat"), index$1.h("smoothly-table-cell", { key: '2d3f0309e3e958ede3a6b9ecdbeae97d05c90e36' }, "Origin"))), index$1.h("smoothly-table-body", { key: 'ebc7b803777f720f03fb5e69955ffb427eec75ee' }, this.cats === undefined ? (index$1.h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index$1.h("smoothly-table-filler-row", null, index$1.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index$1.h("smoothly-table-row", null, index$1.h("div", { class: "smoothly-table-cell" }, a.breed), index$1.h("div", { class: "smoothly-table-cell" }, a.country), index$1.h("div", { class: "smoothly-table-cell" }, a.coat), index$1.h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
     }
 };
 SmoothlyTableDemoFillerRow.style = styleCss$m();
@@ -8899,7 +8907,7 @@ const SmoothlyTableDemoGroup = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '62df195c439cf706a1a3c7f41db6c2e29dad142f' }, index$1.h("smoothly-display", { key: 'e0e9ff9ce93fcaf000f395d113a553e5506f7304', type: "text", value: "Group" }), index$1.h("smoothly-table", { key: '326ba06d567fdd989afca120e2c3c37a0cc846e7', color: "primary", columns: 2 }, index$1.h("smoothly-table-head", { key: 'fc9c0d2f26660f7a905a049460ff9a5e1cf8d01a' }, index$1.h("smoothly-table-row", { key: 'f24071deda1e8594baa3247d2f4c7089a926ba57' }, index$1.h("smoothly-table-cell", { key: '1bb3803e7af1271e4eb9f22a42325ac2b5b73232' }, "Date"), index$1.h("smoothly-table-cell", { key: 'ae5d48ded2734e285adf9ae59aaa63e695b659bc' }, "Total"))), index$1.h("smoothly-table-body", { key: '986cebc8d947b2cb9e17673fd479a6ebf2f076c2' }, index$1.h("smoothly-table-row-group", { key: '5525de8b528614a2a98b9c1f114005ccc00429c8', align: true }, index$1.h("smoothly-display", { key: 'fa42e342b2c3f6c17c876ae857e0d23318ffbbf5', slot: "start", type: "date", value: "2024-01-01" }), index$1.h("smoothly-display", { key: 'e15d54e3288e723c449971fe3ef8e82e669e236c', slot: "end", type: "price", currency: "EUR", value: 510 }), index$1.h("smoothly-table-expandable-row", { key: '38294cc981a9711d9fe62e19dcc9be0dc44d72fe' }, index$1.h("smoothly-table-cell", { key: 'a6a1a468df6c6c4d870637d96d49a60b9e9a5b62' }, index$1.h("smoothly-display", { key: '35b429ea784aae344d0eed4364047a16addab496', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '12e3ffb4a8a1003f63ec8426365ab164ca5e2860' }, index$1.h("smoothly-display", { key: 'd2f3030c67352148cb3edfaa6fb7ae9cc77b94bd', type: "price", currency: "EUR", value: 250 })), index$1.h("smoothly-lazy", { key: 'e7d2324c84054a6d5c99f9123c1407ac6dd47cd8', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index$1.h("smoothly-table-expandable-row", { key: 'aff20dad5eba30487c0dd0af87498d00593f67e8' }, index$1.h("smoothly-table-cell", { key: 'c31a2971ab968e445a622f2e2c685fab84d46b22' }, index$1.h("smoothly-display", { key: '5c71ba768035bd954b4280fa616c046a3abe20ac', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '43ce6d32c1cb44473460cf942eed00eb7ba0d9bb' }, index$1.h("smoothly-display", { key: 'faa140a1e7bff8ee3db1f4cea2af3b89a5e0573a', type: "price", currency: "EUR", value: 260 })), index$1.h("smoothly-lazy", { key: '8a693ca8e8e976cf4313fae0b7b8ac2718a85a58', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index$1.h("smoothly-table-row", { key: '58c1ef797e3f28e10e6132bb676601a74eecb02a' }, index$1.h("smoothly-table-cell", { key: 'e111fdc26f3ddbbe9f681f9bc4d68b8f057379a5' }, index$1.h("smoothly-display", { key: 'ba81ad168815ae393bee158c2aa833b2899b7ff8', type: "date", value: "2024-01-02" })), index$1.h("smoothly-table-cell", { key: '00ab6f81d2406415a58adea186c3a44307b7a75a' }, index$1.h("smoothly-display", { key: 'b071985cb24513990029755e61885ba9a3dd66c6', type: "price", currency: "EUR", value: 130 }))), index$1.h("smoothly-table-row-group", { key: '89ffb1f22c33c9859109a9899716687873c9d660' }, index$1.h("smoothly-display", { key: '1f90e7bdf7a6eaed52c543211f93c4b67d774599', slot: "start", type: "date", value: "2024-01-03" }), index$1.h("smoothly-display", { key: '527d1d8b4b7eee3211e2314fba784864152e00ae', slot: "end", type: "price", currency: "EUR", value: 720 }), index$1.h("smoothly-table-expandable-row", { key: 'f88db70380e5966a190f5ac8cca8fc0a67c4221f' }, index$1.h("smoothly-table-cell", { key: '54027324f7cf88573f96c169ee8ce9bb34dad797' }, index$1.h("smoothly-display", { key: 'd071a9894db56273b9f6636b392d08a4b42c78e9', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '6c1e4daf0f7dd6e3d8648bec713049f2fe074f6c' }, index$1.h("smoothly-display", { key: '1023a52f76e9daff2d0c5db605ca76a3ff77561e', type: "price", currency: "EUR", value: 320 })), index$1.h("smoothly-lazy", { key: 'f78aac6b2083e3ab97c37376caef47a902098a21', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index$1.h("smoothly-table-expandable-row", { key: '16e7bdb039dfc3a7c82e5aeab51c2fa8463adf06' }, index$1.h("smoothly-table-cell", { key: '6f3fa97484bb104428e3bdf30676aeacdbdeff54' }, index$1.h("smoothly-display", { key: '9e485216c31280d2163b1c47b615e463922e5bb9', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '6b26b65d005db2eb0a05e746668a31be90e550b1' }, index$1.h("smoothly-display", { key: 'd82acd54c4ca5cf965ec76cf72df7d560ec305cb', type: "price", currency: "EUR", value: 400 })), index$1.h("smoothly-lazy", { key: '6076632bb977591e9c00c9eb56b0e8d14df14b99', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index$1.h("smoothly-table-row-group", { key: 'd4b667e7c600ae58ca64a0c6c82f6770efb9b653' }, index$1.h("smoothly-display", { key: 'cea01aa7e1342130a10154b9582a5918d2e4d63b', slot: "start", type: "date", value: "2024-01-04" }), index$1.h("smoothly-table-expandable-row", { key: 'd0a2849829de6b374e26f78815810f79397d516a' }, index$1.h("smoothly-table-cell", { key: 'c2f6db946a8b4d8c783dc6d2d3c8b9eccbcd3783' }, index$1.h("smoothly-display", { key: 'e4f2f3e8d77813f044bd530bb1027f8e806080ab', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '4e0a4f1d32376dbeda02a6ea03b889c3b97c7ed8' }, index$1.h("smoothly-display", { key: '729743ffd6a89c25a67b171a460e2013e07973f1', type: "price", currency: "EUR", value: 320 })), index$1.h("smoothly-lazy", { key: '42696f349c875e81c1dcd9584946016a9a71ee9b', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index$1.h("smoothly-table-expandable-row", { key: '1f2bb863946e96a145afc60229b280a626d3afba' }, index$1.h("smoothly-table-cell", { key: '81548c1aa8566e74d235d84b1780ec6fbd42a31a' }, index$1.h("smoothly-display", { key: '3570bfe6661f6b4d6fc8997b2c1443a36cc2d4eb', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: 'aa5a554e100eb6abda0b99bd721b2f3df1536c2e' }, index$1.h("smoothly-display", { key: 'b9edeb0123445ce4d3f19cbfc08ad3195cf95bc7', type: "price", currency: "EUR", value: 400 })), index$1.h("smoothly-lazy", { key: 'eab6098b3d7322acf3dc665fd273329834798637', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index$1.h("smoothly-table-row-group", { key: 'f6e604f50115898a66a6ed944c48c81e2c41b4ba' }, index$1.h("smoothly-display", { key: '1222faba309ef28c8a79b6e4bfb541ca5e609741', slot: "end", type: "price", currency: "EUR", value: 720 }), index$1.h("smoothly-table-expandable-row", { key: '041ceb3f4632d6638d80b3380edb6e6fe3c68ba8' }, index$1.h("smoothly-table-cell", { key: '470993aa98db04036f588e2fedd37a51c43f42d5' }, index$1.h("smoothly-display", { key: '2ef2f28b13d6c22ecdd815695ca2ff695b875fbc', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '806648544e9ef4fc342e1be65842be6a18a0d5e5' }, index$1.h("smoothly-display", { key: 'afce15a2c0e117c5b8fdbd68513d5550b9d7567c', type: "price", currency: "EUR", value: 320 })), index$1.h("smoothly-lazy", { key: '6ceddf3fd4331db664bf597d74c009c729331529', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index$1.h("smoothly-table-expandable-row", { key: '78fb3f1f3695a136f1e418e8b6bed3e8241a7018' }, index$1.h("smoothly-table-cell", { key: '622023286563c7b2bc5dde3213183acdd60782c5' }, index$1.h("smoothly-display", { key: 'd5ee8d2f9707c60dd97a5e6ecdcd3a62d8f93598', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: 'bfb7b9aa8c519239c034f804eb8120243e0ff43f' }, index$1.h("smoothly-display", { key: 'ab2df9299d20827fec408d7ea75c99e502bbf480', type: "price", currency: "EUR", value: 400 })), index$1.h("smoothly-lazy", { key: '1f6c7aca115925e268d6d562af66239dfe008a8d', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index$1.h("fake-group-wrapper", { key: '7a6a14dd14bfe75f93b22ad545760d14c2f7987e' }, index$1.h("smoothly-table-row-group", { key: 'a75a0eaa8690248ee86ebd8ac061fbbaa73446cf' }, index$1.h("smoothly-display", { key: '713b7876d6ef92b2282bcc04dd72c92a89110525', slot: "start", type: "date", value: "2024-01-06" }), index$1.h("smoothly-display", { key: '3ea05b25d04e12bd44d12df5d49ebc640863af7b', slot: "end", type: "price", currency: "EUR", value: 720 }), index$1.h("fake-row-wrapper", { key: '1a94be668e96af4f2b4998fef2b2c99eff630121' }, index$1.h("smoothly-table-row", { key: 'e72c098a74dfcd4b22a3ae575a5ce71d6cf5d4c3' }, index$1.h("fake-cell-wrapper", { key: 'c552275a1b5d204a69664d4e7188ee2282a98ac4' }, index$1.h("smoothly-table-cell", { key: '6e1e84b08e9a20fb1cda64ebb6e1cc29a0422b34' }, index$1.h("smoothly-display", { key: '7dd6e96dac39fbb6ee3bf54e33868c7f836a8f46', type: "date", value: "2024-01-02" }))), index$1.h("fake-expandable-cell-wrapper", { key: '5549a1795adb2f64d11438c53b7600396a866b2d' }, index$1.h("smoothly-table-expandable-cell", { key: 'f6550a6b4dfbba1e340532bac7751eb7ce95d3a3' }, index$1.h("smoothly-display", { key: '30e460e5b2fafffdd2517631f118646f4a1d8f47', type: "price", currency: "EUR", value: 130 }), index$1.h("smoothly-lazy", { key: '1f38e7aa1d33998a080a1bdd6bece1ff7e016cb1', slot: "detail", content: index$1.h("span", null, index$1.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index$1.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index$1.h("fake-expandable-row-wrapper", { key: 'd51ca514fa6988b9f9c763c5a374b434432a8f8c' }, index$1.h("smoothly-table-expandable-row", { key: '73e26ecf4a2a60147cca01ca89fd6cb9cfd189c6' }, index$1.h("fake-cell-wrapper", { key: 'cf80f961a21c96c9400378e3ff7da35ce9decc6c', class: "span-2" }, index$1.h("smoothly-table-cell", { key: '74e278ce51e9c3f7c739758de2625f1239d77813', span: 2 }, index$1.h("smoothly-display", { key: '82418ec6d6ca4d41cc3c3b37af238fec5b747f8e', type: "date", value: "2024-01-07" }))), index$1.h("smoothly-lazy", { key: 'd6d0bb6f634b8b81d1d6c897225c6fe6f67bbe65', slot: "detail", content: index$1.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index$1.h("smoothly-table-row-group", { key: '532b5d36935a77ae5c41106a9b1e0d50abe6a417' }, index$1.h("smoothly-display", { key: 'b2890def11816604589a1dfc6c3addf15ab359c8', slot: "start", type: "date", value: "2024-01-08" }), index$1.h("smoothly-display", { key: 'f45c09b7a938e6b37614032d791d278c99f57603', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index$1.h(index$1.Host, { key: '1018b8ebc4a2664146c044a5af08cfc403fdba17' }, index$1.h("smoothly-display", { key: '156fb43c20ee6f8d98d7c4273c5f7c1e7a7f4c63', type: "text", value: "Group" }), index$1.h("smoothly-table", { key: '46410eba49dfd918b0f6a0ce851a4d78c0b6d63e', color: "primary", columns: 2 }, index$1.h("smoothly-table-head", { key: '9f570364392c2bb62d107ecb63062e55840561d1' }, index$1.h("smoothly-table-row", { key: 'f2a586ccdd1a76adbb402a1e36e9765bf6981921' }, index$1.h("smoothly-table-cell", { key: '0896f702cd68a9692ab9a184994ea7924a9556ca' }, "Date"), index$1.h("smoothly-table-cell", { key: '8164db8527d98cb1fb7a37c9967a1d944c309244' }, "Total"))), index$1.h("smoothly-table-body", { key: 'a13835704bdebe92f6cb2d2b472d44324680d8b0' }, index$1.h("smoothly-table-row-group", { key: '913d221b9123bfee82db1756b2e87b167ca2ba80', align: true }, index$1.h("smoothly-display", { key: '36c9a42042b968c1bce4ca33625ae7a0fc871ddf', slot: "start", type: "date", value: "2024-01-01" }), index$1.h("smoothly-display", { key: 'ba53195b503da10700f3b2ba8eef6ed2677069bf', slot: "end", type: "price", currency: "EUR", value: 510 }), index$1.h("smoothly-table-expandable-row", { key: '22cfad4a47876d0e81597809976964824fd2f538' }, index$1.h("smoothly-table-cell", { key: '2c6f7f4caacb1b0dfc0483e2fcb8dcc15c8d12ca' }, index$1.h("smoothly-display", { key: '2e7a2aeacff8cbfb32a6c3b22157d6c5e7a3ed1b', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '11fa98b3074ac97bd4d7692910ee3c5e79e7f5af' }, index$1.h("smoothly-display", { key: 'b34fad882944ad708298d0e6818522a6e77eb7a5', type: "price", currency: "EUR", value: 250 })), index$1.h("smoothly-lazy", { key: 'a73076085f4d0d3cf3c6db40229fc6f6827d388e', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index$1.h("smoothly-table-expandable-row", { key: 'd0be11a2e5cefaacfefd46354e1dc7d007b85f11' }, index$1.h("smoothly-table-cell", { key: '8da6d365e1f1928f0ded7a94e19446748e0658e3' }, index$1.h("smoothly-display", { key: '1c173affd2e8899159f6afe0d2c67366961cda4b', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: 'a2f8076b4b23b2d6e67e92edd925c0447351dcff' }, index$1.h("smoothly-display", { key: 'bb8ae8fdad6c2b2b475635ea4de50571b2ddb1f8', type: "price", currency: "EUR", value: 260 })), index$1.h("smoothly-lazy", { key: 'da2b74dfdb241693fd91f7488a55ed3bd2360bd2', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index$1.h("smoothly-table-row", { key: '093beb640b56960968b0abb70586c6ba0a063e78' }, index$1.h("smoothly-table-cell", { key: '077a3742a8533a17486800c74ca7fea44d23e569' }, index$1.h("smoothly-display", { key: 'd5c18744fb9c8f0ed1358579eaf392e474ca3110', type: "date", value: "2024-01-02" })), index$1.h("smoothly-table-cell", { key: '52e33f3bdcf4b13f24dfd3249dbb5ad09ef741f4' }, index$1.h("smoothly-display", { key: '6e15b5560fd4e7a5f6227bd67949953d77d75141', type: "price", currency: "EUR", value: 130 }))), index$1.h("smoothly-table-row-group", { key: '04eb5b29dfd3357a5aacc74014567b0fb3221acf' }, index$1.h("smoothly-display", { key: '471be92684f0990c0e81cef378ba4c1a04cd7683', slot: "start", type: "date", value: "2024-01-03" }), index$1.h("smoothly-display", { key: 'c580d72e50702129ea8d498390424932a96bfb05', slot: "end", type: "price", currency: "EUR", value: 720 }), index$1.h("smoothly-table-expandable-row", { key: 'e120aa8a654972237d7d3f77e395667f1ed86f5f' }, index$1.h("smoothly-table-cell", { key: '478b6acdb0ff7933091a67a8b56ef0aeddafff7a' }, index$1.h("smoothly-display", { key: '8157a143e2f91bcb98c74d1d4b9e21d62cf75876', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '2cd00ae76248e86b110550daff7523b06b74a661' }, index$1.h("smoothly-display", { key: 'c364434851ebdb9dd4ea1085aca2f32674fbfee7', type: "price", currency: "EUR", value: 320 })), index$1.h("smoothly-lazy", { key: 'c7b3d0cb9b5694f50f02472c7bd5c0e5e7ade73a', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index$1.h("smoothly-table-expandable-row", { key: 'cb715e8e09efa27facaafc38bcfe1bab7a8430a9' }, index$1.h("smoothly-table-cell", { key: 'dc7150566ec0a9fbe7f10dbcfbfa04094c1566d8' }, index$1.h("smoothly-display", { key: '8db703f533d729b467ea53facf1b5714a9d0007c', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: 'e69fb07aea49630093e5b50eb21aac0a512b585e' }, index$1.h("smoothly-display", { key: '511867e910bc46033a86b884e71bf3a86004f3d5', type: "price", currency: "EUR", value: 400 })), index$1.h("smoothly-lazy", { key: '559dcd86bf7e5182b648269bfe7c89efae6d90b8', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index$1.h("smoothly-table-row-group", { key: 'cd4c7dd32d9ca131cb928bfe966667d5ef015a06' }, index$1.h("smoothly-display", { key: '93e31cfc7b700f37eb85a537fa0dcdee5341e21f', slot: "start", type: "date", value: "2024-01-04" }), index$1.h("smoothly-table-expandable-row", { key: '212c14a6cc880aca7e28fc13c64aec713cc9ad06' }, index$1.h("smoothly-table-cell", { key: 'bea8887113d5e2c478296e83e156b9d841d04d9d' }, index$1.h("smoothly-display", { key: '833d792a99e598d79e7ead80cce484975271e945', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: 'ee079618899cedabfee38e767e1ebb1d6ea0bd72' }, index$1.h("smoothly-display", { key: 'c465529c47972d35e2c88c21063adcdae1be074a', type: "price", currency: "EUR", value: 320 })), index$1.h("smoothly-lazy", { key: 'c13bdae5b1e4b93fef96b9663476317175994ca2', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index$1.h("smoothly-table-expandable-row", { key: 'b8997a4f3d02fa1562f294ab8b511d1a6ab1a340' }, index$1.h("smoothly-table-cell", { key: '98b18cb5d2dfb3148af7693e3b3e3ca9a18528bc' }, index$1.h("smoothly-display", { key: '13245ba80046868112615d3e23a5c10ddc9917d2', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '4acdf8682514dfc9588c4396b22d8eff5814e540' }, index$1.h("smoothly-display", { key: '6a78481d96266171b7a2ab85e06ab278e517030c', type: "price", currency: "EUR", value: 400 })), index$1.h("smoothly-lazy", { key: 'd01607c3e985cd163b6d4f3775fdc6b5e07caa22', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index$1.h("smoothly-table-row-group", { key: 'a27ce4b894f53565450af368abf00c996fd7e9d6' }, index$1.h("smoothly-display", { key: '6f7039aae41110f2e7fec069b06f4a9b5e7e88af', slot: "end", type: "price", currency: "EUR", value: 720 }), index$1.h("smoothly-table-expandable-row", { key: '8e5061627868199c6ab234d29eb5b929da8e3970' }, index$1.h("smoothly-table-cell", { key: 'b420f93d94c7bf37279ba2ba4237ff24ec6c0845' }, index$1.h("smoothly-display", { key: '4dc79070171669b9c3148ae20dd510d47c074044', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '328a16b1224bec0e114456fc6bc907a2f0c7a2fc' }, index$1.h("smoothly-display", { key: '880d4fe972fe941c5fee0af89ccf08e78889b131', type: "price", currency: "EUR", value: 320 })), index$1.h("smoothly-lazy", { key: 'f9f8da2f655820ddc5512b2a00ac98a27d3b4446', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index$1.h("smoothly-table-expandable-row", { key: '13b28b2d2aa0339a6ef6f268db7f60d38e392c37' }, index$1.h("smoothly-table-cell", { key: 'e0e9375576839c269c8644d147ccad87469f84f2' }, index$1.h("smoothly-display", { key: '58507417547c2339a6faccc0eacb450e1414c623', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '14c620d31511aa90005bc84c7cf7aa13e7caafb7' }, index$1.h("smoothly-display", { key: 'c02cd95f8366924583fab7c58aec5130c0dc6ab3', type: "price", currency: "EUR", value: 400 })), index$1.h("smoothly-lazy", { key: '8c4102ba85f39d1b507430a14bedde4c14352b9d', slot: "detail", content: index$1.h(index$1.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index$1.h("fake-group-wrapper", { key: '1a7ec6cbf9dd25d1e0c347e7f13e7fc84cb13dee' }, index$1.h("smoothly-table-row-group", { key: '495ec0d7f737041eed5e18f55b23e2d3a56d1e67' }, index$1.h("smoothly-display", { key: '9388119e19fe3736adf805a0cf416fb97ee04a60', slot: "start", type: "date", value: "2024-01-06" }), index$1.h("smoothly-display", { key: 'e316e00a41711f65c5fcdc570ec1893df04553f7', slot: "end", type: "price", currency: "EUR", value: 720 }), index$1.h("fake-row-wrapper", { key: 'cf6cf7ada6dcacae53aafae3a552133140aef6bc' }, index$1.h("smoothly-table-row", { key: 'ba1c3a41efd637812f00fc55b36bd3ba18e6b7ca' }, index$1.h("fake-cell-wrapper", { key: '47eb9df3010833125da9f5ec203063b46b5c710b' }, index$1.h("smoothly-table-cell", { key: '9d4133a5a40bac6293c873272619fa5d5daf02ab' }, index$1.h("smoothly-display", { key: '435da756815b232b04c3b736f86f5263f1c69a50', type: "date", value: "2024-01-02" }))), index$1.h("fake-expandable-cell-wrapper", { key: '5792524b518ac91535c40af3656497412b2fa7d7' }, index$1.h("smoothly-table-expandable-cell", { key: 'e327d41231936a6bb12928d4f43d45ba5bc98232' }, index$1.h("smoothly-display", { key: '304564a54f555b12d8eb19c138980881287b4cdf', type: "price", currency: "EUR", value: 130 }), index$1.h("smoothly-lazy", { key: '13329c446406e78a91610db0eac2490d2d453993', slot: "detail", content: index$1.h("span", null, index$1.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index$1.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index$1.h("fake-expandable-row-wrapper", { key: '6293bf9f19962a2ade3720e10d713c2db4d61cad' }, index$1.h("smoothly-table-expandable-row", { key: 'ae588d0c6d672edcdb5ab27cc74a660cba58fb23' }, index$1.h("fake-cell-wrapper", { key: '0997b1e181e2806dd2be5d58fd2f2f3a7ead4ee7', class: "span-2" }, index$1.h("smoothly-table-cell", { key: '812452b5838a90ae400d5a3db91a7c3b741f9025', span: 2 }, index$1.h("smoothly-display", { key: 'f0df840fafa95e1eda96add4bf4c74e2ba6b0744', type: "date", value: "2024-01-07" }))), index$1.h("smoothly-lazy", { key: '3bfc15b9e23290f24162b9c4edacacc5c498072f', slot: "detail", content: index$1.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index$1.h("smoothly-table-row-group", { key: 'c5f72a54bd995bb259c40a03f9eff2b7ed4c2e0d' }, index$1.h("smoothly-display", { key: '160d3fee233c0ba6f2bb47a319a3d3a4c20fbf0c', slot: "start", type: "date", value: "2024-01-08" }), index$1.h("smoothly-display", { key: 'a051fa82a2c80f0e61efe82ffc9aab1b12fa5b31', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyTableDemoGroup.style = styleCss$l();
@@ -9845,7 +9853,7 @@ const SmoothlyTableDemoNestedNoCell = class {
         this.loadedRows = [];
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '29038194ab35ac91e7ecd38984f9f16cb681b10f' }, index$1.h("smoothly-display", { key: '7bdfbe9558ae59cd12eb9073bf198f764a084c4c', type: "text", value: "Nested" }), index$1.h("smoothly-table", { key: '627d873552ed96aa168796a3d6e4a8c2922d348f', color: "primary", columns: 8 }, index$1.h("smoothly-table-head", { key: 'd1e76a9a6aae1ea0c353cc4a9eef221b70b9200f' }, index$1.h("smoothly-table-row", { key: 'bd1a42a9a3b9a9fd69999c2024b8aaf0c7197537' }, index$1.h("div", { key: 'b73f56ee3c882cc971027521e788d5f89e2e0271', class: "smoothly-table-cell" }, "Id"), index$1.h("div", { key: '029edab125641cdb0ff010c9774418a79c396dd8', class: "smoothly-table-cell" }, "Registered"), index$1.h("div", { key: 'c54776ba48053d919fa18e5acb42b1808d4b9431', class: "smoothly-table-cell" }, "Name"), index$1.h("div", { key: '9cc10cc412a916c8d17cd33cd4662779b2f35498', class: "smoothly-table-cell" }, "Age"), index$1.h("div", { key: 'b6deb718feedf1ad85fcb4ae67bb235130326592', class: "smoothly-table-cell" }, "Balance"), index$1.h("div", { key: '3d8897f00e8345493c1f9955bba32554a0c758cd', class: "smoothly-table-cell" }, "EyeColor"), index$1.h("div", { key: '1027b8d35fbd4c802f4f3fbe50f897eca8775cc3', class: "smoothly-table-cell" }, "Gender"), index$1.h("div", { key: '49bff1d9b137a3b4c0a4142724f2acfed24a9408', class: "smoothly-table-cell" }, "Company"))), index$1.h("smoothly-table-body", { key: '153be08a6e9679ddf265e9d48349fa020b6469fd' }, data.map((entry, index) => (index$1.h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
+        return (index$1.h(index$1.Host, { key: '7bc6c5fec454f34a051539d4332a2b95b1524d36' }, index$1.h("smoothly-display", { key: 'd7b4e33850e1ce970844be312a5da0ef8546da81', type: "text", value: "Nested" }), index$1.h("smoothly-table", { key: 'c395d0d02151ec40836fb44bca00ecefabc82b00', color: "primary", columns: 8 }, index$1.h("smoothly-table-head", { key: 'b1d21b6350b49470ce3d3745f067cd0dfe15ca4b' }, index$1.h("smoothly-table-row", { key: 'a1744fa8dfd23a4e2b4edfd5be60821d07f9fb8e' }, index$1.h("div", { key: 'eeccc6056ab4d36eb45b654874ae1887e416eb68', class: "smoothly-table-cell" }, "Id"), index$1.h("div", { key: 'd071193d8db7bf78711e829675ff72a7c31d403c', class: "smoothly-table-cell" }, "Registered"), index$1.h("div", { key: '870b213222d6dceaf338df0d852ad2288a1c366a', class: "smoothly-table-cell" }, "Name"), index$1.h("div", { key: '4dfbacae8816bcfcfef7090d08ce91851bb02dbc', class: "smoothly-table-cell" }, "Age"), index$1.h("div", { key: 'df7eb4a02fccae0c6492193a867d36be269622b1', class: "smoothly-table-cell" }, "Balance"), index$1.h("div", { key: 'c0e7a4fb74dfaa3feb90c5365e9b5acf55ba94dc', class: "smoothly-table-cell" }, "EyeColor"), index$1.h("div", { key: '8ee2746419ff0c382e6f64a7b9d4e3b4e608fcb0', class: "smoothly-table-cell" }, "Gender"), index$1.h("div", { key: '6a1914277b7ab5442b12671b16afaca77038622a', class: "smoothly-table-cell" }, "Company"))), index$1.h("smoothly-table-body", { key: '746212a9d93a1577dd5c990b4d14894ceb4f137e' }, data.map((entry, index) => (index$1.h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
                 if (event.detail) {
                     this.loadingIndex = index;
                     setTimeout(() => {
@@ -9853,7 +9861,7 @@ const SmoothlyTableDemoNestedNoCell = class {
                         this.loadedRows = [...this.loadedRows, index];
                     }, 1500);
                 }
-            } }, this.loadingIndex === index && index$1.h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (index$1.h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), index$1.h("div", { class: "smoothly-table-cell" }, entry.id), index$1.h("div", { class: "smoothly-table-cell" }, entry.registered), index$1.h("div", { class: "smoothly-table-cell" }, entry.name), index$1.h("div", { class: "smoothly-table-cell" }, entry.age), index$1.h("div", { class: "smoothly-table-cell" }, entry.balance), index$1.h("div", { class: "smoothly-table-cell" }, entry.eyeColor), index$1.h("div", { class: "smoothly-table-cell" }, entry.gender), index$1.h("div", { class: "smoothly-table-cell" }, entry.company))))), index$1.h("smoothly-table-foot", { key: 'f45322ab1a0273857552d25a85b246117bc3b549' }, index$1.h("smoothly-table-row", { key: '4ac21ff178aaadde33945221f2d08f0407967f02' }, index$1.h("div", { key: '6f725408d5b9388ff74e7508137d96e56b724306', class: "smoothly-table-cell" }, "Footer Cell"), index$1.h("div", { key: '3e2123ee1c77f6bdbd365f95088683d1faf3e24e', class: "smoothly-table-cell" }, "Footer Cell"))))));
+            } }, this.loadingIndex === index && index$1.h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (index$1.h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), index$1.h("div", { class: "smoothly-table-cell" }, entry.id), index$1.h("div", { class: "smoothly-table-cell" }, entry.registered), index$1.h("div", { class: "smoothly-table-cell" }, entry.name), index$1.h("div", { class: "smoothly-table-cell" }, entry.age), index$1.h("div", { class: "smoothly-table-cell" }, entry.balance), index$1.h("div", { class: "smoothly-table-cell" }, entry.eyeColor), index$1.h("div", { class: "smoothly-table-cell" }, entry.gender), index$1.h("div", { class: "smoothly-table-cell" }, entry.company))))), index$1.h("smoothly-table-foot", { key: '612581a9f4ea63707d1426c768ba64f7427987bc' }, index$1.h("smoothly-table-row", { key: 'a45f88cab126bd830d3919acc896dd99961bdce2' }, index$1.h("div", { key: '19f5ea4fb2906eead38c263f5d0ac7e9139977f2', class: "smoothly-table-cell" }, "Footer Cell"), index$1.h("div", { key: '039288cb2fa1912826a4bbdde3cba4fc953a99cd', class: "smoothly-table-cell" }, "Footer Cell"))))));
     }
 };
 SmoothlyTableDemoNestedNoCell.style = styleCss$k();
@@ -9866,7 +9874,7 @@ const SmoothlyTableDemoNestedNoCellInner = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '28f9d2bf9db5747017d5b2a90e4f65da98fa8af6' }, index$1.h("smoothly-table", { key: '8c4d7af6af55f5e185229ebf0d7ac358780a1806', columns: 4 }, index$1.h("smoothly-table-head", { key: 'c693cd5f50592b6c4fef491eeb334284795ae420' }, index$1.h("smoothly-table-row", { key: '7a3e7d29bc27e5edd87351d278e68befe4e6f2e3' }, index$1.h("div", { key: '5976cb5deec5edb90d3f1609295b0b4f18b69852', class: "smoothly-table-cell" }, "Id"), index$1.h("div", { key: '6fe9d4126c65a4f553164fcc457a218acda53ab1', class: "smoothly-table-cell" }, "Name"), index$1.h("div", { key: 'd785b0075ba0260b2770989d7f427147eb5255ca', class: "smoothly-table-cell" }, "Age"), index$1.h("div", { key: 'e37cbabfbc1a17d3605bbbd6eea6800abb11d9ff', class: "smoothly-table-cell" }, "Balance"))), index$1.h("smoothly-table-body", { key: '1c39927576727cbf41a0349d70b61828ec5f0e16' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index$1.h("smoothly-table-expandable-row", null, index$1.h("div", { class: "smoothly-table-cell" }, entry.id), index$1.h("div", { class: "smoothly-table-cell" }, entry.name), index$1.h("div", { class: "smoothly-table-cell" }, entry.age), index$1.h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
+        return (index$1.h(index$1.Host, { key: '36f6b45a302f17eea86896fc1904184b34589f19' }, index$1.h("smoothly-table", { key: '571e5c1870d82817d674f46832196ba837680b31', columns: 4 }, index$1.h("smoothly-table-head", { key: '5b7b5b8d02ff31ec82cd35e6ec688a7adcedcf9e' }, index$1.h("smoothly-table-row", { key: 'c7f09a8188bf6be442e687813a9615c3d7afb95a' }, index$1.h("div", { key: 'b4294b01db0691cfb53c0e8e2b9c5dd487c2e07d', class: "smoothly-table-cell" }, "Id"), index$1.h("div", { key: 'ff9f0472466eb4cad25d0663c183a0a7fe932807', class: "smoothly-table-cell" }, "Name"), index$1.h("div", { key: '0275a1da6d14f24d65dd1c179801ac865426dcbe', class: "smoothly-table-cell" }, "Age"), index$1.h("div", { key: '3381fd46e6978680d84691992ad093de04ee1ecc', class: "smoothly-table-cell" }, "Balance"))), index$1.h("smoothly-table-body", { key: 'fc58d8650b0e04d350518f33cc2fa07f308e40cf' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index$1.h("smoothly-table-expandable-row", null, index$1.h("div", { class: "smoothly-table-cell" }, entry.id), index$1.h("div", { class: "smoothly-table-cell" }, entry.name), index$1.h("div", { class: "smoothly-table-cell" }, entry.age), index$1.h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
     }
 };
 SmoothlyTableDemoNestedNoCellInner.style = styleCss$j();
@@ -9878,7 +9886,7 @@ const SmoothlyTableDemoSimple = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '8efeaf989f017e292c876bdfe46bf3763f6c38c5' }, index$1.h("smoothly-display", { key: 'f4127d4acd1adcefbefaf08e77460e4a1b8627e5', type: "text", value: "Simple" }), index$1.h("smoothly-table", { key: '0470e4b7620877db36cb9cc082e7996b0c3c3adc', color: "primary", columns: 2 }, index$1.h("smoothly-table-head", { key: '0739e075a0ef3ee56a8f0d058fe27d449e428b6d' }, index$1.h("smoothly-table-row", { key: '37fad0b5a35f4bf08b888b336f80cd3921cb9376' }, index$1.h("smoothly-table-cell", { key: '74f2b61cb27427da21adeadcee39db458c5bbe41' }, "Breed"), index$1.h("smoothly-table-cell", { key: 'd0309714adc9d2373bddc750f23fe86ebd320388' }, "Coat"))), index$1.h("smoothly-table-body", { key: '86d24356c0efed06ac5306553bc6be2c5791393f' }, cats.map(cat => (index$1.h("smoothly-table-row", null, index$1.h("smoothly-table-expandable-cell", null, cat.breed, index$1.h("div", { slot: "detail" }, "Country:", index$1.h("br", null), cat.country)), index$1.h("smoothly-table-expandable-cell", null, cat.coat, index$1.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index$1.h("smoothly-table-row", { key: '47925f54c706f1af062a6d51fab1178fa27639a8' }, index$1.h("smoothly-table-cell", { key: '275711ca0e9e6c0275cbada6a4e0adec2edccb6d' }, "Cell5"), index$1.h("smoothly-table-expandable-cell", { key: 'e60f863711fa70bbebf63c2ac93866c75c1c06bc' }, "Expandable Cell", index$1.h("div", { key: '26a19a10ec7929bc51168b5b2f7d96299be1303d', slot: "detail" }, "Content of the expandable cell"))), index$1.h("smoothly-table-row", { key: 'b012a0e9ad962aed5ef51e9468f082139ab7148d' }, index$1.h("smoothly-table-expandable-cell", { key: 'e428d929f46034021ef275faee7626205ec4dcc6' }, "Expandable Cell 1", index$1.h("div", { key: '96492566f55202c5c6b03a5521863dd9d149f709', slot: "detail" }, "Content of the expandable cell 1")), index$1.h("smoothly-table-expandable-cell", { key: 'f42f607dc543d1a3bc0e5a5fa9875251b65687b9' }, "Expandable Cell 2", index$1.h("div", { key: '7f67331945212bb0f94f428bfd61265a927bc2ee', slot: "detail" }, "Content of the expandable cell 2")))), index$1.h("smoothly-table-foot", { key: 'c94be30d6813c85a1823796894a2ab2e7d2ef0b2' }, index$1.h("smoothly-table-row", { key: '6e2cd14e0e50cd507e1b3c205f5b77296f4f8f06' }, index$1.h("smoothly-table-cell", { key: 'fb716cd817b77c5907a42454944b4212102280b1' }, "Footer Cell"), index$1.h("smoothly-table-cell", { key: '8ec34e17ed42736c2d64353306278adfa66d7b38' }, "Footer Cell"))))));
+        return (index$1.h(index$1.Host, { key: '2efdbea999fe8e2d237d018147ee9080b893ad33' }, index$1.h("smoothly-display", { key: '12b21356d7aeeae6940243380352b95c12dfff5d', type: "text", value: "Simple" }), index$1.h("smoothly-table", { key: '793660cc185168cfc2d80f61e57ab67faffa00d3', color: "primary", columns: 2 }, index$1.h("smoothly-table-head", { key: '9d85b0d97a12838aa8c6953155e8a009507f49ac' }, index$1.h("smoothly-table-row", { key: '4c6f644786476efe6a1beffcbda13abdcad2fd75' }, index$1.h("smoothly-table-cell", { key: '9538d1875ee057f07c33163e1e78a0e30e6558c0' }, "Breed"), index$1.h("smoothly-table-cell", { key: '194bf1b1adf62ea0b12c3389fc75fe8d511b14bb' }, "Coat"))), index$1.h("smoothly-table-body", { key: '1dec581f127727e413a6e4aad94c7b0d29d8f850' }, cats.map(cat => (index$1.h("smoothly-table-row", null, index$1.h("smoothly-table-expandable-cell", null, cat.breed, index$1.h("div", { slot: "detail" }, "Country:", index$1.h("br", null), cat.country)), index$1.h("smoothly-table-expandable-cell", null, cat.coat, index$1.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index$1.h("smoothly-table-row", { key: '0492ef355b8d6829d9e65cd419c521b76bb215f9' }, index$1.h("smoothly-table-cell", { key: '3459b0e72cb10dfb0d7f820d5b9fda5ac13c2b17' }, "Cell5"), index$1.h("smoothly-table-expandable-cell", { key: '31b3691b9b4e1b51072bbf1bd22e23ad134d3996' }, "Expandable Cell", index$1.h("div", { key: 'd0e20ad230d037628ad34b4a12d768c3b4fb4ead', slot: "detail" }, "Content of the expandable cell"))), index$1.h("smoothly-table-row", { key: '74cc23ba61afe01a6f5a89f57fe85d6514aded50' }, index$1.h("smoothly-table-expandable-cell", { key: '8e0faf1f2361181aa17943da5c065e7f3a0d87dc' }, "Expandable Cell 1", index$1.h("div", { key: 'cbf4bd0814781875bc48ec498699425c21b586ab', slot: "detail" }, "Content of the expandable cell 1")), index$1.h("smoothly-table-expandable-cell", { key: 'be15d9e43dad85222e8bc652e6bd68bdbf636a0f' }, "Expandable Cell 2", index$1.h("div", { key: '7e1507e45c07ff40bc662a24e6f1d93671de1467', slot: "detail" }, "Content of the expandable cell 2")))), index$1.h("smoothly-table-foot", { key: '94624f1591f9d3a18e3b84dbf8f76d8a46916028' }, index$1.h("smoothly-table-row", { key: 'a769b1e334d1f73a1cfc5a9539f31a99fb9e152c' }, index$1.h("smoothly-table-cell", { key: 'e14dd9f2bf4762b8e8c91c6309b8b3e966b504bd' }, "Footer Cell"), index$1.h("smoothly-table-cell", { key: 'd1b743ab0a072476bf6f7e7240bec71f2a242949' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -9986,7 +9994,7 @@ const SmoothlyTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '1b8a884ea804eba71c5ddaa49aa4cd26764d0e4b', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, index$1.h("div", { key: 'abbdbb646cbe25efca3a88c352089e3fc30f71bb', class: "content" }, index$1.h("slot", { key: 'daea230f19c624178ec5bf0e1d509132958f2185' })), index$1.h("div", { key: '71657be422cb6caa6e011c44c7f54f8a6b20caf2', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, index$1.h("slot", { key: 'ff3cded21e87a61f1d0c45662b569347c024b374', name: "detail" }))));
+        return (index$1.h(index$1.Host, { key: '4ad3f23ce5db4ed752db950bd4d3ec54ad839c54', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, index$1.h("div", { key: '676608664ca58dcc52d8d684a23bb324aadda90a', class: "content" }, index$1.h("slot", { key: '209daa4ff46fb96909f528c49dd2f802e2b5c090' })), index$1.h("div", { key: 'd63a4702d5aa24b8233080a2e621284466312804', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, index$1.h("slot", { key: 'a10d5ab5cc71f24f1c5f6ee63096fd8a27ea857f', name: "detail" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -10018,7 +10026,7 @@ const SmoothlyTableExpandableRow = class {
         this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '0b30bab39714624466afaef8c84e249968817f34', onClick: (e) => this.clickHandler(e) }, index$1.h("slot", { key: 'b5cb0b756d50f4ae59b2032e47100db32fd91d4a' }), index$1.h("div", { key: '1ed07af1ce9a0a1c3d1516f2cd0e6239861f6a8a', class: "smoothly-table-detail", ref: e => (this.div = e) }, index$1.h("slot", { key: '61d49870b81b2fba88d179b25859fc056321be80', name: "detail" }))));
+        return (index$1.h(index$1.Host, { key: '9e84dfc3e17d085b3906f789b014670830079257', onClick: (e) => this.clickHandler(e) }, index$1.h("slot", { key: '550fa1569c00ef0a759958b9a731897dc379e7ca' }), index$1.h("div", { key: 'b9f6d0b151720b77800c4d610f9682ea9b0a242e', class: "smoothly-table-detail", ref: e => (this.div = e) }, index$1.h("slot", { key: '6b693e48c396b4915a62700567859fa47e6b682e', name: "detail" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -10035,7 +10043,7 @@ const SmoothlyTableFillerRow = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h("smoothly-table-row", { key: '52db9475e8edb493f20b3e009a983c8dd3fe82f8' }, index$1.h("smoothly-table-cell", { key: '4b29630fbb37e98173accb7148647fc9e1b71e9e' }, index$1.h("slot", { key: 'b865d29782795cfb9b639b3520e66a4d027b72d6' }))));
+        return (index$1.h("smoothly-table-row", { key: 'd77076fd44474052265f353b93ad55274ce8c58e' }, index$1.h("smoothly-table-cell", { key: 'dbb64a7779542001e6ae2a1d7ba60601fe94a8c6' }, index$1.h("slot", { key: '73fca7b0a7ee9b9e3cb45b21b9fc83fe1e59c029' }))));
     }
 };
 SmoothlyTableFillerRow.style = styleCss$f();
@@ -10047,7 +10055,7 @@ const SmoothlyTableFoot = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b75e8bf006aa735f12ae9bff129fc09c4275b82a' }, index$1.h("slot", { key: '92a3ad0f1e31828d7399af8051a9ac6ed39b4070' })));
+        return (index$1.h(index$1.Host, { key: '9ed27d9a22178da4bb63dc53fcf5ea68179d43a9' }, index$1.h("slot", { key: 'f390e7474a31021cf29914c5b1e994820f3d7265' })));
     }
 };
 SmoothlyTableFoot.style = styleCss$e();
@@ -10093,10 +10101,10 @@ const SmoothlyTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '13d11ad45910c8b11f5d946819ff8f0f609ef55a', class: { scrolled: !!this.scrolled }, style: {
+        return (index$1.h(index$1.Host, { key: '993c6bc1713a36aed6bd3c49fc12998f21f377f5', class: { scrolled: !!this.scrolled }, style: {
                 "--top": `calc(${this.depth} * var(--smoothly-table-cell-min-height))`,
                 "--z-index": `${10 - this.depth}`,
-            } }, index$1.h("slot", { key: 'c98d44f3813f20e6095aa62d097ff75ffe4c8db2' })));
+            } }, index$1.h("slot", { key: '09bb8cb6a4c4d7812f1c7f793a384997dc439933' })));
     }
     get element() { return index$1.getElement(this); }
 };
@@ -10121,7 +10129,7 @@ const SmoothlyTableRow = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '41eeaab614f1b034c4035258b315855fc402b8c2' }, index$1.h("slot", { key: '23b870fd478af837fcc1747da8b9e7bf731a0dbe' })));
+        return (index$1.h(index$1.Host, { key: '0425407687e577b5fffba44db7d3d97723c9d5a5' }, index$1.h("slot", { key: '51b3451cb07fbd22d1588033a32c1728058fe85c' })));
     }
 };
 SmoothlyTableRow.style = styleCss$c();
@@ -10144,7 +10152,7 @@ const SmoothlyTableRowGroup = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '9c8f3a4594172f372916b83e664b6288731177e3' }, index$1.h("div", { key: '3360927c4cb220b1f7f76b5c4824df7489e19ad0', onClick: () => this.clickHandler() }, index$1.h("div", { key: '6fe25ec3ef5c177f6dac38e7b2343ba804b8e81d' }, index$1.h("slot", { key: '7e7d976019056d487fa0cd334aa4621de65fb6e7', name: "start" })), index$1.h("div", { key: '56c179ab6d732d56b6dff040a9483a72a43e5387' }, index$1.h("slot", { key: '73e97416d806f5539a3fdfb9b51daaf9e4f73636', name: "end" }))), index$1.h("div", { key: 'f8a401b452fd2da76c98fbb7437037accab4110c' }, index$1.h("slot", { key: '985d79edaf8932249cb9c0e3b296f2d8fd608f16' }))));
+        return (index$1.h(index$1.Host, { key: 'ce13a22ad4e51ee514e1e4b2f7a20c46fa92f6f1' }, index$1.h("div", { key: 'f02760b02c1bb6041a786cfb6d225e39711ff373', onClick: () => this.clickHandler() }, index$1.h("div", { key: 'db60ed9bc5b1122b59951b71ec314541282fcf6a' }, index$1.h("slot", { key: '45a5e3c909e67b106fd2d2f4c4569a907d71c144', name: "start" })), index$1.h("div", { key: 'ebb125b675ab71d721e3898517b4f4c51fa74b11' }, index$1.h("slot", { key: 'd7b3a84aad30848650579443f1545b4728f5e7c3', name: "end" }))), index$1.h("div", { key: '25a4c03b5e60f612788485f2aaeaa3c9b1fd0086' }, index$1.h("slot", { key: 'a82b554991b81a22415fcd59b286a2a676cd1aac' }))));
     }
 };
 SmoothlyTableRowGroup.style = styleCss$b();
@@ -10212,7 +10220,7 @@ const SmoothlyTabsDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '970a0c04e9d66cededd974959b15460fc16eb5c0' }, index$1.h("div", { key: '54f79d7cc81005bffbb387500a461db37d763d7f' }, index$1.h("smoothly-button", { key: 'f912ba56d65feb4b9eb5fc6385a5aecd27270f4a', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), index$1.h("smoothly-tabs", { key: '3b546ec4cb2390688d306bde9a3f135f8ddca36a', tabs: "multiple" }, index$1.h("smoothly-tab", { key: '68397b5f7141240996b27dacc3e2f517c9542c45', label: "Single Tab", open: true }, index$1.h("strong", { key: 'd7ebd15967233b187f29001d470cbd47dc8fd8ac' }, "Single Tab content here."), " If only one tab is available setting ", index$1.h("code", { key: '749d9762be46af10be03fb9423d788f5e4493974' }, "tabs"), " to", " ", index$1.h("code", { key: 'e51ef33b793cc098d9e1e6f1583ff41106ac0231' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (index$1.h("smoothly-tab", { key: '01401741049939874a4c379e14116576d5dd654d', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), index$1.h("div", { key: 'e9929e3ef190295ebda94778f8437bfa4c63649e' }, index$1.h("smoothly-button", { key: 'e2c3626e79713935b60497f951f45d98fcf5436e', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), index$1.h("smoothly-tabs", { key: 'e97b290ce901359193ecfade0ee7a8ae371b4ee8' }, index$1.h("smoothly-tab", { key: '50fd8b47369a3f27e2a69d15a4dd276dabbdb6a3', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), index$1.h("smoothly-tab", { key: '6910d8d1f111fef134b133ca5b1e5a7f87574d21', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), index$1.h("smoothly-tab", { key: '6f4b0d41128ab91f485d60b5c6d2d6651f4b477a', label: "test2" }, "this is a test message!"), this.extraTab2 && index$1.h("smoothly-tab", { key: '21be024f60f68fac1b47e88939565957aeb90f58', label: "test-extra" }, "this is a test message!"))));
+        return (index$1.h(index$1.Host, { key: '4a80dd41c51100c1301561693d8c4a2df403c4da' }, index$1.h("div", { key: '11006ee9bb40b9cf37e2178bce53ed628c1283f6' }, index$1.h("smoothly-button", { key: '26ff4ef958ee840faecf68fe2e11a0c3c3cdbc30', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), index$1.h("smoothly-tabs", { key: '417217100133e8df781567c756f39f6947c16f89', tabs: "multiple" }, index$1.h("smoothly-tab", { key: '724fe03a378b22c016fa2fcda4bad3bc55dfe37a', label: "Single Tab", open: true }, index$1.h("strong", { key: 'e604a2da6994a0bbefd94a8ecdc25f526edaf48e' }, "Single Tab content here."), " If only one tab is available setting ", index$1.h("code", { key: '93ec1421406263e82787412cb3c81758fd66d13d' }, "tabs"), " to", " ", index$1.h("code", { key: '42428750de3b7c3d8b9a07ef405c4a99a01404d9' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (index$1.h("smoothly-tab", { key: 'f423d7a8c75b17b2557c1607e234ef55898eb479', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), index$1.h("div", { key: 'f884806decb90da0e45420a017e2c66a342a766a' }, index$1.h("smoothly-button", { key: 'd124105cba0e312a10e023d0cef9fd5b8976589e', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), index$1.h("smoothly-tabs", { key: '754abfb1e802e5fe78a41b8a90118988f4cc762a' }, index$1.h("smoothly-tab", { key: 'bdeae6ae82b0cc55116be4cc10709df1decd5a52', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), index$1.h("smoothly-tab", { key: '7aaefe748609e3985c2f83acfac325af406e927e', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), index$1.h("smoothly-tab", { key: 'c1cccf83bc7042494535ed591cf03d930f8d3332', label: "test2" }, "this is a test message!"), this.extraTab2 && index$1.h("smoothly-tab", { key: 'e77b11f0d06d1805f28092a16d79c5b7cfd926c5', label: "test-extra" }, "this is a test message!"))));
     }
 };
 SmoothlyTabsDemo.style = styleCss$9();
@@ -10224,7 +10232,7 @@ const SmoothlyThemeColor = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '7050c1b8e61a45aed71762a2b1333b17a0dd89f6' }, this.color, ["tint", "color", "shade"].map(variant => (index$1.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
+        return (index$1.h(index$1.Host, { key: 'd0a540b220f6677f2789af7d5f837d8886a357d0' }, this.color, ["tint", "color", "shade"].map(variant => (index$1.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
     }
 };
 SmoothlyThemeColor.style = styleCss$8();
@@ -10272,7 +10280,7 @@ const SmoothlyThemeDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '8ad818d2afdd724ae85cc10d663184af0e87a4f4' }, index$1.h("h2", { key: '29526fcb5b248b0ad07075f0c8ba375e80cea3bd' }, "Theme"), index$1.h("smoothly-theme-picker", { key: '3a1c365f7568d817318f156f73733d0936c31a8e' }, index$1.h("smoothly-item", { key: '29eff93f4f3a89fea2ea7b4eb9526a371a6a9dd6', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index$1.h("smoothly-item", { key: '469c0d43dd4c0873b15c9bfd25a495bd36354b34', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index$1.h("smoothly-item", { key: '1688f1645c2722c3f8a7414ddc92b97675a21d8b', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index$1.h("smoothly-item", { key: 'c3e8e1b73d0b37f5b54632700bd7127069b1df97', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index$1.h("smoothly-item", { key: '9e9e441fa49a0328122a3bafed05af2329a235e7', value: "https://test.dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index$1.h("smoothly-item", { key: 'e62e3510b7a353247b2148d0eae8223bef51be8f', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index$1.h("smoothly-item", { key: '115369bcd42fe78b5f51ff142b56c1756739cc55', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index$1.h("smoothly-item", { key: '9e1f43ca5a652b8abab317905736b88855fde4bd', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index$1.h("smoothly-item", { key: 'a3cb7c9fa92094be89db4ecb9073fb0614ff8187', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index$1.h("div", { key: '47e0cdb953fcff38f283b9c373b3a1032267232a' }, index$1.h("smoothly-theme-colors", { key: 'dc00790e5426673d5e5e5ba291d8efb544302edd' }), index$1.h("smoothly-theme-guide", { key: '9d8f575567dab12f03749b999b92c8e794ebb1d7' })), index$1.h("smoothly-button", { key: 'a3c38a4378615e66d427b100fa4d7bc062c88c9c', type: "link", link: "/redirect" }, "To redirect"), index$1.h("smoothly-button", { key: 'd4cd80cd0e045a9051f7ec6019a9129b2e5569b5', type: "link", link: "/redirect" }, "To /redirect"), index$1.h("smoothly-button", { key: 'fb316e75622cd8437b7afcbddabea881180b9b5c', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index$1.h("smoothly-button", { key: '240ce786dd860f8029ea948ff75fc4f63252c10b', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index$1.h(index$1.Host, { key: 'b0bbd6191f8813c26d5886781733dd9bf741b99c' }, index$1.h("h2", { key: 'e91a7fdb7d96a680e59c927e45acee05200bb95c' }, "Theme"), index$1.h("smoothly-theme-picker", { key: '5fd8fdae6e0d2ff31dc0ff17c491238ed35bf490' }, index$1.h("smoothly-item", { key: '5920957a82d6ab7172b57eb59b421aa46ee54b9b', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index$1.h("smoothly-item", { key: '058c6ccaa2f06a749b822a30efe5cc77c4e10e72', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index$1.h("smoothly-item", { key: '39818c97423808e82305846cb10b07a6f33c3f64', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index$1.h("smoothly-item", { key: '0c6e1332df64fb8735b4dca530762f21880b26eb', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index$1.h("smoothly-item", { key: '622e018eef75102e056658a158bad09a65e8000f', value: "https://test.dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index$1.h("smoothly-item", { key: '620929a5b84a9ba4aa5ecddfa594711bf8a01d99', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index$1.h("smoothly-item", { key: '53ba85ee8f2756864733dd329e9a2e28e7367197', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index$1.h("smoothly-item", { key: '50395895f3cb399882761534e08c7d419a81519e', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index$1.h("smoothly-item", { key: 'b8becda45015864fa8f5835d3e6cec993b47f59c', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index$1.h("div", { key: '0ab79f2d41eacb2414707b9c0231771261b0e488' }, index$1.h("smoothly-theme-colors", { key: '5f70418b92a6ac65b33f00047dd060f28b5fe020' }), index$1.h("smoothly-theme-guide", { key: '102b8e24b377e5b00d5b2f8709faa7e5ba0ef60c' })), index$1.h("smoothly-button", { key: '238265f4b86ab0cfdaf98d4ca592a8fc05e68215', type: "link", link: "/redirect" }, "To redirect"), index$1.h("smoothly-button", { key: 'ffaa46726387eea854bdbc6ffc0d2cea5793f149', type: "link", link: "/redirect" }, "To /redirect"), index$1.h("smoothly-button", { key: '159b1948947dd3adb43142362d0006c71fdf7c03', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index$1.h("smoothly-button", { key: 'aa510bc3cf7526bd234ed13089ae752113914423', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = styleCss$5();
@@ -10285,14 +10293,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index$1.h("smoothly-display", { key: '2eac1d768913daba8d1517063f72a01278ee01e7' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index$1.h("br", { key: '05672a937497584f2c2c388cebd703f06a36e630' }),
-            index$1.h("smoothly-display", { key: '79dd8fbe3c417bbe3c7c220d8b866afe8206b298' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
-            index$1.h("br", { key: 'd031feafae3f2eae53dc88d927d37b59df97d341' }),
-            index$1.h("smoothly-display", { key: 'cfda2393ee07d9c38e500f401fac7f0cfad84560' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
-            index$1.h("br", { key: '052185d7ec86c97fd45ea2d2af1a685bf790b018' }),
-            index$1.h("smoothly-display", { key: 'fa634d42cba471c98a7e1ac5b3b63f46899c15ae' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index$1.h("br", { key: '6d1b60d08381ebebdd7766feb7bcb8bebee3cd7e' }),
+            index$1.h("smoothly-display", { key: 'a830c8d6d95a789caee78f4d8417428148983c5e' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index$1.h("br", { key: 'dbedc7fedfd22a2e565722a82e84dc96fc26a7f8' }),
+            index$1.h("smoothly-display", { key: '3c4a7c1e786d6127b9678255784764d72f3611a9' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
+            index$1.h("br", { key: '5bbad40a4217820ba5b332954702a031bf5b9073' }),
+            index$1.h("smoothly-display", { key: '6bf810cc6c0b3a1d2a67bb8b2779fe3d2c4e4a2e' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
+            index$1.h("br", { key: 'ef169f909cef881bb6f3a0355dc0b482d8bc0496' }),
+            index$1.h("smoothly-display", { key: 'bd47c4f897e48cc02787f9e7f9396d2c3df23ddc' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index$1.h("br", { key: '39fae791a0b502d9a006e8aa395a357c7f3e5308' }),
         ];
     }
 };
@@ -10306,12 +10314,12 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'f3041c36aed21fc2bb574fe471136d352b9c4af7' }, index$1.h("smoothly-input-select", { key: '9c0436083a8c694a5c71eb7d0baca1961cce2deb', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index$1.h(index$1.Host, { key: '2af98203042f4b72b535f47ff21ffaa4b5c0af6e' }, index$1.h("smoothly-input-select", { key: '247e1590c3198949e097eeb0a29f0cd339df2f81', name: "theme", looks: "border", onSmoothlyInput: e => {
                 const element = document.querySelector(`#${this.element}`);
                 if (element instanceof HTMLLinkElement && typeof e.detail.theme == "string") {
                     element.href = e.detail.theme;
                 }
-            } }, index$1.h("label", { key: '25ab17959d5d58a305f7c66b44d045766d41fce2', slot: "label" }, "Select theme"), index$1.h("slot", { key: '80d00e64a289d0e1ce3218ecd7c322317148e34e' }))));
+            } }, index$1.h("label", { key: '180f4a1ce2bd43d670e0dc111914ba07907c6176', slot: "label" }, "Select theme"), index$1.h("slot", { key: '86681b9a7827f9329d8827fe01618ab39409570f' }))));
     }
 };
 SmoothlyThemePicker.style = styleCss$3();
@@ -10334,7 +10342,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c7781efa34cec41259abf21144c91f24e5722624' }, index$1.h("button", { key: '229d205e4841dd4bf7f6724e42c7579209d770df', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index$1.h("smoothly-icon", { key: '22f35503b6c74e001101dc6dda4e3e6736f3bba7', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
+        return (index$1.h(index$1.Host, { key: '3a4b9d310da72b52813117929327c8a9a42d32ad' }, index$1.h("button", { key: 'ac17b5375ebd1a4437f8ed632f93f1a7c6dde5b3', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index$1.h("smoothly-icon", { key: '4a07e19ec0a7ee3d0f124b6bcaa2529e055a2a9f', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = styleCss$2();
@@ -10346,7 +10354,7 @@ const SmoothlyToggleSwitchDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'fca8804da9eefb7c507105e65855b98ad7540f54' }, index$1.h("h4", { key: 'cad68d4d24fe893466199e49e793925cda3009ef' }, "Toggle switches"), index$1.h("div", { key: 'fd5ef6232ba3f8e721df134b23436219081f2207' }, index$1.h("p", { key: '5cbf84c59750c6bb0a3d46f3558611aa0abb4992' }, "Checkmark"), index$1.h("span", { key: '76d747694fa0af956d182940ef9037c1fa2f95fe' }, index$1.h("p", { key: '89a9a5c8d0bda626e36e6383292d54d312034566' }, "Tiny"), index$1.h("smoothly-toggle-switch", { key: 'b24db43daaa5cae426e17e31cca8f0261cecd30b', disabled: false, size: "tiny" })), index$1.h("span", { key: 'c7ad97db334c7a04605722c7d40027d0f82549f0' }, index$1.h("p", { key: '8017bc1be7dbe8ffefa218239471d63f81963a4f' }, "Small"), index$1.h("smoothly-toggle-switch", { key: '0eca2f9dee8b3df68b7c6abb7cedb49c584bc746', disabled: false, size: "small" })), index$1.h("span", { key: '76050daeb22306cdd9fe338dc32447bde9aa27a4' }, index$1.h("p", { key: '9b7a2aea3fd9610c31796db1aa80e19ef533f77a' }, "Standard"), index$1.h("smoothly-toggle-switch", { key: '8a8ddaeddabd215bfefb7cc8e5e8922de7611c36', disabled: false })), index$1.h("span", { key: '5c368e1643a039d9f5866e9af47e8fc43df52136' }, index$1.h("p", { key: 'a806fef7422d104310df6d2e7bc9fb7ab1e00e5b' }, "Large"), index$1.h("smoothly-toggle-switch", { key: 'ee02dc008e9772eb3cdb08dba43c561a3403f983', disabled: false, size: "large" })), index$1.h("p", { key: '8ce395520724950f214b9547b955e990e6aea90a' }, "Colors checkmark"), index$1.h("span", { key: 'bf64b22381e656ea3247bbbf1c0899cf5a979e0d' }, index$1.h("p", { key: 'd2a291618918db1e4c50eced1ee1bdc48a9e6f38' }, "Danger"), index$1.h("smoothly-toggle-switch", { key: 'a6a6e9c125b40e0a61c3a6c2b4e4b6be52fb0536', color: "danger", disabled: false, size: "small" })), index$1.h("span", { key: 'bb3bc51fc86fc81836bd2a46595180f6d75a564f' }, index$1.h("p", { key: 'a855a115dfab68fad5982e4dea7b4cb7d265875c' }, "Primary color"), index$1.h("smoothly-toggle-switch", { key: 'c3dafe2cd00babb67954d9156fef1bd72b0a3914', color: "primary", disabled: false, size: "small" })), index$1.h("span", { key: 'bb6161cd265ec53c84e58f536eae55a302e90796' }, index$1.h("p", { key: '74766be3ec7c673a3e0173571b407874b40eca6a' }, "Secondary color"), index$1.h("smoothly-toggle-switch", { key: '8bd4b3c0c3bf0359b03a0a6c9858b5548d32026f', color: "secondary", disabled: false, size: "small" })), index$1.h("p", { key: '227312c4ae78cf4f2b52467f8b51216e7d259da7' }), index$1.h("p", { key: 'c74bdfadee0d0f85e14d673e8339a45b8a9e82c9' }, "Colors no checkmark"), index$1.h("span", { key: '7ce2d768fd3f9625548821f7c06a99f935649ddb' }, index$1.h("p", { key: '0ec8c03e0cb35594a16cf90839984d8c95600090' }, "Danger"), index$1.h("smoothly-toggle-switch", { key: '4296bd17bf13c14d0492f36ab9de46c4f019ead7', checkmark: false, color: "danger", disabled: false, size: "small" })), index$1.h("span", { key: 'e161235344c0959c137a29cfe3b1f5692955bc7d' }, index$1.h("p", { key: '1aa4fa9769d5d991f11cdf50f37c33df527a3a4e' }, "Primary color"), index$1.h("smoothly-toggle-switch", { key: '0b7ea4e5fb15bf5f435d0cfcb83fb18dfaddb3da', checkmark: false, color: "primary", disabled: false, size: "small" })), index$1.h("span", { key: '1e06e60a8f605b79170f71c34c0fa7138df68ae2' }, index$1.h("p", { key: '9682cdd26662988812a7977cdcac1a9a38cf70db' }, "Secondary color"), index$1.h("smoothly-toggle-switch", { key: '55f0bc1e66f7925a9629cf0ec13ef1f7e7171fd8', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index$1.h(index$1.Host, { key: '89947ffb728f613799f1ce93372ef3ec8f0cc111' }, index$1.h("h4", { key: 'a31e7b5e87461383260677fdaf600a784c228575' }, "Toggle switches"), index$1.h("div", { key: 'bcaab8c0c0a2b201eccd9618f5c4cdd7bf6aadbd' }, index$1.h("p", { key: '094b895b55b8fa71b47908d5c96eeb1ea15e11f7' }, "Checkmark"), index$1.h("span", { key: '8f4efd3fcea4e6c12e541a779f6c8404da35b731' }, index$1.h("p", { key: 'f6fdd02e752edec8bf4742e16450fcbc7b6688b9' }, "Tiny"), index$1.h("smoothly-toggle-switch", { key: '3fc6037f4960b8d32ce09f3f9ebba37016e6664a', disabled: false, size: "tiny" })), index$1.h("span", { key: '92a0e20c60b42601e287d6ded2d410cf9621fa32' }, index$1.h("p", { key: '6f093b2c7c57b5fe575c31a6226a62952264b19f' }, "Small"), index$1.h("smoothly-toggle-switch", { key: '5218f5534e4b5fb85aa3fe936ae41793ee442fa6', disabled: false, size: "small" })), index$1.h("span", { key: '599a5d20bac26ee391ab151ec3d5676fccdc8054' }, index$1.h("p", { key: '225ae580a936c57910647d1c85f092299e8b35dc' }, "Standard"), index$1.h("smoothly-toggle-switch", { key: '8207f999bfb0f904c351cea0b527428180215013', disabled: false })), index$1.h("span", { key: '82fec0c1bc65ed93ab46f2959ca8ce06e52dbcb3' }, index$1.h("p", { key: '7b054a1c33329eced30415d1fc1d72d3021135ca' }, "Large"), index$1.h("smoothly-toggle-switch", { key: 'ed2ef6bb357f09b69f086ef8c8a2ce98c5b5748d', disabled: false, size: "large" })), index$1.h("p", { key: '79b05ec925bac067ef54dbe70a4bf5e80ab7e4ea' }, "Colors checkmark"), index$1.h("span", { key: '7d56fa63b7ea2027292cfe7c4d2299effeb23f38' }, index$1.h("p", { key: 'f9a8be885bdbad1e7a7df85b44f173ef54be4446' }, "Danger"), index$1.h("smoothly-toggle-switch", { key: '14c4d887786aa9b174b2a26d343308949373167b', color: "danger", disabled: false, size: "small" })), index$1.h("span", { key: '536e6923c3a0dc41ef2578477bca30aa4ade8c53' }, index$1.h("p", { key: 'ae6488e2f6bfe13d6b66cae9745126ec981178cb' }, "Primary color"), index$1.h("smoothly-toggle-switch", { key: '9cc32d5f6a276302a112aacf61a632e7d8628ba7', color: "primary", disabled: false, size: "small" })), index$1.h("span", { key: '5770c9460bbba19e751d3925d4f2079eb82b2eed' }, index$1.h("p", { key: '52ac34e499689e7707c1f00ec257f2b2c5421289' }, "Secondary color"), index$1.h("smoothly-toggle-switch", { key: '0ed76db9819fbb9c055b97ae379f7e570cb1941d', color: "secondary", disabled: false, size: "small" })), index$1.h("p", { key: '0ccac3a8a3d45f84e2e897ca1c70bdf5399fdb82' }), index$1.h("p", { key: '83ffda4b2eda61607de34fbfa6ec3a0cf57d34b4' }, "Colors no checkmark"), index$1.h("span", { key: '152648b67751cc22397a520de71a40f7b546f042' }, index$1.h("p", { key: '5f84c9c846c0c3c8f31d419b8b2dc9a71201c697' }, "Danger"), index$1.h("smoothly-toggle-switch", { key: '2e8f8db8f6e44225f52a0c23c55a18221d9194bb', checkmark: false, color: "danger", disabled: false, size: "small" })), index$1.h("span", { key: 'ed667a303cd132a9c33998fd24318784c7e211a2' }, index$1.h("p", { key: '8dd99066536c3569875e1d9b1756201f13b355b0' }, "Primary color"), index$1.h("smoothly-toggle-switch", { key: '596e8528d7068418d54650dd77e57e9d7e0c8b6f', checkmark: false, color: "primary", disabled: false, size: "small" })), index$1.h("span", { key: 'b5aedfa2dc4cca37b931eb8303f1768d091a9c5d' }, index$1.h("p", { key: '2b3b9216aeb1f94641b91eb0c0ec81afdc39561f' }, "Secondary color"), index$1.h("smoothly-toggle-switch", { key: '8d5c92b17027032fa44a88a13382e223787b029a', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = styleCss$1();
@@ -10372,7 +10380,7 @@ const SmoothlyTrigger = class {
                 result = this.disabled ? (index$1.h("slot", null)) : (index$1.h("a", { onClick: e => this.onClick(e) }, index$1.h("slot", null)));
                 break;
             case "button":
-                result = (index$1.h("button", { key: 'b4a018b58d8d2fd2d80a17e2470ef4560dca427c', disabled: this.disabled, name: this.name }, index$1.h("slot", { key: 'a85c494c50b1d787673bce7cf844b1427761f4e6' })));
+                result = (index$1.h("button", { key: '8649cae1ed46bc4c22aafc6dfb5fce04a993bb9d', disabled: this.disabled, name: this.name }, index$1.h("slot", { key: 'bdf0d1b51e56dc99e0cc9b3aae2a563de459b377' })));
                 break;
         }
         return result;