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

smoothly 1.119.0 → 1.121.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 (446) hide show

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

@@ -2288,7 +2288,7 @@ const SmoothlyInputDateRangeText = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '58630b82c91178b70eee75c26ad8b6c2927410cb', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat$1.Order.toArray(this.order).map((part, index) => {
+        return (index$1.h(index$1.Host, { key: 'f85c786115e7a171f69dc12fc7cd7fd95d47dc04', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat$1.Order.toArray(this.order).map((part, index) => {
             var _a;
             return (index$1.h("span", { onClick: () => !this.readonly && !this.disabled && this.setFocus(index) }, index$1.h("span", { class: {
                     "smoothly-date-text-part": true,
@@ -5477,7 +5477,7 @@ const SmoothlyFormDemoAll = class {
     render() {
         return (index$1.h(index$1.Host, { key: '2b2e779dc35f9f35173515a6db59425654d7446a' }, index$1.h("h2", { key: 'b2423e5f45a6841b6fedcb7db17626ed192ee15d' }, "All inputs"), index$1.h("smoothly-form", { key: 'ac6fc721d22456edb5104ba9553c423d6f8bdebe', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
                 Object.entries(e.detail.value).forEach(([key, value]) => console.log(key, value));
-            } }, index$1.h("smoothly-input", { key: '4ec033bb9d51a7edc81cce2a1fde55bd21458318', readonly: true, name: "First Name", value: "John" }, "First name"), index$1.h("smoothly-input", { key: '8d6abee797b1c9b60efeb068c828453174401012', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index$1.h("smoothly-input-clear", { key: '8caeac3cbd2290eaeeda549aea083d4499b960c5', size: "icon", slot: "end" })), index$1.h("smoothly-input", { key: '9a22277ed064a84b98a8c68c5f176758735748f0', type: "phone", name: "Phone", value: "777888999" }, "Phone", index$1.h("smoothly-input-reset", { key: '2b45ff8ceaf71289d350e102d53123dc1c82600f', size: "icon", slot: "end" })), index$1.h("smoothly-input-radio", { key: '15856b48204c21b5f7318df22130e17aa3e14e8d', clearable: true, name: "radioFirstInput" }, index$1.h("label", { key: 'c94b6e0c185c8ab4325161a6e4249863017e5eb2', slot: "label" }, "Clearable"), index$1.h("smoothly-input-radio-item", { key: 'e978bde5ec519ab872eac3fb2a7d75b493099f31', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: '3c30fd0d9b549f93c912759f8329570db377df79', selected: true, value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '2f3f773cade1c39fa2a121b24ba2778a42d9a9b0', value: "third" }, "Label 3")), index$1.h("smoothly-input-color", { key: 'f1e0b0b1e759c85c5de1f3a8af9818b41c692bdb', name: "color" }, "Color"), index$1.h("smoothly-input-select", { key: '7e1069ff0515224e17145539afefec11979ed88c', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index$1.h("label", { key: 'c42749acb44e6e7db99f4e7981f20ad0c09f1694', slot: "label" }, "Month multiple select"), index$1.h("smoothly-item", { key: 'fdd0c90294bdf50d77ccf187777fdd804760b8ac', value: "1" }, "January"), index$1.h("smoothly-item", { key: '4f0c9d90f6909eaacccd5d385e317832f5a8b213', value: "2" }, "February"), index$1.h("smoothly-item", { key: '7779ea4af1f17cb48ef0249b7857262deb6c485d', value: "3" }, "March"), index$1.h("smoothly-item", { key: '5f15c3d32240bfb7c3b8d0a61f90599697b8e2a0', value: "4" }, "April"), index$1.h("smoothly-item", { key: '0952c95b2cf623f5573d70b5fa39b1c1ce008f16', value: "5" }, "May"), index$1.h("smoothly-item", { key: '1352e9245e39341d99d1bc8d051691b6b70dac37', value: "6" }, "June"), index$1.h("smoothly-item", { key: '7eddedff608a9148cb2b9c17f23ac2108b2190fd', value: "7" }, "July"), index$1.h("smoothly-item", { key: '627e81c5c7ddd5e1230b6eead20ac7932edbff9a', value: "8" }, "August"), index$1.h("smoothly-item", { key: '587bcf666e0bc92c14f5665f975563f06a419bac', value: "9" }, "September"), index$1.h("smoothly-item", { key: '896f05e2b88d7613cbc7f21b2aa4c58f1ae3938d', value: "10" }, "October"), index$1.h("smoothly-item", { key: 'fb539afa5edd3fe8391df5fc9d63fcb84940512c', value: "11" }, "November"), index$1.h("smoothly-item", { key: '959e9af2c479a299431f302041649bd86f5db331', value: "12" }, "December")), index$1.h("smoothly-input-select", { key: '64e83fb7dba19c8c21b5697eade0c7c5404d330c', name: "select-icon", clearable: false, showSelected: false }, index$1.h("smoothly-item", { key: 'b1a055ab1c73f28e0b49e626561aeff83efb124b', value: "folder", selected: true }, index$1.h("smoothly-icon", { key: '9ba931c9dd28c9f88168f5ab94fd80bc6f7f6bc0', size: "small", name: "folder-outline" })), index$1.h("smoothly-item", { key: 'acd791714a16504b5dc6a56f2fbfc89cf1ef4600', value: "camera" }, index$1.h("smoothly-icon", { key: 'd65e7beb3c74941bf494769126124ef79ce800d0', size: "small", name: "camera-outline" }))), index$1.h("smoothly-input-checkbox", { key: 'd6f2f199daf447bb0992ca8839b89e4e14166846', name: "checkbox" }, "Check the box"), index$1.h("smoothly-input-checkbox", { key: '79885d84642626f7cba6d348d0044f2c8037007e', name: "checkbox2", checked: true }, "Check the box 2"), index$1.h("smoothly-input-range", { key: '7e791279c3b1bd2898d4c5e9e35ef9df76aa14cf', step: 1, name: "range3", value: 20, label: "Range" }), index$1.h("smoothly-input", { key: 'f7b07cef9882952dc91be6484c04ba459ef5db62', name: "pets.0.name" }, "First Pet's Name"), index$1.h("smoothly-input-range", { key: '44b404105c6d9aa19c7f14ac529e7b8ab3f964e9', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index$1.h("smoothly-input", { key: 'aca9bc7aebd243f8e82158d1c60b7a69886e9a02', name: "pets.1.name" }, "Second Pet's Name"), index$1.h("smoothly-input-range", { key: '674b16d94949bcbd3fd4980b0b262ba580efbd5b', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index$1.h("smoothly-input", { key: 'b25175ffa941b70d606a66db0f97e61547faf5b9', name: "pets.2.name" }, "Third Pet's Name"), index$1.h("smoothly-input-range", { key: '0113d466fc09afc4734a65500cdc20b06267d77d', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index$1.h("smoothly-input-file", { key: 'cd15c39915ea43095e237f4f1952ed271f6e756b', name: "profile", placeholder: "Click or drag your profile picture here..." }, index$1.h("span", { key: 'a6138d70fbf10e1cf7cc4ad624422315d05c9619', slot: "label" }, "Profile"), index$1.h("smoothly-icon", { key: '5c53d92dd91402c2db9d57dc3dfd274cbea4b730', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index$1.h("smoothly-input", { key: '497261e5f152c2af406dcc6860a6092df8bbe1af', type: "duration", name: "duration", value: {} }, "Duration"), index$1.h("smoothly-input-clear", { key: '7ba91aa6d31f7ff2ebbb3d07bd958610aad0fc1f', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index$1.h("smoothly-input-edit", { key: 'fd6a01b3f7417aa4074bbf2ca385cec9d437e429', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index$1.h("smoothly-input-reset", { key: '3221d6e405488a7af0b917c99ee7f5acd9ca9f1d', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index$1.h("smoothly-input-submit", { key: 'e81eff668f6592a23f3f13262c123e97d1ca6c30', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index$1.h("smoothly-input-submit", { key: '334bca3eb505ccd23c75efe1d3d66faa7638f4e0', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+            } }, index$1.h("smoothly-input", { key: '4ec033bb9d51a7edc81cce2a1fde55bd21458318', readonly: true, name: "First Name", value: "John" }, "First name"), index$1.h("smoothly-input", { key: '8d6abee797b1c9b60efeb068c828453174401012', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index$1.h("smoothly-input-clear", { key: '8caeac3cbd2290eaeeda549aea083d4499b960c5', size: "icon", slot: "end" })), index$1.h("smoothly-input", { key: '9a22277ed064a84b98a8c68c5f176758735748f0', type: "phone", name: "Phone", value: "777888999" }, "Phone", index$1.h("smoothly-input-reset", { key: '2b45ff8ceaf71289d350e102d53123dc1c82600f', size: "icon", slot: "end" })), index$1.h("smoothly-input-radio", { key: '15856b48204c21b5f7318df22130e17aa3e14e8d', clearable: true, name: "radioFirstInput" }, index$1.h("label", { key: 'c94b6e0c185c8ab4325161a6e4249863017e5eb2', slot: "label" }, "Clearable"), index$1.h("smoothly-input-radio-item", { key: 'e978bde5ec519ab872eac3fb2a7d75b493099f31', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: '3c30fd0d9b549f93c912759f8329570db377df79', selected: true, value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '2f3f773cade1c39fa2a121b24ba2778a42d9a9b0', value: "third" }, "Label 3")), index$1.h("smoothly-input-color", { key: 'f1e0b0b1e759c85c5de1f3a8af9818b41c692bdb', name: "color" }, "Color"), index$1.h("smoothly-input-select", { key: '7e1069ff0515224e17145539afefec11979ed88c', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index$1.h("label", { key: 'c42749acb44e6e7db99f4e7981f20ad0c09f1694', slot: "label" }, "Month multiple select"), index$1.h("smoothly-item", { key: 'fdd0c90294bdf50d77ccf187777fdd804760b8ac', value: "1" }, "January"), index$1.h("smoothly-item", { key: '4f0c9d90f6909eaacccd5d385e317832f5a8b213', value: "2" }, "February"), index$1.h("smoothly-item", { key: '7779ea4af1f17cb48ef0249b7857262deb6c485d', value: "3" }, "March"), index$1.h("smoothly-item", { key: '5f15c3d32240bfb7c3b8d0a61f90599697b8e2a0', value: "4" }, "April"), index$1.h("smoothly-item", { key: '0952c95b2cf623f5573d70b5fa39b1c1ce008f16', value: "5" }, "May"), index$1.h("smoothly-item", { key: '1352e9245e39341d99d1bc8d051691b6b70dac37', value: "6" }, "June"), index$1.h("smoothly-item", { key: '7eddedff608a9148cb2b9c17f23ac2108b2190fd', value: "7" }, "July"), index$1.h("smoothly-item", { key: '627e81c5c7ddd5e1230b6eead20ac7932edbff9a', value: "8" }, "August"), index$1.h("smoothly-item", { key: '587bcf666e0bc92c14f5665f975563f06a419bac', value: "9" }, "September"), index$1.h("smoothly-item", { key: '896f05e2b88d7613cbc7f21b2aa4c58f1ae3938d', value: "10" }, "October"), index$1.h("smoothly-item", { key: 'fb539afa5edd3fe8391df5fc9d63fcb84940512c', value: "11" }, "November"), index$1.h("smoothly-item", { key: '959e9af2c479a299431f302041649bd86f5db331', value: "12" }, "December")), index$1.h("smoothly-input-select", { key: '64e83fb7dba19c8c21b5697eade0c7c5404d330c', name: "select-icon", clearable: false, showSelected: false }, index$1.h("smoothly-item", { key: 'b1a055ab1c73f28e0b49e626561aeff83efb124b', value: "folder", selected: true }, index$1.h("smoothly-icon", { key: '9ba931c9dd28c9f88168f5ab94fd80bc6f7f6bc0', size: "small", name: "folder-outline" })), index$1.h("smoothly-item", { key: 'acd791714a16504b5dc6a56f2fbfc89cf1ef4600', value: "camera" }, index$1.h("smoothly-icon", { key: 'd65e7beb3c74941bf494769126124ef79ce800d0', size: "small", name: "camera-outline" }))), index$1.h("smoothly-input-checkbox", { key: 'd6f2f199daf447bb0992ca8839b89e4e14166846', name: "checkbox" }, "Check the box"), index$1.h("smoothly-input-checkbox", { key: '79885d84642626f7cba6d348d0044f2c8037007e', name: "checkbox2", checked: true }, "Check the box 2"), index$1.h("smoothly-input-range", { key: '7e791279c3b1bd2898d4c5e9e35ef9df76aa14cf', step: 1, name: "range3", value: 20, label: "Range" }), index$1.h("smoothly-input", { key: 'f7b07cef9882952dc91be6484c04ba459ef5db62', name: "pets.0.name" }, "First Pet's Name"), index$1.h("smoothly-input-range", { key: '44b404105c6d9aa19c7f14ac529e7b8ab3f964e9', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index$1.h("smoothly-input", { key: 'aca9bc7aebd243f8e82158d1c60b7a69886e9a02', name: "pets.1.name" }, "Second Pet's Name"), index$1.h("smoothly-input-range", { key: '674b16d94949bcbd3fd4980b0b262ba580efbd5b', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index$1.h("smoothly-input", { key: 'b25175ffa941b70d606a66db0f97e61547faf5b9', name: "pets.2.name" }, "Third Pet's Name"), index$1.h("smoothly-input-range", { key: '0113d466fc09afc4734a65500cdc20b06267d77d', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index$1.h("smoothly-input-range", { key: 'd06183dd7731f6a70070ff0d823fb18ad8e4a10f', dual: true, name: "dualRange", min: 0, max: 100, step: 1, label: "Dual Range" }), index$1.h("smoothly-input-file", { key: 'ed5cf91c1db69c748cf52d4a99601fc2ddd675eb', name: "profile", placeholder: "Click or drag your profile picture here..." }, index$1.h("span", { key: 'f72fba530a1ee1d6f6a021544863dbb892f5a955', slot: "label" }, "Profile"), index$1.h("smoothly-icon", { key: 'dae1cc212fb3ea87ec62ac7e40c7d489bcb5cb1d', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index$1.h("smoothly-input", { key: '0e9e8dc38f055440bba351cb5b7c3186d480f661', type: "duration", name: "duration", value: {} }, "Duration"), index$1.h("smoothly-input-clear", { key: 'ce7946c654f4a4cef855455a94311b08eee47108', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index$1.h("smoothly-input-edit", { key: 'c77b9febf666fac99980b868327a3a03946edb1a', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index$1.h("smoothly-input-reset", { key: 'd1597484a38571db597eecca554f706f484b8d08', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index$1.h("smoothly-input-submit", { key: '0fb965b190a21ff54bb69a34b41bf8b264b06b81', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index$1.h("smoothly-input-submit", { key: '2003e45ab3c0fa5301cbbc39717b9c2dd3b74af5', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
@@ -5486,7 +5486,7 @@ const SmoothlyFormDemoCard = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '12a00d87271d0af126cadbad9443b858e477561e' }, index$1.h("h2", { key: 'b5f4db995901068b60a0005cd99e81c818ea19cc' }, "Card"), index$1.h("smoothly-form", { key: '327812f8a2d381d9806338675532029d4f42ce59', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index$1.h("smoothly-input", { key: '3379bf37a7333b1599aef7c0362e3e45af69f99d', type: "card-number", name: "card" }, "Card #"), index$1.h("smoothly-input-submit", { key: '66f625510bd3f7f2bcd67671e39a55e4009c6f40', size: "icon", slot: "submit", color: "success", fill: "solid" }), index$1.h("smoothly-input", { key: '2a050bd1808ed0b2b75ba5a62581e942788d115f', type: "card-expires", name: "expires" }, "Expires"), index$1.h("smoothly-input", { key: '4ed6ae1574aaf02fde846bd23dc55782c0f066ac', type: "card-csc", name: "csc" }, "CVV/CVC"), index$1.h("smoothly-input", { key: 'd0e62a606289683f604016a935564f8602daa041', type: "text", name: "name.first" }, "First Name"), index$1.h("smoothly-input", { key: 'bfbd0c1a13053aa98d9a93dcc06ceae8b933561e', type: "text", name: "name.last" }, "Last Name"))));
+        return (index$1.h(index$1.Host, { key: 'd0889b4a3e456b2fb26a93597566c7453d46747f' }, index$1.h("h2", { key: '471a1e8530903494b0bdd1a9eff533019d8c5dd0' }, "Card"), index$1.h("smoothly-form", { key: '2ec006bf008bd8e02a17402a3fb28f5c65123d68', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index$1.h("smoothly-input", { key: '5ef72a77c01144388d22485c148752b64b4a3bf9', type: "card-number", name: "card" }, "Card #"), index$1.h("smoothly-input-submit", { key: 'c00fc4964eaaf03ab3201ea1e698e19e634041f7', size: "icon", slot: "submit", color: "success", fill: "solid" }), index$1.h("smoothly-input", { key: 'bf05960ab0adf45c8ab9438626e6ef6bff49d9c9', type: "card-expires", name: "expires" }, "Expires"), index$1.h("smoothly-input", { key: '3d4ffb589693919a6e24b8870f6b29a3a93d05c9', type: "card-csc", name: "csc" }, "CVV/CVC"), index$1.h("smoothly-input", { key: 'e5238377f611551e8c787df7e111b812776e3ea5', type: "text", name: "name.first" }, "First Name"), index$1.h("smoothly-input", { key: 'bbbf04daa4ce51c605cb4abdfe40f2dcebc9d794', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
@@ -5524,7 +5524,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'be70b1b758bbe11772a1ba8ba7dca4f5405ea651' }, index$1.h("h2", { key: '68973a8cf2107ecaa72790a917cf14191cfd0fa9' }, "Controlled"), index$1.h("smoothly-form", { key: '4da1c66f41c89d78c180b55b3ae1df15190eae0c', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index$1.h("smoothly-input", { key: '201cb10b36c39d6a5a98d456459b82ef9d3f0a7d', type: "text", name: "name", value: this.name }, "Name"), index$1.h("smoothly-input-select", { key: 'a434d27014de8a28230f7bc60a3b5c6b706005b6', name: "currency" }, index$1.h("span", { key: 'eefb198ba0a863dd7c6ff37162383522c722803c', slot: "label" }, "Currency"), this.currencies.map(currency => (index$1.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index$1.h("smoothly-input", { key: '4813e2c249bd21afc6a2c1a6ab78793b49fa2d68' }, "Dummy"), index$1.h("smoothly-input-month", { key: '7225723a71776a7d9d88a21361443128a5893d42', name: "date", value: this.date, next: true, previous: true }, index$1.h("span", { key: 'be0572c78ce576807a459738426416e941a997fd', slot: "year-label" }, "Year"), index$1.h("span", { key: '99bb6cf5516bccb1721013e87ca2bec463341983', slot: "month-label" }, "Month")), index$1.h("smoothly-input-edit", { key: 'b7be05116d563ee33665f502c45bd01d9aaf61e1', slot: "edit", size: "icon", color: "primary", fill: "default" }), index$1.h("smoothly-input-reset", { key: 'bf423459f9b8717e9de26e4c900d054ea90baf7a', slot: "reset", size: "icon", color: "warning", fill: "default" }), index$1.h("smoothly-input-submit", { key: 'fd42172c00aae5c33f2b22e3d3bdccb6e71ec294', slot: "submit", size: "icon", color: "success" }))));
+        return (index$1.h(index$1.Host, { key: '1061bb8a73e16641920a69ed39c2861e1181cfeb' }, index$1.h("h2", { key: '2cda89170ac80504da7efbde49166b1bbdab7ec4' }, "Controlled"), index$1.h("smoothly-form", { key: 'a31ac6ae0da84799c93e0027bb209d151594b6c3', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index$1.h("smoothly-input", { key: '8a5ebd13b22a4b98b427f3090be3415738d29111', type: "text", name: "name", value: this.name }, "Name"), index$1.h("smoothly-input-select", { key: '6c5209dc75ed440b3f42ba06585c3ad056ad09bc', name: "currency" }, index$1.h("span", { key: '6d756e50b45c999a90ef1aafc1020d13d8720269', slot: "label" }, "Currency"), this.currencies.map(currency => (index$1.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index$1.h("smoothly-input", { key: 'b1f7dc38934053c148836e5b5d91accd819a4a5d' }, "Dummy"), index$1.h("smoothly-input-month", { key: 'e8e1765d0ba064787b14bc1a339ac64dca884fab', name: "date", value: this.date, next: true, previous: true }, index$1.h("span", { key: '983f2faab5366f2658f80d2e4f8861df083e0dfe', slot: "year-label" }, "Year"), index$1.h("span", { key: 'a5ee74e1293e85da358c248aa272613948236166', slot: "month-label" }, "Month")), index$1.h("smoothly-input-edit", { key: 'f49c8c23ce5612594a96895cd7d690fac88421e9', slot: "edit", size: "icon", color: "primary", fill: "default" }), index$1.h("smoothly-input-reset", { key: '28ea077e4c88330a476849a178b74abe55658740', slot: "reset", size: "icon", color: "warning", fill: "default" }), index$1.h("smoothly-input-submit", { key: '13b11813f5d9521d04c14b847d4aac6db9ff4a10', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": [{
@@ -5556,7 +5556,7 @@ const SmoothlyFormDemoDate = class {
         event.detail.result(false);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'f6a0bf1656158091b0b9d6647707ec6c919cbf66' }, index$1.h("h2", { key: '210f22f5cbef0a441d7863764a0b6665afecdce1' }, "Date input"), index$1.h("smoothly-form", { key: 'eea3a74d6591f0193d8043d552a506868af1721d', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index$1.h("smoothly-input-date", { key: 'b9fc6aca0411799a7dd952a4ae27fff20bb7a085', name: "date" }, "Date"), index$1.h("smoothly-input-submit", { key: '9abd42160b4efd43ec4e976bd143871437d2d08b', slot: "submit" }, index$1.h("smoothly-icon", { key: '690f42105cb25db4275ba0c03bdaa6a16b24faa3', name: "checkmark-outline" })))));
+        return (index$1.h(index$1.Host, { key: 'f87469968c363fc2e6908a6b8323d31d10e43f7b' }, index$1.h("h2", { key: '1b039d54dc14bd23fdf4a67404493fe4fa1002e5' }, "Date input"), index$1.h("smoothly-form", { key: '503627a427a6e50eaacb0a9aed71b057f0631a35', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index$1.h("smoothly-input-date", { key: 'a0e1a4482ab53227b1833ee32edf37537766c34b', name: "date" }, "Date"), index$1.h("smoothly-input-submit", { key: '3ca7baebc20a2378b0858b84aa4f420d80cc035d', slot: "submit" }, index$1.h("smoothly-icon", { key: '44b553b4e0cdc44462ca87e7a2c25ab86be2cc34', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDate.style = styleCss$11();
@@ -5584,7 +5584,7 @@ const SmoothlyFormDemoDateRange = class {
         event.detail.result(false);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '3833e26bb2993e1c9e34f9ae0e769667be96068f' }, index$1.h("h2", { key: '22a384e50f46467bcbafa7be795461024c25b8b0' }, "Date-range input"), index$1.h("smoothly-form", { key: '201517c3e9cd58a086d978da2b80d94cbb4b7a36', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index$1.h("smoothly-input-date-range", { key: '6cb457ad45877b3e36c60cba1c8f364133648478', name: "range" }, "Range"), index$1.h("smoothly-input-submit", { key: '91e289602933e30ee845516efc85094ff03c453d', slot: "submit" }, index$1.h("smoothly-icon", { key: '93d0acb0034106aeadfb8727cb2bb7e6b1bad52a', name: "checkmark-outline" })))));
+        return (index$1.h(index$1.Host, { key: '4f37b88dde84ff912e87e63fd814017216377e9d' }, index$1.h("h2", { key: 'dea9d4cd7d15f08b949e7f686e0274df57d166b9' }, "Date-range input"), index$1.h("smoothly-form", { key: 'a6a14c6ef899d219179ad3e84ab711bc011fbb3c', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index$1.h("smoothly-input-date-range", { key: '6b4b82499434e807c117b807c4e446cf614762d3', name: "range" }, "Range"), index$1.h("smoothly-input-submit", { key: '99495f5f3db19bd9c443e25ec94d013d6c46fd4f', slot: "submit" }, index$1.h("smoothly-icon", { key: 'ab29510526ee2915eccafbed8eec41bf9f39c7cf', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDateRange.style = styleCss$10();
@@ -5594,7 +5594,7 @@ const SmoothlyFormDemoLogin = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '2c9674e5f435d97bd0387de4d5b91443aa521196' }, index$1.h("h2", { key: 'd1440db142e8443b534d60a050416740e0ba82f9' }, "Login"), index$1.h("smoothly-form", { key: 'f1fa4c58d439b4465a4cc3eaad87637ecbf3ac51', looks: "border" }, index$1.h("smoothly-input", { key: 'c419a3578e1de751d77052c78992bfe9daef6238', type: "text", name: "username" }, "Username"), index$1.h("smoothly-input", { key: 'fbce70bd6ac07efbf59bb39ea1d728a3e78c6d77', type: "password", name: "password" }, "Password"), index$1.h("smoothly-input-reset", { key: '22df0cdc42340f207032132943cd3a5206dee49b', slot: "reset", type: "form", size: "icon", color: "warning" }), index$1.h("smoothly-input-submit", { key: '83967b0011d19526ec165d2888a5bd4533a4cf0c', slot: "submit" }))));
+        return (index$1.h(index$1.Host, { key: '145a8d63bafe3ecc82c765765c4a0f1518960b7b' }, index$1.h("h2", { key: '4318914484c253d03811ec55f71c5a5dd64bc1a9' }, "Login"), index$1.h("smoothly-form", { key: 'dac54028546467ca44a7820470b39bc1af8292e7', looks: "border" }, index$1.h("smoothly-input", { key: '2192584adf11193655e622644f7e40f6ee158693', type: "text", name: "username" }, "Username"), index$1.h("smoothly-input", { key: 'cd8d66e6d9a8a07f25cb8ac4386e3dffa6556d02', type: "password", name: "password" }, "Password"), index$1.h("smoothly-input-reset", { key: 'ffeef7e33af77477942b8990b8e61482037dedb6', slot: "reset", type: "form", size: "icon", color: "warning" }), index$1.h("smoothly-input-submit", { key: '1a0bbd656c65bc7f7e3e5f3c8553b81f5e4a9112', slot: "submit" }))));
     }
 };
@@ -5608,10 +5608,10 @@ const SmoothlyFormDemoPet = class {
     }
     render() {
         var _a, _b;
-        return (index$1.h(index$1.Host, { key: '1e20a61c9db6aafdf47e54ed7aaef6c1ca3d8bfa' }, index$1.h("h2", { key: '45492fefcf3cc0fb1a4010711cf10f0bded34893' }, "Pet"), index$1.h("h3", { key: 'bc05c80a795091886b94ba85dd89746e58159ea3' }, "Value"), index$1.h("smoothly-form", { key: '42a8ccf63773aa8b235931cc66415cfd0f1f0c14', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index$1.h("smoothly-input", { key: '3606396ae683768fb6ef5e5940f43fbef81800c9', type: "text", name: "name.first", value: "Johnny" }, "Name", index$1.h("smoothly-input-reset", { key: '1128b00ce30571d90960f0747caf90394d08f093', slot: "end" })), index$1.h("smoothly-input", { key: 'fbd205ba349d3f754af21ebdc40434946bb712a4', type: "integer", name: "age" }, "Age (Years)"), index$1.h("smoothly-input-checkbox", { key: 'e4465a244c36403f0869f5d739d9cdea595136ce', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index$1.h(index$1.Host, { key: '3555b678ce1821ff509e6c6bf7cd5f846150361e' }, index$1.h("h2", { key: '977304593cbf95b3a07e55d27bcba52421c3a806' }, "Pet"), index$1.h("h3", { key: '30d9e280ca0f61806f9267fd2cb64b0018a13fd0' }, "Value"), index$1.h("smoothly-form", { key: '9fea67b46ff29a01b7a15aa482cd7d756c766315', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index$1.h("smoothly-input", { key: '0e4dcd3f6853fcd923db4e2aec019d5448a9985c', type: "text", name: "name.first", value: "Johnny" }, "Name", index$1.h("smoothly-input-reset", { key: '5741904cab68af6d1be19fe0f8a54490b84d21ba', slot: "end" })), index$1.h("smoothly-input", { key: 'c866df63069281710b3a331655de6d052402b139', type: "integer", name: "age" }, "Age (Years)"), index$1.h("smoothly-input-checkbox", { key: '0b1b661bf19f1ca7fa08fe79af51082843d3170c', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "Has Owner", index$1.h("smoothly-input-reset", { key: '7be8886cdeedbdeb87c28b2024c26bd4532f07ed', slot: "end" })), this.hasOwner && (index$1.h(index$1.Fragment, { key: '972c8da03c31ff920a5131daa1d046f7e80418c1' }, index$1.h("smoothly-input", { key: '4fd076e713c449b56e4d3b38b47009a3301c81df', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name", index$1.h("smoothly-input-reset", { key: '2af7bfb23d1d67903be625827d5d237640fc16b0', slot: "end" })), index$1.h("smoothly-input", { key: 'ba357c367c5006c2002dee8f597b0344572c6238', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index$1.h("smoothly-input-file", { key: '8caa1d54740a0e1fb3b29d709f6feb32c8c45a31', name: "owner.picture" }, index$1.h("span", { key: '10332335746aadd62719e024aaa6f825a5b2800b', slot: "label" }, "Owner picture")), index$1.h("smoothly-input-date", { key: 'c8c1afc04ae737af2b45c061ee21b4dfb1713869', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", index$1.h("smoothly-input-reset", { key: 'e13a649d0d308340d419d2355d7d48fbfce257e7', slot: "end" })), index$1.h("smoothly-input-date-range", { key: '952264d17218340e89fe16c40b6003ee94f34c9e', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange", index$1.h("smoothly-input-reset", { key: 'f99d74c312b6b7ddc3d3b169b672d3cc478cb3a3', slot: "end" })), index$1.h("smoothly-input-range", { key: 'd799c177fa826a5a582d1785add6d9ac512434a2', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height", index$1.h("smoothly-input-reset", { key: 'a872fe1b4ae49293daad5ca2c781fe9abe514b95', slot: "end" })), index$1.h("smoothly-input-select", { key: 'cc6a5ef5238abc4dce3c2321c8f5c184c0dfe320', name: "owner.favoriteHat" }, index$1.h("span", { key: 'a073973ff9b090a82a23b81ca82875ac5155f822', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (index$1.h("smoothly-item", { value: value, key: index, selected: this.owner.favoriteHat == value }, value))), index$1.h("smoothly-input-reset", { key: 'c39f9d320b08362f082749f5338de8d4530f9da5', slot: "end" })), index$1.h("smoothly-input-color", { key: '50e462d1f87b19685f627deb90d9eb3d2798c15a', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color", index$1.h("smoothly-input-reset", { key: 'd63535ee7ac6bae7424f60bff48cc5342594ced6', slot: "end" })), index$1.h("smoothly-input-radio", { key: 'f015946e2a17358be9f8279c5f92566101dd69ef', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index$1.h("span", { key: '0e33220f442cf7e1b2908259c68bbf196fe2d2b2', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (index$1.h("smoothly-input-radio-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-checkbox", { key: '7db7129193020bc6375b859f8eed9bbd3a774b72', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index$1.h("smoothly-tabs", { key: 'c02261545ec207a2be19261796ff1ab0322221c7' }, index$1.h("smoothly-tab", { key: '64fc9145089d8175e87b77746a301d2a300227ff', label: "Dog", name: "dog" }, index$1.h("smoothly-input", { key: '93efb08d77a27ebeb0ec1ffaa31d8f20ad1c5c79', type: "text", name: "dog.breed" }, "Breed"), index$1.h("smoothly-input-file", { key: 'fbb759287fbb384110dab6bd67e526e0e1b87061', name: "dog.picture" }, index$1.h("span", { key: '75354c72313adfbf2f0590a4a1d629b056a584d0', slot: "label" }, "Dog picture")), index$1.h("smoothly-input-date-time", { key: '67cb08aae3427ea09418763cd4f5c89f4c12885c', name: "dog.lastWalk" }, "Time of last walk"), index$1.h("smoothly-input-date", { key: 'bfc8d1878f5e8c0b9e06dd6db93c5414d072aade', name: "dog.birthday" }, "Dog birthday"), index$1.h("smoothly-input-date-range", { key: 'd89333abe0b84513f7b59d0910ec979dc63e4f76', name: "dog.dateRange" }, "Dog date range"), index$1.h("smoothly-input-select", { key: '0ca96cd6cd0ed9d0d0b6e3212c4e545b1783edda', name: "dog.favoriteHat" }, index$1.h("span", { key: 'e9bb41040522fc010702793420c2f448fa2fc0af', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (index$1.h("smoothly-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-color", { key: '609b660e2980b33ac4c437fd3a2cecc212fb700d', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index$1.h("smoothly-input-radio", { key: '496506fd830c3da16c3cbb32ed7a93b54e1d023f', name: "dog.favoritePizza" }, index$1.h("span", { key: '59bdad0dc97036ca753d7de08dadcd9ab888df47', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (index$1.h("smoothly-input-radio-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-checkbox", { key: '2ad32725e92f4eb3f6402751facf72563491a5a7', name: "dog.hasPet" }, "Has Pet")), index$1.h("smoothly-tab", { key: '09d4b79adbbf8772285a13ce1bb45fea67c3c019', label: "Cat", name: "cat", open: true }, index$1.h("smoothly-input", { key: '2a298883bf58261ec42cd8a7cb220421604233f2', name: "cat.favoriteFood" }, "Favorite Food")), index$1.h("smoothly-tab", { key: '6ded1101edaf7025402e2084cfa3d530a9440497', label: "Parrot", name: "parrot" }, index$1.h("smoothly-input", { key: 'c6fec8eff6ed07080cfcfd7e04a1accd9be5e698', type: "price", name: "parrot.price", currency: "EUR" }, "Summary Price"), index$1.h("smoothly-input-file", { key: '1ef6c74c21f3a530ea18a5fb843c0f39c5d09a5c', name: "parrot.picture" }, index$1.h("span", { key: '1506866be3f7d5032caa07277ddb4900adf796e4', slot: "label" }, "Summary picture"), index$1.h("smoothly-input-clear", { key: '2768b4e77018167d8c5459561627c7176f6af19e', slot: "end" })), index$1.h("smoothly-input-date", { key: '4482cadd8c81d8cf68d01d940759c9c8fa302889', name: "parrot.birthday" }, "Summary birthday"), index$1.h("smoothly-input-date-range", { key: '1db7a128f9fe548e64a26b106f0428cf027515dd', name: "parrot.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", index$1.h("smoothly-input-reset", { key: 'f61bb824149c3927ee9e7df5474bc1140b557c2d', slot: "end" })), index$1.h("smoothly-input-range", { key: '455be79335de1c32001a9baf41bc6601600a6f2b', name: "parrot.height", label: "Height" }, index$1.h("smoothly-input-reset", { key: 'f0c5284602a08d52331e2fca63bf561212bce4f9', slot: "end" })), index$1.h("smoothly-input-select", { key: '2b5d15b9bdda780755ddb704019bdf9b075f7593', name: "parrot.favoriteHat" }, index$1.h("span", { key: 'e23e7228157f39f8d5b565c6283e65d848d662f2', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (index$1.h("smoothly-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-month", { key: '282eb367f0a8bbcc9b296358933c83a2ab1246a2', name: "parrot.month" }, index$1.h("span", { key: '46678c21d019c38d586da52a8ca5ba14e54f9545', slot: "month-label" }, "Summary month")), index$1.h("smoothly-input-color", { key: '74de10bf1eb9a54f1f5139f9b7549b84d90f521e', name: "parrot.color" }, "Summary Color"), index$1.h("smoothly-input-radio", { key: '2135343dbedb74df58a88e011921ed5cf93a8f69', name: "parrot.favoritePizza" }, index$1.h("span", { key: 'b549ce953d14b96b12496f989cf8c237fa697d6d', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (index$1.h("smoothly-input-radio-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-checkbox", { key: 'e4fd4673ea5c4feb91142062527f7537f715738e', name: "parrot.hasPet" }, "Has Pet"))), index$1.h("smoothly-input-submit", { key: 'c757eec9af05b183a036119430533a2fdfa7ff26', size: "icon", slot: "submit", color: "success", fill: "solid" })), index$1.h("smoothly-display", { key: '94108e7af02550ba3ea038b879e0db56fe057833', type: "json", value: this.value })));
+            } }, "Has Owner", index$1.h("smoothly-input-reset", { key: 'b11ab6e4f6c4f5c3b58b7b1d697031830ef6c897', slot: "end" })), this.hasOwner && (index$1.h(index$1.Fragment, { key: 'f73c34c51c677c929481e3467a4a1720d2af6192' }, index$1.h("smoothly-input", { key: '93e88b422344bf296bc08e1c87153ee5e171f116', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name", index$1.h("smoothly-input-reset", { key: 'b7364d965671c8389a4ebf10b6dff81a8f83579d', slot: "end" })), index$1.h("smoothly-input", { key: 'e02d9a248eadadca31f2b7e54a4fe2d7dcb78ab7', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index$1.h("smoothly-input-file", { key: 'c62884a682169ef822236373673f6b21c960fe79', name: "owner.picture" }, index$1.h("span", { key: 'dee1e245fbb06cfff787b50beff581bc48dff312', slot: "label" }, "Owner picture")), index$1.h("smoothly-input-date", { key: '968c755e88629fd76f61cc109f8a7c85c6b87b14', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", index$1.h("smoothly-input-reset", { key: 'bdc545954853494c63ec34555b90f35f12a081c1', slot: "end" })), index$1.h("smoothly-input-date-range", { key: 'e18ac1955b66407c2dd2aebb3d1b616752cba832', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange", index$1.h("smoothly-input-reset", { key: '56d1ce3d8b2a0a0daf1b0e66b5e5fd2fca291d12', slot: "end" })), index$1.h("smoothly-input-range", { key: 'aa6cf832bc63235bc0590ac6cab2da6b1d5923f0', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height", index$1.h("smoothly-input-reset", { key: 'ecae9fdf30760aa00a799a24729221ef0bb26786', slot: "end" })), index$1.h("smoothly-input-select", { key: '587127c00899a6b985a1ba41f73c906e94abf504', name: "owner.favoriteHat" }, index$1.h("span", { key: '02289ec45dd570ca382776beb9fa34d2552d92da', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (index$1.h("smoothly-item", { value: value, key: index, selected: this.owner.favoriteHat == value }, value))), index$1.h("smoothly-input-reset", { key: '52aeef0a52c37c0ad9236c99e3a5af20c26f7c6d', slot: "end" })), index$1.h("smoothly-input-color", { key: '2640d32a91c9e12b2ffb9564e44e43bd24d97162', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color", index$1.h("smoothly-input-reset", { key: '9253ea9ae7e24f1fc70da6f7ab04bbe38599024a', slot: "end" })), index$1.h("smoothly-input-radio", { key: 'f6b4f1e0b3c1e8eef422c154b22454610e7e6af3', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index$1.h("span", { key: '6ec795591acadf04027319369d72e9470787945f', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (index$1.h("smoothly-input-radio-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-checkbox", { key: '34815b0ebee805a4481312379025218fd46f01c7', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index$1.h("smoothly-tabs", { key: 'ae43c2284ea51f72e415e00a1ada8cab10afebdb' }, index$1.h("smoothly-tab", { key: '6485c24546d14f5845987da38646066c8f066c61', label: "Dog", name: "dog" }, index$1.h("smoothly-input", { key: '257d6b7f1140ff7210173fb0e5de4704000bc432', type: "text", name: "dog.breed" }, "Breed"), index$1.h("smoothly-input-file", { key: 'a75e2029fe5b630410fee39462d197489a5291db', name: "dog.picture" }, index$1.h("span", { key: '7d881935f028284bb80a3e33a47baf59813bc63a', slot: "label" }, "Dog picture")), index$1.h("smoothly-input-date-time", { key: 'f8991e1f543ad09a241977a2570a473597c79a80', name: "dog.lastWalk" }, "Time of last walk"), index$1.h("smoothly-input-date", { key: 'abdf29fd0b95142a6a28aacbc2a3de52b28acfa6', name: "dog.birthday" }, "Dog birthday"), index$1.h("smoothly-input-date-range", { key: '07710a1af7f884114fee361d80b27e9351cd85d5', name: "dog.dateRange" }, "Dog date range"), index$1.h("smoothly-input-select", { key: '1307c6bdafc9598e829ee60c4ce7c1b1546dc7af', name: "dog.favoriteHat" }, index$1.h("span", { key: '4ed1cd24bba8e63db60d63cffdd1417023117a2d', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (index$1.h("smoothly-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-color", { key: '0b049778a99bee6df6d2ec48dbc071697136fe16', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index$1.h("smoothly-input-radio", { key: 'c65093016a5b90c6bb25e85e4e3575124712c7be', name: "dog.favoritePizza" }, index$1.h("span", { key: '9565009584ed77b05040ed9468700f116adb563c', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (index$1.h("smoothly-input-radio-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-checkbox", { key: '666be38409bc89d3e4650ad9401c854327ebefc1', name: "dog.hasPet" }, "Has Pet")), index$1.h("smoothly-tab", { key: 'fb5f8f5459b5f642b0c6a2439b319a42002959a4', label: "Cat", name: "cat", open: true }, index$1.h("smoothly-input", { key: '682f5638f562e61dd092f83eccf7925f720cf194', name: "cat.favoriteFood" }, "Favorite Food")), index$1.h("smoothly-tab", { key: 'c5482174c9405a1136f012fa82cca350c2ed83c2', label: "Parrot", name: "parrot" }, index$1.h("smoothly-input", { key: 'f78b450a29382f8f856ebbff27745c953af53308', type: "price", name: "parrot.price", currency: "EUR" }, "Summary Price"), index$1.h("smoothly-input-file", { key: 'efbd349e10beda447d69c20474c692e2688bcaab', name: "parrot.picture" }, index$1.h("span", { key: '01a1817ed064f0181742eb5aeb3f2723338f84e7', slot: "label" }, "Summary picture"), index$1.h("smoothly-input-clear", { key: 'be120da97155f2f5591d924aa32604d6086e31c1', slot: "end" })), index$1.h("smoothly-input-date", { key: 'e59e3a24b479cfbd94eb3c6c7c5f394f93049274', name: "parrot.birthday" }, "Summary birthday"), index$1.h("smoothly-input-date-range", { key: '4e918229a0745964257c0fb32f0ecd1a4283cdca', name: "parrot.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", index$1.h("smoothly-input-reset", { key: '514983470344439c22cc6b68bace5b1609f04f89', slot: "end" })), index$1.h("smoothly-input-range", { key: 'cca92a33c0bc46d7bf85e86e467b9f703063d35d', name: "parrot.height", label: "Height" }, index$1.h("smoothly-input-reset", { key: 'edb1126fcabc71b9d98f33257c8d282982e8ea36', slot: "end" })), index$1.h("smoothly-input-select", { key: '868654a72f5642b033392aa33b3b107b1d7ddfa4', name: "parrot.favoriteHat" }, index$1.h("span", { key: 'f811c0c08c4277aba3e85da353903b0185bb9df7', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (index$1.h("smoothly-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-month", { key: '4226a5e036817f3a80fce926c6761cee1a8bcd66', name: "parrot.month" }, index$1.h("span", { key: '61570b4fc31693fd2d3f81bea327cfc890ea6c54', slot: "month-label" }, "Summary month")), index$1.h("smoothly-input-color", { key: '23a77f1358748ee93995b71253bf43641593fc3c', name: "parrot.color" }, "Summary Color"), index$1.h("smoothly-input-radio", { key: 'a32718e3246ec6ffa4cb33eab22c6e549ef764f0', name: "parrot.favoritePizza" }, index$1.h("span", { key: '5283e5e305bbc586ac74665518f077a2b20e261a', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (index$1.h("smoothly-input-radio-item", { value: value, key: index }, value)))), index$1.h("smoothly-input-checkbox", { key: '15c5b92cd4ee1c6f46880327a7737abba978cb6a', name: "parrot.hasPet" }, "Has Pet"))), index$1.h("smoothly-input-submit", { key: '975b1bbb887c933a2eacb4bc1a79dfdf99d73972', size: "icon", slot: "submit", color: "success", fill: "solid" })), index$1.h("smoothly-display", { key: '09fef0282ab5dea1bceacee812f4d9563c21ed2c', type: "json", value: this.value })));
     }
 };
 SmoothlyFormDemoPet.style = styleCss$$();
@@ -5621,7 +5621,7 @@ const SmoothlyFormDemoPrices$1 = class SmoothlyFormDemoPrices {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c1873c86bb44177e638d7b52d7bbbcb1d0482e1b' }, index$1.h("h2", { key: 'a8edb5f0241dac96350d75eaad7b0c78adf1c13b' }, "Prices"), index$1.h("smoothly-form", { key: '143874192e2caf3ce0297983e1c5ecc6002705a2', looks: "line" }, index$1.h("smoothly-input", { key: '151a20903ab8024b291ef1cd6f868bfcbdfdf187', type: "price", name: "no" }, "No currency"), index$1.h("smoothly-input", { key: 'c7a5959241c42d8fee2d741064585c1c79560544', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index$1.h("smoothly-input", { key: 'cfe92d5a2e94598e728d0f0b815652e4ed6d33e1', type: "price", name: "usDollar", currency: "USD" }, "USD"), index$1.h("smoothly-input", { key: 'bd3ffd16af42eb13fe3d6ea4ddad8ceb83827671', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index$1.h("smoothly-input", { key: 'a12b9078e45b65a5b281a0c4ff40caf6446522b8', type: "price", name: "peso", currency: "UYW" }, "UYW"), index$1.h("smoothly-input", { key: 'a8a1efcb2bacb8e56b552aeda19e65eca5690fd3', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index$1.h("smoothly-input", { key: 'be59abc2f31cb215c192566ca4218a19cf2f004a', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index$1.h("smoothly-input-reset", { key: 'a331ae378f5c10553c3b7f7669322c3d4e9d9973', slot: "reset", fill: "default", type: "form", color: "warning" }), index$1.h("smoothly-input-submit", { key: 'bef886536c5366779bf3c7c10e35a3e42f65075b', slot: "submit" }))));
+        return (index$1.h(index$1.Host, { key: 'd89cfc4c738e18c59e84d5a40ac90b59ebcaa551' }, index$1.h("h2", { key: 'd16f1cd51c9a42f877e8e63bd29f7dcb438fa618' }, "Prices"), index$1.h("smoothly-form", { key: '54c6b506b280868839cf1c7b8c164f522a75f565', looks: "line" }, index$1.h("smoothly-input", { key: 'fc19f9f370d6a24be561adf18631cfda95ad27fe', type: "price", name: "no" }, "No currency"), index$1.h("smoothly-input", { key: '339ee6c1ec60a602b3393741a54cbdb4a7847453', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index$1.h("smoothly-input", { key: '9bc604033f31ac1469bd7b50ff0c69baeab75b22', type: "price", name: "usDollar", currency: "USD" }, "USD"), index$1.h("smoothly-input", { key: '9e38c5260d5cef788a1b1e493a54de7350d5ce10', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index$1.h("smoothly-input", { key: '63bb932ba93d35014c30c6ff8e0ff7cb0275da6a', type: "price", name: "peso", currency: "UYW" }, "UYW"), index$1.h("smoothly-input", { key: 'b0e40b64dc06806a270439ee5eef3ebbf65cfc06', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index$1.h("smoothly-input", { key: '1b9e0e5f2c19a80eebc03c24c90e28f91c4be87d', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index$1.h("smoothly-input-reset", { key: 'cf298b534cb48e04ddf87ad3bad2297254c7dfab', slot: "reset", fill: "default", type: "form", color: "warning" }), index$1.h("smoothly-input-submit", { key: '0db94f32db809a84dfec09db0f8af27de58745fa', slot: "submit" }))));
     }
 };
@@ -5641,7 +5641,7 @@ const SmoothlyFormDemoPrices = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'af726abe173fe267f43278671ab53c62184ca7b3' }, index$1.h("h2", { key: '85994b1d612017c07fcbff85d1c7520419c4125f' }, "Schedule"), index$1.h("smoothly-form", { key: '7bace3476a4344bb7ece715a3d797acadf40dd58', looks: "line", validator: TimeTable.type }, index$1.h("smoothly-input-date", { key: '5450e239098e87b0eacc7da44459d35dc30bb5dc', name: "schedule.0.date" }, "Date"), index$1.h("smoothly-input", { key: '9cc1b52c9f636a99b549267198503d47b3afb0f8', name: "schedule.0.amount", type: "price" }, "Amount"), index$1.h("smoothly-input-date", { key: '5f298fa2efabe38e2aef28d9c992ec1ec0804b46', name: "schedule.1.date" }, "Date"), index$1.h("smoothly-input", { key: 'b71aba89d7e05258226fbbaaf705dc9c435a1c37', name: "schedule.1.amount", type: "price" }, "Amount"), index$1.h("smoothly-input-date", { key: '22095cea02b58862ae930857daee6242a51b33b6', name: "schedule.2.date" }, "Date"), index$1.h("smoothly-input", { key: '9c33bd7be7e0de733986cc2ef6f9c2e52b3f273a', name: "schedule.2.amount", type: "price" }, "Amount"), index$1.h("smoothly-input-reset", { key: 'b02b3225e549665b393a77627da3304881473f9e', slot: "reset", fill: "default", type: "form", color: "warning" }), index$1.h("smoothly-input-submit", { key: '25d0d08fb11531e71d0f9c4a9394d3bb36a0565c', slot: "submit" }))));
+        return (index$1.h(index$1.Host, { key: 'a2126d7eaeabd3063412c258990a01b868a0c173' }, index$1.h("h2", { key: '872ca8c246de93f89109157b26f4ef1c9a9391ad' }, "Schedule"), index$1.h("smoothly-form", { key: '89c101a95b88d1ff8b8da72905b2e096dd98ddc5', looks: "line", validator: TimeTable.type }, index$1.h("smoothly-input-date", { key: '8413214b637cfe958f89bdf1c71fc77709f18103', name: "schedule.0.date" }, "Date"), index$1.h("smoothly-input", { key: '3e611fb26a30656a7e564137421cd0d14da1ca95', name: "schedule.0.amount", type: "price" }, "Amount"), index$1.h("smoothly-input-date", { key: '7a17cd21c525191ff38c33598f4e4fbca854ec14', name: "schedule.1.date" }, "Date"), index$1.h("smoothly-input", { key: 'd15a3abf4d7f73a8c926c5aa1585b41d998ca0cd', name: "schedule.1.amount", type: "price" }, "Amount"), index$1.h("smoothly-input-date", { key: '4ee81b72873b84cbdbec86b3ed5503c7b5a251e3', name: "schedule.2.date" }, "Date"), index$1.h("smoothly-input", { key: '34d786c0cc21d919af28f510a597609f8941abbb', name: "schedule.2.amount", type: "price" }, "Amount"), index$1.h("smoothly-input-reset", { key: 'a397f462d936320060941134796d925b855c0d87', slot: "reset", fill: "default", type: "form", color: "warning" }), index$1.h("smoothly-input-submit", { key: '43220117e87d3d7145b25915caa03850477c3795', slot: "submit" }))));
     }
 };
@@ -5650,7 +5650,7 @@ const SmoothlyFormDemoTransparent = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'fc0659542a5e17d903ecb4da9aee7679ef39cdec' }, index$1.h("h2", { key: '1d1b9ac96324d7c421cdb19d2734bd2fbbb5a8fb' }, "Transparent"), index$1.h("smoothly-form", { key: '992b6ce5260a8af1f63b9025faca67acef755dc2', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index$1.h("smoothly-input-file", { key: 'e79178c59b6617703cb42fdeb16a246047110f85', name: "file" }, index$1.h("span", { key: '0c34c069e55446fdf26eef201f492000b1692a3e', slot: "label" }, "File"), index$1.h("smoothly-icon", { key: '85c1a66268e78a94b308be411ff5cb712890a1b0', slot: "button", name: "folder-open-outline", size: "small" })), index$1.h("smoothly-input", { key: '64c3c4206bf9455f5c923c427cae185c5f84ca60', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index$1.h("smoothly-input-date", { key: '006326702c0d9d6f349292de7531b390e6b7add8' }, "Date"), index$1.h("smoothly-input-date-range", { key: '78784fe14706cbbb5d8ef6d040891127991a418b' }, "Date Range"), index$1.h("smoothly-input-select", { key: 'e48d3d2cd97b472558f2cbfb7c19aed71c505ed1', name: "transport" }, index$1.h("smoothly-item", { key: 'afdc23c9ed61e272893ddd45b70e8d62f0e613fc', value: "plane" }, index$1.h("smoothly-icon", { key: 'ba6c15f1ac729420811ff77b355424426f2b35eb', name: "airplane-outline" })), index$1.h("smoothly-item", { key: '90c591649758b43835de47380f9cf0ba89665a43', value: "car" }, index$1.h("smoothly-icon", { key: '170d4aeeec48e2ea8d57ee17421daa0eacbd6125', name: "car-outline" })), index$1.h("smoothly-item", { key: 'fce1fc75af8d839f10d1057d699b5049cd4bee84', value: "bus", selected: true }, index$1.h("smoothly-icon", { key: '1fbb7c4afc326efe8d569c5c032fb7d285876974', name: "bus-outline" }))), index$1.h("smoothly-input-submit", { key: 'fd292fb5b88f89e103d843e95b14ccf7a3ab9871', icon: "checkbox-outline" }))));
+        return (index$1.h(index$1.Host, { key: '673b06b46e297f0abc1c49bcf7ee7acf46cb0295' }, index$1.h("h2", { key: '4ffa92eb6f9261555d777d05c3e78c404a7df03a' }, "Transparent"), index$1.h("smoothly-form", { key: '03c25db049779ee90220f0028f18e6e70c037408', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index$1.h("smoothly-input-file", { key: '99424c41ab07b388c9e9c35c799e2daec342389b', name: "file" }, index$1.h("span", { key: '4b686a0fe7159e757d1a76070e2b6246e17a15dc', slot: "label" }, "File"), index$1.h("smoothly-icon", { key: '8e323ca63e51c6b5acb6d4d8b31641dbbd4e98b0', slot: "button", name: "folder-open-outline", size: "small" })), index$1.h("smoothly-input", { key: 'fba6aa2567e053902d9100831573d2fc6aaac1b2', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index$1.h("smoothly-input-date", { key: '49eeabd20143a15cf14ff6289a3aa28be531a5d9' }, "Date"), index$1.h("smoothly-input-date-range", { key: 'ea4235cc90265d0b73c96d2f2ee9665ba62c40e4' }, "Date Range"), index$1.h("smoothly-input-select", { key: 'ed44815dd57ba74c31a436fff6ece4edcd8091ae', name: "transport" }, index$1.h("smoothly-item", { key: 'f7679b58d170d3bbf264fc67556b21ecc55c7b3e', value: "plane" }, index$1.h("smoothly-icon", { key: 'a16734c2ed81ae0985db7328c389818d717f976e', name: "airplane-outline" })), index$1.h("smoothly-item", { key: '8c08a4ce4812a1ecb8d0304c002b6179f586a21f', value: "car" }, index$1.h("smoothly-icon", { key: '2488556ed2e45e6e4fff17c647ae987b8f4f1773', name: "car-outline" })), index$1.h("smoothly-item", { key: '5b0cb1c46c7783a49b954b5eba8bafcd23cf2985', value: "bus", selected: true }, index$1.h("smoothly-icon", { key: '62b98cc6a689f5c1d49eee728b697321a85283f8', name: "bus-outline" }))), index$1.h("smoothly-input-submit", { key: '5a229bbbd0cf22d44080a22d583403569ca62a5f', icon: "checkbox-outline" }))));
     }
 };
@@ -5671,7 +5671,7 @@ const SmoothlyFormDemoTyped = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '2dbbb21af22c211fa354d7213c94088ec796cf8d' }, index$1.h("h2", { key: 'f944fd5f9a04be35baa6d04760ef8fd083f84c6c' }, "Typed Contact"), index$1.h("smoothly-form", { key: '43b74057023eda58b4b89ba9c52e59f9f8fd2329', validator: Contact.type }, index$1.h("smoothly-input", { key: '6179ce405787b71e56af49ab16cac3d225476c9b', name: "name.first" }, "First Name"), index$1.h("smoothly-input", { key: '41568d9f6447f715c2d9ca414aeca6e103085df8', name: "name.middle" }, "Middle Name (optional)"), index$1.h("smoothly-input", { key: '71407b265ac5f00f5db126ae0e1b5ced6c329977', name: "name.last" }, "Last Name"), index$1.h("smoothly-input", { key: 'f2dcbd6af35236299eb573d573efa521672c0a4e', name: "age", type: "integer" }, "Age (18-120)"), index$1.h("smoothly-input-select", { key: 'd881ad1a7d8f3b3279c9f4aac5473514a2b95d5f', name: "country" }, index$1.h("span", { key: '1606d2a8eb5f7160abd3c6a4e983561808fabca5', slot: "label" }, "Country"), index.isoly.CountryCode.Alpha2.values.map(country => (index$1.h("smoothly-item", { value: country }, index.isoly.CountryCode.Name.en.from(country))))), index$1.h("smoothly-input-date", { key: '09e7d8d8f9250304279b1d245044b919c147cc1f', name: "birthday" }, "Date of birth"), index$1.h("smoothly-input-reset", { key: 'd212e7a41fba21fc4ba2efd9349834f4c5d8a41d', slot: "reset", type: "form", size: "icon", color: "warning" }), index$1.h("smoothly-input-submit", { key: 'c5e62e8b33276b0f5e16e5c37538cca20c5e2ace', slot: "submit", size: "icon", color: "success" }))));
+        return (index$1.h(index$1.Host, { key: '171f1c7dfeac8a1789c3bc00699ffc273efbd59c' }, index$1.h("h2", { key: 'cc04112cd3cf2a247b4b9310a1f4af3215e755f7' }, "Typed Contact"), index$1.h("smoothly-form", { key: '07052256c424c1d3167d729974ce53660153d6f2', validator: Contact.type }, index$1.h("smoothly-input", { key: '055ac603967bf083319d0fdeaa54f7143419c66b', name: "name.first" }, "First Name"), index$1.h("smoothly-input", { key: '3088fee3b1126a6bf878435428e4922c4c6066c1', name: "name.middle" }, "Middle Name (optional)"), index$1.h("smoothly-input", { key: '936e6cae0987a5524539aa9058213dcb6d32ae00', name: "name.last" }, "Last Name"), index$1.h("smoothly-input", { key: 'f14199b95c41d2573c29b5d0fa02b84de510b6ed', name: "age", type: "integer" }, "Age (18-120)"), index$1.h("smoothly-input-select", { key: '00d2bc235840996e1316a7730e4007d1c65e54fd', name: "country" }, index$1.h("span", { key: '4f287287585dd68aa2d3263ccffc7b240d9d7a0e', slot: "label" }, "Country"), index.isoly.CountryCode.Alpha2.values.map(country => (index$1.h("smoothly-item", { value: country }, index.isoly.CountryCode.Name.en.from(country))))), index$1.h("smoothly-input-date", { key: '74d7b9b3932a9cd9c164e425fc6548a781ab9f09', name: "birthday" }, "Date of birth"), index$1.h("smoothly-input-reset", { key: '1cab6d7ebb9ee4b619a43f400bade9f94d1ed6a7', slot: "reset", type: "form", size: "icon", color: "warning" }), index$1.h("smoothly-input-submit", { key: '2616a4bd6f66a1bd770fa48328562cce56aa0414', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = styleCss$_();
@@ -5772,7 +5772,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index$1.h(index$1.Host, { key: '0a19bf819d57a94f13fc8c2fbc885aebb0bf7a24', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index$1.h(index$1.Host, { key: 'a04fcfccfde192d4146ebb8113809c8606bcd04f', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -5797,25 +5797,25 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ec049b1d4b3d93e28913174bd7ab55ce836298ae' }, index$1.h("h2", { key: 'd0430155840916db4250402c39e5ee2656dc9930' }, "Filter and Variants"), index$1.h("smoothly-form", { key: '4c6f1ffa07fed10ba6051ab4d5f29c1278608b23', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, index$1.h("smoothly-input", { key: 'bea5be3b9c5f839da1fe6efd6497b4fa7c946e77', name: "filter" }, "Filter"), index$1.h("smoothly-input-select", { key: 'a64ee5957e34d669c481b77ba0f561ba5eebfa55', name: "variant" }, index$1.h("span", { key: '80df7e185a498c1c33cfe1c3fde85f955d46f256', slot: "label" }, "Variant"), index$1.h("smoothly-item", { key: 'd6447afb06c4471f9b3036838da77182161ebaf1', value: "outline" }, "outline"), index$1.h("smoothly-item", { key: '6622d9acf5549f05128632e386cafcabd4e5df0d', value: "sharp" }, "sharp"), index$1.h("smoothly-input-clear", { key: '1a94b3d1d195c77716a7a9e92303bab3dffcf8b0', slot: "end" }))), index$1.h("h2", { key: '1320b7b476f6451885fa32dcb0daed671d269612' }, "Props"), index$1.h("smoothly-form", { key: '1bc3722b6b25c57352ff7bc1df1571a3df824611', looks: "grid", onSmoothlyFormInput: e => {
+        return (index$1.h(index$1.Host, { key: '8fbea784d2ed3e61eed53bbde4bf62acd7c00c33' }, index$1.h("h2", { key: 'e0ffda5c80cffb4a5819b69889980d43dc873c5c' }, "Filter and Variants"), index$1.h("smoothly-form", { key: '9734546f38e2bc3aa1136ec2d60ca919f96b7c78', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, index$1.h("smoothly-input", { key: 'fb615bfa1bb32cde349e9461eb7c95db4561c5f1', name: "filter" }, "Filter"), index$1.h("smoothly-input-select", { key: '63402507181804347642d78531856b217174951a', name: "variant" }, index$1.h("span", { key: 'd301e5204b7ce8bc4d3d31ab5c0ced12f1e3d893', slot: "label" }, "Variant"), index$1.h("smoothly-item", { key: 'fca79aa0f519c2c9823c0fc08dba8fc7d017c184', value: "outline" }, "outline"), index$1.h("smoothly-item", { key: '78f2882358c54452f4ce56f976bed73fcade9b4f', value: "sharp" }, "sharp"), index$1.h("smoothly-input-clear", { key: '1f3d317162149b9abd016a5f329d69ac05683646', slot: "end" }))), index$1.h("h2", { key: '3e894f0b4aa610c5a8267a183277e272f4855a9b' }, "Props"), index$1.h("smoothly-form", { key: '694c7a9bd59edbea5823eb04156dc16e0bae9712', looks: "grid", onSmoothlyFormInput: e => {
                 this.props = e.detail;
                 console.log("props", this.props);
-            } }, index$1.h("smoothly-input-select", { key: '8b065ccb0feb16a805a20ee13eab053d0cd8edfe', name: "color" }, index$1.h("span", { key: '3ed5be41ac0893b18741356a70c7653c862579a0', slot: "label" }, "Color"), Scrollable.Color.values.map(color => (index$1.h("smoothly-item", { value: color }, index$1.h("span", { style: {
+            } }, index$1.h("smoothly-input-select", { key: '0c3057a4f67a05e690ff3b063c930465016d8dd6', name: "color" }, index$1.h("span", { key: 'ae91aea176ba10c3da98a60c3063ec0f43167bff', slot: "label" }, "Color"), Scrollable.Color.values.map(color => (index$1.h("smoothly-item", { value: color }, index$1.h("span", { style: {
                 background: `rgb(var(--smoothly-${color}-color))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), index$1.h("span", null, color)))), index$1.h("smoothly-input-clear", { key: '50b90280c6f0600a073b8b8a254fb035f1aefec0', slot: "end" })), index$1.h("smoothly-input-select", { key: 'efda773381d8cb5d491e591b731cea17b406a005', name: "fill" }, index$1.h("span", { key: '396dbb906c3b52b53732b062f5ce8ebe70ce85b6', slot: "label" }, "Fill"), Scrollable.Fill.values.map(fill => (index$1.h("smoothly-item", { value: fill }, fill))), index$1.h("smoothly-input-clear", { key: '44cc4c40f24ad5c978e423496ea30a3068f862a1', slot: "end" })), index$1.h("smoothly-input-select", { key: 'd3aaee102be617722fc42dcd47139fe0d2c7284c', name: "customColor", menuHeight: "12items", ordered: true }, index$1.h("span", { key: 'dc450c6debc6be202b40628ef77196159e45a082', slot: "label" }, "Custom Color"), Scrollable.Color.values.flatMap(c => (index$1.h(index$1.Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (index$1.h("smoothly-item", { value: `--smoothly-${c}-${v}` }, index$1.h("span", { style: {
+            } }), index$1.h("span", null, color)))), index$1.h("smoothly-input-clear", { key: '22657bf293b433e392d57a06ca7ae2301c50676d', slot: "end" })), index$1.h("smoothly-input-select", { key: 'a3cb883bd3ce072da544acb7c4a9d23de599d63f', name: "fill" }, index$1.h("span", { key: 'f2332f34ea7fd13b2722addacbb8ccb0a02a005e', slot: "label" }, "Fill"), Scrollable.Fill.values.map(fill => (index$1.h("smoothly-item", { value: fill }, fill))), index$1.h("smoothly-input-clear", { key: '8518dae156b2233616eaaa468421a05c8f34025f', slot: "end" })), index$1.h("smoothly-input-select", { key: '0c684a06181b5e3aba3e9285c27e5dfc95b11fba', name: "customColor", menuHeight: "12items", ordered: true }, index$1.h("span", { key: 'bdf65faa5cc2d6ac46c2d8f57d12f6c980dbed4f', slot: "label" }, "Custom Color"), Scrollable.Color.values.flatMap(c => (index$1.h(index$1.Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (index$1.h("smoothly-item", { value: `--smoothly-${c}-${v}` }, index$1.h("span", { style: {
                 background: `rgb(var(--smoothly-${c}-${v}))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), index$1.h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), index$1.h("smoothly-input-select", { key: 'a68b41f9a46917cb1b46e9ada61d05c280f92ff0', name: "customBackground", menuHeight: "12items", ordered: true }, index$1.h("span", { key: 'f094c91bdb64df81fd5fc49945b2760c214c37ed', slot: "label" }, "Custom Background"), Scrollable.Color.values.flatMap(c => (index$1.h(index$1.Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (index$1.h("smoothly-item", { value: `--smoothly-${c}-${v}` }, index$1.h("span", { style: {
+            } }), index$1.h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), index$1.h("smoothly-input-select", { key: '38e1df15f3e5756a231ea13ae7e603ad729cbfd5', name: "customBackground", menuHeight: "12items", ordered: true }, index$1.h("span", { key: '034a6c1102fcfc4f84802b652ae4773daedcc79a', slot: "label" }, "Custom Background"), Scrollable.Color.values.flatMap(c => (index$1.h(index$1.Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (index$1.h("smoothly-item", { value: `--smoothly-${c}-${v}` }, index$1.h("span", { style: {
                 background: `rgb(var(--smoothly-${c}-${v}))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), index$1.h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), index$1.h("smoothly-input-select", { key: '676477dc9f358f3512f0fb0f60a99a1deb3fa400', name: "flip" }, index$1.h("span", { key: '7e7924009ac080ccd225052351d0c70079990b6f', slot: "label" }, "Flip"), index$1.h("smoothly-item", { key: '70d21d485c90d881422d4c577fa04f101e0dae13', value: "x" }, "x"), index$1.h("smoothly-item", { key: '7e57ce51632ddd1dbf5fed24f109599de216eb3e', value: "y" }, "y"), index$1.h("smoothly-input-clear", { key: '0ea9f343784f533ebab4bc8d0b0879deb5e75156', slot: "end" })), index$1.h("smoothly-input-select", { key: '67e1d6b7b5e040e5284d0f5984c60a9f57a1d47f', name: "size" }, index$1.h("span", { key: 'e89ec731e273bd86c43d8993c78dbdcb1e052280', slot: "label" }, "Size"), index$1.h("smoothly-item", { key: '06201d3e144034f8984f48a064ea7d01dbdc3a7f', value: "tiny" }, "tiny"), index$1.h("smoothly-item", { key: '5f996913a822077f1fd66371819d528b0f67dc7f', value: "small" }, "small"), index$1.h("smoothly-item", { key: '1aa1eff32b61221555b6356cbe658fb2591a6678', value: "medium" }, "medium"), index$1.h("smoothly-item", { key: '1d18ac8a2bbcc4f16cd19263aa16d2d714582f27', value: "large" }, "large"), index$1.h("smoothly-item", { key: 'a0dd2fc34393ef5fc1ed89f1b000d3a3482a2324', value: "xlarge" }, "xlarge"), index$1.h("smoothly-input-clear", { key: '1cde73483d40576d71b1994ea7a4a18a0df791dc', slot: "end" })), index$1.h("smoothly-input-range", { key: 'c57e682c8ad984279d9b4d4eef60a6c076b3014b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index$1.h("smoothly-input-clear", { key: '485dc43539bb93a6bdd58ab1ba10ac5ee64abb80', slot: "end" }))), index$1.h("h1", { key: 'cef7183437984cc0d8df4765a5afd62790e07881' }, "Icons"), index$1.h("div", { key: '332d4c1168cda7307f00eef4106494860ed0a491', class: "icons" }, [
+            } }), index$1.h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), index$1.h("smoothly-input-select", { key: 'bf07ed563c77658d9c8627794932cf807d4d497c', name: "flip" }, index$1.h("span", { key: 'f117c483d18de238eb575e23c358ecd54eec249f', slot: "label" }, "Flip"), index$1.h("smoothly-item", { key: 'd8d6d1da3ede777093bfb6882c4a34a498b109d1', value: "x" }, "x"), index$1.h("smoothly-item", { key: 'fb202fe8bf15b614abacc3778e49f2a9da67abd8', value: "y" }, "y"), index$1.h("smoothly-input-clear", { key: 'c6067ab01e51359091f41c82f315aa36aad09ad4', slot: "end" })), index$1.h("smoothly-input-select", { key: '9ba36e95d18097099035b4a11182091e1e7e2287', name: "size" }, index$1.h("span", { key: '571f9a1953f6b3f22d18f0dd591c9743d3818687', slot: "label" }, "Size"), index$1.h("smoothly-item", { key: 'c38f009d2fb5df14dc7c5dbde70538f8ae5b3e04', value: "tiny" }, "tiny"), index$1.h("smoothly-item", { key: '800ae091d06fe8f3f9a728ad4ac63b67a7141200', value: "small" }, "small"), index$1.h("smoothly-item", { key: 'b24d245d0614bae7fc0c125824c7cf6ad3a11aa2', value: "medium" }, "medium"), index$1.h("smoothly-item", { key: '8fdb8c8686a36898c63d6981ef44fc2348e6018e', value: "large" }, "large"), index$1.h("smoothly-item", { key: 'a1d2a033d0531ca802a3241f0f7bfe3b9ab6faf6', value: "xlarge" }, "xlarge"), index$1.h("smoothly-input-clear", { key: 'b72340bf5146665b425c1debb51dcf46bab08a72', slot: "end" })), index$1.h("smoothly-input-range", { key: 'b39307e3bd9fb244dd56b4de51f392b3522cd39d', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index$1.h("smoothly-input-clear", { key: 'b73479f5999155b57a18c1adaf4dd2a06f98fab5', slot: "end" }))), index$1.h("h1", { key: 'd9423d81faff0144d5d67a1a15af7395dec71c13' }, "Icons"), index$1.h("div", { key: '26499ec293ff6772322d9853841d33ad1c0a1195', class: "icons" }, [
             ...Scrollable.Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),
@@ -6125,7 +6125,7 @@ var Key;
     Key.create = create;
 })(Key || (Key = {}));
-const styleCss$W = () => `.sc-smoothly-input-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks="border"].sc-smoothly-input-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-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-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-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-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-h,[looks="transparent"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-h>input.sc-smoothly-input,[looks="transparent"].sc-smoothly-input-h:not(:focus-within)>input.sc-smoothly-input{background-color:transparent}[looks="transparent"].sc-smoothly-input-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-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-h.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .label.sc-smoothly-input{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h.floating-label.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.floating-label .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder] .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly] .sc-smoothly-input-s>[slot=label],.floating-label.sc-smoothly-input-h .label.sc-smoothly-input,.has-value.sc-smoothly-input-h .label.sc-smoothly-input,.has-text.sc-smoothly-input-h .label.sc-smoothly-input,[placeholder].sc-smoothly-input-h .label.sc-smoothly-input,[readonly].sc-smoothly-input-h .label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-h:not([show-label]):not(.show-label) .label.sc-smoothly-input{display:none}.sc-smoothly-input-h smoothly-icon.smoothly-invalid.sc-smoothly-input{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input{position:relative;flex-grow:1;height:100%}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>label.sc-smoothly-input{left:var(--input-padding-side)}.sc-smoothly-input-h:not([show-label])>div.sc-smoothly-input>input.sc-smoothly-input{padding:0 var(--input-padding-side)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.guide.sc-smoothly-input{position:absolute;box-sizing:border-box;align-content:center;height:100%;padding-inline:var(--input-padding-side)}[show-label].sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.guide.sc-smoothly-input{padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.guide.sc-smoothly-input>div.value.sc-smoothly-input{display:inline;pointer-events:none;opacity:0}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.guide.sc-smoothly-input>div.remainder.sc-smoothly-input{display:inline;pointer-events:none;opacity:0.5}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>input.sc-smoothly-input{padding:var(--input-value-padding-top)    var(--input-padding-side)    var(--input-value-padding-bottom)    var(--input-padding-side);box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}[disabled].sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>input.sc-smoothly-input{cursor:not-allowed}.sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:none;z-index:2;padding:0.5rem}[invalid].sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:flex}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:focus{outline:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:hover,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:focus,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-h>span.copyable.sc-smoothly-input{position:relative}.sc-smoothly-input-h>span.copyable.sc-smoothly-input>smoothly-icon.sc-smoothly-input{cursor:pointer;display:flex;align-items:center;padding:0.5rem}.sc-smoothly-input-h>span.copyable.sc-smoothly-input:hover small.sc-smoothly-input,.sc-smoothly-input-h>span.copyable.sc-smoothly-input:focus small.sc-smoothly-input{display:block}.sc-smoothly-input-h>span.copyable.sc-smoothly-input>small.sc-smoothly-input{display:none;width:max-content;border-radius:0.25rem;padding:0.2rem 0.3rem;position:absolute;right:-0.5rem;top:-2rem;background-color:rgb(var(--smoothly-default-contrast));color:rgb(var(--smoothly-default-tint))}`;
+const styleCss$W = () => `.sc-smoothly-input-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks="border"].sc-smoothly-input-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-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-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-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-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-h,[looks="transparent"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-h>input.sc-smoothly-input,[looks="transparent"].sc-smoothly-input-h:not(:focus-within)>input.sc-smoothly-input{background-color:transparent}[looks="transparent"].sc-smoothly-input-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-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-h.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .label.sc-smoothly-input{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-h .label.sc-smoothly-input{transform-origin:top right}.sc-smoothly-input-h.floating-label.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.floating-label .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder] .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly] .sc-smoothly-input-s>[slot=label],.floating-label.sc-smoothly-input-h .label.sc-smoothly-input,.has-value.sc-smoothly-input-h .label.sc-smoothly-input,.has-text.sc-smoothly-input-h .label.sc-smoothly-input,[placeholder].sc-smoothly-input-h .label.sc-smoothly-input,[readonly].sc-smoothly-input-h .label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-h:not([show-label]):not(.show-label) .label.sc-smoothly-input{display:none}.sc-smoothly-input-h smoothly-icon.smoothly-invalid.sc-smoothly-input{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input{position:relative;flex-grow:1;height:100%}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>label.sc-smoothly-input{left:var(--input-padding-side)}[right].sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>label.sc-smoothly-input{right:var(--input-padding-side);left:auto}[right].sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input{text-align:right}.sc-smoothly-input-h:not([show-label])>div.sc-smoothly-input>input.sc-smoothly-input{padding:0 var(--input-padding-side)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.guide.sc-smoothly-input{position:absolute;box-sizing:border-box;align-content:center;height:100%;padding-inline:var(--input-padding-side)}[show-label].sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.guide.sc-smoothly-input{padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.guide.sc-smoothly-input>div.value.sc-smoothly-input{display:inline;pointer-events:none;opacity:0}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.guide.sc-smoothly-input>div.remainder.sc-smoothly-input{display:inline;pointer-events:none;opacity:0.5}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>input.sc-smoothly-input{padding:var(--input-value-padding-top)    var(--input-padding-side)    var(--input-value-padding-bottom)    var(--input-padding-side);box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}[disabled].sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>input.sc-smoothly-input{cursor:not-allowed}.sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:none;z-index:2;padding:0.5rem}[invalid].sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:flex}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:focus{outline:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:hover,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:focus,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-h>span.copyable.sc-smoothly-input{position:relative}.sc-smoothly-input-h>span.copyable.sc-smoothly-input>smoothly-icon.sc-smoothly-input{cursor:pointer;display:flex;align-items:center;padding:0.5rem}.sc-smoothly-input-h>span.copyable.sc-smoothly-input:hover small.sc-smoothly-input,.sc-smoothly-input-h>span.copyable.sc-smoothly-input:focus small.sc-smoothly-input{display:block}.sc-smoothly-input-h>span.copyable.sc-smoothly-input>small.sc-smoothly-input{display:none;width:max-content;border-radius:0.25rem;padding:0.2rem 0.3rem;position:absolute;right:-0.5rem;top:-2rem;background-color:rgb(var(--smoothly-default-contrast));color:rgb(var(--smoothly-default-tint))}`;
 const SmoothlyInput = class {
     constructor(hostRef) {
@@ -6265,7 +6265,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index$1.h(index$1.Host, { key: 'fab11232a335374619f88d481c37d4e5b3d11f8e', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index$1.h("slot", { key: 'a0c8cae6adbad3694a28ec8e1e043fa7a8ceb98a', name: "start" }), index$1.h("div", { key: 'a2d20222eaa4b3edbc42360bc290f7216d17cca1', class: "smoothly-input-container" }, index$1.h("div", { key: '7f076aae537f15217e7bc960c495438729e06c8a', class: "guide" }, index$1.h("div", { key: '3b0078359bcc30eb6932c8f667abff7d4f0fe38b', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index$1.h("div", { key: '2e5bc6a765e9249235b34ec25b6d3e67ee0a475e', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index$1.h("input", { key: '6062569e9a2fbb73e9785005061a204784cef36f', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
+        return (index$1.h(index$1.Host, { key: 'dc56c8b63c3a0402640a20a811dae85468138f3b', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index$1.h("slot", { key: 'f3372746df6932f07cea568a5f16d9bbdeef39cd', name: "start" }), index$1.h("div", { key: '1d50dc7ea1c62c4835af80ec08c708d2162452c5', class: "smoothly-input-container" }, index$1.h("div", { key: 'f562dd8ffdda755718f02c742e0b96bc1c823071', class: "guide" }, index$1.h("div", { key: '1f02c40d673223061f83933a252caf01ccede774', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index$1.h("div", { key: '12c0b824734da7fbd20de68ce033b0da60149ecf', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index$1.h("input", { key: '89ff5f54533362d8776d4f500c019aef7a951b58', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled) {
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -6281,7 +6281,7 @@ const SmoothlyInput = class {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), index$1.h("label", { key: '43e8d3ad1afdaa8a8b6fa55583c0d40a3bf24acd', class: "label float-on-focus", htmlFor: this.name }, index$1.h("slot", { key: '3614b3dc27033e9c7b382cfe839adab598f35447' }))), this.copyable && this.value && (index$1.h("span", { key: '5e2cb462b6cdde196955d26bf481f9bbcad7e331', class: "copyable" }, index$1.h("small", { key: 'c3730452979b2edd6b675990ac627a4e5dd839e4' }, this.copied ? "Copied!" : "Copy"), index$1.h("smoothly-icon", { key: '9d18b939ea4e9b83e5d114b6cea73c66dad07503', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), index$1.h("smoothly-icon", { key: 'c730f983b4a58c59ac60eb8539a199811655e4f0', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: '00a182be5038019d825ec5b6fa8a87026c50cfa3', name: "end" })));
+            } }), index$1.h("label", { key: '0773d2f8eac3c880558ed831dca5903f4da1f5aa', class: "label float-on-focus", htmlFor: this.name }, index$1.h("slot", { key: 'fbce8ed1251aa8b97937ee81ec4e07c36941de52' }))), this.copyable && this.value && (index$1.h("span", { key: 'a0ffe7c27427df173276dbedd1159d1a3428ec36', class: "copyable" }, index$1.h("small", { key: 'da9740e6bc386abe42a23d4e0d428a72da6ee4de' }, this.copied ? "Copied!" : "Copy"), index$1.h("smoothly-icon", { key: '7b3eaa57b44c623c09a55ef143dd98fd90a6a660', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), index$1.h("smoothly-icon", { key: 'b89c81c66a99efab0dcb5aa0f751c41c28723f64', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: '0f84b621e6860ab9b6477ee2a5aff5d0e099d1d9', name: "end" })));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -6310,7 +6310,7 @@ const SmoothlyInput = class {
 };
 SmoothlyInput.style = styleCss$W();
-const styleCss$V = () => `.sc-smoothly-input-checkbox-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-checkbox-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-checkbox-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-checkbox-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-checkbox-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-checkbox-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-checkbox-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-checkbox-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-checkbox-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-checkbox-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-checkbox-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-checkbox-h,[looks="transparent"].sc-smoothly-input-checkbox-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox,[looks="transparent"].sc-smoothly-input-checkbox-h:not(:focus-within)>input.sc-smoothly-input-checkbox{background-color:transparent}[looks="transparent"].sc-smoothly-input-checkbox-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-checkbox-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-checkbox-h.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-checkbox-h.floating-label.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.floating-label .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.has-value.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.has-value .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[placeholder].sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[placeholder] .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[readonly].sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[readonly] .sc-smoothly-input-checkbox-s>[slot=label],.floating-label.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,.has-value.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,.has-text.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,[placeholder].sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,[readonly].sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-checkbox{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-checkbox-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-checkbox{display:none}.sc-smoothly-input-checkbox-h smoothly-icon.smoothly-invalid.sc-smoothly-input-checkbox{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-checkbox-h{display:flex;align-items:center;flex-direction:row;position:relative;gap:.5rem;padding-inline:var(--input-padding-side);background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-checkbox-h:has(>.smoothly-checkbox-end-slot:not(:empty)){padding-right:0}.sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1.25rem;width:1.25rem;border-radius:0.25rem;border:1px solid rgb(var(--smoothly-input-foreground));color:rgb(var(--smoothly-input-foreground));display:block}[checked][looks=transparent].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox,[checked].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox{background-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-checkbox-h:not([readonly]):not([disabled])>input.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]):not([disabled])>label.sc-smoothly-input-checkbox{cursor:pointer}.sc-smoothly-input-checkbox-h>label.sc-smoothly-input-checkbox:empty{display:none}[disabled].sc-smoothly-input-checkbox-h,[disabled].sc-smoothly-input-checkbox-h>*.sc-smoothly-input-checkbox{cursor:not-allowed}.sc-smoothly-input-checkbox-h>smoothly-icon.sc-smoothly-input-checkbox{position:absolute;z-index:1;pointer-events:none;--smoothly-color-contrast:var(--smoothly-input-background)}[looks="transparent"].sc-smoothly-input-checkbox-h{background-color:transparent}[looks="transparent"].sc-smoothly-input-checkbox-h:not([readonly]):focus-within{outline-color:transparent}.sc-smoothly-input-checkbox-h>.smoothly-checkbox-end-slot.sc-smoothly-input-checkbox{margin-left:auto}.sc-smoothly-input-checkbox-h>.smoothly-checkbox-end-slot.sc-smoothly-input-checkbox:empty{display:none}`;
+const styleCss$V = () => `.sc-smoothly-input-checkbox-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-checkbox-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-checkbox-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-checkbox-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-checkbox-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-checkbox-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-checkbox-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-checkbox-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-checkbox-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-checkbox-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-checkbox-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-checkbox-h,[looks="transparent"].sc-smoothly-input-checkbox-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox,[looks="transparent"].sc-smoothly-input-checkbox-h:not(:focus-within)>input.sc-smoothly-input-checkbox{background-color:transparent}[looks="transparent"].sc-smoothly-input-checkbox-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-checkbox-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-checkbox-h.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox{transform-origin:top right}.sc-smoothly-input-checkbox-h.floating-label.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.floating-label .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.has-value.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.has-value .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[placeholder].sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[placeholder] .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[readonly].sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[readonly] .sc-smoothly-input-checkbox-s>[slot=label],.floating-label.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,.has-value.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,.has-text.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,[placeholder].sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,[readonly].sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-checkbox{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-checkbox-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-checkbox{display:none}.sc-smoothly-input-checkbox-h smoothly-icon.smoothly-invalid.sc-smoothly-input-checkbox{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-checkbox-h{display:flex;align-items:center;flex-direction:row;position:relative;gap:.5rem;padding-inline:var(--input-padding-side);background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-checkbox-h:has(>.smoothly-checkbox-end-slot:not(:empty)){padding-right:0}.sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1.25rem;width:1.25rem;border-radius:0.25rem;border:1px solid rgb(var(--smoothly-input-foreground));color:rgb(var(--smoothly-input-foreground));display:block}[checked][looks=transparent].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox,[checked].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox{background-color:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-checkbox-h:not([readonly]):not([disabled])>input.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]):not([disabled])>label.sc-smoothly-input-checkbox{cursor:pointer}.sc-smoothly-input-checkbox-h>label.sc-smoothly-input-checkbox:empty{display:none}[disabled].sc-smoothly-input-checkbox-h,[disabled].sc-smoothly-input-checkbox-h>*.sc-smoothly-input-checkbox{cursor:not-allowed}.sc-smoothly-input-checkbox-h>smoothly-icon.sc-smoothly-input-checkbox{position:absolute;z-index:1;pointer-events:none;--smoothly-color-contrast:var(--smoothly-input-background)}[looks="transparent"].sc-smoothly-input-checkbox-h{background-color:transparent}[looks="transparent"].sc-smoothly-input-checkbox-h:not([readonly]):focus-within{outline-color:transparent}.sc-smoothly-input-checkbox-h>.smoothly-checkbox-end-slot.sc-smoothly-input-checkbox{margin-left:auto}.sc-smoothly-input-checkbox-h>.smoothly-checkbox-end-slot.sc-smoothly-input-checkbox:empty{display:none}`;
 const SmoothlyInputCheckbox = class {
     constructor(hostRef) {
@@ -6381,10 +6381,10 @@ const SmoothlyInputCheckbox = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '6c5e8fd09ac7c64be72d541cdeee747c84495a6f' }, index$1.h("input", { key: '241ef4d9acc46562323db12313f6ca0a3fea5f0f', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
+        return (index$1.h(index$1.Host, { key: '8d586e5be3e100b6f67e79694bdb7166b2aeddf8' }, index$1.h("input", { key: 'fe7b1db5fe641116040034355e04ca8b5ab22e97', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
                 this.checked = e.target.checked;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), this.checked && index$1.h("smoothly-icon", { key: 'a0909dfe8369e31bf4873a2ab05f21880c3f43fe', name: "checkmark-sharp", size: "tiny" }), index$1.h("label", { key: 'c3628052b38e4dfbdffefa92d428a04662726f65', htmlFor: this.id }, index$1.h("slot", { key: 'bfdbbb43537661b026600d2cb3af9c244d2ae5b3' })), index$1.h("span", { key: '4033bb43f9ead47f2f9f7eb6943e4199c7260766', class: "smoothly-checkbox-end-slot" }, index$1.h("slot", { key: 'e8985be231a6f80d71d85e1b665705458fb187f2', name: "end" }))));
+            } }), this.checked && index$1.h("smoothly-icon", { key: '51b9efb24588c22d2a568227297787d023571e71', name: "checkmark-sharp", size: "tiny" }), index$1.h("label", { key: '6987b8f1b6e08a7f2c0b14c57e081939bc174fb4', htmlFor: this.id }, index$1.h("slot", { key: '3f86fa549bbe9a68c83895a8bda1517b1554a926' })), index$1.h("span", { key: '75546ae8484e8aa1945fdec28fd4449880304ae9', class: "smoothly-checkbox-end-slot" }, index$1.h("slot", { key: '1e4e1fcf24e300d18b3728bfbde4a1e178253bce', name: "end" }))));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -6447,13 +6447,13 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: 'f1f8c9c1065466cf60851197c73cb3e801593472', title: this.tooltip }, index$1.h("smoothly-button", { key: '2166cd37b5a0e93cba98b17657f4bf33e503814e', 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: '427e397efd7fc89e2e6ba34f1703cd249b8b07cf' }), index$1.h("smoothly-icon", { key: '3c16b4541b7d1493213d3dfc93adf32aec831869', name: "close", size: "tiny" }))));
+        return (index$1.h(index$1.Host, { key: '5c6e49461edbf91245aaa2bf66de4550e334919c', title: this.tooltip }, index$1.h("smoothly-button", { key: 'ad7d421bdedceaf36cc14d87602ce960c19f77eb', 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: '84cf8946d1d4681dde6c708aac9f791a276fd070' }), index$1.h("smoothly-icon", { key: '55a4310a4db96393cc6da853a7cfd974479bfe6c', name: "close", size: "tiny" }))));
     }
     get element() { return index$1.getElement(this); }
 };
 SmoothlyInputClear.style = styleCss$U();
-const styleCss$T = () => `.sc-smoothly-input-color-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-color-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-color-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-color-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-color-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-color-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-color-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-color-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-color-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-color-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-color-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-color-h,[looks="transparent"].sc-smoothly-input-color-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-color-h>input.sc-smoothly-input-color,[looks="transparent"].sc-smoothly-input-color-h:not(:focus-within)>input.sc-smoothly-input-color{background-color:transparent}[looks="transparent"].sc-smoothly-input-color-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-color-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-color-h.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h .label.sc-smoothly-input-color{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-color-h.floating-label.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.floating-label .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.has-value.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.has-value .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[placeholder].sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[placeholder] .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[readonly].sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[readonly] .sc-smoothly-input-color-s>[slot=label],.floating-label.sc-smoothly-input-color-h .label.sc-smoothly-input-color,.has-value.sc-smoothly-input-color-h .label.sc-smoothly-input-color,.has-text.sc-smoothly-input-color-h .label.sc-smoothly-input-color,[placeholder].sc-smoothly-input-color-h .label.sc-smoothly-input-color,[readonly].sc-smoothly-input-color-h .label.sc-smoothly-input-color,.sc-smoothly-input-color-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-color{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-color-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-color{display:none}.sc-smoothly-input-color-h smoothly-icon.smoothly-invalid.sc-smoothly-input-color{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-color-h{display:flex;position:relative;background-color:rgb(var(--smoothly-input-background));align-items:center;justify-content:center}.sc-smoothly-input-color-h>smoothly-input.sc-smoothly-input-color{width:100%;--input-min-height:calc(var(--input-min-height) - 2px);--smoothly-input-border-focus:none}.sc-smoothly-input-color-h div.color-sample.sc-smoothly-input-color{height:2em;width:3em;margin-right:0.5rem;background-color:var(--hexCode);outline:1px solid rgb(var(--smoothly-input-border));border-radius:3px}.sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color{padding-right:var(--input-padding-side)}[readonly].sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color,[disabled].sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color{display:none}.sc-smoothly-input-color-h:not([readonly]):not([disabled]) smoothly-icon[name=options-outline].sc-smoothly-input-color{cursor:pointer}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color{background-color:rgb(var(--smoothly-input-background));position:absolute;padding:1em 1em 1em 0;top:calc(var(--element-height) + .8em);left:0;box-sizing:border-box;z-index:20;border:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color::before{content:"";transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border));position:absolute;z-index:100;top:0em}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color>smoothly-toggle-switch.sc-smoothly-input-color{margin-left:auto;margin-right:1em;margin-bottom:1em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color{padding:.5em 0}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color label.sc-smoothly-input-color{width:4em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-thumb{background-color:#777}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-thumb{background-color:#777}`;
+const styleCss$T = () => `.sc-smoothly-input-color-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-color-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-color-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-color-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-color-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-color-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-color-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-color-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-color-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-color-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-color-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-color-h,[looks="transparent"].sc-smoothly-input-color-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-color-h>input.sc-smoothly-input-color,[looks="transparent"].sc-smoothly-input-color-h:not(:focus-within)>input.sc-smoothly-input-color{background-color:transparent}[looks="transparent"].sc-smoothly-input-color-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-color-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-color-h.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h .label.sc-smoothly-input-color{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-color-h .label.sc-smoothly-input-color{transform-origin:top right}.sc-smoothly-input-color-h.floating-label.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.floating-label .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.has-value.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.has-value .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[placeholder].sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[placeholder] .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[readonly].sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[readonly] .sc-smoothly-input-color-s>[slot=label],.floating-label.sc-smoothly-input-color-h .label.sc-smoothly-input-color,.has-value.sc-smoothly-input-color-h .label.sc-smoothly-input-color,.has-text.sc-smoothly-input-color-h .label.sc-smoothly-input-color,[placeholder].sc-smoothly-input-color-h .label.sc-smoothly-input-color,[readonly].sc-smoothly-input-color-h .label.sc-smoothly-input-color,.sc-smoothly-input-color-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-color{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-color-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-color{display:none}.sc-smoothly-input-color-h smoothly-icon.smoothly-invalid.sc-smoothly-input-color{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-color-h{display:flex;position:relative;background-color:rgb(var(--smoothly-input-background));align-items:center;justify-content:center}.sc-smoothly-input-color-h>smoothly-input.sc-smoothly-input-color{width:100%;--input-min-height:calc(var(--input-min-height) - 2px);--smoothly-input-border-focus:none}.sc-smoothly-input-color-h div.color-sample.sc-smoothly-input-color{height:2em;width:3em;margin-right:0.5rem;background-color:var(--hexCode);outline:1px solid rgb(var(--smoothly-input-border));border-radius:3px}.sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color{padding-right:var(--input-padding-side)}[readonly].sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color,[disabled].sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color{display:none}.sc-smoothly-input-color-h:not([readonly]):not([disabled]) smoothly-icon[name=options-outline].sc-smoothly-input-color{cursor:pointer}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color{background-color:rgb(var(--smoothly-input-background));position:absolute;padding:1rem 0 1rem 2.5rem;top:calc(var(--element-height) + .8em);left:0;box-sizing:border-box;z-index:20;border:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color::before{content:"";transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border));position:absolute;z-index:100;top:0em}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color>smoothly-toggle-switch.sc-smoothly-input-color{margin-left:auto;margin-right:1em;margin-bottom:1em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color{padding:.5em 0}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color label.sc-smoothly-input-color{width:4em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-thumb{background-color:#777}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-thumb{background-color:#777}`;
 const SmoothlyInputColor = class {
     constructor(hostRef) {
@@ -6605,7 +6605,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index$1.h(index$1.Host, { key: '606897dcf8880a8bceaf646a17b0b682dc0de4fe', style: {
+        return (index$1.h(index$1.Host, { key: '4db4d9329eaee9cad54871a66e4ea406e04a5b92', style: {
                 "--hexCode": this.value,
                 "--rgb-r": `${Math.round((_a = this.rgb.r) !== null && _a !== void 0 ? _a : 0)}`,
                 "--rgb-g": `${Math.round((_b = this.rgb.g) !== null && _b !== void 0 ? _b : 0)}`,
@@ -6614,7 +6614,7 @@ const SmoothlyInputColor = class {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, index$1.h("smoothly-input", { key: '3a8211dcd537f07359729f79b88c33ffa8dd26e6', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index$1.h("slot", { key: '932e1fee6e31f8942841ae068404f674d20c6d75' })), index$1.h("div", { key: '55de847010bfc30641a1b4814fc7d4ea1beb8b63', class: "color-sample" }), index$1.h("smoothly-icon", { key: '7e69d59ceb71c617d93205b6ada24bc0a0b6d3fe', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), index$1.h("div", { key: '38771b0daff4bda14ecb821f7ec0725ef575f50c' }, index$1.h("slot", { key: 'b005802e73faf84b2772e7bf28163963abe619ca', name: "end" })), this.open && !this.readonly && !this.disabled && (index$1.h("div", { key: 'ed68b37bbbe25ccb1cfe00167b21b49fdcad5326', class: "rgb-sliders" }, index$1.h("smoothly-toggle-switch", { key: 'a3643b4c099fb94dfc57b8c2658bde1711aa0c5d', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index$1.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index$1.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
+            } }, index$1.h("smoothly-input", { key: 'd3fe0aeedcd45bacc1d38e75d7d5e97be3992a34', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index$1.h("slot", { key: '77f78c79097fc43d15b453044170290e25c1bfc2' })), index$1.h("div", { key: 'f8c144c3cfdc9ef249c941f492b009030eb97dda', class: "color-sample" }), index$1.h("smoothly-icon", { key: '8d29d95ef7cbc08cdf429088e9f005a02544ecad', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), index$1.h("div", { key: '8efce2fd4ca6fbde9968bddd60b54cb6e097091e' }, index$1.h("slot", { key: 'fd99776b1a150dd549d69e013124308ab6d2f16f', name: "end" })), this.open && !this.readonly && !this.disabled && (index$1.h("div", { key: '67b8c3fb973292a65257eedb64ac7a01044843d2', class: "rgb-sliders" }, index$1.h("smoothly-toggle-switch", { key: 'f576c2ce5b277209b94c8560e559299c715ea1e1', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index$1.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index$1.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -6639,12 +6639,12 @@ const SmoothlyInputColorDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '7b11b0f228e5e8655a3db81717e614354b9fbdc0' }, index$1.h("h2", { key: '41e22ff3427c56b0e5b5b5c837215ce3c8e3667b' }, "Color"), index$1.h("smoothly-input-color", { key: '778d1355985c37f4b8b193b65d0a534c640c5c1c', name: "color" }, "Choose color")));
+        return (index$1.h(index$1.Host, { key: '9ad04e1aa481ec3ad05d6487a25ab69202d2a8bf' }, index$1.h("h2", { key: 'cc47b241d3bb3e43752a3b0ec2e72144b2955bfa' }, "Color"), index$1.h("smoothly-input-color", { key: 'db081098c0eb29a73c9a708df96b48fd77425796', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = `style.css`;
-const styleCss$S = () => `.sc-smoothly-input-date-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-date-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-date-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-date-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-date-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-date-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-date-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-date-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-date-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-date-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-date-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-date-h,[looks="transparent"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-date-h>input.sc-smoothly-input-date,[looks="transparent"].sc-smoothly-input-date-h:not(:focus-within)>input.sc-smoothly-input-date{background-color:transparent}[looks="transparent"].sc-smoothly-input-date-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-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-date-h.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .label.sc-smoothly-input-date{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-h.floating-label.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.floating-label .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder] .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly] .sc-smoothly-input-date-s>[slot=label],.floating-label.sc-smoothly-input-date-h .label.sc-smoothly-input-date,.has-value.sc-smoothly-input-date-h .label.sc-smoothly-input-date,.has-text.sc-smoothly-input-date-h .label.sc-smoothly-input-date,[placeholder].sc-smoothly-input-date-h .label.sc-smoothly-input-date,[readonly].sc-smoothly-input-date-h .label.sc-smoothly-input-date,.sc-smoothly-input-date-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date{display:none}.sc-smoothly-input-date-h smoothly-icon.smoothly-invalid.sc-smoothly-input-date{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-date-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-h .smoothly-date-placeholder.sc-smoothly-input-date{display:none}.sc-smoothly-input-date-h:not([always-show-guide]):not(:focus-within):not(.has-text) .smoothly-date-placeholder.sc-smoothly-input-date{opacity:0.5;display:block}.sc-smoothly-input-date-h:not([always-show-guide]):not(:focus-within):not(.has-text) smoothly-date-text.sc-smoothly-input-date{visibility:hidden}.sc-smoothly-input-date-h>.label.sc-smoothly-input-date{left:var(--input-padding-side)}[show-label].sc-smoothly-input-date-h>.smoothly-date-placeholder.sc-smoothly-input-date,[show-label].sc-smoothly-input-date-h>smoothly-date-text.sc-smoothly-input-date{margin-inline:var(--input-padding-side);margin-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-date-h:not([show-label])>.smoothly-date-placeholder.sc-smoothly-input-date,.sc-smoothly-input-date-h:not([show-label])>smoothly-date-text.sc-smoothly-input-date{margin-inline:var(--input-padding-side) auto;margin-block:auto}.sc-smoothly-input-date-h:not([readonly]){cursor:pointer}[disabled].sc-smoothly-input-date-h{cursor:not-allowed}.sc-smoothly-input-date-h>smoothly-calendar.sc-smoothly-input-date{position:absolute;z-index:20;top:4rem;background-color:rgb(var(--smoothly-input-background));min-width:18rem;max-width:22rem}.sc-smoothly-input-date-h>smoothly-calendar.sc-smoothly-input-date::before{content:"";position:absolute;left:2rem;top:-0.55rem;z-index:9;transform:rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-h>.smoothly-icons.sc-smoothly-input-date{display:flex;flex-direction:row;align-items:center;margin-left:auto}.sc-smoothly-input-date-h>.smoothly-icons.sc-smoothly-input-date>.smoothly-invalid.sc-smoothly-input-date{display:none;padding:0.5rem}[invalid].sc-smoothly-input-date-h>.smoothly-icons.sc-smoothly-input-date>.smoothly-invalid.sc-smoothly-input-date{display:flex}`;
+const styleCss$S = () => `.sc-smoothly-input-date-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-date-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-date-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-date-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-date-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-date-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-date-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-date-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-date-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-date-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-date-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-date-h,[looks="transparent"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-date-h>input.sc-smoothly-input-date,[looks="transparent"].sc-smoothly-input-date-h:not(:focus-within)>input.sc-smoothly-input-date{background-color:transparent}[looks="transparent"].sc-smoothly-input-date-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-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-date-h.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .label.sc-smoothly-input-date{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-date-h .label.sc-smoothly-input-date{transform-origin:top right}.sc-smoothly-input-date-h.floating-label.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.floating-label .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder] .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly] .sc-smoothly-input-date-s>[slot=label],.floating-label.sc-smoothly-input-date-h .label.sc-smoothly-input-date,.has-value.sc-smoothly-input-date-h .label.sc-smoothly-input-date,.has-text.sc-smoothly-input-date-h .label.sc-smoothly-input-date,[placeholder].sc-smoothly-input-date-h .label.sc-smoothly-input-date,[readonly].sc-smoothly-input-date-h .label.sc-smoothly-input-date,.sc-smoothly-input-date-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date{display:none}.sc-smoothly-input-date-h smoothly-icon.smoothly-invalid.sc-smoothly-input-date{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-date-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-h .smoothly-date-placeholder.sc-smoothly-input-date{display:none}.sc-smoothly-input-date-h:not([always-show-guide]):not(:focus-within):not(.has-text) .smoothly-date-placeholder.sc-smoothly-input-date{opacity:0.5;display:block}.sc-smoothly-input-date-h:not([always-show-guide]):not(:focus-within):not(.has-text) smoothly-date-text.sc-smoothly-input-date{visibility:hidden}.sc-smoothly-input-date-h>.label.sc-smoothly-input-date{left:var(--input-padding-side)}[show-label].sc-smoothly-input-date-h>.smoothly-date-placeholder.sc-smoothly-input-date,[show-label].sc-smoothly-input-date-h>smoothly-date-text.sc-smoothly-input-date{margin-inline:var(--input-padding-side);margin-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-date-h:not([show-label])>.smoothly-date-placeholder.sc-smoothly-input-date,.sc-smoothly-input-date-h:not([show-label])>smoothly-date-text.sc-smoothly-input-date{margin-inline:var(--input-padding-side) auto;margin-block:auto}.sc-smoothly-input-date-h:not([readonly]){cursor:pointer}[disabled].sc-smoothly-input-date-h{cursor:not-allowed}.sc-smoothly-input-date-h>smoothly-calendar.sc-smoothly-input-date{position:absolute;z-index:20;top:4rem;background-color:rgb(var(--smoothly-input-background));min-width:18rem;max-width:22rem}.sc-smoothly-input-date-h>smoothly-calendar.sc-smoothly-input-date::before{content:"";position:absolute;left:2rem;top:-0.55rem;z-index:9;transform:rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-h>.smoothly-icons.sc-smoothly-input-date{display:flex;flex-direction:row;align-items:center;margin-left:auto}.sc-smoothly-input-date-h>.smoothly-icons.sc-smoothly-input-date>.smoothly-invalid.sc-smoothly-input-date{display:none;padding:0.5rem}[invalid].sc-smoothly-input-date-h>.smoothly-icons.sc-smoothly-input-date>.smoothly-invalid.sc-smoothly-input-date{display:flex}`;
 const SmoothlyInputDate = class {
     constructor(hostRef) {
@@ -6760,7 +6760,7 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'd610c101e778aa42a9369aa03f1caf8e14b8b5c8', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, index$1.h("slot", { key: '44cfdeb10640f183b8d5aee0a40630dc6d3e994e', name: "start" }), index$1.h("label", { key: 'd7b5fdb309c4cbe5ca865169953f50e57bae8d4d', class: "label float-on-focus" }, index$1.h("slot", { key: '7230b56a3bdbb7a83a8c45800f056734b01bcb90' })), this.placeholder && index$1.h("span", { key: '4a0606f9f3d1bf1610393006ee6238b386b56655', class: "smoothly-date-placeholder" }, this.placeholder), index$1.h("smoothly-date-text", { key: '19e00959912e9a0ba57bb0989d86a54fbd06006d', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), index$1.h("span", { key: '2f7b6396f29e43ff06f86749b20358fd9067def3', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, index$1.h("smoothly-icon", { key: '384b7d43cebf3f16a8f14687acd424bcd790a55a', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: '445ed1618b342123b180cecc999a2899176095c6', name: "end" })), this.open && !this.readonly && (index$1.h("smoothly-calendar", { key: '6345ea59f7dc66a47dcb0b33b01f15b9a3c7720d', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, index$1.h("div", { key: '6a2d605946629fafeb1a951aa4ce923d5c3cca53', slot: "year-label" }, index$1.h("slot", { key: '7352785fb90f97fe59dcc2662e81c12ae3544e70', name: "year-label" })), index$1.h("div", { key: '9433f633d73a13a3638df8374cc807e7adfe11d0', slot: "month-label" }, index$1.h("slot", { key: '2f9176a79690a41028a1633e5bb6b4bd9c464722', name: "month-label" }))))));
+        return (index$1.h(index$1.Host, { key: '23eb18ee49132c7fa6bb48a457212e95b3297499', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, index$1.h("slot", { key: '92c0fc2f3bdba5377ffee8289cba726125541997', name: "start" }), index$1.h("label", { key: 'cd6a68025235ba18a254dd1a7e7bdb722f5c24ec', class: "label float-on-focus" }, index$1.h("slot", { key: 'c2d23b15c470fe987088c41abc9fb3af2fb5c7f4' })), this.placeholder && index$1.h("span", { key: '530b2676fc554e1cf1efce7f1553897fdf405767', class: "smoothly-date-placeholder" }, this.placeholder), index$1.h("smoothly-date-text", { key: '8d4fa83adba95afedc7adebbf88582801141b8ca', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), index$1.h("span", { key: '697c0a69230175703f5be27b2ffe5608424e3c6e', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, index$1.h("smoothly-icon", { key: '1d33bc9911d8bfe7e955bed1be025da988c34897', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: 'c0a3906ace69bd3a6c41c39a3538a811554673bc', name: "end" })), this.open && !this.readonly && (index$1.h("smoothly-calendar", { key: '19d3e81a19c37a7d50ee31b1a27b1762a32de2ee', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, index$1.h("div", { key: '960b3b1b2fb3928d6f71d6d7f3456b6d86c537f2', slot: "year-label" }, index$1.h("slot", { key: '1ba7fa33c27fbc2310f6fbb6094f1fac3901ca0f', name: "year-label" })), index$1.h("div", { key: 'b129672d85ce661203e6a0746a0778437a4ea857', slot: "month-label" }, index$1.h("slot", { key: '8c19839eb59e587650b40715722ee8ce12fb26a7', name: "month-label" }))))));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -6788,7 +6788,7 @@ const SmoothlyInputDateDemo = class {
         this.alwaysShowGuide = false;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b0b29015752f46939700b57c62a07fa06ffe4e40' }, index$1.h("div", { key: '513e17083a0162befffa69473ddbdece8548e9ba' }, index$1.h("h2", { key: 'd9ac3875a4027fb083c7daad59d99fea4ce27ade' }, "Date input"), index$1.h("p", { key: '995523aa50c0634d265b3b9d91f5dac9a8502bf0' }, "Different locales formatting the same date"), index$1.h("smoothly-button", { key: '10a90fd4fe35c81b689d4c0cc547cc887b852669', 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: 'b7d9b9ab464d611493eb029a1819b1890da7e0c3', looks: "transparent", onSmoothlyUserInput: e => {
+        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 => {
                 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" })))))));
@@ -6796,7 +6796,7 @@ const SmoothlyInputDateDemo = class {
 };
 SmoothlyInputDateDemo.style = styleCss$R();
-const styleCss$Q = () => `.sc-smoothly-input-date-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks="border"].sc-smoothly-input-date-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-date-range-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-date-range-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-date-range-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-date-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-date-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-date-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-date-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-date-range-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-date-range-h,[looks="transparent"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-date-range-h>input.sc-smoothly-input-date-range,[looks="transparent"].sc-smoothly-input-date-range-h:not(:focus-within)>input.sc-smoothly-input-date-range{background-color:transparent}[looks="transparent"].sc-smoothly-input-date-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-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-date-range-h.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-range-h.floating-label.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.floating-label .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder] .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly] .sc-smoothly-input-date-range-s>[slot=label],.floating-label.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.has-value.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.has-text.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[placeholder].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[readonly].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-range{display:none}.sc-smoothly-input-date-range-h smoothly-icon.smoothly-invalid.sc-smoothly-input-date-range{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-date-range-h{position:relative;display:flex;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-date-range-h [slot=start].sc-smoothly-input-date-range{align-self:center}.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{left:var(--input-padding-side)}.sc-smoothly-input-date-range-h .smoothly-date-range-separator.sc-smoothly-input-date-range{white-space:pre}.sc-smoothly-input-date-range-h .smoothly-date-range-placeholder.sc-smoothly-input-date-range{margin-inline:var(--input-padding-side);display:none}.sc-smoothly-input-date-range-h:not([always-show-guide]):not(:focus-within):not(.has-text) .smoothly-date-range-placeholder.sc-smoothly-input-date-range{display:block;opacity:0.5}.sc-smoothly-input-date-range-h:not([always-show-guide]):not(:focus-within):not(.has-text) smoothly-date-text.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([always-show-guide]):not(:focus-within):not(.has-text) .smoothly-date-range-separator.sc-smoothly-input-date-range{visibility:hidden}.sc-smoothly-input-date-range-h smoothly-date-text.start-date-text.sc-smoothly-input-date-range{margin-inline:var(--input-padding-side) 0}.sc-smoothly-input-date-range-h smoothly-date-text.end-date-text.sc-smoothly-input-date-range{margin-inline:0 var(--input-padding-side)}[show-label].sc-smoothly-input-date-range-h .smoothly-date-range-placeholder.sc-smoothly-input-date-range,[show-label].sc-smoothly-input-date-range-h smoothly-date-text.sc-smoothly-input-date-range,[show-label].sc-smoothly-input-date-range-h .smoothly-date-range-separator.sc-smoothly-input-date-range{margin-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-date-range-h:not([show-label]) .smoothly-date-range-placeholder.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([show-label]) smoothly-date-text.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([show-label]) .smoothly-date-range-separator.sc-smoothly-input-date-range{margin-block:auto}.sc-smoothly-input-date-range-h:not([readonly]){cursor:pointer}[disabled].sc-smoothly-input-date-range-h{cursor:not-allowed}.sc-smoothly-input-date-range-h>smoothly-calendar.sc-smoothly-input-date-range{position:absolute;z-index:20;top:4rem;background-color:rgb(var(--smoothly-input-background));max-width:22rem;min-width:18rem}.sc-smoothly-input-date-range-h>smoothly-calendar.sc-smoothly-input-date-range::before{content:"";position:absolute;top:-0.55rem;left:3rem;z-index:9;transform:rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h>.smoothly-date-range-input-part.sc-smoothly-input-date-range{display:flex;width:100%;background-color:var(--smoothly-input-background);border-radius:0.25rem;cursor:pointer}.sc-smoothly-input-date-range-h>span.smoothly-icons.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-range-h>.smoothly-icons.sc-smoothly-input-date-range>.smoothly-invalid.sc-smoothly-input-date-range{display:none;padding:0.5rem}[invalid].sc-smoothly-input-date-range-h>.smoothly-icons.sc-smoothly-input-date-range>.smoothly-invalid.sc-smoothly-input-date-range{display:flex}`;
+const styleCss$Q = () => `.sc-smoothly-input-date-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks="border"].sc-smoothly-input-date-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-date-range-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-date-range-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-date-range-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-date-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-date-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-date-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-date-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-date-range-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-date-range-h,[looks="transparent"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-date-range-h>input.sc-smoothly-input-date-range,[looks="transparent"].sc-smoothly-input-date-range-h:not(:focus-within)>input.sc-smoothly-input-date-range{background-color:transparent}[looks="transparent"].sc-smoothly-input-date-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-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-date-range-h.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{transform-origin:top right}.sc-smoothly-input-date-range-h.floating-label.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.floating-label .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder] .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly] .sc-smoothly-input-date-range-s>[slot=label],.floating-label.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.has-value.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.has-text.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[placeholder].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[readonly].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-range{display:none}.sc-smoothly-input-date-range-h smoothly-icon.smoothly-invalid.sc-smoothly-input-date-range{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-date-range-h{position:relative;display:flex;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-date-range-h [slot=start].sc-smoothly-input-date-range{align-self:center}.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{left:var(--input-padding-side)}.sc-smoothly-input-date-range-h .smoothly-date-range-separator.sc-smoothly-input-date-range{white-space:pre}.sc-smoothly-input-date-range-h .smoothly-date-range-placeholder.sc-smoothly-input-date-range{margin-inline:var(--input-padding-side);display:none}.sc-smoothly-input-date-range-h:not([always-show-guide]):not(:focus-within):not(.has-text) .smoothly-date-range-placeholder.sc-smoothly-input-date-range{display:block;opacity:0.5}.sc-smoothly-input-date-range-h:not([always-show-guide]):not(:focus-within):not(.has-text) smoothly-date-text.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([always-show-guide]):not(:focus-within):not(.has-text) .smoothly-date-range-separator.sc-smoothly-input-date-range{visibility:hidden}.sc-smoothly-input-date-range-h smoothly-date-text.start-date-text.sc-smoothly-input-date-range{margin-inline:var(--input-padding-side) 0}.sc-smoothly-input-date-range-h smoothly-date-text.end-date-text.sc-smoothly-input-date-range{margin-inline:0 var(--input-padding-side)}[show-label].sc-smoothly-input-date-range-h .smoothly-date-range-placeholder.sc-smoothly-input-date-range,[show-label].sc-smoothly-input-date-range-h smoothly-date-text.sc-smoothly-input-date-range,[show-label].sc-smoothly-input-date-range-h .smoothly-date-range-separator.sc-smoothly-input-date-range{margin-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-date-range-h:not([show-label]) .smoothly-date-range-placeholder.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([show-label]) smoothly-date-text.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([show-label]) .smoothly-date-range-separator.sc-smoothly-input-date-range{margin-block:auto}.sc-smoothly-input-date-range-h:not([readonly]){cursor:pointer}[disabled].sc-smoothly-input-date-range-h{cursor:not-allowed}.sc-smoothly-input-date-range-h>smoothly-calendar.sc-smoothly-input-date-range{position:absolute;z-index:20;top:4rem;background-color:rgb(var(--smoothly-input-background));max-width:22rem;min-width:18rem}.sc-smoothly-input-date-range-h>smoothly-calendar.sc-smoothly-input-date-range::before{content:"";position:absolute;top:-0.55rem;left:3rem;z-index:9;transform:rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h>.smoothly-date-range-input-part.sc-smoothly-input-date-range{display:flex;width:100%;background-color:var(--smoothly-input-background);border-radius:0.25rem;cursor:pointer}.sc-smoothly-input-date-range-h>span.smoothly-icons.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-range-h>.smoothly-icons.sc-smoothly-input-date-range>.smoothly-invalid.sc-smoothly-input-date-range{display:none;padding:0.5rem}[invalid].sc-smoothly-input-date-range-h>.smoothly-icons.sc-smoothly-input-date-range>.smoothly-invalid.sc-smoothly-input-date-range{display:flex}`;
 const SmoothlyInputDateRange = class {
     constructor(hostRef) {
@@ -6925,15 +6925,15 @@ const SmoothlyInputDateRange = class {
         this.smoothlyInput.emit({ [this.name]: undefined });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '4aafb51483d57234d6f42a6252a45078a5cc4054', tabindex: this.disabled ? undefined : 0, class: {
+        return (index$1.h(index$1.Host, { key: '8d1cc0bf552d9366cd676ca4d28ba9131b762985', tabindex: this.disabled ? undefined : 0, class: {
                 "has-value": !!(this.start || this.end),
                 "has-text": !!(this.startHasText || this.endHasText),
                 "floating-label": this.alwaysShowGuide,
-            } }, index$1.h("span", { key: '5516903b15400ea4dd7dba463dd173ef48ca03df', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, index$1.h("slot", { key: '273d0fdad0534db6f46e3c37005ab0649edd8abc', name: "start" }), index$1.h("label", { key: '67fd396fd707428cf9413a5b8bd6501485874e64', class: "label float-on-focus" }, index$1.h("slot", { key: '67a092adcbb0abf829ffb68b48e2e37cc6dbc5ed' })), this.placeholder && index$1.h("span", { key: '54ed8804af377cdde573d7d148d62544adae5eb8', class: "smoothly-date-range-placeholder" }, this.placeholder), index$1.h("smoothly-date-text", { key: '3144566fd5983266e70637449965c0ca981962b8', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
+            } }, index$1.h("span", { key: 'ea5b162b919565e8ab3ba6d5c7420fad8d7bbfbd', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, index$1.h("slot", { key: 'ea6a109b34aefa2256aa1b82972dbbc5fef55897', name: "start" }), index$1.h("label", { key: 'b9b7f869df370e0f6e882b95babbe5c8f54ea324', class: "label float-on-focus" }, index$1.h("slot", { key: '1aa509d8a9438fa7151d4d50c62e9e07c981c58c' })), this.placeholder && index$1.h("span", { key: 'ece35a37734177645133e14582ae692565c8a0a6', class: "smoothly-date-range-placeholder" }, this.placeholder), index$1.h("smoothly-date-text", { key: 'b840c7a75cf6aa6a73bac8aef415d709e533a7f4', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
                 var _a, _b;
                 return (e.stopPropagation(),
                     this.end ? ((_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)) : (_b = this.endTextElement) === null || _b === void 0 ? void 0 : _b.select());
-            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), index$1.h("span", { key: '80257b7865d284f87a6aafd9f53acead98612f09', class: "smoothly-date-range-separator" }, " \u2013 "), index$1.h("smoothly-date-text", { key: 'e6bb858a6a4ee6669ec02949f7e5dcd668187970', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), index$1.h("span", { key: '4ccdcf9160a7bb827309e5f5cd908095ba90a0bc', class: "smoothly-icons" }, index$1.h("smoothly-icon", { key: '7dbf49e194b48313c7b54eb1bc43d2660f7cf3dc', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: '63448fe06f310d74951d3ddbd8b8511d1df170b0', name: "end" })), this.open && (index$1.h("smoothly-calendar", { key: '1d334b289c960660269e869ec6e42544beaaf0d7', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
+            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), index$1.h("span", { key: 'f17bfad7cd7aca649b05cc75f3062a28fcf0cd5f', class: "smoothly-date-range-separator" }, " \u2013 "), index$1.h("smoothly-date-text", { key: '1aa47809013250eaea4ded0dc664b1af5a1170ba', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), index$1.h("span", { key: 'b429db5ba1bf4197a08c5872028549f09390ac99', class: "smoothly-icons" }, index$1.h("smoothly-icon", { key: '1b9f165fe8fc3a509636aebe6cd5050ffc99e153', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: 'e508de43633d4cadd8a1f83de6a2fa8599175e30', name: "end" })), this.open && (index$1.h("smoothly-calendar", { key: '273526a8a97a657724014910b805c3c41c04833f', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
                 e.stopPropagation();
                 this.open = false;
                 this.start = e.detail.start;
@@ -6963,7 +6963,7 @@ const SmoothlyInputDateRange = class {
 };
 SmoothlyInputDateRange.style = styleCss$Q();
-const styleCss$P = () => `.sc-smoothly-input-date-time-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-date-time-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-date-time-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-date-time-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-date-time-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-date-time-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-date-time-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-date-time-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-date-time-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-date-time-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-date-time-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-date-time-h,[looks="transparent"].sc-smoothly-input-date-time-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-date-time-h>input.sc-smoothly-input-date-time,[looks="transparent"].sc-smoothly-input-date-time-h:not(:focus-within)>input.sc-smoothly-input-date-time{background-color:transparent}[looks="transparent"].sc-smoothly-input-date-time-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-time-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-date-time-h.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-time-h.floating-label.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.floating-label .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.has-value.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.has-value .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[placeholder].sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[placeholder] .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[readonly].sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[readonly] .sc-smoothly-input-date-time-s>[slot=label],.floating-label.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,.has-value.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,.has-text.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,[placeholder].sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,[readonly].sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,.sc-smoothly-input-date-time-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-time{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-time-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-time{display:none}.sc-smoothly-input-date-time-h smoothly-icon.smoothly-invalid.sc-smoothly-input-date-time{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-date-time-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-time-h>smoothly-input.sc-smoothly-input-date-time{--input-min-height:calc(var(--input-min-height) - 2px);--smoothly-input-border-focus:none}.sc-smoothly-input-date-time-h:not([readonly])>smoothly-input.sc-smoothly-input-date-time>div.sc-smoothly-input-date-time>input.sc-smoothly-input-date-time{cursor:pointer}[disabled].sc-smoothly-input-date-time-h,[disabled].sc-smoothly-input-date-time-h>smoothly-input.sc-smoothly-input-date-time>div.sc-smoothly-input-date-time>input.sc-smoothly-input-date-time{cursor:not-allowed}[looks=transparent].sc-smoothly-input-date-time-h smoothly-input.sc-smoothly-input-date-time{outline:none}.sc-smoothly-input-date-time-h>smoothly-calendar.sc-smoothly-input-date-time{position:absolute;z-index:20;top:4rem;background-color:rgb(var(--smoothly-input-background));min-width:18rem;max-width:22rem}.sc-smoothly-input-date-time-h>smoothly-calendar.sc-smoothly-input-date-time::before{content:"";box-sizing:border-box;position:absolute;top:-0.55rem;left:2rem;z-index:9;transform:rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-time-h>span.icons.sc-smoothly-input-date-time{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-time-h>smoothly-input[name="date"].sc-smoothly-input-date-time{width:12rem}.sc-smoothly-input-date-time-h>smoothly-input[name="hour"].sc-smoothly-input-date-time{width:4rem}.sc-smoothly-input-date-time-h>smoothly-input[name="minute"].sc-smoothly-input-date-time{min-width:4rem;flex-grow:1}.sc-smoothly-input-date-time-h>span.colon.sc-smoothly-input-date-time{padding:var(--input-value-padding-top)    var(--input-padding-side)    var(--input-value-padding-bottom)    var(--input-padding-side)}.sc-smoothly-input-date-time-h>.icons.sc-smoothly-input-date-time>.smoothly-invalid.sc-smoothly-input-date-time{display:none;z-index:2;cursor:pointer;padding:0.5rem}[invalid].sc-smoothly-input-date-time-h>.icons.sc-smoothly-input-date-time>.smoothly-invalid.sc-smoothly-input-date-time{display:flex}`;
+const styleCss$P = () => `.sc-smoothly-input-date-time-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-date-time-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-date-time-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-date-time-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-date-time-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-date-time-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-date-time-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-date-time-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-date-time-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-date-time-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-date-time-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-date-time-h,[looks="transparent"].sc-smoothly-input-date-time-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-date-time-h>input.sc-smoothly-input-date-time,[looks="transparent"].sc-smoothly-input-date-time-h:not(:focus-within)>input.sc-smoothly-input-date-time{background-color:transparent}[looks="transparent"].sc-smoothly-input-date-time-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-time-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-date-time-h.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time{transform-origin:top right}.sc-smoothly-input-date-time-h.floating-label.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.floating-label .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.has-value.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.has-value .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[placeholder].sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[placeholder] .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[readonly].sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[readonly] .sc-smoothly-input-date-time-s>[slot=label],.floating-label.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,.has-value.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,.has-text.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,[placeholder].sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,[readonly].sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,.sc-smoothly-input-date-time-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-time{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-time-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-time{display:none}.sc-smoothly-input-date-time-h smoothly-icon.smoothly-invalid.sc-smoothly-input-date-time{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-date-time-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-time-h>smoothly-input.sc-smoothly-input-date-time{--input-min-height:calc(var(--input-min-height) - 2px);--smoothly-input-border-focus:none}.sc-smoothly-input-date-time-h:not([readonly])>smoothly-input.sc-smoothly-input-date-time>div.sc-smoothly-input-date-time>input.sc-smoothly-input-date-time{cursor:pointer}[disabled].sc-smoothly-input-date-time-h,[disabled].sc-smoothly-input-date-time-h>smoothly-input.sc-smoothly-input-date-time>div.sc-smoothly-input-date-time>input.sc-smoothly-input-date-time{cursor:not-allowed}[looks=transparent].sc-smoothly-input-date-time-h smoothly-input.sc-smoothly-input-date-time{outline:none}.sc-smoothly-input-date-time-h>smoothly-calendar.sc-smoothly-input-date-time{position:absolute;z-index:20;top:4rem;background-color:rgb(var(--smoothly-input-background));min-width:18rem;max-width:22rem}.sc-smoothly-input-date-time-h>smoothly-calendar.sc-smoothly-input-date-time::before{content:"";box-sizing:border-box;position:absolute;top:-0.55rem;left:2rem;z-index:9;transform:rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-time-h>span.icons.sc-smoothly-input-date-time{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-time-h>smoothly-input[name="date"].sc-smoothly-input-date-time{width:12rem}.sc-smoothly-input-date-time-h>smoothly-input[name="hour"].sc-smoothly-input-date-time{width:4rem}.sc-smoothly-input-date-time-h>smoothly-input[name="minute"].sc-smoothly-input-date-time{min-width:4rem;flex-grow:1}.sc-smoothly-input-date-time-h>span.colon.sc-smoothly-input-date-time{padding:var(--input-value-padding-top)    var(--input-padding-side)    var(--input-value-padding-bottom)    var(--input-padding-side)}.sc-smoothly-input-date-time-h>.icons.sc-smoothly-input-date-time>.smoothly-invalid.sc-smoothly-input-date-time{display:none;z-index:2;cursor:pointer;padding:0.5rem}[invalid].sc-smoothly-input-date-time-h>.icons.sc-smoothly-input-date-time>.smoothly-invalid.sc-smoothly-input-date-time{display:flex}`;
 const SmoothlyInputDateTime = class {
     constructor(hostRef) {
@@ -7067,30 +7067,30 @@ const SmoothlyInputDateTime = class {
         this.isDifferentFromInitial = false;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ad93ad9f51896e7b99f721d7a81808e092816c03' }, index$1.h("smoothly-input", { key: '0e212a092315fa9a0feaaf67f3c2127a6c5d76c2', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+        return (index$1.h(index$1.Host, { key: '40f6c261f57e7dba3054cf01875d40cdc554ba16' }, index$1.h("smoothly-input", { key: '98aa0e61e439a1ae686191425fca97a99e3e9232', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail.date;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }, index$1.h("slot", { key: '3365117b617114c1c961a34660585c2ddae7f93d' })), index$1.h("smoothly-input", { key: '91b0c6323b1451c1b40f23bcf2aab162eeb2bf4d', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }, index$1.h("slot", { key: 'e54f5e30a8f8bb9add88f07365a723a784da6060' })), index$1.h("smoothly-input", { key: '777133878145c16fe94dc58ed7a3c7cbeb6bd44d', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), index$1.h("span", { key: '30f3a9608f30b70ec0e999b1087f124a2c0f8f9a', class: "colon" }, ":"), index$1.h("smoothly-input", { key: 'd3dfb6f59c4bffd573187b513abbcc3f26621389', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }), index$1.h("span", { key: '885faf984fcf9070a1d700acc89dd53dfc5f0731', class: "colon" }, ":"), index$1.h("smoothly-input", { key: '4af1ab62eabdb841edd6a20b9db3758eff7e26b6', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), index$1.h("span", { key: 'a909976d14881c52ff1461afde62ee22acccbea0', class: "icons" }, index$1.h("smoothly-icon", { key: 'd200862fdf9b53b85d1deb9569cf4b9c93aee077', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: 'c5391f31a81c2b9ed019fb27e5aefb2e41a91d49', name: "end" })), this.open && !this.readonly && (index$1.h("smoothly-calendar", { key: 'ac41f035d3f92fd3116dfcf360f2e4d921a829b0', doubleInput: false, value: this.value ? index.isoly.DateTime.getDate(this.value) : undefined, min: this.min ? index.isoly.DateTime.getDate(this.min) : undefined, max: this.max ? index.isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
+            } }), index$1.h("span", { key: 'ae5f1d26cffedde15e3857148fe17c985e147c8d', class: "icons" }, index$1.h("smoothly-icon", { key: 'f50114861f0731b7d5078a6ff683a065defa60e4', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: 'dbe69226779cb9f14e2077381fd9de71c96f5640', name: "end" })), this.open && !this.readonly && (index$1.h("smoothly-calendar", { key: 'e047e6e5de085a1c771854ecb9b990ca16e1aa52', doubleInput: false, value: this.value ? index.isoly.DateTime.getDate(this.value) : undefined, min: this.min ? index.isoly.DateTime.getDate(this.min) : undefined, max: this.max ? index.isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
                 this.open = false;
-            } }, index$1.h("div", { key: '3a0ea948b27c084501a8a98c9ad31195077abd86', slot: "year-label" }, index$1.h("slot", { key: 'cc59da90159452014a6434827619eade272e75d3', name: "year-label" })), index$1.h("div", { key: 'a7bbff950447fab625edc43dd12814b24711d568', slot: "month-label" }, index$1.h("slot", { key: 'a5d595242c8424d5a6021e7306c219cc828dbfb1', name: "month-label" }))))));
+            } }, index$1.h("div", { key: 'a06fbb5b5d6800c17166980e056023768eeaf26c', slot: "year-label" }, index$1.h("slot", { key: '2baa75fd451515f003ae91bc1e7393765cee9de7', name: "year-label" })), index$1.h("div", { key: '0b35ff73fbd4e4a0b8b49938a2c8f4deb79f6dd0', slot: "month-label" }, index$1.h("slot", { key: 'f41fd202bcd5d82d87b10ec331e8de51bd518f99', name: "month-label" }))))));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -7130,14 +7130,14 @@ const SmoothlyInputDemo = class {
         this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ef33e129690f3cd0a771a1b12dcb8f9c79fa566e' }, index$1.h("smoothly-input-demo-standard", { key: '5e12871414915755af5fb0e896b2ae9cbaeec449' }), index$1.h("smoothly-input-date-demo", { key: 'cd9a7179d6d78b58c64a37329d170dafa3c4d4ee' }), index$1.h("smoothly-input-demo-user-input", { key: '1dc3897e7c1bb3de9b45084c880745abfadb568c' }), index$1.h("smoothly-input-demo-radio", { key: '3a6b7c1417ea8a91a62d4c911562175ba623c1e5' }), index$1.h("div", { key: 'd218e51f2785f7caed4318ea33aaab6dca63d05e', class: "inputs" }, index$1.h("h2", { key: '53ac6e802dd3e3581ad3dc2feb629537dbeaf9b6' }, "Calendar"), index$1.h("smoothly-input-date", { key: '25127e4d56c34404d0dc25d63b7cc96c5e8c3645', name: "some-date" }, "Calendar"), index$1.h("smoothly-input-date-time", { key: 'e3025c6634241fa1347c7b2c93a918288a2371d6', name: "someDateTime", value: index.isoly.DateTime.now() }, "DateTime"), index$1.h("h2", { key: '6db99859de7c13e9d6d40aa5c7cbdc25cddffd14' }, "Date Range"), index$1.h("smoothly-input-date-range", { key: 'c56da60bdb19ea3c0305d1881180845f848cb625', name: "testing", start: index.isoly.Date.now(), end: index.isoly.Date.nextMonth(index.isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index$1.h("smoothly-input-date-range", { key: '556c9c8b45219b64f966252c9ea23b8a02bf78a2', name: "testing", start: index.isoly.Date.now(), end: index.isoly.Date.nextMonth(index.isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index$1.h("smoothly-input-reset", { key: 'd6e08652074753d81334f6f26872f16a4ad27120', slot: "end", size: "icon" })), index$1.h("smoothly-input-date-range", { key: '65bffbaab83f117517cd37087c028d1ed2b4936c', looks: "grid", start: index.isoly.Date.now(), end: index.isoly.Date.nextMonth(index.isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (index$1.h(index$1.Host, { key: '9abde760302f7d14296fc58d56b168ccd992c88a' }, index$1.h("smoothly-input-demo-standard", { key: '7145773de0c84eab437b1dc065202dc2cb19b37a' }), index$1.h("smoothly-input-date-demo", { key: 'c0304ad310674ae499009d58ddce974f7412c33f' }), index$1.h("smoothly-input-demo-user-input", { key: 'efde7d5d40929dcc96890f54a91797d0251db2bc' }), index$1.h("smoothly-input-demo-radio", { key: '9cde328a31101ee88b7ac3fd7f86abb00b8aedca' }), index$1.h("div", { key: '066262aa80f355d87120622b163621c209b0f43c', class: "inputs" }, index$1.h("h2", { key: 'bc38dbe23f7eb3611cac8cf83c5ce0634cb4e722' }, "Calendar"), index$1.h("smoothly-input-date", { key: 'f56708f29f4fa6158ea18b55d806215ee414c599', name: "some-date" }, "Calendar"), index$1.h("smoothly-input-date-time", { key: '5fe8d855011464f877d70981663f27980080c16a', name: "someDateTime", value: index.isoly.DateTime.now() }, "DateTime"), index$1.h("h2", { key: 'f060f3978aeb3707d20c26cdf03724ffb8b25220' }, "Date Range"), index$1.h("smoothly-input-date-range", { key: '397960f5adb2f9cdb84883e4a4a73134054e23be', name: "testing", start: index.isoly.Date.now(), end: index.isoly.Date.nextMonth(index.isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index$1.h("smoothly-input-date-range", { key: '37e2a88696a6c59498b203a00067c96028b8b7a9', name: "testing", start: index.isoly.Date.now(), end: index.isoly.Date.nextMonth(index.isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index$1.h("smoothly-input-reset", { key: 'e50dcde7cd3ce5a5286f5a9e6dfd8bbee00be2f9', slot: "end", size: "icon" })), index$1.h("smoothly-input-date-range", { key: 'ab99b94f110b3861c6b0350e555442325332f42a', looks: "grid", start: index.isoly.Date.now(), end: index.isoly.Date.nextMonth(index.isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, index$1.h("smoothly-input-clear", { key: 'e61e9737c489a68b612e38490fa4b2f95de72a6a', slot: "end", size: "icon" })), index$1.h("h2", { key: 'd7f0223de99a710561a28daf86ceb69d7aef1da1' }, "Date"), index$1.h("smoothly-input-date", { key: '2cf84ece02042c92ac3754379268a94ef536c91a' }, "Date"), index$1.h("smoothly-input-date", { key: 'b1b465843e3562c30e589af11004a09bf2b6157a', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index$1.h("smoothly-input-date", { key: '5810635fbfd26dd8735f8abd2c2e58f30affd61c', value: "2021-10-28" }, "Date", index$1.h("smoothly-input-reset", { key: 'd63d51b77f52243dfa9f13fe2754e53919d21c06', slot: "end", size: "icon" })), index$1.h("smoothly-input-date", { key: '7815c1afc2b1d38d3263630d8ef8d5a4cfa0a096', value: "2021-10-28" }, "Date", index$1.h("smoothly-input-clear", { key: 'cf8b725f54894024063bb6735e17ed692195c994', slot: "end", size: "icon" })), index$1.h("h2", { key: 'db2776f12559673b653e4671f92c578471e65a7a' }, "Select"), index$1.h("div", { key: '64ef6bd07f27d07cf6ea6dd23ae434503fdcc740', class: "select-div" }, index$1.h("smoothly-input-select", { key: '0a0f832b86bdb2fc7aeb964d52f320a6d76cf40d', name: "select-dessert", looks: "border" }, index$1.h("label", { key: 'd95e443f3df2398ca64bd6bcd64d6cdd629d0a8d', slot: "label" }, "Select with clear button"), index$1.h("smoothly-item", { key: 'c081a219a330aac151711e87423b474037b79628', value: "1" }, "Ice cream"), index$1.h("smoothly-item", { key: 'c168ee280c6dea09c54d86ae72fe2c79e134d448', value: "2" }, "Sponge cake"), index$1.h("smoothly-item", { key: 'cfea0b38d63995c108f0277ca248647725d22a60', value: "3", disabled: true }, "Disabled Item"), index$1.h("smoothly-item", { key: 'b93622e1a391c980d0c0371a0918dfca7ae7b456', value: "4" }, "Cookie"), index$1.h("smoothly-item", { key: 'e8733a8a51b09cea7ee31e4017f58152b58f5827', value: "5" }, "Croissant"), index$1.h("smoothly-item", { key: '90731e217754cb6c096cc190fb8b0c56c2bac593', value: "6" }, "Chocolate fondue"), index$1.h("smoothly-input-clear", { key: '0129f30c20777f9a37fc19ee8051e377507c9368', size: "icon", slot: "end" })), index$1.h("smoothly-input-select", { key: '94d3b7ca28b5fe5f9c9a3c587d995c65c8be45ad', multiple: true, name: "select-dessert-multiple", looks: "border" }, index$1.h("label", { key: '2d935f7418f8db300bf20412c4dd15934da5c0d3', slot: "label" }, "Select multiple with reset button"), index$1.h("smoothly-item", { key: '3c2579bffcde279703cfc041b315560a6dcc098e', value: "ice cream" }, "Ice cream"), index$1.h("smoothly-item", { key: 'a49fcce300b665b0de07fe67b5ea798e2fa94626', value: "sponge cake" }, "Sponge cake"), index$1.h("smoothly-item", { key: '4678f38edab9f88113c056ff820df2bd07e2fe33', selected: true, value: "cookie" }, "Cookie"), index$1.h("smoothly-item", { key: 'fdcf2ecd485fe75a35ca96ed89352a343819b770', value: "croissant" }, "Croissant"), index$1.h("smoothly-item", { key: 'f5cafb0e4b020489c72db9cd2362936449826dbd', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index$1.h("smoothly-input-reset", { key: '8c49833f66cee2e2ebac320c67ee5452a77636f7', size: "icon", slot: "end" })), index$1.h("smoothly-input-select", { key: '146806189c90cecb94e0bc9a01c713695689a2bc', name: "spirit-animals", looks: "border", mutable: true }, index$1.h("label", { key: '56bc9c8ef474ce79b1af47086b65847877d6a03c', slot: "label" }, "Select or add new options"), index$1.h("smoothly-item", { key: 'b13d4158fadfb725ff6c1ca236f4724ba95936df', value: "manatee" }, "Manatee"), index$1.h("smoothly-item", { key: '85d95f128731e5fd3ec1c1f3df672d98ff3a199a', selected: true, value: "cthulu" }, "Cthulu")), index$1.h("smoothly-input-select", { key: '3bffa0bfbce0ab015208bdff0d648bf8f6d497bf', name: "select-icon", clearable: false, showSelected: false }, index$1.h("smoothly-item", { key: '05d80d05561b9a716ea94d8e3fb3e3d5afc66c4c', value: "folder", selected: true }, index$1.h("smoothly-icon", { key: 'f86490ab381f59ed6fcdacb1d7441697fe645fd8', size: "small", name: "folder-outline" })), index$1.h("smoothly-item", { key: 'ec29517ce6ee5b7353bc20fc3c4365751815bfc6', value: "camera" }, index$1.h("smoothly-icon", { key: '75c27c69a18c0c37a6d989a2268ed9fa7ffb6daf', size: "small", name: "camera-outline" }))), index$1.h("smoothly-input-select", { key: '7ff7efc5b6f7a47da43fbd859a0c20cfb013c1c3', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index$1.h("label", { key: '3eb848081a594d164a7144ac8fe91719c11dd950', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, 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: '36db6fdd61728c21488000fb0e588858726de95d', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index$1.h("label", { key: 'b3a93c5d2b02f5c5ca50e2041db860082432ba0f', slot: "label" }, "Month multiple select"), index$1.h("smoothly-item", { key: '5b3f4d4dda6ca6bac04d3d58e14b1bc6808a515d', value: "1" }, "January"), index$1.h("smoothly-item", { key: '2137f933a08f0bff7661ef7eedb566ef0613b2c0', value: "2" }, "February"), index$1.h("smoothly-item", { key: '2b60b2706c7a4e560dc61969fe8bff8bae2ee3b4', value: "3" }, "March"), index$1.h("smoothly-item", { key: '10f7a805783997893080eba61a3a293901273b7e', value: "4" }, "April"), index$1.h("smoothly-item", { key: 'fbb81488473ab771ba92650e7f6c0d1e385a5486', value: "5" }, "May"), index$1.h("smoothly-item", { key: 'bb9a696e13859137773158b219807224c9e456d5', value: "6" }, "June"), index$1.h("smoothly-item", { key: 'cb9cb347df1ab4551d11a6104fea41e53646f7fe', value: "7" }, "July"), index$1.h("smoothly-item", { key: 'f636d5874c7b810b59d9aea7454ee060093946ff', value: "8" }, "August"), index$1.h("smoothly-item", { key: 'd7882ebaf8e4b13216201b04201f19d0152c7997', value: "9" }, "September"), index$1.h("smoothly-item", { key: '30815b5d8ae477d52a6896083f58d5e913fc6ec9', value: "10" }, "October"), index$1.h("smoothly-item", { key: '70658c05936d61c7e4faf8ab265d5e7ae448774a', value: "11" }, "November"), index$1.h("smoothly-item", { key: 'c737ec283e42443c75334f925d7fab3df2527a4f', value: "12" }, "December")), index$1.h("div", { key: 'a149cf4a6ebc5828e095c10e9d6d57abbc43c359', class: "select-div-row" }, index$1.h("smoothly-input-select", { key: '0b32d71db9eb24afd885c46ea5f414be1e55133c', name: "select-icon", clearable: false, showSelected: false }, index$1.h("smoothly-item", { key: '1c4fb8eeb730b8cfe6e4818ca16c565014a159a7', value: "folder", selected: true }, index$1.h("smoothly-icon", { key: '082d0bba96283c4bceb9f92c3e772bd3fd8b7011', size: "small", name: "folder-outline" })), index$1.h("smoothly-item", { key: 'ea4df02bbe52f26a1888b2f74ed587beb09890fe', value: "camera" }, index$1.h("smoothly-icon", { key: '166ec449cff9acf04d866ac4786ba9f30b2a3b42', size: "small", name: "camera-outline" })), index$1.h("smoothly-item", { key: '65aa76f7da4c5677b031fe45a5a86fca0a3d29ee', value: "boat" }, index$1.h("smoothly-icon", { key: '32d5688b2e74006e65131f11ee06890d8d52b5dd', size: "small", name: "boat-outline" }))), index$1.h("smoothly-input-select", { key: 'fccc2a0bad4e53a6fee2a5ceca85a59b91d70090', 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: 'f8a91a3e5d64b5058bb91a50dde94d3eb128f7b5', name: "name", value: "Sten Qvist" }, "Name"))), index$1.h("h2", { key: '012a2aeb69da69b0ab9cff4b761500892f2c9aba' }, "Duration"), index$1.h("smoothly-input", { key: '55df5644b13c507f13d0efec711da4c3ae59dc95', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index$1.h("smoothly-input", { key: '4aa5fe278bfd9e37e3a625b67304cadb164bdd78', 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: '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 => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), index$1.h("h2", { key: 'bb855c65c4b59aef87c9d4d18ac6db6b6d21bdec' }, "Integer with Min/Max"), index$1.h("smoothly-input", { key: '1a5e0092eb5330cc384aafce47e1438abca4a590', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index$1.h("smoothly-input", { key: '359faaba1e62172b0224c8d8ec58e49cb5a81f09', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index$1.h("smoothly-input", { key: '6ce0655a6b0134ce4175d65f80792287e48eefbe', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index$1.h("smoothly-input", { key: '3ce841cda01cbb2c4f346009648faa281831a4b2', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index$1.h("h2", { key: 'e63ebb0b5996cbf653c6b6c969df48d635e28c30' }, "Invalid text with warning icon and tooltip"), index$1.h("smoothly-input", { key: '62873bd1d9eadab148e0502f44fdbc779aa5a789', 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: '04dffd24a3af57da6ae369a8fbe9372893e6e380' }, "Identifiers"), index$1.h("smoothly-input", { key: '3d18b596880f98b84a07742cb9778d0095719294', type: "identifier-code" }, "Code"), index$1.h("smoothly-input", { key: '190651f4f4263eaacd8b80f90f4074fef28da183', type: "identifier-attribute" }, "Attribute"), index$1.h("smoothly-input", { key: '3a8802a9a173f518f975717cbe23cd1150316fc5', type: "identifier-snake" }, "Snake"), index$1.h("smoothly-input", { key: '00ec5419cd67a7217d23f95513f451f2c8e98f8e', type: "identifier-pascal" }, "Pascal"), index$1.h("smoothly-input", { key: '93eac4cce148e22640908d0d2f7c19a04b66d3f9', type: "identifier-camel" }, "Camel"), index$1.h("h2", { key: '98b93a5cb9daf216199adb5fa089ddd84bc96c61' }, "Input Alternatives"), index$1.h("smoothly-input", { key: 'a031c081e8531bad8400469ae449757958d7324a', type: "text", name: "name.last" }, index$1.h("smoothly-icon", { key: 'bf00331aeef0f1046c5505911d7db6ba845e636c', name: "checkmark-circle", slot: "start" }), "First Name"), index$1.h("smoothly-input", { key: '7824cf3b501d802ff40e4a750dd46defa9cac8b6', type: "text", name: "name.first" }, "Last Name", index$1.h("smoothly-icon", { key: '497b0417f5e7b0714753b0e5d78a78ab18130007', name: "checkmark-circle", slot: "end" })), index$1.h("smoothly-input", { key: 'ba93dadda8140d398c1d350f98c53d2a08c440db', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", index$1.h("smoothly-icon", { key: '28e8478b908bb51c6c5949e986c69930d1b10cb5', name: "checkmark-circle", slot: "end" })), index$1.h("smoothly-input", { key: 'fcb8531d6fe4129585e9a6d6e641022f2f14cb94', placeholder: "test" }), index$1.h("smoothly-input-submit", { key: '97a4d319d250ecd00ede7a5beb2c06b077e8e82c', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index$1.h("h4", { key: '50579aad1a91b0c728a127076a37be38273b3635' }, "Smoothly checkboxes"), index$1.h("div", { key: 'ceee0a83b7626132ac6323dfd894d8ece7ea2f69', class: "checkbox-group" }, index$1.h("smoothly-input-checkbox", { key: '0eab1d5ac670458ab57af847c9996fcf874fd985', disabled: true, name: "first-checkbox" }, index$1.h("smoothly-icon", { key: 'aa4259b0bc0193a0e31b2bdc2f9550d1e7a9cd66', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index$1.h("smoothly-input-checkbox", { key: '38fe8ffc98f95b0a81aba7dadb0a46f876ec09f4', name: "second-checkbox", checked: true }, index$1.h("smoothly-icon", { key: '40b2451d7fb2f705251abfb2158bc91a31ae9d3d', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index$1.h("smoothly-input-clear", { key: '34675173c8447131c978ca934fdde0d8764f44a8', size: "icon", slot: "end" })), index$1.h("smoothly-input-checkbox", { key: '42c6dd2f0fd6bb72d8ce31158f0451c5f500fe2b', name: "third-checkbox" }, "3rd")), index$1.h("h4", { key: '94ddf8048c28f947c3d20a2440c49e9340448c58' }, "Smoothly Radio Buttons"), index$1.h("smoothly-input-radio", { key: '0e308b17b5783bb23ce817cb30fbb9237a1b5b65', clearable: true, name: "radioFirstInput" }, index$1.h("smoothly-icon", { key: '61ab423d103c3f04fbaae7d02d0a1685d576fcfe', name: "checkmark-circle", slot: "start" }), index$1.h("label", { key: 'f75b6164630e97ad5f1174c08afe841e7321fe28', slot: "label" }, "Clearable"), index$1.h("smoothly-input-radio-item", { key: 'fd4284b27663aed055dce8671b46881789ba7dfb', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: '9554d37989867953cefb248a039d1c6217ea0c4f', selected: true, value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '7643fa634aa9693163de7926468ea47ea99d232f', value: "third" }, "Label 3"), index$1.h("smoothly-input-clear", { key: 'ef750494dee99f5bf962f93f143a80a540834f20', size: "icon", slot: "end" })), index$1.h("smoothly-input-radio", { key: '3cf94704be4ce872a79a97abb4dc1828ade9ad71', name: "radioSecondInput" }, index$1.h("label", { key: 'd3feeed0e6debeaba6e95eec7c6effa4e3aa0484', slot: "label" }, "Not clearable"), index$1.h("smoothly-input-radio-item", { key: 'ed5bc06f71277cc4ad5e644d4b07c42c80dd1027', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: '944215e958076b552f4ee8e5728897f63e88657c', value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '273705d445c5b1c1c01f6cea30bf8ad4036f932a', value: "third" }, "Label 3"), index$1.h("smoothly-input-radio-item", { key: 'c16dee456ac64f1aa945dcf6934ff6734c63e597', value: "fourth" }, "Label 4"), index$1.h("smoothly-input-radio-item", { key: 'd9795190e66042dedd027a4780900e2a32548ebc', value: "fifth" }, "Label 5"), index$1.h("smoothly-input-radio-item", { key: '985a353d4d42885a3597807d9b3a1d6fe2692520', value: "sixth" }, "Label 6")), index$1.h("smoothly-input-range-demo", { key: '011666bd072c688123437302f21ef556b9bc45cf' }), index$1.h("smoothly-input-color-demo", { key: 'a7e2fedb5277f19eee2c670bf88c1089ead1eb92' }), index$1.h("smoothly-input-price-demo", { key: '3e2f3d6d9e0e368ad4b8c7f3294bbc8cb19d3358' }), index$1.h("smoothly-back-to-top", { key: 'c2ecc189b026a4eae72d521e4cdffcfbd58ddbd9' }))));
+            } }, "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' }))));
     }
 };
 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: '926c46d5493184b5562db849fe49f8bc69467635' }, index$1.h("h2", { key: '482f5b5dad79420a7d17fd32f8ca364fff3fea40' }, "radio input - column direction"), index$1.h("smoothly-input-radio", { key: '56b8f69f400852f3476747d3cfca4e208659a55a', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, index$1.h("smoothly-input-radio-item", { key: 'f8efa9578d1cd57ed8a1c39f99d1ceb61dc15c0a', value: "1" }, index$1.h("span", { key: 'e8a9613c4be5a9a5f22e27376e2a5c3dc9432e9e' }, "Option 1"), index$1.h("span", { key: '59f7cb9ed2fb5ca96e16af28567e6ac29c920ee7', 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: '6c4733d75808282a051c25ccafdbffae1efec8b4', value: "2", selected: true }, index$1.h("span", { key: '135b8ad7de02530fb2ec7b1748c706ed7ad6a275' }, "Option 2"), index$1.h("div", { key: '8d8beb1041e44e46afe0423540b385ad7aa0a0d1', slot: "detail" }, index$1.h("smoothly-tabs", { key: '9295b932c4f29d8672003b063930beb56075662c' }, index$1.h("smoothly-tab", { key: '970586efae1aa46ddeb1c6ef203b89682251d77f', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), index$1.h("smoothly-tab", { key: '8faade213577e3d7cd4481f8c09ca80210f8312b', label: "Cat", name: "cat" }, "\uD83D\uDC08"), index$1.h("smoothly-tab", { key: '00c1e6c7f8fa0e3d2ee17f20ac212463f515c7a3', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
+        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")))))));
     }
     static get watchers() { return {
         "selected": [{
@@ -7184,7 +7184,7 @@ const SmoothlyInputDemoStandard = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '2e355c9aa093b8466d23357c9aae6d88011170be' }, index$1.h("div", { key: 'b212cbda84e5965666cce503713c85baaa045d32', class: "description" }, index$1.h("h2", { key: '21f4edf40038c44f1b745a0f0ae5c15a4d909ee6' }, "Input Standard"), index$1.h("p", { key: '3f4cf3c1e07effe5cb728f54311cf92f438eecf5' }, "Height of input should be ", index$1.h("code", { key: 'e5c546b13ce7c73522216a1509e50022c786a36a' }, "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: '6c3be1205cf4699ae45248278c21a217f5d35e9c', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index$1.h("smoothly-input-select", { key: 'c76494d9a20e705a7a9350f621104aec46b0e857', name: "color" }, index$1.h("span", { key: 'c1ccb2f1c17b46e976fadd5331f07c4d7a699791', 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: 'dbaa782144733cdcbec4d5257e21b0a4f170e5e5', slot: "end" })), index$1.h("smoothly-input-select", { key: '28b28e354ac6fc5637ecf14acccfe30bfef11ff6', name: "looks" }, index$1.h("span", { key: 'f1452804684f0a76d78542a9cb64928a478f03ec', slot: "label" }, "Looks"), Looks.values.map(l => (index$1.h("smoothly-item", { value: l }, l)))), index$1.h("smoothly-input-range", { key: '3ca928155a582e8b5ab68ebdc2de073c390b58ed', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), index$1.h("smoothly-input-checkbox", { key: '99e0f80359bb1d1813b4445fc642aeff881d0d12', name: "readonly" }, "Readonly"), index$1.h("smoothly-input-checkbox", { key: 'fb4e997a1751c7a05fb97d40ae5e151ad62e7a53', name: "disabled" }, "Disabled"), index$1.h("smoothly-input-checkbox", { key: '78a9cf0fe349660d1f6869a4051051006b0f13ac', name: "invalid" }, "Invalid"), index$1.h("smoothly-input", { key: '01b1d2c7089b8d24d40de9799f6296d8e2e1c34a', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index$1.h("smoothly-input-checkbox", { key: '3a8c24b67d02e7e040ea452bcb74dfcf8176eb6c', name: "showLabel", checked: true }, "Show Label"), index$1.h("smoothly-input", { key: '143f2e8974ac80899bcac6c582cfe071c370b491', name: "placeholder" }, "Placeholder"), index$1.h("smoothly-input-checkbox", { key: 'd16643507059700194c9b5b5d402d83d68ac7d42', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), index$1.h("div", { key: '5c3a8ad043a7d87f872343009acf3b09c9c61b40', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index$1.h("div", { key: '2f5cde81d501ffd5c2bce64e1b54586f489cd11f', class: "width" }, "width: 100%"), index$1.h("div", { key: 'a055e7019d888ca2c12161581c2c77a35fa247ba', class: "left-padding" }, "padding-left: 0.5rem"), index$1.h("smoothly-input", { key: 'f7840a4c2c7197895adabac250b283dd1209d440', 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: '5983ef639593b4f877b77b99d58f08d9fd47b98d' }, "Text"), index$1.h("smoothly-input-clear", { key: '252b68a3efdc6b70a0532eacb18cbcd137b207b3', slot: "end" })), index$1.h("div", { key: '37c4139e98071dec4901519ba10a075219e270bf', class: "height" }), index$1.h("smoothly-input-select", { key: '6ed894124eadea113968089eba5c38c7fff2caf4', 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: '2229eee3d5a4cab69d203a4f3b8f313693d1852c', slot: "label" }, "Select"), index$1.h("smoothly-item", { key: 'bfb7e1e1302677b556256f5c871eaabf83a1a22d', value: "1" }, "January"), index$1.h("smoothly-item", { key: '37b4e1404f0d93c3cfec6ae778a009cccc481f37', value: "2" }, "February"), index$1.h("smoothly-item", { key: '7804e2f534c4cd279e5f29e212bc8b3f07d3be9e', value: "3" }, "March"), index$1.h("smoothly-item", { key: '7de014b6870276d1afbc3f8b4780dd789b42501e', value: "4" }, "April"), index$1.h("smoothly-item", { key: 'e30eac74368b6ae4eaf58f371c8bdd0d030c76c1', value: "5" }, "May"), index$1.h("smoothly-item", { key: '90e999da893c3c3d6c9aea57d500808fac2f64d4', value: "6" }, "June"), index$1.h("smoothly-item", { key: '0c3ae02ce9a1c9ab4fca7c06fd3809ee8067bce5', value: "7" }, "July"), index$1.h("smoothly-item", { key: '689c71f20be3bc6fb057445c5ceaa60718f05603', value: "8" }, "August"), index$1.h("smoothly-item", { key: 'b1443376f5fa483d15873c9232290f6b6e270f1c', value: "9" }, "September"), index$1.h("smoothly-item", { key: '5055f6a2b1e136f911f32bc053d35c1931faaf02', value: "10" }, "October"), index$1.h("smoothly-item", { key: '512f871512f7bdd02462b286f724b66b7a845c48', value: "11" }, "November"), index$1.h("smoothly-item", { key: '4b6c5608cd060744cdd798803e67f2188ada562f', value: "12" }, "December"), index$1.h("smoothly-input-clear", { key: '7fd619f654ad16a0048a12793092d214bb87a7dc', slot: "end" })), index$1.h("div", { key: 'ab13b70b196dbc83d694145abd870bee5d121be1', class: "height" }), index$1.h("smoothly-input-checkbox", { key: '2eb487f1b741e7b12b50bc1b6eed8990a89b059e', 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: 'df9db551b674bb4df52b7c84bafbf25adab266fa', slot: "end" })), index$1.h("div", { key: 'bb29d6b57fdf27d523c4690ce4903187590c5b18', class: "height" }), index$1.h("smoothly-input-radio", { key: '12e400081cb687023137e7f1a3834915c846ac3f', 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: 'd0646e2ca2ddd5ec6d7b6cdcddace55e907f4f59', slot: "label" }, "Radio"), index$1.h("smoothly-input-radio-item", { key: '5f2dd2ecb3289f99f82367cc0ab4c14b578ca0a3', value: "first" }, "Label 1"), index$1.h("smoothly-input-radio-item", { key: '5abdb6fb7897c18e088c85ec08313769e744583c', selected: true, value: "second" }, "Label 2"), index$1.h("smoothly-input-radio-item", { key: '2bba28393706691b0973bd9f92836bd28c890b07', value: "third" }, "Label 3"), index$1.h("smoothly-input-clear", { key: '5853dbcda5ed68ce1401245bba244f19a248ccbe', slot: "end" })), index$1.h("div", { key: '7b1fc6de01785728d758ea07c55c3f2ff47415c8', class: "height" }), index$1.h("smoothly-input-file", { key: '1eac17bd99f215911b95f67312164ed294952b6d', 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: '43d11a34c076520aed899bceb035c829836fd725', slot: "label" }, "File"), index$1.h("smoothly-input-clear", { key: '106b3c31ae10b64bdc4bc309a3512d58e929f4e2', slot: "end" })), index$1.h("div", { key: 'd13c20742bb1e088160b7cc59efb5f75dbfa4eaf', class: "height" }), index$1.h("smoothly-input-range", { key: 'd81378e953c5fe82ec020e544de7cf15d0e76434', 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: '27e6247aa7c628859ebab11d8da32cf8be3dfd03', slot: "end" })), index$1.h("div", { key: 'ae21676a75148c438d070bf932e96b09f2237325', class: "height" }), index$1.h("smoothly-input-color", { key: '718f8309dd37c5e4552de5a2d5c00483b6397127', 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: 'eaadb8d6f5fa9f6143f2d2549e1b7901e32b2bef' }, "Color"), index$1.h("smoothly-input-clear", { key: 'f396f11146e3fb840e559086cf45ec745fe9dad8', slot: "end" })), index$1.h("div", { key: '60c4fcb685302ae33a5ff3f700b1b3c0010fd316', class: "height" }), index$1.h("smoothly-input-date", { key: '9eadbb8a6648c0986b83bc6c044683ddc7012472', 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: 'f2502eeec674553779739ba3bf9d6beaa55566a2' }, "Date"), index$1.h("smoothly-input-clear", { key: 'f36a9a9403e5aa756a5c1a955cc526b2b349aeb3', slot: "end" })), index$1.h("div", { key: 'd0a81dd6a18ae37f0c55e7aa448d4323197b4e40', class: "height" }), index$1.h("smoothly-input-date-time", { key: 'a2c25b754dab6b88d1e25a8abecbe227153eab18', 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: '8e392cdd2f0c92a9aca8f1e468c236065fd3c2b0', slot: "end" })), index$1.h("div", { key: '76f81fc46a552dd4ebe1b15b888b85e0faabf5bb', class: "height" }), index$1.h("smoothly-input-date-range", { key: '3837975fd0e591d52386c1b12f3171d64e91cf80', 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: '676c2f53a26198524881f0221c73e6b654bb13dc' }, "Date Range"), index$1.h("smoothly-input-clear", { key: '1e4740db4bf043f74cfafa1e7e91312878b71b86', slot: "end" })), index$1.h("div", { key: 'db0449b44b24dd20fccdb99329b876d938d5f68c', class: "height" }))));
+        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" }))));
     }
     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: '3707001c9bf5406f3770f566924f8983d4444e18' }, index$1.h("div", { key: '6970bb763108f56a34284bb1f3cb73545f2dba2c' }, index$1.h("h2", { key: 'e5f96a2b6c360e8f9a81dd90d148822758719850' }, "User Input Event"), index$1.h("p", { key: 'e1fb246660c29ddb2791f4dc6f9779ed5f1c18a7' }, "These inputs demonstrate how user input is handled. The ", index$1.h("code", { key: '5a9145c2d8517baff49e70fd4aeed1f38600ba7f' }, "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: '15459234d2bf75b83479ff0786a20d2433e2dec3' }), "Check the console to see the details of each ", index$1.h("code", { key: 'bc857f9996667580c4ba88a74eca429fbc0d9c83' }, "smoothlyUserInput"), " event.")), index$1.h("smoothly-button", { key: '66a1190b2266b0650ba087572545780f93d86ac0', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), index$1.h("smoothly-input", { key: 'a8630cec4bbada0c7084172822b3eeef576066ce', 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: '74fe6cc20fa495f2d6c79d13bb016bc76cada1bc', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), index$1.h("smoothly-input-select", { key: '5f1ad8448db267de3fc98b820be7aca9b64c2a9e', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index$1.h("span", { key: '507fcecb4e27938be38144991221dfe3603c0667', 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: '883f987123234566bdfd192ebd71605b078434ab', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), index$1.h("smoothly-input-checkbox", { key: '26a326a43a44339392cca252cace5148c55305d9', 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: '39dfbc581f8468c49969d5186c9a39304c8b805c', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), index$1.h("smoothly-input-radio", { key: 'f26209ed69e401cacbf6ea0094c1e3c8c6640181', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index$1.h("span", { key: '30b7f2d96d68bbeef6578e5c3fa07d5c56e8131e', 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: '7d1e0c7d7175bae2453a2392e47a84e21faaa4ea', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), index$1.h("smoothly-input-range", { key: '0d90079afa3c0beaf9562af7b6db39c0a2795008', 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: '2161ee4b978c2c37049cfc3d1bfd6ea5de6e16ea', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), index$1.h("smoothly-input-color", { key: '271b3aaeba445473425259990276cf6803eeba55', 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: '5d21c601bdd2b921e6d6cd6596e871fe0ce0d486', 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: '176fda15f938f2b90134e186c75869db175621a3', 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: '50ee6d7e90187eca79dea958e43fe4d38bb4e544', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        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
                 ? index.isoly.DateTime.nextDay(this.datetimeValue)
-                : index.isoly.DateTime.now()) }, "Next date time"), index$1.h("smoothly-input-date-time", { key: 'b688a44b6ae626c27a5e3e26d4c9be570d0f59f1', 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: '9172cca5a258985cda5f244d38d56b692ea75e00', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : 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
                 ? { 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: '4ee747fb66efa022a9e31fda59f4ca839e4b0c5d', 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: '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")));
     }
 };
 SmoothlyInputDemoUserInput.style = styleCss$L();
@@ -7240,12 +7240,12 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '9a5ec7132b415604c425c43a2ac7c460c6ca784b', title: this.tooltip }, index$1.h("smoothly-button", { key: '68711cee29eb01755e85b9acb21bd153ef88f2df', 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: '73063df194c9194a5d06dc2c1d0fee8d03d0cdfa' }), index$1.h("smoothly-icon", { key: '39b4f6d6a588feeedfd6610777e323dc0da34f32', class: "default", name: "create-outline", size: "tiny" }))));
+        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" }))));
     }
 };
 SmoothlyInputEdit.style = styleCss$K();
-const styleCss$J = () => `.sc-smoothly-input-file-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-file-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-file-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-file-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-file-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-file-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-file-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-file-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-file-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-file-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-file-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-file-h,[looks="transparent"].sc-smoothly-input-file-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-file-h>input.sc-smoothly-input-file,[looks="transparent"].sc-smoothly-input-file-h:not(:focus-within)>input.sc-smoothly-input-file{background-color:transparent}[looks="transparent"].sc-smoothly-input-file-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-file-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-file-h.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h .label.sc-smoothly-input-file{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-file-h.floating-label.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.floating-label .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.has-value.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.has-value .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[placeholder].sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[placeholder] .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[readonly].sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[readonly] .sc-smoothly-input-file-s>[slot=label],.floating-label.sc-smoothly-input-file-h .label.sc-smoothly-input-file,.has-value.sc-smoothly-input-file-h .label.sc-smoothly-input-file,.has-text.sc-smoothly-input-file-h .label.sc-smoothly-input-file,[placeholder].sc-smoothly-input-file-h .label.sc-smoothly-input-file,[readonly].sc-smoothly-input-file-h .label.sc-smoothly-input-file,.sc-smoothly-input-file-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-file{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-file-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-file{display:none}.sc-smoothly-input-file-h smoothly-icon.smoothly-invalid.sc-smoothly-input-file{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-file-h{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;overflow:hidden;position:relative;width:100%;padding-left:var(--input-padding-side);background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file{position:absolute;inset:0;background-color:rgb(var(--smoothly-input-hover-background), 0.6);border-radius:var(--smoothly-input-border-radius);border:0.25rem dashed rgb(var(--smoothly-input-hover-foreground));display:flex;justify-content:center;align-items:center}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file>smoothly-icon.sc-smoothly-input-file{color:rgb(var(--smoothly-input-hover-foreground))}.sc-smoothly-input-file-h:not(.dragging)>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file{display:none}.sc-smoothly-input-file-h>div.input.sc-smoothly-input-file>input.sc-smoothly-input-file{overflow:hidden;height:0;width:0;padding:0}.sc-smoothly-input-file-h:not([show-label])>div.input.sc-smoothly-input-file{display:flex;align-items:center;padding-bottom:0.2rem}.sc-smoothly-input-file-h:not([show-label])>smoothly-button.sc-smoothly-input-file:not(:empty){margin-right:1ch}[show-label].sc-smoothly-input-file-h>div.input.sc-smoothly-input-file{display:flex;padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom);height:100%;box-sizing:border-box;flex-grow:1}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>smoothly-button.sc-smoothly-input-file{--smoothly-button-height:1.4rem;margin:0;border:none}.sc-smoothly-input-file-h>label.sc-smoothly-input-file{left:var(--input-padding-side)}.sc-smoothly-input-file-h:not([readonly]),.sc-smoothly-input-file-h:not([readonly]) *.sc-smoothly-input-file{cursor:pointer}[disabled].sc-smoothly-input-file-h,[disabled].sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:not-allowed}`;
+const styleCss$J = () => `.sc-smoothly-input-file-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-file-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-file-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-file-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-file-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-file-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-file-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-file-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-file-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-file-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-file-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-file-h,[looks="transparent"].sc-smoothly-input-file-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-file-h>input.sc-smoothly-input-file,[looks="transparent"].sc-smoothly-input-file-h:not(:focus-within)>input.sc-smoothly-input-file{background-color:transparent}[looks="transparent"].sc-smoothly-input-file-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-file-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-file-h.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h .label.sc-smoothly-input-file{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-file-h .label.sc-smoothly-input-file{transform-origin:top right}.sc-smoothly-input-file-h.floating-label.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.floating-label .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.has-value.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.has-value .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[placeholder].sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[placeholder] .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[readonly].sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[readonly] .sc-smoothly-input-file-s>[slot=label],.floating-label.sc-smoothly-input-file-h .label.sc-smoothly-input-file,.has-value.sc-smoothly-input-file-h .label.sc-smoothly-input-file,.has-text.sc-smoothly-input-file-h .label.sc-smoothly-input-file,[placeholder].sc-smoothly-input-file-h .label.sc-smoothly-input-file,[readonly].sc-smoothly-input-file-h .label.sc-smoothly-input-file,.sc-smoothly-input-file-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-file{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-file-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-file{display:none}.sc-smoothly-input-file-h smoothly-icon.smoothly-invalid.sc-smoothly-input-file{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-file-h{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;overflow:hidden;position:relative;width:100%;padding-left:var(--input-padding-side);background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file{position:absolute;inset:0;background-color:rgb(var(--smoothly-input-hover-background), 0.6);border-radius:var(--smoothly-input-border-radius);border:0.25rem dashed rgb(var(--smoothly-input-hover-foreground));display:flex;justify-content:center;align-items:center}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file>smoothly-icon.sc-smoothly-input-file{color:rgb(var(--smoothly-input-hover-foreground))}.sc-smoothly-input-file-h:not(.dragging)>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file{display:none}.sc-smoothly-input-file-h>div.input.sc-smoothly-input-file>input.sc-smoothly-input-file{overflow:hidden;height:0;width:0;padding:0}.sc-smoothly-input-file-h:not([show-label])>div.input.sc-smoothly-input-file{display:flex;align-items:center;padding-bottom:0.2rem}.sc-smoothly-input-file-h:not([show-label])>smoothly-button.sc-smoothly-input-file:not(:empty){margin-right:1ch}[show-label].sc-smoothly-input-file-h>div.input.sc-smoothly-input-file{display:flex;padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom);height:100%;box-sizing:border-box;flex-grow:1}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>smoothly-button.sc-smoothly-input-file{--smoothly-button-height:1.4rem;margin:0;border:none}.sc-smoothly-input-file-h>label.sc-smoothly-input-file{left:var(--input-padding-side)}.sc-smoothly-input-file-h:not([readonly]),.sc-smoothly-input-file-h:not([readonly]) *.sc-smoothly-input-file{cursor:pointer}[disabled].sc-smoothly-input-file-h,[disabled].sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:not-allowed}`;
 const SmoothlyInputFile = class {
     constructor(hostRef) {
@@ -7356,7 +7356,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index$1.h(index$1.Host, { key: '2e050fb7cb01d7ca5883d61d758ac5977e4dc924', 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: 'f86995572138b5b55929705c4aa61bb3b3c8a1d1' }, index$1.h("slot", { key: '52a4f69b13363d0a1fce31f90606ff4d21208121', name: "label" })), index$1.h("div", { key: 'c54b40386b0d0efba68b056be954938879ed7df9', class: "input" }, index$1.h("smoothly-button", { key: '9e410cfb7cb0fc2b978f4f74256a753c43491f17', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, index$1.h("slot", { key: '41b301b936471d3c57001a1dbd44ca8372624c3a', name: "button" })), index$1.h("span", { key: '619c56a1f7e01df014208f2b4372db8a3da3daeb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index$1.h("div", { key: '22bc6bb85102cb5863ed88a7d6cbd51fd931c646', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index$1.h("smoothly-icon", { key: '6614887b4520638121de556ee1b22cbb7da6ed7f', name: "document-attach-outline" })), index$1.h("input", { key: 'f93e131c684891ac1b7f956a699db014dde8108c', 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: '0d1d1835e479070204bc72f083a6747d05387c82', onClick: (e) => e.stopPropagation() }, index$1.h("slot", { key: '7df7be0bc7f23c18e349bf5bba640a6cfa83813d', name: "end" }))));
+        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" }))));
     }
     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: '0916e28b908af47e518baff4c2953a15c4e5b93e' }, index$1.h("smoothly-icon", { key: 'fd4d9e582a0feb692b8fc4455e0fef445326d929', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        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: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index$1.h("smoothly-input-select", { key: 'b09547849f9f3e7f3780ea4e6231bcd47c4ae175', 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: '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 => {
                 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: 'e1f4f143cfef863419a68b24e887579ecf3fe9d9', slot: "label" }, index$1.h("slot", { key: '01b386aa3ec76ba077158774c26256b1c25c97ca', 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: 'c7193a5c1430db7fbb14766b5e1985e1258cdb77', 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: '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 => {
                 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: '0d5bc697879c2c018331583326029b20fc7a442c', slot: "label" }, index$1.h("slot", { key: '3909a5c34b455c6ed65f6bebf7a2174e0577de2b', 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: '441a3228fcb722ab8ebbcb1138aba71e0306625a', 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: '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) })));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -7529,12 +7529,12 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c467c7cb0bc71a80d80b0249bbdaf6b6be48af4b' }, index$1.h("h2", { key: '216b76ae5cb923903331b846f0897471ae96bd87' }, "State demo on smoothly-input"), index$1.h("p", { key: '50522fbe29c228cf83f1450dbcb32e96d37b2587' }, "This demo/test the internal state of the smoothly-input component."), index$1.h("p", { key: '5393c97d661ad1dd1fe8bbac11a2f731ad7fea77' }, "The currency of the price should update when switching between the currencies."), index$1.h("smoothly-input-radio", { key: 'f782f50671c0b67344238121e6d742df328672bc', 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: '18a4f7dbfc952fcfa6db9188f8ad98c0c7f98731', type: "price", currency: this.currency }, "price")));
+        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")));
     }
 };
 SmoothlyInputPriceDemo.style = styleCss$H();
-const styleCss$G = () => `.sc-smoothly-input-radio-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-radio-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-radio-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-radio-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-radio-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-radio-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-radio-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-radio-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-radio-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-radio-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-radio-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-radio-h,[looks="transparent"].sc-smoothly-input-radio-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-radio-h>input.sc-smoothly-input-radio,[looks="transparent"].sc-smoothly-input-radio-h:not(:focus-within)>input.sc-smoothly-input-radio{background-color:transparent}[looks="transparent"].sc-smoothly-input-radio-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-radio-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-radio-h.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-radio-h.floating-label.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.floating-label .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.has-value.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.has-value .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[placeholder].sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[placeholder] .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[readonly].sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[readonly] .sc-smoothly-input-radio-s>[slot=label],.floating-label.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,.has-value.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,.has-text.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,[placeholder].sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,[readonly].sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,.sc-smoothly-input-radio-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-radio{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-radio-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-radio{display:none}.sc-smoothly-input-radio-h smoothly-icon.smoothly-invalid.sc-smoothly-input-radio{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-radio-h{background-color:rgb(var(--smoothly-input-background));display:flex;align-items:center;padding-left:var(--input-padding-side);box-sizing:border-box}[show-label].sc-smoothly-input-radio-h>div.sc-smoothly-input-radio{position:relative;padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-radio-h>div.sc-smoothly-input-radio,.sc-smoothly-input-radio-h>div.sc-smoothly-input-radio>div.options.sc-smoothly-input-radio{display:flex;gap:1.5rem;width:100%}[direction=column].sc-smoothly-input-radio-h>div.sc-smoothly-input-radio>div.options.sc-smoothly-input-radio{flex-direction:column}.sc-smoothly-input-radio-h.sc-smoothly-input-radio-s>[slot=end]{margin-right:0;margin-left:auto}[disabled].sc-smoothly-input-radio-h smoothly-input-radio-item.sc-smoothly-input-radio *.sc-smoothly-input-radio{cursor:not-allowed}`;
+const styleCss$G = () => `.sc-smoothly-input-radio-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-radio-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-radio-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-radio-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-radio-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-radio-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-radio-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-radio-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-radio-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-radio-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-radio-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-radio-h,[looks="transparent"].sc-smoothly-input-radio-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-radio-h>input.sc-smoothly-input-radio,[looks="transparent"].sc-smoothly-input-radio-h:not(:focus-within)>input.sc-smoothly-input-radio{background-color:transparent}[looks="transparent"].sc-smoothly-input-radio-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-radio-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-radio-h.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}[right].sc-smoothly-input-radio-h .label.sc-smoothly-input-radio{transform-origin:top right}.sc-smoothly-input-radio-h.floating-label.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.floating-label .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.has-value.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.has-value .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[placeholder].sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[placeholder] .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[readonly].sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[readonly] .sc-smoothly-input-radio-s>[slot=label],.floating-label.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,.has-value.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,.has-text.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,[placeholder].sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,[readonly].sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,.sc-smoothly-input-radio-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-radio{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-radio-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-radio{display:none}.sc-smoothly-input-radio-h smoothly-icon.smoothly-invalid.sc-smoothly-input-radio{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-radio-h{background-color:rgb(var(--smoothly-input-background));display:flex;align-items:center;padding-left:var(--input-padding-side);box-sizing:border-box}[show-label].sc-smoothly-input-radio-h>div.sc-smoothly-input-radio{position:relative;padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-radio-h>div.sc-smoothly-input-radio,.sc-smoothly-input-radio-h>div.sc-smoothly-input-radio>div.options.sc-smoothly-input-radio{display:flex;gap:1.5rem;width:100%}[direction=column].sc-smoothly-input-radio-h>div.sc-smoothly-input-radio>div.options.sc-smoothly-input-radio{flex-direction:column}.sc-smoothly-input-radio-h.sc-smoothly-input-radio-s>[slot=end]{margin-right:0;margin-left:auto}[disabled].sc-smoothly-input-radio-h smoothly-input-radio-item.sc-smoothly-input-radio *.sc-smoothly-input-radio{cursor:not-allowed}`;
 const SmoothlyInputRadio = class {
     constructor(hostRef) {
@@ -7688,13 +7688,58 @@ const SmoothlyInputRadioItem = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '6cda60049d14ae191ab196ba44e1b865b337638c', onClick: () => this.inputHandler(true) }, index$1.h("input", { key: '5e312eb0fef6fde4eeaa6f450447b0d2cd0536fe', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), index$1.h("smoothly-icon", { key: 'ac4eed680c8cb314f1b5f4a9857e6646aac6cb82', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), index$1.h("label", { key: 'c96f7fcd07b7687db703519960ae88101abb17c6' }, index$1.h("slot", { key: 'a3628941ed9b7a933c3a92908b0b5fd03d20d98e' })), index$1.h("slot", { key: 'f689489ccc1616f2715c1336979f674d64f56a9c', name: "detail" })));
+        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" })));
     }
     get element() { return index$1.getElement(this); }
 };
 SmoothlyInputRadioItem.style = styleCss$F();
-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}.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:5em;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}`;
+var Range;
+(function (Range) {
+    function is(value) {
+        return typeof value == "object" && value != undefined && "start" in value && "end" in value;
+    }
+    Range.is = is;
+    function clamp(value, min, max) {
+        return value < min ? min : value > max ? max : value;
+    }
+    Range.clamp = clamp;
+    function round(value, step) {
+        var _a, _b;
+        const decimals = !step ? undefined : ((_b = (_a = step.toString().split(".")[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+        return +value.toFixed(decimals);
+    }
+    Range.round = round;
+    function setPart(current, part, value, min, max) {
+        const clamped = clamp(value, min, max);
+        return part == "start"
+            ? { start: Math.min(clamped, current.end), end: current.end }
+            : { start: current.start, end: Math.max(clamped, current.start) };
+    }
+    Range.setPart = setPart;
+    function normalize(value, step) {
+        return is(value)
+            ? { start: round(value.start, step), end: round(value.end, step) }
+            : value == undefined || Number.isNaN(value)
+                ? undefined
+                : round(value, step);
+    }
+    Range.normalize = normalize;
+    function equals(a, b) {
+        return is(a) && is(b) ? a.start === b.start && a.end === b.end : a === b;
+    }
+    Range.equals = equals;
+    function defined(value) {
+        return is(value) ? typeof value.start == "number" && typeof value.end == "number" : typeof value == "number";
+    }
+    Range.defined = defined;
+    function percent(value, min, max) {
+        return max == min ? 0 : ((value - min) / (max - min)) * 100;
+    }
+    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 SmoothlyInputRange = class {
     constructor(hostRef) {
@@ -7707,7 +7752,9 @@ const SmoothlyInputRange = class {
         this.isDifferentFromInitial = false;
         this.observer = Editable.Observer.create(this);
         this.initialValue = undefined;
+        this.sliding = false;
         this.value = undefined;
+        this.dual = false;
         this.defined = false;
         this.readonly = false;
         this.type = "text";
@@ -7719,11 +7766,16 @@ const SmoothlyInputRange = class {
     }
     componentWillLoad() {
         this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), (this.color = color)); });
-        this.smoothlyInput.emit({ [this.name]: this.value });
         this.smoothlyInputLoad.emit(parent => (this.parent = parent));
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
-        this.value && (this.initialValue = this.value);
-        this.valueChanged();
+        if (this.dual && !Range.is(this.value)) {
+            this.initialValue = { start: this.min, end: this.max };
+            this.value = this.initialValue;
+        }
+        else {
+            this.value && (this.initialValue = this.value);
+            this.valueChanged();
+        }
     }
     smoothlyInputLoadHandler(event) {
         Input.registerSubAction(this, event);
@@ -7768,20 +7820,24 @@ const SmoothlyInputRange = class {
         this.valueChanged();
     }
     valueChanged() {
-        var _a, _b;
-        const decimals = !this.step ? undefined : ((_b = (_a = this.step.toString().split(".")[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
-        this.value = Number.isNaN(this.value) || this.value == undefined ? undefined : +this.value.toFixed(decimals);
-        this.isDifferentFromInitial = this.initialValue != this.value;
-        this.defined = typeof this.value == "number";
-        this.observer.publish();
-        this.smoothlyInput.emit({ [this.name]: this.value });
+        const normalized = Range.normalize(this.value, this.step);
+        if (!Range.equals(normalized, this.value)) {
+            this.value = normalized;
+            return;
+        }
+        this.isDifferentFromInitial = !Range.equals(this.initialValue, this.value);
+        this.defined = Range.defined(this.value);
+        if (!this.sliding) {
+            this.observer.publish();
+            this.smoothlyInput.emit({ [this.name]: this.value });
+        }
     }
     watchingReadonly() {
         this.observer.publish();
     }
     setValue(value) {
         var _a;
-        if (value == undefined) {
+        if (value == undefined || Number.isNaN(value)) {
             this.value = undefined;
         }
         else if (value < this.min) {
@@ -7795,20 +7851,84 @@ const SmoothlyInputRange = class {
         }
         this.input && (this.input.value = this.type == "text" ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() : this.value);
     }
-    render() {
+    setRange(part, value) {
+        const current = Range.is(this.value) ? this.value : { start: this.min, end: this.max };
+        const resolved = value == undefined || Number.isNaN(value) ? (part == "start" ? this.min : this.max) : value;
+        const next = Range.setPart(current, part, resolved, this.min, this.max);
+        if (Range.equals(next, this.value)) {
+            return;
+        }
+        this.value = next;
+        const field = part == "start" ? this.startInput : this.endInput;
+        const bound = next[part];
+        field && (field.value = this.type == "text" ? bound.toString() : bound);
+        !this.sliding && this.smoothlyUserInput.emit({ name: this.name, value: this.value });
+    }
+    async commitField(part) {
+        const field = part == "start" ? this.startInput : this.endInput;
+        this.setRange(part, field ? Number(await field.getValue()) : undefined);
+        const bound = Range.is(this.value) ? this.value[part] : undefined;
+        field === null || field === void 0 ? void 0 : field.setValue(this.type == "text" ? bound === null || bound === void 0 ? void 0 : bound.toString() : bound);
+    }
+    renderSingle() {
         var _a, _b, _c;
-        return (index$1.h(index$1.Host, { key: '5156fee6f8e0d7a3a14c11bc6476424935972d46', class: {
-                "output-side-right": this.outputSide === "right",
-                "show-label": this.outputSide === "left" && !!this.label,
-            } }, index$1.h("slot", { key: '85ba263c778cec6970979f819a815a98088a8dae', name: "start" }), index$1.h("div", { key: 'd1e281cc39cfd5b442c298659ddad32927f83a7e' }, index$1.h("label", { key: 'fbe971c908c237c3f2497e8c5c4d858abf031be6', htmlFor: this.name }, this.label), index$1.h("smoothly-input", { key: 'a123e5a35b4524d8d3f200f31dea6586947e2a3e', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
-                this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
-                e.stopPropagation();
-                this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), index$1.h("smoothly-display", { key: '8d3df2b1b5899cfe814bb70754ca586af4a5de25', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index$1.h("input", { key: '819a42fa4da5e95b804260f99197524fa2aaf90d', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+        return [
+            index$1.h("smoothly-input", { ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+                    this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+                    e.stopPropagation();
+                    this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
+                }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label),
+            index$1.h("smoothly-display", { label: (this.type == "percent" ? this.min * 100 : this.min).toString() }),
+            index$1.h("input", { name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+                    event.stopPropagation();
+                    this.sliding = true;
+                    this.setValue(event.target.valueAsNumber);
+                }, onChange: event => {
+                    event.stopPropagation();
+                    this.sliding = false;
+                    this.observer.publish();
+                    this.smoothlyInput.emit({ [this.name]: this.value });
+                    this.smoothlyUserInput.emit({ name: this.name, value: this.value });
+                }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }),
+            index$1.h("smoothly-display", { label: (this.type == "percent" ? this.max * 100 : this.max).toString() }),
+        ];
+    }
+    renderDual() {
+        const range = Range.is(this.value) ? this.value : { start: this.min, end: this.max };
+        const left = Range.percent(range.start, this.min, this.max);
+        const right = 100 - Range.percent(range.end, this.min, this.max);
+        return [
+            this.renderField("start", range.start),
+            index$1.h("div", { class: "track", part: "track" }, index$1.h("div", { class: "fill", part: "fill", style: { left: `${left}%`, right: `${right}%` } }), this.renderRangeInput("start", range.start), this.renderRangeInput("end", range.end)),
+            this.renderField("end", range.end),
+        ];
+    }
+    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"));
+    }
+    renderRangeInput(part, value) {
+        var _a;
+        return (index$1.h("input", { part: part == "start" ? "range range-start" : "range range-end", type: "range", min: this.min, max: this.max, step: (_a = this.step) !== null && _a !== void 0 ? _a : "any", disabled: this.readonly || this.disabled, onInput: event => {
+                const input = event.target;
+                event.stopPropagation();
+                this.sliding = true;
+                this.setRange(part, input.valueAsNumber);
+                const bound = Range.is(this.value) ? this.value[part] : undefined;
+                bound != undefined && (input.value = String(bound));
+            }, onChange: event => {
                 event.stopPropagation();
-                this.setValue(event.target.valueAsNumber);
+                this.sliding = false;
+                this.observer.publish();
+                this.smoothlyInput.emit({ [this.name]: this.value });
                 this.smoothlyUserInput.emit({ name: this.name, value: this.value });
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index$1.h("smoothly-display", { key: 'f0d1d8872a42854cf442f996de63ffcf584995cf', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index$1.h("slot", { key: 'e3e904b4883dbceda975cd4d74cd526b77c5d471', name: "end" })));
+            }, value: value !== null && value !== void 0 ? value : (part == "start" ? this.min : this.max) }));
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '93a4e9afcd01c8eda143e413360f20e14bcaa920', class: {
+                "output-side-right": this.outputSide === "right",
+                "show-label": 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" })));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -7833,7 +7953,7 @@ const SmoothlyInputRangeDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'fd572625434e3a3a511d2fdc4e39a11734eee8fb' }, index$1.h("h2", { key: '0bf7d54f8cf11e3e870d6c1152fdad2665baf305' }, "Range"), index$1.h("h3", { key: '37f05494fea8a36a05684fb0ad0aede0d27630aa' }, "Phone Number"), index$1.h("smoothly-input-range", { key: '68d94bdeb4db077a49a011c4849e99a1b33db40b', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index$1.h("h3", { key: 'd1b81f1dae6424d685997bd8dfe02a10832a1b2a' }, "Stars out of ten"), index$1.h("smoothly-input-range", { key: 'dca3283520395117ed946a844bb46f7fc52c0212', max: 10, step: 1, label: "Stars" }), index$1.h("h3", { key: '8670432a44d93f9f7dbc315c1f0a51d9aa79100a' }, "Percent"), index$1.h("smoothly-input-range", { key: '78863ada16280bb963e15f1682aa8131667a1bd3', type: "percent", max: 1, step: 0.01, label: "Percent" }), index$1.h("h3", { key: '1b4a9ba5d75f92f1f90dc46a4710a35edd2fe2e9' }, "With icon at start and clear button"), index$1.h("smoothly-input-range", { key: '95c8798a86fc50de7ad65b67f837a71e2743c2ae', step: 1, name: "range2", label: "Select" }, index$1.h("smoothly-icon", { key: 'f44529bf690bcf4ceff1dfa1520d2cf92a456f2f', name: "checkmark-circle", slot: "start" }), index$1.h("smoothly-input-clear", { key: '27ef758b1ba28f93ae5a19cc14fb1bdbf1415c70', size: "icon", slot: "end" }))));
+        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" }))));
     }
 };
@@ -7880,7 +8000,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: 'f69a407428454170f461cee5d8e6b8ece33f682f', title: this.tooltip }, index$1.h("smoothly-button", { key: '21fed26fa5cb6c8dc32af427f492cb5879682d3c', 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: 'ed9f01c4274c9b5b59c6cd27c2cdd62e3a7bb259' }), index$1.h("smoothly-icon", { key: '0ddd9963d333449a5d029b6c29f532ca8d2b3423', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        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" }))));
     }
 };
 SmoothlyInputReset.style = styleCss$D();
@@ -7969,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}.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>div.sc-smoothly-input-select{overflow:hidden;text-overflow:ellipsis}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>.select-display.sc-smoothly-input-select{cursor:pointer}.sc-smoothly-input-select-h:not(:has([slot=label]))>.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>.select-display.sc-smoothly-input-select{padding:.6rem .8rem .6rem 0;align-items:center}.sc-smoothly-input-select-h>.select-display.sc-smoothly-input-select smoothly-icon.sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-select-h:hover>div.icons.sc-smoothly-input-select-s>smoothly-icon{filter:opacity(100%)}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{opacity:.7;height:100%;padding-inline:var(--input-padding-side)}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{cursor:pointer}[invalid].sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:block;padding:0.5rem}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:none}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:20;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));inset-inline:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}.sc-smoothly-input-select-h:not(.open)>.dropdown.sc-smoothly-input-select{border:0}[looks="grid"].sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select,[looks="transparent"].sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select{inset-inline:-1px}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select{display:flex;position:sticky;align-items:center;top:0;gap:1rem;padding:.7rem .7rem .7rem .25rem;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)))}.sc-smoothly-input-select-h:not(.has-filter)>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select{height:0;padding:0;overflow:hidden;pointer-events:none}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select::before{content:"";position:absolute;inset:0;background-color:rgba(var(--smoothly-primary-tint), 0.5);z-index:-1}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select>.search-input.sc-smoothly-input-select{width:100%;background-color:transparent;border:none;outline:none}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select>smoothly-icon[name="search-outline"].sc-smoothly-input-select,.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select>smoothly-icon[name="backspace-outline"].sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item{position:relative}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:0.5rem;border:1px solid rgb(var(--smoothly-input-foreground));border-radius:0.15rem;vertical-align:middle}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item[selected]::before{border-color:rgb(var(--smoothly-item-selected-foreground))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item:hover::before{border:1px solid rgb(var(--smoothly-item-hover-foreground))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item[selected]::after{content:"✔";position:absolute;left:0.65rem;color:rgb(var(--smoothly-item-selected-foreground))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item:hover::after{color:rgb(var(--smoothly-item-hover-foreground))}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select{min-width:fit-content}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.menu[hidden].sc-smoothly-input-select{display:none}`;
+const 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 SmoothlyInputSelect = class {
     constructor(hostRef) {
@@ -7986,6 +8106,7 @@ const SmoothlyInputSelect = class {
         this.initialValueHandled = false;
         this.observer = Editable.Observer.create(this);
         this.items = [];
+        this.displaySeparator = '<span style="display:inline-block;width:0.8rem"></span>';
         this.invalid = false;
         this.name = "selected";
         this.showLabel = true;
@@ -8157,7 +8278,15 @@ const SmoothlyInputSelect = class {
         return selected.length === initialValue.length && initialValue.every(value => selected.includes(value));
     }
     displaySelected() {
-        this.display = this.selected.map(option => option.innerHTML);
+        this.display = this.selected.map(option => {
+            const clone = option.cloneNode(true);
+            clone.querySelectorAll("smoothly-icon").forEach(icon => {
+                const style = icon.style;
+                style.display = "inline-flex";
+                style.verticalAlign = "middle";
+            });
+            return clone.innerHTML;
+        });
     }
     onKeyDown(event) {
         event.stopPropagation();
@@ -8252,11 +8381,11 @@ const SmoothlyInputSelect = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '65a7d8d8f4e241d01e6e5862cb399cbc575f561b', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, index$1.h("div", { key: 'ac6e093f04b7ab37032aad27f1c82a02d255def9', class: "select-display" }, this.display.length > 0 ? index$1.h("div", { innerHTML: this.display.join(", ") }) : this.placeholder), index$1.h("div", { key: 'b80e14fcd129d7abf5836055f4a2e28a4ed16d0f', class: "icons", ref: element => (this.iconsElement = element) }, index$1.h("smoothly-icon", { key: '32de16a9eab82526f2f38dfaedc737cdd12f6d92', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), index$1.h("slot", { key: 'af50968ee2c894126b83d7813c82a0d0402cf7a9', name: "end" }), this.looks == "border" && !this.readonly && (index$1.h("smoothly-icon", { key: '0c0f8945582eae4e322f0e17a997995d4f4bd02c', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index$1.h("slot", { key: '1d4c5b7cc174c6ef6e10f4556b1d2387b4150619', name: "label" }), index$1.h("div", { key: '45417fef3b11e8e1da9347f60ef03e6fc0a5a421', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, index$1.h("div", { key: 'b6556702655db2d495fc5a4e6ecca75886739c77', class: "search" }, index$1.h("smoothly-icon", { key: 'a638f9dffd30ed31bad8dadfe521402ce4133623', name: "search-outline", size: "small" }), index$1.h("input", { key: 'ee2c1fc1595145211c41d249ec734aabc97d9a00', 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: '10d79827edb6792f0ff65a8f91102a8bdc33ea0f', name: "backspace-outline", size: "small", onClick: () => {
+        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: () => {
                 var _a;
                 this.resetFilter();
                 (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus();
-            } }), this.mutable && index$1.h("smoothly-icon", { key: 'c9845fdf253eb126f440178a7667a0c1839086d1', name: "add", size: "small", onClick: () => this.addItem() })), index$1.h("div", { key: 'c2decc722e32db1d3fcdcf734b6cc57867618a7a', class: "menu", hidden: !this.open }, index$1.h("slot", { key: '8e6e54b0dd4a7f1951fdfc312dd1573d43f0bdec' }), this.addedItems))));
+            } }), 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))));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -8326,7 +8455,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index$1.h(index$1.Host, { key: '70b53b4424d3bb5c5daf2d8cedbc0ef488a35e38', 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: '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" })))));
     }
 };
 SmoothlyInputSubmit.style = styleCss$B();
@@ -8372,7 +8501,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'f86c77b9ed66eeca4f9521883517fea9a8ce3292', tabIndex: -1 }, index$1.h("slot", { key: '9a72363e41c726d78c213179afcebafcafa48abc' })));
+        return (index$1.h(index$1.Host, { key: 'b0d6998fcd5645acb5e00e9f733b2a614d375858', tabIndex: -1 }, index$1.h("slot", { key: '44c9550fe4711d850eeee02ace037e97a39b9ab7' })));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -8391,9 +8520,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: 'ce3bb78edc46a6edd6ceeb2d8d799835e74e889e', title: this.description, style: {
+        return (index$1.h(index$1.Host, { key: 'a50f72481a39b6a4b46665263f1fa36b2d88e797', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index$1.h("slot", { key: 'e2d3e99a943fe1a2e862e0102d87c327c9c3f1b8' })));
+            } }, index$1.h("slot", { key: '9aa109ec1f4be0dc0907a31849ef358b6d2c132f' })));
     }
 };
 SmoothlyLabel.style = styleCss$z();
@@ -8410,7 +8539,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ba06250ac8a325c3b51801b09999efdbd0c552f6' }, index$1.h("slot", { key: '89e3aa0b677038bac4a999c3aba63e8f86f3e9ea', name: "before" }), index$1.h("smoothly-load-more", { key: '4d817981ffa9f3231972a3eb153339ca805c05e3', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index$1.h(this.content, null) : this.content), index$1.h("slot", { key: '55ab66fb5706d1bb40350a5b545b97ddb5787eab' })));
+        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' })));
     }
 };
 SmoothlyLazy.style = styleCss$y();
@@ -8454,7 +8583,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return index$1.h(index$1.Host, { key: 'c53981c4ea71c41217b4a4262c971dab45a84fe9' });
+        return index$1.h(index$1.Host, { key: 'e0443cf851d13bd9825e8d36d5995be9cd80b241' });
     }
     get element() { return index$1.getElement(this); }
 };
@@ -8479,9 +8608,9 @@ const SmoothlyModal = class {
         this.open = true;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c8517f814256addf886be09be0058a8c15b73c14', role: "alertdialog", onClick: (e) => {
+        return (index$1.h(index$1.Host, { key: '3115f076e4b06f293e88000e64a86d1095784bbb', 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: '665feff20545ab424191b52e7cba17414d6d79c9', class: "modal" }, index$1.h("div", { key: '1a459e840e395cc03825883b8305c070929dfc34', class: "header" }, index$1.h("slot", { key: 'b89490cc7029d45456126502db3985fcfdd99fd9', name: "header" }), this.closable && index$1.h("smoothly-icon", { key: '83559c6915c83f2f2fdc0ac3e173e55845b7b4f3', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), index$1.h("slot", { key: '4f069fcb1506d9fbdcaba2c657c7af533dec9bae' }), index$1.h("div", { key: 'df07bf9b97164aa24c8a7c41440494372f2ae9e0', class: "actions" }, index$1.h("slot", { key: '78a5774d274306aef00dc5a6cb91bf0027b84543', name: "actions" })))));
+            } }, 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" })))));
     }
     static get watchers() { return {
         "open": [{
@@ -8546,7 +8675,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '73f1ac93fe920e40d0045cf9ae2c756ffe451d66', color: this.properties[0], fill: "solid" }, this.closable && (index$1.h("smoothly-trigger", { key: 'c044dec06d857487dbdb8a17d20c6d07c6b7e370', fill: "clear", name: "close" }, index$1.h("smoothly-icon", { key: 'd33fb56efc3ff17f1ba41c16ffd4ed214b98bc57', name: "close-circle-outline" }))), index$1.h("span", { key: 'd2554c0a86856c3f8f760d8e71f9761b619ddf41', class: this.icon ? "icon" : "clean" }, this.icon && index$1.h("smoothly-icon", { key: 'f4466028e87356a50f0cdb08ba23dbd1d65d5689', name: this.properties[1] }), index$1.h("p", { key: '6de62c145781c1127b7ea762a371f7a142bc324f' }, this.notice.message))));
+        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))));
     }
     static get watchers() { return {
         "notice": [{
@@ -8571,7 +8700,7 @@ const Notifier = class {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '4e003f931f925f8b9b7bf025a30ed5637d1883f6' }, index$1.h("slot", { key: '24474dce23d51652d402faf096be33cbd2356a53' }), index$1.h("div", { key: '23d8511a4e84d13e2e19a623ebadcc7957881221', 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: '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 }))))));
     }
 };
 Notifier.style = styleCss$v();
@@ -8585,7 +8714,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: 'e3d338d08a8155c994f121e190583b1492631049' }, index$1.h("fieldset", { key: '3d775b4ed5229982b2dbe2175a80223ccda92106' }, index$1.h("h2", { key: '0a351b1923d27a7bf576c2fbb43cd5368ce6442d' }, "Immediate"), index$1.h("p", { key: 'bff747d88b7d561ec2a60a65b76ee0c1bc49ad39' }, "Fires right away and closes after the default 15 seconds."), index$1.h("smoothly-button", { key: '1b8830e040cd6530425d3d66b5c78a7ed4e80357', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.succeeded("Payment processed successfully.")) }, "Success"), index$1.h("smoothly-button", { key: '3ad3baf9b33d67c27fdd0cff8585f7b6eeed8807', color: "danger", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.failed("Payment could not be processed.")) }, "Failed"), index$1.h("smoothly-button", { key: '2c90a3b3742edac4c4afcee809048e65375ec705', color: "warning", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.warn("Balance is running low.")) }, "Warning")), index$1.h("fieldset", { key: 'e9740e78990b6beefb77c16663e96d627b619b7b' }, index$1.h("h2", { key: '9668a13f88db3b43b20e84d64339e46c0b876f9a' }, "Task"), index$1.h("p", { key: '9625eaf81bd2a90ca74094f5a6ba4a23e8605853' }, "Shows an executing spinner while the task runs, then transitions to success or failure."), index$1.h("smoothly-button", { key: 'e99ab12076adc90e2097c7586e4f6d2377ba592c', 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: 'c37c6803dcc33ebb1789e981ec9bbd4453df2944', 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: 'e37ff795ca11e50e80bac180c0b9fae40e8ec587', 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: 'af63d14a88d1cd79fb022d5efbd9f5a42adf191b' }, index$1.h("h2", { key: '2fe03dc548758db94a03948f0595a296e145a0e5' }, "Custom lifetime"), index$1.h("p", { key: '6aead78b7f995d63d29f75d8a164aaf2188111bd' }, "Controls how long the notice stays visible after resolving."), index$1.h("smoothly-button", { key: 'f480806e042ba24075c030c7a767a1fb4a65de22', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.Notice.succeeded("Gone in 3 seconds.", 3000)) }, "Success (3s)"), index$1.h("smoothly-button", { key: 'bd377ef80546a629a08919899fff0e4c57ad24b3', 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: '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)"))));
     }
 };
@@ -8598,9 +8727,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: 'ecb6e441b9ff2e197c2b600e2c5b2d51cd95ee89', style: {
+        return (index$1.h(index$1.Host, { key: '48a168ea0d5598ec2266057893db21f7a22a3b2f', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index$1.h("svg", { key: '5e6288163ac9a0fe615a91e8431fb78a966630ea', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index$1.h("circle", { key: '7ad5566138f4d87e15be7bc0d4777e80cc6c1f83', 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: '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" }))));
     }
 };
 SmoothlySpinner.style = styleCss$u();
@@ -8620,7 +8749,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (index$1.h("details", { key: 'e033a7d2dadc508342c0e35b8b50502452c285f5', onToggle: e => this.toggleHandler(e), open: this.open }, index$1.h("summary", { key: '2081c1c5e3c154fa26e4333f519f56232895ee74' }, index$1.h("smoothly-icon", { key: 'e8c587d8d364e72e1dd1e2958db8f784343a8508', name: "caret-forward", fill: "solid", size: "tiny" }), index$1.h("slot", { key: '158befa55709d084049bec16c29d2bef2a2884e0', name: "summary" })), index$1.h("slot", { key: 'fff93c13da720ef9e0905ac698bba0baf9dd9c20', name: "content" })));
+        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" })));
     }
 };
 SmoothlySummary.style = styleCss$t();
@@ -8665,7 +8794,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ae035e66fbacdf7ce232ec1be2d73b2573bea978' }, index$1.h("div", { key: '8b16f293f91934e88ac5d41a837f83506ea50737', onClick: () => !this.disabled && (this.open = true) }, index$1.h("label", { key: '3d2d6e324ad8bcfe438e5ed9000271c04840f3ea', "data-smoothly-tooltip": this.tooltip }, this.label)), index$1.h("div", { key: '3b041ece9f6bd5931bef85b1b3d8f50ea1200e1e', hidden: !this.open }, index$1.h("slot", { key: '157b5ecc4ace4e1318629b12a34d9e7b52d20af4' }))));
+        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' }))));
     }
     get element() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -8690,7 +8819,7 @@ const SmoothlyTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'f875112f3c3c917be64b0874106e35a318b3ded5', style: { "--columns": this.columns.toString() } }, index$1.h("slot", { key: 'f84673ca127c951381152b7e5b70b3d0d16f584a' })));
+        return (index$1.h(index$1.Host, { key: '9de6a10f4520cfe2468366b3acbfaf1dd57ab71e', style: { "--columns": this.columns.toString() } }, index$1.h("slot", { key: 'af3e663420afe9809198147276b8ab12f400dab6' })));
     }
 };
 SmoothlyTable.style = styleCss$r();
@@ -8702,7 +8831,7 @@ const SmoothlyTableBody = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '1f19a1c0da7b296ea394daa0bc91ac499424ad0e' }, index$1.h("slot", { key: 'acd72cd22a3d49c02de514f5f9818d16ff913897' })));
+        return (index$1.h(index$1.Host, { key: 'b3bb5a5626087fbae34f99cdab7ca7ff9f783b5f' }, index$1.h("slot", { key: 'b8020b8b324fccfd9749664f8ce991b2212b8a5e' })));
     }
 };
 SmoothlyTableBody.style = styleCss$q();
@@ -8716,7 +8845,7 @@ const SmoothlyTableCell = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '71cd9be174ec7961ae0b338fd5775a0f8b41264c', 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: '9cbca72183db11968f3a6630bd1a226830754bd7' })));
+        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' })));
     }
 };
 SmoothlyTableCell.style = styleCss$p();
@@ -8728,7 +8857,7 @@ const SmoothlyTableDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ce870c3cb75e3021ae6df094be0beb4e15a4fa96' }, index$1.h("smoothly-table-demo-filler-row", { key: '8454629cbaca209d691c20e2cadb2084fb813d0c' }), index$1.h("smoothly-table-demo-group", { key: '4a39a52dd85a7820ff9144684ced5a9c39e68b9a' }), index$1.h("smoothly-table-demo-colspan", { key: '69466e2c64c235167f3f48ce792a883ccb0c4304' }), index$1.h("smoothly-table-demo-simple", { key: '7185d7dfafc506488c5d8de8eeb2d1f0771712af' }), index$1.h("smoothly-table-demo-nested-no-cell", { key: '30e67b1983df629081c1c4e7cbf4787817ce2bbb' })));
+        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' })));
     }
 };
 SmoothlyTableDemo.style = styleCss$o();
@@ -8740,7 +8869,7 @@ const SmoothlyTableDemoColspan = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '0c48cda90a42886342351b0a4f4b0ddcdbba84e1' }, index$1.h("smoothly-table", { key: '6ddf793f667d275b6e3969331d06c1d2f5e4c491', columns: 3 }, index$1.h("smoothly-table-head", { key: '425732dcb06bbc7dd1c5b46689fcb9a5d1f8aae0' }, index$1.h("smoothly-table-row", { key: '698dbdfbabfb904df19d92aaef652fc57b4371ad' }, index$1.h("smoothly-table-cell", { key: '162b14024e5d5c1993c2c5120f014bd65dc452b8' }, "Date"), index$1.h("smoothly-table-cell", { key: '7c8dfddd08a7a241ba4921d48c231e154e8ce2f7' }, "Skip"), index$1.h("smoothly-table-cell", { key: '90c02f35f7233314a0478fdef7fe7e8d59ee6307' }, "Total"))), index$1.h("smoothly-table-body", { key: 'ee7c05917d77a73653f262da586d358a6c2d8c5f' }, index$1.h("smoothly-table-row", { key: 'fb8ea7dbe4c82f92258d4c531f88bf9192a121a7' }, index$1.h("smoothly-table-cell", { key: '8c4f6a68055a38eafbbedde78acdec47610c3a45', span: 2 }, index$1.h("smoothly-display", { key: '914cbd4c7716cb44df1fb2c9f30e864733398627', type: "date", value: "2024-01-01" })), index$1.h("smoothly-table-cell", { key: '28379684e4c04c36261cece4276bd0599bca8201' }, index$1.h("smoothly-display", { key: '454f88e0c8f6236864d5507677e87c4129940fd6', type: "price", value: 120, currency: "EUR" }))), index$1.h("smoothly-table-row", { key: '484339508d40ad812eb7edd24efa06ed18739b39' }, index$1.h("smoothly-table-expandable-cell", { key: '885b10db54f9fb0051f0ac8d878dbd4a5413d698', span: 2 }, index$1.h("smoothly-display", { key: '27a9840c4c283269809fef636b95e7dc46d18586', type: "date", value: "2024-01-02" }), index$1.h("smoothly-lazy", { key: '031f1ee60536b3b633c7638aed6e0d1d6a013ba8', 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: 'c1e0fc733a48eb0e5bf50d0ff70494e0f293b34e' }, index$1.h("smoothly-display", { key: 'fe0202769ab5932ed8257867802e297707efdb78', type: "price", value: 220, currency: "EUR" }), index$1.h("smoothly-lazy", { key: 'e170de6a7c33e6ce938e2a5240a33397a9d15d21', 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: 'e06c96d7d22adc11c20140b67b877b69c0b95737' }, index$1.h("smoothly-table-cell", { key: '6a6a0d756b16ccc002934e7aea89165959748518' }, index$1.h("smoothly-display", { key: '9cabf2591bbfe35af7e58f649a185b872843b365', type: "date", value: "2024-01-02" })), index$1.h("smoothly-table-cell", { key: 'bc20c5059843db6e9a61b5f600ddcbb959c544cd' }, "Not Skipped"), index$1.h("smoothly-table-cell", { key: '306e585f47e9eb496ef5a1ddbecfcc9c823adde2' }, index$1.h("smoothly-display", { key: 'b1623473097b41ebc6bf1a03eeafd4a650371b98', type: "price", value: 320, currency: "EUR" })))))));
+        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" })))))));
     }
 };
 SmoothlyTableDemoColspan.style = styleCss$n();
@@ -8758,7 +8887,7 @@ const SmoothlyTableDemoFillerRow = class {
         }, 3000);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '557f61c2ccd69af2aefa39306df1aad555ff0744' }, index$1.h("smoothly-display", { key: '7ab6ad735601adb00416b7e36c0cd8815ad61ef8', type: "text", value: "Filler row" }), index$1.h("smoothly-table", { key: '5a4a96a7e7eefb555c293a59fa4549566c4e3d37', color: "primary", columns: 4 }, index$1.h("smoothly-table-head", { key: '6552d25cd1b2655207fd58a8b193125c5489e44a' }, index$1.h("smoothly-table-row", { key: '713cc7a78a8375c1559e6dd612e91012d95d94e9' }, index$1.h("smoothly-table-cell", { key: '6916664b0ccc30759af2b01eecbb0720a293e5e1' }, "Breed"), index$1.h("smoothly-table-cell", { key: '23ebe72dbbfbb68993ce024cd574a80c78fedf97' }, "Country"), index$1.h("smoothly-table-cell", { key: '56dc58c22a7fbc62a5a33d88e11e3198d76cce8b' }, "Coat"), index$1.h("smoothly-table-cell", { key: '1b17e1b9e961951228b9134a979e154650a5692f' }, "Origin"))), index$1.h("smoothly-table-body", { key: 'e9cabfd3b379487e2f47c4e292f61f219dd1a170' }, 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: '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)))))))));
     }
 };
 SmoothlyTableDemoFillerRow.style = styleCss$m();
@@ -8770,7 +8899,7 @@ const SmoothlyTableDemoGroup = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c2349ac60d42721e7efdd0145bda64bf634665f9' }, index$1.h("smoothly-display", { key: '3fa0ccdbb80609b7d1213e4607a8417d654ba61e', type: "text", value: "Group" }), index$1.h("smoothly-table", { key: '031831fab9aad960876d3652e0f061bc11c6b641', color: "primary", columns: 2 }, index$1.h("smoothly-table-head", { key: '8962746018f32803f9194677e85b1cac061cbc8a' }, index$1.h("smoothly-table-row", { key: 'ce3b222b7bf572395130029a242349f1f23e3efa' }, index$1.h("smoothly-table-cell", { key: '9b487a8dd643eeb32b8636a393a21825af9e15f0' }, "Date"), index$1.h("smoothly-table-cell", { key: '9445abb441db3d0474aa0925da39f9f8cd841e96' }, "Total"))), index$1.h("smoothly-table-body", { key: 'e05046be6bcd868fedd3a998e33243d350a24fac' }, index$1.h("smoothly-table-row-group", { key: '9f9f39b99ee48b80079e4f0c7b8b5933841bc8db', align: true }, index$1.h("smoothly-display", { key: 'f5c8b076b84674dca4082025540f37fed2c1fdfb', slot: "start", type: "date", value: "2024-01-01" }), index$1.h("smoothly-display", { key: '8684e46b76affeace45688d66ce925053e8487cb', slot: "end", type: "price", currency: "EUR", value: 510 }), index$1.h("smoothly-table-expandable-row", { key: 'eafc06e33f099744334b1ab4633c4065e5c7bafb' }, index$1.h("smoothly-table-cell", { key: '163413e33f1fc87f3ee8d913b7f67aadaef23527' }, index$1.h("smoothly-display", { key: '7906a8a2a7cdbc094ea377dbbf46f46ea1aa2773', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: 'b7c3d34d0872a3b925cd59648818ac4f970f7665' }, index$1.h("smoothly-display", { key: '1755af70c7682d88f2a8053249f618e21ccd8dcd', type: "price", currency: "EUR", value: 250 })), index$1.h("smoothly-lazy", { key: '972b58445087486e16aa9ef60ceca24b0cdb878a', 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: 'f4167f1f151a4b6a11e55c3b44b44a174e7e460a' }, index$1.h("smoothly-table-cell", { key: 'd42b86d4bbbfa2687ccb9ef5426199cfcb970454' }, index$1.h("smoothly-display", { key: '691ce08e0f570a2fe95f6274c5e5a2c594ca0e81', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: 'ca5ba776a4c026015fe14ffd6c0f61682fb50a0e' }, index$1.h("smoothly-display", { key: '314ca518de45211edf1b423fe2fd5e6e852e0abf', type: "price", currency: "EUR", value: 260 })), index$1.h("smoothly-lazy", { key: '3ab4074da42478f0275ad173efbbcb4ae7892132', 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: '15c7c4c80763efe785d46350dbcb9458787fa7de' }, index$1.h("smoothly-table-cell", { key: 'dc40672665de18746244848faf04db3ad9f5aeef' }, index$1.h("smoothly-display", { key: '49eb95b7c7cddc7b31919e63052773b561ec73e4', type: "date", value: "2024-01-02" })), index$1.h("smoothly-table-cell", { key: 'a06c95ad5472971a1e65334780f236ec9661730d' }, index$1.h("smoothly-display", { key: 'c7e5e70b5711a0921bc9b31a783a6c74d5052115', type: "price", currency: "EUR", value: 130 }))), index$1.h("smoothly-table-row-group", { key: '4d369fc1b9f725c6c87119f74ceacc791e7ecedd' }, index$1.h("smoothly-display", { key: '7476433911fe24ae672a06fbcd1903b30d9d4dcd', slot: "start", type: "date", value: "2024-01-03" }), index$1.h("smoothly-display", { key: '66757326ae2f2533781187b3cc539ecc630e18da', slot: "end", type: "price", currency: "EUR", value: 720 }), index$1.h("smoothly-table-expandable-row", { key: '074ed70eee56b560206f6af3c3653f866eb19b1f' }, index$1.h("smoothly-table-cell", { key: 'd42fa537b638422f059064fc81f3eca4b508adb1' }, index$1.h("smoothly-display", { key: '53555e64e4a188b56312547d00e051400db9109b', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '9a87625f1792a602a8f261b09639a2f3437e4a00' }, index$1.h("smoothly-display", { key: '48f68e9b82035798b802914d1e3676baeb45b1c6', type: "price", currency: "EUR", value: 320 })), index$1.h("smoothly-lazy", { key: 'fda86f80536a88dfc1b37122353d7728d59c3145', 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: '79f5e690018349b7bbf387f42459fd0cf7bf41c9' }, index$1.h("smoothly-table-cell", { key: 'b90737c98969bac197c075f618074d0de7e49ba4' }, index$1.h("smoothly-display", { key: 'e8f3430fe190bd51b2f16613545502e080e881ec', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: 'b6d3f7d14324859ba247b4936b21a8730b3d48f5' }, index$1.h("smoothly-display", { key: '2a31cd875eb7275138ff31018fa00445d98636f9', type: "price", currency: "EUR", value: 400 })), index$1.h("smoothly-lazy", { key: '4fead269f59feb74e3182c5f45ceb27f75b06815', 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: 'f934924e769318b0cbf620e8b36dd5beb5b9289b' }, index$1.h("smoothly-display", { key: '19cd9b2be6022ee7ca06d65ea8ed7233cfc09282', slot: "start", type: "date", value: "2024-01-04" }), index$1.h("smoothly-table-expandable-row", { key: 'da7f61e549d633fcfeb11d0b6340db1ed25b2203' }, index$1.h("smoothly-table-cell", { key: 'b317a6ff13c60a5e788285295131c314dfdc5451' }, index$1.h("smoothly-display", { key: 'fdc2c7b05beb0d0a85cb132ecda0250dec82437b', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '00332f1d86bee165bfcb258a7e0a977630391c3f' }, index$1.h("smoothly-display", { key: '482fb06ef577eebb00020dc96c1f38be4a9c06f4', type: "price", currency: "EUR", value: 320 })), index$1.h("smoothly-lazy", { key: 'e0be1bdf78a509739ba6200b84eb09b1fdceafa5', 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: '33394ca7530c500982772ad00fa167a28945dac7' }, index$1.h("smoothly-table-cell", { key: '9d0342b72e2e1c5c4fe165f5dd82e2bd2aea486e' }, index$1.h("smoothly-display", { key: '7067dcfee78ed06a503fda1daba6d2290e542749', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '0dc3ff01ee8aa112baadd9d9b86950be1e206863' }, index$1.h("smoothly-display", { key: 'ff66908b6e8fae1880aeb7c2e3afb2fa0459055b', type: "price", currency: "EUR", value: 400 })), index$1.h("smoothly-lazy", { key: 'd4c0cbfd9ea8e4325b8ae831e4c39e4c454a78df', 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: '094dcd75d983e523eec8cb86ef99dcf162e38ea9' }, index$1.h("smoothly-display", { key: '69f640137011b2a87f19869a37d4838472a0e85c', slot: "end", type: "price", currency: "EUR", value: 720 }), index$1.h("smoothly-table-expandable-row", { key: '5813f668878b19bda0ec525192f8bd114b8eea10' }, index$1.h("smoothly-table-cell", { key: 'a17328b2f0e29e25462129c21a4f7285a570d55b' }, index$1.h("smoothly-display", { key: 'a0d200bab62d2d1cd9c79d671dac3a01aa49d596', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: 'e1d33ee6f5562a526343a7b8a8a4eedd74536faa' }, index$1.h("smoothly-display", { key: 'fbee48d8fa8d7360f35e81f52953a1e50d059f66', type: "price", currency: "EUR", value: 320 })), index$1.h("smoothly-lazy", { key: '4b35e8e6b67c474be6f1921df8c035ca75e6d65e', 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: '73b7b56a1374a050d4c060481691a765993d7aa0' }, index$1.h("smoothly-table-cell", { key: 'ef757fee21011b6217509b8df104bbd551a8f083' }, index$1.h("smoothly-display", { key: 'ce28e49e2b34609b9b118c1d959b40e92da999ea', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index$1.h("smoothly-table-cell", { key: '9ab4fffdd44c403204a950bf6988c85cec2b566d' }, index$1.h("smoothly-display", { key: 'f031bf8fedf553a4a35941682c52c20a5d35945c', type: "price", currency: "EUR", value: 400 })), index$1.h("smoothly-lazy", { key: '6be1eed0b8757a4ef23b2f89d207de78a691fb2a', 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: '217e2c3da76ee12debcfdd72e8dc1a5ce366e677' }, index$1.h("smoothly-table-row-group", { key: '6b6a75487b0649e29aaa80f09ae1525fb89d0a4a' }, index$1.h("smoothly-display", { key: '595d74d25315145d10c0f90cb425080f26327171', slot: "start", type: "date", value: "2024-01-06" }), index$1.h("smoothly-display", { key: '0960bdd999050e2ef1f54affd7d9c7e37b7a105f', slot: "end", type: "price", currency: "EUR", value: 720 }), index$1.h("fake-row-wrapper", { key: '99957e7a704294b44a16785076c8039fabafe467' }, index$1.h("smoothly-table-row", { key: '094abc7dde56b47077b83d4aeee91d935673dbca' }, index$1.h("fake-cell-wrapper", { key: 'c3046f3eb7072139a86ec4c777a83e3b31342a5f' }, index$1.h("smoothly-table-cell", { key: '65e3f33d4e058906c1e705c138f64eb875372f8b' }, index$1.h("smoothly-display", { key: 'dae18d82f496305e108996e52fb4f08df46c0b4d', type: "date", value: "2024-01-02" }))), index$1.h("fake-expandable-cell-wrapper", { key: '1f797ef11066becab0585c2d707795752cc1919a' }, index$1.h("smoothly-table-expandable-cell", { key: '7162dfb6b14b854eb20ade26aa14c41ada84ee88' }, index$1.h("smoothly-display", { key: 'a0caf476fcef38d8f0f0aac87f1a8939edf8251b', type: "price", currency: "EUR", value: 130 }), index$1.h("smoothly-lazy", { key: '96639f825747c82e48a6df2f5ffcd0aa541af947', 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: '96e1217758b98bb236eaf1e9fbf0cdbc7c97961b' }, index$1.h("smoothly-table-expandable-row", { key: 'b463b6ace09039c949856a47cae1646722de7515' }, index$1.h("fake-cell-wrapper", { key: '908e37e012b4e7264faafa8778161b0d23e65bbf', class: "span-2" }, index$1.h("smoothly-table-cell", { key: 'd08c1503351a035e6f8ef9052cc80c8bc9d002fa', span: 2 }, index$1.h("smoothly-display", { key: '391e427d5ddf9f1d2e82678ff66d9ffcc41c8a77', type: "date", value: "2024-01-07" }))), index$1.h("smoothly-lazy", { key: '0a8773a5d33603c6a42d84487c730eaf950a2540', 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: 'f22475f2b9aca2131c4ff305aa4ba2e7c6e600ba' }, index$1.h("smoothly-display", { key: '956d8be67c99b3673d815101a05e91c9c6131439', slot: "start", type: "date", value: "2024-01-08" }), index$1.h("smoothly-display", { key: '0daba64dde819e327b688619e584b43bb042ef0d', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        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 }))))));
     }
 };
 SmoothlyTableDemoGroup.style = styleCss$l();
@@ -9716,7 +9845,7 @@ const SmoothlyTableDemoNestedNoCell = class {
         this.loadedRows = [];
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '04d9aea1741a42783f48d2f496507f026e7ec592' }, index$1.h("smoothly-display", { key: 'b1ca21dc02166b03949f1e5733d199dfc98abe57', type: "text", value: "Nested" }), index$1.h("smoothly-table", { key: '8822eb9d9038e1475460993e8408a34e2c278fc5', color: "primary", columns: 8 }, index$1.h("smoothly-table-head", { key: 'fe36a6cf11d90f4a6d61b8f52b6c32725f9446bf' }, index$1.h("smoothly-table-row", { key: '480555a61bc7ab26c44b6ed481c5002e76f3d8fb' }, index$1.h("div", { key: '4a916151819146c8dfb3bde56af42cd9177404f3', class: "smoothly-table-cell" }, "Id"), index$1.h("div", { key: '4c5f4888480ac4afdc2a7ea0ea1223f019ac342f', class: "smoothly-table-cell" }, "Registered"), index$1.h("div", { key: 'fcbbba0e6600648b61a64f1c79021d8a3b6ff7a7', class: "smoothly-table-cell" }, "Name"), index$1.h("div", { key: 'b1ae7b7361472a8bc480eda7f578c2ef2ee31d01', class: "smoothly-table-cell" }, "Age"), index$1.h("div", { key: '5abc8febf53d4a1c88bf4d48c9f775854f79c9c0', class: "smoothly-table-cell" }, "Balance"), index$1.h("div", { key: '556a2cc1c4edadce3207d5d5f0669945aac0e549', class: "smoothly-table-cell" }, "EyeColor"), index$1.h("div", { key: 'c73289aaf060e3c633105d35ce31864109e6b0fb', class: "smoothly-table-cell" }, "Gender"), index$1.h("div", { key: '768db739d85a8a20408ea8d866af0006051d35f1', class: "smoothly-table-cell" }, "Company"))), index$1.h("smoothly-table-body", { key: 'cdb13c9d2feb7505eb856a172848a9e0a7c8eec5' }, data.map((entry, index) => (index$1.h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
+        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 => {
                 if (event.detail) {
                     this.loadingIndex = index;
                     setTimeout(() => {
@@ -9724,7 +9853,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: 'd220bcbd57cd66ba23f5f0a95f91ea76815abfb5' }, index$1.h("smoothly-table-row", { key: '667777310b2345e3d3a168ce2e740bf7bb3065c2' }, index$1.h("div", { key: 'b3e7fec6bcea4b27ae2ddf5e8b23438affc74185', class: "smoothly-table-cell" }, "Footer Cell"), index$1.h("div", { key: 'ee6456fc221e5cc95ebf4ca4615f24df1a4da926', 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: '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"))))));
     }
 };
 SmoothlyTableDemoNestedNoCell.style = styleCss$k();
@@ -9737,7 +9866,7 @@ const SmoothlyTableDemoNestedNoCellInner = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '979ac258e43562eb1d3ec213533ed762b0637958' }, index$1.h("smoothly-table", { key: '359ecbb755ebb1119ecc4d60901a52508094fa7f', columns: 4 }, index$1.h("smoothly-table-head", { key: '688c8cecdac166cd9ce2865ecbf3002811a2ef5f' }, index$1.h("smoothly-table-row", { key: '7f8b10a9205258b5cad319c0cb6a2ae6f0609da9' }, index$1.h("div", { key: '8310e2fdaefb1c5d6a686d238bf2c118e9eacbac', class: "smoothly-table-cell" }, "Id"), index$1.h("div", { key: 'daaeb0da6571b0dde9d6e80ac35142aa666a1ba5', class: "smoothly-table-cell" }, "Name"), index$1.h("div", { key: 'abca17f20bd0491dcf05dc81ba11d801b4933a6c', class: "smoothly-table-cell" }, "Age"), index$1.h("div", { key: '346be426720be1a8c9578a50e6dacc2dddc5493a', class: "smoothly-table-cell" }, "Balance"))), index$1.h("smoothly-table-body", { key: 'd2d182cae581d3f5bc8abae108a6626b20b9451a' }, (_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: '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))))))));
     }
 };
 SmoothlyTableDemoNestedNoCellInner.style = styleCss$j();
@@ -9749,7 +9878,7 @@ const SmoothlyTableDemoSimple = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '80449d99f9dd0f1b3ccc6fe1ca76f81c383b0b73' }, index$1.h("smoothly-display", { key: 'a8a925063304469fd491d875aac3ca41262c2654', type: "text", value: "Simple" }), index$1.h("smoothly-table", { key: 'c73c0af22285cf5769b7aae1bc619e681425059c', color: "primary", columns: 2 }, index$1.h("smoothly-table-head", { key: '55a6fa56086f9ecf4c5ad6e937c672164e4ec329' }, index$1.h("smoothly-table-row", { key: 'c130d923b09c92b269da5f16ea18e3ee895cab52' }, index$1.h("smoothly-table-cell", { key: 'b937e3114409fa9e58e16333d00367839bc74d15' }, "Breed"), index$1.h("smoothly-table-cell", { key: '9aba71f6c1a20a762e89500ca5efa3a82d7cbd89' }, "Coat"))), index$1.h("smoothly-table-body", { key: 'b79c14240246a1d441fc2bfb2cf0857834121312' }, 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: 'b3897b89193457cc34ef8a636ee70eb440b09923' }, index$1.h("smoothly-table-cell", { key: 'd3ff9b985f616112a698ad7c3d1154ae7ca3b17a' }, "Cell5"), index$1.h("smoothly-table-expandable-cell", { key: 'ed7165825d15f3025231a21aead04f6bcd048872' }, "Expandable Cell", index$1.h("div", { key: 'b5ffac563fce0a0a5027706cf4f83ec8825ad037', slot: "detail" }, "Content of the expandable cell"))), index$1.h("smoothly-table-row", { key: '3a6eb6e10fb590b9036d329307a22393958f6aaa' }, index$1.h("smoothly-table-expandable-cell", { key: '43570c5844b23b46572678bd5229d325c26b677f' }, "Expandable Cell 1", index$1.h("div", { key: '2c643f6a728b5967d7e42c47d657ce07ef295c78', slot: "detail" }, "Content of the expandable cell 1")), index$1.h("smoothly-table-expandable-cell", { key: '1d9f1e32259d590d5f0a7c043c56424f30019e6e' }, "Expandable Cell 2", index$1.h("div", { key: 'ea45ab8f26e3a2b7bd4d012b3dec1899836620b6', slot: "detail" }, "Content of the expandable cell 2")))), index$1.h("smoothly-table-foot", { key: '99a7c70b238c32203143077e8e1a3c58ee82adf7' }, index$1.h("smoothly-table-row", { key: '2abe5c4e633f55dd722f21263ab6647018b7319b' }, index$1.h("smoothly-table-cell", { key: '805be40c4d87dd23a8ab71017453b6340adf200e' }, "Footer Cell"), index$1.h("smoothly-table-cell", { key: '1137748f294d4199d08de20a8316588df635bfb2' }, "Footer Cell"))))));
+        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"))))));
     }
 };
 const cats = [
@@ -9857,7 +9986,7 @@ const SmoothlyTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '624fcbc59506d5a4c9c3a63a8c72e5dacc381c88', 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: '53a96ed671c80e1ecac6e34051c91e9a947b2fe9', class: "content" }, index$1.h("slot", { key: '3a3576002c26476a9a64113b36245e1befb1b032' })), index$1.h("div", { key: '39a6657696c643342205d451e12f7ce43b9059ad', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, index$1.h("slot", { key: 'b9e027e1fe622d4a20fffb508ac66bc1bbd2f06b', name: "detail" }))));
+        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" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -9889,7 +10018,7 @@ const SmoothlyTableExpandableRow = class {
         this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '3007de001a37cd97b19055f2300d0c4200714da4', onClick: (e) => this.clickHandler(e) }, index$1.h("slot", { key: '8eec771831b3e72481baaa792403fd6f28ce23b2' }), index$1.h("div", { key: 'f4a0071effd34729d812fdc02023f55c29c61da2', class: "smoothly-table-detail", ref: e => (this.div = e) }, index$1.h("slot", { key: 'e9eae5eaddd3886cb39a8086bba97a177791378d', name: "detail" }))));
+        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" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -9906,7 +10035,7 @@ const SmoothlyTableFillerRow = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h("smoothly-table-row", { key: '4925aa29f641ac932dd2686bdfb285dfbba27008' }, index$1.h("smoothly-table-cell", { key: '8aebd5713c716392a50afae52b1aed1c091c15f8' }, index$1.h("slot", { key: '822bc6ecef95836f099ac8c122a0b6c00999abe2' }))));
+        return (index$1.h("smoothly-table-row", { key: '52db9475e8edb493f20b3e009a983c8dd3fe82f8' }, index$1.h("smoothly-table-cell", { key: '4b29630fbb37e98173accb7148647fc9e1b71e9e' }, index$1.h("slot", { key: 'b865d29782795cfb9b639b3520e66a4d027b72d6' }))));
     }
 };
 SmoothlyTableFillerRow.style = styleCss$f();
@@ -9918,7 +10047,7 @@ const SmoothlyTableFoot = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '491e31a72bf7cf753be9722c5f9ffd189b75beae' }, index$1.h("slot", { key: '717637b20804c096f1daac46183047b2f7570569' })));
+        return (index$1.h(index$1.Host, { key: 'b75e8bf006aa735f12ae9bff129fc09c4275b82a' }, index$1.h("slot", { key: '92a3ad0f1e31828d7399af8051a9ac6ed39b4070' })));
     }
 };
 SmoothlyTableFoot.style = styleCss$e();
@@ -9964,10 +10093,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: 'a543c06de129e8ee177a6e98e31e7e6de42edff6', class: { scrolled: !!this.scrolled }, style: {
+        return (index$1.h(index$1.Host, { key: '13d11ad45910c8b11f5d946819ff8f0f609ef55a', 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: 'a937f04e674b9eb19534395494741f87e7f2df49' })));
+            } }, index$1.h("slot", { key: 'c98d44f3813f20e6095aa62d097ff75ffe4c8db2' })));
     }
     get element() { return index$1.getElement(this); }
 };
@@ -9992,7 +10121,7 @@ const SmoothlyTableRow = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'a7150d8e85573818c5253287f7a16af0726cd566' }, index$1.h("slot", { key: '11a1f41ac92bfdfbbe55a5d56998395ffbe7f1df' })));
+        return (index$1.h(index$1.Host, { key: '41eeaab614f1b034c4035258b315855fc402b8c2' }, index$1.h("slot", { key: '23b870fd478af837fcc1747da8b9e7bf731a0dbe' })));
     }
 };
 SmoothlyTableRow.style = styleCss$c();
@@ -10015,7 +10144,7 @@ const SmoothlyTableRowGroup = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '76fef86fb057d3a38a48176ae86e9d0acd8cbd3e' }, index$1.h("div", { key: 'd4c4ce1a498d4ad36ea115c59513a7127526a654', onClick: () => this.clickHandler() }, index$1.h("div", { key: '66b75a4c40238ef265054ee334252f301dc6d136' }, index$1.h("slot", { key: 'e4438e7a0a62ae369526bc341d9ca38f0661f719', name: "start" })), index$1.h("div", { key: 'e242813ad448fe97141372e0d58f9cee9315b42d' }, index$1.h("slot", { key: '32ea0ec41821bca492f088f8e905183a70b97d58', name: "end" }))), index$1.h("div", { key: '3dadc2ae7fdde5bd4cbee29da00dd23e544c5d59' }, index$1.h("slot", { key: 'd7d82c8713ace989d6eaa9c354fff5bc5f8da797' }))));
+        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' }))));
     }
 };
 SmoothlyTableRowGroup.style = styleCss$b();
@@ -10083,7 +10212,7 @@ const SmoothlyTabsDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '667daa4673c8e0045b0b9bb673fa25d577234bcd' }, index$1.h("div", { key: '53bc7758593ff652cd66571751d44f215b96f3e2' }, index$1.h("smoothly-button", { key: '9152b373e992825a1e7a5daad5fdb8454f0e72fa', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), index$1.h("smoothly-tabs", { key: '45e823f55772be61f25d6b48688524dc98d052c9', tabs: "multiple" }, index$1.h("smoothly-tab", { key: 'ecb21ddc688927084d739e1f0e0590c83d773577', label: "Single Tab", open: true }, index$1.h("strong", { key: '8364c0c2e1afa1d729f6caa372e6864c37720b10' }, "Single Tab content here."), " If only one tab is available setting ", index$1.h("code", { key: '654811a94f174badec1416c90842741a49f202bd' }, "tabs"), " to", " ", index$1.h("code", { key: '5083b020fd3619e8deaf83044537e92423557e80' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (index$1.h("smoothly-tab", { key: '3c0d1ccc9c611be2d80ab6495d1c82d4670f21f5', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), index$1.h("div", { key: '939a6f264018acc6532aec79aa35c8bec9e15982' }, index$1.h("smoothly-button", { key: 'b40612b706c471876d98f92665a76a5cc6d71564', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), index$1.h("smoothly-tabs", { key: '7950a34808a55e1c2ff8dc75eb73826270295763' }, index$1.h("smoothly-tab", { key: '30e6c350d870d9e2b2de98ee1a5e8441e33187e9', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), index$1.h("smoothly-tab", { key: 'db66384d6fc370218db0f63c57bf1334b3496672', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), index$1.h("smoothly-tab", { key: '863e0927c3c0d5d3513f9bcb4aa36c5df4d479b2', label: "test2" }, "this is a test message!"), this.extraTab2 && index$1.h("smoothly-tab", { key: '42f481c9e506f49267b289b8ed89d6c157ee34ce', label: "test-extra" }, "this is a test message!"))));
+        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!"))));
     }
 };
 SmoothlyTabsDemo.style = styleCss$9();
@@ -10095,7 +10224,7 @@ const SmoothlyThemeColor = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'a5e578a10c7a46c0abd3ca72b8247a7ca74cd0c4' }, 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: '7050c1b8e61a45aed71762a2b1333b17a0dd89f6' }, 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();
@@ -10143,7 +10272,7 @@ const SmoothlyThemeDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '3e505cbc2317099fa9c7a8ce39eb009f2c3024ca' }, index$1.h("h2", { key: '5cf6837bdc6d17642828e4328265929512384435' }, "Theme"), index$1.h("smoothly-theme-picker", { key: 'be136a3fae2657ac4e26ad1fbd3aaeb25645a8d5' }, index$1.h("smoothly-item", { key: 'fa5fc77333513622192574123bf36506e52e3269', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index$1.h("smoothly-item", { key: '2961c2261191e11a1c592906b80da6145bd404fd', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index$1.h("smoothly-item", { key: 'dd127647b610afd4840859d7c8c10ff451dc2b56', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index$1.h("smoothly-item", { key: '5e8ad2191b20cd08d6d1cb35816dc0454611fd71', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index$1.h("smoothly-item", { key: '24410b3ba716c13887406e39d8269ad0f5623434', value: "https://test.dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index$1.h("smoothly-item", { key: '0aeb4c24f7610227b1ddcd85c4a6768fac6169ab', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index$1.h("smoothly-item", { key: '54ab7e4db39f5011d1575b08a7454edd3c8c0afa', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index$1.h("smoothly-item", { key: '8f80758dacf77044e05035ad32620cd62129e9b5', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index$1.h("smoothly-item", { key: 'd505ed591e6379bc67fc3958361c4895a57e1ee9', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index$1.h("div", { key: 'b9419547eb4bbda394e480e58b7dff8dc0ebcb1d' }, index$1.h("smoothly-theme-colors", { key: '3bf0624cac39fbcb490bc7992dfa530f3043122b' }), index$1.h("smoothly-theme-guide", { key: '388b8841be3ddfd0a42a5ecbe098b512210ad26a' })), index$1.h("smoothly-button", { key: '3a56e3439212da68889c98cfe64141730732aefa', type: "link", link: "/redirect" }, "To redirect"), index$1.h("smoothly-button", { key: '56add7b4f875bb0521b32e34719c703591e21961', type: "link", link: "/redirect" }, "To /redirect"), index$1.h("smoothly-button", { key: '6319b234d80bb29370f55225bae9fef3278dee83', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index$1.h("smoothly-button", { key: 'a842d75971928d0a6d0738009da122244d7b95a0', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        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")));
     }
 };
 SmoothlyThemeDemo.style = styleCss$5();
@@ -10156,14 +10285,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index$1.h("smoothly-display", { key: '504bfdf471aa62a566cb5ac96654b9e00d88e292' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index$1.h("br", { key: '9eb11da56a43e89a690df6872cb34900f565ff75' }),
-            index$1.h("smoothly-display", { key: '1955543920f4ea9c106d44a2d795fe2bde0df1f5' }, "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: 'cc09a61f2e021b2782fd63734b07c21973e4cd56' }),
-            index$1.h("smoothly-display", { key: '9e26806ea2d6f725073f674a9f19c8d9b916c223' }, "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: '1e0130f07d2a001fc206190d93c660f117596899' }),
-            index$1.h("smoothly-display", { key: '4c7cdf267964d06803f03ff567ab0cb881b709b8' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index$1.h("br", { key: 'b2abb2ebff2bf2a5f329e5665f9bcf7c11b65bfc' }),
+            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' }),
         ];
     }
 };
@@ -10177,12 +10306,12 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '70e3737e113724291c1decf423e6cd39733763a7' }, index$1.h("smoothly-input-select", { key: 'eed6362c4c845f26fe45ab80a36261a851146a32', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index$1.h(index$1.Host, { key: 'f3041c36aed21fc2bb574fe471136d352b9c4af7' }, index$1.h("smoothly-input-select", { key: '9c0436083a8c694a5c71eb7d0baca1961cce2deb', 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: '39e4c5e3793f19cc007f3a8b96988922a09109cf', slot: "label" }, "Select theme"), index$1.h("slot", { key: 'ea07c5aaee7e847991b27358eef479edb0105f91' }))));
+            } }, index$1.h("label", { key: '25ab17959d5d58a305f7c66b44d045766d41fce2', slot: "label" }, "Select theme"), index$1.h("slot", { key: '80d00e64a289d0e1ce3218ecd7c322317148e34e' }))));
     }
 };
 SmoothlyThemePicker.style = styleCss$3();
@@ -10205,7 +10334,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '0291d49b2ab1c542e752a3a694b5e15f446be27c' }, index$1.h("button", { key: '2be03163917c089e2a81404556996c93befeafa3', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index$1.h("smoothly-icon", { key: 'a261b04197599fa3c80fedc502a532043e943bbe', 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: '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 } }))));
     }
 };
 SmoothlyToggleSwitch.style = styleCss$2();
@@ -10217,7 +10346,7 @@ const SmoothlyToggleSwitchDemo = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '470464d6d37e40e5f340822febb85cfb8d287267' }, index$1.h("h4", { key: 'fdb67153afb84fa7d734bf1f701def5b647f6ce7' }, "Toggle switches"), index$1.h("div", { key: 'bc4bf67807f2bba85c1bc42e7c5376eee516995e' }, index$1.h("p", { key: '07fda130d51c52347d2ac0680b2044f25f0fa994' }, "Checkmark"), index$1.h("span", { key: '1c444c3c73daf0130db447e44cb031f24abd01f8' }, index$1.h("p", { key: 'cdd900d00acb877aa76c9ae55c5cb083049abb43' }, "Tiny"), index$1.h("smoothly-toggle-switch", { key: 'a37f5af8a756a3b31a04ab5935a4b8a0bfbef243', disabled: false, size: "tiny" })), index$1.h("span", { key: '0b0dc28ca00a27fd8b234b89ae71ea293f84df65' }, index$1.h("p", { key: '14076ac015952db2b5ebe528085c5ca9c6c383b8' }, "Small"), index$1.h("smoothly-toggle-switch", { key: 'ea50543c67201c279a5f4a2807ba8b23d2ebff13', disabled: false, size: "small" })), index$1.h("span", { key: 'd45cf2681dfdbf26f6acc66dab5bcf37ab051d0b' }, index$1.h("p", { key: 'a3ca4cf338454d0276e4b4caddad85225ce41676' }, "Standard"), index$1.h("smoothly-toggle-switch", { key: '99a061952aa9c18b40f40cb6e5bfaaac0ee9e016', disabled: false })), index$1.h("span", { key: '451ea07c909458ae1033a3362d07d0f5974dc3e6' }, index$1.h("p", { key: 'b60a09266e15ce4ae54ca1c9bf05aceca06aed05' }, "Large"), index$1.h("smoothly-toggle-switch", { key: 'eb7f4deceae4b69ec5bcc8fb5a140d76be1fe4cd', disabled: false, size: "large" })), index$1.h("p", { key: 'ad75b8c6bddd9f59246a42d78056c51a8231713d' }, "Colors checkmark"), index$1.h("span", { key: '633ebf151c353aa20662b9cc0c6fc7ef2d27f659' }, index$1.h("p", { key: '0ecb5da92182163deb10667fb1cfbeeeb91a4f95' }, "Danger"), index$1.h("smoothly-toggle-switch", { key: '9f8b43c2fbdb0f1d56d564ba936740c56cd19615', color: "danger", disabled: false, size: "small" })), index$1.h("span", { key: '29eba3b1395741d2cd8821725ab2720f8c2bfc65' }, index$1.h("p", { key: '4de96be58373d873576be6ab6b8244444795cd88' }, "Primary color"), index$1.h("smoothly-toggle-switch", { key: '1268bb9b2081aeff88bdb4ed657d7ea05f10fb69', color: "primary", disabled: false, size: "small" })), index$1.h("span", { key: '40baf7b8cf63b0b401107ad780246da0192468e5' }, index$1.h("p", { key: 'efa762aff61e90aa7a9e5be8290c84e8c8ec570d' }, "Secondary color"), index$1.h("smoothly-toggle-switch", { key: 'a648aa6596da331b42a06917bf5e69ce92efc6d6', color: "secondary", disabled: false, size: "small" })), index$1.h("p", { key: '8b105d3cfa1bc78a0f818a7661240ebbf6475ca4' }), index$1.h("p", { key: '274e9e35dcb487642858cbe7d6f73dd61ab6f865' }, "Colors no checkmark"), index$1.h("span", { key: '3e919b9d7b34da5733153911758268b52678c9fb' }, index$1.h("p", { key: '500fc3bde72ce1af1a0cda2027a98f5568a029e0' }, "Danger"), index$1.h("smoothly-toggle-switch", { key: '2292abd9acac252aa8633ffb1427a6961c6a9928', checkmark: false, color: "danger", disabled: false, size: "small" })), index$1.h("span", { key: '47516027ff4083165416e71475e262d1e6f3aed8' }, index$1.h("p", { key: 'e345a770b485052b082ed2d88ba3dce0099da701' }, "Primary color"), index$1.h("smoothly-toggle-switch", { key: '79896d7ff3091c6af545a3352668c7daaf8491cb', checkmark: false, color: "primary", disabled: false, size: "small" })), index$1.h("span", { key: 'afc9c9d03135b7cebfa6866cccb8ab993f1fa5f4' }, index$1.h("p", { key: '39b9563fd95bd730a05ecda2e0ddb3db96503d08' }, "Secondary color"), index$1.h("smoothly-toggle-switch", { key: '02623b5220ccb3d547dda23d2eae0216ca20fd77', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        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" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = styleCss$1();
@@ -10243,7 +10372,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: '3df0af31da21f4eeb53048b22a0a1fe9f37b608d', disabled: this.disabled, name: this.name }, index$1.h("slot", { key: '9566f4ff09d80a9b4c1d9d79acef49609cd3a425' })));
+                result = (index$1.h("button", { key: 'b4a018b58d8d2fd2d80a17e2470ef4560dca427c', disabled: this.disabled, name: this.name }, index$1.h("slot", { key: 'a85c494c50b1d787673bce7cf844b1427761f4e6' })));
                 break;
         }
         return result;