npm - smoothly - Versions diffs - 1.2.1-alpha.61 → 1.2.1-alpha.63 - Mend

smoothly 1.2.1-alpha.61 → 1.2.1-alpha.63

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 (477) hide show

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

@@ -1603,7 +1603,7 @@ const SmoothlyBackToTop = class {
 };
 SmoothlyBackToTop.style = SmoothlyBackToTopStyle0;
-const styleCss$1i = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{font-size:1.7em;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
+const styleCss$1i = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{--smoothly-icon-size:3rem;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
 const SmoothlyBurgerStyle0 = styleCss$1i;
 const SmoothlyBurger = class {
@@ -1711,7 +1711,7 @@ const SmoothlyButtonConfirm = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '92ecc0cbcbe8a3c567a5b6f5839f4f5e422866e9', warning: this.clickTimeStamp }, index.h("smoothly-button", { key: 'bf8ce05dfa68aa34801975f5c590b98837f918f0', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("smoothly-icon", { key: '9ba0e4fcbb52a958443e4e2d9aca9e0f1c9b31e3', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), index.h("smoothly-button", { key: 'c2e053984ab532494fa5d5c9cff0dfd4f236fa57', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("slot", { key: 'c485c3a61102c224621ba0ef0390a24932be5956' }))));
+        return (index.h(index.Host, { key: '316a3f9fb74039c7a6b80c0b665582c9c016176b', warning: this.clickTimeStamp }, index.h("smoothly-button", { key: 'c4e4a4845ccb4ca9b599957eafe177494f03f124', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("smoothly-icon", { key: 'd7763547cf321bbff31ce9fa437c0d7753b4767c', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), index.h("smoothly-button", { key: 'f3e3af94612519e43694139c91bfca618293af94', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("slot", { key: '38fbabcf48c532abea1fde79454acb5785955b77' }))));
     }
 };
 SmoothlyButtonConfirm.style = SmoothlyButtonConfirmStyle0;
@@ -1726,8 +1726,8 @@ const SmoothlyButtonDemo = class {
     render() {
         return [
             index.h("h2", { key: 'bddbcdcb9ce5d83b6bfa7b6ecfdc6aa39a2eb566' }, "Buttons"),
-            index.h("section", { key: '1a68d5f5e150439e623fa625432c0b76d84cb4da' }, index.h("h4", { key: 'ce297567bb70f6f61cb5c9adfce457b96a727dee' }, "Confirm button (two clicks)"), index.h("div", { key: '6b8561f4fe3001800c5a058e01a023361e8ff5fc' }, index.h("smoothly-button-confirm", { key: 'c26ec515d6e59142694394336d6c408f9d77d5c2', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), index.h("smoothly-button-confirm", { key: 'bc1fe30703e9469b80851611286309c2465b6708', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, index.h("smoothly-icon", { key: '2c5ad6e48b66c4aac2b85dc8ea27b292b9229054', name: "checkmark-outline", size: "tiny" })), index.h("smoothly-button-confirm", { key: 'b00eff042a7e4ad8d84dbd5928499dfe93e0aade', name: "confirm-icon", shape: "rounded", color: "danger", size: "icon", fill: "outline" }, index.h("smoothly-icon", { key: '180734788ed2a6bf6dd7b833ec6e2bb8c8aa4d65', name: "trash-outline", size: "tiny", fill: "outline" }))), index.h("h4", { key: 'e25fbefe45792c9e30a2c57a0c653b7a9ee5d459' }, "Toggle button"), index.h("smoothly-toggle", { key: '382d2e1645b0414d8b913ba02b564f265d0fe208' }, index.h("smoothly-icon", { key: '446740388ba67c61a8378d4386735a1812ff083c', name: "card", fill: "solid", slot: "icon-slot" })), index.h("smoothly-toggle", { key: '8c950bbecec8807ac73da93e6bae99cd096d2cba' }, index.h("smoothly-icon", { key: 'dfdc829247bda20f9d9da36c10ed659ae6f897df', name: "briefcase", slot: "icon-slot" })), index.h("smoothly-toggle", { key: 'a79c5236bb4ebe6a136b81350cffcd5803d090dd' }, index.h("smoothly-icon", { key: '4a25c345c49c70ddefcd938c2efec421c6ba5818', name: "airplane", slot: "icon-slot" })), index.h("smoothly-toggle-switch-demo", { key: 'd44f03242ec60165ee941700e1f774a9deca8ed1' }), index.h("h4", { key: '83079e47b2bfc64da81d2332a581619cbddf4500' }, "Links with icons"), index.h("smoothly-button", { key: '7a62c92041257209c1615bbd673c1c50ee6d9739', type: "link" }, index.h("smoothly-icon", { key: '5059b784526f638a691ee8241dd3732585a0a6f6', name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { key: '450c4299a9ceaa31f1a2143ddbe848b559a3fadf', type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { key: '3e5702b60edb4bf36bb5b13013b5ed49b22038ff', name: "call", slot: "start" }), index.h("a", { key: '916ff6ccb76afbece7f15bd26ffa061d1f4c7357', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: '1f3ac00e99ee9175ade176b729968ab280e374f5', link: "https://google.com", type: "link" }, index.h("smoothly-icon", { key: '182ee7d973137fc0fe569506cc26b907d56044d2', name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", { key: '9c98f39214d58734e0a2cd2564ec94887c3789b2' }, "Size and Color test"), index.h("smoothly-button", { key: '4a381c7b2abb9bc25aa2071d515d00e554373729', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { key: '2bdc73f7f47144d1eb767d93ff24501f03ee0154', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { key: '2ac63d611e15bfeaf6accf58fb19e8f1fe7f10f3', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { key: '435d959f703ae620a35414fa8ac41091f039470f', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { key: 'a683db9beb1103e8f7d751a8886f929a28fd7f9f', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { key: 'a06b826626ac02d53287fce5933309dbad62775e', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { key: 'd92c3f767c215b97f981090e6713db3c9cdd5fc3', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { key: '60b5814702944be4d69c8660f9b00b3d546db670', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { key: '285602770a1a6b7b88d5362b537a135474cd36d6', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", { key: '93cd7e3412684091fd54e33327ef6ffca2ccfdde' }, "Expand examples"), index.h("smoothly-button", { key: '71115ebbaef4062bb92631e2dc9314e487d70a63', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { key: 'ab9bab41d8f104bfcf8fb512de68cfc8abb80248', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", { key: '7fe80cd1213ac4288e742f8e53db704a80160619' }, "Fill examples"), index.h("div", { key: '78f772042275f540ac76027f27405703b5612342' }, index.h("smoothly-button", { key: '354c986b170c0650afefe849c38b68869e3a89de', shape: "rounded", color: "primary", fill: "solid" }, index.h("smoothly-icon", { key: '11078a864ac2f2aff15c9c0ecbf1b72604a528fb', name: "checkmark-circle", slot: "start" }), "Fill Solid"), index.h("smoothly-button", { key: 'e873de608e6734d48797e70a52b59c96539f9963', shape: "rounded", color: "secondary", fill: "outline" }, index.h("smoothly-icon", { key: 'e280e4627d6178ed829504e3fd819b237b368310', name: "checkmark-circle", slot: "start" }), "Fill Outline"), index.h("smoothly-button", { key: '4bc537c2cf113821d4fb48dba73058c5b5b06103', shape: "rounded", color: "tertiary", fill: "clear" }, index.h("smoothly-icon", { key: '0328a79c6c5070cdbdab3dfc7b59685848ae8a25', name: "checkmark-circle", slot: "start" }), "Fill Clear"), index.h("smoothly-button", { key: 'f770f700014802c3384ee791776a17cfd2baee5d', size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: '4d83d78c29a011365538a376716e62f55469aa7f', name: "basketball" }))), index.h("h4", { key: 'dd52fc042e985c7e5dd4f70ad659aa5a67f113fd' }, "Buttons with Icon in \"start\""), index.h("div", { key: '354ff7082e404bae0580939d262cdadd82c741c1' }, index.h("smoothly-button", { key: '748b62961a706bf020067a86d38133aaed392295', shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { key: 'c71be2a99d2fad8f4714f0b1951dabd7ae300ca6', name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'edbc409832eb913072e35015c91b34ac8a1c1c0b', shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { key: '7778e217541f3bd0c57458714b7a2a74e926790f', name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { key: '56b928c4e487cfad1d87ce4c394eb32bf922bee8', shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '8b0ca775e79d0d67c3df54a5ee018979062d8005', name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'b201e3fd2b2fa39a67ff755bc6bf507b713d22b2', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '2422da1f02def727ae2d849b4fca259625d28186', name: "call" })), index.h("smoothly-button", { key: '559bc69c4a2648ddb795eadd71d11881ede60e07', size: "flexible", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '8d7ca205ca86f1869524db0b989175fb61577b3a', name: "airplane" }))), index.h("h4", { key: '0d20d1ef4c4f5a92d3ba9c52e3c9bbc102082669' }, "Buttons with Icon in \"end\""), index.h("smoothly-button", { key: '9d5303af3e3e9ff1213274745210e683c6386ffd', fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { key: 'f1b0fce6a32ab6718a49692fc678e2c8b8fa2c06', name: "arrow-forward", slot: "end" })), index.h("h4", { key: '71c1e32c6c99fa92676c4ae29ababc379b2eff31' }, "Test for icon button"), index.h("div", { key: '2a792664efad4614124252fde55024c579d4c0cb' }, index.h("smoothly-button", { key: 'd3b0ab0e85860c2c94213977159b6e26f438c98b', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '10feac29e11998eeaccb5759bc0f4cf841ac69da', name: "call" })), index.h("smoothly-button", { key: 'fc2f6b2ca9b8b02eaaea5da9ddc4b4d42eb8619b', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { key: 'ea95489a7735a94b6028ef37a9f36a97d7c26f6e', name: "search-outline" })), index.h("smoothly-button", { key: '2629f414b94958e22f4dbae0f9ff0eb143dd5f36', size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { key: 'e5b1d7012a76cc0fa159cb2ac226ebcd584bf43d', name: "checkmark-circle" }))), index.h("h4", { key: '071beba6f628300fbe06e3159e5024948761e099' }, "Link examples"), index.h("div", { key: '86ba2c9206940302eb5ca3794f74939c7942263a' }, index.h("smoothly-button", { key: '1e5f643cbbf49929e918da57f6151ddd0725f8c7', type: "link" }, "type link"), index.h("smoothly-button", { key: '5e25581e6ea3cf136b0996c9f0c6675477e76768', type: "button", fill: "clear" }, index.h("a", { key: '51123cd62d7c2e0c403593ed3653bcf1dcf6529a', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: '84687567a4672a87845b3315164aec9aa49d8b06', link: "https://google.com", type: "link" }, "link + type link")), index.h("h4", { key: 'afd95ebfba2102c4b3a15befc25018bd45df58da' }, "Disabled buttons"), index.h("div", { key: 'af549870028d91bd5a492b830f568cb64d89484f' }, index.h("smoothly-button", { key: '03a442de0f43105cc129e9d395669b9a9d854df9', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { key: 'b9019e75b010aa0d338f56280017bf1ad9c8b04b', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
-            index.h("smoothly-back-to-top", { key: '555b6062cb2308beb7ee4b2cee9bc55758888707' }),
+            index.h("section", { key: '1a68d5f5e150439e623fa625432c0b76d84cb4da' }, index.h("h4", { key: 'ce297567bb70f6f61cb5c9adfce457b96a727dee' }, "Confirm button (two clicks)"), index.h("div", { key: '6b8561f4fe3001800c5a058e01a023361e8ff5fc' }, index.h("smoothly-button-confirm", { key: 'c26ec515d6e59142694394336d6c408f9d77d5c2', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), index.h("smoothly-button-confirm", { key: 'bc1fe30703e9469b80851611286309c2465b6708', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, index.h("smoothly-icon", { key: '2c5ad6e48b66c4aac2b85dc8ea27b292b9229054', name: "checkmark-outline", size: "tiny" })), index.h("smoothly-button-confirm", { key: 'b00eff042a7e4ad8d84dbd5928499dfe93e0aade', name: "confirm-icon", shape: "rounded", color: "danger", size: "icon", fill: "outline" }, index.h("smoothly-icon", { key: '180734788ed2a6bf6dd7b833ec6e2bb8c8aa4d65', name: "trash-outline", size: "tiny", fill: "outline" }))), index.h("smoothly-toggle-switch-demo", { key: '05f0025358df19ae26c50e988f75488f41da289d' }), index.h("h4", { key: 'a9d8bcaea4a0f4faefb18091126dbcdf41f310d9' }, "Links with icons"), index.h("smoothly-button", { key: '167bbb5902842ca9bffce2c147d628d56e400190', type: "link" }, index.h("smoothly-icon", { key: 'd072acb7417bacbe2f7ecdc46aabda39cbdbfc06', name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { key: '009968c3ec3174984ea7d2d0f8583283dac79cd7', type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { key: 'a006bec82e32c090679bf672067786ad20ee1a1c', name: "call", slot: "start" }), index.h("a", { key: 'f07b7790a97c5ee46d0f9b2208c7adc6be83b578', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: '6bc40589a121c17134918def9047a9f4c5849d92', link: "https://google.com", type: "link" }, index.h("smoothly-icon", { key: '7fe282e07c20828f9d3370fc652212dbfbffeb22', name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", { key: '8ba8336502afd8345f6fb4e4fab960482ae518a8' }, "Size and Color test"), index.h("smoothly-button", { key: '8853f3af8f2a529da7b4e852bb97b683b83305df', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { key: '58bacfecc8658277fce79ca8c92b09269d98dd9a', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { key: 'ad0d74e0a69340b75589a4758a09aac2dcb76f00', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { key: '440876e5df141e0c8ac44027661f8e575921699f', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { key: '2c7792f5eab260fc72dea8d02a69f870e017c461', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { key: 'e6a5713a3f4c683442c44c7dce5d4b14d5ed137b', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { key: '9344764b926c4b7620a116f7811c569e2825440d', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { key: '47ee717243171483731ddb1645c4769dc02386e8', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { key: 'fcb45ba51f2efd49e3bb1601213d3e7ad020fbbd', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", { key: '2445eacd62ea0749ed0bdcd7a624fc9d0003b69e' }, "Expand examples"), index.h("smoothly-button", { key: '9cdb6cfac5d2806e522c2764aaf4f3f8b24bd81c', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { key: '72c233f139b871a57202f29cc3f2d26bd45900a2', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", { key: 'b6912697d2018ba136133d3d21349c8fade175fb' }, "Fill examples"), index.h("div", { key: 'e4095adae1b21cac1437407a4b032ebf2b5857fb' }, index.h("smoothly-button", { key: '537fb2c0df80f137e082ff7b0cfd3fd6dd0dbe46', shape: "rounded", color: "primary", fill: "solid" }, index.h("smoothly-icon", { key: '9982e7b95ca149470e6d5b34967f46cad195a35f', name: "checkmark-circle", slot: "start" }), "Fill Solid"), index.h("smoothly-button", { key: '9a7021a7c1743c2c46a8a67159d2cda23e4579c2', shape: "rounded", color: "secondary", fill: "outline" }, index.h("smoothly-icon", { key: '469608b3bfc55b192d773f42ef70e567795ca455', name: "checkmark-circle", slot: "start" }), "Fill Outline"), index.h("smoothly-button", { key: '52a5d266726a031d6b66b3a1180ad37623dd74c9', shape: "rounded", color: "tertiary", fill: "clear" }, index.h("smoothly-icon", { key: '94e036929040b6ac859a055bde8ad09e804ad1fd', name: "checkmark-circle", slot: "start" }), "Fill Clear"), index.h("smoothly-button", { key: 'f48dfdc3b4151689bfe7c3f069156b8e97ccd485', size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: '729e24c3f27ee5ee5d9ac91a872d0ebaf232ef06', name: "basketball" }))), index.h("h4", { key: 'f6925e64d522c3049c3df03ae5572e7cb79b91aa' }, "Buttons with Icon in \"start\""), index.h("div", { key: '4caf500f1fc1e0bc4fdefbada8053ec53d919859' }, index.h("smoothly-button", { key: '69248dd64f9f1e6bd2eb72d9bb060d2adc95230e', shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { key: '326c813748e85699bf9378ae903f82c3a94a99fe', name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'e32f179237d11e7168f6b9d86584a941e7c132ba', shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { key: 'ac60c8faa7ee073a8193a670c1f4195331930f43', name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { key: '19388cc01865030341d6e481e17f2b8201f7e2a2', shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '9ef487e2d5ee74050fb1d544d2cd38cba4e031ff', name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { key: '551d64ac42aff595a46024e330dd09db0985f958', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: 'c834b6e258f7a992a28349103b8029384fde8a60', name: "call" })), index.h("smoothly-button", { key: '747732c4f71779e75dd1e28f1279afbb5ca9977f', size: "flexible", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '39095a422a92dae1516d70fc6cd307886dd44f8d', name: "airplane" }))), index.h("h4", { key: 'bbbc29959dfe655b2d9cce283dea0fb02429a834' }, "Buttons with Icon in \"end\""), index.h("smoothly-button", { key: '24d19a5ecc1208b8a918027a8e32b7148554380e', fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { key: '263940589ee234ba91a0ee6d80474b3df208a27f', name: "arrow-forward", slot: "end" })), index.h("h4", { key: '94736445a17a3cf6880880463e181f50b41e919a' }, "Test for icon button"), index.h("div", { key: '445605a6a79169dff7f1d8fc06afe4aa71279fc5' }, index.h("smoothly-button", { key: 'e2bf3d70b09f51ef033160538ee894ed7e5a5704', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: 'bb6eeb8eefa8c9ded0804b62976fa3dea30e6f04', name: "call" })), index.h("smoothly-button", { key: '0dc78ad3f658c896c2f1094dbb378319ce081b7e', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { key: 'a07d3a8a103b9ce19b11b91f2464b8e7089d1337', name: "search-outline" })), index.h("smoothly-button", { key: '0408dea25ae083f2427cf347677914478426dbbc', size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { key: '38337dd0de50a5dcfe4d1ccd070826cfc0cd6124', name: "checkmark-circle" }))), index.h("h4", { key: '15e4d907e44d0c9191acf970a7ffa718b0baf537' }, "Link examples"), index.h("div", { key: 'f966263b0a25dd27dc146a28ba03774813c6469a' }, index.h("smoothly-button", { key: 'b1a65a0fd62273af3cb6d982ee98c7a1c565fb20', type: "link" }, "type link"), index.h("smoothly-button", { key: '2b19c2d53a823dcc74426b12309e6854d3a4923d', type: "button", fill: "clear" }, index.h("a", { key: '45c4ce410828bfb775464872aaa7e6ab6e0e800e', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'c98b71da6960956e031b99d23e53cc5a123341a3', link: "https://google.com", type: "link" }, "link + type link")), index.h("h4", { key: '559ef66961156a0c954e7a6009283a8328a4dd48' }, "Disabled buttons"), index.h("div", { key: '5856c23cde78acfc84c73b78aaa5c1b1f1e82c43' }, index.h("smoothly-button", { key: '6da6041b5d6b51adc0cc19ecf074412d7183fe7b', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { key: '57e28f82cf722df8dc9ecfb0bff304a345e27018', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
+            index.h("smoothly-back-to-top", { key: 'a1d78b61fcc3da58bd3f8683fbeccb34bbcb3ef3' }),
         ];
     }
 };
@@ -1855,10 +1855,10 @@ const Calendar = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Fragment, { key: '7b1fb3ef1cbdc1d5e6613384e64da895fcaa5cf3' }, index.h("smoothly-input-month", { key: 'ad67fc659c6a18d45132f422733ea24d7d56dd2b', name: "month", value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, min: this.min, max: this.max, inCalendar: true, next: true, previous: true, showLabel: false, onSmoothlyInput: e => {
+        return (index.h(index.Fragment, { key: '818f64c07d09772dcf0ca9a9d561b5745684c9ae' }, index.h("smoothly-input-month", { key: 'b407c0b400e94cfad36c372bf8353ad1fe52a5fd', name: "month", value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, min: this.min, max: this.max, inCalendar: true, next: true, previous: true, showLabel: false, onSmoothlyInput: e => {
                 e.stopPropagation();
                 "month" in e.detail && typeof e.detail.month == "string" && (this.month = e.detail.month);
-            } }, index.h("div", { key: 'b5da7a44e2576313b98caa246146c74eea0cdae3', slot: "year-label" }, index.h("slot", { key: '3862506ef62aaa5226d366b65351549a74c9ec6e', name: "year-label" })), index.h("div", { key: 'c1e36c66c30e6540039271fd1719c9d4438c8afa', slot: "month-label" }, index.h("slot", { key: 'e88f780f22b3e310b87df52e430de3d40de4d552', name: "month-label" }))), index.h("table", { key: 'a7ef6dc817715ed613e895b668c4ef1bf4cd1386' }, index.h("thead", { key: '6ddbd34b74a61affd2afee8ff27c44461a542224' }, index.h("tr", { key: '79141f617b4eacbd6dbc8f17045281a5a0a49ace' }, weekdays().map(day => (index.h("th", null, day))))), month((_c = (_b = this.month) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : TimeZone.Date.now()).map(week => (index.h("tr", null, week.map(date => {
+            } }, index.h("div", { key: '46d05aa65a4a0de959e2bb79f00fd6bce67662a1', slot: "year-label" }, index.h("slot", { key: 'cbd40bacc7fa9a661916deb52e5538e163de5067', name: "year-label" })), index.h("div", { key: '26f35188e898cbd35a20ab6d5f469418bfc5952d', slot: "month-label" }, index.h("slot", { key: '79ece04c1955c45809892accb4c692a3277a2c4b', name: "month-label" }))), index.h("table", { key: '3002ee275ea4b53934e14fa27d08ba67d79a993d' }, index.h("thead", { key: 'f6d280f29660fe107ef459e4cdc8a829b91d26b0' }, index.h("tr", { key: 'cdeaec6bc32757bb65c130618e9ea92b668acc25' }, weekdays().map(day => (index.h("th", null, day))))), month((_c = (_b = this.month) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : TimeZone.Date.now()).map(week => (index.h("tr", null, week.map(date => {
             var _a, _b, _c, _d;
             return (index.h("td", { tabindex: 1, onMouseOver: () => (this.withinLimit(date) ? this.onHover(date) : undefined), onClick: this.withinLimit(date) ? () => this.onClick(date) : undefined, class: {
                     selected: date == this.value || (this.doubleInput && (date == this.start || date == this.end)),
@@ -1901,7 +1901,7 @@ const SmoothlyDialog = class {
         };
     }
     __stencil_render() {
-        return (index.h("section", { key: 'ca3b4f95802da90bb96a3b40b780205f8e1d2bb4' }, index.h("div", { key: '23b2def77984b4f28b0f7f2719f30aa909556ae7', class: "header" }, this.closable && (index.h("smoothly-trigger", { key: '260384e3d9d2c34a770ac59a82912e0932d4da94', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '3293bf5b361612548e6e631bcb080f2ffaf58626', name: "close-circle", fill: "solid", color: this.color }))), this.header ? index.h("h1", null, this.header) : index.h("slot", { name: "header" })), index.h("div", { key: 'cc6034964e9c26f536359962d95bfa3b6ce51417', class: "content" }, index.h("slot", { key: '77b99186cf1535cc8faa03edd6dda4b7e561fd69' }))));
+        return (index.h("section", { key: 'd13e5bf2132afe9b22f3ed6f3f3d5c96f8f61fc2' }, index.h("div", { key: '9f0c40b2efb77ef63312ef5c6e70e55f6605b3b5', class: "header" }, this.closable && (index.h("smoothly-trigger", { key: '2cbd48cb261f1c5e951a385a4e87e5af8ef3f9fa', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'c87a41fd9350c00fa41965eb95a8ef8366a12361', name: "close-circle", fill: "solid", color: this.color }))), this.header ? index.h("h1", null, this.header) : index.h("slot", { name: "header" })), index.h("div", { key: 'f50603dce6e75b2254469f688c055610590df737', class: "content" }, index.h("slot", { key: '2774f7a85f71e91ce07c1dd4c6fd48b53c589b47' }))));
     }
     render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
 };
@@ -1918,7 +1918,7 @@ const SmoothlyDialogDemo = class {
         this.showFrame = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'bb869a1a3c54958bdf29a0094d3649afa81770e5' }, index.h("smoothly-button", { key: '1ef55f5b1f3b350bd7d33348d8370f6cd95a289d', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), index.h("smoothly-button", { key: '1867bfeda91bc8f39c4b2e2cf00ec971845b97cb', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), index.h("smoothly-button", { key: 'a24d0a80108afdad983900b1abf9b6093a29673e', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), index.h("smoothly-modal", { key: 'e30f0149b3d8dc8037da0470815c9aa704d2d7c4', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, index.h("h2", { key: '76e559f061029a850bbdfcb2c7b9eae66bec49a9', slot: "header" }, "Modal"), index.h("span", { key: 'f2429c7978f5a14db471fd643a608581232e6b99' }, "Are you sure you want to confirm this action?"), index.h("smoothly-button", { key: '7cbb9b7df38d30076d8fb1074640a5447e8c9def', slot: "actions", color: "success" }, "Confirm"), index.h("smoothly-button", { key: '274d9655b7f23b7ce891e736b31924dc00fe8c0c', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), index.h("smoothly-modal", { key: '284f4e666fafa5e9de84f0fd19014657e9c4ea28', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, index.h("h2", { key: '78f7eda89834a0228792e95bf9d78f1cef6dab93', slot: "header" }, "Modal"), index.h("smoothly-summary", { key: '41ec8ae55ee1241e1935db9e5035450d4f50832d' }, index.h("div", { key: '4a807f599a75573c249539f7e8a456b44f4280cd', slot: "summary" }, "Lorem ipsum"), index.h("div", { key: 'eca8bdcd9bd740a4597b28f7fc7361ec9ecb3753', slot: "content" }, Array.from({ length: 10 }).map(() => (index.h("p", null, "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.h("smoothly-button", { key: 'a1da70bd2670e5ebe2f209286c6c626b0c3a233a', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (index.h("smoothly-dialog", { key: '41e8a92ef77e563f4cf59eeb17d6c0c90a21f20f', closable: true }, index.h("smoothly-frame", { key: '7296968b616654ad2ca0a757fbe7b0b8a8d06c31', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
+        return (index.h(index.Host, { key: 'f7ae2fc97658b0aa8c08755714792ec4399224da' }, index.h("smoothly-button", { key: 'f99ac0d5c89394052b2d6faab955d8b2634e2b5f', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), index.h("smoothly-button", { key: '8e6a1ff75c6469816cdd206fe6afa2c8eead8684', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), index.h("smoothly-button", { key: 'c8af4a1887f7f2c005926bec9032038e1fa43d3b', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), index.h("smoothly-modal", { key: '534b00fc5e74c9539ba8106b0c9cf382463448b3', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, index.h("h2", { key: '82a998800b4e7ea57210a3116cdf35eec00aa952', slot: "header" }, "Modal"), index.h("span", { key: 'edeb8eaa859444f30e3f95b76fab7db2b322683f' }, "Are you sure you want to confirm this action?"), index.h("smoothly-button", { key: '50a4de7de97c55783fdd3e8167ec9fac4395d16a', slot: "actions", color: "success" }, "Confirm"), index.h("smoothly-button", { key: 'd4740cdac6527a55b692c04dd70ad17fefbe7eb8', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), index.h("smoothly-modal", { key: '0beaeb3ab4f2af395a3aa0257674f38f55faabd6', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, index.h("h2", { key: '453c4ded8638235b6dc0ff5c043b57d37995be4d', slot: "header" }, "Modal"), index.h("smoothly-summary", { key: '871fc4ad53812e7331093c43dee851b14d33f726' }, index.h("div", { key: '720c732d6f03309304d677b6292b853ac38257f8', slot: "summary" }, "Lorem ipsum"), index.h("div", { key: '2e5632e1402f5ff2830e63dc56be723549c2a90e', slot: "content" }, Array.from({ length: 10 }).map(() => (index.h("p", null, "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.h("smoothly-button", { key: '5fb59dab67d31d2783855d1e0c4f67197a7eaa04', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (index.h("smoothly-dialog", { key: '939b4f257b01be10467dc90b45801402df5f70e3', closable: true }, index.h("smoothly-frame", { key: '83c2ac363001992a0673506df8317b30b487ff60', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
     }
 };
 SmoothlyDialogDemo.style = SmoothlyDialogDemoStyle0;
@@ -3778,16 +3778,16 @@ const SmoothlyDisplay = class {
         const type = this.type;
         switch (type) {
             case "json":
-                result = index.h("smoothly-display-json", { key: '2ff64bd2ea031cbb472c41bcb52fcf696f524a73', value: this.value, collapseDepth: this.collapseDepth });
+                result = index.h("smoothly-display-json", { key: '1ede546f9829aea0f9b8c319db98df10e07b04a3', value: this.value, collapseDepth: this.collapseDepth });
                 break;
             default:
                 result = format(this.value, type);
                 break;
             case "email":
-                result = index.h("a", { key: 'b9bc9827de58ab167a50e439ed60d0a5f9f3f2e3', href: "mailto:" + this.value }, format(this.value, type));
+                result = index.h("a", { key: 'c6047f436091639f6302be22f62610c0515a4009', href: "mailto:" + this.value }, format(this.value, type));
                 break;
             case "phone":
-                result = index.h("a", { key: '184af93546b3f1c7f074593ac1d0ea4dc2713341', href: "tel:" + this.value }, format(this.value, type, this.country));
+                result = index.h("a", { key: 'b62431225a51efb22037598e4227671e863be3c3', href: "tel:" + this.value }, format(this.value, type, this.country));
                 break;
             case "postal-code":
                 result = format(this.value, type, this.country);
@@ -3824,35 +3824,35 @@ const SmoothlyDisplayDemo = class {
     }
     render() {
         return [
-            index.h("main", { key: 'fd051f67ea55f254181be2b43716e84e00cabb05' }, index.h("fieldset", { key: 'bea8026fe521ec050e1780416fa9e32989b2afa4' }, index.h("h2", { key: 'ef4c1a656d67796afc8f9c5c9db63c04f96aab4c' }, "Smoothly display"), index.h("dl", { key: '8deda943fa8ead28b6df1b007907f6d9dbf66d85' }, index.h("dt", { key: 'caf0ad2fe220cdb62d47140efd9684998246e2c3' }, "Duration"), index.h("dd", { key: 'f1c4659bf36f0a327fabba9314042dace342c13b' }, index.h("div", { key: '30872a9bd82d2814a82cf53ec42f3a7b3fe13b3a' }, index.h("div", { key: '5f733cc2b6a745712e246479c59b8aa3daf11312' }, index.h("smoothly-display", { key: '1998b9c2061fa468aa9fffe4d733a8a683baae05', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: '159344fc77844facc8960a4f71a99813623a7763' }, index.h("smoothly-display", { key: 'd0f14a4f05e1b9353b9a0b389c17e3fbd7537b1b', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: 'cc65ac80578b939be2d3802fd3a5ded8fbf5b384' }, index.h("smoothly-display", { key: '489a7d80e18f1bb9d26eb8e807467f0cd8e0e1dc', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: 'a7d5607906b992f698a00d293872dd5cfc65ad42' }, index.h("smoothly-display", { key: 'b868bb9a2ce5b8b0bab62e4ab90f5ed8172b2dc1', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: 'bf53f2aae5ab5cdb6f7d98aba73a9e382fb98bd6' }, index.h("smoothly-display", { key: 'd27e664c4d0007dccfae976a13b3c3e202d7052b', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: '7e7ab059fe4ce79836b9b3c63a212e5ab9e4b36c' }, index.h("smoothly-display", { key: '388670fcb5c8371244c4112d0cf5f0050b59b134', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: 'e34c143b748072810cec75427ee497bfa25f92d7' }, index.h("smoothly-display", { key: 'bc74a20668e2b2b8e5561ebcd79fcff63c7886d7', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: '04d7d7e6d8695b50afd0c80d7b8123d22a96a0a0' }, "text"), index.h("dd", { key: '0a51fa2990fa85c8154e2a14ad374252104d8658' }, index.h("smoothly-display", { key: '75b7cf9296c52cda27db01cc201b4417e2f19288', type: "text", value: "text" })), index.h("dt", { key: '3c9fa1e7b2eda3a838d779885ad48073a1e7ca78' }, "postal code"), index.h("dd", { key: 'adcfacf0c296667c4a98919fc64ff1b6823f253c' }, index.h("smoothly-display", { key: 'f35d166fc0ae74f26d9dab3ce217edf1e8df348e', type: "postal-code", value: "752 31" })), index.h("dt", { key: '5dd7df04105283e70182a8c24d69c7abc1632a0e' }, "password"), index.h("dd", { key: 'd785701c8d5e6ce9dddfe618b91f113b1cc47694' }, index.h("smoothly-display", { key: 'd9a04bc3d9c62eebf4b8fa192ee43544e25f48ec', type: "password", value: "password" })), index.h("dt", { key: '72a245580c0d67958d821918a64634089badf6e0' }, "email"), index.h("dd", { key: '4e2129c4690821e35017a025378a52a82d9c6e12' }, index.h("smoothly-display", { key: '6f60bb0a22b496b52f76d72c25f9c4959c275174', type: "email", value: "test@example.com" })), index.h("dt", { key: 'b47e6d91ac2ad5839eff3f2ed72793406c447381' }, "price"), index.h("dd", { key: '5ed6dc4d1894989f8c59e85a9d6b3474b1838d46' }, index.h("smoothly-display", { key: '88d50f738cc333ee0284011ded0e5bc2eb90eb01', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '52b377e012d006448361e4190e85238eab82f425' }, "price without decimals"), index.h("dd", { key: '2d070cde97c125943423c28dd37a1bec7f1bf521' }, index.h("smoothly-display", { key: 'a63703e7aa73188db4b78d2378f2e30d491b35d7', type: "price", value: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: '10348b35a582998ee6107a2b5c55a589e0d8c66d' }, "price with decimals if they are set, otherwise no decimal"), index.h("dd", { key: 'da178ce35a352086c815f4cfac4096e34abbaef7' }, index.h("smoothly-display", { key: '08b7c0ba00f0b9b57d1ea8cc4b537bf6b632c2b0', type: "price", value: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: 'd7db59b325e85da3458ac99916b9bcf67ea567ff' }, "price with decimals"), index.h("dd", { key: '526c59b42c339389a0839a0ee96299d184850d2c' }, index.h("smoothly-display", { key: '2d7ebb7450b5eb08ee6ff7ada84034db4cfb06ab', type: "price", value: 200.2, currency: "SEK" })), index.h("dt", { key: '0417d708b6db96a1a3d08ccb552dc3704383f498' }, "percent"), index.h("dd", { key: '8c35ad31827aeddb6b205a7009e9987d317a813c' }, index.h("smoothly-display", { key: 'ebd4dd2565a20e48d31724b44d11b5cb44ae5277', type: "percent", value: "42" })), index.h("dt", { key: '65a23b48dbed3e8e7b50725148acd17891e19ddd' }, "phone"), index.h("dd", { key: '515ed149215811c8434f340256f8b4d331763db9' }, index.h("smoothly-display", { key: '6b7422b4b8387e74ef38aba7e8567f11b263cf9a', type: "phone", value: "0101881108" })), index.h("dt", { key: 'c1fe3e553de1313a579833275f43246d0673f812' }, "card number"), index.h("dd", { key: '6078440f5880b8442e388517f42660362841db2a' }, index.h("smoothly-display", { key: '6eb5a018d0d6f7f8458955369481294408d4fdf4', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '4ac0a352835d49083a89465d7fea27f951d2c4ac' }, "card expires"), index.h("dd", { key: 'db0cbb3b0795b19ffbf184da0dd2625eb8fb8918' }, index.h("smoothly-display", { key: 'd9ee4dc173460f0952d77053d12c68fce7feddc6', type: "card-expires", value: "7/22" })), index.h("dt", { key: '515cacce3dca652dfba9bf5528211576231495e5' }, "card csc"), index.h("dd", { key: '9f6c2d8490963f09828993d42ee16b9ffc5e0d0f' }, index.h("smoothly-display", { key: '1afda51b0213c77cf3b353bade47671790475112', type: "card-csc", value: "987" })), index.h("dt", { key: 'e7204fbb88672bf46f9551d7cf50e750cc8bbb38' }, "date"), index.h("dd", { key: '34fcebf482a696d179efbccc0708b8e71e8726d1' }, index.h("smoothly-display", { key: 'a55391a66ccc1cf033a2519fdf3b75c2510cb11f', type: "date", value: "2022-07-07" })), index.h("dt", { key: '4a818e58e65af6b0b27d090fb53909f4030a0442' }, "date time"), index.h("dd", { key: '18874fbe62d3f0d4758fbcb3ea56c28698285c23' }, index.h("smoothly-display", { key: '137a6be8368b02ec204b5baa82bf455f69a2fded', type: "date-time", format: {
+            index.h("main", { key: '21fb2b79f1e444d11b25150a336ce64e74f94386' }, index.h("fieldset", { key: '8b8ef87a351e4cb8754f44f74ad31185db62b0cb' }, index.h("h2", { key: 'e466ccf59ad1f4e2a41c8dd1b1d85da6b37c8f95' }, "Smoothly display"), index.h("dl", { key: 'acb593cb9a73566cc3defcc55eede3a7710a42b0' }, index.h("dt", { key: '9ccdcb7f5e3f55ea39d78b8ed6e75edb5f4a4c96' }, "Duration"), index.h("dd", { key: 'b7c93ccc874874faabe5e313ba204795a19adfc0' }, index.h("div", { key: 'd6e3d99849191e6d8effae216348bd634a4114b2' }, index.h("div", { key: 'bb64f8e9518218a499d0e52b5df759b31093e0e0' }, index.h("smoothly-display", { key: '151b7ca20847a1e41701d3c93ad780a222f990fb', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: '72035e5cab01fd9a06d2782ba1255c2f86cbfdac' }, index.h("smoothly-display", { key: '0f4723aac6e41aa4a7e29b0456e4661066b28985', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: '1346fe1098e87dab09ae4268fab19f7eb18cd949' }, index.h("smoothly-display", { key: '5e70c627fe2dc9e1d65cfec40fa63a36d419466f', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: '24beed45ab0c2cb2703d97ddecb72b767f19d989' }, index.h("smoothly-display", { key: 'a57ee2a431537bffe6d8a630c2466e342a10f089', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: '44f65151109d00905e996e9205d71588ecabaea3' }, index.h("smoothly-display", { key: '5c0a01aca2d99cb82c66701d4c7d7de26043d987', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: '18cbc082f3d8f71f3ba6c6b7eb3a977b13d45268' }, index.h("smoothly-display", { key: 'a5bbf74186f51ce22f6eceb8396f215e7b0fc297', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: '1d2361cec57f38f40636641702f92100ebcd9122' }, index.h("smoothly-display", { key: 'a561ef92252a23064e7f7f7ffca3314a099329f2', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: 'ab7b23c9c2ad57ceb6a2ce75d8f0a4e93439e610' }, "text"), index.h("dd", { key: '8913158f3f3a5c4012ae94a3f1b38442fcb5aff2' }, index.h("smoothly-display", { key: '13d54b85dcf178d480c8c834c79c47231c785aa6', type: "text", value: "text" })), index.h("dt", { key: 'e3c43484f7cc87eb9bf67d6474bc9552dbd643bd' }, "postal code"), index.h("dd", { key: '0df2d428a7847b3ddf436d2e9db2fe367f41df80' }, index.h("smoothly-display", { key: '8550c5ee46cc4e0c1bb956b2dbf8a62c452aee30', type: "postal-code", value: "752 31" })), index.h("dt", { key: '1b06810c083306938ce8d25b5582a15cb066b085' }, "password"), index.h("dd", { key: 'b078c56b5a9d62e23b9d9b8ab6cd4d10798aa726' }, index.h("smoothly-display", { key: '773204df4456963fbcc5cc26416c40f8111e43d0', type: "password", value: "password" })), index.h("dt", { key: '38c93b73ae2830ef7995f9c6d93d62c1ba019680' }, "email"), index.h("dd", { key: '3f822f17d630c3388155a66e97e0bbb6fb7c3951' }, index.h("smoothly-display", { key: 'f31678fe3df819cdc266876c54a1d810e9fbf9e8', type: "email", value: "test@example.com" })), index.h("dt", { key: '9abf27aa6b2a6ffc035f14adc1204e620d8061ce' }, "price"), index.h("dd", { key: '15a0e06145971b2c14abb0250cbb7edcea81483b' }, index.h("smoothly-display", { key: '256922cd4e8c86be1707c1ddc9d9e8550fe7b5b3', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '84e0e9b898c72e2390a5b50cc2445a988a845a60' }, "price without decimals"), index.h("dd", { key: '3979f33c43640eb1376a533755cc39ac1a8c17b3' }, index.h("smoothly-display", { key: '04afd00d763536c5b1faa310074726f346914114', type: "price", value: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: '28c9ddc91d2ceb52a7bd60577570a0ece1ef1704' }, "price with decimals if they are set, otherwise no decimal"), index.h("dd", { key: 'e2ae34d84db38387ee3d81b474a606b7b3d40742' }, index.h("smoothly-display", { key: 'a8c053147e77e15ba5a6a7d372d24d0948d67bd0', type: "price", value: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: 'a42173872dac85db0f822c70e69baef5a244b4ef' }, "price with decimals"), index.h("dd", { key: '4034e3ca1bde5f9ba3f5cdca710d3757b7e12955' }, index.h("smoothly-display", { key: '0a07c33c6bf9b14aeafcbbff3e9f6d2817eb7230', type: "price", value: 200.2, currency: "SEK" })), index.h("dt", { key: '701bee2385a94b38bf90f58b3dc4fb65458188e6' }, "percent"), index.h("dd", { key: 'e1b856b2059122d2c80e5c242bb95429bca4caeb' }, index.h("smoothly-display", { key: '2682ebd78e2753fc2b1d558e00cf10eec0449c83', type: "percent", value: "42" })), index.h("dt", { key: 'd6504232e42d7bd6fb239b24f8065677bfe7f5ce' }, "phone"), index.h("dd", { key: '3b2cf4c53cf6b6fba8687ab994d6ded634d60046' }, index.h("smoothly-display", { key: '1cb2c5406dfbec1db57c05be5f59f828b005cb17', type: "phone", value: "0101881108" })), index.h("dt", { key: '94ee7083b2d5eef22e7ff0e15c460f6fd863db9e' }, "card number"), index.h("dd", { key: '97954e5e4d12f6be04096006d51ea6c9ac3e7fa3' }, index.h("smoothly-display", { key: '027c2522274e6e23f6cda08da141b24432671837', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '77cda0ed14b7a75ef02966d1b29bf94b6d5fe6ef' }, "card expires"), index.h("dd", { key: 'e2c1cbe5353efc0bea8435181499188bcdf8d051' }, index.h("smoothly-display", { key: '4aab5bf769fb89cadd2bf3fbb279a219e668c85d', type: "card-expires", value: "7/22" })), index.h("dt", { key: 'ecb64258605dbce40b3b6b8f51ec1922046ecd44' }, "card csc"), index.h("dd", { key: 'b37ef76653942f81a110df017f26c4c5699f32ad' }, index.h("smoothly-display", { key: 'e9cb2787e18d88f2cde4559c90f8ad9d45889d51', type: "card-csc", value: "987" })), index.h("dt", { key: 'f028f598bc51de708361494c66264047b8ab777e' }, "date"), index.h("dd", { key: '8900bb90156489b4cc9d22c663c9a2f5f80b1062' }, index.h("smoothly-display", { key: 'c31d4cf0631bf5495c9286bcc87a37c056ac6308', type: "date", value: "2022-07-07" })), index.h("dt", { key: 'a9df319e34d74e6ec9ef36e9f9128cda2df9043b' }, "date time"), index.h("dd", { key: 'f57d07c19738d28a60e0138cc827218a0f1ef7af' }, index.h("smoothly-display", { key: '663d9cfa4235e90f6a8231b9c7c7d6d0bd4beb4b', type: "date-time", format: {
                     year: "numeric",
                     month: "short",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '81829d196bd5886e41d896369a9c20a0e9ac6475' }, index.h("smoothly-display", { key: '69d3bce166d11def43480659575c51c171c22a45', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '664a74d91f65917bff18734fd100347533fb9b4e' }, index.h("smoothly-display", { key: '456469ffdc5ccdea880ad86f92b9a29c183dcdba', type: "date-time", format: {
                     year: "2-digit",
                     month: "long",
                     day: "2-digit",
                     hour: "2-digit",
                     minute: "2-digit",
                     second: "2-digit",
-                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '9f8913ccf6eb9aa0320ccc96c5f63d1368e03cb5' }, index.h("smoothly-display", { key: '440dec80b84e484440f55e568d018a46ebdcc199', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '6714499c457900dee5e2cd5bedbba3ef7083b749' }, index.h("smoothly-display", { key: '4fea3c22e9402170205a5019a17850576fbb06f7', type: "date-time", format: {
                     year: "numeric",
                     month: "2-digit",
                     day: "2-digit",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: 'ca5f7e206cf42b4bee3e885c8dd6fb5ce1fb414e' }, index.h("smoothly-display", { key: 'c2258980a847c8d2ac8c77a47e7a5772bce08ec8', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '79c14cffa0634ab2af6fd3ba014d081e28e38319' }, index.h("smoothly-display", { key: 'd5559326f39e2f5bc8311135176b5eedb4ed2870', type: "date-time", format: {
                     year: "numeric",
                     month: "numeric",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '8b99f1ea1299e7001053e7b9deece7e6a15e2542' }, index.h("smoothly-display", { key: '89c93cace88996c65faa0791cc0ffd7a4e9e083a', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '570142486b7ab93ddd59d9f418a60d700c7817d5' }, index.h("smoothly-display", { key: '63dfcf83183fba060fceed447d4bcdd0c30eb5a9', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '4cc6f5ba3ddd1b339d5fb015de456abae54aab43' }, index.h("smoothly-display", { key: '6c2f659af73220903642fd0807d1151f204ba837', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '419b427db910e49fd541de31e95c7dd3dbd2811e' }, index.h("smoothly-display", { key: 'ebd569c36dd017c14523ee1efc8925c622f7747e', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '6df381d322a21b50ad70fc41fee8800721ca0889' }, index.h("smoothly-display", { key: '1ace79e51e8285e5124158f567a73508833bdcb4', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: 'dbdc1a002cab9e951678621ad394c1237e91f3f1' }, index.h("smoothly-display", { key: '529e5cd2b7f4bde6b06dfb51832cb4cb498c3447', type: "date-time", format: {
                     year: "2-digit",
                     month: "numeric",
                     day: "numeric",
@@ -3860,21 +3860,21 @@ const SmoothlyDisplayDemo = class {
                     minute: "2-digit",
                     second: "2-digit",
                     timeZone: "Europe/Stockholm",
-                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: 'cb48cb11e0a8400291f08caa821b53cb443f8f12' }, "Display JSON"), index.h("dd", { key: '5f88f3eedffc8993d747898f9bf5dc9da06dbfb1' }, index.h("smoothly-display-demo-json", { key: '695a426dd6523dbac16fe830167f21e095499760' })))), index.h("h2", { key: 'e847b40c54e9c2343c3c572802732594110a3520' }, "With labels"), index.h("dd", { key: 'fa442318099a443bbc08f8b989993184afe12f57' }, index.h("smoothly-display", { key: 'e0b37f5c62a577c16805b7b3793a397ade55944e', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: 'e17917bd5c0ba53f198a218ac5377feb64a3219c', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: 'd8c0252e5b772d1328adcaff951d2394b4da4fdf', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: '3a020e58a1fbac08de20efa83040a6d2fff73d40', label: "Logs", type: "json", value: [
+                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: 'd7b788672f67fbf1d0528f604ef1e77673d2e69f' }, "Display JSON"), index.h("dd", { key: '87a892e6845db8618efd46d571e8a90f30ce1e6d' }, index.h("smoothly-display-demo-json", { key: 'f66473975507a01af105282f01f640c1baaa88ae' })))), index.h("h2", { key: '084965cafe76cf10bac4804c82ea460c0960f7da' }, "With labels"), index.h("dd", { key: '395e03618fc767dcca6b12386286a97c83882686' }, index.h("smoothly-display", { key: 'd5f90cfeaad01ea046ed543f54e70b089c91463d', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: '3333769695dd0b7e0d54fd729f2b3b59dc34737c', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: '57070580aa9096b1d273bb7cb51a6ac82e22f9ca', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: 'b4af7875200f61caf1c51f969c61362af7b3d402', label: "Logs", type: "json", value: [
                     { type: "trace", message: "Hello" },
                     { type: "error", message: "Oh no!" },
-                ] })), index.h("fieldset", { key: '08d6ad86a6d79ff873156f7cb4d84360d8e92f38' }, index.h("h2", { key: '91450decd67bdc21c204adaa7f95d9d0d2f64107' }, "Test of different kinds of notifier"), index.h("button", { key: 'ded2972233a8361b91b75c8386ca3f3299735959', onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: '833fe76b9edaa48c4db0aed015bfd310936bd01a', onClick: () => this.noticeWarning(Notice.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: '5f74587f60215db920ea6a0b9a01702642e61745', onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: 'ed76217b6f2a5f84ecc04a04ebc13c1441958b39', onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { key: '7f7b974a4ed5528d8d226d380233e219203553bc', onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", { key: '287c9ce5ae199417e9883b2d10c7f74e755ec0f1' }, index.h("h2", { key: '14379ccb8cc02c5041a11ba85b15785a4fd87711' }, "Smoothly spinner"), index.h("div", { key: '71d53a5d93355f097f377cf0665c299fe85746e8', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: '90c1716af136d85de144eba53912ca479b66fc5b', size: "large", style: {
+                ] })), index.h("fieldset", { key: '411e5133a5c4bf2d36ad1c6b00cf549e769d7665' }, index.h("h2", { key: '536dd0526204b6d389c670c576f32bca45c3630e' }, "Test of different kinds of notifier"), index.h("button", { key: '2faebb0bcea77262e0a18b5e8a375bef7b5de11b', onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: '21181f519f1bfe818fcc084596be2317fe541968', onClick: () => this.noticeWarning(Notice.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: 'c67c4056842c761165115333bb079165609208f1', onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: 'a42b0b8a77b40fa6ddea705306634489abaec09b', onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { key: 'd651ea26abb9ce9dd336b45ded8849fc4a00c56a', onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", { key: '91b1d46f457a5261ddff3a1bc67db822190f0591' }, index.h("h2", { key: 'd46c2765def7f55a8bd225dbd9f1c5379029878b' }, "Smoothly spinner"), index.h("div", { key: 'efb40135dbbbd78e6ba4c9927ff212178a3da9eb', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: '70616018eb896ff0bd28744b504fec5c416f1b45', size: "large", style: {
                     "--spinner-background": "200,255,200",
                     "--spinner-background-opacity": "0.2",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '00116592b1fedd953169ba090ae1eabe66d0004c', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: 'f44f16aad9e875a4f6c6cb52e19d63c3e18bc54e', size: "medium" })), index.h("div", { key: '276cc0c4292e553e316bbb2c6571322254d02fec', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: '29ad8c5f2e641f534e47926d9a349b95a6ed57fa', size: "small" })), index.h("div", { key: '3b7ae3e4d2825d284f1035ad48cbe40ddf6e0a58' }, "Icon sized spinner on button", Scrollable.Color.types.map(color => (index.h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
+                } })), index.h("div", { key: '585aff079f29aaeb3319268ebcf3857bec165942', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: 'd46336b4e6fe98d2d2958c3047747b07d7999fe8', size: "medium" })), index.h("div", { key: '47db1735399b1b59e582b94229c4fdc51389b51d', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: '8292ad153260c3cd3d26ad597effa2356e913ca9', size: "small" })), index.h("div", { key: '45ed5bea68185714286757dfa56d14b5987c3a19' }, "Icon sized spinner on button", Scrollable.Color.types.map(color => (index.h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
                     this.downloadingSpinner = true;
                     setTimeout(() => (this.downloadingSpinner = false), 3000);
-                } }, !this.downloadingSpinner && index.h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (index.h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), index.h("h3", { key: '843b2f5e627f47b215f5eee7d3d05243a1c97d60' }, "Spinner with overlay"), index.h("div", { key: '4cafd9c2da4f233b64ba69a6af18327f4964803d', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: 'a6900ad94f8782fe773be6f3855a064c5380f655', overlay: true, size: "large", style: {
+                } }, !this.downloadingSpinner && index.h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (index.h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), index.h("h3", { key: 'd793d083180c7ce2cdaed3edc8d9b3aa88b827b3' }, "Spinner with overlay"), index.h("div", { key: '4e84a2f337c94398e86eab3dbfb055906e6e3640', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: 'f82d069b8d3ebf5f9a13e53e1ad7c60b19d21778', overlay: true, size: "large", style: {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: 'd233b7953c8566ab93037535154b411e6bfb1ad7', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: '402db5d2b36be4c7093b63103301a1b46e40724e', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '8a51fcf96de1038ff02ca71935b3078a72e9079f', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '11aaae43faab5dae96f5918793d6d916e00d702c', overlay: true, size: "small" }))), index.h("fieldset", { key: '2ff86804c0ada8b13a4170c50f373797318be0ba' }, index.h("h2", { key: 'd39356dc6bb76b9657be182941851cc34ffb2917' }, "Smoothly summary"), index.h("smoothly-summary", { key: '145d770dbf9fc62a7131ecce8a840394f2c6c928' }, index.h("p", { key: 'b744a54d201d6d8187c5581bc5ce771210960d23', slot: "summary" }, "Some title"), index.h("p", { key: 'c3e00a06d0f17788dc2aaf381ee0f01e3bc765c4', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'd1e49a025fb7bfc33c6aa9c086cfc21dba5997d8', size: "large" }, index.h("p", { key: '81e1f3ea4d8ea14e8f98aacc7afd7503f54dd88d', slot: "summary" }, "Some title"), index.h("p", { key: '0d6a0d2031fc8c22844237d0a45f25b77388d9a6', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '0a931fcf97d133c2611c2260fd677598c30b5c21', color: "danger", fill: "clear" }, index.h("div", { key: '1bfaeb10d07c0bd6b5891d4487b3c9c052d6fc27', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: '0496d3e725519d1f5579164b904c8cafce3d4188' }, "Person"), index.h("smoothly-icon", { key: 'd5764dbbd79f22646223e988895996b53693ae3a', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '6041f619692580c37081547d082a99d611738ee2', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '0b5d1771123017cfe0aef1c03116e42eeb677f6f', color: "danger", fill: "clear", open: true }, index.h("p", { key: '41b5c81feda26d37aab0d42093de072484c53045', slot: "summary" }, "Some other title"), index.h("p", { key: 'cfeffe7c6a6fcc9d321af580eb7a550f23ab1e52', slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")), index.h("h2", { key: 'd8997ff0e0fa943190e3e2df2af01ea62e9f3a04' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: '5535ae27abc079bb5e5d95945daa228bf38a9ac0', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
+                } })), index.h("div", { key: 'd7403378fc9b34cef1a918ef9cc5ea7f27e81723', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: 'e93ef55fe61481db7105153ece6ff80c498b8fad', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: 'c93c240c27abe1b38914b1af37eb374715038fd1', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '7519fb4f9bfaf9e4f3792833db59d9617d64240c', overlay: true, size: "small" }))), index.h("fieldset", { key: '94281d9137b942eb9d25b110d923608d66f4151f' }, index.h("h2", { key: '12c705c2f5cdaf7a2dbcf4f71067aa1563156b53' }, "Smoothly summary"), index.h("smoothly-summary", { key: 'a94bc08481df51edee165c5f3ff4b0b6b524100b' }, index.h("p", { key: '7697067b2742d7527b91c1e57dc252d5bc047b95', slot: "summary" }, "Some title"), index.h("p", { key: 'bf1b7cabdb250a6eb6401ea6a4f6f4fe56d4be95', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '4a59074a291f48dbc2079eba28859176e139d145', size: "large" }, index.h("p", { key: '29d101a62f8928b7226b4539fb133d6fb45582f0', slot: "summary" }, "Some title"), index.h("p", { key: '24ca49ed27372ecf26904fe72e944c3f561b47f6', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: 'd3b8dd90214c6adcaeb5cfee6d36d805c83c7322', color: "danger", fill: "clear" }, index.h("div", { key: '0db1d4d0d722605b00aa5a4fdbce3a701287ce8e', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: '2742c8dfb4e5ad70f433ed708424c64da93130fd' }, "Person"), index.h("smoothly-icon", { key: '84059e999cea916c17ccbb87acab606d3b23e15b', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '67818f7de2e59494d452d89a89b2437a4f66cf72', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '0f80219dc807486f83f6cae09e2240892608e00c', color: "danger", fill: "clear", open: true }, index.h("p", { key: 'e8cdfc372f68dbd7d1d04abe20e3744bfec51820', slot: "summary" }, "Some other title"), index.h("p", { key: 'a7a9ca8f540ce7847c51f788617e999df999dc1c', slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")), index.h("h2", { key: '3533e4642ed7300f49ac9d7aeaad55d40b1c598d' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: '82e99f058b45ee8eaaeeb5d855856ad3fb1d8f61', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
         ];
     }
 };
@@ -3901,7 +3901,7 @@ const SmoothlyDisplayDemoJson = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '67b8c263dfe7d72e1072ba3d630ea74f0a05788a' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (index.h(index.Host, { key: 'ea329526023da3b7329d8b7bd1cb34316542fd93' }, [0, 1, 3, undefined].map(colapseDepth => [
             index.h("div", null, "collapseDepth=", colapseDepth !== null && colapseDepth !== void 0 ? colapseDepth : "undefined"),
             index.h("div", null, index.h("smoothly-display", { type: "json", value: json, collapseDepth: colapseDepth })),
         ])));
@@ -3936,7 +3936,7 @@ const SmoothlyDisplayJson = class {
         this.collapseDepth = undefined;
     }
     render() {
-        return index.h(JsonValue, { key: '84df0d521b30c3c44e38baee43e6c76334875ae8', value: this.value, collapseDepth: this.collapseDepth });
+        return index.h(JsonValue, { key: 'a817223386521cc073aeab087efc636977b65e0a', value: this.value, collapseDepth: this.collapseDepth });
     }
 };
 SmoothlyDisplayJson.style = SmoothlyDisplayJsonStyle0;
@@ -3970,9 +3970,9 @@ const SmoothlyDisplayJsonObject = class {
     }
     render() {
         const nextCollapseDepth = typeof this.collapseDepth == "number" ? Math.max(this.collapseDepth - 1, 0) : undefined;
-        return (index.h(index.Host, { key: '096aba61e52c82b8fbddfa73b76ad5378898997b', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '23b082be0c70e647b622f876ce92a91aebcdfcd5', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: '851efa46e336cdcd39eb20b08106b37cf3189c53', class: "content" }, Array.isArray(this.value)
+        return (index.h(index.Host, { key: '2878d58011daeccd9d1e3383f1081883f08ec598', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '8e07de6271113ae7c223c44a2193162071cf9eaf', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: 'c850ca12c687165a5f752a1e3315a0d7bd947971', class: "content" }, Array.isArray(this.value)
             ? this.value.map(v => (index.h("div", { class: "indent" }, index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))
-            : Object.entries(this.value).map(([k, v]) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))), index.h("span", { key: '51e3c086f6abc497cb759819eeee405d696769c0' }, this.closeBracket)));
+            : Object.entries(this.value).map(([k, v]) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))), index.h("span", { key: '462371f02f42cbc4787b7a7a4eb0ff0b4598d326' }, this.closeBracket)));
     }
 };
 SmoothlyDisplayJsonObject.style = SmoothlyDisplayJsonObjectStyle0;
@@ -3986,7 +3986,7 @@ const SmoothlyDisplayJsonPrimitive = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '7fb3f1eae3a5a4e958aff79b218347ad089810cd', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return index.h(index.Host, { key: '171404fee1a7bdd8ecd7beb0032c136e4e2652d8', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
 };
 SmoothlyDisplayJsonPrimitive.style = SmoothlyDisplayJsonPrimitiveStyle0;
@@ -4000,7 +4000,7 @@ const SmoothlyDisplayJsonRecordKey = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: 'e7e589428127bdfdc3a226523417e256788003f9' }, "\"", this.value, "\"");
+        return index.h(index.Host, { key: '525fa15610e18dc3073cc4c28b1acf559a4c4a8a' }, "\"", this.value, "\"");
     }
 };
 SmoothlyDisplayJsonRecordKey.style = SmoothlyDisplayJsonRecordKeyStyle0;
@@ -7029,11 +7029,11 @@ const SmoothlyFilter = class {
         this.filters.forEach(update => update(this.criteria));
     }
     render() {
-        return (index.h(index.Host, { key: '458866acba458b727749aab418c5d07b009f0886' }, index.h("slot", { key: '6deb9fb89f67c8adc89c88b67762b3200953ed29', name: "bar" }), index.h("smoothly-filter-field", { key: 'f3c3c18a6385b7abfeb82ec2320312f0a13f439e', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '5e7586e48cd66190af3d48ab013c1af4ff006acf', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
+        return (index.h(index.Host, { key: 'd0758e4b4003774f8d64ea98dd189c9d1bc4dfb7' }, index.h("slot", { key: '326730f0a2cdc4efe92f75be74f50e9d0afc2337', name: "bar" }), index.h("smoothly-filter-field", { key: '771a0da9c7c28810fb8b9c3eae4e0b2d6a8d629a', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: 'f0699e512b801b2a82a4b6a75764455c4f6ff970', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
                 this.clear();
-            } })), index.h("div", { key: '742d3c1ab86806412d5ab95bf19249feffb2cd35', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'e8837329167c794efbcbb255ca9c50def503ef3f', name: "detail" })), index.h("smoothly-icon", { key: '0ebf30bb6797347fa77dec156f48c4b0a9d22e89', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
+            } })), index.h("div", { key: '4ed85c23a785b8f5a96d97acee1ec4bcdf11ccf1', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'd41a7a8ed289625aa1f9de25b19a39cda75b6c29', name: "detail" })), index.h("smoothly-icon", { key: '534e48505b05d18bdbbc6d5817ef4f10d8c9f045', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
                 this.expanded = !this.expanded;
-            } }), index.h("div", { key: '31f476a863f44affca3c643529331e769f9658a0', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
+            } }), index.h("div", { key: '52289b92ffc7b5f53e287c5c875ec3605ee307a2', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
     }
 };
 SmoothlyFilter.style = SmoothlyFilterStyle0;
@@ -7060,7 +7060,7 @@ const SmoothlyFilterField = class {
         this.value = event.detail.filter;
     }
     render() {
-        return (index.h(index.Host, { key: '101fba7d3f376e7b556425daf64c5ac8932fefbc' }, index.h("smoothly-input", { key: 'b0652849fec0e9748b289cc5b6a1dd556906fbba', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyKeydown: e => {
+        return (index.h(index.Host, { key: '247786bb8724ddcd5344cc02bb4f36e13737e43e' }, index.h("smoothly-input", { key: '3b8088c08cf3a7671b8b9b33e48ac133b7d4fe14', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyKeydown: e => {
                 e.stopPropagation();
                 e.detail.key == "Enter" && this.filterFieldEmit();
             }, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => {
@@ -7140,7 +7140,7 @@ const SmoothlyFilterInput = class {
             (rest.length == 0 || (!!criteria.criteria && this.findInstanceOf(criteria.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-input", { key: '90646ba0c33a81236352bc130c9139d652473b64', name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, this.label, index.h("slot", { key: 'f6ba39d46857fb3ac409c9ae4cc404b0dca9a7bd' })));
+        return (index.h("smoothly-input", { key: 'b9c0bad8ca30d5e45e9686b52f8536cf8b0f3a29', name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, this.label, index.h("slot", { key: 'b6bda14b39abfb507ce5a83f0cf95efb218d7c36' })));
     }
 };
 SmoothlyFilterInput.style = SmoothlyFilterInputStyle0;
@@ -7249,7 +7249,7 @@ const SmoothlyFilterSelect = class {
         return result && this.property.split(".").reduceRight((r, e) => property(e, r), result);
     }
     render() {
-        return (index.h("smoothly-input-select", { key: '7880e87f45d9227a6663854c8eb427ac39f0bce8', ref: e => (this.selectElement = e), name: this.property, looks: this.looks, multiple: this.multiple, menuHeight: this.menuHeight, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyItemSelect: e => e.stopPropagation(), onSmoothlyInput: e => this.selectHandler(e) }, this.label && (index.h("span", { key: 'b1ec133090f874ce79645ba2e82718d78590282c', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '3b2dd729d7e0a9fc272d7bdaeb5ae35916afdac6', name: "items" })));
+        return (index.h("smoothly-input-select", { key: '9107d3913b3e08208538db9de5d27e9b8107c816', ref: e => (this.selectElement = e), name: this.property, looks: this.looks, multiple: this.multiple, menuHeight: this.menuHeight, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyItemSelect: e => e.stopPropagation(), onSmoothlyInput: e => this.selectHandler(e) }, this.label && (index.h("span", { key: '63b6cea56be4665c27dcb4822bd55700b1e62a7e', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '30843b98d8e72b9eb258dfc6f12e58e5b49394ce', name: "items" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -7333,7 +7333,7 @@ const SmoothlyFilterToggle = class {
             (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-icon", { key: '2fc0a0d6ad73406cacdb79964618ec4a97f7cfdf', fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
+        return (index.h("smoothly-icon", { key: '087ba0fc1cce503a6cf10665e89ca279075fcee7', fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
     }
 };
 SmoothlyFilterToggle.style = SmoothlyFilterToggleStyle0;
@@ -8348,7 +8348,7 @@ const SmoothlyForm = class {
         await Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue()));
     }
     render() {
-        return (index.h(index.Host, { key: '2a470af3268fe4b09126d86c2f1c01e1b6ac2ab2' }, index.h("smoothly-spinner", { key: 'e296f07867de64502324dc2ec4e50d8161ba8128', overlay: true, hidden: !this.processing }), index.h("form", { key: '4714f583928de712a0825df741f8cc5e308ad61c', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '540893b763c751596966cd0004c6f835fb0bf707' }, index.h("slot", { key: '09e81fe12b2e9058a3a14321f4e25ac79dab35ae' })), index.h("div", { key: '1915f8ffba845ed1d6b66404c78c5e1e6f3d87fd' }, index.h("slot", { key: 'a0143470fa52ed16cafe413fc951c2c26c9419ec', name: "clear" }), index.h("slot", { key: 'd941855ec112d4854c1be75545101a6a8e00447e', name: "edit" }), index.h("slot", { key: 'e53b2069d3f5b6a2a3c395727f057fccf510ff3e', name: "reset" }), index.h("slot", { key: 'b0bdd67438097409ce9c9ec927cbadbd86959bef', name: "delete" }), index.h("slot", { key: '5897b076b5b2ad467397ee8a820397f8ebaacbd7', name: "submit" })))));
+        return (index.h(index.Host, { key: '544cb7ab781d344afba275f3e363a7ca5e615c2e' }, index.h("smoothly-spinner", { key: 'ffc3e23544446c744aec87941e1f7e137e71d83e', overlay: true, hidden: !this.processing }), index.h("form", { key: 'ee0a5b140641775c1d55c961db46e3e630b666a8', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: 'dc7509953049315094ba44369d7c56ee22c2e511' }, index.h("slot", { key: 'b510be19fca9b78c6ecb3b84648f75a21fb40d97' })), index.h("div", { key: '985fd0b35f3664135c09bdd03f6156399a4d3d58' }, index.h("slot", { key: '014fd2d642d29332f9fc28298b0cdbf2d5b7956a', name: "clear" }), index.h("slot", { key: '55d2fd1d90b303f56e9578704780fc78b9bc9e17', name: "edit" }), index.h("slot", { key: '2af69ee44488e47a52cf7dff75138c16c1883ef8', name: "reset" }), index.h("slot", { key: 'f35a976b66dada2670d5a280d310aac518eedc75', name: "delete" }), index.h("slot", { key: '90b1dfac51e438c663d93218fb114a491495864f', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8366,7 +8366,7 @@ const SmoothlyFormDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '8e9b91eba4771356a02e26aa874149e9aec1e49e' }, index.h("div", { key: '322a7b8c4053c5307e09aedc034aec3bd58cfa40' }, index.h("smoothly-form-demo-all", { key: '36cff0fce86410559185639407888e064aa7f6f5' }), index.h("smoothly-form-demo-pet", { key: '8ac19a250eae3f03b36b7eefa4bb0b8fcef9bc67' }), index.h("smoothly-form-demo-card", { key: 'e92a4974e434fc122a4d6a9036031c19eb8fbdce' }), index.h("smoothly-form-demo-login", { key: '0551748193b700acbc0ef91afe2e330ac67c1ec6' }), index.h("smoothly-form-demo-prices", { key: '98e1cd3159817b7943b0fcab4b8e455527679aef' }), index.h("smoothly-form-demo-typed", { key: 'ee3a5a705e8295e6f030201876e8e9e6e0b17ce5' }), index.h("smoothly-form-demo-transparent", { key: 'f245050d3f3838922c51ab02a6fc7c51d030be49' }), index.h("smoothly-form-demo-date", { key: 'b9dab7e216a735a7d4a71e63e9dcdcbb261d35b9' }), index.h("smoothly-form-demo-schedule", { key: '5f7073b2b7d9ec29a787d1c47a54261d7a312735' }), index.h("smoothly-form-demo-date-range", { key: '6d0c60c7aac3037d3d697e1440ce3643fd107298' }), index.h("smoothly-form-demo-controlled", { key: 'e307e69e96b98c85cd15f6e1e68facd7a86ebcb0' }))));
+        return (index.h(index.Host, { key: 'c5b442e2dc17139d030550d2595b2ce07c0c03ca' }, index.h("div", { key: '5a453eff769ea4cef9f474ae7bd22cfdae97e66d' }, index.h("smoothly-form-demo-all", { key: '1b771b6dbcdcf463b968518ee933bcf511adc25d' }), index.h("smoothly-form-demo-pet", { key: '9154d737dda44b49c7b1a4ddb3dfb7c2dc69bb4c' }), index.h("smoothly-form-demo-card", { key: 'b91fb0a14460ddf0074e55b4b31de8871ad41d47' }), index.h("smoothly-form-demo-login", { key: 'f0bc618e065739efda66c9eadb31d22785068e17' }), index.h("smoothly-form-demo-prices", { key: 'b9c08280b8cdb857ffbd5c443f5693e2b22a7cd5' }), index.h("smoothly-form-demo-typed", { key: 'e0a2cab7330a378e9aa8cec545f3aea804a0ff10' }), index.h("smoothly-form-demo-transparent", { key: '7cad7cf997da8d3cdfd40689a074fd746338eccc' }), index.h("smoothly-form-demo-date", { key: '1d8567528f1c8f3d5178b57e197b7818b7244dcf' }), index.h("smoothly-form-demo-schedule", { key: '0c96e9f297face51f234e8c377933468607d5ccd' }), index.h("smoothly-form-demo-date-range", { key: 'e1409719e74987f69cb66e689a88484f3a662ef8' }), index.h("smoothly-form-demo-controlled", { key: '09d09373a678c6754be06e7795870ad8344bfe55' }))));
     }
 };
 SmoothlyFormDemo.style = SmoothlyFormDemoStyle0;
@@ -8376,9 +8376,9 @@ const SmoothlyFormDemoAll = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '0385c6c02d1a129cae00d079094839f60b9e4d59' }, index.h("h2", { key: '9ab19de22f878f88a3f0f7dec246645f22621374' }, "All inputs"), index.h("smoothly-form", { key: '0afb15a06693181711b9002415e0729db1042c3a', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
+        return (index.h(index.Host, { key: '4aafdec8d02db081953d370ef8d76e2088bf1102' }, index.h("h2", { key: 'e8e4e41a8363fd24b1edc5a9e97a3b2c25858fe8' }, "All inputs"), index.h("smoothly-form", { key: '2c8e99228944bacb529312d309b10b9f3dba8e43', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
                 Object.entries(e.detail.value).forEach(([key, value]) => console.log(key, value));
-            } }, index.h("smoothly-input", { key: 'ee53cbde0c7bfe23cd594857fc835cdbc8997be8', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: 'e8dabfb02d84e6fef81d6a411f354cded4a13125', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '554eceb647a10c6449a6146a8d43e7642c7da09f', size: "icon", slot: "end" })), index.h("smoothly-input", { key: 'c225f9078d26f1814063e40fd0de1e3df43275cf', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '6eba87e2b65d2b8153415bd9bdca31dd0a230acc', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '661e2df9a57c25869211d817490083593bf4a7a6', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '4745c265ffa3c99361d95ea171d8775aa70aa906', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'aa8efcfd71159c207606f1b7f4006124647f4da4', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'b9003abf9da82573c37f4c863035518fe1bde187', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '756a1f483a05e675abd69b4f59a3596b873b373d', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '9696ab6161de5d76d8c7c1a880cbaf170a1fe981', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '0aef27d0a847e0871b35d31567f3ebc4f1cc39b1', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '6845e4016112205e5eca824be16ff117989e1c63', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'b4d7da0babc1128898c40f40d403b8319a916b0e', value: "1" }, "January"), index.h("smoothly-item", { key: '4d29813b606c9830ca2985ff183188dfde019552', value: "2" }, "February"), index.h("smoothly-item", { key: '891c359e70a28f486d13cc70d7e8302d974ffd44', value: "3" }, "March"), index.h("smoothly-item", { key: '9fc4b6a56010f4e56ea3bad24653fa3c1164db37', value: "4" }, "April"), index.h("smoothly-item", { key: 'c1fc515cb9bdbbe2b4fbb574b53a546d7eaa4de3', value: "5" }, "May"), index.h("smoothly-item", { key: 'c7a3cf81a4f8878a823a1b0ef80e0bc205a0382c', value: "6" }, "June"), index.h("smoothly-item", { key: 'b59a01fcca7308602d6b064741d53e234692a66d', value: "7" }, "July"), index.h("smoothly-item", { key: '480b0c43f48a9afd806736ef9db90c1335401138', value: "8" }, "August"), index.h("smoothly-item", { key: '622289d68d83608692fa991eda21e10cf377c425', value: "9" }, "September"), index.h("smoothly-item", { key: '3720fbaf17cc74d5f1f503167e4d7d954ab4719d', value: "10" }, "October"), index.h("smoothly-item", { key: '4805352a3e5800b1385ccfbe3d18bd11cf7f35b1', value: "11" }, "November"), index.h("smoothly-item", { key: '78b77bd55d5fdd9e386feb2775ab783db46d4dfc', value: "12" }, "December")), index.h("smoothly-input-select", { key: 'f49f1ed662791f05f0916a390025a73be1fb2538', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '734cd3e250cc78ba9e6f2e18e626574fbcf453b0', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'f7feaa7a33f71d80e723afc4a779742247fd8b66', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'c712dbf6b6ff8f067c19f8f23cf47ee3544f1348', value: "camera" }, index.h("smoothly-icon", { key: 'a8a9d32cc749a88c8e4455e3f3c81a492a7d7278', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: 'a60e0866e5e7cb6ff1c218fb56dd2c4b1df1935a', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '5655599fb6b1426a1c6e18843cda6dac48613c47', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: '8ad6d3fc94a13809380c2085ac7b594d627987f6', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '3eadfff18e15a71158da0e172d6615117e2f7508', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: '38fa8ab54b31e88279525a45e639fa83ba7623d2', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: '13e749bd9bb697cd65e2d308c3a1f430621bcf25', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: 'd7ce9434254e3c8fe95d316ff8ea0d733a21ed1a', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: 'cad73bed3fefb8ecfccf69a60af7d6eaecade27e', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '2b522b38ef71ba8bd5cc3677a88ee7ce14ed8a79', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: 'f6855448a3e5acca833a25e857a9081fe3b44a94', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '2ec12ef414b0faaf4ebd318108c18cc06d85b9a9', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '6e498f13b43e45472ab3ae1284061506bb6a3852', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '66c13d36dd68e936cec4964a6497d23cc4e34f12', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: 'ae92ab8da0139b9b2cd99c4713dbcb33c0990225', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '1af80f87c16cc87698fe93eaf6666eb830f60dce', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'e254e07931e20103f7517766a91762465c6e6b50', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '4e847f15c8f56d8d81fb8f55fda2dc78f075755b', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '14c7ea0a41f3a6f6da212886e390af8d49d47108', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+            } }, index.h("smoothly-input", { key: '5453b9a059c8210c3311476842b7391f045667ab', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '90e31870a59bc198001b433647d2464a8686c019', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: 'a9a8375a554d460964cf1f8d2d83599e378143c0', size: "icon", slot: "end" })), index.h("smoothly-input", { key: 'f1af6f8f2c4c244a61bc4b7e2b2402c15bd36040', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: 'b07098fb565faa815121b1ac12d2f19c5dae383f', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'a7a55e86d8c37219a8f689ae44f249fa4b147357', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '3efcc33f30a7f52c4e287ddadf136b7bff33a383', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'bcdd7d2d5a7e3f9164f3970330ca517922ba1cc9', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'b90c7edce08ca75afc2abd72b91db9e7ec30621a', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'dfa717cfb10099f10c66810054e9c51874272c9a', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '28c439cbcb81a7f3480e67d956cf28b0cdff18c0', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '9d832b5471b3703173f92d0b2536af790ec872e2', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'bcc8d409a8d0fbfbdd7edc757958b3a43c2121b8', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '9270263fc0907a95fa4fda20faab20724463eccc', value: "1" }, "January"), index.h("smoothly-item", { key: 'df50a7b49930b58947e4ada4787fe0f3b9c7959b', value: "2" }, "February"), index.h("smoothly-item", { key: 'c9c9ed6fa3f64f2bb2a7f7ce7a8e3e6ec973a71b', value: "3" }, "March"), index.h("smoothly-item", { key: '1a4df13779efe8c8c61f2e57c39684690a7e677a', value: "4" }, "April"), index.h("smoothly-item", { key: 'c03f5dfebd422e4a81af772ab5ac5ddb08edecbd', value: "5" }, "May"), index.h("smoothly-item", { key: '1238d99c2295fa52c22e67076b9714d12cc19cba', value: "6" }, "June"), index.h("smoothly-item", { key: '46256dc03ebe9f2bebf360dfc51778aa1fa3f231', value: "7" }, "July"), index.h("smoothly-item", { key: '0d2d6530ef9a48579bf014197fa29c1778138b2d', value: "8" }, "August"), index.h("smoothly-item", { key: 'c454e4f74973b4e4919c8ea40576d174ec7c9762', value: "9" }, "September"), index.h("smoothly-item", { key: '6a410dc5b68b3fbd123531b99bad22d7ed9c0bce', value: "10" }, "October"), index.h("smoothly-item", { key: '5214628e65ea539a77a14eeb2bbfe4270fb03033', value: "11" }, "November"), index.h("smoothly-item", { key: '2ab1330f7b25c711d6d50239cff5f8c417addca6', value: "12" }, "December")), index.h("smoothly-input-select", { key: 'a1493892d87ab651e53780905807570b50b91d07', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '61df0c697952bff56da044b3f29748926e58967a', value: "folder", selected: true }, index.h("smoothly-icon", { key: '0e54b6ca59fccab56e3ed55aa03862a263eb7e55', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '5c3321c5142c69b3065b32a6b55a34aecfab33be', value: "camera" }, index.h("smoothly-icon", { key: 'cccbfdb9939b3d16a885d6605436fc54c1da3019', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: 'f2bd24855f068fb7add590cb87f4050a3c18c17f', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '59a3654cf275543968911fa8dba440c1667496f9', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: '45ed118690207280f2c26768d0da1b7801b24bf2', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '4d597c188035beeec5adc9ccef43bdf9e3eb2427', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: '9a9310130e8c940f4ec771aa6753e8f7231a7228', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: '2c6cd64ce3a290205856e2442a1ef199a46d1cff', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: 'e90157d8dfae3668bc67aa5646f2176754b08347', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '26ee4906aa12fc145f24a45fbe4e0e6ac4f828e7', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '9c313148e3134d81f9ffbe76bb50ddea1e5f82e3', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '471cde92dd3f9b6deb214d85fc689c4451ee2aac', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '9baf5b9e972d897d55296c4bc870b2c22df72caa', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '15b62211482dedb406cc0fe9979b2ea845ba8fb6', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '60578f6da664c305319c8f04d30a1c05eae33a06', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '8a9f189bacdba4054cbe6f4f21cd11c5246b5abb', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '480cf7b27cbdc2047f126677eb425a1576e98314', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'e3b3fb9fbf3a7999c76d81c85629170dd5efd6c3', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'db4bb9254a75878098844e4804a6121f053f631b', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '57b118fb1b4852b39baf424c3f69f1fa00bea891', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
@@ -8387,7 +8387,7 @@ const SmoothlyFormDemoCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'de64604dbfaa81289d06fb7f035e266385a24c53' }, index.h("h2", { key: 'de36abc60544d5f6023d06933c2234cf04887253' }, "Card"), index.h("smoothly-form", { key: '51aefd9496fd4cb72a61a6e922db326633bd1928', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: 'c9cd0695bd416621f1758ece4b54e68e32c5d24a', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: 'b63581365b31bc1e0dfd1c5650a59a4dc32bcfe7', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: '494e6dd5232f5b3d2906cdfe1c4953518b5a7abe', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: 'f4244649c75f5f6b9495aa5ee32a21ac23931d9a', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: 'f71a28674d61243e44710511f648e77cd3186d89', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'a5b116a0c499895eeb8a0819d7db8573aa7e4b26', type: "text", name: "name.last" }, "Last Name"))));
+        return (index.h(index.Host, { key: 'e6e9b32074fdf87dab50af3c1f904ac6861964ef' }, index.h("h2", { key: 'd4512eea73d23fb396db207b58fd437b282ba6d1' }, "Card"), index.h("smoothly-form", { key: '96adcef6dba1a152573a391a8d020fba1c498b2e', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: 'c7e9dd627c326a133cdc3833d8aa9bee1fe3cd85', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: 'e5d11e876a9ad1171ce24aefa7f104fc51948df3', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: 'b7193c79148812850e1d31970f6696da9c8a1083', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: '69e610530f2d65909289c3a957df8c182613e9f4', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '4f9685d7d83dff346e4660c25886193030395e73', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '73f829b49a411a438f2228d17679671a0075335d', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
@@ -8423,7 +8423,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: 'e312871aa3d76c94091e33d4ca6594a12de64673' }, index.h("h2", { key: '01f69f3ac2f7aa936b97604c9ed9f2006b72d845' }, "Controlled"), index.h("smoothly-form", { key: '999072a4a6bab7ee0d00810e4677fe96948a5591', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '132707e9e475d5b2621528410998ef2b3a9ff589', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: 'f99fdb9c0389f9aa0d41ca19345a59f81626a789', name: "currency" }, index.h("span", { key: '07e163ae48a752ea46818ced40c54f6c02b20291', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'a4541576d6174d00edc35dc30d16e7107f8e787e' }, "Dummy"), index.h("smoothly-input-month", { key: '52795ebfac126f55b07a670ed1c5d74e408e317c', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '6c2020021f005783a25136f68c873d5536b87d71', slot: "year-label" }, "Year"), index.h("span", { key: 'ff7c8e28d5c0dd2cb503613a0ecdd3f0f1b14e97', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '3762d99e64f8fd135050b3e174db72fa3dfa776c', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: '3c65df079fb6cf79a9c9f9dcf8d078e53a9b211f', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: '89ebbedc35474bdcd13d210dd64f2fbeda3efc76', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: 'ef92c785b3365355b8ba811433b79938d060a5a4' }, index.h("h2", { key: '306ca5c5065a7a6e92ddf920fc987bf61228ab42' }, "Controlled"), index.h("smoothly-form", { key: '92248470b1409209b278951fdd4235cab8b6dc08', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '57d2c32977ca8b036f4d645ba9487df62d396073', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '9e29c5a6cb0b31b23fbe5e4db5c915e11b61eb10', name: "currency" }, index.h("span", { key: 'bae8a234efdf2ff5964797acb15ace498cdb2265', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'd178a9307c618462ef461009da95292fd6f11b2f' }, "Dummy"), index.h("smoothly-input-month", { key: '724c1e722dc1356525201c391321ecce06580ef4', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '93fb5f06e98380c3a26435e560cbbfdff67369ef', slot: "year-label" }, "Year"), index.h("span", { key: '29ff08b4c11e66ddd5529b872ba310189ce460d5', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '869f2703a94250f47169d0f532995ee239479387', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: '6801450e28506323ec1e963540acf491419b48d2', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: '7c5df04fd4720162adaea05387260f3132e940bf', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": ["nameChanged"]
@@ -8454,7 +8454,7 @@ const SmoothlyFormDemoDate = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: 'c855ac16e0490761f1c8613aea19ad2408170f61' }, index.h("h2", { key: '3668f293c8ab4980e4e25782d6ca17afdf0eacbc' }, "Date input"), index.h("smoothly-form", { key: 'cc403e758e981e551901533b40623aed9fb89437', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: '4b3aa55a1ad49138fa2894c4f953cd5c3ea18551', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: 'da1083abf5b98c967835443321cb4e3dfef52003', slot: "submit" }, index.h("smoothly-icon", { key: '892de2aea93d01e62effcb14d25e78ea00778b14', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: '22f4ed40b5848bc4784005b35f4601ade0ce4aac' }, index.h("h2", { key: 'c894900036aa83547c5b92acde5fa1dc2e56030f' }, "Date input"), index.h("smoothly-form", { key: 'd0ac14b67b826e1b731b397c76d78f2999b946ec', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: '74557c8d42c7091413536585a6eedef8cc464ca1', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: '283d86091ece17e31f8a9818ee281335836a314e', slot: "submit" }, index.h("smoothly-icon", { key: '189942a7dd92dd1166b83edfe8987cd3e18d8a39', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDate.style = SmoothlyFormDemoDateStyle0;
@@ -8483,7 +8483,7 @@ const SmoothlyFormDemoDateRange = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '8268dbce8002112c47995db37c6c4db5dfbd5b53' }, index.h("h2", { key: 'aa3db2510b5e19dde1f362870a29ee9c8d2199e6' }, "Date-range input"), index.h("smoothly-form", { key: '1f79aa6badf665f27a4e16cf8694f07e6159a7ce', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: '0844d7c580ebaebf4b0241446d1a8c73621a3441', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '530f99ec11e4ae634852572a1e39e4aa3a221f43', slot: "submit" }, index.h("smoothly-icon", { key: 'eec2006e62c67157029dd9bf1c79be6f4fb8bee7', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: '68aae8530e210936e6ee1cb52e65835cb5376088' }, index.h("h2", { key: 'ab56927aa4b3ffb87ad6ccda58ae62933c210ed7' }, "Date-range input"), index.h("smoothly-form", { key: 'b1901ddc4170e4f0cd5fd3a2685ba98230a519a4', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: '02ddba37b9f1a82f494717bbcdac1b86aff508b5', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '91c4c3b390da5f50236ab9afbd53c1b005a7a90a', slot: "submit" }, index.h("smoothly-icon", { key: 'ddecec0e052bf335197963a0e85345a4396d3976', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDateRange.style = SmoothlyFormDemoDateRangeStyle0;
@@ -8493,7 +8493,7 @@ const SmoothlyFormDemoLogin = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '805689f0a9b1f399f36da3a4375f79a65d350f61' }, index.h("h2", { key: '6afdfc52c85ba2c2a43b90aafc5509f66976ebea' }, "Login"), index.h("smoothly-form", { key: 'e671b3b795cffd38b35254cb29700ce1bdcd14ea', looks: "border" }, index.h("smoothly-input", { key: 'e89a85e6321bafaa4dd4d13ba69b6ad0201a3eea', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '68c7a62b137d8e7c05da4d55a72482be1afc2b0c', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: '90bc800f57c53038c16f6337c19adf38c97d00b4', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '2f7f66e7fb38ea1ba846745bbc352b9fa15e4ec9', slot: "submit" }))));
+        return (index.h(index.Host, { key: '914cd546393dcc39159cb968565a77afb574538f' }, index.h("h2", { key: '7fee155ff0311666f0061bfe0b0292d7418150f1' }, "Login"), index.h("smoothly-form", { key: 'f3237c61ebb16e0f7715a87e3a949705fa6979ab', looks: "border" }, index.h("smoothly-input", { key: '0ed97ea010760f27c89e4c78d3b00dca898b4d98', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '039a6e17d6e359a93639ec99442b8cd93c91a1e1', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: 'e64d6a94c00b458d0d7c5e5b77a5f8b3a0fc316f', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '886ea445167ab3281130390594d3e165e7676b4b', slot: "submit" }))));
     }
 };
@@ -8509,10 +8509,10 @@ const SmoothlyFormDemoPet = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '50d7eaf7522daa10b3f5832a87fff8674b162dea' }, index.h("h2", { key: '1262eb5e63ca5d7874f776837470a88bf5b8769e' }, "Pet"), index.h("h3", { key: '48e2bedbc5a62495d3b6f75dcc94b1b81b746e33' }, "Value"), index.h("smoothly-form", { key: '2d2f7c7ce198228e17c7e7ae1e507d7a97d73ff0', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: 'd5b952488d27c212a51bb0f19c07f32a4b02bdc2', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: '160482d107ee5fbb66e6e9be4dd17549085ec66b', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: '1a3a7229c18eb1adff2ab0f80fc79b3c02e5c6fe', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'ca731e714eb7d3c9027c8eaacccf0ef611917de7' }, index.h("h2", { key: '6b4198cb4bc6f85810f4559fcfa97b8aa1948d76' }, "Pet"), index.h("h3", { key: '8877db7feccc2c437df73f4b9d1df2c0d9e9397f' }, "Value"), index.h("smoothly-form", { key: '817548dbe700db117d066032605e83e89bae52f9', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: '159422b05784af942138ba2b73c663988a981795', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: 'a63d1fee5a11efff76f921e18cf7905473a41715', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: '8ad23527074d579b7ba39e9d39ba25c458173114', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: 'c358b2d9b6b7160187ffc2005c31acb2e245e195' }, index.h("smoothly-input", { key: '181824a1a8c9336a6281a2c75c0dca8dd1efec5d', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name"), index.h("smoothly-input", { key: '48c584e660552cbcb6b8591cb76db4ad82a1574a', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index.h("smoothly-input-file", { key: '0337e5784fda5203110240ce57a59999b95eb0b6', name: "owner.picture" }, index.h("span", { key: '376e9b3c74bd3c91b7c4830088214d6f25d97b2f', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: 'a46ac3dcf0f642c3e73a05e372b89c3d2bc05af4', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday"), index.h("smoothly-input-date-range", { key: '091a40ffac1d94fb84ab34fafe53e6f3fdc4eb2e', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange"), index.h("smoothly-input-range", { key: '481c3e71f7fa1c4a6212c2a7793b29520a0a4a7a', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height"), index.h("smoothly-input-select", { key: '2a1d02d5822bba65319793184fca0bb0c228b09f', name: "owner.favoriteHat" }, index.h("span", { key: '3b0d1c7ab9d640a6beb7386d3fcf32d01c4862bd', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1, selected: this.owner.favoriteHat == value }, value)))), index.h("smoothly-input-color", { key: '0213d002d04794540650094b87c2f51dc4c79dcc', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color"), index.h("smoothly-input-radio", { key: '779bc55c0302cfbdd760fcca76d4218d248f04bc', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index.h("span", { key: '95dc274f29b977810e20393866165337f5e8b375', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '6c54742a964b261f6149eff7a3f8f8f99def63eb', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index.h("smoothly-summary", { key: 'd0e0717f5ab5654263f61b19b9aaaeb744884f2b' }, index.h("span", { key: 'de40ea4e5537031fa91affb4282ee438282f3051', slot: "summary" }, "Summary"), index.h("div", { key: 'b416d9370549c02235eee7757fd9fc1d42004394', slot: "content" }, index.h("smoothly-input", { key: '7351bc85a7388f5f8b77f6b1d528c566c3fa97a5', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: '9f296928fd94ac6f35a1614595da37b3995b107f', name: "summary.picture" }, index.h("span", { key: 'd7fe9c0f53565bef390c8503a58f6f50868610a7', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: '44c483cf3c8f71be268d90d5f468a49c22cd2f8b', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: 'b5124dfc4e7816e7ba4f820a5aca3d14af0fb837', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: 'ea62f55332b6b3e125903d3c6baa380689ed864e', name: "summary.height", label: "Height" }), index.h("smoothly-input-select", { key: '99ffc93ca528a13281fe6dd188139b638f5c8ba5', name: "summary.favoriteHat" }, index.h("span", { key: '0da54511b795b429e768a119074d5392abaf2b9c', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-month", { key: '3419ad81154cb4af9bb372c3045925456d4fe7fd', name: "summary.month" }, index.h("span", { key: '6794ccd25d220bdb0612adcfeb9389885c53ebb6', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: 'bd5a2efeee77428de15a54f85f3f23f44e8ca024', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: '21ede19a4f9112977e253fb51cea2aa39ad819f6', name: "summary.favoritePizza" }, index.h("span", { key: '889b43b3ee59c109fab04a38dde1ea7a804c84f9', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '47a39cc2ddd1d4745b25125b59d3a85f7f68b6c1', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: 'bff4910b703b19ac81799c63704a47c79690dec1' }, index.h("smoothly-tab", { key: '03a01fc8534e7228be5a042fc2f1a605700c6019', label: "Dog" }, index.h("smoothly-input", { key: 'b70ec959c8415429276bac30aac2f799eaad9e48', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: '098a0dec9bd010569eca48f0736ed354d478e4c2', name: "dog.picture" }, index.h("span", { key: '089b32a2ff3926d59b9ce01e8a0f73f0eddde01b', slot: "label" }, "Dog picture")), index.h("smoothly-input-date", { key: 'd365a6a7c8cbc7df81f12cc2be3d1b5958d694bd', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: 'b063302e3f366a53071cf0fb2e5d87e39c5d9a44', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: 'd2c7c1c0ef6ef428bf667a3d61f752761c0936dc', name: "dog.favoriteHat" }, index.h("span", { key: '82759482ed126788312fd90fb7500bd4622eab32', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-color", { key: 'bc0ee988a7e70ce19d1735811283c268ae9eed04', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: 'e84dd8ad3145a438fb640bfcd168991450021c64', name: "dog.favoritePizza" }, index.h("span", { key: '18907f9eac1bafbabcde910add33cf33d5b23a2c', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '53ae41ef70927bb4ec0f9ee52f6d702606d9f367', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: 'ecda137898640fb248b79cceff42f25c5f854160', label: "Cat", open: true }, index.h("smoothly-input", { key: '897f0578ab304103685a1adabc231cd14d15312a', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: '4e99398ce10eb1629fb24d5552e050a543614e45', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: 'a9f5819004771a10f89f1d1cdc63fe2be8ab3777', type: "json", value: this.value })));
+            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: 'fc45ad128e8f79b37745c32f67d1ba7e8b1c4fbf' }, index.h("smoothly-input", { key: '86d389e5e7b0d28d0df399400085729f6471716c', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name"), index.h("smoothly-input", { key: 'cd62d7fb931c4400103fcc9d9a053a05fa85e487', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index.h("smoothly-input-file", { key: 'a2896030432f228ad920cdeb4ba5858622ec80c5', name: "owner.picture" }, index.h("span", { key: '24617088152871d9ccdaec6090a8f373d91f23bd', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: '0401cc3c3323b07f71276a072319a30325200c3a', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday"), index.h("smoothly-input-date-range", { key: '157925e70ec5003e368a04d598974017ed09ebb4', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange"), index.h("smoothly-input-range", { key: 'ddb0c2ce68a4217fc9888bd5cfd1ba23f86070c7', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height"), index.h("smoothly-input-select", { key: 'c8c5da0249521e8531c89a7b8b3ac763d87efb41', name: "owner.favoriteHat" }, index.h("span", { key: 'a80454815d98de8211d0811be4f4e010eb5fea1d', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1, selected: this.owner.favoriteHat == value }, value)))), index.h("smoothly-input-color", { key: 'e89472883061c53b0f8eb697ee7780fddd438426', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color"), index.h("smoothly-input-radio", { key: '50c7b642ea08b27fd6f2a29d1cd1985b13f14789', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index.h("span", { key: 'baa6df6905dd70e4572b91ee17d599c75a593c91', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '5bb00bd662f3c4e537ce4fd107845b8d5abf09fd', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index.h("smoothly-summary", { key: '4a3fc4cd07aa3873945c3ab974f99d037e3fbbda' }, index.h("span", { key: '0afdd64ca5682fbffd32bd276ad1754347be7c22', slot: "summary" }, "Summary"), index.h("div", { key: '495ef4c2d75d1643bc4f60dba3ce24d4b59cbe74', slot: "content" }, index.h("smoothly-input", { key: 'b62901460412b55658e0ecf9684dcf228c9b8aeb', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: 'f5bbe653d7d76f849d407ed5412e7fd74738cf67', name: "summary.picture" }, index.h("span", { key: 'f895d5cd3508e1d0584c4b0f27b55a782f400185', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: '0954c449c3dde1535e41b5b7ef8c68769c41bc92', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: '517776b35be90839508d52ef064ab6f60666ac04', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: '9177373ede95dd28367e3da1ee1f1f9320f8d3b3', name: "summary.height", label: "Height" }), index.h("smoothly-input-select", { key: 'b49a7896448c2d40440e5ab6cec301d73d873669', name: "summary.favoriteHat" }, index.h("span", { key: '50efd70498341500f18cbc37beaaa36fabb8dfa1', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-month", { key: '3855402ed77dd5d6e8e2e3e5d83928df72846a6e', name: "summary.month" }, index.h("span", { key: '2a19d1c8ca76b2a9e161c1ddff12574157074994', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: '5860b2f19faf59a89dc7ec927580eec8c87cbb4a', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: 'ed742b746ecd09c0a68b239b020a0d5c98a055a7', name: "summary.favoritePizza" }, index.h("span", { key: '658d7669cad7375204a0b8da4e811859d79ce8ac', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '5b6e99bdbf96c73a979dbf896e283e04c7e5914c', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: '4f491e665758c320d52b1296eb9bb7497697b626' }, index.h("smoothly-tab", { key: 'a0bf8af72607a286852fc39001708de27bf2e150', label: "Dog" }, index.h("smoothly-input", { key: 'ad8d73982d3791688cac56360b7924747af0110e', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: '8e5248bf2108046ca6cbdd8ec0185d2cb9aec86c', name: "dog.picture" }, index.h("span", { key: 'a4250a2ad68960d8842266cab470a91809c7b245', slot: "label" }, "Dog picture")), index.h("smoothly-input-date-time", { key: '27a696243ca01d4cab3367300967196372fd952a', name: "dog.lastWalk" }, "Time of last walk"), index.h("smoothly-input-date", { key: 'c06d1ef75c940488c6016976e017718279efbb58', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: '62f5fb72529d8b243979a389861e9927c7a7e470', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: 'abfe59ab4c9e1f78b34664c6a17e0e3301757632', name: "dog.favoriteHat" }, index.h("span", { key: '54cbc4f6e9a219883a7d24562a5558a79cb45c11', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-color", { key: '4b92479885ffe3f6457946214192c5301298d421', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: 'e3c13c05702f5d50c9cfa5911a6b5d97d760b1be', name: "dog.favoritePizza" }, index.h("span", { key: '32b8daa4d676b59d95f0c2668991c4849090098c', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '7bee52a70d21bafa0850dd7f9281e257b68557d8', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: '2adff795ab3cca5271c365a2d90ac515db6379d6', label: "Cat", open: true }, index.h("smoothly-input", { key: '17b9bf37e745b6e535dde50decd7b7128e67c07c', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: '905da98d7ab630b43cf07c21a2cd78fb20b2ba64', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: '7cfb16ec38bb5c1929ac6e77ced637c1241e979f', type: "json", value: this.value })));
     }
 };
 SmoothlyFormDemoPet.style = SmoothlyFormDemoPetStyle0;
@@ -8522,7 +8522,7 @@ const SmoothlyFormDemoPrices$1 = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'fefcedbfe8f22921bea912762f1f6d8caf6ea3e4' }, index.h("h2", { key: 'c18e909d513549a9a8cc28b2b1d8982b96703343' }, "Prices"), index.h("smoothly-form", { key: '1eb8cab4a08f19f246c5cd46362452b416db1573', looks: "line" }, index.h("smoothly-input", { key: '75439c727baa6c39b500deec470d0a32953fddc7', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '11b3a7ab0e4dd1626e7efea03c56ba4c1c5e9c27', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: '837b810384d7818df18c2ed9d6d08eb965124627', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '6ffb11da5cecbbeeef8b6482cbe3cee39e16b6ef', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '4409191ea5b5b0ded31bffc9408927c36bb1bd3b', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '8dc492d719d9e2eabba22c402e0349fc5aa7dc9f', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '2def9348a43704dafc21e3738de05d074f189285', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: 'da33915fca3ae802948b1911462f68a10a82bf4c', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '17cee57859fab71ce0e86141330c361fa06630d0', slot: "submit" }))));
+        return (index.h(index.Host, { key: 'ef817730d780031d431f9d992a09bdd1d6dc0191' }, index.h("h2", { key: '95f0c14315fe2cd12df649bb02827250ccfbe200' }, "Prices"), index.h("smoothly-form", { key: '0f741fd222ea03a1c2e58d0f3e997ffbcddfb859', looks: "line" }, index.h("smoothly-input", { key: '827cd91113c01c151a5233d794320bbc242faa82', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '0ec4534ffea6a2ece32abcb4d3a35b3b940f23d1', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: 'f892fac339134188fc77faefd7e5c2b2df362a40', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '9ec492d628eca72e8950e7cd43a70959a2c9040e', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '08633f3a3a246e4e9dabcea722dc55d8faa2f22e', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: 'cc76fb65cc5a86910d65e5c9db18fe4d26c863db', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '88e78717c9067de04ee4420780b2d7fb05f316b2', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '40c78c747e0fb909c4b63499cc88b8cf6f798c82', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'eee6152ffc0a5d7672016e155df3105eb5a9f340', slot: "submit" }))));
     }
 };
@@ -8542,7 +8542,7 @@ const SmoothlyFormDemoPrices = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '8676cb9b188b2378d815226827e2f7426f514deb' }, index.h("h2", { key: 'e11dc90193d5f06378378c07412f7e8a842c6ec1' }, "Schedule"), index.h("smoothly-form", { key: '5875dcd80af050a71d7434fb2f84f18446436dbf', looks: "line", validator: TimeTable.type }, index.h("smoothly-input-date", { key: '0551573f423a5022499d7d3a25fe6815e75e8554', name: "schedule.0.date" }, "Date"), index.h("smoothly-input", { key: '4889b711330406e9902beff8b8cc5a22d018978a', name: "schedule.0.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '9c2e767a364b4d29ec745fff9cf6a185403208b3', name: "schedule.1.date" }, "Date"), index.h("smoothly-input", { key: '279a1c6e7a5aad5525347c609ae74f7295182102', name: "schedule.1.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '8a8c4e848347f3eb01c7f987926b1a4439665bff', name: "schedule.2.date" }, "Date"), index.h("smoothly-input", { key: 'cea7149a54447cc79ea1bfacdebc539323eb4377', name: "schedule.2.amount", type: "price" }, "Amount"), index.h("smoothly-input-reset", { key: 'fe5f1fddbaa59572935420bb42aaab83106278ad', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'f435d61a9cbe0aaf693763d86a3babb93ec9acde', slot: "submit" }))));
+        return (index.h(index.Host, { key: '9a8342191bcb4f1494d365dbd86a8d0d1faece52' }, index.h("h2", { key: 'e6a539aad12c022a22e1a8edc27d44fcb4df8867' }, "Schedule"), index.h("smoothly-form", { key: '87269a58de54f9789fd32edb99bfc1523d7a919c', looks: "line", validator: TimeTable.type }, index.h("smoothly-input-date", { key: '78b0c1c19ff5a62beffd822e7fc15303595b0963', name: "schedule.0.date" }, "Date"), index.h("smoothly-input", { key: '85b77f75bde169c83db4d51231eeac72bf5af087', name: "schedule.0.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: 'e79ab0b49b6953dba70834e4f915d8c5ad0cc574', name: "schedule.1.date" }, "Date"), index.h("smoothly-input", { key: 'de7dc6c83c44e3288f4f3c3df59919d174d2d1b5', name: "schedule.1.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: 'ec0256b3c2d0a081400d3360dab5a3a28880dabe', name: "schedule.2.date" }, "Date"), index.h("smoothly-input", { key: 'f6940419a9d7f7694e17b1a777c5fc673dc2341a', name: "schedule.2.amount", type: "price" }, "Amount"), index.h("smoothly-input-reset", { key: 'ecd898be80239b97a44e442d4aed1ad136576781', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'b0e460ddd55e7e2336cdef8a41bf1ed80105d494', slot: "submit" }))));
     }
 };
@@ -8551,7 +8551,7 @@ const SmoothlyFormDemoTransparent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '56bb25aa930390f6f18deef5a7f11cd60743c8c1' }, index.h("h2", { key: '6b02cc5c2ab9dd9ce512ea709a6e8c318803f806' }, "Transparent"), index.h("smoothly-form", { key: 'eb5a7a12b66c950c6cfb6b63279d6d3d0fb3c9e9', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '7af20181794d27a18c0657525c6feeac396bb830', name: "file" }, index.h("span", { key: '2ee590e2395504e7ba95985b3c3cbce3f7704df1', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'c6fb9a872fb7c4486c31b11ce40fd147304fd7e6', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '221c41fee6498fd25c075c1025b4c09ca63a88f3', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: 'b14c619d972e6233ad58a200fb6bb9d5554cf17f' }, "Date"), index.h("smoothly-input-date-range", { key: '2a4f0cb951dc7f72e48fa102a5cfc598c6a9a229' }, "Date Range"), index.h("smoothly-input-select", { key: '411bc52358b29c5216d52950902a5204f420ebd6', name: "transport" }, index.h("smoothly-item", { key: 'cc29561b22ff405cb5fa0f8d3341d0967ef657f7', value: "plane" }, index.h("smoothly-icon", { key: '040582665fba3aae4cede769c68963223ee83091', name: "airplane-outline" })), index.h("smoothly-item", { key: '22657c50d58b142833a6a429273ce3d774e0b5e0', value: "car" }, index.h("smoothly-icon", { key: 'ccce5f3ffdf89c5a2845857c2c0f0f770f464e96', name: "car-outline" })), index.h("smoothly-item", { key: '1b10530f7bc4499c821ed533ab6a36cb85f3d7e4', value: "bus", selected: true }, index.h("smoothly-icon", { key: '23b2876323a8f5d806e5fb668b2639c11b4c2705', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '15f781edd28f7dfe12c8557866afd2475ee9e4ba', icon: "checkbox-outline" }))));
+        return (index.h(index.Host, { key: 'e9d2b7c2c35a7fef3d63e5a2e2ad78dac68afa94' }, index.h("h2", { key: 'b0196e756933499f3bb5e76029e7c8211b35ad14' }, "Transparent"), index.h("smoothly-form", { key: '579b4321ee284ee6c6a015890011a020caf6513c', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '4bd0729987399d728df72d10d98f3d1d8a321a25', name: "file" }, index.h("span", { key: 'd94eb8d5b54e1288e498ef2a0b058d0d965a6574', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'c7c69177f08ab65b15052e41ecf8f404c285dff5', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '424ddc6565d5d529f1e3e3fc3c4cc378c4fa454c', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '3c7598b83574ffdc75b482ab58ccf29fded61a2c' }, "Date"), index.h("smoothly-input-date-range", { key: 'cdf7915921db87ed535cb7eceb913429226322bb' }, "Date Range"), index.h("smoothly-input-select", { key: '24b0fcdf3bc5a9a45f3121050d117154487f80a5', name: "transport" }, index.h("smoothly-item", { key: '32bcc1947d96c59b65e7cfa233625e1777bcbc50', value: "plane" }, index.h("smoothly-icon", { key: 'ee4f64850410090b75d20b188ba6d3a705fdbdbf', name: "airplane-outline" })), index.h("smoothly-item", { key: '076e4bbd8dd60150320846294d6644b679fcce43', value: "car" }, index.h("smoothly-icon", { key: '589f0efbfa101d53697454c13c4a9ac506a391d7', name: "car-outline" })), index.h("smoothly-item", { key: '3f91afc28773ede15773df606539ded87536c671', value: "bus", selected: true }, index.h("smoothly-icon", { key: 'c2a81e1abaad259df119248a3fcd81c5d63c713d', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '32fb53f041b821eda365ac8ffa8df118dbd2b3c7', icon: "checkbox-outline" }))));
     }
 };
@@ -8573,7 +8573,7 @@ const SmoothlyFormDemoTyped = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '589d8de4c0b6b7e857a7a4ddbbbbc9a2e860d502' }, index.h("h2", { key: 'd402f921eaccf3321e04df59c96e9d32aec67582' }, "Typed Contact"), index.h("smoothly-form", { key: 'fd0c811ba55c3aab606a8ac8575e5d36968b556a', validator: Contact.type }, index.h("smoothly-input", { key: '86f4b7aec26301e5b74e65c36d7a10d29e32f441', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '61ffe1927a42f0f7a7ae49e158485c99dc8581bc', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: 'dc5620803aeecca0a640ff675b970f6faa98b8ab', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '1dea7fc4ba31c47ad39bcb57238b360a7df0f74d', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '83f5df5e7d8d96600a9eb6b38762d25c5c5098ae', name: "country" }, index.h("span", { key: '00666ef0610990ac0cf1e11635db1b7beffaeb59', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '3e95f926e1a84109cae654429f747a979972c372', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: 'b4c35bb7106d310df2ad78e6eee3c89e393730d1', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'c9fdb24ebc4f4ec46bae6b097259dad7b1487ff7', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: 'e53a0a17b2302337cf2e1e045f94c96906dd3bcb' }, index.h("h2", { key: '0cbe465c14b22f04250ae487d0790ac1910f5e59' }, "Typed Contact"), index.h("smoothly-form", { key: '88448919f6a71ea37240853f673dc0ff07df9587', validator: Contact.type }, index.h("smoothly-input", { key: 'b17b6cdfd48aa02789204504f52876f3a55c578e', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'ece3d88c0ff08625d55281cc1cc6adbb1f02efda', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '61d9bf66ca545510b46d3c9936cf552e44538fac', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: 'dffb209c6e0f5c98cb17bd74dfcaa402061d2172', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '04948477a80cca43ddab4fcefe77230b576f3145', name: "country" }, index.h("span", { key: 'e3d6e8bc8bd964b44f58a8ed47cccfa1aa363066', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: 'cc4e3676ec2e411a7026d48d4986864800a046a0', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: 'af37d92c8ffa3a47b8573af693f7aa4b245a1c98', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'e1d18fc9c58985f06bea1173a15920eecbf98d29', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = SmoothlyFormDemoTypedStyle0;
@@ -8626,7 +8626,7 @@ const SmoothlyFrame = class {
 };
 SmoothlyFrame.style = SmoothlyFrameStyle0;
-const styleCss$W = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:flex;align-items:center;justify-content:center;box-sizing:content-box}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}.sc-smoothly-icon-h.sc-smoothly-icon-s>svg{width:100%}";
+const styleCss$W = "[fill].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:flex;align-items:center;justify-content:center;box-sizing:content-box}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{--smoothly-icon-size:1.2em}[size=small].sc-smoothly-icon-h{--smoothly-icon-size:1.4em}[size=medium].sc-smoothly-icon-h{--smoothly-icon-size:1.8em}[size=large].sc-smoothly-icon-h{--smoothly-icon-size:2.8em}[size=xlarge].sc-smoothly-icon-h{--smoothly-icon-size:4em}.sc-smoothly-icon-h{width:var(--smoothly-icon-size, 1.8em);height:var(--smoothly-icon-size, 1.8em)}.sc-smoothly-icon-h.sc-smoothly-icon-s>svg{width:100%}";
 const SmoothlyIconStyle0 = styleCss$W;
 const SmoothlyIcon = class {
@@ -8635,7 +8635,7 @@ const SmoothlyIcon = class {
         this.color = undefined;
         this.fill = "solid";
         this.name = "empty";
-        this.size = "medium";
+        this.size = undefined;
         this.rotate = undefined;
         this.flip = undefined;
         this.toolTip = undefined;
@@ -8671,7 +8671,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index.h(index.Host, { key: '90d808b89e55e020357e31996664df7ae6e492e7', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index.h(index.Host, { key: '0cd1bf1fd47bb75db4addbb772c8ebf7420a9f76', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get watchers() { return {
         "toolTip": ["nameChanged"],
@@ -8692,7 +8692,7 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (index.h(index.Host, { key: '40c73c1b86c82de25ef710d90250ee26f5a97d18' }, index.h("h2", { key: '9da59d3a9759d294b018b1cccd6b1ab22a80a14d' }, "Filter and Variants"), index.h("smoothly-form", { key: 'f00d40984821c21dbe6da17699bed1af9833ba98', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: '1e3aea269957e45707b59cac29c7acda1b88b44a', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '920017ab5a12f3ac301e1d497ab5f646b2f5b250', name: "variant" }, index.h("span", { key: '6f72768a6901c6848b9a8eb15890726b8d9aad65', slot: "label" }, "Variant"), index.h("smoothly-item", { key: 'e19740138b3d3fb726891c8c83ca48cb63a6d32b', value: "outline" }, "outline"), index.h("smoothly-item", { key: '9e1101547a526f2e6d5626ea1cb6f9d509e3d77c', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: '90bf7ea10c6e28f2fe0946246e932c188d2e36d6', slot: "end" }))), index.h("h2", { key: '03af9cd3b892c8ce5c85ec5f24308ec568d3d7a4' }, "Props"), index.h("smoothly-form", { key: '5523dd394791968c76bcaa4611ad7f061ef3d4df', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: 'afaef5167021cf3f92c0ec46db5a13dc86a793be', name: "color" }, index.h("span", { key: 'a70c95e49fa7e5863e2ee085cea1a779bae32672', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '2e0a61224d72bb2177ccdca8464a062b55c2cdf6', slot: "end" })), index.h("smoothly-input-select", { key: '33dd05fc21187e59d50294ac6e516859b682cc85', name: "flip" }, index.h("span", { key: '1c6cfbc839f886094d1c5159ffe15cd53aa7408c', slot: "label" }, "Flip"), index.h("smoothly-item", { key: '5106005eb437b4928c85f0c199e8a63d2ccb15cf', value: "x" }, "x"), index.h("smoothly-item", { key: '74127b329d004f066a26cd5ebf1d371b4aa3b0b0', value: "y" }, "y"), index.h("smoothly-input-clear", { key: '136a83fec40ffe558a645692ee166bf41895a127', slot: "end" })), index.h("smoothly-input-select", { key: '18f3fefd865f1e464fe028a28cb3c08ed1f521b1', name: "size" }, index.h("span", { key: 'e12ba7003ac5bd1150df707fe72d4638eb873e6d', slot: "label" }, "Size"), index.h("smoothly-item", { key: '1aaed4a2d9de5cbb2d11b7e57d4e10fb62023a8b', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '506c7ac8f330114d6cfeeacd2ccf28617f48d18f', value: "small" }, "small"), index.h("smoothly-item", { key: 'fa323988312e0bd28fdb047a29b2bf9b6393316c', value: "medium" }, "medium"), index.h("smoothly-item", { key: '4a70d203ff25c15d7de12884df57c5908bfddf3f', value: "large" }, "large"), index.h("smoothly-input-clear", { key: '1484395ca63048f2da3086608c69fd16adc4c767', slot: "end" })), index.h("smoothly-input-range", { key: '9ec2aa43cbcba1b05b4d0f15630fb3652ba1c68b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '9edc8e3b7bd75b9709da67bb106713265d9bae99', slot: "end" }))), index.h("h1", { key: 'e163cd387bad76c2d031e30ebd3ef3c99ed5c3f4' }, "Icons"), index.h("div", { key: '991f7e26e28d46d076f9977a2e08ec8e3902a518', class: "icons" }, [
+        return (index.h(index.Host, { key: '85cd4e9765acc294ce8e5e5556afa4184775a35d' }, index.h("h2", { key: '69c07ecf98bca9a5225cd7101ab86174f3125b9d' }, "Filter and Variants"), index.h("smoothly-form", { key: '92dc81fa862e4d5b7e75724bc42a6fa1a9bfd162', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: 'e7acb163106374af8171e5975ffb121f1dc0e0ab', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '240674f9343e8c5c5953bf8e4bef66bc4dee6c16', name: "variant" }, index.h("span", { key: '70e5644254bb83eee81330b6496ab478249837a6', slot: "label" }, "Variant"), index.h("smoothly-item", { key: 'abbd459f878ba4c1d8bf7f931037675578adf845', value: "outline" }, "outline"), index.h("smoothly-item", { key: '93b2000c713d6e7847d5107ffae771d0da02536c', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: 'ab29053c6bad1b886bed3fdc2e65fafdd983e1ef', slot: "end" }))), index.h("h2", { key: 'cd4724b809bd591aef6be814d2b98681aaa2c2bd' }, "Props"), index.h("smoothly-form", { key: 'ed11405ef968b6beab8b6f7e127b73b90f9f032c', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: '3bc7e9640fb47e7823ca7f3eeca99505e45b216f', name: "color" }, index.h("span", { key: '947f5bb7f38f32f29caa67bb099511bc6f824072', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: 'e5f24f7555bfe379f157e66bc9eca0d31e792953', slot: "end" })), index.h("smoothly-input-select", { key: '702c547ce7e3da71537d5b6606df761015273bfa', name: "flip" }, index.h("span", { key: '2b6a9ef4307f767b14a7109bee809a8017a4e75e', slot: "label" }, "Flip"), index.h("smoothly-item", { key: '57b2f6d8c4065c1cedbc4592099c6b3c90175c7e', value: "x" }, "x"), index.h("smoothly-item", { key: 'f4a0d829db5acde925e5c1d420af8dfa062a9e52', value: "y" }, "y"), index.h("smoothly-input-clear", { key: '3c03d8500c0ad5786d0c498cad650a802b7cfd4f', slot: "end" })), index.h("smoothly-input-select", { key: 'a4d8dad9da6d5e03a8065dc26df71bee4d4c1929', name: "size" }, index.h("span", { key: '542a7a0f17ef87d4957791102f325f8f80dfb0d1', slot: "label" }, "Size"), index.h("smoothly-item", { key: 'eaac9577a6bd2ff541b71120167a839a20075496', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: 'd827671e0fdd5faa1a8300340061b73ce6fc7f73', value: "small" }, "small"), index.h("smoothly-item", { key: '7df37bc995692dd1be88c4e1bc69b9bf1f7c7076', value: "medium" }, "medium"), index.h("smoothly-item", { key: '9dc57019c48343fb346011fbc6b9d976d2168edb', value: "large" }, "large"), index.h("smoothly-item", { key: '071013f093a11310943f9f694924a49d24251656', value: "xlarge" }, "xlarge"), index.h("smoothly-input-clear", { key: '88b4621ec25eaedc9a1cb5650a0eb7aa48d49b96', slot: "end" })), index.h("smoothly-input-range", { key: '2de8948958d27950ad82054210adc020dffd7b3d', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '4a56880c31edcc541a53d420addc39ab357c7641', slot: "end" }))), index.h("h1", { key: '425c59c17e209aea722879e80ea032c6f73d9c95' }, "Icons"), index.h("div", { key: '49f2246c12399d426c32b412d9ac7a70053d1814', 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)),
@@ -9124,7 +9124,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: '7471c3e1b2da8ae859931ea784d02651d7708c25', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: 'b028ff4cc80a672f9660c678d2bd918f9debd4c3', name: "start" }), index.h("div", { key: 'd8c40843dc84012f3aab57de6f18249eaf1d0b75', class: "smoothly-input-container" }, index.h("div", { key: '5a69a2a64b38fcbbf767a635be60a4ff7b640079', class: "ghost" }, index.h("div", { key: '814aa8e223becb771e2b066063023d9f5a73e3af', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'f0135aba59beb4ac8940b8c305674efdc7934b87', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '1fa48b8f469be26f5199ab2d55fa5865ae985237', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (index.h(index.Host, { key: '274bc32c578e080df8ac9b61ae6a6fde79b7c868', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '462b8e773633bf79f0b7168909f4b1e7e898c13c', name: "start" }), index.h("div", { key: 'd3e8b6ede5a545c54b123ec88bb225d0fe1fbb5b', class: "smoothly-input-container" }, index.h("div", { key: '9f8466b270f30ad5dbf6e6368626c5b43f9a6193', class: "ghost" }, index.h("div", { key: '3a317131068abc24a59d3a5a95a754fc0be4b402', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'bf98743f1665e7de9b27a2758550616657ded06e', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'e6068b3b19ec4f971f72961219689256a894be2a', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -9137,7 +9137,7 @@ const SmoothlyInput = class {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), index.h("label", { key: 'b4dba4b8b51595a94e8b26bac894aa2d5f309c90', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '5d7383e1c6c75406bf0dc1b8fa92f049520e85cb' }))), index.h("smoothly-icon", { key: 'eec82ffebeb4b1f64a7c204d553b5af65ea93c21', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '706cb81ba9345f7dec7c8ac55ac7054e1a49b494', name: "end" })));
+            } }), index.h("label", { key: '7c69e2cf4af664980cc48661e3903407f9682b52', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '9ff7d4f1e0b81d3f39f3b54815a73e33d109c089' }))), index.h("smoothly-icon", { key: '3f4c1d9f064fbd23fe565fe35ae48698a3a0e828', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '837a6c0246f455d51d1e6643203a6e8bfb9037ed', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9218,7 +9218,7 @@ const SmoothlyInputCheckbox = class {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: '7e9d8f10f1bb4607a3d6d01667ce46b8ab4863d6', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: 'fdc900044c63fe533744d5176893e9a8bcd6591d', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '7a2c0e280b1e8455c87f717ac87b044bc5746b2b', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '9772a8094fa5f788859098f5eb4aca41149d9727' }, index.h("slot", { key: '050412eef281c0e64980baf7c1b4bae7b835d9b0' }))));
+        return (index.h(index.Host, { key: '5a1133c415b7c81342e399d3bea71fe5def9a0dd', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: '6db368abbbf77b9f6f39381097a60de7d3338aff', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: 'd88b49bb3f92be507e087872abd4435c1cc8a7e1', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '5df3c17376712cc9e36f40edbf318b2d192535ff' }, index.h("slot", { key: '678f88d3821001a1c5bb4d50a583194c5237ddb3' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9268,7 +9268,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '17668319b54cc454ef29fda2fdef56f9718d1ce8', title: this.tooltip }, index.h("smoothly-button", { key: 'f1334ad4a05dba52ce919945a9648882eb7d94f2', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '8699712b8661a46231822acfa57fdd15a811b9af' }), index.h("smoothly-icon", { key: '050e6cc18db2f64bff841a4465b420de3df156c9', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: '0a7bb342490c7fcc1fce83665d0f4ab9db78540d', title: this.tooltip }, index.h("smoothly-button", { key: 'f62d3c4ac6de033104e16b329f04a616a2d7d1f0', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '153626f2830e08a43955922234b3241a10784a82' }), index.h("smoothly-icon", { key: '2045decfcca3748acf539027d4491d44fb18fa76', name: "close", size: "tiny" }))));
     }
 };
 SmoothlyInputClear.style = SmoothlyInputClearStyle0;
@@ -9418,7 +9418,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: '06ccbfbb8103fb4157b7aab79cdd4b275b477bc0', style: {
+        return (index.h(index.Host, { key: 'b0ef7370922fbdfff0930a8655adbad04b78c995', 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)}`,
@@ -9427,7 +9427,7 @@ const SmoothlyInputColor = class {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, index.h("smoothly-input", { key: 'c010412a9135a0a2ea6b4c766260fc0f720eaf5b', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'c28a3ec9985cefd718787b74c30f8434ac07ad5c' })), index.h("div", { key: '6ef1c860d2d6431fccea0aebaad5d930753cd9af', class: "color-sample" }), index.h("smoothly-icon", { key: '9184753b181267e611d19c51709aa1c233fc89dc', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '85be89a51fb536882133d724d81d8d29d794e1aa' }, index.h("slot", { key: 'd44ffd1cabe83efb3f1a727710737ff1c75bcb28', name: "end" })), this.open && !this.readonly && (index.h("div", { key: 'e4fd1fd66897f84c7b82b594cdc4afa794c245c1', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '2b8ab54580f8a96a72ee6b762616b061d2782d73', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
+            } }, index.h("smoothly-input", { key: 'b053c21aea76d7728b839d8948ade3f657a090c9', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'de22a789f8a9560d98f5d635a9839b3036e80fd5' })), index.h("div", { key: 'f6943fb655155b07e5bd4356d6996f61a363a86f', class: "color-sample" }), index.h("smoothly-icon", { key: 'c4e93a326ba2941145a60471767b03868d87e12f', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '62d6c8a47fedb583cad51a425935f84a1699a885' }, index.h("slot", { key: '612bff8f0ae497b9644c826edabf8c8405ea10e6', name: "end" })), this.open && !this.readonly && (index.h("div", { key: 'd04ca3c2b6d1877f558f671f51f1efc22f86d426', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: 'ee2c7ca2ddafd02c7136b40425454756042f574c', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9441,7 +9441,7 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '233cd244e8fbd24d8d36b67afc5e32c74f9c84e9' }, index.h("h2", { key: 'd3245bbee2dd2b9af5218bb81433138ca9cef085' }, "Color"), index.h("smoothly-input-color", { key: 'de7d138d123d61aaf0404b64404f335d399423ec', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: '84a757071a258746a2ae5fabd442975188507d0f' }, index.h("h2", { key: 'f91e2656c17d20c9d5a857415099d11880f33c87' }, "Color"), index.h("smoothly-input-color", { key: 'dccd65424a3c586d2bdb5ab3e730ce5218b8bb2c', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
@@ -9533,13 +9533,13 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '537241a6d277b3d97892e6d2a6e7785d1445dd21' }, index.h("smoothly-input", { key: 'd6b4712b11564007b357279d0ef6353353f2ead2', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'f27c7c5d173068925e0af8f9394c66538339ea8d' }, index.h("smoothly-input", { key: 'dd986de956859487742a8ac7e62a868e99dc4710', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, index.h("slot", { key: '9b353cf3658a2017a6fdf44ea00853c8cf22958e' })), index.h("span", { key: 'b2d0c1951f0a6c92f8ec7b48a1b049eddc16208d', class: "icons" }, index.h("slot", { key: '4d1f3d6771d6ee0ea13a7d709740b76350a9ac00', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '33fe4e270a7dd48a48a66205342e79c9cf505e22' }, index.h("smoothly-calendar", { key: '2084bd5d0ef9575c45f2e52504c5bef6a076dba2', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, index.h("slot", { key: '4b3061169a4ef53e63aa0e2f5ec913e63a1936f1' })), index.h("span", { key: '1b4a7482a589b2929a3a65aed665e50635be0676', class: "icons" }, index.h("slot", { key: '9c56bb291dfe6dbc4f0f430f959c07de5716a804', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '473cd938fa55fd93f42c9f7598e5043201845aa4' }, index.h("smoothly-calendar", { key: 'd639b7a95a947c2a0f43c98c2f87b840dfc5cfca', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, index.h("div", { key: 'c6c5f4e7f6c4d840251e360667154deb2ea4d1f8', slot: "year-label" }, index.h("slot", { key: 'e1ed184a3b88e62306ff446d4484ff1b44dde2d3', name: "year-label" })), index.h("div", { key: '89136139b0624ea7f160615ad12e7f66ae83d0bb', slot: "month-label" }, index.h("slot", { key: '6a4ba7bacf62d96fc09ed3fb8aa28dcc071504f5', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: '82c24ea75492ffbe3fd7b54eb4d43ef5f909a8d1', slot: "year-label" }, index.h("slot", { key: '916f472a3b4334d35d9f9416363a5563f929f6a0', name: "year-label" })), index.h("div", { key: '1178d7021485e97879dce5d8ad53c60f5c3619d6', slot: "month-label" }, index.h("slot", { key: 'c105c684b5f9020817380915a3f32fb1e1670f85', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9645,12 +9645,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: '2e8c505b46587906c275c87e0af9632050377e6f', tabindex: 0 }, index.h("section", { key: '56f3f315fa60e4b6d7230697901f3d34a60fe6b1', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '09e0e316a5f498ea0fe99cb0ca12a5033dccba3c', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (index.h(index.Host, { key: '1edb644130609b07bf431f46efedafba28cd9724', tabindex: 0 }, index.h("section", { key: '883ad0854001b0270260883f75862173fe893699', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '1d4fd4313766fd49fe94215171a3f7a4cd906fe7', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
                 ? `${format(this.start, "date", locale)} — ${format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, index.h("slot", { key: 'e5d92bba332e29de53485e20959337fbb1abdc8b' }))), index.h("span", { key: '2d9f1b56e86db064fcc04bffc1176e768218fda7', class: "icons" }, index.h("slot", { key: '935f6453d1e7c21a436f0bd0ddec0514ae220888', name: "end" })), this.open && (index.h("nav", { key: '88e6a8897b3f3de8f438449c4086a867d04af7df' }, index.h("smoothly-calendar", { key: 'fb70147730585f846df931e06fa658934b926c66', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: '068c1112e5e09c134b37ab1122b4570272e4c16d' }))), index.h("span", { key: 'a3df5833d28d14da2b5717ab407bf3f4d69f4e9a', class: "icons" }, index.h("slot", { key: '4dec534ab9015576f889218aa0ea3103b7d8e04f', name: "end" })), this.open && (index.h("nav", { key: 'ccac24b71ffb8a20762d0ec7641fc10986f74ca2' }, index.h("smoothly-calendar", { key: 'e0dc9921d9a1ff3e876c47dc99f6a4573f229679', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9671,8 +9671,149 @@ const SmoothlyInputDateRange = class {
 };
 SmoothlyInputDateRange.style = SmoothlyInputDateRangeStyle0;
-const styleCss$O = ".sc-smoothly-input-demo-h{display:flex;flex-direction:column;margin-top:2em;margin-bottom:10rem}smoothly-input-demo-standard.sc-smoothly-input-demo{margin-bottom:2rem}div.inputs.sc-smoothly-input-demo{margin:auto;width:50%}div.inputs.sc-smoothly-input-demo>h2.sc-smoothly-input-demo:not(:first-child){padding-top:3em;margin-top:3em;border-top:1px solid black}.checkbox-group.sc-smoothly-input-demo{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--smoothly-input-background))}.select-div.sc-smoothly-input-demo{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}.select-div.sc-smoothly-input-demo>smoothly-color.sc-smoothly-input-demo>*.sc-smoothly-input-demo,.select-div.sc-smoothly-input-demo>*.sc-smoothly-input-demo{flex-basis:49%}";
-const SmoothlyInputDemoStyle0 = styleCss$O;
+const styleCss$O = ".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)}.sc-smoothly-input-date-time-h[looks=\"border\"].sc-smoothly-input-date-time-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-time-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-time-h{border:transparent solid 1px}.sc-smoothly-input-date-time-h[looks=\"line\"].sc-smoothly-input-date-time-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-time-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-time-h{border-bottom:transparent solid 1px}[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=\"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:transparent}[looks=\"transparent\"].sc-smoothly-input-date-time-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-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],.has-value.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{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)}.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:pointer}[readonly].sc-smoothly-input-date-time-h,[readonly].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>nav.sc-smoothly-input-date-time{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));min-width:18em}.sc-smoothly-input-date-time-h>nav.sc-smoothly-input-date-time>smoothly-calendar.sc-smoothly-input-date-time::before{content:\"\";box-sizing:border-box;position:absolute;top:1px;z-index:9;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))}.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) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--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}@media screen and (min-width: 400px){.sc-smoothly-input-date-time-h>nav.sc-smoothly-input-date-time{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));max-width:22em}}";
+const SmoothlyInputDateTimeStyle0 = styleCss$O;
+const SmoothlyInputDateTime = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
+        this.smoothlyValueChange = index.createEvent(this, "smoothlyValueChange", 7);
+        this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
+        this.smoothlyInputLooks = index.createEvent(this, "smoothlyInputLooks", 7);
+        this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
+        this.listener = {};
+        this.color = undefined;
+        this.looks = undefined;
+        this.name = undefined;
+        this.changed = false;
+        this.readonly = false;
+        this.invalid = false;
+        this.errorMessage = undefined;
+        this.value = undefined;
+        this.open = undefined;
+        this.showLabel = true;
+        this.min = undefined;
+        this.max = undefined;
+        this.date = undefined;
+        this.hour = undefined;
+        this.minute = undefined;
+    }
+    componentWillLoad() {
+        var _a, _b;
+        this.setInitialValue();
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), !this.color && (this.color = color)); });
+        this.smoothlyInputLoad.emit(parent => (this.parent = parent));
+        !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+    }
+    async disconnectedCallback() {
+        if (!this.element.isConnected)
+            await this.unregister();
+    }
+    async register() {
+        Input.formAdd(this);
+    }
+    async unregister() {
+        Input.formRemove(this);
+    }
+    async getValue() {
+        const value = this.date && typeof this.hour == "number" && typeof this.minute == "number"
+            ? `${this.date}T${`${this.hour}`.padStart(2, "0")}:${`${this.minute}`.padStart(2, "0")}:00.000Z`
+            : undefined;
+        return TimeZone.DateTime.is(value) ? value : undefined;
+    }
+    async listen(property, listener) {
+        this.listener[property] = listener;
+        listener(this);
+    }
+    async clear() {
+        this.value = undefined;
+        this.date = undefined;
+        this.hour = undefined;
+        this.minute = undefined;
+    }
+    async handleChange() {
+        var _a, _b;
+        const value = await this.getValue();
+        this.smoothlyValueChange.emit(value);
+        this.smoothlyInput.emit({ [this.name]: value });
+        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+    }
+    valueChange(value) {
+        var _a, _b;
+        if (TimeZone.DateTime.is(value)) {
+            this.date = TimeZone.DateTime.getDate(value);
+            this.hour = TimeZone.DateTime.getHour(value);
+            this.minute = TimeZone.DateTime.getMinute(value);
+        }
+        this.smoothlyValueChange.emit(value);
+        this.smoothlyInput.emit({ [this.name]: value });
+        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+    }
+    smoothlyInputHandler(event) {
+        if (event.target != this.element)
+            event.stopPropagation();
+    }
+    smoothlyInputLooksHandler(event) {
+        if (event.target != this.element)
+            event.stopPropagation();
+    }
+    smoothlyInputLoadHandler(event) {
+        Input.registerSubAction(this, event);
+    }
+    onWindowClick(event) {
+        !event.composedPath().includes(this.element) && this.open && (this.open = !this.open);
+    }
+    async edit(editable) {
+        this.readonly = !editable;
+    }
+    async reset() {
+        if (TimeZone.DateTime.is(this.initialValue)) {
+            this.date = TimeZone.DateTime.getDate(this.initialValue);
+            this.hour = TimeZone.DateTime.getHour(this.initialValue);
+            this.minute = TimeZone.DateTime.getMinute(this.initialValue);
+        }
+        else {
+            this.date = undefined;
+            this.hour = undefined;
+            this.minute = undefined;
+        }
+    }
+    async setInitialValue() {
+        this.initialValue = await this.getValue();
+        this.changed = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b91630e12a53a88b621add76c83156eff165df34' }, index.h("smoothly-input", { key: 'eb8e905ec272ad5e25a8a6bc2949dc7557c3163e', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+                e.stopPropagation();
+                this.date = e.detail.date;
+            } }, index.h("slot", { key: '0c89403fb19dd4c2f19425de71b69fc67e4cb13b' })), index.h("smoothly-input", { key: 'fffd12e677884366cec8fa577d9cc06f05d2ba6b', name: "hour", type: "integer", max: 23, value: this.hour, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+                e.stopPropagation();
+                this.hour = e.detail.hour;
+            } }), index.h("span", { key: '721bc899728bc8f1958ac7ff1bcec96b513c9cb7', class: "colon" }, ":"), index.h("smoothly-input", { key: '5ec9ba0ddf7b1866e973cff57faa9e60fff75647', name: "minute", type: "integer", max: 59, value: this.minute, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+                e.stopPropagation();
+                this.minute = e.detail.minute;
+            } }), index.h("span", { key: '1db335e01b4a18d4060ec3e0b93717ee300ae6ca', class: "icons" }, index.h("smoothly-icon", { key: '424b458ceecb2bc13a6e7db55abcf886ba8b8313', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'fdc4b86bd2c629ce4607f68d8b4aaaa9fdd04a1e', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '4fcd8179e581b87139359376f45dceea3053b3be' }, index.h("smoothly-calendar", { key: '602bc90620a5907eb6693bd5632dec524ad83840', doubleInput: false, value: this.value, min: this.min ? TimeZone.DateTime.getDate(this.min) : undefined, max: this.max ? TimeZone.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: e => {
+                this.date = e.detail;
+                e.stopPropagation();
+            }, onSmoothlyDateSet: e => {
+                this.open = false;
+                e.stopPropagation();
+            } }, index.h("div", { key: '57f13f0f8fc6833910ccfd18f979d94a2a59d861', slot: "year-label" }, index.h("slot", { key: '92b21a2c02ee901a6a869a2d0425c38ba131eec9', name: "year-label" })), index.h("div", { key: 'ce44c4037973453993b70d3853964695c56ae131', slot: "month-label" }, index.h("slot", { key: '2ac14631753e1554926263649533e7ffe3e7a460', name: "month-label" })))))));
+    }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "date": ["handleChange"],
+        "hour": ["handleChange"],
+        "minute": ["handleChange"],
+        "value": ["valueChange"]
+    }; }
+};
+SmoothlyInputDateTime.style = SmoothlyInputDateTimeStyle0;
+const styleCss$N = ".sc-smoothly-input-demo-h{display:flex;flex-direction:column;margin-top:2em;margin-bottom:10rem}smoothly-input-demo-standard.sc-smoothly-input-demo{margin-bottom:2rem}div.inputs.sc-smoothly-input-demo{margin:auto;width:50%}div.inputs.sc-smoothly-input-demo>h2.sc-smoothly-input-demo:not(:first-child){padding-top:3em;margin-top:3em;border-top:1px solid black}.checkbox-group.sc-smoothly-input-demo{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--smoothly-input-background))}.select-div.sc-smoothly-input-demo{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}.select-div.sc-smoothly-input-demo>smoothly-color.sc-smoothly-input-demo>*.sc-smoothly-input-demo,.select-div.sc-smoothly-input-demo>*.sc-smoothly-input-demo{flex-basis:49%}";
+const SmoothlyInputDemoStyle0 = styleCss$N;
 const SmoothlyInputDemo = class {
     constructor(hostRef) {
@@ -9681,20 +9822,20 @@ const SmoothlyInputDemo = class {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (index.h(index.Host, { key: '2246e64ca0039a593a5e79c1b3cbec9f6cb61cd2' }, index.h("smoothly-input-demo-standard", { key: '2b37d1d772346558fc9877495c98ec484e443d24' }), index.h("div", { key: '989abdad396917b2bdfe9bc11140a1293546ac5c', class: "inputs" }, index.h("h2", { key: 'dcf89a34ee6e6397e5f714121724ef563dd3fd28' }, "Calendar"), index.h("smoothly-input-date", { key: '8e65b556c3fcf1a39323dd3a33d12a30b81e1dcd', name: "some-date" }, "Calendar"), index.h("h2", { key: '3cb4035f84892162377f96c19ee73680e03125d0' }, "Date Range"), index.h("smoothly-input-date-range", { key: 'c896e3bd9e37dbfb151be77e2c27703e0e6a2230', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: '40038ceb1fa825b4b690f68541a0f51f594899fc', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index.h("smoothly-input-reset", { key: '8c390691d230f83b3198d6b55320777570f5f583', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: 'ff17e15193315eb5f8114f30a926a9ecd04e989c', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (index.h(index.Host, { key: 'bd030cd65597dc446541f24cfb9d3fc1d5ac412d' }, index.h("smoothly-input-demo-standard", { key: '48970fba61877f440e86e79f7c222ed3441b1729' }), index.h("div", { key: 'fb64f49286af41f8a4b717a2f3e566b7c47bf0fe', class: "inputs" }, index.h("h2", { key: '3983fb393c4f9ea77d35977bef2e9bf7ac104bc2' }, "Calendar"), index.h("smoothly-input-date", { key: '9492d4a63cecd54b7e13d38d9337cfb3d384bf8b', name: "some-date" }, "Calendar"), index.h("smoothly-input-date-time", { key: '4a91871dde241c8ba8f147e1d6af88c002017294', name: "someDateTime" }, "DateTime"), index.h("h2", { key: 'ed728898866747df9675092f5ba3693de6658ae1' }, "Date Range"), index.h("smoothly-input-date-range", { key: 'c753295cdbc9dd6a428264d2797970ded914d384', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: '6e250d2b4d6a7089fa5fd6809da205b70900dec1', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index.h("smoothly-input-reset", { key: '06476baf5a51004188c1c34a063561a2663e40e2', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '0befc7f7e042b1913292233877f21159217c9325', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, index.h("smoothly-input-clear", { key: '011f43052221a7c6f3ef33f500bcfba46608c841', slot: "end", size: "icon" })), index.h("h2", { key: 'd791ba4122393a98eb6d81306e291412054e3b23' }, "Date"), index.h("smoothly-input-date", { key: 'ee353162eccaa90c518ef9190a5457228b50a6da' }, "Date"), index.h("smoothly-input-date", { key: 'ab3c9d81356be6e50d1c3d55ebfc0d9590884e0d', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '660520a7d8dc088129ee8675b418f80580369c84', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'b41ed6b1f2d86a014bbc8814ae3af5f2bf73a179', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '689789eb3bdd96e5d8bb592ecc54a46809dc571d', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: 'c84ce2579bd57ec36bab8936b9260516dfbff578', slot: "end", size: "icon" })), index.h("h2", { key: 'e9d4a3630cd7dfbc15496d326842036b89b779ed' }, "Select"), index.h("div", { key: '73b5029be3bcb583ae7acd529c3360ae490f6ab8', class: "select-div" }, index.h("smoothly-input-select", { key: 'b2bd70fa2d9db0949de37384281cefa5f733e607', name: "select-dessert", looks: "border" }, index.h("label", { key: '9e876f17a3d8fd4c9dd8df5f36537cbd5ed26cab', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '99bb1a1be67495f593aab6217417989ae138338f', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '4ddecda514f630ede33ff1fedcdca479ab1f365a', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: 'edcd18711aa60bd585bb35684bf4335be079534e', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '193c1b1a166cab555df2e0738a6dbf7d002a68c6', value: "4" }, "Cookie"), index.h("smoothly-item", { key: '148b0f60bec0b9afd7611301d47ff3cbda1bd60e', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '4c19e2ddcf1a804aaf2fc5f0c836c87f1c63536f', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '7fdc91054fc6694b3d9ed28fe58bbeb4ac7f3166', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '1dc6118a2716448a03a71c9004e37bd281a04fd8', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '1c9aad56585335964fb6fbdbb322155aed1d8293', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '1dcc6d0ae6890c8faf6fbd383d7cb49cffb4195d', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '4928df31718469ae0a122b196d2da6049e08e27d', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '804e3d867fdee5b41a691fefb18e1e0c1efa675d', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '47e18869a33e35c711b0af238c711c49a74a2f00', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '2141bd943ddc5f23bd2e5d5340fe1c056b733767', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '383060f11d35eaff155b922d0b4b2d7461d3ccf1', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '997c4890240d191098f752d9a608f292f5e4285e', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '4e4941d8eb6bbf6290283a71d88ef63cdabed4b4', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: 'c5b5bdcdd54a7b3f53807b2c91deb0eacc4df76c', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '7b984ebe49e44df568bf8afa71ac316f55c930aa', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: 'ceb8e73087957269cb47bb09552a5972dcc83da7', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'dc9c4ba90d0ee6c4158abf3cddede72bd04e71d1', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'edfbf4fa6aafe1588e5f3d805949f837f1e9cfbc', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'f46beb751b4e5394ca24fed76addc9a7931fa382', value: "camera" }, index.h("smoothly-icon", { key: '8b976d68da995707e36ff599f81343b9028bce45', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'a92187babd4d365532b86fbbd7fb0f81dc277821', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'c03b7c86c8762080854546f7f0257ea7b5e8d488', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, index.h("smoothly-input-clear", { key: '21c4d4c7541271c72c3c13f14bccd8856d5e3dcb', slot: "end", size: "icon" })), index.h("h2", { key: '1a498fcb1f1c2d0f9400f6c71a0129007e8323f0' }, "Date"), index.h("smoothly-input-date", { key: 'b09115b4c3b705ddbd807dac227c79db1ed11604' }, "Date"), index.h("smoothly-input-date", { key: 'ad4a135a953ed967d22ac1055121dbe68e1da8cb', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '0a31abc77be84e3f455b6531e497e2cd99fffc6f', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '2fa8c8425ad2c89077d188bdf7d5980a443956c6', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '5f5577d58b1bbb446224b054e8a466067a2e566e', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: 'b99fa7a286cadcd231876e2cd4d16bb86d3637b6', slot: "end", size: "icon" })), index.h("h2", { key: 'dfa76679f64f191fc0914d89e79509e5d1e87b76' }, "Select"), index.h("div", { key: '860068bf02fb5d474ad2d4fd9670fd14827a5a6b', class: "select-div" }, index.h("smoothly-input-select", { key: '8338989675f796717e1c168b0ddfff72b93fe222', name: "select-dessert", looks: "border" }, index.h("label", { key: '9fa799005499b92ef1ef40f9b3f6ade45646af08', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '654e0e78bb9ba8424df8325c97b2e53980bf9ec1', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '0369c56be001ecc5d5dffb349e2b342e066a357b', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '6ac437ff8212a72c11ccd30f52bbda19a3b7fb70', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '32ef338e00727c6fc929fecd29006c0b83a7557d', value: "4" }, "Cookie"), index.h("smoothly-item", { key: '613336b8d64e3582f55a24fd89b0a66b34b16a0c', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '6b4199ebc54034bf8800c1d54badfdb661035a66', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '69d7a03aa328a182cedec77a8c672598739d4aff', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '50740d2a962a92e4212fe00c15e64538167660b6', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '1a22d92eb24adcf3677a6425f6b739f6a34fdc5a', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: 'd0782ceb0eaf4c1fc5997bc9f4ac1c4e1b9be92b', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: 'e7ebf25f9b96fdba66675a8734125fd64d1579ea', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '9ffa56608f6cb8cf21dee6538b2dff65aabb6896', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '69d72058a7459a40618bfbc62acbd4abecc06728', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '85dcf6ffee512211c4fbfedf6d74c4938d7d22d3', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '90c19782f7688fd0cd2c1d719644c4d168d62ab4', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '5deffe68bfc5b4965bbe01a9fd9bb63319e153d2', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '109ba2d0710c4b200ef59731b13afb0a52723c73', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: 'a25f8772e90320e7c04c4cd917cda31f9467afbe', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: 'e31d743c1a7d92c416966cd12145b33ed9dfdffd', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '4ca8ba334e27d4f10dcb77097c2c729921d801ab', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '99b0a07001ab977dcc02c7a7e9fe8d337811d76e', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'fd6fd5d8d5126d7c4d96dfda6b9cd92c6d122233', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '727405ad83421d2613875de3ca8f601fc30c4523', value: "camera" }, index.h("smoothly-icon", { key: '2975e0cc3c5ffddef39d511a6e4f6c15a5074bdd', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'a19804ab108f04c5c82000385e99d80ce028d6bb', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'ecf23cae08369581bf7aee826899722985699e8e', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: '50afad9842162fcd31c852082016e02197670682', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '8979507659fe2ea3bde09d62fcda6b0e0958f8d1', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'b5943c4ffa028794ae353751d9f6f54cb9de8729', value: "1" }, "January"), index.h("smoothly-item", { key: '715dad0e6198ae650b92216671adcb4f55e38595', value: "2" }, "February"), index.h("smoothly-item", { key: '5e1c9571dd3e85bfbb662d37e332686f2e995c88', value: "3" }, "March"), index.h("smoothly-item", { key: '035d61411f7338aa13be7cd5a6e3033416c4d7d5', value: "4" }, "April"), index.h("smoothly-item", { key: 'f01102310093062173127c830235f72c854f3a72', value: "5" }, "May"), index.h("smoothly-item", { key: '10e7fb2d176bb14e93c5b3c208b559eec05b63b2', value: "6" }, "June"), index.h("smoothly-item", { key: 'b7e84c66de94608b6435c69a25d7558e93c9f92f', value: "7" }, "July"), index.h("smoothly-item", { key: '92a1692fb3399e45f6c1daabab735a5151f7cedd', value: "8" }, "August"), index.h("smoothly-item", { key: 'c69002d6ef0ffec601898f2da9bfb2093f87b131', value: "9" }, "September"), index.h("smoothly-item", { key: '1ddfa11c9807052c4dfc35b21edc197dbe292534', value: "10" }, "October"), index.h("smoothly-item", { key: 'bc5927fa54de0dacd80ae937892d5ce0c9a2d435', value: "11" }, "November"), index.h("smoothly-item", { key: 'a3d0cd6e6c3f348c294d91cb54484f84f9d51ef5', value: "12" }, "December"))), index.h("h2", { key: 'ad2d4f82623153c04d76dc435ee9b62d02ae2400' }, "Duration"), index.h("smoothly-input", { key: '4f4cad2567f82920fcb7dd3c66a82b720e0dfbd4', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index.h("smoothly-input", { key: 'a00c994eb83ce0d9123d1c07d7a4baf19e8a0a29', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: '779b3ee7a1eec91bfc2e3295c0a5cd99ea726440', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '7c32c78c7b198696cec277a124bfd6748f8af43f', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'e4f6bc86bfeac3d52a561dd8ad4756cef73a20a4', value: "1" }, "January"), index.h("smoothly-item", { key: 'eb2589865406273ea5adbb280f7909a732e458eb', value: "2" }, "February"), index.h("smoothly-item", { key: '990db0ce79995ecb5b455e78236e8c4143259f58', value: "3" }, "March"), index.h("smoothly-item", { key: 'b1d6f4eb819f79134697047871b654e845150aae', value: "4" }, "April"), index.h("smoothly-item", { key: 'a57049a4639696a292d49288211bc2ef97c00122', value: "5" }, "May"), index.h("smoothly-item", { key: 'cc468b4e2e2f86bff724b5bb3341971d7ed1cf40', value: "6" }, "June"), index.h("smoothly-item", { key: '3baf857f08c901e24b68dc0aa339e4b836ced8fa', value: "7" }, "July"), index.h("smoothly-item", { key: '711c44731260b088a807f04c6222b51ce783a94d', value: "8" }, "August"), index.h("smoothly-item", { key: 'a68dcda92067e518e54e60cafceec9a638562c7d', value: "9" }, "September"), index.h("smoothly-item", { key: 'b3bc287d15d422e41555eea483f40cd242105631', value: "10" }, "October"), index.h("smoothly-item", { key: 'b3ce5911f978966c78141c6d70b6aa1c5eafa523', value: "11" }, "November"), index.h("smoothly-item", { key: 'e32a2a4fc145fb6e363575938ebe0aa708c8c9a0', value: "12" }, "December"))), index.h("h2", { key: '64dd3e86e8a487be0aaf8dcbb6071d87e9c4288a' }, "Duration"), index.h("smoothly-input", { key: '3bb1ddd7668f54ce7e4b79847823f916cc2d4833', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index.h("smoothly-input", { key: 'a8bd44078817e42baeec1099344aec950c8eeb0d', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), index.h("h2", { key: '91506193cc92d0c1f497d74031b2be1192b2beca' }, "Integer with Min/Max"), index.h("smoothly-input", { key: '481aa0956f649040e9f43d2a7c62804bb92efef9', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index.h("smoothly-input", { key: '38a054ca282fafdd961218f7e6da5760307fddf1', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index.h("smoothly-input", { key: '5332e8aa8b06b66427337f2d1ff8f51a8511e382', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index.h("smoothly-input", { key: 'eb44b024a1302cbb48d8bb6e34ba3f8cda2cd919', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index.h("h2", { key: '4b990e9c2dde97a9f15f9b7c4b87156abab06cbf' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '71bdb7feb20f18c2a37dc4860ff3a9202eacf8ac', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index.h("h2", { key: '2deb15192feae3b18f0c8d0a0398a12a5bd81d21' }, "Identifiers"), index.h("smoothly-input", { key: '2e0243a190b1c2280bac015a66516a5fe372258d', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: 'ff873320ab3c15d5cfbb9869b6c62aaf74900cea', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '68246a134a3fc98450ff3fdcb6129ae416e24541', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'e5b5a8a769712436c498a6728cd8c678709256ce', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'd8187ead8f3f1a2ccb9ad5255b74b00ea6dcdb81', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '84ddb5eea8bbc25670b623966ee44acb66985435' }, "Input Alternatives"), index.h("smoothly-input", { key: 'a4cc2d53f80a569c0fc5aff4002c0d3122d0ef90', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '96c373625202143aeaba7c9c521fc0def6e319be', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '6a681ff90c7c95a22d7e6a7567ee5efd8bdec07f', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '1b11a1e1a295a123126640c4a481af89df6bcec9', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '7ca34d9ae381a0b12c265866ac3f771726eba93d', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '2ff4650c1f7b3f48c6f9828523c7f07de7b4fa85', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '061310e54b36c9c75a87e3e18fbba4112b91cb1c', placeholder: "test" }), index.h("smoothly-input-submit", { key: '99698172c9514334dedac33b8c2fc6548b88fbaa', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: 'ad71dff1660186bba82f34191b0ca60efae720d7' }, "Smoothly checkboxes"), index.h("div", { key: '5718011f939a0878ab8ea3afaecbda302e31c73b', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '5b5ba10540de4438e2c10b6c02d0fad978d515a4', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '0e718adc3894003b058826ea301d2c754ae8c1f3', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '15135f72968c4d699acc9e68bb5e5cd816665087', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: 'ae3d257b11cecf9ef2eb97493acf4fb3cbaf3b40', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: 'c27de2287e7659e8e48380f67d02d0408cdb51a2', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '8eb99fac6b762993b72d224e1323579b6148d5f6', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'e5dd8c9ca4c8be3222ea3f9aa55f669d4028e5d6' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '77070459eecd7514acb8601ec93a37b9450168e3', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '9e3d161e5c499fc80a5945adeacf1144e92df785', name: "checkmark-circle", slot: "start" }), index.h("label", { key: 'aa6324183b7a0826e7c3a25494ae074b436c174d', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '02694e25f144985698a0ef92ea53c3659ab84290', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '09d2c82fd813ed5181073ab3dc7725b42bd47f4e', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '2772c21b13d27b3d9a1a800e4f008a838bfe65df', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '60e95d7e3fbcf1d36b1c36ddbc6994e92a3750c5', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'bbd63cb0a3ebda2cfef6221e61ea0b5cb31380d4', name: "radioSecondInput" }, index.h("label", { key: '4f482e6d096f536aef54c7326bd78d3bf156b8ab', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '761efe9c3501c0d2965ad4105733df91934841f9', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'd9d6ca775c01be53e0bec4d213c62d6d37958a35', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'fda64767508f76c7343baa564d5fabde05f125b8', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '6e7ba43e516578bf7977b4a3b71cb4c3488d9d1f', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '6de5860b06e1dd083818bc46c2c43cdd672e3bfa', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '2e3e2e0cf07b6a69aa8b38bad85c7dc4082ca70c', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '4d19c2422d932957c98829a27692dd13a0125b34' }), index.h("smoothly-input-color-demo", { key: '8a811c4a90aa12b89a98513e9a91bc176d346296' }), index.h("smoothly-input-price-demo", { key: '93e80a88afa678602c2ba2e84cfc7e49ab15d993' }), index.h("smoothly-back-to-top", { key: '8f02b74e7694f5ebfc62639540c4a3994c6a1ff8' }))));
+            } }, "Duration"), index.h("h2", { key: '007a375de5accedbb762d8b83bc2fb09b8bf71eb' }, "Integer with Min/Max"), index.h("smoothly-input", { key: '3fdbcf4f8783c97fe95c913517e080d2faa8fc48', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index.h("smoothly-input", { key: '0f5e00f4ce6842e79460ad747e174e44fa5e89d3', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index.h("smoothly-input", { key: 'b88fe2f25c042c266444b057b5e0720c058949b8', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index.h("smoothly-input", { key: 'f70228e94f56b5341cbcacde7c00752f39c0a342', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index.h("h2", { key: '69d5956905ea5d5019ca18609c84136f5e08311f' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '2558a73dc2ab53f7bf519de70211a6441bd6e7fd', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index.h("h2", { key: 'c646543bcb0069f68ff0072dfaa5c87f7ee065f1' }, "Identifiers"), index.h("smoothly-input", { key: '55c5f11292cffde45c1dff83ea9cc8a4c3ba8c63', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '8d94288407aa48695116137b66ebce22359e4da3', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '7ff78f3ec42a4cb24c833aff16c7452fbd6108da', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '1293e1290677a9519a2585780ced38b2b6ab114a', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '02a8cfc971567b7465fcc728281cca7ab5c4df6b', type: "identifier-camel" }, "Camel"), index.h("h2", { key: 'fe2a6d90339da04f907c6998b6136e4f03f6e7f5' }, "Input Alternatives"), index.h("smoothly-input", { key: 'bb2a5423dc38b916a0e17106c356b4ce1ccfa9ee', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '2107ec068880beb4a0b81c052f2c480a8ab75c23', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: 'b8ae3c1696ecb3ec2762e7ad22f9092c03a26f6c', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '20ffd92119130d2f5f5f2be6cbad92fcf2f04d3f', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'f0e71272453666dee716d5843f624dfb2d19ac8b', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'd0d332dbd33fee1eaf04356770d8dd75e99e0ef1', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '7f0c1dffcf57a4e04efd84a75d7716d5f751edc3', placeholder: "test" }), index.h("smoothly-input-submit", { key: 'e1c249ba181bda518b8ae6e42bec3e64f0de912f', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '9ecf823237b64d80bd89e825566996c0e621de7b' }, "Smoothly checkboxes"), index.h("div", { key: '16ab41c09598792394edd7d3787a24afba2daaad', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '111da8a9444296fbb565d57b2ea1d39eec0180b9', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: 'd276ec29ccf45f258163f050e5ca38f4bd12e710', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '8abb23a4354a4286ecd8907ac60ebe4086cffe83', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '026dd5e61866414dfdc5664417ae49eddfa168d1', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: 'afdec3faa35888dabd23ed53a519e916b466c10a', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '980567631cf0cffc65dcba1fea4ddee4da9fba58', name: "third-checkbox" }, "3rd")), index.h("h4", { key: '55f605aec0e4eb81660d17586be2b9d714d757d5' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '15de298428d587ec3ce19561dfe733859b1a03d6', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: 'acda2bc78669b971b76a4f1128a6500ab4d57155', name: "checkmark-circle", slot: "start" }), index.h("label", { key: 'd75d21ce1da802c3bc5f710c7e4d214106bcc71b', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '16d6d75fb270914a4e8e3fc96551b28fc1cbd331', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'e4fd5bd8b82d749eb7cc1dacc0bb45700f986f60', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '037d11ac2efce32ec15159ee16a240824958e714', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '587b52fcb9170f3928551a777c1291320ec1f663', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '9d2b478a87e7ea4c27b34848990927bb9a9267e6', name: "radioSecondInput" }, index.h("label", { key: '888899d2302306a894f6994ad8144a08bde6c6dc', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '08ea4e8d6a2a13205ed055d67266a69641fc0bd0', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '6dbf35874170c3454b6a7d6a8e8c281ec87a8c05', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'cc5ccf1b6868d4f8f190aaf0b7344f3507f2d4bf', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: 'ce0f319e6d80d0e7f40cee97b4b1e1ec43cb4e4c', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'd1cd2206eded30d2d48c884b58f31637554071c4', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '6e5b5e4ac6a1202cc19f3dbff918776f51d933e9', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '6ea3a94f2cda8ea28b16f7c288e96bc062ba1337' }), index.h("smoothly-input-color-demo", { key: 'ccfd27207b7e4fbd1368a8388da278458446a446' }), index.h("smoothly-input-price-demo", { key: '073c1078788a9cde9396785f6a42408fc7d3e6a6' }), index.h("smoothly-back-to-top", { key: '22c39ca143dfc5abc8cb00a5f43627afb239b9cd' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
-const styleCss$N = ".sc-smoothly-input-demo-standard-h{width:50%;margin:auto}.sc-smoothly-input-demo-standard-h h2.sc-smoothly-input-demo-standard,.sc-smoothly-input-demo-standard-h p.sc-smoothly-input-demo-standard{margin:.5rem 0}div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;margin-top:1rem;grid-template-columns:2fr 1fr;gap:1rem;position:relative;justify-content:space-around}div.input-wrapper.sc-smoothly-input-demo-standard>[name].sc-smoothly-input-demo-standard{grid-column:1 / 2}div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard{width:100%;text-align:center;border-bottom:1px dashed black}div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard{align-content:center;grid-column:2 / 3;border-left:1px dashed black;padding-left:1rem;content:\"hello\"}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{width:0.5rem;grid-column:1 / 2;white-space:nowrap;overflow:visible;position:relative;cursor:default}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard::before{content:\"\";position:absolute;width:100%;top:1.5rem;bottom:-1rem;border:1px  dashed black;z-index:2}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard:hover::before{bottom:-100vh}.vertical.sc-smoothly-input-demo-standard-h{width:100%;row-gap:0;position:relative}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;grid-template-columns:repeat(auto-fill, 14rem);gap:.5rem}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{display:none}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::before,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::after{content:\"\";pointer-events:none;right:0;width:100vw;position:absolute;z-index:2;border-top:1px dotted black}.sc-smoothly-input-demo-standard-h:not(.vertical) .guide-lines.sc-smoothly-input-demo-standard{display:none}.guide-lines.sc-smoothly-input-demo-standard{text-align:end;justify-self:center;align-content:center}.guide-lines.sc-smoothly-input-demo-standard::before{top:1rem}.guide-lines.sc-smoothly-input-demo-standard::after{top:2rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::before{top:1.05rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::after{top:2.3rem}";
-const SmoothlyInputDemoStandardStyle0 = styleCss$N;
+const styleCss$M = ".sc-smoothly-input-demo-standard-h{width:50%;margin:auto}.sc-smoothly-input-demo-standard-h h2.sc-smoothly-input-demo-standard,.sc-smoothly-input-demo-standard-h p.sc-smoothly-input-demo-standard{margin:.5rem 0}div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;margin-top:1rem;grid-template-columns:2fr 1fr;gap:1rem;position:relative;justify-content:space-around}div.input-wrapper.sc-smoothly-input-demo-standard>[name].sc-smoothly-input-demo-standard{grid-column:1 / 2}div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard{width:100%;text-align:center;border-bottom:1px dashed black}div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard{align-content:center;grid-column:2 / 3;border-left:1px dashed black;padding-left:1rem;content:\"hello\"}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{width:0.5rem;grid-column:1 / 2;white-space:nowrap;overflow:visible;position:relative;cursor:default}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard::before{content:\"\";position:absolute;width:100%;top:1.5rem;bottom:-1rem;border:1px  dashed black;z-index:2}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard:hover::before{bottom:-100vh}.vertical.sc-smoothly-input-demo-standard-h{width:100%;row-gap:0;position:relative}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;grid-template-columns:repeat(auto-fill, 14rem);gap:.5rem}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{display:none}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::before,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::after{content:\"\";pointer-events:none;right:0;width:100vw;position:absolute;z-index:2;border-top:1px dotted black}.sc-smoothly-input-demo-standard-h:not(.vertical) .guide-lines.sc-smoothly-input-demo-standard{display:none}.guide-lines.sc-smoothly-input-demo-standard{text-align:end;justify-self:center;align-content:center}.guide-lines.sc-smoothly-input-demo-standard::before{top:1rem}.guide-lines.sc-smoothly-input-demo-standard::after{top:2rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::before{top:1.05rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::after{top:2.3rem}";
+const SmoothlyInputDemoStandardStyle0 = styleCss$M;
 const SmoothlyInputDemoStandard = class {
     constructor(hostRef) {
@@ -9717,14 +9858,14 @@ const SmoothlyInputDemoStandard = class {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (index.h(index.Host, { key: '51d77335aa759b44bd7ccba2bb6e3078898c4242', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'd95115d3997c9c545df4bf1f63a5036aaefaba93', class: "description" }, index.h("h2", { key: '7a8ec01d924468b072950c545f3e5c8c27c9bd80' }, "Input Standard"), index.h("p", { key: '52e241e1121fab79f28de270ecc5acf40510b402' }, "Height of input should be ", index.h("code", { key: '16704073dc0dbd604996dfb54ce2d943d97cab8d' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '7028a903bea80c1ab23f8384daebc93dfee8b699', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '75daf9e2b01bf3a3332ba7e01756e610acc55965', name: "looks" }, index.h("span", { key: 'e8cc473335d3cdebea58e5590699a77880de24ae', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: 'dcccdc46fedc9dad02ef1c62108851abb59fa8f9', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: '75498be9e59857da131f741ade51e58a576b6d0d', name: "color" }, index.h("span", { key: '2bc085313684d4bbf833dab63cfae7d189007408', slot: "label" }, "Color"), Scrollable.Color.types.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '07e7e9bc348a7497a4162d6ae0edba6a6268d1c7', slot: "end" })), index.h("smoothly-input-checkbox", { key: '4a391a51a4433a69ad33533e24999b8032788e42', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '294f11e49b9d1649d6a01d7540401e34b55cb434', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input-checkbox", { key: '8696e0c1c6b5baa70a9541b516e883eddc476331', name: "placeholder" }, "Placeholder"), index.h("smoothly-input-checkbox", { key: '234523c9cda3ebc12d45e8e9875c4a8cdee280a4', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: 'cea03f719af69005952237149f31ce9805b4ced3', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-range", { key: '4cdd6b47c8e6129ff18a2751fef6d0cbce5bc39e', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), index.h("div", { key: 'fe02455d3c1352619432a8e0cdbe35268894b747', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '95d24203af3409983b41748485fbd3bea660e727', class: "width" }, "100%"), index.h("div", { key: '3f1ec5bba79988ef868aac7f44bfeaecb6251dda', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: 'd358a782913cbabff5d4203a771bd0d90dcf0549', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '2e6d53986d00071a5b3f04c27d4e677347c20c8f' }, "Text"), index.h("smoothly-input-clear", { key: 'ec6b56f05838eb88927a259c7d4d5ab24d391250', slot: "end" })), index.h("div", { key: 'fd5f0710017cb22c742012d26668920678a6e714', class: "height" }), index.h("smoothly-input-select", { key: 'a3751f0f8014e765130c1604f8eb075d67073cd1', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '687213bc8b3b92c5ea7f7d267a52c7b540c1be56', slot: "label" }, "Select"), index.h("smoothly-item", { key: '25f3e7b6ec843c7d6c5e2303448fcedeebefa894', value: "1" }, "January"), index.h("smoothly-item", { key: '0c4bcbec574fba829a4c55ff69d1a0a83e6eb2b7', value: "2" }, "February"), index.h("smoothly-item", { key: '5b5ebd31a59d355e45f03349382a6d26b10d5748', value: "3" }, "March"), index.h("smoothly-item", { key: '356fb573c06b2c52a31a21c8347a64bca92064e4', value: "4" }, "April"), index.h("smoothly-item", { key: '426fe3c47ef1f66238c59cc83fdb1112ce49c509', value: "5" }, "May"), index.h("smoothly-item", { key: '89cef888cd6e5976ebd31925ff8249539ce124f6', value: "6" }, "June"), index.h("smoothly-item", { key: '9cf73864df20b1ae2b3cf2ab97723b9e60547132', value: "7" }, "July"), index.h("smoothly-item", { key: '0a795461bb9076e3165cff3b26506ba29d9f9044', value: "8" }, "August"), index.h("smoothly-item", { key: 'e7c514f7335b7814836268ea845f7f6f1d673d0f', value: "9" }, "September"), index.h("smoothly-item", { key: 'd130ce9f3c4b680639ac0be2e9dbf08013cc919a', value: "10" }, "October"), index.h("smoothly-item", { key: '8897bd4fb1aabe6fc75f6f74e85b7ef66a000c5b', value: "11" }, "November"), index.h("smoothly-item", { key: '91b501ad9b3332d89593e4e38ba8f85defc90761', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '7ad82b23742ded62fb3dcfb116f7664a5b180145', slot: "end" })), index.h("div", { key: '1c4e7e135a81d8b2e2fe7107f2999b5485a72de1', class: "height" }), index.h("smoothly-input-checkbox", { key: '5fe26f93c0fa10a51ef7e05f28cd54b29c4a11c1', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '81680b9e029f56a1a5b682eb40f1d6eaf3a24f69', class: "height" }), index.h("smoothly-input-radio", { key: '7e03ecec04c22e77b824bb4890d8e6a96dc59f7a', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: 'ff6c03ba5aa902d352f6d64eab01f18264ad5d1d', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '7485d954a29a75d43b79aa3e02a5b936b255c855', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '6ddfbf0852ee6047257aee395fe176263ba417a9', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '33a1c8e763115e1ead15d1be7dfbf72eb97b2903', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '48365152688a60d1bff7f77596f4b2ecd8009741', slot: "end" })), index.h("div", { key: '73960a1d0313ea6a7572b696d095315162819738', class: "height" }), index.h("smoothly-input-file", { key: '4650361bb12bdd1f7d862adead506e2229859200', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'f61cf9a54c26176cbb2e4e5653b786f0992425c4', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: 'c1b2956204c419d41279356303ced0ac2baa6df8', slot: "end" })), index.h("div", { key: '334de9a57ba8f0f86f318ca639336bffe7aa1b28', class: "height" }), index.h("smoothly-input-range", { key: 'ff1a5a207b7a3ae0c8eb19edeb9c8ddb4cfce2bf', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: '1e16c10d2c5c9d6e55dcb96451413944b2e2cfc5', slot: "end" })), index.h("div", { key: 'e4e508d12a749659164628aaa378ae827e167d5e', class: "height" }), index.h("smoothly-input-color", { key: '8853163ee4f5a9a55fcb5c95452b014a98e8a663', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'a418bff13c7640784a3b63bf181f07644f24c259' }, "Color"), index.h("smoothly-input-clear", { key: 'ae106935cece376c36ce5e5adc24fce6b7978415', slot: "end" })), index.h("div", { key: '4bde174e16932e5fcbff4c0ba416a83b0b4c8ddc', class: "height" }), index.h("smoothly-input-date", { key: '53b575a2c07450900644e52d4aa208b7b4e862fc', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'a3b2900b15653c61cf6fc806267476c5e69f9529' }, "Date"), index.h("smoothly-input-clear", { key: '1ab17f116e24273c6d86d3ddd839a2ea25e30b7d', slot: "end" })), index.h("div", { key: '522a5fdea537b227e24d7841223d48540394d362', class: "height" }), index.h("smoothly-input-date-range", { key: '9850bef1ee238ff2d5bb6d79a394788643da63c1', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '26b71f937197762e5b3bf523ed0d3436872d0efd' }, "Date Range"), index.h("smoothly-input-clear", { key: 'd3e283f1a6aabb2b5d4fabf6ff37e5046ee3598d', slot: "end" })), index.h("div", { key: '34625f7dec1ddda4d3b2cd3f19075897a37d3f23', class: "height" }), index.h("div", { key: '22e18c044fb0cb4b58601fcf5c13b2fc6f42ade2', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (index.h(index.Host, { key: 'de263fcb354f733b7c45d27c9da92afb713005de', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'a5bb2c198b1d03a0b59aa60fb1123565bd577bef', class: "description" }, index.h("h2", { key: '001fd89705f0de2b68543d32b260f266dd5b2acb' }, "Input Standard"), index.h("p", { key: 'c9647b3a8273e11232ab0489de6cda903c000bfb' }, "Height of input should be ", index.h("code", { key: 'f8b7ecd444731af34cf53ff1983e8881a49122cc' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '15aba848a0f8577d63288d4f700626a204329479', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '1100293141ecc3097d44914f58aa7ba000503835', name: "looks" }, index.h("span", { key: 'c98134d09236e016adcfe51425d2db903e5047f3', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: 'c017cac1097911d793aca39454994a8d560ab932', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: 'e99c69ed5ac3008f7fbc8ca5c59784fa7bc0f576', name: "color" }, index.h("span", { key: 'a8c635c750aa06f5b5544ea2d373947fdc1a142c', slot: "label" }, "Color"), Scrollable.Color.types.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '1c3af2de2f529ecbe093dcab9047cdd9c5e6ae92', slot: "end" })), index.h("smoothly-input-checkbox", { key: '16b8e0b74cd12d55d4862f5c499e068d6f4814ae', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: 'c089bb813ea18f38af5463f7c3cac1f7c5805b4c', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input-checkbox", { key: '1de2bd59148bcb812949344672a69c0ba4963385', name: "placeholder" }, "Placeholder"), index.h("smoothly-input-checkbox", { key: '3e000c9a90d8d66eaa2c8a7db56862f5a9a78549', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: '00d9a8869e2c0df4d3cae76f356ff7e42c122053', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-range", { key: '86380587334ba3b519e9e6478f1cf14b12692120', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), index.h("div", { key: 'ba9ae64451b08bf42f9dd5edd5fcb55b604eb309', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '723f3fba574b2a1bede3fcadee45cb33829597b9', class: "width" }, "100%"), index.h("div", { key: '2df55415c51721944ce665005e074c8f04a083b7', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '48094488a4af45ea683caec91f8db0f67e31ff38', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'bd911bebda02a89ac603e9820603fce338bfed1a' }, "Text"), index.h("smoothly-input-clear", { key: 'd200a4450a1aaa7abd338808b8408075e0791122', slot: "end" })), index.h("div", { key: 'eb264b6502aa4cdc560948ae3d23557f617afdb9', class: "height" }), index.h("smoothly-input-select", { key: '9f16fef9e992e6274513ad5fa96a72486f4d47d2', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: 'd96137483872b33e888cc293b1d85fbe4292ac7f', slot: "label" }, "Select"), index.h("smoothly-item", { key: 'e52459d514781264ca52b100ef1206aa0a2e97a8', value: "1" }, "January"), index.h("smoothly-item", { key: 'e20b7fe03f95b662026f9d9a0538c5eae6d8312e', value: "2" }, "February"), index.h("smoothly-item", { key: '6be0baed01cf201a66ba024d4f0c3f8d22aa9f03', value: "3" }, "March"), index.h("smoothly-item", { key: 'af1ee45bc454e20d23de362333909d2757f8915d', value: "4" }, "April"), index.h("smoothly-item", { key: '17eec6ef0c42e7b32f972e3025519a0f29be7ade', value: "5" }, "May"), index.h("smoothly-item", { key: 'fff4f0efadf5778c03dda4756317a36f97741bce', value: "6" }, "June"), index.h("smoothly-item", { key: 'a53cf760f347b27259bf66304d02f0aab33aebd4', value: "7" }, "July"), index.h("smoothly-item", { key: '24589997b25f019074f23928e9e6cded04ece573', value: "8" }, "August"), index.h("smoothly-item", { key: 'aa4552c0566cd568af9f110cabd94c431c3695b3', value: "9" }, "September"), index.h("smoothly-item", { key: 'bc334c06a80ae4ea9ba1b9f0c256e2390acbf82f', value: "10" }, "October"), index.h("smoothly-item", { key: '3ca782df9d142d204c5d1e95ceb0467a95e6a3bc', value: "11" }, "November"), index.h("smoothly-item", { key: 'dd162834edca16a0892e7ea10df3ea640a1f7620', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '490aba5147e8256b80ba4de6b90afb40166511d0', slot: "end" })), index.h("div", { key: '8142fcfb3320f314729ae996f115a96f34c068a1', class: "height" }), index.h("smoothly-input-checkbox", { key: '438a7d7a316ecb4712cd82dd221f249e106e10d5', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '0fa8978737d54ba0ca1e0cfb042fcebada5c1391', class: "height" }), index.h("smoothly-input-radio", { key: 'ca7489384a720c97b6df133d801e5c4e702e7346', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: '05bfc0ff6a33d1216376322e63d3c5fece6d16e3', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '346470b82dcbd9691788a10c397421e90182e9c4', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '76fd8143e515d21e4e23a5b16b455ae698250c71', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'c1583d971c2c43031ccd32eedca823a34250b460', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '3f0eb60a2e48410eec1f7b7bb8cf6a20c795df57', slot: "end" })), index.h("div", { key: '690b0e2ef851024c1af7d5439b90c3c3ac96b976', class: "height" }), index.h("smoothly-input-file", { key: 'b1f6732985dd8e9c9df77b4146e54e4b1102886b', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'b665efe03d3fc2d2bee7b6a51627109f72021467', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '3c3cd633d0ebba3f8d6a711794b379cc775253a1', slot: "end" })), index.h("div", { key: '41c4eccafeee73f25cf68348edead6a5c1051644', class: "height" }), index.h("smoothly-input-range", { key: '8ce76f4826b729bc899b3d8c97d5f4e587c19205', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: '11dd9083e52faa37e108a401f1467349684f9d7f', slot: "end" })), index.h("div", { key: '06d731a29d29c30c6bb1de1b17bc8f1270b7cfd3', class: "height" }), index.h("smoothly-input-color", { key: 'b25fa3981deb62c8ed8dee0a27eee97be6655202', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '9b7e4eea225c84df9cdcac3f9ec116a6f5980873' }, "Color"), index.h("smoothly-input-clear", { key: 'a0f753f918eee48c05156d760df54b12b7c87d6b', slot: "end" })), index.h("div", { key: '5a9455614ff3feb7bf2485ee46da3ac997462c6e', class: "height" }), index.h("smoothly-input-date", { key: '2eb9bb8ced413f46d9149b7e5c50b9f3d2dcfdfe', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '58290ed48ed5183fc841a56d2fb98e3120051e48' }, "Date"), index.h("smoothly-input-clear", { key: '3a6d6bebe35cec71c345ae4d3e7c8de5dd3f7ec3', slot: "end" })), index.h("div", { key: 'a48aea4999abf825d6d74da41aecc786ddb7dbf6', class: "height" }), index.h("smoothly-input-date-time", { key: '385c0209e121cdd0ce9799380f577311d6940472', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, errorMessage: this.options.errorMessage, color: this.options.color, showLabel: this.options.showLabel }, "DateTime", index.h("smoothly-input-clear", { key: '9e5c18056b1ccc3de40d80096417e8938bced6e6', slot: "end" })), index.h("div", { key: '1f25ae689458771b60009c88540387e8a7d7379b', class: "height" }), index.h("smoothly-input-date-range", { key: '87daa2a1cbdd2294671655485c43be3b2c00cad0', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'a0d962e5d74219fb6694cd78ddd3215e5948ce73' }, "Date Range"), index.h("smoothly-input-clear", { key: '81c4172e55d254afbe7bc96a1340725edd3f506f', slot: "end" })), index.h("div", { key: 'ec0580394a02e9358f50dee4d4560c5140f648fc', class: "height" }), index.h("div", { key: '0ecb5fd93d490be1edcf70f93fc356aa99532c69', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     get element() { return index.getElement(this); }
 };
 SmoothlyInputDemoStandard.style = SmoothlyInputDemoStandardStyle0;
-const styleCss$M = "[color=default].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-edit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-edit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-edit-h{display:inline}[disabled].sc-smoothly-input-edit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit:empty,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:empty{border-width:0}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-edit{padding:0.8em;min-width:8em}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-edit{padding:0.6em}[size=icon].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{padding:0.5em}[type=button].sc-smoothly-input-edit-h>a.sc-smoothly-input-edit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:100%}[size=large].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:130%}.sc-smoothly-input-edit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-edit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-edit-h{width:100%}[expand=full].sc-smoothly-input-edit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-edit-h:not([fill=clear])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-visible,[fill=outline].sc-smoothly-input-edit-h:active>button.sc-smoothly-input-edit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:hover::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-within::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:focus-visible,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit,.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>smoothly-icon,.sc-smoothly-input-edit-h .sc-smoothly-input-edit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-edit-h{display:none}.sc-smoothly-input-edit-h:not([display]){display:none}[editable].sc-smoothly-input-edit-h{opacity:0.5}.sc-smoothly-input-edit-h[type=\"input\"].sc-smoothly-input-edit-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-edit-h smoothly-icon.default.sc-smoothly-input-edit{transform:translate(.1em, -.1em)}.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>button>*+smoothly-icon{display:none}";
-const SmoothlyInputEditStyle0 = styleCss$M;
+const styleCss$L = "[color=default].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-edit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-edit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-edit-h{display:inline}[disabled].sc-smoothly-input-edit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit:empty,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:empty{border-width:0}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-edit{padding:0.8em;min-width:8em}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-edit{padding:0.6em}[size=icon].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{padding:0.5em}[type=button].sc-smoothly-input-edit-h>a.sc-smoothly-input-edit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:100%}[size=large].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:130%}.sc-smoothly-input-edit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-edit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-edit-h{width:100%}[expand=full].sc-smoothly-input-edit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-edit-h:not([fill=clear])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-visible,[fill=outline].sc-smoothly-input-edit-h:active>button.sc-smoothly-input-edit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:hover::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-within::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:focus-visible,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit,.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>smoothly-icon,.sc-smoothly-input-edit-h .sc-smoothly-input-edit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-edit-h{display:none}.sc-smoothly-input-edit-h:not([display]){display:none}[editable].sc-smoothly-input-edit-h{opacity:0.5}.sc-smoothly-input-edit-h[type=\"input\"].sc-smoothly-input-edit-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-edit-h smoothly-icon.default.sc-smoothly-input-edit{transform:translate(.1em, -.1em)}.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>button>*+smoothly-icon{display:none}";
+const SmoothlyInputEditStyle0 = styleCss$L;
 const SmoothlyInputEdit = class {
     constructor(hostRef) {
@@ -9756,13 +9897,13 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '40cf13a8c918c5bfce683ada0757c851cbe3a2f8', title: this.toolTip }, index.h("smoothly-button", { key: 'fccee205cf5c287d317afd1110e8a21312405c26', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: 'd1ce1696be9b41b890f5f7a5b3652a63083e4a6f' }), index.h("smoothly-icon", { key: '56a803c1cbfe6547cfae7c1c3a94d930617e6816', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '6148985a959240601fba96041adfb4167a3735a6', title: this.toolTip }, index.h("smoothly-button", { key: 'f8725893e823516e52e6ffd9edcf5ae9fc8469c7', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: 'bd6e5dde1d16948a0b1d37d8159691b11e8cfde2' }), index.h("smoothly-icon", { key: 'f7d6ea2902dc37c4f75d0bae84985af5c89fa88b', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
-const styleCss$L = ".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)}.sc-smoothly-input-file-h[looks=\"border\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-file-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-file-h{border:transparent solid 1px}.sc-smoothly-input-file-h[looks=\"line\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-file-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-file-h{border-bottom:transparent solid 1px}[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=\"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:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-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],.has-value.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{display:flex;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{margin:0;border:none}.sc-smoothly-input-file-h>label.sc-smoothly-input-file{left:var(--input-padding-side)}.sc-smoothly-input-file-h,.sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:pointer}[readonly].sc-smoothly-input-file-h,[readonly].sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:not-allowed}";
-const SmoothlyInputFileStyle0 = styleCss$L;
+const styleCss$K = ".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)}.sc-smoothly-input-file-h[looks=\"border\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-file-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-file-h{border:transparent solid 1px}.sc-smoothly-input-file-h[looks=\"line\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-file-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-file-h{border-bottom:transparent solid 1px}[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=\"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:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-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],.has-value.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{display:flex;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{margin:0;border:none}.sc-smoothly-input-file-h>label.sc-smoothly-input-file{left:var(--input-padding-side)}.sc-smoothly-input-file-h,.sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:pointer}[readonly].sc-smoothly-input-file-h,[readonly].sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:not-allowed}";
+const SmoothlyInputFileStyle0 = styleCss$K;
 const SmoothlyInputFile = class {
     constructor(hostRef) {
@@ -9870,7 +10011,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '617289904025b51591bdd9fa9187f747750b97f2', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '3f5ddc4021cec796bd4d62c031451c646b5e980b' }, index.h("slot", { key: 'de44a926247592c2f6e41eed32d646399e6a6c91', name: "label" })), index.h("div", { key: 'a5b335436fe241a3e544ea62c88f0ea6702a07f5', class: "input" }, index.h("smoothly-button", { key: '72b6602900c45dfc64d97a3b9762ba36b8b8494f', type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: 'c5f78b8189f841518b529f7132836ab4adf9910e', name: "button" })), index.h("span", { key: 'bd37165108089c02b21cdc0d1e49b72c1bad300b' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '927d9ee7cd2d4345ab5196a2546dfef8aaf5a827', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: 'ebd746e29caa3673eac6502f792b7570fadaf4b9', name: "document-attach-outline" })), index.h("input", { key: 'cc096e9106e01e0f66ce1bb076f5a54267e488b3', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("div", { key: '09c3feb2ee17503791b4fb07314a43721c93d5db', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '7c5c0c2a19f8d9abcdc86e631dd29020813fe75b', name: "end" }))));
+        return (index.h(index.Host, { key: 'bd3a3084ed2683ba7b4d3b44394e084c27fdcf46', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '460ab30edb8d6995b5bbb0111067440dc402ff5a' }, index.h("slot", { key: 'a0d1d56729cc056633d76f1e9674c56bdf83b10a', name: "label" })), index.h("div", { key: 'ddbf2f08bbe8ebc47f08d2bdcb7f73b3f6bd63f0', class: "input" }, index.h("smoothly-button", { key: '94e27ee7aa3b11fa08f2222dd018f3407ca278f5', type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: 'bc78f4d3cbe1f9188d300ff163b96200c7be318d', name: "button" })), index.h("span", { key: '5400b6a7063cfbf8da6970ea96e9c84f82f4398d' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '103317dc85f67a0c3930ea90ec6fcccb86bb0de9', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: 'cc56d646c2504317aada3b8e28beae2a73f65a3d', name: "document-attach-outline" })), index.h("input", { key: '14a8d43c351a716043980666d1fb45d08730c0f2', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("div", { key: '25323a6bbf7917b142a46d2101b81dda9df74929', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '7bb18c923afad12d08ee5fee41eacf48f29771a8', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9879,8 +10020,8 @@ const SmoothlyInputFile = class {
 };
 SmoothlyInputFile.style = SmoothlyInputFileStyle0;
-const styleCss$K = ".sc-smoothly-input-month-h{display:flex;flex-direction:row;justify-content:space-between;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-month-h:not([in-calendar])>smoothly-input-select.sc-smoothly-input-month{display:flex;flex:1}[looks=line].sc-smoothly-input-month-h,[looks=border].sc-smoothly-input-month-h,[looks=transparent].sc-smoothly-input-month-h{gap:2em}.sc-smoothly-input-month-h:not([previous])>smoothly-icon.sc-smoothly-input-month:first-of-type,.sc-smoothly-input-month-h:not([next])>smoothly-icon.sc-smoothly-input-month:last-of-type{display:none}.sc-smoothly-input-month-h>smoothly-icon.sc-smoothly-input-month{display:flex;align-self:center;cursor:pointer}.sc-smoothly-input-month-h>smoothly-icon.disabled.sc-smoothly-input-month{opacity:0.5;cursor:not-allowed}";
-const SmoothlyInputMonthStyle0 = styleCss$K;
+const styleCss$J = ".sc-smoothly-input-month-h{display:flex;flex-direction:row;justify-content:space-between;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-month-h:not([in-calendar])>smoothly-input-select.sc-smoothly-input-month{display:flex;flex:1}[looks=line].sc-smoothly-input-month-h,[looks=border].sc-smoothly-input-month-h,[looks=transparent].sc-smoothly-input-month-h{gap:2em}.sc-smoothly-input-month-h:not([previous])>smoothly-icon.sc-smoothly-input-month:first-of-type,.sc-smoothly-input-month-h:not([next])>smoothly-icon.sc-smoothly-input-month:last-of-type{display:none}.sc-smoothly-input-month-h>smoothly-icon.sc-smoothly-input-month{display:flex;align-self:center;cursor:pointer}.sc-smoothly-input-month-h>smoothly-icon.disabled.sc-smoothly-input-month{opacity:0.5;cursor:not-allowed}";
+const SmoothlyInputMonthStyle0 = styleCss$J;
 const SmoothlyInputMonth = class {
     constructor(hostRef) {
@@ -9991,9 +10132,9 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'a5c2d389e6f6459735db538f5009e2c164b95fb3' }, index.h("smoothly-icon", { key: 'be09a62abd6e174ed1206ed3a1cb3faa034e842f', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index.h(index.Host, { key: '8f090533131b37ad9047386ce0dddd6e93025726' }, index.h("smoothly-icon", { key: 'd0a4239525f0b1b81157cc912b834eb461ce05ae', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '0fb82cdc57b300c50f1039ae60e4492664997278', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '93d073b5e1525185e2594212564a8d3b32f5db4e', slot: "label" }, index.h("slot", { key: 'c3896f5a650dd662ac2559eea6155410f68cf42e', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: '71be5ad03d21841eb59516f8f8e2b3f5953a14ae', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '3e039e68f2442726208422aa665ec394fe610d77', slot: "label" }, index.h("slot", { key: '23b59c54bcc24ab6c9663aa0287857a962865c2d', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: 'fb57b80ab4a1e1068bd8c4752f0758e358d0af03', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '4617c71586571c6797f20108a6619bf4cfac5dcd', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'a40ac7bec136d94ec76463c0c7889c25998e8cb3', slot: "label" }, index.h("slot", { key: 'a81ca8c1e27348257d2b167983e7884aebe6a22c', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: 'ec8e3a7e2aee27d019c324f37570d2acd9f613f1', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'b22f1aa1909b77d781daf98bbb9e887fc481f71f', slot: "label" }, index.h("slot", { key: 'b4e93ee397be88dc0449e5e3a58b12b6562a040c', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: '74aab169b0775a443ed88c288a3775f3bdaec01f', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
@@ -10006,8 +10147,8 @@ const SmoothlyInputMonth = class {
 };
 SmoothlyInputMonth.style = SmoothlyInputMonthStyle0;
-const styleCss$J = ".sc-smoothly-input-price-demo-h{display:block}";
-const SmoothlyInputPriceDemoStyle0 = styleCss$J;
+const styleCss$I = ".sc-smoothly-input-price-demo-h{display:block}";
+const SmoothlyInputPriceDemoStyle0 = styleCss$I;
 const SmoothlyInputPriceDemo = class {
     constructor(hostRef) {
@@ -10016,13 +10157,13 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index.h(index.Host, { key: 'bf84cea0865e0a30f6967b9d3648779fdf29d106' }, index.h("h2", { key: '405b6eb3f61ac9f42ef4625da0e6aa7010e7b7d2' }, "State demo on smoothly-input"), index.h("p", { key: 'edbdba22faca0d9cfac2d4518628d9d57e9e0603' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: 'd4f7f149a4b985accb2c53c79be73287a640e821' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: 'a2c020fe7c1aa3bd263e1145acf92c50df47795d', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'ea586b3e9bb14d372cd0817a968bff912cb5cc26', type: "price", currency: this.currency }, "price")));
+        return (index.h(index.Host, { key: '9f41e76c7f65bf7d0b0ac5e80461db9b5ae9d8f4' }, index.h("h2", { key: '995acd094158599c9983eb59f6cf985d0fc8d04f' }, "State demo on smoothly-input"), index.h("p", { key: 'd3c75929e5b427663a45b4aa1d3dad7691f09520' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: 'fefc03d276c344e565430c9174a090a7c57c76eb' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: '2e20e1ef7320aaf6609d4c3b22f33ee3ecdc263c', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '7d9819e8b97239b063767da4341d914df60fc779', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = SmoothlyInputPriceDemoStyle0;
-const styleCss$I = ".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)}.sc-smoothly-input-radio-h[looks=\"border\"].sc-smoothly-input-radio-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-radio-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-radio-h{border:transparent solid 1px}.sc-smoothly-input-radio-h[looks=\"line\"].sc-smoothly-input-radio-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-radio-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-radio-h{border-bottom:transparent solid 1px}[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=\"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:transparent}[looks=\"transparent\"].sc-smoothly-input-radio-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-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],.has-value.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{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}.sc-smoothly-input-radio-h.sc-smoothly-input-radio-s>[slot=end]{margin-right:0;margin-left:auto}[readonly].sc-smoothly-input-radio-h smoothly-input-radio-item.sc-smoothly-input-radio *.sc-smoothly-input-radio{cursor:not-allowed}";
-const SmoothlyInputRadioStyle0 = styleCss$I;
+const styleCss$H = ".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)}.sc-smoothly-input-radio-h[looks=\"border\"].sc-smoothly-input-radio-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-radio-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-radio-h{border:transparent solid 1px}.sc-smoothly-input-radio-h[looks=\"line\"].sc-smoothly-input-radio-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-radio-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-radio-h{border-bottom:transparent solid 1px}[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=\"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:transparent}[looks=\"transparent\"].sc-smoothly-input-radio-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-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],.has-value.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{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}.sc-smoothly-input-radio-h.sc-smoothly-input-radio-s>[slot=end]{margin-right:0;margin-left:auto}[readonly].sc-smoothly-input-radio-h smoothly-input-radio-item.sc-smoothly-input-radio *.sc-smoothly-input-radio{cursor:not-allowed}";
+const SmoothlyInputRadioStyle0 = styleCss$H;
 const SmoothlyInputRadio = class {
     constructor(hostRef) {
@@ -10125,7 +10266,7 @@ const SmoothlyInputRadio = class {
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
     render() {
-        return (index.h(index.Host, { key: '33e83daffc9d7c7e89378e204b704ca1df2a80d5', class: "floating-label" }, index.h("slot", { key: 'b89e248290616592a883bc91ed195e375d7193e1', name: "start" }), index.h("div", { key: '1371da1571d8205214e7a9f32febcb1a332ee9c7' }, index.h("slot", { key: '5f450610241677051c003bcda6abc1256fb6afdc', name: "label" }), index.h("div", { key: 'ff5034df9c86072a5774e670849209628f8a5c35', class: "options" }, index.h("slot", { key: '49e1bbc206bb3eab59f6764fa16ab25721ca3d9b' }))), index.h("slot", { key: 'cf46f8fcf62680eac716991c4d292da190a51227', name: "end" })));
+        return (index.h(index.Host, { key: 'ba833ba72a7a9d7f39d20eb338b99c3561037887', class: "floating-label" }, index.h("slot", { key: 'fc098f89db650307a7ffd0197242c25e4e1608f2', name: "start" }), index.h("div", { key: '31630ffd6238a93570780c41ddd76f8ed55c0076' }, index.h("slot", { key: '96c9b42ee5e8543ebb0993716abe6a5f958636e8', name: "label" }), index.h("div", { key: '2bc6553e9b038947138e3e48535fe93891e0ef0c', class: "options" }, index.h("slot", { key: 'd5dd59f460273c2b06fd586a79c4c492c1af10f6' }))), index.h("slot", { key: '9422cd8a1515e813447c77c5b44ca7f886a35a49', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10135,8 +10276,8 @@ const SmoothlyInputRadio = class {
 };
 SmoothlyInputRadio.style = SmoothlyInputRadioStyle0;
-const styleCss$H = ".sc-smoothly-input-radio-item-h{display:flex;align-items:center;position:relative}.sc-smoothly-input-radio-item-h:hover>*.sc-smoothly-input-radio-item{cursor:pointer}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item:focus-visible+smoothly-icon.sc-smoothly-input-radio-item{outline:2px solid rgb(var(--smoothly-primary-color));border-radius:1px}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item{opacity:0;z-index:1;width:1.5em;height:1.5em;position:absolute;transform:translateX(50%)}.sc-smoothly-input-radio-item-h>label.sc-smoothly-input-radio-item{padding:0 .3em;white-space:nowrap}";
-const SmoothlyInputRadioItemStyle0 = styleCss$H;
+const styleCss$G = ".sc-smoothly-input-radio-item-h{display:flex;align-items:center;position:relative}.sc-smoothly-input-radio-item-h:hover>*.sc-smoothly-input-radio-item{cursor:pointer}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item:focus-visible+smoothly-icon.sc-smoothly-input-radio-item{outline:2px solid rgb(var(--smoothly-primary-color));border-radius:1px}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item{opacity:0;z-index:1;width:1.5em;height:1.5em;position:absolute;transform:translateX(50%)}.sc-smoothly-input-radio-item-h>label.sc-smoothly-input-radio-item{padding:0 .3em;white-space:nowrap}";
+const SmoothlyInputRadioItemStyle0 = styleCss$G;
 const SmoothlyInputRadioItem = class {
     constructor(hostRef) {
@@ -10156,14 +10297,14 @@ const SmoothlyInputRadioItem = class {
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (index.h(index.Host, { key: 'bc02b0502580340ecb5fa192b39f82b71fc3cec8', onClick: () => this.inputHandler() }, index.h("input", { key: '6e536dcc14a512ee978bec110f8eed7a907de912', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: 'b9b63e3b3e658fad2767d61ef5805a257c836024', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '24e327f0d4f3cca0973f22bc61fa47753b3f4a32' }, index.h("slot", { key: 'ce13a2ce4789a04261dd291176c1e2a0d522afd2' }))));
+        return (index.h(index.Host, { key: '43ffeae788651e14b7bb486074f562edda4ca771', onClick: () => this.inputHandler() }, index.h("input", { key: '75cae69a8143a09ceb6747caf5e190c5adaaab3a', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '3c41a36beccf667db5001c7f5f4198b4caeaf151', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: 'c862cb4a478e2663e39c9490fe547cfca89b31fe' }, index.h("slot", { key: '9ee4c14a39a43c1769309740125165fccbcba997' }))));
     }
     get element() { return index.getElement(this); }
 };
 SmoothlyInputRadioItem.style = SmoothlyInputRadioItemStyle0;
-const styleCss$G = ".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)}.sc-smoothly-input-range-h[looks=\"border\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-range-h{border:transparent solid 1px}.sc-smoothly-input-range-h[looks=\"line\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-range-h{border-bottom:transparent solid 1px}[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=\"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:transparent}[looks=\"transparent\"].sc-smoothly-input-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-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],.has-value.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{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)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range:focus{outline:none;border: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%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;margin-top:-.25em;border:none}.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%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{width:100%;height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h:not([value])>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])>dov.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-tint))}[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track,[readonly].sc-smoothly-input-range-h,[readonly].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}";
-const SmoothlyInputRangeStyle0 = styleCss$G;
+const styleCss$F = ".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)}.sc-smoothly-input-range-h[looks=\"border\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-range-h{border:transparent solid 1px}.sc-smoothly-input-range-h[looks=\"line\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-range-h{border-bottom:transparent solid 1px}[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=\"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:transparent}[looks=\"transparent\"].sc-smoothly-input-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-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],.has-value.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{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)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range:focus{outline:none;border: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%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;margin-top:-.25em;border:none}.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%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{width:100%;height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h:not([value])>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])>dov.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-tint))}[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track,[readonly].sc-smoothly-input-range-h,[readonly].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}";
+const SmoothlyInputRangeStyle0 = styleCss$F;
 const SmoothlyInputRange = class {
     constructor(hostRef) {
@@ -10260,17 +10401,17 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '70128d9ac099c1cd852bb1b5dc8717646984eb7b', class: {
+        return (index.h(index.Host, { key: '3d371a714fa08d166552d7dfb6f629bf518e3c86', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: '301b644eb7c8df20012a829c1bf5e1238d1e0c4f', name: "start" }), index.h("div", { key: '1e26e6b11f814def73fde42ee2c24294edeb1031' }, index.h("label", { key: '901dbda93df7632cdaeefcc06f18e72fbbedde51', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: 'd18cb15cbef044d11950983f2f403e15e7891078', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, index.h("slot", { key: 'c119bb49bf649dfdae06950e2d0435ace5e34d84', name: "start" }), index.h("div", { key: '7421198b4900026cf2328658c38ec5a640e3cef2' }, index.h("label", { key: '6c90a090502c690e6c17070ef6d913307556e65f', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: 'db9ea2cca495a1f851e68a01544013e5744ba9fd', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), index.h("smoothly-display", { key: '216a04152ee52272379d594ae42a3e76ad1e8bab', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '776ab022a0defa8c954e21e844d9b2daa9ad2d64', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), index.h("smoothly-display", { key: '8c6ce4b3df85ba228d5a32275d46c73e4e5153df', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '58872152bd7b015deae968e5bfb8ee62744d2194', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '3795b214890bedc6f982879aee6ae5f679cf1eca', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'df70f63235a6f9f11771aa32c763585985daff17', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'd466e0a5295fe50b8b909b7960eb94c588f1fcf7', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'a270ea7c21e4b4789b704d8e40dabf1c325a0df7', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10284,12 +10425,12 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f581dc7ef29259c080cbf53b8e4302aa0ad008b7' }, index.h("h2", { key: 'f2da5ea21d7a042a15a1b2e1e3920543c122ca77' }, "Range"), index.h("h3", { key: '6591967e0f3bbbdcb6366b5dc78ebab0e05330b0' }, "Phone Number"), index.h("smoothly-input-range", { key: '12ba506f6c44e9e97ba24d214c290fa276447ea4', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '30cb7652889fc9238db6c572a0821154d00855b4' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '0c380ba9fc9c750368c98a782b3a2c42901e4228', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: 'e1a51c77997b4efa230ec565521e6a3b38ccdbc6' }, "Percent"), index.h("smoothly-input-range", { key: 'd00d603bce0471b856abd334ab66d158708e4259', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: 'c9ab03c022ea27ca34f4901a971bad709194fdab' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '5a250a0f429cd4441f59a62eb84a34b50b1a1121', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '4caf5457ad2a853b549e9ea127a2c3c6393993d1', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: 'f910ee270005fc5cdf7d64812ec2979f9a4b21d5', size: "icon", slot: "end" }))));
+        return (index.h(index.Host, { key: 'fc3cb53f3f24b2272528a9a56d7c53d6f2a6d80e' }, index.h("h2", { key: 'fbeb2e768aff9b1e74a8a463b3944e5fe6b32088' }, "Range"), index.h("h3", { key: '2e9184eb4da752f42b8b0ce5697444257291b658' }, "Phone Number"), index.h("smoothly-input-range", { key: '6883fcdda3c0a67f8912cf29b5d93ac8b65cd122', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '29c5dab8989dda8e434d0a1dcf374c500a4ed844' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '37408cdf858ad792a28400f9cf2aec6ad56da61e', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '6b32daaa7eac6ab292387904df7f120850fea14f' }, "Percent"), index.h("smoothly-input-range", { key: '5136872a791f986bef6e04f5ac818f47924efd78', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '9a1b1c7c24b6975ae966c6b23278a6e6135bd035' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '88ffd017e1cf33a783eeca005f3fa90b64ab9717', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '769607cd9e15a9ce0f27bad7922b41c698561e8f', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '8397652997978475be3b4c8c008d8f4d1b8bdd0b', size: "icon", slot: "end" }))));
     }
 };
-const styleCss$F = "[color=default].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-reset-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-reset-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-reset-h{display:inline}[disabled].sc-smoothly-input-reset-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-reset-h>a.sc-smoothly-input-reset,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-reset-h>a.sc-smoothly-input-reset:empty,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:empty{border-width:0}.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-reset-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-reset{padding:0.8em;min-width:8em}.sc-smoothly-input-reset-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-reset{padding:0.6em}[size=icon].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{padding:0.5em}[type=button].sc-smoothly-input-reset-h>a.sc-smoothly-input-reset{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:100%}[size=large].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:130%}.sc-smoothly-input-reset-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-reset-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-reset-h{width:100%}[expand=full].sc-smoothly-input-reset-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-reset-h:not([fill=clear])>button.sc-smoothly-input-reset:hover,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:focus-visible,[fill=outline].sc-smoothly-input-reset-h:active>button.sc-smoothly-input-reset::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:hover::before,[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:focus-within::before,[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:hover,.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:focus-visible,.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset,.sc-smoothly-input-reset-h.sc-smoothly-input-reset-s>smoothly-icon,.sc-smoothly-input-reset-h .sc-smoothly-input-reset-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-reset-h{display:none}.sc-smoothly-input-reset-h:not([display]){display:none}.sc-smoothly-input-reset-h[type=\"input\"].sc-smoothly-input-reset-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-reset-h.sc-smoothly-input-reset-s>smoothly-button>button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-reset-h{cursor:not-allowed}.sc-smoothly-input-reset-h[type=\"input\"]:hover.sc-smoothly-input-reset-s>smoothly-icon,.sc-smoothly-input-reset-h[type=\"input\"]:hover .sc-smoothly-input-reset-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}";
-const SmoothlyInputResetStyle0 = styleCss$F;
+const styleCss$E = "[color=default].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-reset-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-reset-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-reset-h{display:inline}[disabled].sc-smoothly-input-reset-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-reset-h>a.sc-smoothly-input-reset,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-reset-h>a.sc-smoothly-input-reset:empty,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:empty{border-width:0}.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-reset-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-reset{padding:0.8em;min-width:8em}.sc-smoothly-input-reset-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-reset{padding:0.6em}[size=icon].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{padding:0.5em}[type=button].sc-smoothly-input-reset-h>a.sc-smoothly-input-reset{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:100%}[size=large].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:130%}.sc-smoothly-input-reset-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-reset-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-reset-h{width:100%}[expand=full].sc-smoothly-input-reset-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-reset-h:not([fill=clear])>button.sc-smoothly-input-reset:hover,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:focus-visible,[fill=outline].sc-smoothly-input-reset-h:active>button.sc-smoothly-input-reset::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:hover::before,[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:focus-within::before,[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:hover,.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:focus-visible,.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset,.sc-smoothly-input-reset-h.sc-smoothly-input-reset-s>smoothly-icon,.sc-smoothly-input-reset-h .sc-smoothly-input-reset-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-reset-h{display:none}.sc-smoothly-input-reset-h:not([display]){display:none}.sc-smoothly-input-reset-h[type=\"input\"].sc-smoothly-input-reset-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-reset-h.sc-smoothly-input-reset-s>smoothly-button>button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-reset-h{cursor:not-allowed}.sc-smoothly-input-reset-h[type=\"input\"]:hover.sc-smoothly-input-reset-s>smoothly-icon,.sc-smoothly-input-reset-h[type=\"input\"]:hover .sc-smoothly-input-reset-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}";
+const SmoothlyInputResetStyle0 = styleCss$E;
 const SmoothlyInputReset = class {
     constructor(hostRef) {
@@ -10330,7 +10471,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '1f2b1af44599e1f880fa59c186a66fe46cd85b9a', title: this.tooltip }, index.h("smoothly-button", { key: '84e22d1382ae7836442859fe4bee9d61737cb75f', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index.h("slot", { key: '7ce4e59101629024cef25297a24b601d633cf108' }), index.h("smoothly-icon", { key: '04e73ec95bcbcc095dd2a1bd0c423b7c0e4afd38', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '5c7d46f71d9ad2d2802e35d46136f9620c4f5335', title: this.tooltip }, index.h("smoothly-button", { key: 'f9b2b51d729cf062c3dcbf8392203387b9794221', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index.h("slot", { key: '65c298b30cff87d58e5b2a30626d0fe036ed19b0' }), index.h("smoothly-icon", { key: '5a95010da381054516f1ae39fd72522b9b630f4f', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10351,8 +10492,8 @@ var Item;
     Item.is = Item.type.is;
 })(Item || (Item = {}));
-const styleCss$E = ".sc-smoothly-input-select-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-select-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-select-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h>input.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within)>input.sc-smoothly-input-select{background:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .label.sc-smoothly-input-select{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.floating-label.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.floating-label .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder] .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly] .sc-smoothly-input-select-s>[slot=label],.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,[placeholder].sc-smoothly-input-select-h .label.sc-smoothly-input-select,[readonly].sc-smoothly-input-select-h .label.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-select{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-select-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h{display:flex;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));padding-left:var(--input-padding-side)}.open.sc-smoothly-input-select-h{border-radius:var(--smoothly-input-border-radius) var(--smoothly-input-border-radius) 0 0}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{box-sizing:border-box;display:flex;cursor:pointer;padding:var(--input-value-padding-top) 0 var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not(:has([slot=label]))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>div.select-display.sc-smoothly-input-select{padding:.6em 0;align-items:center}[readonly].sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{cursor:not-allowed}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select smoothly-icon.sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select-s>smoothly-icon:not(\"color\"){color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));filter:opacity(60%)}.sc-smoothly-input-select-h:hover>div.icons.sc-smoothly-input-select-s>smoothly-icon{filter:opacity(100%)}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{opacity:.7;cursor:pointer;height:100%;padding-inline:var(--input-padding-side)}[invalid].sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:block;padding:0.5rem}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h .label.sc-smoothly-input-select{left:.5rem}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>div.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:10;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));left:0;right:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);min-width:fit-content;border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select{left:-1px;right:-1px}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>smoothly-item,.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{padding:.7em .7em .7em .25em}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{display:flex;gap:1em;background-color:rgba(var(--smoothly-primary-tint), .5);color:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));stroke:rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name=\"backspace-outline\"].sc-smoothly-input-select{margin-left:auto;margin-right:0}.sc-smoothly-input-select-h>div.options.hidden.sc-smoothly-input-select{display:none}";
-const SmoothlyInputSelectStyle0 = styleCss$E;
+const styleCss$D = ".sc-smoothly-input-select-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-select-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-select-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h>input.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within)>input.sc-smoothly-input-select{background:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .label.sc-smoothly-input-select{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.floating-label.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.floating-label .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder] .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly] .sc-smoothly-input-select-s>[slot=label],.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,[placeholder].sc-smoothly-input-select-h .label.sc-smoothly-input-select,[readonly].sc-smoothly-input-select-h .label.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-select{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-select-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h{display:flex;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));padding-left:var(--input-padding-side)}.open.sc-smoothly-input-select-h{border-radius:var(--smoothly-input-border-radius) var(--smoothly-input-border-radius) 0 0}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{box-sizing:border-box;display:flex;cursor:pointer;padding:var(--input-value-padding-top) 0 var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not(:has([slot=label]))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>div.select-display.sc-smoothly-input-select{padding:.6em 0;align-items:center}[readonly].sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{cursor:not-allowed}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select smoothly-icon.sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select-s>smoothly-icon:not(\"color\"){color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));filter:opacity(60%)}.sc-smoothly-input-select-h:hover>div.icons.sc-smoothly-input-select-s>smoothly-icon{filter:opacity(100%)}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{opacity:.7;cursor:pointer;height:100%;padding-inline:var(--input-padding-side)}[invalid].sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:block;padding:0.5rem}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h .label.sc-smoothly-input-select{left:.5rem}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>div.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:10;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));left:0;right:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);min-width:fit-content;border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select{left:-1px;right:-1px}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>smoothly-item,.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{padding:.7em .7em .7em .25em}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{display:flex;gap:1em;background-color:rgba(var(--smoothly-primary-tint), .5);color:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));stroke:rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name=\"backspace-outline\"].sc-smoothly-input-select{margin-left:auto;margin-right:0}.sc-smoothly-input-select-h>div.options.hidden.sc-smoothly-input-select{display:none}";
+const SmoothlyInputSelectStyle0 = styleCss$D;
 const SmoothlyInputSelect = class {
     constructor(hostRef) {
@@ -10638,14 +10779,14 @@ const SmoothlyInputSelect = class {
         this.addedItems = this.addedItems.concat(index.h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (index.h(index.Host, { key: 'c62fd66c9ba4eec894a4ffff22f143709d33eec5', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '88b7f3c532fcbdedaf9132fc106f20e16f787126', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '3df61df5c679cb1ac2d173dd2c8ea0d044ea8b13', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: '2fb8f963e220f10ea6a42255da8742b3ec6baa17', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '553e3bb02bd43b3ceeb3091cd714d5c078c39c8d', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '2b49a0d08bf3df0951bf5dc5663033cb59115cb7', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: '095a8a4a711dd13caa6e88e23f50bb4caf95b1d3', name: "label" }), index.h("div", { key: '92e14329f382db29e7344d9d27d22b0110b4428d', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: 'e45e1b04755aa14a81b7731b4115f6624dce5118', class: "search-preview" }, index.h("smoothly-icon", { key: 'fb9b94127aaca8a22f165684e88c938979f26fa3', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '220439a98a62c91a48855a3ab1784349ebbcb422', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: '8d0eeb41a97f600cb95817ef184bced6600d2a7f', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '9287e2fd6346012aaf3b57b2ce729efe68dbf441', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '160b4fb1e8ea981315dfe20a3b3e8dccbaa3370b', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: 'cff5122eff3aaf051b9e049597ac75ee26fc6800', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'ab92ee83fbe646c7f8eb77548406c2502abfb418', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '2a0bd78586497490a7412a709c42aa74a0acc312', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: 'ed6e35a221987b65991e533b42f78bec4cad629f', name: "label" }), index.h("div", { key: '57ad05762079398fd35a171335dbf00818e9b3ae', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '22793e538926234da0c6165bef5465ba483fc989', class: "search-preview" }, index.h("smoothly-icon", { key: '6421442e0d046036073bc0a465ed9a9643b3dfe7', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '0713b81324a693da53d5a5548f8cf5659a6ce817', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '0627576082b52563ae949e7dbcf3166f6f7e9b68', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: '3e722214c9f2bc7b6da6ea5486833ad238facf9c', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '80415b018a5d81f702e60842acd38d29c8b7e96f' }), this.addedItems)));
+            } })))), index.h("slot", { key: 'b71e2361cc982e46517f02f97a7f443ea9bb45f0' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10658,8 +10799,8 @@ const SmoothlyInputSelect = class {
 };
 SmoothlyInputSelect.style = SmoothlyInputSelectStyle0;
-const styleCss$D = "[color=default].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-submit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-submit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-submit-h{display:inline}[disabled].sc-smoothly-input-submit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit:empty,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:empty{border-width:0}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-submit{padding:0.8em;min-width:8em}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-submit{padding:0.6em}[size=icon].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{padding:0.5em}[type=button].sc-smoothly-input-submit-h>a.sc-smoothly-input-submit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:100%}[size=large].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:130%}.sc-smoothly-input-submit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-submit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-submit-h{width:100%}[expand=full].sc-smoothly-input-submit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-submit-h:not([fill=clear])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-visible,[fill=outline].sc-smoothly-input-submit-h:active>button.sc-smoothly-input-submit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:hover::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-within::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:focus-visible,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-icon,.sc-smoothly-input-submit-h .sc-smoothly-input-submit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-submit-h{display:none}.sc-smoothly-input-submit-h{display:flex}.sc-smoothly-input-submit-h:not([display]){display:none}.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button button>*+smoothly-icon,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button-confirm button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-submit-h{cursor:not-allowed}";
-const SmoothlyInputSubmitStyle0 = styleCss$D;
+const styleCss$C = "[color=default].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-submit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-submit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-submit-h{display:inline}[disabled].sc-smoothly-input-submit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit:empty,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:empty{border-width:0}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-submit{padding:0.8em;min-width:8em}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-submit{padding:0.6em}[size=icon].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{padding:0.5em}[type=button].sc-smoothly-input-submit-h>a.sc-smoothly-input-submit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:100%}[size=large].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:130%}.sc-smoothly-input-submit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-submit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-submit-h{width:100%}[expand=full].sc-smoothly-input-submit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-submit-h:not([fill=clear])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-visible,[fill=outline].sc-smoothly-input-submit-h:active>button.sc-smoothly-input-submit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:hover::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-within::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:focus-visible,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-icon,.sc-smoothly-input-submit-h .sc-smoothly-input-submit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-submit-h{display:none}.sc-smoothly-input-submit-h{display:flex}.sc-smoothly-input-submit-h:not([display]){display:none}.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button button>*+smoothly-icon,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button-confirm button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-submit-h{cursor:not-allowed}";
+const SmoothlyInputSubmitStyle0 = styleCss$C;
 const SmoothlyInputSubmit = class {
     constructor(hostRef) {
@@ -10698,13 +10839,13 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '15da6fa1f5f4f2ed946f68bfc392e01cff368223', title: this.toolTip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (index.h(index.Host, { key: '8dd49d3bc4896f68fc663a8cee8fb273e141cab3', title: this.toolTip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
 };
 SmoothlyInputSubmit.style = SmoothlyInputSubmitStyle0;
-const styleCss$C = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-item-selected-background));color:rgb(var(--smoothly-item-selected-foreground));border-left:.3em solid rgb(var(--smoothly-item-selected-border))}[disabled].sc-smoothly-item-h,.sc-smoothly-item-h[disabled].sc-smoothly-item-s>*{background-color:rgb(var(--smoothly-item-disabled-background));color:rgb(var(--smoothly-item-disabled-foreground));opacity:var(--smoothly-item-disabled-opacity);cursor:not-allowed}.sc-smoothly-item-h{padding:0.5em;cursor:pointer;border-left:.3em solid transparent;color:rgb(var(--smoothly-item-foreground));fill:rgb(var(--smoothly-item-foreground));stroke:rgb(var(--smoothly-item-foreground));box-sizing:border-box;min-height:3rem}.sc-smoothly-item-h.sc-smoothly-item-s>*{color:rgb(var(--smoothly-item-foreground));fill:rgb(var(--smoothly-item-foreground));stroke:rgb(var(--smoothly-item-foreground))}.sc-smoothly-item-h:not([disabled])[marked],.sc-smoothly-item-h:not([disabled]):hover,.sc-smoothly-item-h:not([disabled])[marked].sc-smoothly-item-s>*,.sc-smoothly-item-h:not([disabled]):hover.sc-smoothly-item-s>*{background-color:rgb(var(--smoothly-item-hover-background));color:rgb(var(--smoothly-item-hover-foreground));fill:rgb(var(--smoothly-item-hover-foreground));stroke:rgb(var(--smoothly-item-hover-foreground))}";
-const SmoothlyItemStyle0 = styleCss$C;
+const styleCss$B = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-item-selected-background));color:rgb(var(--smoothly-item-selected-foreground));border-left:.3em solid rgb(var(--smoothly-item-selected-border))}[disabled].sc-smoothly-item-h,.sc-smoothly-item-h[disabled].sc-smoothly-item-s>*{background-color:rgb(var(--smoothly-item-disabled-background));color:rgb(var(--smoothly-item-disabled-foreground));opacity:var(--smoothly-item-disabled-opacity);cursor:not-allowed}.sc-smoothly-item-h{padding:0.5em;cursor:pointer;border-left:.3em solid transparent;color:rgb(var(--smoothly-item-foreground));fill:rgb(var(--smoothly-item-foreground));stroke:rgb(var(--smoothly-item-foreground));box-sizing:border-box;min-height:3rem}.sc-smoothly-item-h.sc-smoothly-item-s>*{color:rgb(var(--smoothly-item-foreground));fill:rgb(var(--smoothly-item-foreground));stroke:rgb(var(--smoothly-item-foreground))}.sc-smoothly-item-h:not([disabled])[marked],.sc-smoothly-item-h:not([disabled]):hover,.sc-smoothly-item-h:not([disabled])[marked].sc-smoothly-item-s>*,.sc-smoothly-item-h:not([disabled]):hover.sc-smoothly-item-s>*{background-color:rgb(var(--smoothly-item-hover-background));color:rgb(var(--smoothly-item-hover-foreground));fill:rgb(var(--smoothly-item-hover-foreground));stroke:rgb(var(--smoothly-item-hover-foreground))}";
+const SmoothlyItemStyle0 = styleCss$B;
 const SmoothlyItem = class {
     constructor(hostRef) {
@@ -10739,7 +10880,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (index.h(index.Host, { key: '4f8182b389900e4dc7dfb59372ddaa594e9f161b', tabIndex: -1 }, index.h("slot", { key: '1c9da4ff4b5edbbf9c074e642dec0be598403cc7' })));
+        return (index.h(index.Host, { key: 'e225c660dd0583d654b55567c78f5fd3fc2fe22e', tabIndex: -1 }, index.h("slot", { key: '8531157359f2b335be2e22d9e2a4c526a0b07d3b' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10748,8 +10889,8 @@ const SmoothlyItem = class {
 };
 SmoothlyItem.style = SmoothlyItemStyle0;
-const styleCss$B = ".sc-smoothly-label-h{position:relative;width:max-content;display:flex;justify-content:center;align-items:center;padding:0.15em 0.6em;border-radius:2em;color:rgb(var(--smoothly-default-contrast));background-color:hsl(var(--hue), 85%, 70%)}[shape=rectangle].sc-smoothly-label-h{border-radius:0.3em}";
-const SmoothlyLabelStyle0 = styleCss$B;
+const styleCss$A = ".sc-smoothly-label-h{position:relative;width:max-content;display:flex;justify-content:center;align-items:center;padding:0.15em 0.6em;border-radius:2em;color:rgb(var(--smoothly-default-contrast));background-color:hsl(var(--hue), 85%, 70%)}[shape=rectangle].sc-smoothly-label-h{border-radius:0.3em}";
+const SmoothlyLabelStyle0 = styleCss$A;
 const SmoothlyLabel = class {
     constructor(hostRef) {
@@ -10760,15 +10901,15 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '8129f1db21623337d8102f9b0ab6d31f6b8828fc', title: this.description, style: {
+        return (index.h(index.Host, { key: '6e9a612c732e5827b767e1a8241dfebfb244b133', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index.h("slot", { key: '6407607825c94484040ea8c3abdaf63cde04e9e0' })));
+            } }, index.h("slot", { key: '0141292df72d9426b1e26468dc089dab40182b7d' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
-const styleCss$A = ".sc-smoothly-lazy-h{display:block}";
-const SmoothlyLazyStyle0 = styleCss$A;
+const styleCss$z = ".sc-smoothly-lazy-h{display:block}";
+const SmoothlyLazyStyle0 = styleCss$z;
 const SmoothlyLazy = class {
     constructor(hostRef) {
@@ -10781,7 +10922,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index.h(index.Host, { key: '3bcb203cf4c62810edbc8d8e73e435334320757c' }, index.h("slot", { key: '134e64e49e4a4c7b1ea95cf150c7da57b25a9a25', name: "before" }), index.h("smoothly-load-more", { key: 'ae62bc4186ba3e2931f36642c8f074aaabc11402', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '5dd61a3aea61c4ffadf2ed8b5f1adffde1428b6a' })));
+        return (index.h(index.Host, { key: '0dacfce0006511cdc310f56f0bf5791588253ece' }, index.h("slot", { key: 'c21d6d9ae07c48edd0f506d78159e6fadbed009b', name: "before" }), index.h("smoothly-load-more", { key: '61062a066d2ba842b847dd321ea9e6ae5ef8b4fc', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '2d7f6ce8e3c6584145eae436c49f148742240670' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -10825,13 +10966,13 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: '1e5aa151e1acd2f091b925f9a4ceb45a609ea198' });
+        return index.h(index.Host, { key: '1db52f245ebfcc2ecdee6f09c405bfb043839ceb' });
     }
     get element() { return index.getElement(this); }
 };
-const styleCss$z = ".sc-smoothly-modal-h{position:fixed;display:flex;justify-content:center;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--smoothly-modal-backdrop));color:rgb(var(--smoothly-modal-foreground));z-index:5}.sc-smoothly-modal-h:not([open]),[hidden].sc-smoothly-modal-h{display:none}[align=center].sc-smoothly-modal-h{align-items:center}[align=top].sc-smoothly-modal-h>div.modal.sc-smoothly-modal{margin-top:calc((100dvh - var(--smoothly-modal-max-height)) / 2)}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal{display:flex;flex-direction:column;padding:2rem;gap:1.5rem;width:var(--smoothly-modal-width, 40rem);max-width:calc(100dvw - 1rem);height:fit-content;max-height:min(var(--smoothly-modal-max-height), 100dvh);background:rgb(var(--smoothly-modal-background, var(--smoothly-color)));border:1px solid rgb(var(--smoothly-modal-border));border-radius:var(--smoothly-modal-border-radius);box-shadow:var(--smoothly-modal-shadow);box-sizing:border-box}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:empty,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal:empty{display:none}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal{display:flex;justify-content:space-between;align-items:center}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>*.sc-smoothly-modal{margin-block:0}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal:not(.header):not(.actions){overflow-y:auto}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:not(:has([slot=\"header\"])){justify-content:end}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]){cursor:pointer;opacity:0.7;color:rgb(var(--smoothly-default-contrast))}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]):hover{opacity:1}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}";
-const SmoothlyModalStyle0 = styleCss$z;
+const styleCss$y = ".sc-smoothly-modal-h{position:fixed;display:flex;justify-content:center;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--smoothly-modal-backdrop));color:rgb(var(--smoothly-modal-foreground));z-index:5}.sc-smoothly-modal-h:not([open]),[hidden].sc-smoothly-modal-h{display:none}[align=center].sc-smoothly-modal-h{align-items:center}[align=top].sc-smoothly-modal-h>div.modal.sc-smoothly-modal{margin-top:calc((100dvh - var(--smoothly-modal-max-height)) / 2)}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal{display:flex;flex-direction:column;padding:2rem;gap:1.5rem;width:var(--smoothly-modal-width, 40rem);max-width:calc(100dvw - 1rem);height:fit-content;max-height:min(var(--smoothly-modal-max-height), 100dvh);background:rgb(var(--smoothly-modal-background, var(--smoothly-color)));border:1px solid rgb(var(--smoothly-modal-border));border-radius:var(--smoothly-modal-border-radius);box-shadow:var(--smoothly-modal-shadow);box-sizing:border-box}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:empty,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal:empty{display:none}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal{display:flex;justify-content:space-between;align-items:center}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>*.sc-smoothly-modal{margin-block:0}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal:not(.header):not(.actions){overflow-y:auto}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:not(:has([slot=\"header\"])){justify-content:end}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]){cursor:pointer;opacity:0.7;color:rgb(var(--smoothly-default-contrast))}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]):hover{opacity:1}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}";
+const SmoothlyModalStyle0 = styleCss$y;
 const SmoothlyModal = class {
     constructor(hostRef) {
@@ -10845,7 +10986,7 @@ const SmoothlyModal = class {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: 'a3fcbf6570682dc94970853a2c1a57f926156647', role: "alertdialog" }, index.h("div", { key: 'e678d085096aa5968d0addecb9c5f672f67cc0e0', class: "modal" }, index.h("div", { key: 'ac5ef3de38862a2027e0a031fe4c7eaf0da20c14', class: "header" }, index.h("slot", { key: 'eedabda53e46f3aeee6e86d26f3eb28cacbb48ef', name: "header" }), this.closable && index.h("smoothly-icon", { key: '848c1824a1422274429e03d2df6e8876fca7d9f4', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: 'f675af8f89db2b520bdf7601d1a1384a9837032d' }), index.h("div", { key: 'd6b5a0a91b701e4c0a2116f67f67065afc8b5963', class: "actions" }, index.h("slot", { key: '364d754a0884af6a6d357c560f0c7dd587a8eb93', name: "actions" })))));
+        return (index.h(index.Host, { key: '32b2afac681733db40c12b24db5b3e54e54eccf4', role: "alertdialog" }, index.h("div", { key: '10e766dc3efda331f24cbad00d4328f4a8c4fd2f', class: "modal" }, index.h("div", { key: '41a9729e709c0bb0137832ddfdedf24401b3d53c', class: "header" }, index.h("slot", { key: '076ad32dd5ac5d2d729d472b1bdcc279518df6e6', name: "header" }), this.closable && index.h("smoothly-icon", { key: '90c587523b9699b48ac6b73c7749f47802db6675', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: '51927f9dea6f0ccc947470774064b03a3c331707' }), index.h("div", { key: '1801d67f7222cbbc8debe2f1d621ccdaf2044cc7', class: "actions" }, index.h("slot", { key: '8d9202480f132f536f92d9095b2f4efa78634b80', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -10853,8 +10994,8 @@ const SmoothlyModal = class {
 };
 SmoothlyModal.style = SmoothlyModalStyle0;
-const styleCss$y = ".sc-smoothly-notification-h{display:block;position:relative;min-width:30em;min-height:3em;border-radius:5px;margin:0.5em}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification,.sc-smoothly-notification-h>span.clean.sc-smoothly-notification{display:flex;justify-content:center;align-self:center}.sc-smoothly-notification-h>span.sc-smoothly-notification{margin:0 2rem 0 1rem}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification{display:flex;width:100%;justify-content:center}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>p.sc-smoothly-notification{padding-right:1em}.sc-smoothly-notification-h>span.sc-smoothly-notification>p.sc-smoothly-notification{text-align:left}[hidden].sc-smoothly-notification-h{display:none}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification{margin:0 0.5rem}.sc-smoothly-notification-h>smoothly-trigger.sc-smoothly-notification{font-size:0.7em;position:absolute;right:0}";
-const SmoothlyNotificationStyle0 = styleCss$y;
+const styleCss$x = ".sc-smoothly-notification-h{display:block;position:relative;min-width:30em;min-height:3em;border-radius:5px;margin:0.5em}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification,.sc-smoothly-notification-h>span.clean.sc-smoothly-notification{display:flex;justify-content:center;align-self:center}.sc-smoothly-notification-h>span.sc-smoothly-notification{margin:0 2rem 0 1rem}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification{display:flex;width:100%;justify-content:center}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>p.sc-smoothly-notification{padding-right:1em}.sc-smoothly-notification-h>span.sc-smoothly-notification>p.sc-smoothly-notification{text-align:left}[hidden].sc-smoothly-notification-h{display:none}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification{margin:0 0.5rem}.sc-smoothly-notification-h>smoothly-trigger.sc-smoothly-notification{font-size:0.7em;position:absolute;right:0}";
+const SmoothlyNotificationStyle0 = styleCss$x;
 const Notification = class {
     constructor(hostRef) {
@@ -10908,7 +11049,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index.h(index.Host, { key: '4f9ff6f7eb15a0292e408eded5af0cfe7a233716', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '444c117196067bf1bbad4bc3d16823d2a25a539d', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '2c1b2e9be8fca6a72daf006a27790559896e16c9', name: "close-circle-outline" }))), index.h("span", { key: '7fada3523bca91e346709fdb8578145ea534fe6f', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '912da44e0c378f678f3b041be1fc0d43ce9137df', name: this.properties[1] }), index.h("p", { key: '4f6c8006c2de6edd85b4d2d31b30159209a69428' }, this.notice.message))));
+        return (index.h(index.Host, { key: 'd785cc914fbc83f4c8b83b694961b9bffe26186b', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '9fcc2bb8d5e777d0f74895c0a345b0cd8b197b93', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'e2c6e123d0397d2d6acaf29e448a938cff3d1a4a', name: "close-circle-outline" }))), index.h("span", { key: '25da2b381a6fb5acfe4153ca8f19274aef94c7fc', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '767c7c5b46dbb5965b534d28dded0708c5a2495a', name: this.properties[1] }), index.h("p", { key: '25c1d2c632b9823bb5503c2233c43eae3bffbffe' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -10916,8 +11057,8 @@ const Notification = class {
 };
 Notification.style = SmoothlyNotificationStyle0;
-const styleCss$x = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;position:fixed;bottom:3rem;left:0;text-align:center;z-index:100}";
-const SmoothlyNotifierStyle0 = styleCss$x;
+const styleCss$w = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;position:fixed;bottom:3rem;left:0;text-align:center;z-index:100}";
+const SmoothlyNotifierStyle0 = styleCss$w;
 const Notifier = class {
     constructor(hostRef) {
@@ -10932,13 +11073,13 @@ const Notifier = class {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (index.h(index.Host, { key: '5fd9551ae9c12de16236d82497aa4e918d17623d' }, index.h("slot", { key: '788431d7ce3a7e2ee8ebf1b0694089805ece19e6' }), index.h("aside", { key: 'e25e808d6fb17f246437aa36d9667c9b92e49e98' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (index.h(index.Host, { key: '3668d7a0a358806be421377d52169ec64bc8051a' }, index.h("slot", { key: '0f077ec3300a6cacde24628c777e85823c377d33' }), index.h("aside", { key: 'd92759c25e347b168f923f01c521fe805e8ca117' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
 };
 Notifier.style = SmoothlyNotifierStyle0;
-const styleCss$w = "[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h{cursor:wait;--spinner-time:1.4s;--spinner-color:var(--smoothly-color-contrast);--spinner-background:var(--smoothly-color);--spinner-background-opacity:var(--smoothly-semitransparent, 0.8);display:block;stroke:rgb(var(--spinner-color));background-color:rgba(var(--spinner-background), var(--spinner-background-opacity))}.sc-smoothly-spinner-h:not([overlay]){width:var(--spinner-size);height:var(--spinner-size)}[overlay].sc-smoothly-spinner-h{position:absolute;inset:0;width:100%;height:100%;z-index:4;background-color:rgba(var(--spinner-background), var(--spinner-background-opacity))}[color].sc-smoothly-spinner-h:not([overlay]),[color][overlay].sc-smoothly-spinner-h{background-color:rgba(var(--spinner-background), var(--spinner-background-opacity));stroke:rgb(var(--spinner-color))}[overlay].sc-smoothly-spinner-h>svg.sc-smoothly-spinner{position:absolute;width:var(--spinner-size);left:calc(50% - var(--spinner-size) / 2);top:calc(50% - var(--spinner-size) / 2)}.sc-smoothly-spinner-h>svg.sc-smoothly-spinner{animation:SPIN-SVG var(--spinner-time) linear infinite}.sc-smoothly-spinner-h>svg.sc-smoothly-spinner>circle.sc-smoothly-spinner{transform-origin:center;animation:SPIN-CIRCLE var(--spinner-time) ease-in-out infinite;stroke-dasharray:187;stroke-dashoffset:0}@keyframes SPIN-SVG{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes SPIN-CIRCLE{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}";
-const SmoothlySpinnerStyle0 = styleCss$w;
+const styleCss$v = "[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h{cursor:wait;--spinner-time:1.4s;--spinner-color:var(--smoothly-color-contrast);--spinner-background:var(--smoothly-color);--spinner-background-opacity:var(--smoothly-semitransparent, 0.8);display:block;stroke:rgb(var(--spinner-color));background-color:rgba(var(--spinner-background), var(--spinner-background-opacity))}.sc-smoothly-spinner-h:not([overlay]){width:var(--spinner-size);height:var(--spinner-size)}[overlay].sc-smoothly-spinner-h{position:absolute;inset:0;width:100%;height:100%;z-index:4;background-color:rgba(var(--spinner-background), var(--spinner-background-opacity))}[color].sc-smoothly-spinner-h:not([overlay]),[color][overlay].sc-smoothly-spinner-h{background-color:rgba(var(--spinner-background), var(--spinner-background-opacity));stroke:rgb(var(--spinner-color))}[overlay].sc-smoothly-spinner-h>svg.sc-smoothly-spinner{position:absolute;width:var(--spinner-size);left:calc(50% - var(--spinner-size) / 2);top:calc(50% - var(--spinner-size) / 2)}.sc-smoothly-spinner-h>svg.sc-smoothly-spinner{animation:SPIN-SVG var(--spinner-time) linear infinite}.sc-smoothly-spinner-h>svg.sc-smoothly-spinner>circle.sc-smoothly-spinner{transform-origin:center;animation:SPIN-CIRCLE var(--spinner-time) ease-in-out infinite;stroke-dasharray:187;stroke-dashoffset:0}@keyframes SPIN-SVG{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes SPIN-CIRCLE{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}";
+const SmoothlySpinnerStyle0 = styleCss$v;
 const SmoothlySpinner = class {
     constructor(hostRef) {
@@ -10948,15 +11089,15 @@ const SmoothlySpinner = class {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (index.h(index.Host, { key: '1c790579c31061c33fa3091dfb2c449598efaf9d', style: {
+        return (index.h(index.Host, { key: 'a4c7ba64670c1a1fc05cbcebc972161c128ef439', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index.h("svg", { key: 'd50777b7f9afc60017fa24d3bbb7935e041fa36b', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'c7e01af7d14a3b1e7665982568f9224799f5f707', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, index.h("svg", { key: '503041a9b8888a4cd0fc8815454ba0a135b5ccc5', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'b48c4a0fc84cd740493b0113e9edb202ab0766c7', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = SmoothlySpinnerStyle0;
-const styleCss$v = ".sc-smoothly-summary-h{display:grid;grid-template-columns:auto 1fr;column-gap:0.3rem}.sc-smoothly-summary-h>details.sc-smoothly-summary{display:contents}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary{display:grid;grid-template-columns:subgrid;grid-column:1/-1;list-style:none;align-items:center;cursor:pointer}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:transform 0.2s, opacity 0.1s;opacity:0.3}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary:hover>smoothly-icon.sc-smoothly-summary{opacity:1}.sc-smoothly-summary-h>details[open].sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transform:rotate(90deg)}.sc-smoothly-summary-h>details.sc-smoothly-summary-s>[slot=content]{grid-column:2}@media (prefers-reduced-motion){.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:none}}@supports selector(details::details-content){.sc-smoothly-summary-h>details.sc-smoothly-summary::details-content{grid-column:2}}";
-const SmoothlySummaryStyle0 = styleCss$v;
+const styleCss$u = ".sc-smoothly-summary-h{display:grid;grid-template-columns:auto 1fr;column-gap:0.3rem}.sc-smoothly-summary-h>details.sc-smoothly-summary{display:contents}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary{display:grid;grid-template-columns:subgrid;grid-column:1/-1;list-style:none;align-items:center;cursor:pointer}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:transform 0.2s, opacity 0.1s;opacity:0.3}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary:hover>smoothly-icon.sc-smoothly-summary{opacity:1}.sc-smoothly-summary-h>details[open].sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transform:rotate(90deg)}.sc-smoothly-summary-h>details.sc-smoothly-summary-s>[slot=content]{grid-column:2}@media (prefers-reduced-motion){.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:none}}@supports selector(details::details-content){.sc-smoothly-summary-h>details.sc-smoothly-summary::details-content{grid-column:2}}";
+const SmoothlySummaryStyle0 = styleCss$u;
 const SmoothlySummary = class {
     constructor(hostRef) {
@@ -10985,13 +11126,13 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (index.h("details", { key: '0992340a956b04223ea7959da62ce5a6c39137e2', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '7549a887c08d7a4f9a8dcf32a9a5235cec95d3d4' }, index.h("smoothly-icon", { key: '5218d138d2ce4c1abeaf9a84c701fa04b5041709', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '5be813bee929e19c932e8bbdc1f60c341655c2ee', name: "summary" })), index.h("slot", { key: '9d521db99027941e0dc4b22f1194557cc6f79f25', name: "content" })));
+        return (index.h("details", { key: '6972875bacbf18c17e62692fe667e3a5b6e211d1', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'f3f5848a2c450b497dc13e6b2d8759887bf2dbcb' }, index.h("smoothly-icon", { key: '3ffa7f16459c1cdb59d12614e471973cad7c734d', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '4a70923a1f581920a5073a88c982a25b4f4ad91f', name: "summary" })), index.h("slot", { key: '586edc90aac41e7304500e14459365406ad74841', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
-const styleCss$u = ".sc-smoothly-tab-h{display:contents;--line-width:3px}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child{grid-column:span 1;background-color:transparent;border-bottom-color:rgb(var(--smoothly-default-shade));border-bottom-width:var(--line-width);border-bottom-style:solid}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{display:block;padding:.5rem;width:fit-content;margin:auto;cursor:pointer}[open].sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{border-bottom:var(--line-width) solid rgb(var(--smoothly-primary-color));margin-bottom:calc(-1 * var(--line-width));position:relative}.sc-smoothly-tab-h>div.sc-smoothly-tab:nth-child(2){grid-row:2 / 3;grid-column:1 / -1}";
-const SmoothlyTabStyle0 = styleCss$u;
+const styleCss$t = ".sc-smoothly-tab-h{display:contents;--line-width:3px}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child{grid-column:span 1;background-color:transparent;border-bottom-color:rgb(var(--smoothly-default-shade));border-bottom-width:var(--line-width);border-bottom-style:solid}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{display:block;padding:.5rem;width:fit-content;margin:auto;cursor:pointer}[open].sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{border-bottom:var(--line-width) solid rgb(var(--smoothly-primary-color));margin-bottom:calc(-1 * var(--line-width));position:relative}.sc-smoothly-tab-h>div.sc-smoothly-tab:nth-child(2){grid-row:2 / 3;grid-column:1 / -1}";
+const SmoothlyTabStyle0 = styleCss$t;
 const SmoothlyTab = class {
     constructor(hostRef) {
@@ -11026,7 +11167,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '177a26489e58248688e4f615de43b1e06d0efcdd' }, index.h("div", { key: 'beb3f0c27000c4283695beddcaf7c30a5bcd74c0' }, index.h("label", { key: '2dbe51fdfee9ca51de3ec008e14811464cbd330c' }, this.label)), index.h("div", { key: '9714a66b42ac315da8ef9623b44691a23553b955', hidden: !this.open }, index.h("slot", { key: '787f590aa4701413d4ab8e5141fc1ad10ea2eeff' }))));
+        return (index.h(index.Host, { key: 'bf01de6f6687e67d581b3fcc70df4b0189cdc483' }, index.h("div", { key: '22c06832c7ba92225f7833b42c4b70d46c3fea21' }, index.h("label", { key: '0c2a059da11d2c1ff854877e10d0358f2c26d7f2' }, this.label)), index.h("div", { key: '49c447f4cdaaf65d36c1a3815df825bec1fd231b', hidden: !this.open }, index.h("slot", { key: '46afbbb524e4c61b9f7a653cc0899817a7d214cc' }))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -11034,8 +11175,8 @@ const SmoothlyTab = class {
 };
 SmoothlyTab.style = SmoothlyTabStyle0;
-const styleCss$t = ".sc-smoothly-table-h{display:grid;grid-template-columns:repeat(var(--columns), auto);color:rgb(var(--smoothly-table-foreground));stroke:rgb(var(--smoothly-table-foreground));fill:rgb(var(--smoothly-table-foreground))}";
-const SmoothlyTableStyle0 = styleCss$t;
+const styleCss$s = ".sc-smoothly-table-h{display:grid;grid-template-columns:repeat(var(--columns), auto);color:rgb(var(--smoothly-table-foreground));stroke:rgb(var(--smoothly-table-foreground));fill:rgb(var(--smoothly-table-foreground))}";
+const SmoothlyTableStyle0 = styleCss$s;
 const SmoothlyTable = class {
     constructor(hostRef) {
@@ -11049,26 +11190,26 @@ const SmoothlyTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '6abc41beffc6b45c81580243f0d32236042728b3', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: 'ffb8dcff192d54ff1a72c72547912f97e71ef122' })));
+        return (index.h(index.Host, { key: 'd3ee38f3f353ed321065b9c3cb7c6778c43708b7', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '4a0181d4b43ac645efd008a338d2daccf9fa8739' })));
     }
 };
 SmoothlyTable.style = SmoothlyTableStyle0;
-const styleCss$s = ".sc-smoothly-table-body-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;color:rgb(var(--smoothly-table-foreground));background-color:rgb(var(--smoothly-table-background))}";
-const SmoothlyTableBodyStyle0 = styleCss$s;
+const styleCss$r = ".sc-smoothly-table-body-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;color:rgb(var(--smoothly-table-foreground));background-color:rgb(var(--smoothly-table-background))}";
+const SmoothlyTableBodyStyle0 = styleCss$r;
 const SmoothlyTableBody = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '419b6269854847340440c32fe1439913b44fc87a' }, index.h("slot", { key: 'f5369f0d2004f35397bfc1a04ba0e72f72e30444' })));
+        return (index.h(index.Host, { key: 'c9efdc19aa837f2dc8b425ca60c58602cd7f9024' }, index.h("slot", { key: '6eb9d7309ef1776d19ab59d84dd892a19fe1b0a9' })));
     }
 };
 SmoothlyTableBody.style = SmoothlyTableBodyStyle0;
-const styleCss$r = ".sc-smoothly-table-cell-h{grid-column:span var(--smoothly-table-cell-span, 1);display:flex;align-items:center;padding:0.3rem 1.1rem;white-space:nowrap}";
-const SmoothlyTableCellStyle0 = styleCss$r;
+const styleCss$q = ".sc-smoothly-table-cell-h{grid-column:span var(--smoothly-table-cell-span, 1);display:flex;align-items:center;padding:0.3rem 1.1rem;white-space:nowrap}";
+const SmoothlyTableCellStyle0 = styleCss$q;
 const SmoothlyTableCell = class {
     constructor(hostRef) {
@@ -11077,39 +11218,39 @@ const SmoothlyTableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '839b168d063d5e1069c1e560b29189d1d035bf35', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '96f38dcbf676e717e42f0319784605e4cb7f04a9' })));
+        return (index.h(index.Host, { key: '923d747aa982297c438900af2739da7b022bb7b8', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: 'f3645d600dcec022c189893f4c27f964454ccc27' })));
     }
 };
 SmoothlyTableCell.style = SmoothlyTableCellStyle0;
-const styleCss$q = ".sc-smoothly-table-demo-h{display:grid;gap:5rem;box-sizing:border-box;max-width:80rem;width:100%;margin:auto;padding:2rem}";
-const SmoothlyTableDemoStyle0 = styleCss$q;
+const styleCss$p = ".sc-smoothly-table-demo-h{display:grid;gap:5rem;box-sizing:border-box;max-width:80rem;width:100%;margin:auto;padding:2rem}";
+const SmoothlyTableDemoStyle0 = styleCss$p;
 const SmoothlyTableDemo = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '52073c33fc6aa4db38cc4f12dd2f46d54e9836a5' }, index.h("smoothly-table-demo-filler-row", { key: '4f35a1cf85a6f7c88ded0ee190b6b21b14995e59' }), index.h("smoothly-table-demo-group", { key: '1c33720119dad21403df3a243a91a791b32f8bcb' }), index.h("smoothly-table-demo-colspan", { key: '8b64521946930deda49a51dcdb76c8790d9e2bc9' }), index.h("smoothly-table-demo-simple", { key: 'ddfd2d9c341a927852bb1899e677a737eb38ad79' }), index.h("smoothly-table-demo-nested", { key: 'd9e0eeddf5863739b2ae6a047309f4183ccd4e56' }), index.h("smoothly-table-demo-filtered", { key: 'b48c95f784cb49e66370ef5ce130aaeff9015ebf' })));
+        return (index.h(index.Host, { key: '2e0f69c384ea605166dab6b064d2d61ad1484f2d' }, index.h("smoothly-table-demo-filler-row", { key: 'cbae7abaa9a22b1c70fe875c9a71eec04fec32dd' }), index.h("smoothly-table-demo-group", { key: 'e22e3a41ceb0fa172268c19c62f9b67d943b8af0' }), index.h("smoothly-table-demo-colspan", { key: '8dbe8cf0b595972d012c4fd0456ee6ef44a79595' }), index.h("smoothly-table-demo-simple", { key: 'df2c9536b21d8f0f21125bf0e21f0c163c917747' }), index.h("smoothly-table-demo-nested", { key: '26589d43ead15fc5d9732cefad4b40b9530c88b5' }), index.h("smoothly-table-demo-filtered", { key: 'e8b535d2aa43894d1f55b5dd947d9a250379f272' })));
     }
 };
 SmoothlyTableDemo.style = SmoothlyTableDemoStyle0;
-const styleCss$p = ".sc-smoothly-table-demo-colspan-h{display:block}.sc-smoothly-table-demo-colspan-h smoothly-display.sc-smoothly-table-demo-colspan{display:inline}";
-const SmoothlyTableDemoColspanStyle0 = styleCss$p;
+const styleCss$o = ".sc-smoothly-table-demo-colspan-h{display:block}.sc-smoothly-table-demo-colspan-h smoothly-display.sc-smoothly-table-demo-colspan{display:inline}";
+const SmoothlyTableDemoColspanStyle0 = styleCss$o;
 const SmoothlyTableDemoColspan = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '3e34193f308159bb9bdc0f09b977700650de4693' }, index.h("smoothly-table", { key: 'b43a4d0acd678728c583d83346da6f7a7dc67c41', columns: 3 }, index.h("smoothly-table-head", { key: '56664269fc7083d97664607c234cc4fbb1f6f4bf' }, index.h("smoothly-table-row", { key: '974080501902f03522b722a5ed62965ac535b2e0' }, index.h("smoothly-table-cell", { key: '7b804228226786642237dca441a21c4a2bf3d86a' }, "Date"), index.h("smoothly-table-cell", { key: '7e6f1f57ebbc2cd5034bf2c1768d4cbe34f6d083' }, "Skip"), index.h("smoothly-table-cell", { key: '8e5bdba4f1ab4370fdefdea76e5877881d1b8d1c' }, "Total"))), index.h("smoothly-table-body", { key: '5a3d668c0ae144cb569a01ed01569ffa3f0b4322' }, index.h("smoothly-table-row", { key: '02370401ad4db907a854714b682c4a0753f7e969' }, index.h("smoothly-table-cell", { key: '33e0acfc2f4c23e7ba1d6c49987210f3f3a090ab', span: 2 }, index.h("smoothly-display", { key: '87f76a1898d3b438c4f7abebec4b0217cd2f071c', type: "date", value: "2024-01-01" })), index.h("smoothly-table-cell", { key: 'cde95f8d767fe1749c8b1fd625a9ce56166ca8fb' }, index.h("smoothly-display", { key: '39c94b8daa6c5c0d3855a884433bd0690d903d1d', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-table-row", { key: 'dae86a5b39cefd863cd378407af6df79b9cc4234' }, index.h("smoothly-table-expandable-cell", { key: '38f21be1a5d61fd8af6b3b8cdb492ffc9bef0b5e', span: 2 }, index.h("smoothly-display", { key: '3c60783835b8e38a85f50fe5b9d6b636e4f23232', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '90032d321295b755b72133e4802b4ec82c6bd61b', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-table-expandable-cell", { key: 'b7962eee7b81e2ece5d17e114f67a424f22e08b0' }, index.h("smoothly-display", { key: 'cfba3c5ce58f5591a510e826765ab5fea2366f58', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '5e3e291772ae876d8a2cd48fe25d80bb94e0d8f7', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index.h("smoothly-table-row", { key: 'a8b2e296f55a212eb47037af89458c2030b2eda1' }, index.h("smoothly-table-cell", { key: 'ed221ee93d5babc1f73bd6f4da928e9bb0f665ec' }, index.h("smoothly-display", { key: '23c4efeaff167ffef3993e4916dedbe14aaeae4a', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: '35bec64456de5038f9775edb19d1469ade53cf5d' }, "Not Skipped"), index.h("smoothly-table-cell", { key: '507ddc3265af461673fa2a81baf20573b998a5ef' }, index.h("smoothly-display", { key: 'f266d235837d23ba666d060e48cba5e7d6b7d470', type: "price", value: 320, currency: "EUR" })))))));
+        return (index.h(index.Host, { key: '9ef435b5eb6f9e2db48893da56449e7c32706291' }, index.h("smoothly-table", { key: '79cef59b6809ed49489589a3e2169ad784241621', columns: 3 }, index.h("smoothly-table-head", { key: 'b9cadf9e69d0e2967399f8601d9d5e28259f8366' }, index.h("smoothly-table-row", { key: '7e9e3906596d3a5e7d27ab5a6f6a658acbbc1da3' }, index.h("smoothly-table-cell", { key: '39f9bf2845c02334a09a4cb230db3f393efdf4fc' }, "Date"), index.h("smoothly-table-cell", { key: '6046869bdf5b551a876ffb2979e0e96ba2fbccb5' }, "Skip"), index.h("smoothly-table-cell", { key: 'c437ef537629aa66dfd3259b0f0aea2e1401bdec' }, "Total"))), index.h("smoothly-table-body", { key: 'f4c417c6e1d8478c1aae9c59f5384e3423ed1d5f' }, index.h("smoothly-table-row", { key: 'e9bded6604d79fa0435e8a727774fcd00d8fc221' }, index.h("smoothly-table-cell", { key: 'c4e3ccc24eef78d55136a97d36e38db12bf7ac62', span: 2 }, index.h("smoothly-display", { key: '8491b6b2f3b3ef004e85a80f686a355d6bcb9c4d', type: "date", value: "2024-01-01" })), index.h("smoothly-table-cell", { key: '43e45c9adbb956417457d7537422559d808eb17a' }, index.h("smoothly-display", { key: '57d748f1861eee4a43d011e6da0f64f4bc5bf692', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-table-row", { key: 'cb2c5b5e99115be17052a304836ae5e2aa295a25' }, index.h("smoothly-table-expandable-cell", { key: '3658b94ef87fa5cca25837fde7ccfe4657c372eb', span: 2 }, index.h("smoothly-display", { key: 'fe99c5be920b64bc2a78a3a5a8c2f6ff98847627', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '2b52440c6dedd32e90f1b61a3407bf4071dc1305', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-table-expandable-cell", { key: 'ede6b79aebc19d158e8016cb3e491332b3f3f1fb' }, index.h("smoothly-display", { key: '6dd41937576d94cb93db8aedb4793b9604a859d7', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '987a6e8da427ac9039ed42f259117b7e8591e471', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index.h("smoothly-table-row", { key: '6c35b356174dc9e767c54f3e5377d331131946fd' }, index.h("smoothly-table-cell", { key: '2614e06d1c8b0cd5e672656d327b217b9c2ae4df' }, index.h("smoothly-display", { key: 'b0790e7fd4f0ef2799785bbc984dc76d70fbfca1', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: '04f32c99061b88aed8263aca11826e582c149b62' }, "Not Skipped"), index.h("smoothly-table-cell", { key: 'e5f8b2659985b1a7365e1220afbe37d694e0d294' }, index.h("smoothly-display", { key: 'dd272c9c6c8d15b75ac7181650a74a4ca69baeba', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyTableDemoColspan.style = SmoothlyTableDemoColspanStyle0;
-const styleCss$o = ".sc-smoothly-table-demo-filler-row-h{display:block}.sc-smoothly-table-demo-filler-row-h>smoothly-display.sc-smoothly-table-demo-filler-row{font-size:2em}.sc-smoothly-table-demo-filler-row-h>*.sc-smoothly-table-demo-filler-row{margin-bottom:2rem}";
-const SmoothlyTableDemoFillerRowStyle0 = styleCss$o;
+const styleCss$n = ".sc-smoothly-table-demo-filler-row-h{display:block}.sc-smoothly-table-demo-filler-row-h>smoothly-display.sc-smoothly-table-demo-filler-row{font-size:2em}.sc-smoothly-table-demo-filler-row-h>*.sc-smoothly-table-demo-filler-row{margin-bottom:2rem}";
+const SmoothlyTableDemoFillerRowStyle0 = styleCss$n;
 const SmoothlyTableDemoFillerRow = class {
     constructor(hostRef) {
@@ -11122,7 +11263,7 @@ const SmoothlyTableDemoFillerRow = class {
         }, 3000);
     }
     render() {
-        return (index.h(index.Host, { key: '19bc7d4ed0eb23c000767c730aa4e228fdb50069' }, index.h("smoothly-display", { key: 'bb31fb70ffe9240b5af1fe847b6f25880ed2b0e7', type: "text", value: "Filler row" }), index.h("smoothly-table", { key: 'feb1a1ed858879fc7dc5a8a012d3e167c08cb7a8', color: "primary", columns: 4 }, index.h("smoothly-table-head", { key: '49c5ce0d2cad194cc4ae9ccb67553f55000298a5' }, index.h("smoothly-table-row", { key: '3759ed5a89913c27a0bd9564f7926417fa4c6bc8' }, index.h("smoothly-table-cell", { key: 'e0fa6b5c4e4483082f07abb262ff0ac765170f4f' }, "Breed"), index.h("smoothly-table-cell", { key: 'e9adc4def9a510c64a7a726bd15f52a7884b8577' }, "Country"), index.h("smoothly-table-cell", { key: 'a2aa66dc2a576fd8f80603696b3e2ea4e6435c04' }, "Coat"), index.h("smoothly-table-cell", { key: 'f8a537417a8e153686f525a83852b7ef348df382' }, "Origin"))), index.h("smoothly-table-body", { key: '8a4b21db78bd229f4b6912d988df97b1a2326eff' }, this.cats === undefined ? (index.h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, a.breed), index.h("smoothly-table-cell", null, a.country), index.h("smoothly-table-cell", null, a.coat), index.h("smoothly-table-cell", null, a.origin)))))))));
+        return (index.h(index.Host, { key: '7dcfad4fb675e2c93d0d3723a0ac558b49804836' }, index.h("smoothly-display", { key: '06fe0424854be3b871b86d4c3744543fde9782c7', type: "text", value: "Filler row" }), index.h("smoothly-table", { key: '0b6d6ab32dcf38bded53848eb347458475584f58', color: "primary", columns: 4 }, index.h("smoothly-table-head", { key: 'd548b9f5c2b5ec6042b6c01e7e5ebdcd43327fac' }, index.h("smoothly-table-row", { key: '092af762d3a5e6bbb805ca808ae418a3f4cc7613' }, index.h("smoothly-table-cell", { key: 'b4f3df930270e4fa76559985ae91fa5889d848d6' }, "Breed"), index.h("smoothly-table-cell", { key: 'a36497f6eeb6ecd94472dfab55516cd5a53cf9a5' }, "Country"), index.h("smoothly-table-cell", { key: '2efff3b4316a2336e093680c2741055a72b1daf7' }, "Coat"), index.h("smoothly-table-cell", { key: '0feb3a834878720986c1bfc772a4df1b822555e9' }, "Origin"))), index.h("smoothly-table-body", { key: 'e6fd81b86b58cf4e549a0991f206316c73da0940' }, this.cats === undefined ? (index.h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, a.breed), index.h("smoothly-table-cell", null, a.country), index.h("smoothly-table-cell", null, a.coat), index.h("smoothly-table-cell", null, a.origin)))))))));
     }
 };
 SmoothlyTableDemoFillerRow.style = SmoothlyTableDemoFillerRowStyle0;
@@ -11165,8 +11306,8 @@ class Selector {
 }
 _Selector_selected = new WeakMap();
-const styleCss$n = ".sc-smoothly-table-demo-filtered-h{display:grid;grid-template-columns:auto auto;grid-template-areas:\"header filter\"\n\t\t\"main main\";margin-bottom:50em}.sc-smoothly-table-demo-filtered-h>smoothly-display.sc-smoothly-table-demo-filtered{font-size:2em;grid-area:header}.sc-smoothly-table-demo-filtered-h>smoothly-filter.sc-smoothly-table-demo-filtered{margin-left:auto;grid-area:filter;height:fit-content}.sc-smoothly-table-demo-filtered-h>*.sc-smoothly-table-demo-filtered{margin-bottom:2rem;grid-area:main}.sc-smoothly-table-demo-filtered-h>smoothly-table.sc-smoothly-table-demo-filtered{grid-template-columns:min-content repeat(calc(var(--columns) - 1), auto)}smoothly-table.sc-smoothly-table-demo-filtered>smoothly-table-row.sc-smoothly-table-demo-filtered>smoothly-table-cell.sc-smoothly-table-demo-filtered:nth-of-type(2),.sc-smoothly-table-demo-filtered-h>smoothly-table.sc-smoothly-table-demo-filtered>smoothly-table-head.sc-smoothly-table-demo-filtered>smoothly-table-row.sc-smoothly-table-demo-filtered>smoothly-table-cell.sc-smoothly-table-demo-filtered:nth-of-type(4){justify-content:end}";
-const SmoothlyTableDemoFilteredStyle0 = styleCss$n;
+const styleCss$m = ".sc-smoothly-table-demo-filtered-h{display:grid;grid-template-columns:auto auto;grid-template-areas:\"header filter\"\n\t\t\"main main\";margin-bottom:50em}.sc-smoothly-table-demo-filtered-h>smoothly-display.sc-smoothly-table-demo-filtered{font-size:2em;grid-area:header}.sc-smoothly-table-demo-filtered-h>smoothly-filter.sc-smoothly-table-demo-filtered{margin-left:auto;grid-area:filter;height:fit-content}.sc-smoothly-table-demo-filtered-h>*.sc-smoothly-table-demo-filtered{margin-bottom:2rem;grid-area:main}.sc-smoothly-table-demo-filtered-h>smoothly-table.sc-smoothly-table-demo-filtered{grid-template-columns:min-content repeat(calc(var(--columns) - 1), auto)}smoothly-table.sc-smoothly-table-demo-filtered>smoothly-table-row.sc-smoothly-table-demo-filtered>smoothly-table-cell.sc-smoothly-table-demo-filtered:nth-of-type(2),.sc-smoothly-table-demo-filtered-h>smoothly-table.sc-smoothly-table-demo-filtered>smoothly-table-head.sc-smoothly-table-demo-filtered>smoothly-table-row.sc-smoothly-table-demo-filtered>smoothly-table-cell.sc-smoothly-table-demo-filtered:nth-of-type(4){justify-content:end}";
+const SmoothlyTableDemoFilteredStyle0 = styleCss$m;
 const TableDemoFiltered = class {
     constructor(hostRef) {
@@ -11194,18 +11335,18 @@ const TableDemoFiltered = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: 'f8244e86f9d20163a296eff32c0126192c2f0168' }, index.h("smoothly-display", { key: 'b8c6ff3c636231f5e0d14b260f99b4767f49f889', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '2c52b1628d21083565da0dc1d4dfe5f1aa5fa11c' }, index.h("smoothly-filter-toggle", { key: '30feb3b72f53bb17e4cae9b7de3c32e9f9082fc4', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '3a203996f9cb545d0797f93c34034bd4fca27ea4', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'a6a6d3b7b359de6a8143fd23575809b41235b4ba', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '878dac5daece272d96e40bb1cc5e996a3e9b235e', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'e3ad45d9e9932f1ea6d183278efe2a9413905c70', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '0475326980b22173408a0fa890b1d4d999172539' }, index.h("smoothly-display", { key: 'bf7eb0681acb63e94a7d8a16d9c78c190ca18e8d', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '043855785c21a3638c5a7c230283edcbd51f220c' }, index.h("smoothly-filter-toggle", { key: '3c2e457ebc921deaa508ed0de8dcd0660e03befe', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '663e0a72e69994c2dd9b0f04a74aaa536d03d1fb', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '2651a3afdf7752068e3e13d5fe03dc12f2bcc711', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'a96cf3131461a54eb7d455c3eabb3206c163ec9e', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'b7ecf9f3fc027e7838d2a1b04fe6acd88469ee69', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
             Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
                 var _a;
                 return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("div", { key: 'a2843093bf727be5191134fc35ca7a3dbfbb5010', slot: "detail" }, index.h("smoothly-form", { key: 'eef5df439484fc442843b45d9aec2b48af3bda66', looks: "border" }, index.h("smoothly-filter-select", { key: 'c88d9d5f254b31728950a4ba703c823515601998', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '3f7cbd6637bad9b5cd273dfe52711ded12656906', slot: "detail" }, index.h("smoothly-form", { key: '5ca304bd09c37e126ba18c48204f95667678e298', looks: "border" }, index.h("smoothly-filter-select", { key: '8382993b64598ec7f9ed69703c6afd34bb0db1a0', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
             Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
                 var _a;
                 return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("smoothly-filter-select", { key: 'd76e123d6f63ad3dadc8d46b4ec3c1ff26414461', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (index.h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), index.h("smoothly-filter-select", { key: '217a1ec1a690e657fa064591616d0e9e24cce84e', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), index.h("smoothly-filter-select", { key: '501da6a3d6556db3c3791fcb515a1449c30cb233', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
+            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (index.h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), index.h("smoothly-filter-select", { key: 'da2726dd925ff184327dc9c31d9bc28a17124130', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
             .flat()
-            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (index.h("smoothly-item", { slot: "items", value: name }, name)))), index.h("smoothly-filter-input", { key: 'ede93e0f3c380f7057f0fecf6d6e063881f132eb', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '56ab36148e22836aea817bc970865da8799965d6', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", { columns: 4 }, index.h("smoothly-table-head", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cats)), index.h("smoothly-table-cell", null, "Breed"), index.h("smoothly-table-cell", null, "Coat"), index.h("smoothly-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-foot", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", { span: 3 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
+            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (index.h("smoothly-item", { slot: "items", value: name }, name)))), index.h("smoothly-filter-input", { key: '575878f556cbe7b2a59832c5d0a9543945fe7f50', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '398515313e699c67f89b924bd11dc6c2b5f64047', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", { columns: 4 }, index.h("smoothly-table-head", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cats)), index.h("smoothly-table-cell", null, "Breed"), index.h("smoothly-table-cell", null, "Coat"), index.h("smoothly-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-foot", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", { span: 3 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
     }
 };
 const names = {
@@ -11216,15 +11357,15 @@ const names = {
 };
 TableDemoFiltered.style = SmoothlyTableDemoFilteredStyle0;
-const styleCss$m = ".sc-smoothly-table-demo-group-h{display:block}.sc-smoothly-table-demo-group-h smoothly-display.sc-smoothly-table-demo-group{display:inline}.sc-smoothly-table-demo-group-h fake-cell-wrapper.span-2.sc-smoothly-table-demo-group{grid-column:span 2}.sc-smoothly-table-demo-group-h>smoothly-display.sc-smoothly-table-demo-group{display:inherit;font-size:2em}.sc-smoothly-table-demo-group-h>*.sc-smoothly-table-demo-group{margin-bottom:2rem}.sc-smoothly-table-demo-group-h fake-group-wrapper.sc-smoothly-table-demo-group,.sc-smoothly-table-demo-group-h fake-row-wrapper.sc-smoothly-table-demo-group,.sc-smoothly-table-demo-group-h fake-expandable-row-wrapper.sc-smoothly-table-demo-group{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.sc-smoothly-table-demo-group-h fake-cell-wrapper.sc-smoothly-table-demo-group{grid-column:span 1;display:block}.sc-smoothly-table-demo-group-h fake-expandable-cell-wrapper.sc-smoothly-table-demo-group{display:contents}";
-const SmoothlyTableDemoGroupStyle0 = styleCss$m;
+const styleCss$l = ".sc-smoothly-table-demo-group-h{display:block}.sc-smoothly-table-demo-group-h smoothly-display.sc-smoothly-table-demo-group{display:inline}.sc-smoothly-table-demo-group-h fake-cell-wrapper.span-2.sc-smoothly-table-demo-group{grid-column:span 2}.sc-smoothly-table-demo-group-h>smoothly-display.sc-smoothly-table-demo-group{display:inherit;font-size:2em}.sc-smoothly-table-demo-group-h>*.sc-smoothly-table-demo-group{margin-bottom:2rem}.sc-smoothly-table-demo-group-h fake-group-wrapper.sc-smoothly-table-demo-group,.sc-smoothly-table-demo-group-h fake-row-wrapper.sc-smoothly-table-demo-group,.sc-smoothly-table-demo-group-h fake-expandable-row-wrapper.sc-smoothly-table-demo-group{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.sc-smoothly-table-demo-group-h fake-cell-wrapper.sc-smoothly-table-demo-group{grid-column:span 1;display:block}.sc-smoothly-table-demo-group-h fake-expandable-cell-wrapper.sc-smoothly-table-demo-group{display:contents}";
+const SmoothlyTableDemoGroupStyle0 = styleCss$l;
 const SmoothlyTableDemoGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '1034540a98faf600a953aec9b0d9b5d26031f166' }, index.h("smoothly-display", { key: '88f047faaced01d446f0a205a560ea84047744a1', type: "text", value: "Group" }), index.h("smoothly-table", { key: 'af471bfcedad100ae30150628d4cc3800ca8b6ca', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '14642db2794498956bb5d1fe6acb5fdc84b6e2b2' }, index.h("smoothly-table-row", { key: '2a0ba815cad8dda6501a0d3bb49a8dbb62261f30' }, index.h("smoothly-table-cell", { key: 'b377d5e5cafebd0280aeb0f99fd1bfa7080ed033' }, "Date"), index.h("smoothly-table-cell", { key: '4ea57090e582d506d569b618e03115d7cf175630' }, "Total"))), index.h("smoothly-table-body", { key: '07ab19f5e57c95e1449428638cabe53be0ab1982' }, index.h("smoothly-table-row-group", { key: '4f11896e5ca0ddc9ad4a43a99d618ca687fd0665', align: true }, index.h("smoothly-display", { key: 'b193951320dc1044ce6e8abaf58337b940a09894', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '32218a0b2afa1d24817cc963922eeafa2e1e5db5', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-table-expandable-row", { key: '81e7daf6a6e9c53db9e3bf54c19ecf2b50fe1a14' }, index.h("smoothly-table-cell", { key: 'a92e44fc7721a2b8f9a69008d3879963c105ab1f' }, index.h("smoothly-display", { key: '4836adb43eecad122272039cee91db984dd743f2', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '120d701d11a219a6541831baaf87ff4d723cdcc4' }, index.h("smoothly-display", { key: '43cc5384340f4548687dc83dac8eab6d5c7a8ec9', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '3dcac4e4d28bac23a172da204439b2631ef96798', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'c682c8da163d199ec418b9c8a8a757c79f4bc2dc' }, index.h("smoothly-table-cell", { key: '996085ca2beaf50fbb6b801005b9027841f7dbbe' }, index.h("smoothly-display", { key: 'c16a1b376275e61a9710de2ce9f315d670618310', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '366ae68c39dca6f2325d9041a46384cef5739024' }, index.h("smoothly-display", { key: 'bef71253203a53db1b9eb0569004726f1a8fb254', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: 'da35ffcb42c4e729f2a0527b38d0c216b71da52a', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-table-row", { key: 'e92df1aa55107de9287b4e6d0da32de331d8820f' }, index.h("smoothly-table-cell", { key: '499be1873791c2fd7f727d7ed0d1629e29688e28' }, index.h("smoothly-display", { key: '6c6ac22ebd8a5b56cb52c5a8542673eee54fdc6f', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: '77158bc253e893d9471afe55dd6ce37e1e22bf16' }, index.h("smoothly-display", { key: '28832eae08eec6de59407c9de07fdef3e616170e', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-table-row-group", { key: 'e9e4e349e364d8d26fd1b90b18e24e75f3af710c' }, index.h("smoothly-display", { key: '43164349ce717696792a21421f9b52bfe62044d0', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: 'bd8eb344377824670e1219c802e99727e2f8a89d', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '31bcc27b52845699f0ee7e9efb27cccbe4d43223' }, index.h("smoothly-table-cell", { key: 'f0c1462b237797440696298f6086c7dc3fd1cd98' }, index.h("smoothly-display", { key: 'cfdc9876392add8fcd24ea4745770036af566da4', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '5605695d73d540b01984598c1f5964860d8438f6' }, index.h("smoothly-display", { key: '7f355901e0101c45bfa2a5653026e78320acb139', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'e1667a9048344e93aafb944e48123afcb9896ef2', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '0472b3979d1ac6f92e20fe5f709c67af7ee63bfd' }, index.h("smoothly-table-cell", { key: '06359d29cc7a216a23dfb2174a98797cbdb73da4' }, index.h("smoothly-display", { key: '264f1532cb20ccd6ec12deef3ee86f17863293d2', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '72a12b91b051b2896a74a5add41e7a18c712dfe9' }, index.h("smoothly-display", { key: '13b46fad06f4c50051a1d759e14964539e5080fe', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '57f10d0b320a04996492e96c41616f467dc8a970', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '99f021f3d3c93e1ad10c824c02938990bd097a38' }, index.h("smoothly-display", { key: 'cdd2ea85952eb82236b830d28a7b0e04f56a3a88', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-table-expandable-row", { key: 'c81417b3c22bdbdf39b3b2954abbe27ba36200e9' }, index.h("smoothly-table-cell", { key: '9f72351bc3ca870887829689ead20a662f1939d3' }, index.h("smoothly-display", { key: '4aeb1c5d1860d272daf29c42f51b4262e3ae130b', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'de6dcfc8fb2616402ee0b13efd1ebdabe515a127' }, index.h("smoothly-display", { key: 'e91648acc4a155293dba130e178ffbee56e9dbbf', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '324773d0738ce82283e6e8951265bd6a6b85ecda', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '1bcfdc3cdc43857b29dd359facaf75e4b7e199e9' }, index.h("smoothly-table-cell", { key: 'b318048f5cda12927f4fad00ddaa6ae57700fd4f' }, index.h("smoothly-display", { key: '8936240e59e693824c668fba172ef7abf5bfe154', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'c24285792e6394dac7871d02d79cb486ba9c7269' }, index.h("smoothly-display", { key: '509b4ebffda8e12de3eb4352c10e342025ac0f4e', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'e96ef00ea6d1866b0c8ab24a996aa9945a2cc81e', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: 'ea8ee80354c68b0f0aef455de4a93c53d6f79064' }, index.h("smoothly-display", { key: 'ff1f9450bc55b46c5a37af12ac990fd3c478aeac', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '29973938b1cebd9eb81e39f58d5973c291421b2b' }, index.h("smoothly-table-cell", { key: '7bf794e7b3b0bf8cf4d1530dbf1ed35b241d9fcc' }, index.h("smoothly-display", { key: '9eecb9255f5a75c93de280aad89f0f113388dd74', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '29e8bb6a32c4809cdf5454db6901b5ee5d9fc818' }, index.h("smoothly-display", { key: '1b0f13543db874ccc0a58aad14dfdbbcc1d8568b', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '87219c0372a63cfb2ee9b2c649a995b0b5f6870e', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '110c5c56ef60a472c20db6630be831e4ec2f96c9' }, index.h("smoothly-table-cell", { key: '10bf1dc3e9603fe4ecd0f0a1235b98942b28d121' }, index.h("smoothly-display", { key: 'c9da9d00ff04e7f550099ace2219940a50b28c48', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '2e581d12913416d23f17c9b5b8b52b871f45b736' }, index.h("smoothly-display", { key: '6d2d1449bceb8b9f72bfbf5ee5c285f8a0e42936', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '7b5e7cd8a145fb79cc3115e9910d9401788d043c', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: 'd643f958e09e8a4ce097ae22e9c75487fda068e6' }, index.h("smoothly-table-row-group", { key: 'e2c08488abe0ec8e17eadb8e6bb097ca705e5270' }, index.h("smoothly-display", { key: 'c86ce34607e245f4fd31b67f4bded15086538a3e', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: 'a36ef3d966f2862f1f65a9c8b8a8f9536069311e', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: 'adcad0e70a4db0594014f808caf00c98ca2b7ac7' }, index.h("smoothly-table-row", { key: 'a950bbbb0792b9a28324105b447e5347ceb561e8' }, index.h("fake-cell-wrapper", { key: '3220faff99707a6f8c54ab624f1e21d1b33dbd6c' }, index.h("smoothly-table-cell", { key: '27c97c03c54e5f5564b3125e02e672a50fb6d0c1' }, index.h("smoothly-display", { key: '299d746ccab64a1db90ca1aef21d3e8df61aaa22', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'fd2791819ea29c8f2bac0c400fe38f6c7a24fe04' }, index.h("smoothly-table-expandable-cell", { key: '19e32e94b1066485d1fb4d27f5ef3071d210c492' }, index.h("smoothly-display", { key: 'd28c9c3e98422760a2a9bf970d5c5434dd9c0805', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '4c7f4047f79dc6125eb9c7b99325dae50c1244ad', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index.h("fake-expandable-row-wrapper", { key: '172a08d7e467a00ec054c668b3e4f7b7276fffe7' }, index.h("smoothly-table-expandable-row", { key: 'f7519806559ed0358bd48dfa2d793a8d562a4687' }, index.h("fake-cell-wrapper", { key: 'de3abe6b9cde5ee429071430a1372bd363ca062e', class: "span-2" }, index.h("smoothly-table-cell", { key: '9b22dbc7264514633f198767171c52c59ba9b60f', span: 2 }, index.h("smoothly-display", { key: 'cd8f6855d38a8c1e74d23c32b3792dcbcf88ca71', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '65f410793a67e31ada397a000d6119a0b9238fff', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-table-row-group", { key: 'e9b3b35a246b1f210d87fe9c128f47aeaee91445' }, index.h("smoothly-display", { key: 'a827670eb50efe1287215c1171c8058af0d8333c', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '772c96f8a63b795575f2c4be5f9fd250862e011d', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index.h(index.Host, { key: '60210988d114a212e6533116ae5a12bb2f006091' }, index.h("smoothly-display", { key: '9bfa6a64f216abce26c4b124b42735c980ff1fd8', type: "text", value: "Group" }), index.h("smoothly-table", { key: 'e8a7e995cbfdfe5a67dbb9794ba387442c43f9fd', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: 'c21074694d7c73f24ac4018e3afad27984096a47' }, index.h("smoothly-table-row", { key: '772b830323d0c30d41281ab0a80d947146194e2e' }, index.h("smoothly-table-cell", { key: 'ab0456934cb60a780b068889545e6dbd5bcae4f5' }, "Date"), index.h("smoothly-table-cell", { key: '153be70cc322db85366dd5c54f2f756df78b9542' }, "Total"))), index.h("smoothly-table-body", { key: '2b52160b021edf8e24d463ca5dabc0553fcd89e2' }, index.h("smoothly-table-row-group", { key: '9de1cd4ca2ac369a86c260396d68ae6e2a73bec4', align: true }, index.h("smoothly-display", { key: 'd3e90e9a49756e8f6f77a909c747eecf1625c1dc', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '423dcbf139298d5fae23298d5d0f8f985340a8e6', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-table-expandable-row", { key: '073da8c3627b46ae457239083a8e17a7fb7bbc29' }, index.h("smoothly-table-cell", { key: 'bdfd5ab8cff3be7940fd44e06628a323bf09ba9e' }, index.h("smoothly-display", { key: '35231e7ae2447c84e99f9d22ba9b77747a11ce75', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '15ee6c25e1dc8628908dad4a7a9035a15f514fe1' }, index.h("smoothly-display", { key: '18ae9780862b345c47c38371e684589c9d9ccf96', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '0378fc2f61e6b77a900921656bcd880ad57c0803', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'd60b4df9573b1bf3173a9bff52e1c1aa2d536718' }, index.h("smoothly-table-cell", { key: '6c3316c9d651b2e7fb8370942603d0623287ec94' }, index.h("smoothly-display", { key: 'd2e58021de70e18b3f8668ad3035e2ebee458569', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'b72314e222a133163d37a6dcd312d20c9c32bb35' }, index.h("smoothly-display", { key: '2820559c21b6e7add0e0705079b53863643e6639', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: 'c154b9e4ea3edf2b57953a0c92338dbf08c9f4e6', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-table-row", { key: 'c5a5e1501834b9c12a2c3d5d96de6e1afda85b6c' }, index.h("smoothly-table-cell", { key: '52b4e4046c6582471604b7d6cfa37d091867bbb1' }, index.h("smoothly-display", { key: '3a00e5ee9a448ab1a12cca26e98fd2e267899638', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: '6854165d7b6b23716ebab03498bb0340b9aaf59c' }, index.h("smoothly-display", { key: 'b770fb715ff169e41a78cd25a3742ee88fa045b0', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-table-row-group", { key: '6cae202be106666d48208a72a8d7ece7c3c9e61d' }, index.h("smoothly-display", { key: '31b35117ebe1776c467931445b3beb0661598143', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: 'cde43a29c9d56a2c8cbb4246e2ad3b0da85dd9e3', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: 'fb0fa8fdb4cd39762b013a815b128c23b612ce34' }, index.h("smoothly-table-cell", { key: '5223d9ec50834539e28054c478b35dae930ee533' }, index.h("smoothly-display", { key: '5ac24e1efb4bcfd768f8b08598d79489c7f6d12b', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '6b8c777c996aa89043414d58562d232ad1277445' }, index.h("smoothly-display", { key: '5a4078f4ac7e2d22b79a0747fc1af58c0b0afc9b', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '0362c3611afd45a9cc208de5c165c33810a56b4b', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'd101b63faf17e891639e3b297b99a0a38b93b912' }, index.h("smoothly-table-cell", { key: '92b6433cfda9b92d770cee99a5f250294d4c020d' }, index.h("smoothly-display", { key: '98f346fbbb8cddc52c1e26f37b0f42879a6c9c54', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'f351724202a21c22609701723621104acd80ada4' }, index.h("smoothly-display", { key: '30467a3ec01c1215b609c72016adcc2515236c94', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '922fed9e25d89a6bcb0d1969718db9aab7a7b1de', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: 'b750b7aab273e5105e471e00b94fa8b4ae04195a' }, index.h("smoothly-display", { key: 'c0c0187983bdd100ba863fc220d3f75597315677', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-table-expandable-row", { key: '7b6c661fc99ea11547b2840f7081cd8d56bf0f50' }, index.h("smoothly-table-cell", { key: '439d43004ab59d6945aa7922c227406e1cc13c1c' }, index.h("smoothly-display", { key: 'b9da84660a51817abe5d3911ea88ded8ceb2db52', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '13c4c47aeea3de98599f93cd5aec7348d8d64f3c' }, index.h("smoothly-display", { key: 'f278855d3c6218913ff18c9898bd028ec44afd4d', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'b2217b74e5d3f1cf421355d688355b4c05727381', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '750dea4a31dc568236000d23c3f53bcf6206a711' }, index.h("smoothly-table-cell", { key: 'ecc4dc184cca517124a33fe5a59c3381fbe4683b' }, index.h("smoothly-display", { key: '8fbf7cf14af04781bdb34d087b015141c5f2da80', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '34c5f9eac3351f4bc9d82d6ab9c71ea9e3ebe4ab' }, index.h("smoothly-display", { key: '9714dbd9dab8c3b9d61f2b57c1214a15bd2fa1e4', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'b93312958868960283f6729cd9fa0e3c61387b99', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: 'afad5636a64d7fbd80f3b11b17eeeba267d08973' }, index.h("smoothly-display", { key: '91904f097d0fa78d5690e62d1befd24383d1c77b', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: 'dbdc37a3f8bdab9f10f6f1c55ed707fd7cdc1eef' }, index.h("smoothly-table-cell", { key: '0cf5a40323727e8d257921e9e8bd198b570e6022' }, index.h("smoothly-display", { key: '22786908390f37ae69f33599cbf5ade4ddca3c98', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'f5616cd89da6ae38c0d34d94a1ad63bdfbf8f08f' }, index.h("smoothly-display", { key: '1e1050c1d404d27053dfec2b5de321e58d8fb988', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '62b4322ffb8ba2dd95e8791a68c5715ae37367d9', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '6a338c55f3545e95af1895980eabf2f58e52df24' }, index.h("smoothly-table-cell", { key: '126b3ca4c3df72dd2ec8f8093974d60bdd7f2bdd' }, index.h("smoothly-display", { key: 'd5643b22900a1d565968a26c7b3fb735a72a598f', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '145dc479c33ec64097b8a2702b2add8d0a105021' }, index.h("smoothly-display", { key: '43cf5550020cabb730da7ac78256301533ec2596', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '33832e70d4dc912ba6fa73aa1c99124e482e64be', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '9b799447135932c0747abbcd9fd74e5639b890b9' }, index.h("smoothly-table-row-group", { key: '6ed75f4c2e881dbf43b45e207826e632a9d54eff' }, index.h("smoothly-display", { key: '874d5879fa883b08cf1261137e367252182eb9a3', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '8fe439cb68b0faeb7ab1416b420af8540cce1e1b', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: 'f07258f405cce81173e9c23823af03fb178a0009' }, index.h("smoothly-table-row", { key: '60336e542e39752ef14a04d9321517ad07cc359c' }, index.h("fake-cell-wrapper", { key: '8748473801fb6748f5aee02375140d7f119c2cf7' }, index.h("smoothly-table-cell", { key: '7a818fd86b7432d84337cf1a237ce46a3101c459' }, index.h("smoothly-display", { key: '353e08f30b98c96b9a83f2e616599984c12ccd1d', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'e26683acdac707086a4355e1aa303946a422dc3b' }, index.h("smoothly-table-expandable-cell", { key: 'bae210d25cfdafe0bb0a470d8ac740c0512c35b5' }, index.h("smoothly-display", { key: 'c4d6f56771ffdcbf98bf98c6dd72bf93ead8e688', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: 'f3f2128df9ba49451fcfdab0be250e9b4bca400b', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index.h("fake-expandable-row-wrapper", { key: '7c81ccc5bba3dba2097bebfa02245d5adbdb5580' }, index.h("smoothly-table-expandable-row", { key: '8dc31434f3bd971ae368658f6cef94ef1643f490' }, index.h("fake-cell-wrapper", { key: 'd3fbf3a11430c7038d33945f3c871e7f6d8df02a', class: "span-2" }, index.h("smoothly-table-cell", { key: 'd9f9bfea63cd218f6fa8caf6e3b244dd2a36a075', span: 2 }, index.h("smoothly-display", { key: 'cfa3fb4c47d6b62f6aef2d3e2f5ebffeeb2524f2', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: 'dfc7a3ed6291c95cf979c381e03167385c9b845c', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-table-row-group", { key: '30e786c56f398f4cc9da0a805a23bca9455eea09' }, index.h("smoothly-display", { key: '845499ca079fd835816b2af16e0136b3559dfb18', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: 'eae1d5ac00d958bd0236e8e79a6be7a6da02a6cb', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyTableDemoGroup.style = SmoothlyTableDemoGroupStyle0;
@@ -12162,21 +12303,21 @@ const data = [
     },
 ];
-const styleCss$l = ".sc-smoothly-table-demo-nested-h{display:block}.sc-smoothly-table-demo-nested-h>smoothly-display.sc-smoothly-table-demo-nested{font-size:2em}.sc-smoothly-table-demo-nested-h>*.sc-smoothly-table-demo-nested{margin-bottom:2rem}";
-const SmoothlyTableDemoNestedStyle0 = styleCss$l;
+const styleCss$k = ".sc-smoothly-table-demo-nested-h{display:block}.sc-smoothly-table-demo-nested-h>smoothly-display.sc-smoothly-table-demo-nested{font-size:2em}.sc-smoothly-table-demo-nested-h>*.sc-smoothly-table-demo-nested{margin-bottom:2rem}";
+const SmoothlyTableDemoNestedStyle0 = styleCss$k;
 const SmoothlyTableDemoNested = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '69539e731b90d5b511d364a0cbc504f4f3b7b998' }, index.h("smoothly-display", { key: '2adf938a2648edc88a391b7135aef7d9fd4da26b', type: "text", value: "Nested" }), index.h("smoothly-table", { key: 'b1281e55321dacce35828ba7afd040da105f8625', color: "primary", columns: 8 }, index.h("smoothly-table-head", { key: 'bba8cb215ebc040cacac13c7d1a3c580e401769e' }, index.h("smoothly-table-row", { key: '6145e98d26c3612170bbbe4e8fdb327d70687491' }, index.h("smoothly-table-cell", { key: 'e440820fa3cb61fa114a11bad1d5cc515b71f02f' }, "Id"), index.h("smoothly-table-cell", { key: 'b83c06761eff7b69d744218657989d69366dcbe3' }, "Registered"), index.h("smoothly-table-cell", { key: '6a17ffbec65a8008ddaaeaccd6f0e0814e9646ae' }, "Name"), index.h("smoothly-table-cell", { key: '7e16bc49d25f91da77a7bd9f6c4e32486a9829e7' }, "Age"), index.h("smoothly-table-cell", { key: '4ed8677d72e0a71e4dff482c35305882e8d6e4ef' }, "Balance"), index.h("smoothly-table-cell", { key: 'e8b12d3c076ce442c6424745ab5803444855efc4' }, "EyeColor"), index.h("smoothly-table-cell", { key: '4222c1a4830c631b590056ac3309f0672b09df81' }, "Gender"), index.h("smoothly-table-cell", { key: '4fc564f09cb4d994753d83095dd7381b9c29cf53' }, "Company"))), index.h("smoothly-table-body", { key: '1dfe30e5488defdfebf8ec5c09347b31837b9f1a' }, data.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.registered), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance), index.h("smoothly-table-cell", null, entry.eyeColor), index.h("smoothly-table-cell", null, entry.gender), index.h("smoothly-table-cell", null, entry.company))))), index.h("smoothly-table-foot", { key: 'fccda52a42a3549a7c87127a037257f05a65000f' }, index.h("smoothly-table-row", { key: 'aea36ed1341c1889f4675c97c44c94662d020ae5' }, index.h("smoothly-table-cell", { key: 'c2724c419810089e8f9e776244401a09dc1765ed' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '3fe2b6e9a49c025cb677e458ae1a010130c6f45b' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '7a97fc80b558f14379f211b6a5980f4cc8a45061' }, index.h("smoothly-display", { key: 'af2df1359fa51873bce9faec83f43d555242e702', type: "text", value: "Nested" }), index.h("smoothly-table", { key: '0d9a9f7c1a219953c4a35eaefb5262c1c3298f19', color: "primary", columns: 8 }, index.h("smoothly-table-head", { key: '67539d47965a1b0ad3ed86a7e950ea83523f6872' }, index.h("smoothly-table-row", { key: '5c46fb1a9427f7ff6f2faad213b69179c653f11c' }, index.h("smoothly-table-cell", { key: '89e9902217f300e32fa85328573278c2d65f1ada' }, "Id"), index.h("smoothly-table-cell", { key: 'c1ee3e7efdb821a4a84e4fbd4a7d9ce5c2025e5a' }, "Registered"), index.h("smoothly-table-cell", { key: 'd8a1b8c12e3e7c2a9d98429a89e29b6fb4d8d2e6' }, "Name"), index.h("smoothly-table-cell", { key: '48f7fc2bc644ce72fd61b8a910016d4d127d5bb9' }, "Age"), index.h("smoothly-table-cell", { key: 'c6837b4327c3bad8afd8d5ab2c9694a49b517d47' }, "Balance"), index.h("smoothly-table-cell", { key: '5a0c3c0e1aeb945a18e2c2881e079b7ec5ff512c' }, "EyeColor"), index.h("smoothly-table-cell", { key: '3b8d8cd8d2ecb611277f6cfe6629a8f25cbb9a51' }, "Gender"), index.h("smoothly-table-cell", { key: 'c4e32ed74188097f332711e4e3b0b6406cf871db' }, "Company"))), index.h("smoothly-table-body", { key: 'd4127248aa68d1fc2ee7745fc48563538fe3aa3e' }, data.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.registered), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance), index.h("smoothly-table-cell", null, entry.eyeColor), index.h("smoothly-table-cell", null, entry.gender), index.h("smoothly-table-cell", null, entry.company))))), index.h("smoothly-table-foot", { key: 'b1df47fa64e4e207825c3af8dcd8d6d3023d0c11' }, index.h("smoothly-table-row", { key: '34d0c161f587972e0791d213bbe0d440eb1cd77a' }, index.h("smoothly-table-cell", { key: '6089b8aeb3cb303a2c0fd1c2769a035583a91e03' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '09353b5d4a26c535f2b007b0341f09b6cfeabb6c' }, "Footer Cell"))))));
     }
 };
 SmoothlyTableDemoNested.style = SmoothlyTableDemoNestedStyle0;
-const styleCss$k = ".sc-smoothly-table-demo-nested-inner-h{display:block;margin:1em auto;width:60%}";
-const SmoothlyTableDemoNestedInnerStyle0 = styleCss$k;
+const styleCss$j = ".sc-smoothly-table-demo-nested-inner-h{display:block;margin:1em auto;width:60%}";
+const SmoothlyTableDemoNestedInnerStyle0 = styleCss$j;
 const SmoothlyTableDemoNestedInner = class {
     constructor(hostRef) {
@@ -12185,20 +12326,20 @@ const SmoothlyTableDemoNestedInner = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '7c40ccfd1a54f9463c9ae1ec97c6536bb38746c4' }, index.h("smoothly-table", { key: '6571617ffc5049746e279895de3e626682b81608', columns: 4 }, index.h("smoothly-table-head", { key: '9554b931df59678906b7eaef48b5373950c8cd26' }, index.h("smoothly-table-row", { key: '39acfc3805f1799c190d511c1b73fa9448d206fc' }, index.h("smoothly-table-cell", { key: 'a7d5232032ddb6a93a5fe7d3e47808c7e6af5e4b' }, "Id"), index.h("smoothly-table-cell", { key: '42694d147f8daa24c3ddab07f1eb3cdb8881bbaf' }, "Name"), index.h("smoothly-table-cell", { key: '9ce43b9965536d4d6163feb44439828e27b92e7a' }, "Age"), index.h("smoothly-table-cell", { key: '46df5081158ff565ce3d98c50076bd9593edaadf' }, "Balance"))), index.h("smoothly-table-body", { key: '15f5f434ff013679b752aa9b365eb362d5178397' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance))))))));
+        return (index.h(index.Host, { key: 'd7db95a86297244c54f8f562d50b1eb8c3aae6de' }, index.h("smoothly-table", { key: '7566f1b3c5a7d4711f6fe75af9acb4a472c6b8db', columns: 4 }, index.h("smoothly-table-head", { key: 'b3b465345dc934ca7fadae66bd32bc4ad996f585' }, index.h("smoothly-table-row", { key: '8cb60cbea5af3c34d553767046c0480e4dfafa8f' }, index.h("smoothly-table-cell", { key: 'a80b4725666756d4b1b9bc6b3dafd98394fdcedc' }, "Id"), index.h("smoothly-table-cell", { key: 'cbbebfe155d819e1e78651f453c7b4085ce233ed' }, "Name"), index.h("smoothly-table-cell", { key: 'ef6d2f2f68dd3893f93f3ea9017a2caf80172fe4' }, "Age"), index.h("smoothly-table-cell", { key: '41453176187648d45d28780a35cf7ec3d462b4a8' }, "Balance"))), index.h("smoothly-table-body", { key: '0f7a4f3d4db171f3d1ab277ea1a73340a9961909' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance))))))));
     }
 };
 SmoothlyTableDemoNestedInner.style = SmoothlyTableDemoNestedInnerStyle0;
-const styleCss$j = ".sc-smoothly-table-demo-simple-h{display:block}.sc-smoothly-table-demo-simple-h>smoothly-display.sc-smoothly-table-demo-simple{font-size:2em}.sc-smoothly-table-demo-simple-h>*.sc-smoothly-table-demo-simple{margin-bottom:2rem}";
-const SmoothlyTableDemoSimpleStyle0 = styleCss$j;
+const styleCss$i = ".sc-smoothly-table-demo-simple-h{display:block}.sc-smoothly-table-demo-simple-h>smoothly-display.sc-smoothly-table-demo-simple{font-size:2em}.sc-smoothly-table-demo-simple-h>*.sc-smoothly-table-demo-simple{margin-bottom:2rem}";
+const SmoothlyTableDemoSimpleStyle0 = styleCss$i;
 const SmoothlyTableDemoSimple = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '780ac65de4ffcb956dbad69d202adc24ac71f5cf' }, index.h("smoothly-display", { key: '769ae723fe3ed9ceac79f85aaf80145cf1a9e227', type: "text", value: "Simple" }), index.h("smoothly-table", { key: 'f751cd5b359e9191d32f32db11b285359dd71a04', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: 'bd89fcb03ca046ad5e732d489e00c88ddd24a34e' }, index.h("smoothly-table-row", { key: '64aea3a162f0a3cc7ce910f29026c316bed319a6' }, index.h("smoothly-table-cell", { key: 'b00a8bc995f1c759a94fc5669e96a4c3d3cbacc9' }, "Breed"), index.h("smoothly-table-cell", { key: '9ba3b1942b96f41bddad179d557f1d7724caeb1d' }, "Coat"))), index.h("smoothly-table-body", { key: '9b27306a73b99b92735fd1234e8e9a7df724d1b1' }, cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-table-expandable-row", { key: 'ce2fb49396773d07fce9cf19438b92466f5a6589' }, index.h("div", { key: 'b88ab73776042dc73de6844a3ae3789af13e2fa9', slot: "detail" }, "Content", index.h("br", { key: '760a0069b9d767d88e0ac10744d37ae3af7a70e2' }), "of", index.h("br", { key: '60b435dcf383249c163fe3a44d356b46a4da92da' }), "the", index.h("br", { key: '84ad54def16c023acd4b676dd00b0253f6054cc6' }), "expandable", index.h("br", { key: '3465b4c9931c76532b2b42b86ecdd45f495942e0' }), "row"), index.h("smoothly-table-cell", { key: '8274a7413f2632306f99d5b9c0505572ff56d402' }, "Cell1 in expandable row"), index.h("smoothly-table-cell", { key: '6d944f54dc5d1671847821bc3b7d9e178a23fd67' }, "Cell2 in expandable row")), index.h("smoothly-table-row", { key: 'eb2dd91dc0408665e8f21f0f6111dc79a5f282c4' }, index.h("smoothly-table-cell", { key: 'eff62097e34f55554390e69ca801a0377344ce80' }, "Cell5"), index.h("smoothly-table-expandable-cell", { key: '2817aed70b5792d59680412e8c497b1656696c3b' }, "Expandable Cell", index.h("div", { key: 'dea33dcc6f841d0c1b7fd85727558ede5b2ce444', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-table-row", { key: '560975f92466b626d2dd30cb5e2591bece061405' }, index.h("smoothly-table-expandable-cell", { key: '816ae1d28cfb3aad7f9e2af77e57b1b79d502d34' }, "Expandable Cell 1", index.h("div", { key: '74b07ca9b1d36dae21fff5dde7e7e520f851c331', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-table-expandable-cell", { key: '8e0d753e4879231b98225951961e3ec552af648a' }, "Expandable Cell 2", index.h("div", { key: '2e79fd00c9430021ff5e48cb948e9128f8565888', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-table-foot", { key: '9f6c473c6be9450ac13b6b683ead10022d2b5e60' }, index.h("smoothly-table-row", { key: '364561f4dc75d33b9d5b562b76819cee8c7c21ce' }, index.h("smoothly-table-cell", { key: '06449b9d6faed54aff67df842a95e1e14a4aac11' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '9d4653c5ff5da95ee3861402b8055c166025ee59' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '04f9790d71566d38f890d5e7365fc22a90c45400' }, index.h("smoothly-display", { key: '77c4a68cd32e47a15effdc71acec10cde5b3938a', type: "text", value: "Simple" }), index.h("smoothly-table", { key: '54a7dcba8729f22e5bd7bf24a84f739ad6028077', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '13c437f554618ebe04b207ee546759da6a8f5289' }, index.h("smoothly-table-row", { key: 'a92a11f5a7b4c5698c4e04b5d48e0f709f24e866' }, index.h("smoothly-table-cell", { key: 'fe13f14669a6c0cbb1d51d9dab517aed15b596d2' }, "Breed"), index.h("smoothly-table-cell", { key: '91c9c21c68f7c12b3bafc6973b0add87e9a5a10d' }, "Coat"))), index.h("smoothly-table-body", { key: '4d595c337faa71ab7ee58aa908d195871993f51c' }, cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-table-expandable-row", { key: '3858ed2d559154a5a36912991ee4a2cf24fbe779' }, index.h("div", { key: '58c23c7bd7bac2bd1324c531a0b84665a81524ec', slot: "detail" }, "Content", index.h("br", { key: 'bad15f3049a740d7166da935935a02dfcd3575d6' }), "of", index.h("br", { key: '2cf53f01b3e179d3953dc7a68383834c20b1af18' }), "the", index.h("br", { key: '63b34bbd55599645832c4a586b6b52873a7b9088' }), "expandable", index.h("br", { key: 'ea3fb15397ee23852a407a396d337d4ad4961d92' }), "row"), index.h("smoothly-table-cell", { key: '14a5c50411d86e2e3ee33b128d689e28e851faf8' }, "Cell1 in expandable row"), index.h("smoothly-table-cell", { key: 'e8b304c13630b1f401403bc6b2fc13adf07dd984' }, "Cell2 in expandable row")), index.h("smoothly-table-row", { key: '2354e58b64a957df10b24c41da6179ea72466b43' }, index.h("smoothly-table-cell", { key: '3f688703b2f79e8dd34d9411e5dd98d05e84bb78' }, "Cell5"), index.h("smoothly-table-expandable-cell", { key: 'cc4027c6be5ffe3135da92f88eca5b79b68b5769' }, "Expandable Cell", index.h("div", { key: '513f18cd1860db27b0d5c9540a534aa3000b7dc1', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-table-row", { key: '1480c92eeea2f1e525c29e8494c65fb36912b453' }, index.h("smoothly-table-expandable-cell", { key: '813bc11d572b1c1fc9729730ac74a633e77477d1' }, "Expandable Cell 1", index.h("div", { key: 'e8004491356159f09bc3ecd4d76561bcf97c718d', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-table-expandable-cell", { key: 'b36266b2707e2db972574bd70e1aa300972f85bc' }, "Expandable Cell 2", index.h("div", { key: '3c421f2281b10d88dd42b72d247565bb02394e03', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-table-foot", { key: 'b1285adc7d75465505a669002a98dc1b4b63c092' }, index.h("smoothly-table-row", { key: '1e8ebc7767d2113a0f0935e1d4528da612696056' }, index.h("smoothly-table-cell", { key: 'b356a19ddcd9d355d3c21927dc435b6dd9fe8bd9' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '42f995af3a3a3453b6cdba28af70099e0131434d' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -12275,8 +12416,8 @@ const cats = [
 ];
 SmoothlyTableDemoSimple.style = SmoothlyTableDemoSimpleStyle0;
-const styleCss$i = ".sc-smoothly-table-expandable-cell-h{display:contents}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell{padding:0.3rem 1.1rem}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell{grid-column:span var(--smoothly-table-cell-span, 1);display:flex;box-sizing:border-box;align-items:center;white-space:nowrap;position:relative}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell:hover::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell::before{rotate:45deg}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell:hover{background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground));stroke:rgb(var(--smoothly-table-hover-foreground));fill:rgb(var(--smoothly-table-hover-foreground))}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell:first-child{cursor:pointer}.sc-smoothly-table-expandable-cell-h>div.detail.sc-smoothly-table-expandable-cell{grid-column:1/-1;grid-row:2;position:relative}[open].sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell{box-shadow:1px 1px 1px -1px rgb(var(--smoothly-table-border)) inset, -3px -1px 1px -3px rgb(var(--smoothly-table-border)) inset}[open].sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));stroke:rgb(var(--smoothly-table-expanded-foreground));fill:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-table-expandable-cell-h:not([open])>div.detail.sc-smoothly-table-expandable-cell{display:none}.sc-smoothly-table-expandable-cell-h>div.detail.sc-smoothly-table-expandable-cell::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-cell-h>div.detail.sc-smoothly-table-expandable-cell::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
-const SmoothlyTableExpandableCellStyle0 = styleCss$i;
+const styleCss$h = ".sc-smoothly-table-expandable-cell-h{display:contents}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell{padding:0.3rem 1.1rem}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell{grid-column:span var(--smoothly-table-cell-span, 1);display:flex;box-sizing:border-box;align-items:center;white-space:nowrap;position:relative}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell:hover::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell::before{rotate:45deg}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell:hover{background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground));stroke:rgb(var(--smoothly-table-hover-foreground));fill:rgb(var(--smoothly-table-hover-foreground))}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell:first-child{cursor:pointer}.sc-smoothly-table-expandable-cell-h>div.detail.sc-smoothly-table-expandable-cell{grid-column:1/-1;grid-row:2;position:relative}[open].sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell{box-shadow:1px 1px 1px -1px rgb(var(--smoothly-table-border)) inset, -3px -1px 1px -3px rgb(var(--smoothly-table-border)) inset}[open].sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));stroke:rgb(var(--smoothly-table-expanded-foreground));fill:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-table-expandable-cell-h:not([open])>div.detail.sc-smoothly-table-expandable-cell{display:none}.sc-smoothly-table-expandable-cell-h>div.detail.sc-smoothly-table-expandable-cell::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-cell-h>div.detail.sc-smoothly-table-expandable-cell::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
+const SmoothlyTableExpandableCellStyle0 = styleCss$h;
 const SmoothlyTableExpandableCell = class {
     constructor(hostRef) {
@@ -12300,7 +12441,7 @@ const SmoothlyTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'b5692fb60dac7d8cae94633fb2812eb7b4c64cb5', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: 'b0fe3a82b236953dd02cf2279705688f9234fec4', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '4f60051bf63745e52708e35f2bd21b97949cc466' })), index.h("div", { key: '7879d0dc2ea73ad77b2f8f78a2bd61e095e9223f', class: "detail" }, index.h("slot", { key: 'fec5e0a9c607e6037364afe4626b069854397a37', name: "detail" }))));
+        return (index.h(index.Host, { key: '614a767c881df2a6b502b6b310c5d6a341e83131', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: '21a5488e705881abfe87adb264ff8bfa26112bba', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: 'f635b8aaee0eb3755926ddf50ea153557eb45f6b' })), index.h("div", { key: 'd4a38d3b9ac69c5beb6a793eab628ed8e7b0687e', class: "detail" }, index.h("slot", { key: '015cf3d8165416ecb1f10d91f86bbf2b45484f6f', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12308,8 +12449,8 @@ const SmoothlyTableExpandableCell = class {
 };
 SmoothlyTableExpandableCell.style = SmoothlyTableExpandableCellStyle0;
-const styleCss$h = ".sc-smoothly-table-expandable-row-h{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto 0fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h.sc-smoothly-table-expandable-row-s>*{cursor:pointer}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:not(:last-child){background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground))}[open].sc-smoothly-table-expandable-row-h{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));grid-template-rows:auto 1fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border)), 0px 0px 1px rgb(var(--smoothly-table-border)) inset;grid-template-rows:0fr 1fr}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{grid-column:1/-1;cursor:default;position:relative;overflow:hidden;background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child){position:relative}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{rotate:45deg}[open].sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{overflow:visible;padding:0.3rem 1.1rem}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
-const SmoothlyTableExpandableRowStyle0 = styleCss$h;
+const styleCss$g = ".sc-smoothly-table-expandable-row-h{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto 0fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h.sc-smoothly-table-expandable-row-s>*{cursor:pointer}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:not(:last-child){background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground))}[open].sc-smoothly-table-expandable-row-h{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));grid-template-rows:auto 1fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border)), 0px 0px 1px rgb(var(--smoothly-table-border)) inset;grid-template-rows:0fr 1fr}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{grid-column:1/-1;cursor:default;position:relative;overflow:hidden;background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child){position:relative}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{rotate:45deg}[open].sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{overflow:visible;padding:0.3rem 1.1rem}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
+const SmoothlyTableExpandableRowStyle0 = styleCss$g;
 const SmoothlyTableExpandableRow = class {
     constructor(hostRef) {
@@ -12324,7 +12465,7 @@ const SmoothlyTableExpandableRow = class {
         this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '67081c5e554a8516d3a9e9a680390fe0c51dbc1f', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: 'fd3c1e99c525caa76e2d29be36777eccd8ae965a' }), index.h("div", { key: 'e5fa14d3c2bfa119a3fa67c79399787c277effb3', ref: e => (this.div = e) }, index.h("slot", { key: 'dd9ec4832a35287ffbbfa5b82071535acf607e98', name: "detail" }))));
+        return (index.h(index.Host, { key: '0c9a79bebe61beadac5408acb21bbbbd1a04b6a8', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '29ae1416c1bf1ceab6a1feceea4a8d6656f7fe6d' }), index.h("div", { key: '5b8d51863bdc02d92cee70a5425fbc7897a7eb22', ref: e => (this.div = e) }, index.h("slot", { key: '52805fbbaacf58dc5e8dc1fd260f934bfbcf8eba', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12332,34 +12473,34 @@ const SmoothlyTableExpandableRow = class {
 };
 SmoothlyTableExpandableRow.style = SmoothlyTableExpandableRowStyle0;
-const styleCss$g = ".sc-smoothly-table-filler-row-h{grid-column:1 / -1}";
-const SmoothlyTableFillerRowStyle0 = styleCss$g;
+const styleCss$f = ".sc-smoothly-table-filler-row-h{grid-column:1 / -1}";
+const SmoothlyTableFillerRowStyle0 = styleCss$f;
 const SmoothlyTableFillerRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-table-row", { key: 'e26b7e2c9919bbf73eeacc011495aafe6bc92f7a' }, index.h("smoothly-table-cell", { key: 'a08e1a043dd889387501763e9252b2c64ba69189' }, index.h("slot", { key: 'bdf8d877395cf921935e824cb1fc8a5ee8ac34e3' }))));
+        return (index.h("smoothly-table-row", { key: '21b75d944cf323b3b98f3307e5a19f54b698ce93' }, index.h("smoothly-table-cell", { key: '93c297aef45100cfc279b3fc589a945da25aac77' }, index.h("slot", { key: '14199865d7421219bbdcedb69e15b9f307f14127' }))));
     }
 };
 SmoothlyTableFillerRow.style = SmoothlyTableFillerRowStyle0;
-const styleCss$f = ".sc-smoothly-table-foot-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:sticky;z-index:1;bottom:0;background-color:rgb(var(--smoothly-table-footer-background));color:rgb(var(--smoothly-table-footer-foreground));stroke:rgb(var(--smoothly-table-footer-foreground));fill:rgb(var(--smoothly-table-footer-foreground))}";
-const SmoothlyTableFootStyle0 = styleCss$f;
+const styleCss$e = ".sc-smoothly-table-foot-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:sticky;z-index:1;bottom:0;background-color:rgb(var(--smoothly-table-footer-background));color:rgb(var(--smoothly-table-footer-foreground));stroke:rgb(var(--smoothly-table-footer-foreground));fill:rgb(var(--smoothly-table-footer-foreground))}";
+const SmoothlyTableFootStyle0 = styleCss$e;
 const SmoothlyTableFoot = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2fffb0be2489bb9b9d6b9388584c7cea49a732e3' }, index.h("slot", { key: 'd5c38b6d5848a67bc9d5bfaf2369f478a59543cd' })));
+        return (index.h(index.Host, { key: '820169a9033b8578aa603e2b6b4be1cc95f20add' }, index.h("slot", { key: 'b4f493c628af9080b7e63547efa260029b362392' })));
     }
 };
 SmoothlyTableFoot.style = SmoothlyTableFootStyle0;
-const styleCss$e = ".sc-smoothly-table-head-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;top:0;position:sticky;z-index:1;--smoothly-color:var(--smoothly-table-header-background);--smoothly-color-contrast:var(--smoothly-table-header-foreground);background-color:rgb(var(--smoothly-table-header-background));color:rgb(var(--smoothly-table-header-foreground));stroke:rgb(var(--smoothly-table-header-foreground));fill:rgb(var(--smoothly-table-header-foreground));font-weight:bold;transition:box-shadow 0.3s ease}.scrolled.sc-smoothly-table-head-h{box-shadow:var(--smoothly-table-header-shadow)}";
-const SmoothlyTableHeadStyle0 = styleCss$e;
+const styleCss$d = ".sc-smoothly-table-head-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;top:0;position:sticky;z-index:1;--smoothly-color:var(--smoothly-table-header-background);--smoothly-color-contrast:var(--smoothly-table-header-foreground);background-color:rgb(var(--smoothly-table-header-background));color:rgb(var(--smoothly-table-header-foreground));stroke:rgb(var(--smoothly-table-header-foreground));fill:rgb(var(--smoothly-table-header-foreground));font-weight:bold;transition:box-shadow 0.3s ease}.scrolled.sc-smoothly-table-head-h{box-shadow:var(--smoothly-table-header-shadow)}";
+const SmoothlyTableHeadStyle0 = styleCss$d;
 const SmoothlyTableHead = class {
     constructor(hostRef) {
@@ -12384,14 +12525,14 @@ const SmoothlyTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (index.h(index.Host, { key: '41c6d5bdd8154fe41e23e02dfb148ce12d7851aa', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '5ffb97a60df91262717fbe003f2b15c55f30b15f' })));
+        return (index.h(index.Host, { key: 'b176a780a52be148e373d941b0a07f2e4c49f071', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: 'ade4d29417b5bd276f15bf2189e1ef7623724d80' })));
     }
     get element() { return index.getElement(this); }
 };
 SmoothlyTableHead.style = SmoothlyTableHeadStyle0;
-const styleCss$d = ".sc-smoothly-table-row-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;box-sizing:border-box;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-table-row-h:has(smoothly-table-expandable-cell){grid-template-rows:auto 0fr 0fr}.sc-smoothly-table-row-h:has(smoothly-table-expandable-cell[open]){grid-template-rows:auto 1fr 0fr}";
-const SmoothlyTableRowStyle0 = styleCss$d;
+const styleCss$c = ".sc-smoothly-table-row-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;box-sizing:border-box;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-table-row-h:has(smoothly-table-expandable-cell){grid-template-rows:auto 0fr 0fr}.sc-smoothly-table-row-h:has(smoothly-table-expandable-cell[open]){grid-template-rows:auto 1fr 0fr}";
+const SmoothlyTableRowStyle0 = styleCss$c;
 const SmoothlyTableRow = class {
     constructor(hostRef) {
@@ -12408,13 +12549,13 @@ const SmoothlyTableRow = class {
                 event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: 'bb7d869d99acaf7b2fd0bd79173334a606061022' }, index.h("slot", { key: 'c6c020ec62114685afb24671d1ae111cf5a0ff1b' })));
+        return (index.h(index.Host, { key: '0e4d7dca1ce4e0d1a65ab7dc30648b1d835e0f87' }, index.h("slot", { key: 'd0ea29af964e43bb7e3362134720b3ce627e21f2' })));
     }
 };
 SmoothlyTableRow.style = SmoothlyTableRowStyle0;
-const styleCss$c = ".sc-smoothly-table-row-group-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;margin-top:1px}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{grid-column:1 / -1;display:grid;position:relative;cursor:pointer}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:last-child{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}[align].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{grid-template-columns:subgrid}[align].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group{display:contents}[align].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group>*.sc-smoothly-table-row-group{padding:0.3rem 1.1rem}.sc-smoothly-table-row-group-h:not([align])>div.sc-smoothly-table-row-group:first-child{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2, auto);justify-content:space-between;padding:0.3rem 1.1rem}.sc-smoothly-table-row-group-h:not([align])>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:first-child{justify-self:start;display:flex;gap:1rem}.sc-smoothly-table-row-group-h:not([align])>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:last-child{justify-self:end;display:flex;gap:1rem}.sc-smoothly-table-row-group-h:not([open]){grid-template-rows:auto 0fr}.sc-smoothly-table-row-group-h:not([open])>div.sc-smoothly-table-row-group:last-child{grid-row:2;overflow:hidden}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:first-child::before{content:'';display:flex;position:absolute;top:50%;translate:0 -50%;left:0.3em;height:0.4em;width:0.4em;border-bottom:1px solid rgb(var(--smoothly-default-contrast));border-right:1px solid rgb(var(--smoothly-default-contrast));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child:hover>div.sc-smoothly-table-row-group:first-child::before{opacity:1}[open].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:first-child::before{rotate:45deg}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{background-color:rgb(var(--smoothly-default-tint))}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{border-bottom:1px solid rgb(var(--smoothly-default-shade))}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child:hover{background-color:rgb(var(--smoothly-default-shade))}";
-const SmoothlyTableRowGroupStyle0 = styleCss$c;
+const styleCss$b = ".sc-smoothly-table-row-group-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;margin-top:1px}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{grid-column:1 / -1;display:grid;position:relative;cursor:pointer}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:last-child{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}[align].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{grid-template-columns:subgrid}[align].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group{display:contents}[align].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group>*.sc-smoothly-table-row-group{padding:0.3rem 1.1rem}.sc-smoothly-table-row-group-h:not([align])>div.sc-smoothly-table-row-group:first-child{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2, auto);justify-content:space-between;padding:0.3rem 1.1rem}.sc-smoothly-table-row-group-h:not([align])>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:first-child{justify-self:start;display:flex;gap:1rem}.sc-smoothly-table-row-group-h:not([align])>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:last-child{justify-self:end;display:flex;gap:1rem}.sc-smoothly-table-row-group-h:not([open]){grid-template-rows:auto 0fr}.sc-smoothly-table-row-group-h:not([open])>div.sc-smoothly-table-row-group:last-child{grid-row:2;overflow:hidden}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:first-child::before{content:'';display:flex;position:absolute;top:50%;translate:0 -50%;left:0.3em;height:0.4em;width:0.4em;border-bottom:1px solid rgb(var(--smoothly-default-contrast));border-right:1px solid rgb(var(--smoothly-default-contrast));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child:hover>div.sc-smoothly-table-row-group:first-child::before{opacity:1}[open].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:first-child::before{rotate:45deg}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{background-color:rgb(var(--smoothly-default-tint))}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{border-bottom:1px solid rgb(var(--smoothly-default-shade))}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child:hover{background-color:rgb(var(--smoothly-default-shade))}";
+const SmoothlyTableRowGroupStyle0 = styleCss$b;
 const SmoothlyTableRowGroup = class {
     constructor(hostRef) {
@@ -12428,13 +12569,13 @@ const SmoothlyTableRowGroup = class {
         this.smoothlyTableRowGroupChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '5428f7c0927f6a52ed0904f23bd0a17645bc42ab' }, index.h("div", { key: 'c4d28ad7f36759e8d32a3931e30dc0964c1269c4', onClick: () => this.clickHandler() }, index.h("div", { key: '40e94b62b6795627065908f7fb1dae76a028f542' }, index.h("slot", { key: 'd239da0b83ffb4bb7ad0b056676e6f6cd68a4644', name: "start" })), index.h("div", { key: '4876ed2db6ba12345b09344d9d83adc3431a8a77' }, index.h("slot", { key: '02c7d7e55df7098bbf70192a452f90d657e2bbee', name: "end" }))), index.h("div", { key: '7723003485dded34f175d84b3479f20df7352e4f' }, index.h("slot", { key: 'c952dfd567c78aff93a771d131bf4e7e15a08d24' }))));
+        return (index.h(index.Host, { key: 'b107ab6fa1310b08500c1d9915ad78cdd76dfaac' }, index.h("div", { key: '4cc121d8d4b88596a8a8dc985c9b8dc20f5a79ed', onClick: () => this.clickHandler() }, index.h("div", { key: '11a96a20625ce7a6730629e16791030cfdf3119d' }, index.h("slot", { key: '1448a1c3afe38f98391812ad91e5d20e317c33d6', name: "start" })), index.h("div", { key: 'ef1f82119345392ed027f4e6cd314aed31a4a58a' }, index.h("slot", { key: 'd8d06fea8bfa8e4154cb165c5fcc67a7da346a04', name: "end" }))), index.h("div", { key: 'da62b6c239884752d0ecaef59802649f330cf16a' }, index.h("slot", { key: '0b8f6bfd742c9ea2b1495e42d0414346500ceb1c' }))));
     }
 };
 SmoothlyTableRowGroup.style = SmoothlyTableRowGroupStyle0;
-const styleCss$b = ".sc-smoothly-tabs-h{display:grid;grid-template-columns:repeat(var(--tabs), auto);grid-template-rows:auto auto}";
-const SmoothlyTabsStyle0 = styleCss$b;
+const styleCss$a = ".sc-smoothly-tabs-h{display:grid;grid-template-columns:repeat(var(--tabs), auto);grid-template-rows:auto auto}";
+const SmoothlyTabsStyle0 = styleCss$a;
 const SmoothlyTabs = class {
     constructor(hostRef) {
@@ -12460,7 +12601,7 @@ const SmoothlyTabs = class {
             old.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'ea00c7f57eab3dda4df7967760defddde82e2ed0', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '8792ebb5ca91ad7423de98c5f9cb0f99e2d87325' })));
+        return (index.h(index.Host, { key: '57d5fba06c2cbf1311958bf8e09d9f0330ed9821', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '8a1c04bf71ead57e8aafa6fb16cb978c3e1ad387' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12469,21 +12610,21 @@ const SmoothlyTabs = class {
 };
 SmoothlyTabs.style = SmoothlyTabsStyle0;
-const styleCss$a = ".sc-smoothly-tabs-demo-h{display:block}[hidden].sc-smoothly-tabs-demo-h{display:none}.sc-smoothly-tabs-demo-h>*.sc-smoothly-tabs-demo{margin:auto;max-width:1200px;width:100%}";
-const SmoothlyTabsDemoStyle0 = styleCss$a;
+const styleCss$9 = ".sc-smoothly-tabs-demo-h{display:block}[hidden].sc-smoothly-tabs-demo-h{display:none}.sc-smoothly-tabs-demo-h>*.sc-smoothly-tabs-demo{margin:auto;max-width:1200px;width:100%}";
+const SmoothlyTabsDemoStyle0 = styleCss$9;
 const SmoothlyTabsDemo = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-tabs", { key: '69a84a806d5519b41761596d3450e6f3d8022a4a' }, index.h("smoothly-tab", { key: '7ea729f8704ea18140450d0b622bf890d06eef0b', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '8ba37d82f2bc9fdca7e37d2ac94ad28216619bde', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: '142a60c893adc79c1e89d5cccb4f142940948c90', label: "test3" }, "this is a test message again!")));
+        return (index.h("smoothly-tabs", { key: '2541a80868fbd3ebd7f4dbe2ea5f268b357e53c4' }, index.h("smoothly-tab", { key: '4edd5c7e8048c19b6e75452308fa1541f99c88f0', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '295de45f6db29ede40627a156ab93a48eaabf620', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: '9cf8c59cfb5b78c0ec2a3914208bc2df7e1fa26e', label: "test3" }, "this is a test message again!")));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
-const styleCss$9 = ".sc-smoothly-theme-color-h{display:flex;flex-direction:column;align-items:center}.sc-smoothly-theme-color-h>.sc-smoothly-theme-color:first-child{margin-top:0.2rem}";
-const SmoothlyThemeColorStyle0 = styleCss$9;
+const styleCss$8 = ".sc-smoothly-theme-color-h{display:flex;flex-direction:column;align-items:center}.sc-smoothly-theme-color-h>.sc-smoothly-theme-color:first-child{margin-top:0.2rem}";
+const SmoothlyThemeColorStyle0 = styleCss$8;
 const SmoothlyThemeColor = class {
     constructor(hostRef) {
@@ -12491,13 +12632,13 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '73d669c49fccff8dafed12e8f857c6556d2b73b7' }, this.color, ["tint", "color", "shade"].map(variant => (index.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
+        return (index.h(index.Host, { key: '82a3257c77eb40765357b1b6e51db558ed664557' }, this.color, ["tint", "color", "shade"].map(variant => (index.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
     }
 };
 SmoothlyThemeColor.style = SmoothlyThemeColorStyle0;
-const styleCss$8 = ".sc-smoothly-theme-color-variant-h{display:flex;justify-content:center;align-items:center;width:3em;height:3em;font-weight:900}[color][variant=color].sc-smoothly-theme-color-variant-h{background:rgb(var(--smoothly-color))}[color][variant=tint].sc-smoothly-theme-color-variant-h{background:rgb(var(--smoothly-color-tint))}[color][variant=shade].sc-smoothly-theme-color-variant-h{background:rgb(var(--smoothly-color-shade))}";
-const SmoothlyThemeColorVariantStyle0 = styleCss$8;
+const styleCss$7 = ".sc-smoothly-theme-color-variant-h{display:flex;justify-content:center;align-items:center;width:3em;height:3em;font-weight:900}[color][variant=color].sc-smoothly-theme-color-variant-h{background:rgb(var(--smoothly-color))}[color][variant=tint].sc-smoothly-theme-color-variant-h{background:rgb(var(--smoothly-color-tint))}[color][variant=shade].sc-smoothly-theme-color-variant-h{background:rgb(var(--smoothly-color-shade))}";
+const SmoothlyThemeColorVariantStyle0 = styleCss$7;
 const SmoothlyThemeColorVariant = class {
     constructor(hostRef) {
@@ -12511,8 +12652,8 @@ const SmoothlyThemeColorVariant = class {
 };
 SmoothlyThemeColorVariant.style = SmoothlyThemeColorVariantStyle0;
-const styleCss$7 = ".sc-smoothly-theme-colors-h{display:grid;grid-template-columns:repeat(3, 1fr);row-gap:1em;column-gap:1em;width:fit-content}";
-const SmoothlyThemeColorsStyle0 = styleCss$7;
+const styleCss$6 = ".sc-smoothly-theme-colors-h{display:grid;grid-template-columns:repeat(3, 1fr);row-gap:1em;column-gap:1em;width:fit-content}";
+const SmoothlyThemeColorsStyle0 = styleCss$6;
 const SmoothlyThemeColors$1 = class {
     constructor(hostRef) {
@@ -12535,21 +12676,21 @@ const SmoothlyThemeColors$1 = class {
 };
 SmoothlyThemeColors$1.style = SmoothlyThemeColorsStyle0;
-const styleCss$6 = ".sc-smoothly-theme-demo-h{display:flex;width:50%;margin:auto;flex-direction:column;gap:2em;margin-top:2em}.sc-smoothly-theme-demo-h>smoothly-theme-picker.sc-smoothly-theme-demo{width:20em}.sc-smoothly-theme-demo-h>span.sc-smoothly-theme-demo{display:flex;flex-direction:row;gap:10em}";
-const SmoothlyThemeDemoStyle0 = styleCss$6;
+const styleCss$5 = ".sc-smoothly-theme-demo-h{display:flex;width:50%;margin:auto;flex-direction:column;gap:2em;margin-top:2em}.sc-smoothly-theme-demo-h>smoothly-theme-picker.sc-smoothly-theme-demo{width:20em}.sc-smoothly-theme-demo-h>span.sc-smoothly-theme-demo{display:flex;flex-direction:row;gap:10em}";
+const SmoothlyThemeDemoStyle0 = styleCss$5;
 const SmoothlyThemeDemo = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '3355b78af80fa211bf0f73a0f108b8b71b553ad1' }, index.h("h2", { key: '7e8cc8d2ba8b157f3a31cf3abb9e53c76257fb08' }, "Theme"), index.h("smoothly-theme-picker", { key: 'f7c44b1511d4259059bfd9fb19f47d1ce26e19ae' }, index.h("smoothly-item", { key: '13e431c3dd07f385b841a0172cae10826d97f268', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '4e318c9a7c9ae7b59557ff07dc1e36fd9b110e78', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '60cb9a6db0695b08ab313553113beaf0cad24e7d', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '489a1e89509050ebcb8455cc9e3bfbd22e29e245', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '5ac8c7204a076adcdcddd1881bb63cb61949709a', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '7798c582895794c11d88f5947890f68b07e98b4d', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'a789c18c71cdeeb6904077d54c8098d1a80aafcf', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '0a986aa17adada44feb7951a1526401625856ca2', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '84015d4aa4d1328cec770b42c5ea0480685a863a', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'cd2450a4de4f3280deec36ab7c1edc09c92b394d' }, index.h("smoothly-theme-colors", { key: '65f5a8d82f38d4414ad6cc20a19df461137cd611' }), index.h("smoothly-theme-guide", { key: '95ccec8e0eff12608a2e1f656122ffc83a8bb487' })), index.h("smoothly-button", { key: 'a274d5f37ae276ef51ac471c2492647a95bd4747', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '53ef2e1f9fa3ca98dd3b45b64755f3d70e8a4e91', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: '32614a4431806e998a5c96b74d1444cb06aec539', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '33292c78195c3be5ac3ac4f4e2a1bb261fbb35a7', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: '65e12d0f81f4dd7364b312527a6bb388cdc92c3d' }, index.h("h2", { key: '3a42abb580c1a3cb4318f7aa17dc7600949ed874' }, "Theme"), index.h("smoothly-theme-picker", { key: '3f32c0a42c0bc8257aa9f3646b71aaa84067839e' }, index.h("smoothly-item", { key: '43314b8323a16fc07060ed52c3f4b66122167a1e', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '8a85a802db01806e6dc5654467ee24e33774a59b', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '9d9a9afefb435e6ffb642dfa5fa9dd5280539400', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: 'e015ab8dc2ea16777856ceea2fffa35719ef4982', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '7c48a4be96f2f043b9a5abaa119f84e402915c14', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '93f5d6d1a0297d4b1664a0d449a7cb4969f05ef7', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'f003968498dd5244c481b227d7e8378727b8bbc4', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'dc293ff7b910be2e28d014d1c840798a9ce4c6b3', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '7aa32e8c38efa7e9c6e71c91897c04a733c2712f', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'bf7804418063340617d3eaaddbd9c119d63a2397' }, index.h("smoothly-theme-colors", { key: '481dd95abb86dcd53f1b9040b9c3866ff76f13c1' }), index.h("smoothly-theme-guide", { key: '56643cd5d3735ccf0f0e6cea80c0a72842c8e8dd' })), index.h("smoothly-button", { key: 'dbbfe466ca6ea60082f58bebf1cfbdff0a129ce8', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: 'af60832ce7667eb5910f84d8336d7ff32a674469', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'ab09b508d3b2c6cb0e45163749c91a0f21af651e', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '42113f0ef973c54687445ab2b50bf4c43350229d', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
-const styleCss$5 = "";
-const SmoothlyThemeGuideStyle0 = styleCss$5;
+const styleCss$4 = "";
+const SmoothlyThemeGuideStyle0 = styleCss$4;
 const SmoothlyThemeColors = class {
     constructor(hostRef) {
@@ -12557,21 +12698,21 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index.h("smoothly-display", { key: 'abe16e5da831c37fe67d692e269f9a8e36fd6d76' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index.h("br", { key: '767fb4f3d7caf3db61652ddf130836fb612956f0' }),
-            index.h("smoothly-display", { key: 'ea00d4efab52f3fd20bced1d2dacd60fca11df29' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
-            index.h("br", { key: '76ebb191d5cf25196171da5625da1c0d8343a903' }),
-            index.h("smoothly-display", { key: '4546f155145ac4620b4801c4bf011d50a6d1561e' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
-            index.h("br", { key: '5510232d9153a5a8c5bcfea2b9eebb222385d7c0' }),
-            index.h("smoothly-display", { key: '064049e7637a179654d50690057d024a61d8c3ac' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index.h("br", { key: '9138ef0c371b29f199e9c35a841a5c2ba7c8f374' }),
+            index.h("smoothly-display", { key: '0918835d3bc1a9d06685c058cd5e3372faedf96e' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: 'd39e247cbfbb294ab623c9a9deed9ff85fad8fb6' }),
+            index.h("smoothly-display", { key: 'ca8f3ba87d914ce6770e602e599fbecc9f9abf68' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
+            index.h("br", { key: 'd30e4722803b3f2e8423899df3d2c27398ef6a0e' }),
+            index.h("smoothly-display", { key: 'fd68589a41c7f9a3545c55f8ef02964230c2ee6a' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
+            index.h("br", { key: '95e86a31313256790e6638a2a8483cd590b2d2c0' }),
+            index.h("smoothly-display", { key: '743e92b0ec794aad7278d7adf612c7b23b77efe4' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: '471c57f055288c3bbc4e0abb78a6d8586be33b45' }),
         ];
     }
 };
 SmoothlyThemeColors.style = SmoothlyThemeGuideStyle0;
-const styleCss$4 = "";
-const SmoothlyThemePickerStyle0 = styleCss$4;
+const styleCss$3 = "";
+const SmoothlyThemePickerStyle0 = styleCss$3;
 const SmoothlyThemePicker = class {
     constructor(hostRef) {
@@ -12579,37 +12720,16 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: '1f304bc0806c407954e1326ec8e0bea77634dd30' }, index.h("smoothly-input-select", { key: '6887bc24589b7583d62c89414b35b7013d1bcc16', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '00ee10110a5bb16607d7b64bee210aa8ee1e5a22' }, index.h("smoothly-input-select", { key: '22c51d7bda98a25a711b0eac1517c5ab804901ca', name: "theme", looks: "border", onSmoothlyInput: e => {
                 const element = document.querySelector(`#${this.element}`);
                 if (element instanceof HTMLLinkElement && typeof e.detail.theme == "string")
                     element.href = e.detail.theme;
-            } }, index.h("label", { key: '968fbc24fef73477248ab5d6769273bb9aa214bf', slot: "label" }, "Select theme"), index.h("slot", { key: 'ea4c60a9e51f8182afabd7cd36f1ebe96a4ffd4c' }))));
+            } }, index.h("label", { key: '4575f2c5c1bd6256f6290ce0b838ec375aa1291f', slot: "label" }, "Select theme"), index.h("slot", { key: 'e01287ff69e8b340ace54e13783078aa5c7766ab' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
-const styleCss$3 = ".sc-smoothly-toggle-h{display:inline-block;border:none}.sc-smoothly-toggle-h>button.sc-smoothly-toggle{border:solid white 0.5px;display:flex;padding:0.6em;justify-content:center;font-size:110%;font-weight:400;color:rgb(var(--smoothly-default-tint));background-color:rgb(var(--smoothly-default-shade))}[shape=rounded].sc-smoothly-toggle-h{border-radius:0.6em}[shape=rounded].sc-smoothly-toggle-h>button.sc-smoothly-toggle{border-radius:0.5em}[selected].sc-smoothly-toggle-h>button.sc-smoothly-toggle{color:rgb(var(--smoothly-light-contrast))}.sc-smoothly-toggle-s>smoothly-icon{stroke:rgb(var(--smoothly-default-contrast));fill:rgb(var(--smoothly-default-contrast));font-size:110%}.sc-smoothly-toggle-h:not([selected])>.sc-smoothly-toggle-s>smoothly-icon{color:rgb(var(--smoothly-default-tint));fill:rgb(var(--smoothly-default-tint))}[disabled].sc-smoothly-toggle-h{opacity:0.5;pointer-events:none}";
-const SmoothlyToggleStyle0 = styleCss$3;
-const SmoothlyToggle = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.selected = false;
-        this.shape = undefined;
-        this.disabled = false;
-        this.name = undefined;
-        this.value = undefined;
-    }
-    onClick(e) {
-        this.selected = !this.selected;
-    }
-    render() {
-        return (index.h("button", { key: '6c8f541b5347d578771d776c36cce94f31c5e538', type: "button" }, index.h("slot", { key: '3f57af21ba84cf9abccf87193da302d79df62561', name: "icon-slot" }), index.h("slot", { key: '46aafd8b7d1a5e4d0888180c26185260acc2426a' }, this.name)));
-    }
-};
-SmoothlyToggle.style = SmoothlyToggleStyle0;
-const styleCss$2 = ".sc-smoothly-toggle-switch-h{display:block;width:3.6em;height:1.8em}.sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;border:none;border-radius:3em;background-color:rgb(var(--smoothly-color))}.sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch:hover{background-color:rgb(var(--smoothly-color-tint))}.sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{display:flex;justify-content:flex-start;align-items:center;position:absolute;left:0;fill:rgb(var(--smoothly-color-contrast));stroke:rgb(var(--smoothly-color-contrast));font-size:1.2em;transition:100ms ease-in-out}[selected][checkmark].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{fill:rgb(var(--smoothly-success-contrast));stroke:rgb(var(--smoothly-success-contrast))}[selected][checkmark].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch{background-color:rgb(var(--smoothly-success-color))}[selected][checkmark].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch:hover{background-color:rgb(var(--smoothly-success-tint))}[selected].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{transform:translateX(100%)}[size=tiny].sc-smoothly-toggle-switch-h{width:2.4em;height:1.2em}[size=small].sc-smoothly-toggle-switch-h{width:3.05em;height:1.5em}[size=large].sc-smoothly-toggle-switch-h{width:5.2em;height:2.5em}[size=tiny].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{font-size:.8em}[size=small].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{font-size:1em}[size=large].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{font-size:1.75em}";
+const styleCss$2 = ".sc-smoothly-toggle-switch-h{display:block}.sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch{width:100%;height:100%;display:flex;align-items:center;padding-inline:0;cursor:pointer;border:none;border-radius:3em;background-color:rgb(var(--smoothly-color))}.sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch:hover{background-color:rgb(var(--smoothly-color-tint))}.sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{display:flex;justify-content:flex-start;align-items:center;fill:rgb(var(--smoothly-color-contrast));stroke:rgb(var(--smoothly-color-contrast));transition:100ms ease-in-out}[selected][checkmark].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{fill:rgb(var(--smoothly-success-contrast));stroke:rgb(var(--smoothly-success-contrast))}[selected][checkmark].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch{background-color:rgb(var(--smoothly-success-color))}[selected][checkmark].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch:hover{background-color:rgb(var(--smoothly-success-tint))}[selected].sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{transform:translateX(100%)}[size=tiny].sc-smoothly-toggle-switch-h{--height:1.25rem}[size=small].sc-smoothly-toggle-switch-h{--height:1.5rem}[size=default].sc-smoothly-toggle-switch-h{--height:2rem}[size=large].sc-smoothly-toggle-switch-h{--height:2.5rem}.sc-smoothly-toggle-switch-h{height:var(--height);width:calc(var(--height) * 2)}.sc-smoothly-toggle-switch-h>button.sc-smoothly-toggle-switch>smoothly-icon.sc-smoothly-toggle-switch{--smoothly-icon-size:var(--height)}";
 const SmoothlyToggleSwitchStyle0 = styleCss$2;
 const SmoothlyToggleSwitch = class {
@@ -12628,7 +12748,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index.h(index.Host, { key: '398be7261835e65200aa85d11e3b1397f437d0da' }, index.h("button", { key: '88d40c975f2cde83e8531f14253c65c3452a724c', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'effb2050447b0cd6e70d402d06ba3f27e0462d5c', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
+        return (index.h(index.Host, { key: 'eccc4e475e32a9839d14035207e14416f6c6eb50' }, index.h("button", { key: 'acc584525bd071d9bc63569a585b0680781026f5', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'f322a6cdb7811668632852cc2dff6badb4309432', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -12641,7 +12761,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '034df80277fff91ed0585359d0f3b64f1f5c9c8e' }, index.h("h4", { key: '16f9ecad7723baea045eb24319b4b3cdcf966fef' }, "Toggle switches"), index.h("div", { key: 'cc8130abb7122fc8615e6a48b09c7f67d049c3f3' }, index.h("p", { key: '0178c74f8e5449dc20b4d1aa374b663e042af53b' }, "Checkmark"), index.h("span", { key: '3b726271f6c8c844a2f7d9a324831c6943e90956' }, index.h("p", { key: '2a7a689c3f391b79adb249ed2853359946325d72' }, "Tiny"), index.h("smoothly-toggle-switch", { key: 'a9cf4be78c2ca5e9ce5c39a460f4121bcec0a79a', disabled: false, size: "tiny" })), index.h("span", { key: 'df61c6928bc53490c27a657544cb2f7ca71a0d23' }, index.h("p", { key: '349855d3b168786f2bd6c66e24641454d740b4d5' }, "Small"), index.h("smoothly-toggle-switch", { key: 'ad339c40028b8d048e25a4ab091d043a2cf6d71f', disabled: false, size: "small" })), index.h("span", { key: '6470f379e0acb7e9540ff3d087ae2983f0663c7b' }, index.h("p", { key: '4e306c9124460d5eb53f9ab7f8e437d8f4340f04' }, "Standard"), index.h("smoothly-toggle-switch", { key: '11b62ea374d656318a287acc5cebc73dbbf2afce', disabled: false })), index.h("span", { key: '53f0080164ef7be32973e53c21925c93dc991796' }, index.h("p", { key: '8f8ba1f7ab8ab16f2af0fa9a108c8e31b68c928c' }, "Large"), index.h("smoothly-toggle-switch", { key: '83b19601e1d27d35c1e9ac274788ca10662a9d0f', disabled: false, size: "large" })), index.h("p", { key: 'f51a2baf2857d05999dac55264de877c90e1a128' }, "Colors checkmark"), index.h("span", { key: 'a1341c2cd8d7d02d16f3c9448b39d85d48005c5d' }, index.h("p", { key: 'd3f1a11fbca6c9a1e004e75b5410aabaac8cc1e0' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'f02376cda82d5525e7b01ba02365378c559dea90', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '0829cb311306cefecebe45c1b6775c9747b1827c' }, index.h("p", { key: 'fda09a19dd1fd5b46888e98056ffbdc6ff2688ed' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'f34131d23e8f6a94279e2082f1eb1bb73fa67c6c', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'ddf09d917b4507029a899f002187160caf30a60e' }, index.h("p", { key: '568eb5c4b551d5246b004dad6ee8b6d061aaa5ed' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '2c16e6df2ff55a66ee1cc50569a6adee5e308363', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: '6b19804cc0bac96ee73309c06dab17a65a9d03f9' }), index.h("p", { key: 'eec933175db979be637e49048aa1cb35de8cd07c' }, "Colors no checkmark"), index.h("span", { key: 'c14007f332ef1cc4227446815f2fa0a576be6b34' }, index.h("p", { key: '4ff13a71c30d846deca9faa95c61e98d8fc52336' }, "Danger"), index.h("smoothly-toggle-switch", { key: '3d2d4c7a9f5523974eb8d1ab5dc46ee9789e212f', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '56aca91c3cd95a47849964c31a016aff430e54da' }, index.h("p", { key: '9139f972a24c3e35f23545d366b5be60a14e5d7c' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '80be9774b24dd43b3011988403d6beacf56d874c', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '3fb5d92da50b6f7e339428fc46acc34ff221603d' }, index.h("p", { key: '346022141746c076d723705433b6032fdff04648' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'd477c6ca4234534120bf9422f1c1ad17baa9c2d1', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index.h(index.Host, { key: 'fa6d868180fb6e47a602ee0496ebff09660eb655' }, index.h("h4", { key: '91e2963b21bf0a658f862c7472b7c54747f794fc' }, "Toggle switches"), index.h("div", { key: 'cce4f17c3205c985fdd7be30ea6f692651cdbf4b' }, index.h("p", { key: '4033d6c506e89b4cd372cad11c055600e1b339ef' }, "Checkmark"), index.h("span", { key: '2ff14f307392140035a525adcd4ac1c6ba5d31ab' }, index.h("p", { key: '81a9227553e383977e8e2a461a29b5ea454343b3' }, "Tiny"), index.h("smoothly-toggle-switch", { key: 'bc7c0999c20a4b9fe72a16944e9f8fc8a2ae671a', disabled: false, size: "tiny" })), index.h("span", { key: 'b4b90fc21da52269db6826bb03da120f6a65d1f9' }, index.h("p", { key: 'ca3a6264cd628b50515ed668b29faf9fddd2e17b' }, "Small"), index.h("smoothly-toggle-switch", { key: '535c77e1995d2e78a29b662e76a10d93b5dcda4f', disabled: false, size: "small" })), index.h("span", { key: 'dcb3d289cd88c9f168ac754c23244a7cbfa9561f' }, index.h("p", { key: 'a9afe00d65e71e6be58ae79385275b3836bb3989' }, "Standard"), index.h("smoothly-toggle-switch", { key: '49fbf9801e577faa776936e4fcf5117b335c9858', disabled: false })), index.h("span", { key: '1c15d1e4909fa0db48585889f2e1aa662bc632db' }, index.h("p", { key: 'cde1c6872d47f2d4881a70e9391fc9c8bfc28548' }, "Large"), index.h("smoothly-toggle-switch", { key: '7ba006ad6ade175c5969262d9c3c9295aaefec1e', disabled: false, size: "large" })), index.h("p", { key: '61562fd9eb1866e1cc139ac00f84d8b5f7706409' }, "Colors checkmark"), index.h("span", { key: 'a0da9a2d6f3066811fa3572b490135f1c2a5d1ba' }, index.h("p", { key: '5ce6b04ecb26729c6a1d469107618a2db34b9923' }, "Danger"), index.h("smoothly-toggle-switch", { key: 'ed6f3d247cb458772fe1c17c63643d90f581e459', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '81c44a9e56de7d1c373f890bf656395ba80c8c54' }, index.h("p", { key: '1abb82471422e43b37e72f240c92d421d32be620' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'b83d14331b8a92bae218d773edcfc9fe83c4f9d8', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'e5c7290924b257f863cdd35b73d56e6eb6869eae' }, index.h("p", { key: '1079f5b0bdab48578d65af0b2452a3a9ca132820' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'd226a0cecb8325070cedd294194e4279ea44c03d', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: '7ca6a694a744d24140969a2ae24a1e1b8a9ae7df' }), index.h("p", { key: 'da2ebbc87451dbf8fad8e52914917a79cb68998b' }, "Colors no checkmark"), index.h("span", { key: 'd9f4c989ed6b6db47788ad8c8501f9f990454aa0' }, index.h("p", { key: '6879308b1eeae8171d85284d37a47f2c7edd27b5' }, "Danger"), index.h("smoothly-toggle-switch", { key: '78cec389f0b9c85a37b8c1f97a231936db930ebb', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'b177a3204f6219cd4371651874ada12d752731df' }, index.h("p", { key: '224ffc655286343a6b93f938f2abb9404b1504f8' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '2cf970e563defc731edc36268dc2edc15d077eb6', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'cce58f40849b0998f4f84118bd33a3a2c3a23988' }, index.h("p", { key: '3e4941a60c334575fd6728aa9eb3b49d7928c156' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'b43c8d57273be4c06aaef53ebde40ba31c001e2d', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -12672,7 +12792,7 @@ const SmoothlyTrigger = class {
                 result = this.disabled ? (index.h("slot", null)) : (index.h("a", { onClick: e => this.onClick(e) }, index.h("slot", null)));
                 break;
             case "button":
-                result = (index.h("button", { key: '7da8c40d448d1b53c81d638f0b1684e4577aa49a', disabled: this.disabled, name: this.name }, index.h("slot", { key: '587236afa7d7602b912b374ec5651e3efb528364' })));
+                result = (index.h("button", { key: '854edb8da9f7d85995ff790db54d4ace3656ffa2', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'cf1da38e64aa126e79f33ce517d95ff9725943fb' })));
                 break;
         }
         return result;
@@ -12726,6 +12846,7 @@ exports.smoothly_input_color = SmoothlyInputColor;
 exports.smoothly_input_color_demo = SmoothlyInputColorDemo;
 exports.smoothly_input_date = SmoothlyInputDate;
 exports.smoothly_input_date_range = SmoothlyInputDateRange;
+exports.smoothly_input_date_time = SmoothlyInputDateTime;
 exports.smoothly_input_demo = SmoothlyInputDemo;
 exports.smoothly_input_demo_standard = SmoothlyInputDemoStandard;
 exports.smoothly_input_edit = SmoothlyInputEdit;
@@ -12775,7 +12896,6 @@ exports.smoothly_theme_colors = SmoothlyThemeColors$1;
 exports.smoothly_theme_demo = SmoothlyThemeDemo;
 exports.smoothly_theme_guide = SmoothlyThemeColors;
 exports.smoothly_theme_picker = SmoothlyThemePicker;
-exports.smoothly_toggle = SmoothlyToggle;
 exports.smoothly_toggle_switch = SmoothlyToggleSwitch;
 exports.smoothly_toggle_switch_demo = SmoothlyToggleSwitchDemo;
 exports.smoothly_trigger = SmoothlyTrigger;