npm - smoothly - Versions diffs - 1.116.0 → 1.117.0 - Mend

smoothly 1.116.0 → 1.117.0

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

Files changed (503) hide show

package/dist/esm/{smoothly-app_98.entry.js → smoothly-app_99.entry.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement,
 import { b as Type, S as Scrollable, C as Color, F as Fill, I as Icon, T as Trigger, o as object, i as islyFunction, c as boolean, s as string, D as Data, f as fromIs, R as RGB, n as number, M as Message } from './Scrollable-CbMKpwBI.js';
 import { B as Button, S as Submittable } from './Submittable-NFA7UIyM.js';
 import { i as isoly } from './index-BVKhAhsB.js';
-import { N as Notice } from './Notice-C6lWCoIT.js';
+import { N as Notice } from './Notice-Bq3C8g8G.js';
 import './redirect-D0tCcwtl.js';
 function any(name) {
@@ -114,7 +114,7 @@ const SmoothlyAppDemo = class {
         console.log("smoothlyUrlChange", event.detail);
     }
     render() {
-        return (h("smoothly-app", { key: '86d6cc67b58d8c7c04b9fd7e33891dfacb529943', color: "dark", label: "Smoothly Demo", home: "/root", ref: e => (this.app = e) }, h("smoothly-app-room", { key: '7012500cb2629c53e1156372722e8ef2b6d047eb', path: "/" }, h("section", { key: '759dafafbd63e7fff5bf0acd0502e8eec36e8c64', style: { padding: "1em", maxWidth: "32em", margin: "0 auto" } }, h("header", { key: '0ed18baa408a674f906abc32425ce6037662a476' }, h("h1", { key: '22cb0dc61fece9d2d7acae6a55db19ccc57261df' }, "Welcome")), h("p", { key: 'd914f970b834d217cd2dfd7d2d05cd0c4b5dcb65' }, "Smoothly is a component library written in ", h("a", { key: '3626d6388b49307f475e4071ef114039dcb51f60', href: "http://stenciljs.com" }, "Stencil"), ". It can therefore be used across web based frontend toolchains such as React, Vue, Angular, Svelte, and even plain HTML."), h("p", { key: '319549bf6b8cca5d5f9042b1f74c29e884545a59' }, "This is particularly useful when trying to unifying the user experience across projects written in different technology stacks. It is also written to minimize the amount of code you need to write to achieve a nice user experience."))), h("smoothly-app-room", { key: '4c752059c00ad39c3bee1d36bdac99bfad027f5f', path: "/form", label: "Forms", content: h("smoothly-form-demo", null) }), h("smoothly-app-room", { key: '02b7dd008a64194f348bfb0679217ebbea05fac9', path: "/input", label: "Inputs", content: h("smoothly-input-demo", null) }), h("smoothly-app-room", { key: '41c7489608d0da9a8d4a2ab9b1a56c425cc36f21', path: "/table", label: "Tables", content: h("smoothly-table-demo", null) }), h("smoothly-app-room", { key: 'b10b3c95084e9f27a6ebeaf5170bb10be8226c87', path: "/button", label: "Buttons", content: h("smoothly-button-demo", null) }), h("smoothly-app-room", { key: 'f20620084dd779b954fa440b559db2bdccf0b3a3', path: "/icon", label: "Icons", content: h("smoothly-icon-demo", null) }), h("smoothly-app-room", { key: '5078c24c13064315cf8f761809e60cdfc1734c41', path: "/theme", label: "Theming", content: h("smoothly-theme-demo", null) }), h("smoothly-app-room", { key: '1a215800a294196d53fca85834aac7fea5990e70', path: "/dialog", label: "Dialogs", content: h("smoothly-dialog-demo", null), slot: "nav-end" }), h("smoothly-app-room", { key: 'c43bd3e6cdd99d7c481c041d85cdc09abf6777e1', path: "/display", label: "Display", content: h("smoothly-display-demo", null), slot: "nav-end" }), h("smoothly-app-room", { key: 'bec674db3cafd8d778f8d7baaa8036ff80c72d5e', path: "/tabs", label: "Tabs", slot: "nav-end" }, h("smoothly-tabs-demo", { key: 'b6a5e71af63d597edc737c03feacbd05c302ebd1' })), h("smoothly-app-room", { key: '7045bdab3e9f1b9e312c99c51efa7700650d868b', path: "/links", label: "Links", slot: "nav-end" }, h("smoothly-input", { key: 'bd683968e82f931896daa95af86c0219f147eb40', type: "text" }, "Default"), h("div", { key: '75e8b55879905603512fc4d5fe53e3c09a5782d0', style: { padding: "1em", maxWidth: "12em" } }, h("smoothly-button", { key: '869802d20dddc052fdfa6e537e641dc48c399117', fill: "solid", color: "danger", link: "https://google.com" }, "open"), h("smoothly-button", { key: 'e0018a3f508970db339bb3b235e31a65aba2757e', fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", type: "download" }, "download"), h("smoothly-button", { key: '7ab52ab0a4f39e20b2e2f26f46c0f8997d57729c', fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { key: '4824113cd8ce8a18c90c825b8a9b761cb8755b05', disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { key: '9e49688ab7dd80739746f71e3cab6ef83db80ae7', type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), h("smoothly-app-room", { key: 'fa1c5ae55b117380e63b5a770efe06c6df055378', path: "/redirect", label: "Redirect", slot: "nav-end" }, h("smoothly-button", { key: 'f47bd47275bd85a8e8f3e79e8c934e7927f36890', type: "link", link: "/input" }, "To input"), h("smoothly-button", { key: 'e24f908b0515b8219dce4d44bb2dd6b2c7f39584', type: "link", link: "../button" }, "To button"), h("smoothly-button", { key: '85835e7ebef099c646ca28af45d5827913872853', type: "link", link: new URL("/hidden", window.location.origin).href }, "To hidden"), h("smoothly-button", { key: 'b74f97297768504a5b4f0cace60acb1d48991633', type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { key: 'cc1cc9fce70b0f47fe652ae60d674fa6707be2cd', type: "link", link: "nested" }, "To redirect nested, relative path")), h("smoothly-app-room", { key: '17f2026f91be5f73266c141809bc31521d0acca9', path: "/hidden" }, h("p", { key: '3bbd16511c586b7387f4c7a5152131f5aa5a4cdf' }, "hello world!")), h("smoothly-app-room", { key: '2635c8a84e6909d055d7c53216cb72aed69fbeab', path: "/redirect/nested" }, "this is a nested room")));
+        return (h("smoothly-app", { key: '86d6cc67b58d8c7c04b9fd7e33891dfacb529943', color: "dark", label: "Smoothly Demo", home: "/root", ref: e => (this.app = e) }, h("smoothly-app-room", { key: '7012500cb2629c53e1156372722e8ef2b6d047eb', path: "/" }, h("section", { key: '759dafafbd63e7fff5bf0acd0502e8eec36e8c64', style: { padding: "1em", maxWidth: "32em", margin: "0 auto" } }, h("header", { key: '0ed18baa408a674f906abc32425ce6037662a476' }, h("h1", { key: '22cb0dc61fece9d2d7acae6a55db19ccc57261df' }, "Welcome")), h("p", { key: 'd914f970b834d217cd2dfd7d2d05cd0c4b5dcb65' }, "Smoothly is a component library written in ", h("a", { key: '3626d6388b49307f475e4071ef114039dcb51f60', href: "http://stenciljs.com" }, "Stencil"), ". It can therefore be used across web based frontend toolchains such as React, Vue, Angular, Svelte, and even plain HTML."), h("p", { key: '319549bf6b8cca5d5f9042b1f74c29e884545a59' }, "This is particularly useful when trying to unifying the user experience across projects written in different technology stacks. It is also written to minimize the amount of code you need to write to achieve a nice user experience."))), h("smoothly-app-room", { key: '4c752059c00ad39c3bee1d36bdac99bfad027f5f', path: "/form", label: "Forms", content: h("smoothly-form-demo", null) }), h("smoothly-app-room", { key: '02b7dd008a64194f348bfb0679217ebbea05fac9', path: "/input", label: "Inputs", content: h("smoothly-input-demo", null) }), h("smoothly-app-room", { key: '41c7489608d0da9a8d4a2ab9b1a56c425cc36f21', path: "/table", label: "Tables", content: h("smoothly-table-demo", null) }), h("smoothly-app-room", { key: 'b10b3c95084e9f27a6ebeaf5170bb10be8226c87', path: "/button", label: "Buttons", content: h("smoothly-button-demo", null) }), h("smoothly-app-room", { key: 'f20620084dd779b954fa440b559db2bdccf0b3a3', path: "/icon", label: "Icons", content: h("smoothly-icon-demo", null) }), h("smoothly-app-room", { key: '5078c24c13064315cf8f761809e60cdfc1734c41', path: "/theme", label: "Theming", content: h("smoothly-theme-demo", null) }), h("smoothly-app-room", { key: '2a54a53a694e23460e96b9fb04483204f9e1c347', path: "/notifier", label: "Notices", content: h("smoothly-notifier-demo", null) }), h("smoothly-app-room", { key: 'd57766baebf8df0791e1e5f845c2bac7d7b8729f', path: "/dialog", label: "Dialogs", content: h("smoothly-dialog-demo", null), slot: "nav-end" }), h("smoothly-app-room", { key: 'd5bde6145e9950a3ddcda8e24d811203a4b69f27', path: "/display", label: "Display", content: h("smoothly-display-demo", null), slot: "nav-end" }), h("smoothly-app-room", { key: '3d56ef533e12cb88ec84bd2fdc63a60e64031083', path: "/tabs", label: "Tabs", slot: "nav-end" }, h("smoothly-tabs-demo", { key: '271d70eb22cc0152161d42c137a3d00c19c6bba3' })), h("smoothly-app-room", { key: 'c0cbe202e3d74ceacd8e88795c58ece2c1392bf5', path: "/links", label: "Links", slot: "nav-end" }, h("smoothly-input", { key: 'a39f0e568b614baaf271585da4ee013e48ff24fe', type: "text" }, "Default"), h("div", { key: 'a75dc6524b85da5e0c81b75a9b74d020c2723384', style: { padding: "1em", maxWidth: "12em" } }, h("smoothly-button", { key: 'a3820b0c802acc358ee3ab4ca9483411bdff04a8', fill: "solid", color: "danger", link: "https://google.com" }, "open"), h("smoothly-button", { key: 'fd1c12e214b53d8acdb8828cb616356ae8fe94e9', fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", type: "download" }, "download"), h("smoothly-button", { key: 'f7c9c0a9eb4ca942f56e02b840087398a2688cd8', fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { key: 'ebce581340217e91d6abf1bbff7538f77c5842ae', disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { key: '01c20890774174c6ec793de4711d8e0530630108', type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), h("smoothly-app-room", { key: '42945bb6698943a783d0502f3ff0a08cb6ad583e', path: "/redirect", label: "Redirect", slot: "nav-end" }, h("smoothly-button", { key: 'b022c14f0680b1ca5f511cd87ab152a9ffb5b15d', type: "link", link: "/input" }, "To input"), h("smoothly-button", { key: '566a1821001da85b67ce9f68f74b590c5319f060', type: "link", link: "../button" }, "To button"), h("smoothly-button", { key: 'e99bbe6cbb348b2c8b2dba558458c08dea22db21', type: "link", link: new URL("/hidden", window.location.origin).href }, "To hidden"), h("smoothly-button", { key: '61e59ec9039a63b1d9c50c6705dc0098027be92a', type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { key: '511eba63ae34b4151e99ce482cb532849ab91dd7', type: "link", link: "nested" }, "To redirect nested, relative path")), h("smoothly-app-room", { key: 'bac6fa14c1c0dd2ebda292fe70255e53f466dc00', path: "/hidden" }, h("p", { key: '1acd1207b775790f189fd8d8c3fb96a5b8d8a991' }, "hello world!")), h("smoothly-app-room", { key: '2ecda7ecb183b382bb2987195af5a96e13e3b8b1', path: "/redirect/nested" }, "this is a nested room")));
     }
 };
@@ -1583,7 +1583,7 @@ const SmoothlyAppRoom = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '416a7250b9c2f2a42060522a0c305d3e10c530e2', class: { "smoothly-mobile-mode": this.mobileMode } }, h("li", { key: '13946e4e07e65dd755e6752c7c24b0e9f70a6519' }, h("a", { key: 'be5cc463ec7a2adeb513da59cb925de5f470242f', href: (_a = this.paths[0]) === null || _a === void 0 ? void 0 : _a.pathname, onClick: e => this.clickHandler(e) }, this.icon && h("smoothly-icon", { key: '9b76338e6f64f0331f00d85cbc164da9951051e6', name: this.icon }), this.label && h("span", { key: '1e12b7e8e3b35920f3f5c162e41208e4a87a5033', class: "label" }, this.label))), h("div", { key: '1e3e09244c7e623768dfee215c9a63a801fdf663', ref: e => (this.contentElement = e) }, this.content && h("smoothly-lazy", { key: '1f5938ff9fd197cf96761e5ee6868b45213c18a7', content: this.content }), h("slot", { key: 'f68188a185d5b6792b6dd7b3c971e69145fcb554' }))));
+        return (h(Host, { key: 'a85747f78cb72957e52a35bb4a5ddf7fd38c8901', class: { "smoothly-mobile-mode": this.mobileMode } }, h("li", { key: '2a89979ce87b7cbcbc250014d6c60110bdf8c7eb' }, h("a", { key: 'e7c03470ceab8f52195b90eb04d97678a75368a4', href: (_a = this.paths[0]) === null || _a === void 0 ? void 0 : _a.pathname, onClick: e => this.clickHandler(e) }, this.icon && h("smoothly-icon", { key: '0b40566be9199d9c34b75ec1260fac0e962c0fd6', name: this.icon }), this.label && h("span", { key: 'e55412f3a1c041d81b1d3a4e7751a315eafeede3', class: "label" }, this.label))), h("div", { key: '30eb0eda3109314348f4036ed6206779ad8cee96', ref: e => (this.contentElement = e) }, this.content && h("smoothly-lazy", { key: '929973767465e67ba49580978d83811f31637b9f', content: this.content }), h("slot", { key: 'a96c18f28066755f450174e9372e4ef8a25a7c57' }))));
     }
 };
 SmoothlyAppRoom.style = styleCss$1j();
@@ -1612,14 +1612,14 @@ const SmoothlyBackToTop = class {
             "--bottom": this.bottom,
             "--right": this.right,
         };
-        return (h(Host, { key: 'b0263cb27cc406847d1ddfcdb68517e45dc750c7', style: cssVariables, onClick: () => {
+        return (h(Host, { key: '5743000aaec20538ad6a57688015cb4afd65d56b', style: cssVariables, onClick: () => {
                 var _a;
                 return (_a = this.scrollableParent) === null || _a === void 0 ? void 0 : _a.scrollTo({
                     top: 0,
                     left: 0,
                     behavior: "smooth",
                 });
-            } }, h("smoothly-icon", { key: 'f13bb2fd7f5a707333a59065914e9293d1dd004f', name: "caret-up-outline" })));
+            } }, h("smoothly-icon", { key: '39ed5f8fb75c131e62e588101ec26fca43c7ca2c', name: "caret-up-outline" })));
     }
     get element() { return getElement(this); }
 };
@@ -1640,7 +1640,7 @@ const SmoothlyBurger = class {
         this.open = !this.open;
     }
     render() {
-        return (h(Host, { key: '707b857b83fc245e0279bda323904ee1cc8e85ee' }, h("smoothly-icon", { key: 'f514b6a05f9feaab4f13cf46778993c3106697e3', name: "menu" })));
+        return (h(Host, { key: '000c346b45f190a4616e30bd6b64c24a00d0be00' }, h("smoothly-icon", { key: 'be31c4e7dc3a8848a633801f705988329602805b', name: "menu" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -1659,7 +1659,7 @@ const SmoothlyButton = class {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '232453b5d6aae82be66b10cc89a4bc1dbfecfb8c', title: this.tooltip }, h(Button, { key: 'e83e04ffda9c99d7ba4a9a7bcc65c3adfff1aab6', disabled: this.disabled, type: this.type, link: this.link }, h("slot", { key: '9ca4777b578e3d16d9d16c88c5c22e97256c3d16' }))));
+        return (h(Host, { key: 'fddb810b2465ce82a68ce0bf4789aa8f14f79303', title: this.tooltip }, h(Button, { key: '3c08a7871e9ed69611790646f87fc7dae834330c', disabled: this.disabled, type: this.type, link: this.link }, h("slot", { key: '8048ac9a2c4e450201ef15b82f66532c253783d9' }))));
     }
 };
 SmoothlyButton.style = styleCss$1g();
@@ -1688,7 +1688,7 @@ const SmoothlyButtonConfirm = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c074a83b5c1adf25489bd21d6ddd877bce15b91b', warning: this.clickTimeStamp }, h("smoothly-button", { key: 'f4c7658b1c98dc7a7b3bfdd427fba714b43de7d8', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, h("smoothly-icon", { key: 'c41cfe01abddd88b047e6cf90da0864fe13a9d7c', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), h("smoothly-button", { key: 'df2f31430eb709a846295c8eb9f1241598c08a35', 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) }, h("slot", { key: 'f442c9e90dc109936afe5267f36ad482a6a841d9' }))));
+        return (h(Host, { key: '4412f32553a126e383e1d9bf32d1d0013eb85bc9', warning: this.clickTimeStamp }, h("smoothly-button", { key: '8f53b5dfa7d10e669536b87c7d91a9fe2f05a240', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, h("smoothly-icon", { key: 'be8bbedf8b038e06468c5aac4c813a5af41205ff', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), h("smoothly-button", { key: '719d905afde3e78e2297eba4bb7cc37e1a8728d6', 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) }, h("slot", { key: 'f3add649906ef5e0d5dd6a7fb504a2af4efe0e66' }))));
     }
 };
 SmoothlyButtonConfirm.style = styleCss$1f();
@@ -1700,7 +1700,7 @@ const SmoothlyButtonDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '533286a87d0525479bd2ee9e28e3b4f0a96d4028' }, h("section", { key: '83c431cb9866c7e9ed66d000c45db12cba32a5c1' }, h("smoothly-button-demo-standard", { key: '9be3c679df5dae790c20267466f0e59e7129e590' })), h("section", { key: '63c5a3497203d471629c514b4ad65062a65803e4' }, h("h4", { key: '4aea5b53872940382d8955d747731846e293bb80' }, "Confirm button (two clicks)"), h("div", { key: '0d06137cb8e7e2f0d27c7c9bcee216f6a582ff33' }, h("smoothly-button-confirm", { key: 'd10630d444951f251fd00100cbef18074e7d206b', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), h("smoothly-button-confirm", { key: 'c2b0cd87fe14786eaa690e51dd91ace6443aa3c4', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, h("smoothly-icon", { key: 'fa26113fbfdaea0ee2c0b4723084a69b54d7804b', name: "checkmark-outline", size: "tiny" })), h("smoothly-button-confirm", { key: 'cbceb8ffdeffeb6231bb4775a12aeca6599e7eb5', name: "confirm-icon", shape: "rounded", color: "danger", size: "icon", fill: "outline" }, h("smoothly-icon", { key: '5bbbaeccd43ee1b930a73a2fa676345835f9646a', name: "trash-outline", size: "tiny", fill: "outline" }))), h("smoothly-toggle-switch-demo", { key: '1bd1095e2c679a2526d31987873334f51d175e85' }), h("h4", { key: '6d22aa735b0d7f16093b216086441d0d722a6421' }, "Links with icons"), h("smoothly-button", { key: '7a9cf02c47b1ac104935336f57c07d9eacd865eb', type: "link" }, h("smoothly-icon", { key: 'fe0f7094ce66691d5e10ee2f5f6d65782a37a380', name: "checkmark-circle", slot: "start" }), "type link"), h("smoothly-button", { key: '723452282f7551547060378c9057d40e4f729be7', type: "button", color: "warning", fill: "default" }, h("smoothly-icon", { key: '2da735678c8066ac9ca1a0c8fc42be6f71968997', name: "call", slot: "start" }), h("a", { key: 'dd1747fde83a34074dd35a505a7305bb608fcf3a', href: "https://google.com" }, "link")), h("smoothly-button", { key: 'd9aa99e8d2dfecc0766e4322051a142028f1d749', link: "https://google.com", type: "link" }, h("smoothly-icon", { key: '6e64f4b3686c18f23b2215a41c53f87785835d1f', name: "arrow-forward", slot: "end" }), "link + type link"), h("h4", { key: 'da1b853513b11781bcd032cf4d7e5f771baa2ed9' }, "Size and Color test"), h("smoothly-button", { key: '8eb4c40f66e75ab99c197ba42c8a4e3f192dd9a5', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), h("smoothly-button", { key: '60c02db208c08a07c50c56ccb228eb333f67a59c', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), h("smoothly-button", { key: '8d6d6a13382b24bc44fa2153dcdeae8212169a97', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), h("smoothly-button", { key: '1c4cce72723efcde85b1308535263324e4b49041', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), h("smoothly-button", { key: '256c0622be653968e784e8a2a598b88a51dc80f7', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), h("smoothly-button", { key: 'd381847e99dca57bd315a6b7438b3e1e55172cc2', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), h("smoothly-button", { key: '6ff5845f5a0d82d9c99817696e9be364d9da950a', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), h("smoothly-button", { key: 'e14f96677b4aed688dc8f0ea0b596c6b585f15b0', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), h("smoothly-button", { key: '4cac9d4923a21476b5f6dc4de0430153477200fa', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), h("h4", { key: 'b1a485089eea221cab4a23be46a83c3c2e9c2929' }, "Expand examples"), h("smoothly-button", { key: '71aa9bd0791d0e326d9d0721fb2f8eb0d2875164', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), h("smoothly-button", { key: 'b316c727f5f529a63649558012ee790cb1e53750', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), h("h4", { key: '2afe5f6a00cbc405f8b7901f5e118d03adcd243e' }, "Fill examples"), h("div", { key: '8aad1d8d07c40c2ada40a18ebcbc7c89d8652eef' }, h("smoothly-button", { key: '63b8df9f6a45f6ff81168f9c3ad43344acc0c4ab', shape: "rounded", color: "primary", fill: "solid" }, h("smoothly-icon", { key: '33d1f688aa67a1db212a9b7aa7147de4f8279ae6', name: "checkmark-circle", slot: "start" }), "Fill Solid"), h("smoothly-button", { key: 'cda371d608f548bfceb958fedb0a7eb22cdc5c83', shape: "rounded", color: "secondary", fill: "outline" }, h("smoothly-icon", { key: '39824d2393567df80731477784e31bad5b019f90', name: "checkmark-circle", slot: "start" }), "Fill Outline"), h("smoothly-button", { key: 'd429cf372e423e882717f0867adb31ffd5d45dc6', shape: "rounded", color: "tertiary", fill: "clear" }, h("smoothly-icon", { key: 'e8473ef999c9f3bb56da4f58b51f593e7ebc4a1b', name: "checkmark-circle", slot: "start" }), "Fill Clear"), h("smoothly-button", { key: 'e26709d399f9747d657a805ce69f997127dd46e3', size: "icon", shape: "rounded", color: "success", fill: "solid" }, h("smoothly-icon", { key: '99abc1c65692daf112f2d2b1660918951ae60559', name: "basketball" }))), h("h4", { key: '99be735e4b2c91170daf2e3f0d5779a69d7ef08f' }, "Buttons with Icon in \"start\""), h("div", { key: 'af0724fe2f9605a199d1b392d0307a948bc02b0c' }, h("smoothly-button", { key: '38a7a2af64996af6adc7514d8ee407eaf2c7878b', shape: "rounded", fill: "solid", color: "warning" }, h("smoothly-icon", { key: '951d2c413089f67b6ebe3c6d9f566ad5267cf4ae', name: "checkmark-circle", slot: "start" }), "Check"), h("smoothly-button", { key: '6ee1bc2af768f123a12e294016cc917aa4bd1c0e', shape: "rounded", fill: "solid", color: "secondary" }, h("smoothly-icon", { key: '9d0e80208a6e68f919cc7276073232a368cb111a', name: "basketball", slot: "start" }), "Check"), h("smoothly-button", { key: 'e5366d8f3ed7a2cf41cece51570301f145c67e19', shape: "rounded", fill: "solid", color: "success" }, h("smoothly-icon", { key: 'a0ad0a9620d853fda8d7e594031c04a0ec689445', name: "call", slot: "start" }), "Check"), h("smoothly-button", { key: 'c94e929cfe5f738f2a3235f43a1f4da5e0c9fc36', size: "icon", fill: "solid", shape: "rounded", color: "success" }, h("smoothly-icon", { key: '71a2f51f71668101315aa8533b5bfcf366d7fc5a', name: "call" })), h("smoothly-button", { key: 'f33069cba505b599106e46dd64b9c8d5d7af72b1', size: "flexible", fill: "solid", color: "success" }, h("smoothly-icon", { key: '23f5cfce66c47cfe7a7bc61270d366dc1a4b1df2', name: "airplane" }))), h("h4", { key: '0e1d80f018cb083f747dca33ac1579623130e4b4' }, "Buttons with Icon in \"end\""), h("smoothly-button", { key: 'a6fb030807e47ece0af3e864fd1021dd073bb694', fill: "solid", color: "light" }, "Go Forward", h("smoothly-icon", { key: '257becef67d6cc074ae9ea15c4aa7f4310b6512e', name: "arrow-forward", slot: "end" })), h("h4", { key: 'dae9d6d89805ba3dbe25d10b078150475f097f97' }, "Test for icon button"), h("div", { key: '430c1bc4c47a98cf456a84a2d5ab2668777f01cd' }, h("smoothly-button", { key: '3c58c97ef2193b38eab09a4e533dba5b4f20a4e4', size: "icon", fill: "solid", shape: "rounded", color: "success" }, h("smoothly-icon", { key: '59426dc2bd35c313d6619b44f13d517aa7c034ce', name: "call" })), h("smoothly-button", { key: '0fb117873692f75b51c92e333d3f835cd5fbe74f', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, h("smoothly-icon", { key: '7162fcc07788dd9829abafb5b7f38e786b86c298', name: "search-outline" })), h("smoothly-button", { key: 'f46d225a20b28efeafcb952544ff5600988ada74', size: "icon", shape: "rounded", color: "secondary" }, h("smoothly-icon", { key: '787a26836d6788196c5f3761f66c680704df9817', name: "checkmark-circle" }))), h("h4", { key: '2d8596d90b04536a298e7375e2a4ad3b0c463fbc' }, "Link examples"), h("div", { key: '5af7537287d37938616bc0478f7cc63e757720e5' }, h("smoothly-button", { key: 'b6faae4aa4fd72b87c7181ec146dfda0cfa7a248', type: "link" }, "type link"), h("smoothly-button", { key: '4d56453b6a595c09cb70cd8708392effda6f9279', type: "button", fill: "clear" }, h("a", { key: '607e553ae06c24cb513fe90ecca476295b719283', href: "https://google.com" }, "link")), h("smoothly-button", { key: '9a397311efd0a89849a6c8016fce61bf0639cea0', link: "https://google.com", type: "link" }, "link + type link")), h("h4", { key: '466df22b0f9265755db176b4947f39cb3892d331' }, "Disabled buttons"), h("div", { key: 'b146d15d620300b8da5e134618a1b3f904024f61' }, h("smoothly-button", { key: '637ee09aedbde2ff0342d469b50bd181a632308c', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), h("smoothly-button", { key: '0bdca6978fd1908f3c529668bfe3c128987522a5', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))), h("smoothly-back-to-top", { key: 'f217299a63164d3d4bcbda3d9ab1b4da44a8f99f' })));
+        return (h(Host, { key: '41fbe591e1a0c9ab6d1d73335a9b9f4a5a3c4d93' }, h("section", { key: '59b6da9df3532752d3e5dcf9763c527d165bcf1f' }, h("smoothly-button-demo-standard", { key: '27bf9cd1746a1718bf887dcef5d79230b01318ff' })), h("section", { key: 'e7e87e4c84c0e8df43d56f217196e27a9bb5670e' }, h("h4", { key: '8bf5cff46e4146474a9b91bfe8b83db89dd13c3a' }, "Confirm button (two clicks)"), h("div", { key: '3c341489427dbf76dc4e9a200c23f58174696591' }, h("smoothly-button-confirm", { key: '75793866c6111afbd5aeadf1bc6251f1efa9d592', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), h("smoothly-button-confirm", { key: '14bdceddb01044ae6979af4a0c8efe0970e81e3d', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, h("smoothly-icon", { key: '33058b7d3638a0ca28aee23a5fb238d60356b16d', name: "checkmark-outline", size: "tiny" })), h("smoothly-button-confirm", { key: 'd7d306d14262d7b43c5c37af91ffb79f0be82b14', name: "confirm-icon", shape: "rounded", color: "danger", size: "icon", fill: "outline" }, h("smoothly-icon", { key: '7ea300edde779ca34db97bb2fe60f0051b1e366d', name: "trash-outline", size: "tiny", fill: "outline" }))), h("smoothly-toggle-switch-demo", { key: 'c6e8b4c78605733c73bab3c1aa8ae5e770cc14e4' }), h("h4", { key: '8e92524469b1b4e0a59d14907e8df2f4e7680887' }, "Links with icons"), h("smoothly-button", { key: '4ca461c47396b88dd9c276248d2fb425255e26f8', type: "link" }, h("smoothly-icon", { key: '07c089e06c38afc5d0abe83491c38716486225c6', name: "checkmark-circle", slot: "start" }), "type link"), h("smoothly-button", { key: 'b1c765d706ee22acb4368b8a67b1faddb591581a', type: "button", color: "warning", fill: "default" }, h("smoothly-icon", { key: 'd3188cb32fd389fb88a3a1e760fe33867265c5fc', name: "call", slot: "start" }), h("a", { key: '9bdf562304a25ce3024ca58cb53fff7c4b04acb6', href: "https://google.com" }, "link")), h("smoothly-button", { key: '5da225cc3dfd1638a54fc9ce533cd038cccc808e', link: "https://google.com", type: "link" }, h("smoothly-icon", { key: 'a2417e1fbdff1b064e1cc3f61c4fc1615291e44d', name: "arrow-forward", slot: "end" }), "link + type link"), h("h4", { key: '54a1da928e2c9c48638a12dd3768c001ba38a77f' }, "Size and Color test"), h("smoothly-button", { key: 'bce9b7538f39f17b0377f723310eadbad511ed80', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), h("smoothly-button", { key: '210799c91bfe94fb54b3434fd99e67075cc91b43', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), h("smoothly-button", { key: '374856692cefcb96deb1a38758eb4fec6f7808ab', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), h("smoothly-button", { key: 'e807e6793fb358e6ced92caecb1d0feab2f011c7', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), h("smoothly-button", { key: '9bcde023dd0e12a84835bdd3d0c93d7602485246', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), h("smoothly-button", { key: 'f98fb61b19dfbc7bbf29a740e7a5ae1997861c80', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), h("smoothly-button", { key: '6a46ea925f111b8c1d8b4510577d57f10e49ed1e', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), h("smoothly-button", { key: '3ced819c355f03ef775ace7ccfbb0206bbc07b6a', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), h("smoothly-button", { key: '3257cef08250f67f8ec2666130e3ea0645a8e2c7', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), h("h4", { key: '0a0800062a9f545328408b50f91d9f080cdee158' }, "Expand examples"), h("smoothly-button", { key: '02fabfb6c3583fb8853d82c4b97245428253774a', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), h("smoothly-button", { key: '51ddb0b657a2648909072cac84055478db97f95d', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), h("h4", { key: '52624dee081a11c096585822d810cf4288059379' }, "Fill examples"), h("div", { key: '2c1eeadd860b6115dd7fdd0b2f4f8538a564269a' }, h("smoothly-button", { key: '9e5454cac152c3eaea53cb55f607ca32ab09ff62', shape: "rounded", color: "primary", fill: "solid" }, h("smoothly-icon", { key: '188d4c19f60645acb41e0f47f4a96da2e544b8c0', name: "checkmark-circle", slot: "start" }), "Fill Solid"), h("smoothly-button", { key: '8587e3a0015b27248dd5b0cfa801e8abd962c5ab', shape: "rounded", color: "secondary", fill: "outline" }, h("smoothly-icon", { key: '557848720b2df5e0425ba66f892b5bf29fa5ea2f', name: "checkmark-circle", slot: "start" }), "Fill Outline"), h("smoothly-button", { key: 'bb9406a007325c258a6a7b1039fcb1665c0abd3a', shape: "rounded", color: "tertiary", fill: "clear" }, h("smoothly-icon", { key: 'ed23a5661e678f293cbfa5745d684e6b10dc8c1a', name: "checkmark-circle", slot: "start" }), "Fill Clear"), h("smoothly-button", { key: '910b4a12a963dc64747c0d37eac3ce437215982f', size: "icon", shape: "rounded", color: "success", fill: "solid" }, h("smoothly-icon", { key: 'f32e72f63b447d69655d51eb23fb23671132c34f', name: "basketball" }))), h("h4", { key: '13a6bf24881c6eb2c7753b6cc5a23dfe8c16f5bc' }, "Buttons with Icon in \"start\""), h("div", { key: 'cc0e96b1435883957159795474f8cf7aead9586d' }, h("smoothly-button", { key: '963d08b7ffe3533daa1a933ce66263616258f92b', shape: "rounded", fill: "solid", color: "warning" }, h("smoothly-icon", { key: '6fd017cf57e5ebdf63078003e02d92c68c8f4af5', name: "checkmark-circle", slot: "start" }), "Check"), h("smoothly-button", { key: '0bfde99dba0e56974c4132d2ef6c727c9a2a809f', shape: "rounded", fill: "solid", color: "secondary" }, h("smoothly-icon", { key: '5780d006fe5a007b68f17c537934ebae8fb23480', name: "basketball", slot: "start" }), "Check"), h("smoothly-button", { key: '00e418dec2de5f78e40f56a38bff2e66f0ea8744', shape: "rounded", fill: "solid", color: "success" }, h("smoothly-icon", { key: 'eed0a2bb3c839dd3d914dc0a07e1e3c51e3c5bf3', name: "call", slot: "start" }), "Check"), h("smoothly-button", { key: '7ccffbe4c12666ce4f167f0fdc9b6bc7078faeb0', size: "icon", fill: "solid", shape: "rounded", color: "success" }, h("smoothly-icon", { key: '56531f0dd24f7c5bb0ae63fcf7b82935b60d24f2', name: "call" })), h("smoothly-button", { key: '8466fd4b388ad0e5411ba5f31975aaf6a1b0680b', size: "flexible", fill: "solid", color: "success" }, h("smoothly-icon", { key: '1472f81c21140b5a8ee4408a947657cd673bd1dc', name: "airplane" }))), h("h4", { key: '0e2ac17f379dd54737037e4d3b32ad256ebf8494' }, "Buttons with Icon in \"end\""), h("smoothly-button", { key: 'a4350f353ce14cb9adb6b362b0b11e527c0cd9fe', fill: "solid", color: "light" }, "Go Forward", h("smoothly-icon", { key: 'c8e56f3ab255349c872b991ec76de6c6ab878066', name: "arrow-forward", slot: "end" })), h("h4", { key: '4a318ff840e33a41e1afbdc2e328430ac4bbc830' }, "Test for icon button"), h("div", { key: '9305973351f925768f74b64f7b790c92b1588839' }, h("smoothly-button", { key: 'da959f375b10df462b6bf8df9d5104dce89fb9d0', size: "icon", fill: "solid", shape: "rounded", color: "success" }, h("smoothly-icon", { key: '141d5fa125a2a34220c4cf0320ec45ca3fe31139', name: "call" })), h("smoothly-button", { key: '0987067c106765e51df6f9586aa1d45d942ef125', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, h("smoothly-icon", { key: '5fa23e7a1d9b315af5354b55fc4eefd9835e0a44', name: "search-outline" })), h("smoothly-button", { key: '60e76fbb66064799f114cc841c813f9ee1d7d065', size: "icon", shape: "rounded", color: "secondary" }, h("smoothly-icon", { key: '1ae4510d90d1b47baadee8f6ed7dd492066bd3e9', name: "checkmark-circle" }))), h("h4", { key: 'fadbc9d0a253d68f24b030d2d52d73d5947d335a' }, "Link examples"), h("div", { key: '8b4ced5d7bbb2e479073f04cfb98e7f98b41f01c' }, h("smoothly-button", { key: '128369132e142d37361b6d640fde4d2743e145a7', type: "link" }, "type link"), h("smoothly-button", { key: 'b9f05aa9925ca88c1aa65f4e0b3040bed9d01e83', type: "button", fill: "clear" }, h("a", { key: '9b565879faf7af07377103494a04b9c3c3a53c8a', href: "https://google.com" }, "link")), h("smoothly-button", { key: '69355e4bbbf46fd49597bc3db62d31548d112f87', link: "https://google.com", type: "link" }, "link + type link")), h("h4", { key: 'dbc23f33d5d74c0147f658672f7a4fcfb166df9d' }, "Disabled buttons"), h("div", { key: '0b6d087a8e7ca3a3c1b94159f126962b6c622b20' }, h("smoothly-button", { key: '636c5d7b4ddfee2ca6b912b8c8f65e06b5a64136', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), h("smoothly-button", { key: 'da4a2457eef26c077d603bd3482764ce357918ad', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))), h("smoothly-back-to-top", { key: '2906fd515608fe4a3c880755bbb9dfee63d94889' })));
     }
 };
 SmoothlyButtonDemo.style = styleCss$1e();
@@ -1723,10 +1723,10 @@ const SmoothlyButtonDemoStandard = class {
         }, 100);
     }
     render() {
-        return (h(Host, { key: 'c109a1c44628d1b42425859649047a002ee16ce0' }, h("h2", { key: '30b5293b4446f0202ba93d4dfff6b3e73ecd8976' }, "Button Standard"), h("smoothly-form", { key: '6281f5092e984b1dfc19a0efcb104d05ab5d8e48', onSmoothlyFormInput: e => (this.props = e.detail), looks: "grid" }, h("smoothly-input-checkbox", { key: '77ac5fe8bf329861e476539c8625fd5820bdc413', name: "text.useColor", checked: true }, "Use Color as Text"), h("smoothly-input-select", { key: '0dbc3a3420ecefc797b9bdba4f453c90d66c8d1f', name: "size" }, h("span", { key: 'a989af18c47839ff1d5b1e31450062aec0eb3651', slot: "label" }, "Size"), ["small", "large", "icon", "flexible"].map(size => (h("smoothly-item", { value: size, key: size }, size)))), h("smoothly-input", { key: '68d2793e921608a9fa1951b6bd97b87dd87a3e10', name: "text.value", value: "Button" }, "Text", h("smoothly-input-clear", { key: 'bb3938f242bf725507e7ece9cfdf7cb314bca1f1', slot: "end" })), h("smoothly-input-radio", { key: '797d38475df5bc28ac171152407459d98383233b', name: "expand", clearable: true }, h("span", { key: '3210bb5bee8ff0184edfcf6747246efc50ab0752', slot: "label" }, "Expand"), h("smoothly-input-radio-item", { key: 'ebbd079aa41839ba2ed8078880b3f546371b4dc7', value: "block" }, "block"), h("smoothly-input-radio-item", { key: 'daf621085701675377fc460d85e9e328bf09ddd6', value: "full" }, "full"), h("smoothly-input-clear", { key: 'dca4f783b5140ff4c1f0d2aaa1ee9a6fde9f8147', slot: "end" })), h("smoothly-input-select", { key: '9d1cdf02e4b762052d2abd3b431f420e554a28c9', name: "fill" }, h("span", { key: 'b7095efe1d384897bcbd15353f57ff7da0718f50', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill, key: fill }, fill)))), h("smoothly-input-checkbox", { key: '78c942e631eef9e23c2f8cd47b8521ad2279c7c1', name: "disabled" }, "Disabled"), h("smoothly-input-select", { key: '976eb85785d873c38d676634f6f54269804b474f', name: "type" }, h("span", { key: '76cbdc4271456d0c2edf6233bdf7dcdfeee9467e', slot: "label" }, "Type"), ["button", "submit", "reset", "link"].map(type => (h("smoothly-item", { value: type, key: type }, type)))), h("smoothly-input-checkbox", { key: '15cd8593b09827f44817b15ebd28f4702faa1bb7', name: "rounded" }, "Rounded"), h("smoothly-input-select", { key: 'c93bda31e420e209cc7cd2253943a868a3b53864', name: "icon", menuHeight: "8items" }, h("span", { key: '6b76f90f3ecb8c46e8b66a6fb348b658938a3bf8', slot: "label" }, "Icon"), Icon.Name.values.map(icon => (h("smoothly-item", { value: icon, key: icon }, h("smoothly-icon", { name: icon, size: "small", tooltip: icon })))), h("smoothly-input-clear", { key: '0ebe8cb52112672443dd94922191fc5f3b7fb20c', slot: "end" })), h("smoothly-input", { key: '5860bfcdf0a2de4c2109bde9072a114db9de4ba1', name: "tooltip", value: "Tooltip" }, "Tooltip", h("smoothly-input-clear", { key: '32672407cf8cbffdec719c479f9615bc3198dc79', slot: "end" }))), h("div", { key: 'bfe436596b1585265ea0b711a43831e722c696ac', class: "buttons" }, Color.values.map((color, index, colors) => {
+        return (h(Host, { key: 'd6e6ca6091ae99e7203ec3d88a00d4b486f5f3bd' }, h("h2", { key: 'b62fd377ec00749b0f0f7b8cff1e2e2fdceb318d' }, "Button Standard"), h("smoothly-form", { key: 'c9c1113d5c7073b66d0cfbd90bfa552ca3104d37', onSmoothlyFormInput: e => (this.props = e.detail), looks: "grid" }, h("smoothly-input-checkbox", { key: '0666c152084c24ec1596ab16d09b04da4f885752', name: "text.useColor", checked: true }, "Use Color as Text"), h("smoothly-input-select", { key: '77fa423c1bed60c446bad2fee6ef4927610ac8af', name: "size" }, h("span", { key: 'd5cd74d1252542454a5fb6441d2099da14a53023', slot: "label" }, "Size"), ["small", "large", "icon", "flexible"].map(size => (h("smoothly-item", { value: size, key: size }, size)))), h("smoothly-input", { key: 'b6df255a745261b34ef164f04c5458c77a9c286b', name: "text.value", value: "Button" }, "Text", h("smoothly-input-clear", { key: '0ee5dff1bd206c5db7d1928773cef6890fb2ed80', slot: "end" })), h("smoothly-input-radio", { key: 'f6f3027ea26fc6c6d077b79bbb228b6cd0809e54', name: "expand", clearable: true }, h("span", { key: '33436d08686b4714e0cfdb0cea7ba6b082b666ed', slot: "label" }, "Expand"), h("smoothly-input-radio-item", { key: 'be55407c3191954aca07baf6aa027ac6bbe9d106', value: "block" }, "block"), h("smoothly-input-radio-item", { key: '1e94daa9639011bf686019ba4883524f0073fae6', value: "full" }, "full"), h("smoothly-input-clear", { key: '3b51e51710dbac5a260d3396546285234f55ad9e', slot: "end" })), h("smoothly-input-select", { key: '73b66b593f926e9035e4502bb8978deac7675d76', name: "fill" }, h("span", { key: '5b143acb8c018f8c37d50788d77c8935fb5e014f', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill, key: fill }, fill)))), h("smoothly-input-checkbox", { key: 'ef134a75c0dc58a8ef42ab5f382132eb8163452a', name: "disabled" }, "Disabled"), h("smoothly-input-select", { key: 'ad79838c8c83d40eeb08b1c5b83d6e82a9b6c87c', name: "type" }, h("span", { key: '1581c9346c7c2443324996f8e2b79d03f31241da', slot: "label" }, "Type"), ["button", "submit", "reset", "link"].map(type => (h("smoothly-item", { value: type, key: type }, type)))), h("smoothly-input-checkbox", { key: '05a368b01328adf76df30553a714934b582c16f6', name: "rounded" }, "Rounded"), h("smoothly-input-select", { key: 'a8298ce4893589cdef6de8b311d393e1d4d7bd1d', name: "icon", menuHeight: "8items" }, h("span", { key: 'f0a06face2985f21d7159adb1ce523483268644a', slot: "label" }, "Icon"), Icon.Name.values.map(icon => (h("smoothly-item", { value: icon, key: icon }, h("smoothly-icon", { name: icon, size: "small", tooltip: icon })))), h("smoothly-input-clear", { key: '5791bab3057dac0dfcbd69b3c593b331878b4ed0', slot: "end" })), h("smoothly-input", { key: '8c650a560e278a4aac4040ee101e4e1346ca3a54', name: "tooltip", value: "Tooltip" }, "Tooltip", h("smoothly-input-clear", { key: 'e67bfad19b0bc374f025055140a689bb45ec4dbb', slot: "end" }))), h("div", { key: '0c312b6d27ddb2a1a80c04661345c703b2622414', class: "buttons" }, Color.values.map((color, index, colors) => {
             var _a, _b;
             return (h("smoothly-button", { onClick: e => console.log(`Clicked button with color: ${color}`, e), tooltip: this.props.tooltip, ref: el => colors.length - 1 == index && (this.lastButton = el), color: color, expand: this.props.expand, fill: this.props.fill, disabled: this.props.disabled, shape: this.props.rounded ? "rounded" : undefined, size: this.props.size, type: this.props.type, key: color }, this.props.icon ? h("smoothly-icon", { name: this.props.icon }) : undefined, ((_a = this.props.text) === null || _a === void 0 ? void 0 : _a.useColor) ? color : (_b = this.props.text) === null || _b === void 0 ? void 0 : _b.value));
-        }), h("div", { key: 'dc35cbaca69e970cca164c25cb00889a8e2d57f3', class: "height-text" }, this.heightText))));
+        }), h("div", { key: '638acf6f59bd885acb4262f43e377afc22e35b79', class: "height-text" }, this.heightText))));
     }
     static get watchers() { return {
         "props": [{
@@ -1864,10 +1864,10 @@ const Calendar = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Fragment, { key: 'ce6f5ed6897c671cd7317ba890f420b82b797271' }, h("smoothly-input-month", { key: '670fd797951b17f0e26c7f073bd31aa087280625', 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 (h(Fragment, { key: '51ec0570b1b71eb9ff8bca9984ecf40550abe435' }, h("smoothly-input-month", { key: '1beb2d18f5a08e93d88fddca59675078d8662715', 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);
-            }, onSmoothlyUserInput: e => e.stopPropagation() }, h("div", { key: '627d7dd4e5ddf05c5408ce8f9b255e028e089ed8', slot: "year-label" }, h("slot", { key: '1103cb741e629b6f4b797d9d304bb85d4407e9d4', name: "year-label" })), h("div", { key: 'a1ab52b83ad62c7b80d30b65df99d17f0aca15c1', slot: "month-label" }, h("slot", { key: 'feac55da56ff9dd5108e39733b63d0923fa019de', name: "month-label" }))), h("table", { key: '1389cd23c50d790139c31d627024cdc22b10ed35' }, h("thead", { key: '1c3ef2d2584eef6e7b4be81b5d6268b111ac3105' }, h("tr", { key: 'e75be690b817d27820c03bc041107387ee60cbf8' }, weekdays().map(day => (h("th", null, day))))), month((_c = (_b = this.month) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : isoly.Date.now()).map(week => (h("tr", null, week.map(date => {
+            }, onSmoothlyUserInput: e => e.stopPropagation() }, h("div", { key: '14ed1a3cc6dd8fe89d7ac4f1450f391ccb0bff77', slot: "year-label" }, h("slot", { key: 'c07b485adf7b6b4aa71d3ceb10d530aa029c652d', name: "year-label" })), h("div", { key: 'cd1e232ded9c2ac84156de7419bc46bdd4e01680', slot: "month-label" }, h("slot", { key: '1255e6cef5898b90aba12716639774957e09cd86', name: "month-label" }))), h("table", { key: '8ada3e2ac6abf42710c8611d9264ddbc7691e307' }, h("thead", { key: '1f686102dc5f57bbc838d11d984e85407d44fdda' }, h("tr", { key: '41ab20afc9b1a4491f5070345f779dc6238dd8d3' }, weekdays().map(day => (h("th", null, day))))), month((_c = (_b = this.month) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : isoly.Date.now()).map(week => (h("tr", null, week.map(date => {
             var _a, _b, _c, _d;
             return (h("td", { tabindex: 1, onMouseOver: this.withinLimit(date) ? () => this.onHover(date) : undefined, onClick: this.withinLimit(date)
                     ? () => (this.doubleInput ? this.onClickDoubleInput(date) : this.onClick(date))
@@ -2286,7 +2286,7 @@ const SmoothlyInputDateRangeText = class {
         }
     }
     render() {
-        return (h(Host, { key: '29343df478fdb9a5805aef00432be4456d8e4d12', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat$1.Order.toArray(this.order).map((part, index) => {
+        return (h(Host, { key: '58630b82c91178b70eee75c26ad8b6c2927410cb', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat$1.Order.toArray(this.order).map((part, index) => {
             var _a;
             return (h("span", { onClick: () => !this.readonly && !this.disabled && this.setFocus(index) }, h("span", { class: {
                     "smoothly-date-text-part": true,
@@ -2327,7 +2327,7 @@ const SmoothlyDialog = class {
         };
     }
     __stencil_render() {
-        return (h("section", { key: 'd3c1f7ac7d570b91b7f333e6ed1a3d324968c87c' }, h("div", { key: '008dcd5c0e1ab41ae9af6b064888a16391b2c9d3', class: "header" }, this.closable && (h("smoothly-trigger", { key: 'fefe3f3dcf2fb30a1da8617169b513228674fa62', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'dbc75bd2df07148370796f4b2836cc1046332f3e', name: "close-circle", fill: "solid", color: this.color }))), this.header ? h("h1", null, this.header) : h("slot", { name: "header" })), h("div", { key: 'ef442c19429cead69075b022cb0511bd5cdbab50', class: "content" }, h("slot", { key: '65681298d9f89649128e93c9193b5e7488157ddf' }))));
+        return (h("section", { key: '5bdc10b02671eed7397ae99e872f104cb098d2c0' }, h("div", { key: '05bbab31a6d30c2ff0e3ec64ac59c8e56560526c', class: "header" }, this.closable && (h("smoothly-trigger", { key: '4f5d1a0d5c87d22d00281fadba0ffacf20c4b8db', fill: "clear", name: "close" }, h("smoothly-icon", { key: '2474cba19d732b0d34b02a055379bf1926a8fc4d', name: "close-circle", fill: "solid", color: this.color }))), this.header ? h("h1", null, this.header) : h("slot", { name: "header" })), h("div", { key: '861af5e557c0ef202273cab84877c8806bb2c232', class: "content" }, h("slot", { key: 'e755042ab3f24972fa2eaac24914649d10dafd0f' }))));
     }
     render() { return h(Host, this.hostData(), this.__stencil_render()); }
 };
@@ -2343,7 +2343,7 @@ const SmoothlyDialogDemo = class {
         this.showFrame = false;
     }
     render() {
-        return (h(Host, { key: '8add700509240579f6f83dc95a6d4d0bddee067e' }, h("smoothly-button", { key: '35a3641241542400cfdca56b058887eaaca7c629', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), h("smoothly-button", { key: '38a3e022173090e5a04547774c3a75674ad8937b', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), h("smoothly-button", { key: '0c52d6216d204dd41310fda4c810e8212fafe3e4', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), h("smoothly-modal", { key: '73d07f4662ac3ee4e398c98fdc50073af6a6cd63', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, h("h2", { key: '4b8420bae8815bf0f491ebb38948f3348a5bc84c', slot: "header" }, "Modal"), h("span", { key: '2115cc46f1adb4149cf71331e3151f1fe876f681' }, "Are you sure you want to confirm this action?"), h("smoothly-button", { key: 'c722bed6d0ace30ab2ef644e219fb599da17276d', slot: "actions", color: "success" }, "Confirm"), h("smoothly-button", { key: '18c7bcebed68d09049ccddb2c559edbcc6c0b2d4', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), h("smoothly-modal", { key: 'a89476ee4a3f90e1b57b243a4217a43b91874628', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, h("h2", { key: 'b778a0933b0b0b28aedefadaafed3b3f67f770a3', slot: "header" }, "Modal"), h("smoothly-summary", { key: 'fdfaa4526ee58e7bb2c356750de4540f45dfbf65' }, h("div", { key: 'a8418a82b28b6a698214ebff19b2aa28148e6ce2', slot: "summary" }, "Lorem ipsum"), h("div", { key: 'c4f120ea3e663e2e05fc6e109b8094129c88e8d5', slot: "content" }, Array.from({ length: 10 }).map(() => (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."))))), h("smoothly-button", { key: 'e17da5e0786e43d783ec17008bdf956e90d44946', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (h("smoothly-dialog", { key: '3e5e753799e6d49303cd5afe03448dac8c1a7c0a', closable: true }, h("smoothly-frame", { key: 'f61497a6984b98e8a392dd33dcc1ac6a7ba35734', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
+        return (h(Host, { key: '0d1ca7f9bc049064eb1680cc807bd49bafab0e7e' }, h("smoothly-button", { key: '33683c13b2f666aea6d3306056b74b694cb88654', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), h("smoothly-button", { key: '46de03312dfa5a28f164aacd442a7074148d6390', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), h("smoothly-button", { key: 'ea629cfa5afabb8151f230b4916d9eb13849a4d7', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), h("smoothly-modal", { key: '45b7313f8539478b1418298a7e086e506b18cf79', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, h("h2", { key: '005f8f44463bd4f5048582f4d59b8792a02321e4', slot: "header" }, "Modal"), h("span", { key: '8bdae975d32f862fe1b2da1b75c1cdd8e0596e19' }, "Are you sure you want to confirm this action?"), h("smoothly-button", { key: '7a4fc7fbeb273ddaf66723c022c0408d7d5e6cc0', slot: "actions", color: "success" }, "Confirm"), h("smoothly-button", { key: 'c41f548b2f249ab1d04d180c6a8745f0be0c3180', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), h("smoothly-modal", { key: '9b8efe1c92dae88afeb60053efcc19c89fcb53f6', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, h("h2", { key: '0c7b0382250669ac142152a49f24214180b75c11', slot: "header" }, "Modal"), h("smoothly-summary", { key: 'ccb69953bda0af96ba9e6679d0492770e1face22' }, h("div", { key: '95d44ba81eec2106d470f4f84c0857aab8f9b6c5', slot: "summary" }, "Lorem ipsum"), h("div", { key: '73a8c397c891af87ebb019bdb3ace838ab40ee24', slot: "content" }, Array.from({ length: 10 }).map(() => (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."))))), h("smoothly-button", { key: '61c0e81f6b49ff91d58cc3536c516e25afe9ee71', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (h("smoothly-dialog", { key: 'c0315ea0fbf1a253fe4fbc7aa9e01f7b21e49293', closable: true }, h("smoothly-frame", { key: '1469ba8f2d229d42329627b12e2a4bd4028a2273', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
     }
 };
 SmoothlyDialogDemo.style = styleCss$19();
@@ -4201,16 +4201,16 @@ const SmoothlyDisplay = class {
         const type = this.type;
         switch (type) {
             case "json":
-                result = h("smoothly-display-json", { key: '64f0c43d63b42975833202265cd02a4e7b7af147', value: this.value, collapseDepth: this.collapseDepth });
+                result = h("smoothly-display-json", { key: 'fd641ce179a967152448d7c489ad96dd5ea6cc4e', value: this.value, collapseDepth: this.collapseDepth });
                 break;
             default:
                 result = format(this.value, type);
                 break;
             case "email":
-                result = h("a", { key: '0c287d32f128b8740b8c349ee1558ed5e60ce50e', href: "mailto:" + this.value }, format(this.value, type));
+                result = h("a", { key: 'd32e3545f5b4e43e0b8f383ba0ef7274472f4d41', href: "mailto:" + this.value }, format(this.value, type));
                 break;
             case "phone":
-                result = h("a", { key: 'dc27f6c1d36f47721908d7ae04783ceab3863a29', href: "tel:" + this.value }, format(this.value, type, this.country));
+                result = h("a", { key: '3b6156fba727f342215fc2510e497bf24e21fa9b', href: "tel:" + this.value }, format(this.value, type, this.country));
                 break;
             case "postal-code":
                 result = format(this.value, type, this.country);
@@ -4246,35 +4246,35 @@ const SmoothlyDisplayDemo = class {
     }
     render() {
         return [
-            h("main", { key: 'f0027441bfef78c171ba61092be17b58234f9441' }, h("fieldset", { key: 'd6d0987729d19296ae9bca9108b51b02d4cffe12' }, h("h2", { key: '8bf8fb79a2962ee6f57199fbca073d3d6108bfaf' }, "Smoothly display"), h("dl", { key: 'a611e082683866edf1aed27253cc139cdfae914d' }, h("dt", { key: '57ab7bbd1eb80eafbac37682b663cb14fbc0afc8' }, "Duration"), h("dd", { key: '0ff01664956d694165bfb366cad10146ba748f92' }, h("div", { key: 'aa1e91e3c22cb273d96ae15597b31c6ce6d826f3' }, h("div", { key: '4a51be0b383303cffad2bf958865e943a86eb35c' }, h("smoothly-display", { key: 'a69cc7be176c850fad91eb13feec5ad81f867e81', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), h("div", { key: '49df16cc21484f0b58025cc55fdcb4f4316db50f' }, h("smoothly-display", { key: '865bf3acaced59068f8dea2c22c76cd6906f3d14', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), h("div", { key: 'afcb613ed8ee92fc23d2adc1f4a8019840b137a4' }, h("smoothly-display", { key: '21eeba322f8ed8b24160c7c4c2cf042c3d942762', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), h("div", { key: '9a08731fcf35e804463fba62e505fe23f7971b2d' }, h("smoothly-display", { key: '39c432749ba1147433b0a4703030c872bfc17b15', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), h("div", { key: 'e2fed37cd00090311d04917160996fb6c9d7c202' }, h("smoothly-display", { key: '166fd0d523c1ff7000d21232b3511d46ff642104', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), h("div", { key: 'f59fa2cf4af468c0efd8d282559458d3048bb54a' }, h("smoothly-display", { key: 'aa40b1c43f5cfe22dd0bc0e6101db78a92c53621', style: { display: "inline" }, type: "duration", value: {} }), " h"), h("div", { key: '7e15d974058f15a3c42ec1d12ada1673beb1d6b3' }, h("smoothly-display", { key: 'e2b4163ee526312211aeb628b90b8eedcbe7e6f0', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), h("dt", { key: 'bc84f7802f65b61b07be817c9aaf94e3f61ae84d' }, "text"), h("dd", { key: '57f8d7a74ceac39909d10cbe481b3971f2ecdeeb' }, h("smoothly-display", { key: '642c8f1d612e0debcca8bd7b201bd365af96cfa9', type: "text", value: "text" })), h("dt", { key: 'f935e44f241328df81553f11839f5c8ffbc10c9e' }, "postal code"), h("dd", { key: '9e330664f885f7219842624d3f38bcb196477f01' }, h("smoothly-display", { key: 'd9b64e1a659e44ea742cd4eaaa957568fb1e0d34', type: "postal-code", value: "752 31" })), h("dt", { key: '5dbf58da2741a7c0b23fd504b2f98e136f494949' }, "password"), h("dd", { key: '4b649f79b01043826cfb8daecc643fe252fab4a8' }, h("smoothly-display", { key: '0a3981b795879dc97bfb89c0ba24956742ce239c', type: "password", value: "password" })), h("dt", { key: '65971d774fbdbae74ffc9fc96668ba012701ea71' }, "email"), h("dd", { key: 'fb22a5ca78f8b003de2dced241e5525fe42c5fde' }, h("smoothly-display", { key: '2512acf71be746c2fcc2501451ce785bdbd01455', type: "email", value: "test@example.com" })), h("dt", { key: 'b89f91cecf9c963edd07250bf2a065a3da64837b' }, "price"), h("dd", { key: '6a2bf5ba95dcc27acc8629a4f3bd4ab8662a0365' }, h("smoothly-display", { key: 'e591993c95b899fa4aa976cfe3539e0e723e6ef3', type: "price", value: "13.37", currency: "SEK" })), h("dt", { key: '207e97191f04e431c5e511eb85fdbcf63572ffe8' }, "price without decimals"), h("dd", { key: 'a6420d4a9a8cf3d608e07999dfad03b6fccc43a9' }, h("smoothly-display", { key: 'b0e5761078c10a07616023a95b10765b86dd5a82', type: "price", value: 200, currency: "SEK", toInteger: true })), h("dt", { key: 'f3a1266f7e0610880115e0ba93f13cac57e8d038' }, "price with decimals if they are set, otherwise no decimal"), h("dd", { key: '601c5f79148527505141bc3a1995b068998190b6' }, h("smoothly-display", { key: '349b706f45c15353a5247608d9b5eddd5d514fb3', type: "price", value: 200.2, currency: "SEK", toInteger: true })), h("dt", { key: '46331fe9a8124257ee9d5e9713b713831e1f615f' }, "price with decimals"), h("dd", { key: '317c8ca991740a994b59830c94e8393bc01d3f07' }, h("smoothly-display", { key: '5ec0d759372c9fb36fd2149aae7953600cc67726', type: "price", value: 200.2, currency: "SEK" })), h("dt", { key: '60a3e8e4672dcd6050d79937f297404e6e84a04a' }, "percent"), h("dd", { key: '572df0ef47bb43bef3f15695ce774e3a205e27f5' }, h("smoothly-display", { key: 'b740dabdd447e609096a9587e70d04ae069f6ef6', type: "percent", value: "42" })), h("dt", { key: '9af3e07c435f10b3159d9fb313237129246669a4' }, "phone"), h("dd", { key: '31d3728c41a9cfad3440d4c5498f129b7be62b3e' }, h("smoothly-display", { key: '76bda1d9a032c2df5d10850ed34ec96c94524238', type: "phone", value: "0101881108" })), h("dt", { key: '339edc1575a020d74fe03f3dcd428352d905591f' }, "card number"), h("dd", { key: 'ef75e57c991ca5a1f886e2f6716d3475d6023e42' }, h("smoothly-display", { key: '1e694d62f751eb4c566b54ced5094030249eeebd', type: "card-number", value: "4111111111111111" })), h("dt", { key: 'c8cd5d87ac6ab7e778449f6e8528c3aeab576438' }, "card expires"), h("dd", { key: 'af791cca99d6ea340884d8becdb78c4e11a6a40b' }, h("smoothly-display", { key: '5e2c05c3f80af6f427c6bd4842d72db8c5dab3e9', type: "card-expires", value: "7/22" })), h("dt", { key: '6a9433b4e2048cd4de63a47c772ee6418d3acf21' }, "card csc"), h("dd", { key: 'd7e5f17ce69a12146a8ad54c981e59f5f69ae4da' }, h("smoothly-display", { key: '24a9c38b6c032aa554974376e13cb2b8ec0b84d0', type: "card-csc", value: "987" })), h("dt", { key: '48f5cac78c36bb5136f51ba66a6d0f07fb1a895f' }, "date"), h("dd", { key: 'f5de472e757607197287bb40299df53029677995' }, h("smoothly-display", { key: '3c3f43d0b929ab99bf66b7e6d2652480272e199b', type: "date", value: "2022-07-07" })), h("dt", { key: 'cc7cdb8e399598175e0772b23a7f7426eb6eb9dc' }, "date time"), h("dd", { key: '9ece32e9caa673525dcf71b86cd45b061d9827d9' }, h("smoothly-display", { key: '8c34dc9335a1dcd809368d490e38b366e0cbad98', type: "date-time", format: {
+            h("main", { key: '570a8cf525b8d883f2c226fd9d1f24ef9d2a7bac' }, h("fieldset", { key: '9daf4d2a5ff6c3924c09186d0b73c8dc11ef2354' }, h("h2", { key: '01bf90a47c56197346494bbc1992edf5ab9d8b2e' }, "Smoothly display"), h("dl", { key: 'dd5fbdf6e596430cb0a18482b50a8d3ef46cc2d9' }, h("dt", { key: 'e97f6d69f565560e54956acc47c61e676db32b26' }, "Duration"), h("dd", { key: 'b3ec7065ba3cb6e1832cf22f329964bc3a983d09' }, h("div", { key: 'db46dbf07917dd784f0939803fcb97f80d4ab0a7' }, h("div", { key: 'eda3a232df465a291734a9e1e607f779727928a2' }, h("smoothly-display", { key: '894097c909f8c1b0dd276696db72daadf3365aee', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), h("div", { key: '0f258be9133609201671eb993a290b2be1ee8d2b' }, h("smoothly-display", { key: 'd98834b9c367bbb650e8e933be3ee20b93df8082', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), h("div", { key: '2dc0241b935f3d45f812fe0175731954c8e0b983' }, h("smoothly-display", { key: 'cc4c171af5aa79cf5487a8a131430bacc5248c98', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), h("div", { key: '19ff8935bb3454d538b0312530d32ff63dfb3034' }, h("smoothly-display", { key: 'e3c7ba72956c3735bc646773cf30eb78c2c4e75b', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), h("div", { key: '40d13934f818da8df03dd4215b5176cdf0089c20' }, h("smoothly-display", { key: 'f03306bc6cbd65f3ee50ce6fb57c66b2af229a83', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), h("div", { key: 'f0d127f6a00ed1c06eb36fdfa1b809354cb139ba' }, h("smoothly-display", { key: '85ea4fa490947ec5bf9810fc5e5677550b507f7b', style: { display: "inline" }, type: "duration", value: {} }), " h"), h("div", { key: 'f60948619c1fcbad63e4af03f282ff3366f1ba76' }, h("smoothly-display", { key: '846841ac1b7cd206a2a95034db25a3059dccf890', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), h("dt", { key: '3db393fff9fd7740683746088e884d83ac51e1e8' }, "text"), h("dd", { key: '2bd200acca8afd5cf72dd94294e4438e811ac411' }, h("smoothly-display", { key: 'aa88f3c9ed96edff41c91b4ed2206a04c90ed6f4', type: "text", value: "text" })), h("dt", { key: '81e183489b4fb749823c25b2a50ced9621aa432e' }, "postal code"), h("dd", { key: '390dd9916fcf42cb15a48727082a27550e46814a' }, h("smoothly-display", { key: '7e80d1d0b8746596448ca50c356e4afbe7d6f276', type: "postal-code", value: "752 31" })), h("dt", { key: 'c0d0dc8205d93cb8479713bdae1208e2847e477a' }, "password"), h("dd", { key: '0ea85f4699579f4b24f35f59775d7dec43978e5e' }, h("smoothly-display", { key: '9779849ced3842513a5c7d5d37cd20bf1f01f244', type: "password", value: "password" })), h("dt", { key: '5143b3ae0e39eb416c344a98b45974c2ad480eef' }, "email"), h("dd", { key: '8c25c7f73f1f4ec38cea3d7c520dc037df7b2224' }, h("smoothly-display", { key: '53a354324dea186db81a5b59bf75e222db33e56d', type: "email", value: "test@example.com" })), h("dt", { key: '469bd6001f5ad150ea815bb6e89a29eda53b5b77' }, "price"), h("dd", { key: 'cde7a755ca3ff50a5b0cea8eb4a1dae6aa5b253b' }, h("smoothly-display", { key: 'bb68a44ffd892b48277aa20a95f5e863680b4fa3', type: "price", value: "13.37", currency: "SEK" })), h("dt", { key: 'aff590f97d41ab80c38e7ecaba3e8023fd8ea734' }, "price without decimals"), h("dd", { key: '39a40abdaae41f74fa5e52be77cbe1045965e1dc' }, h("smoothly-display", { key: '1c653914e801725457fb55bb1b70ed56d991dabb', type: "price", value: 200, currency: "SEK", toInteger: true })), h("dt", { key: 'be366012d28535a04fa54216d29fa7835bdd789b' }, "price with decimals if they are set, otherwise no decimal"), h("dd", { key: 'f40b67c170fec282518c59179189b4f262a12804' }, h("smoothly-display", { key: '52ba5c8026d562f40ac62cd14fe1cf67b5d0c641', type: "price", value: 200.2, currency: "SEK", toInteger: true })), h("dt", { key: 'cc1048ee5cb4ef42c4396009ccb085e7ce8c3eca' }, "price with decimals"), h("dd", { key: '4814a19946eb610096f1aa76236971ca4e7d52f6' }, h("smoothly-display", { key: 'cb4cbda427c7a488bbba0c978d91a80683b9d8cb', type: "price", value: 200.2, currency: "SEK" })), h("dt", { key: 'deb381d3caec587043c0f58a58d06406f215f3e5' }, "percent"), h("dd", { key: 'afbe0bc5aa167605f50ec765a999432856019082' }, h("smoothly-display", { key: 'ffb1aee2a313b9f6ab71d42ed937619423095293', type: "percent", value: "42" })), h("dt", { key: '381bc0bb2857f9cc3b0e1b9e2cd439e35106f24b' }, "phone"), h("dd", { key: '96c9e0fb69de5004ba8666939b932f42db444db6' }, h("smoothly-display", { key: 'a242f3011ff04f9f02791b40bc0c042d9b95e087', type: "phone", value: "0101881108" })), h("dt", { key: 'ddf64889ff408a199d11b734ee2d41f15c619ace' }, "card number"), h("dd", { key: 'a6d6b94ab7b1c53b35622fb1e063b1293a637cf6' }, h("smoothly-display", { key: '8dbdba91c26bd0f1b4f923f76589b08f5c032f65', type: "card-number", value: "4111111111111111" })), h("dt", { key: 'ef7ef814a8cf29fec2f974efd32f040c3d725cc7' }, "card expires"), h("dd", { key: '84321e803af55ddd5469ef3068fd2eb8d946420b' }, h("smoothly-display", { key: '20651476830684d2a40e911a40fc00fe7f1ffe7e', type: "card-expires", value: "7/22" })), h("dt", { key: '7aef10fd17c205805fe7f5e790d12c2b89247a77' }, "card csc"), h("dd", { key: '00eca296571bf49a6c338c13a939d6f3155d4a08' }, h("smoothly-display", { key: 'c18662e291199765f4278d54e595588bfc3d6f1e', type: "card-csc", value: "987" })), h("dt", { key: 'e92d089a639a1e3357a6d39d2e499fff6bd7c2d1' }, "date"), h("dd", { key: 'f3cc2aabdec6942c8eadc2278b7a42adae09168d' }, h("smoothly-display", { key: 'fcd502f245a1c814faa093d82bb101182b3dafcd', type: "date", value: "2022-07-07" })), h("dt", { key: '81b8cbdb349df1bd1e1f84cc4bd006d7f2549c19' }, "date time"), h("dd", { key: 'eb5a64ea635751c62366292ce0ca23d125ad17ee' }, h("smoothly-display", { key: '039d66c0457be7e82b999a9e4c0672deee8fbe90', type: "date-time", format: {
                     year: "numeric",
                     month: "short",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T02:02:02Z" })), h("dd", { key: 'bffb607f7fff4cbd83976db7ebb4b6d047181749' }, h("smoothly-display", { key: '9532c7fc763f670bc7efdf790bba83498224fa2b', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), h("dd", { key: '456d8713e2e366e0efd48c4b0eca946a780bcd93' }, h("smoothly-display", { key: 'a6ea10ff87584dc5ce0146d6547b0948bb625e2e', 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" })), h("dd", { key: 'e69696c5cacfd2eb127822b7372401baa4838c1f' }, h("smoothly-display", { key: '24dd4186d2e39e2ec123f31155e7ec5e9d473237', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), h("dd", { key: '0fc3da083c35e907cb4c48645ecc7a3e4a4455d7' }, h("smoothly-display", { key: '49485eb182ac66fb8f9940d3719c4059c3897dc4', type: "date-time", format: {
                     year: "numeric",
                     month: "2-digit",
                     day: "2-digit",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: '57656dda4f48f82ea0b089be6613076de5c08613' }, h("smoothly-display", { key: 'f8dc33572b80480deb71b2333d4ccb28a4d4b556', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: '40a262a2fc34177b63b7e2969b3b59a5de602861' }, h("smoothly-display", { key: 'b7f00e769f842ed9ea6a630058cd01768ec2c0ac', type: "date-time", format: {
                     year: "numeric",
                     month: "numeric",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: '8e06ce3ce8c92fc344b7d0152667ecd3de933ef0' }, h("smoothly-display", { key: 'dfe29b01b180372cb1bac5702e0ead534ad59ad5', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: '416f2e6fac955dc4a7a08b543186a5176b4359f2' }, h("smoothly-display", { key: '42baa9b698ae41db2a96203f11439217b4dd0598', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: '9fa5bf6bcc7f11f24c92ea73235fc2c8fd1a9fa5' }, h("smoothly-display", { key: '9dc5fc24afb8952b6556c2f4405e47270f7d96c5', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: '4a3173f9713aaa4371ab13ebd8577cd7a7935c95' }, h("smoothly-display", { key: '05904422b25f61dfc9f4325a4bb51b3d39a9aabf', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: '59783d4201fcf777c5e3635ad53934644eb68310' }, h("smoothly-display", { key: '58450e26b3eeab44be1c083f7f1320976dadf783', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: '0beada1376af2c6652c3dad47b08c1b1699b24bb' }, h("smoothly-display", { key: '9d1b738dd535da8a7e07b959b4e581cf0f2b93d1', type: "date-time", format: {
                     year: "2-digit",
                     month: "numeric",
                     day: "numeric",
@@ -4282,21 +4282,21 @@ const SmoothlyDisplayDemo = class {
                     minute: "2-digit",
                     second: "2-digit",
                     timeZone: "Europe/Stockholm",
-                }, value: "2022-07-07T12:15Z" })), h("dt", { key: 'fa0fee5e4d57648ef7379fcab25b1c861df29572' }, "Display JSON"), h("dd", { key: '24e8222807dd1a65b3d0b4d49e4e9b7f2f63ca45' }, h("smoothly-display-demo-json", { key: '3bfc573006f805f99a9815efd69bdb4cae7da5b0' })))), h("h2", { key: '526bb69d7ad95db53610949dfdfb1a8335d0d734' }, "With labels"), h("dd", { key: '42b3f4d34abb22ce98f7421c04076af3cf9592d7' }, h("smoothly-display", { key: 'bdfcb7554a39ed2f937ef2acc613f07e863b4460', label: "Today", type: "date", value: isoly.Date.now() }), h("smoothly-display", { key: 'ca523fd7b87353ad81a0fd6747626e3313dcd803', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), h("smoothly-display", { key: 'f185521dbf646db7f2dbd0856d5b51c19cea0f7e', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), h("smoothly-display", { key: '2b11b984ee41bcfd8651422099dd0243dea5c1f9', label: "Logs", type: "json", value: [
+                }, value: "2022-07-07T12:15Z" })), h("dt", { key: '6d2aac61ed9fad093c2f19c2ec4d4de32b12e9a0' }, "Display JSON"), h("dd", { key: '2215884fa898511c90acf6997f8e20aea4c0ea0d' }, h("smoothly-display-demo-json", { key: '85cecf5eeaa416c9baca4a7876e348b54a09dbcb' })))), h("h2", { key: '56ae1be90a6bf9a152118dab9fec7d04b2a9b8e4' }, "With labels"), h("dd", { key: '4689634be5c50bafa97e8a08baee4b85b0a621ec' }, h("smoothly-display", { key: '14067ba1153408f0d11b02a76c5685b2c1f4a374', label: "Today", type: "date", value: isoly.Date.now() }), h("smoothly-display", { key: '4ba2105f9b3e139fac91bab03b9640766a18814a', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), h("smoothly-display", { key: '138eb84408cb4efbc29f43ed1e3f9f71539dfac8', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), h("smoothly-display", { key: '2bddcb3e8ec54e29fc53a8ff4213cd157b34c8f1', label: "Logs", type: "json", value: [
                     { type: "trace", message: "Hello" },
                     { type: "error", message: "Oh no!" },
-                ] })), h("fieldset", { key: 'ef8bc44b54f0a98227581bcade3330debc22729c' }, h("h2", { key: '0dee7b56295ee035a7459a687e95bdcde727e1f7' }, "Test of different kinds of notifier"), h("button", { key: '88076dc7ef7db955ba07bad008e3082c9c3177e4', onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { key: 'f07659e51be16b4019d2a4759e62ef7a1e526c32', onClick: () => this.noticeWarning(Notice.succeeded("This is a test success notice.")) }, "success"), h("button", { key: 'ba7ae24c1f495c0babea9c9c4a5219129d16b5a1', onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { key: '6bec07e40f8cdf258d1ac09bac883570b6599e82', onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { key: '30284847af0b9196965d40ef9a1e252fb9c6cb93', onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), h("fieldset", { key: '3d00362adfdf13d785a824e7a37151bea10f0991' }, h("h2", { key: 'ec4235bbe8d792aefe999743de12f8f1657e6789' }, "Smoothly spinner"), h("div", { key: '041c2d303ad7de8e19695eaca34461b08af1f8ef', style: { width: "fit-content" } }, "Large", h("smoothly-spinner", { key: '7899818b65ed91864b3a566a06c652be320779ee', size: "large", style: {
+                ] })), h("fieldset", { key: '830ecceb2f6904425d60f24ab37e046e4d147b04' }, h("h2", { key: 'dbab367e69309f7c29a3d025d585afbb2fa88965' }, "Test of different kinds of notifier"), h("button", { key: '187872d0e82b1389961e3d41a0998a0814f5e086', onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { key: '3f2ee3e8052834171ee2878dc3dcbd58d0fa6ed5', onClick: () => this.noticeWarning(Notice.succeeded("This is a test success notice.")) }, "success"), h("button", { key: '678349d8e5f0ba8b237ef1f2cd7c2b2d04aafe14', onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { key: '06792c0fd16258c1a306a902c77e3600bcae0872', onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { key: '91ffa7d831eefbdce57ea2732ca884a3f30129ea', onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), h("fieldset", { key: '020e2fe53b4ee2f6b36a94863dbe2367d02e0b51' }, h("h2", { key: 'bb7cfda125e43c7f2afee6d7853318522456762e' }, "Smoothly spinner"), h("div", { key: 'a9f199a1fe6837f1546ee3aca45b74c399c23519', style: { width: "fit-content" } }, "Large", h("smoothly-spinner", { key: 'b3d78a677a1c3a62be4e448ac394096d62bc04e0', size: "large", style: {
                     "--spinner-background": "200,255,200",
                     "--spinner-background-opacity": "0.2",
                     "--spinner-color": "0,130,0",
-                } })), h("div", { key: 'd91ace8ab22931ac828734c330ec6bdffb7a1874', style: { width: "fit-content" } }, "Medium", h("smoothly-spinner", { key: 'e9c676eb8aeb5be8bbe3145fab86c5b8e5ce102d', size: "medium" })), h("div", { key: '4ddb83d57b7054a240391751efb43642f89af289', style: { width: "fit-content" } }, "Small", h("smoothly-spinner", { key: 'f81d12395407c33d35244069cb3f337c2fc68f7e', size: "small" })), h("div", { key: '442d309f4b04986e52cbeae4758377695fbdc3e4' }, "Icon sized spinner on button", Color.values.map(color => (h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
+                } })), h("div", { key: 'db5b5ce167113c8471537bc9604af1d31ef5f228', style: { width: "fit-content" } }, "Medium", h("smoothly-spinner", { key: '2eff854f0c518cb3928615775367c6ca768f1a9e', size: "medium" })), h("div", { key: 'b92410ef7ff77eb220554dce92ee9e5e0161b8d2', style: { width: "fit-content" } }, "Small", h("smoothly-spinner", { key: '4836644ee23ce44de781fc59b185c363d2d10e5e', size: "small" })), h("div", { key: 'a6b659783973f77a39e1643940fc97f77be1f7ad' }, "Icon sized spinner on button", Color.values.map(color => (h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
                     this.downloadingSpinner = true;
                     setTimeout(() => (this.downloadingSpinner = false), 3000);
-                } }, !this.downloadingSpinner && h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), h("h3", { key: 'bc6fe08536d2b7245fecb987c84112377532ff5f' }, "Spinner with overlay"), h("div", { key: '286d6fc3429a30743f362b89874b22db0c8f00d8', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", h("smoothly-spinner", { key: '05f8103a25be0a00235dabfaf17b17dd059f110d', overlay: true, size: "large", style: {
+                } }, !this.downloadingSpinner && h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), h("h3", { key: '8161fb53d9dfa5aba8bc164adcaf9e3daeeaa627' }, "Spinner with overlay"), h("div", { key: '8d4115c6ab8a24add137c06cde794937aba85b69', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", h("smoothly-spinner", { key: 'd04a2e77e759e5e094244922ec70fc150bac6858', overlay: true, size: "large", style: {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), h("div", { key: '88dae76ba4f26b5ba5dab790d030efd2740a9c3a', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", h("smoothly-spinner", { key: 'ea74d644a344b2347888a609a72b20ac5c8651df', overlay: true, color: "secondary", size: "medium" })), h("div", { key: '64d9ade2587010213832e33830c5eeca985c7480', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", h("smoothly-spinner", { key: '494f01fde3c846454bfa32681895b2253db373a4', overlay: true, size: "small" }))), h("fieldset", { key: '6629bd3d32263860e046c756bd0f392c51f25be0' }, h("h2", { key: '33d110238af08bfc80a06d55b93cc128cc3a4d50' }, "Smoothly summary"), h("smoothly-summary", { key: '5439e9671227547e17576d921bd4d193184310ae' }, h("span", { key: '5aa376de959eac730f1731a9d1abaa7c9b2906e2', slot: "summary" }, "Some title"), h("smoothly-summary", { key: '0f3c9220d9317c54c53037b25b92374ee64b8b3b', slot: "content" }, h("div", { key: 'aa1dc04d09749f3c125eac38fdd59b15f990871e', slot: "summary" }, "Some other title"), h("div", { key: '327cbe85e798cbd7b5a6a96acb0d62db4486b6e2', 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."))), h("smoothly-summary", { key: '34df179fe11e57724c204fc7faa92b6dd3d2c312' }, h("div", { key: 'bc7f0348eba69ce4b5ec090c3132152829cd2bdb', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", { key: 'e46943da2844edc16d8c93e99f2a421668af34cf' }, "Person"), h("smoothly-icon", { key: 'b677ed1036743b2994003c0b4d8573124fa30407', name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { key: '8a22ac8f00f37ce9b4d90978d329daef975a2856', slot: "content" }, "Some person information.")), h("h2", { key: '52120c774608c56017e1b8479631be4019449516' }, "Label"), labels.map(l => (h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), h("smoothly-label", { key: '16fba37231ff5ef8859a05e1d7b138ce27ba2769', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
+                } })), h("div", { key: 'e284851987d3e475d72dd68e5465ff2b54e38710', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", h("smoothly-spinner", { key: '29d593da93d2e11ac520650d64af1de6728e837e', overlay: true, color: "secondary", size: "medium" })), h("div", { key: 'bcc6e156596f946964173cf9a100dce8f3f9adcb', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", h("smoothly-spinner", { key: '57498aeaf7c8690958a1f42d80220bf6ba01a069', overlay: true, size: "small" }))), h("fieldset", { key: 'ed65a407dde854768a1934add1d88a40d99f20c5' }, h("h2", { key: '3f0a8eba2588ac878f02104f60fbc6072173c480' }, "Smoothly summary"), h("smoothly-summary", { key: 'b5538b3841957408ca25314d20789fc87db9f89c' }, h("span", { key: '0a66c656b75981dd493f9288522c914c6aaf3177', slot: "summary" }, "Some title"), h("smoothly-summary", { key: 'd7a1064544e0f530ee18fc98e5dbac110f7aad79', slot: "content" }, h("div", { key: '7dc9a5d35ddd789ef54fe021ecf9b784793a3074', slot: "summary" }, "Some other title"), h("div", { key: 'b0b0000431972ce6510eeb966d35f90f98baa372', 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."))), h("smoothly-summary", { key: '7eac5c136d5ed3c09c53f676991fb957bdea50f2' }, h("div", { key: '45239a377a7ae5b15baa3fefaca04f965bc3dd80', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", { key: 'aed615a5e1dcfece04dc29d3381e706e89328025' }, "Person"), h("smoothly-icon", { key: 'bbdbee4093170b788015686e6ac31cb75adfb3c4', name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { key: 'dcbe807176c6c8c0a642b8351487c63a2a31d1d1', slot: "content" }, "Some person information.")), h("h2", { key: 'b939b82ef761060a6de4190fd80e5aec1d6c6938' }, "Label"), labels.map(l => (h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), h("smoothly-label", { key: '9dd6878b3e540f24dee8fc99d6834a6c2ed85744', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
         ];
     }
 };
@@ -4323,7 +4323,7 @@ const SmoothlyDisplayDemoJson = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'c459dfb0ab28ba6c9ec1be1f334398200800cf56' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (h(Host, { key: 'dd76081f4adf3ae47e0015c2f17b43e50c6ace15' }, [0, 1, 3, undefined].map(colapseDepth => [
             h("div", null, "collapseDepth=", colapseDepth !== null && colapseDepth !== void 0 ? colapseDepth : "undefined"),
             h("div", null, h("smoothly-display", { type: "json", value: json, collapseDepth: colapseDepth })),
         ])));
@@ -4355,7 +4355,7 @@ const SmoothlyDisplayJson = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h(JsonValue, { key: 'dc8824ed92fdfde3a318f0449eb531600678000f', value: this.value, collapseDepth: this.collapseDepth });
+        return h(JsonValue, { key: '939a93b45e7f0f021c361331d011e7cb61627fed', value: this.value, collapseDepth: this.collapseDepth });
     }
 };
 SmoothlyDisplayJson.style = styleCss$17();
@@ -4384,9 +4384,9 @@ const SmoothlyDisplayJsonObject = class {
     }
     render() {
         const nextCollapseDepth = typeof this.collapseDepth == "number" ? Math.max(this.collapseDepth - 1, 0) : undefined;
-        return (h(Host, { key: 'd8c5fd222b4cbe393ccd7e5fe13ec04bff9c5614', class: { empty: this.empty, open: this.open } }, h("span", { key: '56070a9821ec22233a1a53614bf062234b5e1645', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), h("span", { key: '9fb7f10b2c330e486270e875bc3adff84066aa23', class: "content" }, Array.isArray(this.value)
+        return (h(Host, { key: '9c9b5a46433770a7d56343c4bf723163e8a56475', class: { empty: this.empty, open: this.open } }, h("span", { key: '836957462d65b5c136231bd3867f7da169ecb343', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), h("span", { key: 'ef132e20317fb0b1b3f38442fec7bd2731ec5c43', class: "content" }, Array.isArray(this.value)
             ? this.value.map(v => (h("div", { class: "indent" }, h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), h("span", { class: "comma" }, ","))))
-            : Object.entries(this.value).map(([k, v]) => (h("div", { class: "indent" }, h("smoothly-display-json-record-key", { value: k }), ":", " ", h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), h("span", { class: "comma" }, ","))))), h("span", { key: '13fc780163726d1c6b03c4657ed7dd303fe4aca9', class: "close-bracket" }, this.closeBracket)));
+            : Object.entries(this.value).map(([k, v]) => (h("div", { class: "indent" }, h("smoothly-display-json-record-key", { value: k }), ":", " ", h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), h("span", { class: "comma" }, ","))))), h("span", { key: '50bed891b85fc5d407cad5e8ae1d53dcf56551d2', class: "close-bracket" }, this.closeBracket)));
     }
 };
 SmoothlyDisplayJsonObject.style = styleCss$16();
@@ -4398,7 +4398,7 @@ const SmoothlyDisplayJsonPrimitive = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h(Host, { key: '0e8d894d5b03272d4df6b648eef111b4efe5b236', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return h(Host, { key: '017bbc369b1e8ff42466411a5b28b52c5661b740', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
 };
 SmoothlyDisplayJsonPrimitive.style = styleCss$15();
@@ -4410,7 +4410,7 @@ const SmoothlyDisplayJsonRecordKey = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h(Host, { key: '2a03b569bedb742a25108741886a5a781f31a703' }, "\"", this.value, "\"");
+        return h(Host, { key: '67d6629e71ecde01829b6279188bc7332c3d9379' }, "\"", this.value, "\"");
     }
 };
 SmoothlyDisplayJsonRecordKey.style = styleCss$14();
@@ -5463,7 +5463,7 @@ const SmoothlyFormDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '1ddc9511911663c0c6732b9e9b00b3e68d008216' }, h("div", { key: '8716afd31e7b741071f8fee4b939c7c1a2067343' }, h("smoothly-form-demo-all", { key: '0856d387645fdb66fddb050be10ed906fde59b58' }), h("smoothly-form-demo-pet", { key: '4f2b563802b34dcfb8905bcaedd5d6c1d9a53e40' }), h("smoothly-form-demo-card", { key: 'c362f29b57a6b321f0db6cbb4088fccdf1ba4ac7' }), h("smoothly-form-demo-login", { key: 'a14e189b9455e4ca98911c987f5082c2d52e14ef' }), h("smoothly-form-demo-prices", { key: '1244782f93a5e5cca8af5d076d6adf594c22eb65' }), h("smoothly-form-demo-typed", { key: '15e40ae537693e1c19ddce3c50311718aa76c531' }), h("smoothly-form-demo-transparent", { key: '2ecde43fd255a80832e8302a7ffbdc2e4c1308da' }), h("smoothly-form-demo-date", { key: 'e31bcebea1a06295cbcb5c3cf09f24e1e4678244' }), h("smoothly-form-demo-schedule", { key: 'c82d53e933bce5540f10ef60fb3d17b4566abd06' }), h("smoothly-form-demo-date-range", { key: '4789cc150fa75b61bf578777cc86db216d75ca13' }), h("smoothly-form-demo-controlled", { key: '451ad913671046be1255752b103066eeac96eae8' }))));
+        return (h(Host, { key: 'e6b40ea5e535c8fd4fbbe65aa060d0ba061f5a3e' }, h("div", { key: '848116c5bc43a4a5adb20ecf3f66a66b050e529c' }, h("smoothly-form-demo-all", { key: '44179c77bfd53bfa4f347a465a3f4000d4d94b08' }), h("smoothly-form-demo-pet", { key: '356b17321dc0f11e63c8dd4846c4e1d91c7b6b5c' }), h("smoothly-form-demo-card", { key: '2584856236b89b5818551f8826056c0a14ab6356' }), h("smoothly-form-demo-login", { key: 'dacc85e611dec4115fefc49f63463912b6718285' }), h("smoothly-form-demo-prices", { key: '500d6d4c056c79113b16bd0f67bfe0ab562cd8d8' }), h("smoothly-form-demo-typed", { key: '933cce32ed4668eb28140c0c01c8238cdf1526d2' }), h("smoothly-form-demo-transparent", { key: '2a39b5d64aaff4d53d703c9508df3de18d5a6ad6' }), h("smoothly-form-demo-date", { key: 'fb0a6356529047d3bbbebd1b5980c2884be0cbb6' }), h("smoothly-form-demo-schedule", { key: 'c7eb48895c714d436f04544af9519a93232f76d0' }), h("smoothly-form-demo-date-range", { key: '6370bf9ca0671705777b03e6b985361d06ee9d56' }), h("smoothly-form-demo-controlled", { key: 'abf920dd124a8c43ce7818ba29bb1931a4b90910' }))));
     }
 };
 SmoothlyFormDemo.style = styleCss$12();
@@ -5473,9 +5473,9 @@ const SmoothlyFormDemoAll = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '26d8859a979a266ef04c3bb1fc37d43b7eb9eb02' }, h("h2", { key: 'dd96fffed9ca4ab9aa7a4d7c3b1ecd01ff354258' }, "All inputs"), h("smoothly-form", { key: '3f87a50316c1ee79f0c302f41e658f0c62145af3', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
+        return (h(Host, { key: '2b2e779dc35f9f35173515a6db59425654d7446a' }, h("h2", { key: 'b2423e5f45a6841b6fedcb7db17626ed192ee15d' }, "All inputs"), h("smoothly-form", { key: 'ac6fc721d22456edb5104ba9553c423d6f8bdebe', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
                 Object.entries(e.detail.value).forEach(([key, value]) => console.log(key, value));
-            } }, h("smoothly-input", { key: '80413fc035c38ec456921554da4ad0710f240ec2', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '9a05f6d391da8353b44e1f6d9497daa50b743373', showLabel: false, name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: 'd84f796d222470385097527e85a8a00fe054df87', size: "icon", slot: "end" })), h("smoothly-input", { key: '2701ab2d4dcba753fae952f20870b1c481393b3b', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '667c5a1b5985b222785f1bb60f74c76a95e07d6b', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '30b8830f31e272e8701115e7849ac8f4cf623a30', clearable: true, name: "radioFirstInput" }, h("label", { key: '784cacf4d835eb4989c07e836808704ed25de96c', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'c8ed8ee4bec740a9dcea2f381b6eed3045726638', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '936678767e2b83845e54fb0eaa116a5de111ae1c', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '15135664da662bafb7b2a6105086c67346e09bd4', value: "third" }, "Label 3")), h("smoothly-input-color", { key: 'f021a72c05dbf64358c33476b13954a6de8fc690', name: "color" }, "Color"), h("smoothly-input-select", { key: '73a13398b6a3ea07fe3801bf6e8c1e2990fcf579', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '70b07064df546094f42653d09020e44e147f3c4f', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '69ac138a4b2c5c2b13a1120c56defe5af15757ac', value: "1" }, "January"), h("smoothly-item", { key: '42b673e3da28c9694dceecec4b9363d23e2df256', value: "2" }, "February"), h("smoothly-item", { key: 'd77be546fff12aec5d24c5842acfff45e47b84af', value: "3" }, "March"), h("smoothly-item", { key: 'f3439c6da3efab944e5621c6b553cea248e8b903', value: "4" }, "April"), h("smoothly-item", { key: 'bc2bd414c62217c0c77bbd81ab047b989d92d116', value: "5" }, "May"), h("smoothly-item", { key: 'a76d3d4079774b087ea6e5332269d7ca18517a98', value: "6" }, "June"), h("smoothly-item", { key: '325023552ef5f72e80498b240a28854d924aa62e', value: "7" }, "July"), h("smoothly-item", { key: 'a565da7502901f6f1264ffb1ceb18a1a2b90f4ba', value: "8" }, "August"), h("smoothly-item", { key: 'a65416ddab3bc75c8a471a070a20091a564fa554', value: "9" }, "September"), h("smoothly-item", { key: 'ec61990c57155a52b80f057474a61c386d0b9a53', value: "10" }, "October"), h("smoothly-item", { key: '2aee5e3e54a18654df0657bf5915e57e8ec21fff', value: "11" }, "November"), h("smoothly-item", { key: '48931868850a9d640e92ad8c1533d20118382a85', value: "12" }, "December")), h("smoothly-input-select", { key: '60a31db453287a4fe94eb6f70c493e92f9d14585', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'df690c551ae8250a1f4d31f1b915029c6d7c5734', value: "folder", selected: true }, h("smoothly-icon", { key: '291f79a3573eaffce90bc9e8ea15f952029af89e', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'bdc8cff7786d6e08368f0561045180e169c85e3d', value: "camera" }, h("smoothly-icon", { key: '7aa0eff29200aa015782bd0e46ac46d11db51c10', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '17bd997576aac246bc1cb9fa3490ae930a176a1a', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: 'a4350c47d2b7c2521f78ddc66b0c46392e9174fc', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { key: '34c0a3695fda6f5c244febfe1ef0601fe8aad3e8', step: 1, name: "range3", value: 20, label: "Range" }), h("smoothly-input", { key: '4dad37c0545770b7a4e121ff059bd3ef6fcf1b0c', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: '6dc2ab3e61d071eba1ba37b6bfa9d69cddf163ba', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), h("smoothly-input", { key: '4f3c9643f4458da009f4abc44f4aa3bfed0b45c5', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '46d4a4160d3052e23c3c4404dbe79bb28afad4a5', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), h("smoothly-input", { key: '31c35b9176a80e7ee6d5c3fea1800f9f4ef6e9a6', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: 'a896c737e2109950144e1a3f2efa9210fba9c3c0', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), h("smoothly-input-file", { key: '01de90a10782f288c4d4fb4517275a7274b4dc92', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '5b7e453a366a439e2a97998f2eec3299bdb4eb25', slot: "label" }, "Profile"), h("smoothly-icon", { key: '53aa8eda968297d191c0afea3c11934f9c203377', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input", { key: '0825ce082e0c19387407d1d1de148f8d76b48757', type: "duration", name: "duration", value: {} }, "Duration"), h("smoothly-input-clear", { key: '9c7b8c2a145e5132a3b76cc9978e00683ab50759', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '6dc5f9607c6d81f53b87f850c22617c7bedc0e82', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '743cb42c1bdc976361e47a61b2b2964cc6f9604c', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '3d6cc6c98ef08841aadd30acf363964ad5c355af', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'f3f671351e1b356ce6c1dea41f14bc54535e076e', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+            } }, h("smoothly-input", { key: '4ec033bb9d51a7edc81cce2a1fde55bd21458318', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '8d6abee797b1c9b60efeb068c828453174401012', showLabel: false, name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '8caeac3cbd2290eaeeda549aea083d4499b960c5', size: "icon", slot: "end" })), h("smoothly-input", { key: '9a22277ed064a84b98a8c68c5f176758735748f0', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '2b45ff8ceaf71289d350e102d53123dc1c82600f', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '15856b48204c21b5f7318df22130e17aa3e14e8d', clearable: true, name: "radioFirstInput" }, h("label", { key: 'c94b6e0c185c8ab4325161a6e4249863017e5eb2', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'e978bde5ec519ab872eac3fb2a7d75b493099f31', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '3c30fd0d9b549f93c912759f8329570db377df79', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '2f3f773cade1c39fa2a121b24ba2778a42d9a9b0', value: "third" }, "Label 3")), h("smoothly-input-color", { key: 'f1e0b0b1e759c85c5de1f3a8af9818b41c692bdb', name: "color" }, "Color"), h("smoothly-input-select", { key: '7e1069ff0515224e17145539afefec11979ed88c', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'c42749acb44e6e7db99f4e7981f20ad0c09f1694', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'fdd0c90294bdf50d77ccf187777fdd804760b8ac', value: "1" }, "January"), h("smoothly-item", { key: '4f0c9d90f6909eaacccd5d385e317832f5a8b213', value: "2" }, "February"), h("smoothly-item", { key: '7779ea4af1f17cb48ef0249b7857262deb6c485d', value: "3" }, "March"), h("smoothly-item", { key: '5f15c3d32240bfb7c3b8d0a61f90599697b8e2a0', value: "4" }, "April"), h("smoothly-item", { key: '0952c95b2cf623f5573d70b5fa39b1c1ce008f16', value: "5" }, "May"), h("smoothly-item", { key: '1352e9245e39341d99d1bc8d051691b6b70dac37', value: "6" }, "June"), h("smoothly-item", { key: '7eddedff608a9148cb2b9c17f23ac2108b2190fd', value: "7" }, "July"), h("smoothly-item", { key: '627e81c5c7ddd5e1230b6eead20ac7932edbff9a', value: "8" }, "August"), h("smoothly-item", { key: '587bcf666e0bc92c14f5665f975563f06a419bac', value: "9" }, "September"), h("smoothly-item", { key: '896f05e2b88d7613cbc7f21b2aa4c58f1ae3938d', value: "10" }, "October"), h("smoothly-item", { key: 'fb539afa5edd3fe8391df5fc9d63fcb84940512c', value: "11" }, "November"), h("smoothly-item", { key: '959e9af2c479a299431f302041649bd86f5db331', value: "12" }, "December")), h("smoothly-input-select", { key: '64e83fb7dba19c8c21b5697eade0c7c5404d330c', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'b1a055ab1c73f28e0b49e626561aeff83efb124b', value: "folder", selected: true }, h("smoothly-icon", { key: '9ba931c9dd28c9f88168f5ab94fd80bc6f7f6bc0', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'acd791714a16504b5dc6a56f2fbfc89cf1ef4600', value: "camera" }, h("smoothly-icon", { key: 'd65e7beb3c74941bf494769126124ef79ce800d0', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: 'd6f2f199daf447bb0992ca8839b89e4e14166846', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '79885d84642626f7cba6d348d0044f2c8037007e', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { key: '7e791279c3b1bd2898d4c5e9e35ef9df76aa14cf', step: 1, name: "range3", value: 20, label: "Range" }), h("smoothly-input", { key: 'f7b07cef9882952dc91be6484c04ba459ef5db62', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: '44b404105c6d9aa19c7f14ac529e7b8ab3f964e9', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), h("smoothly-input", { key: 'aca9bc7aebd243f8e82158d1c60b7a69886e9a02', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '674b16d94949bcbd3fd4980b0b262ba580efbd5b', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), h("smoothly-input", { key: 'b25175ffa941b70d606a66db0f97e61547faf5b9', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '0113d466fc09afc4734a65500cdc20b06267d77d', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), h("smoothly-input-file", { key: 'cd15c39915ea43095e237f4f1952ed271f6e756b', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: 'a6138d70fbf10e1cf7cc4ad624422315d05c9619', slot: "label" }, "Profile"), h("smoothly-icon", { key: '5c53d92dd91402c2db9d57dc3dfd274cbea4b730', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input", { key: '497261e5f152c2af406dcc6860a6092df8bbe1af', type: "duration", name: "duration", value: {} }, "Duration"), h("smoothly-input-clear", { key: '7ba91aa6d31f7ff2ebbb3d07bd958610aad0fc1f', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: 'fd6a01b3f7417aa4074bbf2ca385cec9d437e429', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '3221d6e405488a7af0b917c99ee7f5acd9ca9f1d', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'e81eff668f6592a23f3f13262c123e97d1ca6c30', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '334bca3eb505ccd23c75efe1d3d66faa7638f4e0', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
@@ -5484,7 +5484,7 @@ const SmoothlyFormDemoCard = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '644dd5d2d56fea755d44d8cfed8c0b52d64883ef' }, h("h2", { key: 'f8be0372bf3f537f5e6cd66087aa9102a69fa4b3' }, "Card"), h("smoothly-form", { key: '1e006ccad98f0a73c50a312dc39f6c8f07a89f96', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, h("smoothly-input", { key: 'af0e0cf9d593a4b95e6d9ccf38cb504bcf30c907', type: "card-number", name: "card" }, "Card #"), h("smoothly-input-submit", { key: '8a68e341800be545d7c4b242e60fac52bd56afd5', size: "icon", slot: "submit", color: "success", fill: "solid" }), h("smoothly-input", { key: '031b83a8b2b9f261741c9b430599681ee0c90442', type: "card-expires", name: "expires" }, "Expires"), h("smoothly-input", { key: '75f8bbc9cff24f247f88dfd276bef1adaf478586', type: "card-csc", name: "csc" }, "CVV/CVC"), h("smoothly-input", { key: '5043b806ecf84bb31b4f713778336063a771ffa9', type: "text", name: "name.first" }, "First Name"), h("smoothly-input", { key: '4314de22f36b48c796deec9258e71e282a434bbe', type: "text", name: "name.last" }, "Last Name"))));
+        return (h(Host, { key: '12a00d87271d0af126cadbad9443b858e477561e' }, h("h2", { key: 'b5f4db995901068b60a0005cd99e81c818ea19cc' }, "Card"), h("smoothly-form", { key: '327812f8a2d381d9806338675532029d4f42ce59', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, h("smoothly-input", { key: '3379bf37a7333b1599aef7c0362e3e45af69f99d', type: "card-number", name: "card" }, "Card #"), h("smoothly-input-submit", { key: '66f625510bd3f7f2bcd67671e39a55e4009c6f40', size: "icon", slot: "submit", color: "success", fill: "solid" }), h("smoothly-input", { key: '2a050bd1808ed0b2b75ba5a62581e942788d115f', type: "card-expires", name: "expires" }, "Expires"), h("smoothly-input", { key: '4ed6ae1574aaf02fde846bd23dc55782c0f066ac', type: "card-csc", name: "csc" }, "CVV/CVC"), h("smoothly-input", { key: 'd0e62a606289683f604016a935564f8602daa041', type: "text", name: "name.first" }, "First Name"), h("smoothly-input", { key: 'bfbd0c1a13053aa98d9a93dcc06ceae8b933561e', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
@@ -5522,7 +5522,7 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: '2131171a287333757dd2e257272b2151f445d00a' }, h("h2", { key: 'ae5d57d207b35d5d25568cb929551076b02b29bb' }, "Controlled"), h("smoothly-form", { key: '206b0c12bade21ffe5ec4357c27a11612adf99f7', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input", { key: '9f607b8f55df8931f04e2df1746bc5b8f239700c', type: "text", name: "name", value: this.name }, "Name"), h("smoothly-input-select", { key: '5fe97133fc282b8a428ba9d1d28e27f5642857d3', name: "currency" }, h("span", { key: '76ca8e412897900e1054a70c2a2645ad3587d55d', slot: "label" }, "Currency"), this.currencies.map(currency => (h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '3099df2a407af93f416da0ff8e6093df00c49467' }, "Dummy"), h("smoothly-input-month", { key: '1c5c73a802f6a8e90b8163e8fb9b652e0ba073f6', name: "date", value: this.date, next: true, previous: true }, h("span", { key: '71f40ad3683c72e71366e0faa9750c536c82e05a', slot: "year-label" }, "Year"), h("span", { key: '71888a27f0f94e796c983a4f41c6a679be7d66fe', slot: "month-label" }, "Month")), h("smoothly-input-edit", { key: '1f2aba348ed5559946c30abede9e4656c30d887b', slot: "edit", size: "icon", color: "primary", fill: "default" }), h("smoothly-input-reset", { key: '6800fe757dab08be1ddb7c22e266b9093ffffefa', slot: "reset", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { key: 'f0c595bc65fa6207cd01792e7fa782e3a59b8464', slot: "submit", size: "icon", color: "success" }))));
+        return (h(Host, { key: 'be70b1b758bbe11772a1ba8ba7dca4f5405ea651' }, h("h2", { key: '68973a8cf2107ecaa72790a917cf14191cfd0fa9' }, "Controlled"), h("smoothly-form", { key: '4da1c66f41c89d78c180b55b3ae1df15190eae0c', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input", { key: '201cb10b36c39d6a5a98d456459b82ef9d3f0a7d', type: "text", name: "name", value: this.name }, "Name"), h("smoothly-input-select", { key: 'a434d27014de8a28230f7bc60a3b5c6b706005b6', name: "currency" }, h("span", { key: 'eefb198ba0a863dd7c6ff37162383522c722803c', slot: "label" }, "Currency"), this.currencies.map(currency => (h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '4813e2c249bd21afc6a2c1a6ab78793b49fa2d68' }, "Dummy"), h("smoothly-input-month", { key: '7225723a71776a7d9d88a21361443128a5893d42', name: "date", value: this.date, next: true, previous: true }, h("span", { key: 'be0572c78ce576807a459738426416e941a997fd', slot: "year-label" }, "Year"), h("span", { key: '99bb6cf5516bccb1721013e87ca2bec463341983', slot: "month-label" }, "Month")), h("smoothly-input-edit", { key: 'b7be05116d563ee33665f502c45bd01d9aaf61e1', slot: "edit", size: "icon", color: "primary", fill: "default" }), h("smoothly-input-reset", { key: 'bf423459f9b8717e9de26e4c900d054ea90baf7a', slot: "reset", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { key: 'fd42172c00aae5c33f2b22e3d3bdccb6e71ec294', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": [{
@@ -5554,7 +5554,7 @@ const SmoothlyFormDemoDate = class {
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: '5784da3e53561844b6425a7e8577660a86c61f1a' }, h("h2", { key: '950410300b6a7f87362a139c35399856dc547080' }, "Date input"), h("smoothly-form", { key: '1197555e126930ab2acd0810309e3114b7644fee', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date", { key: 'beeb9a1969cc330fd1e9c5a01a2d571aab854f87', name: "date" }, "Date"), h("smoothly-input-submit", { key: 'e9f8448d0442b0dcaf4a793cd6f86c4156dcea04', slot: "submit" }, h("smoothly-icon", { key: '998ef6127d165df5a08cfbafeb5ba64d9e87921a', name: "checkmark-outline" })))));
+        return (h(Host, { key: 'f6a0bf1656158091b0b9d6647707ec6c919cbf66' }, h("h2", { key: '210f22f5cbef0a441d7863764a0b6665afecdce1' }, "Date input"), h("smoothly-form", { key: 'eea3a74d6591f0193d8043d552a506868af1721d', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date", { key: 'b9fc6aca0411799a7dd952a4ae27fff20bb7a085', name: "date" }, "Date"), h("smoothly-input-submit", { key: '9abd42160b4efd43ec4e976bd143871437d2d08b', slot: "submit" }, h("smoothly-icon", { key: '690f42105cb25db4275ba0c03bdaa6a16b24faa3', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDate.style = styleCss$11();
@@ -5582,7 +5582,7 @@ const SmoothlyFormDemoDateRange = class {
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: '5cbcb41cef877f0e9fb78ce81697fc2439abb4f0' }, h("h2", { key: '6a4ff28901af3515b1b7e6bf6b7feaf6a2d382a0' }, "Date-range input"), h("smoothly-form", { key: '9579ce7a593f945b634c669880b9eb39a41f059f', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date-range", { key: '43a8f7e8882a37479f5a52d902798815828d86c4', name: "range" }, "Range"), h("smoothly-input-submit", { key: '72c48ab7aa2df6e594a2256969e31ad98543decc', slot: "submit" }, h("smoothly-icon", { key: '71ae5057364c903f6fae97c46d3acef660471cc4', name: "checkmark-outline" })))));
+        return (h(Host, { key: '3833e26bb2993e1c9e34f9ae0e769667be96068f' }, h("h2", { key: '22a384e50f46467bcbafa7be795461024c25b8b0' }, "Date-range input"), h("smoothly-form", { key: '201517c3e9cd58a086d978da2b80d94cbb4b7a36', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date-range", { key: '6cb457ad45877b3e36c60cba1c8f364133648478', name: "range" }, "Range"), h("smoothly-input-submit", { key: '91e289602933e30ee845516efc85094ff03c453d', slot: "submit" }, h("smoothly-icon", { key: '93d0acb0034106aeadfb8727cb2bb7e6b1bad52a', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDateRange.style = styleCss$10();
@@ -5592,7 +5592,7 @@ const SmoothlyFormDemoLogin = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'a85b73dcf84b35975a7f8baac4cee7db4a96e070' }, h("h2", { key: 'fa5ab594ad42bbe9eb3c704803eef599da54feb8' }, "Login"), h("smoothly-form", { key: 'e6abe031a6d92a6d4bcd86c53b838140c4a74eaa', looks: "border" }, h("smoothly-input", { key: '0850b34c15fd675bec5d759c836588d0dee63c7a', type: "text", name: "username" }, "Username"), h("smoothly-input", { key: 'c22698a31ccfe3df8ee6e582d271540ec2759a28', type: "password", name: "password" }, "Password"), h("smoothly-input-reset", { key: '28a205519134187c020abd897f40a8ed4a29341f', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: 'ecc29e9c09754fb89a21d1050234d5624a5aa855', slot: "submit" }))));
+        return (h(Host, { key: '2c9674e5f435d97bd0387de4d5b91443aa521196' }, h("h2", { key: 'd1440db142e8443b534d60a050416740e0ba82f9' }, "Login"), h("smoothly-form", { key: 'f1fa4c58d439b4465a4cc3eaad87637ecbf3ac51', looks: "border" }, h("smoothly-input", { key: 'c419a3578e1de751d77052c78992bfe9daef6238', type: "text", name: "username" }, "Username"), h("smoothly-input", { key: 'fbce70bd6ac07efbf59bb39ea1d728a3e78c6d77', type: "password", name: "password" }, "Password"), h("smoothly-input-reset", { key: '22df0cdc42340f207032132943cd3a5206dee49b', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: '83967b0011d19526ec165d2888a5bd4533a4cf0c', slot: "submit" }))));
     }
 };
@@ -5606,10 +5606,10 @@ const SmoothlyFormDemoPet = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '88099a7fd5f8f5a0d613fcff4b817545901d356d' }, h("h2", { key: '8dd122875fc1f4c742102f0e62a512db538baac8' }, "Pet"), h("h3", { key: 'bfb98de17657a63e7713c2b02f12f0be7eca9231' }, "Value"), h("smoothly-form", { key: '8395ed11ebcff8d9c8f66d3718324b08c0445d83', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, h("smoothly-input", { key: 'af774efd343074cf0582e5e94f163db036cb0879', type: "text", name: "name.first", value: "Johnny" }, "Name", h("smoothly-input-reset", { key: '84f83295dc09f2cae1660b7809f4f9fc5cd0703f', slot: "end" })), h("smoothly-input", { key: '6b7a0b6717c2ccb9aa0e2095afe94138213a3e67', type: "integer", name: "age" }, "Age (Years)"), h("smoothly-input-checkbox", { key: 'c0094ce4c1c2b3809642b501ed2daa5b11960cc6', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (h(Host, { key: '1e20a61c9db6aafdf47e54ed7aaef6c1ca3d8bfa' }, h("h2", { key: '45492fefcf3cc0fb1a4010711cf10f0bded34893' }, "Pet"), h("h3", { key: 'bc05c80a795091886b94ba85dd89746e58159ea3' }, "Value"), h("smoothly-form", { key: '42a8ccf63773aa8b235931cc66415cfd0f1f0c14', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, h("smoothly-input", { key: '3606396ae683768fb6ef5e5940f43fbef81800c9', type: "text", name: "name.first", value: "Johnny" }, "Name", h("smoothly-input-reset", { key: '1128b00ce30571d90960f0747caf90394d08f093', slot: "end" })), h("smoothly-input", { key: 'fbd205ba349d3f754af21ebdc40434946bb712a4', type: "integer", name: "age" }, "Age (Years)"), h("smoothly-input-checkbox", { key: 'e4465a244c36403f0869f5d739d9cdea595136ce', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "Has Owner", h("smoothly-input-reset", { key: 'fb26cd76bb633fb4c02d6cf886a013c85b63fd07', slot: "end" })), this.hasOwner && (h(Fragment, { key: '0ab3080a8779a0eb75fcad913be3f37674eef021' }, h("smoothly-input", { key: '35ae9e6768fc5d28e2977a505887e27453093f4f', 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", h("smoothly-input-reset", { key: 'ccae0cd45403a3a9cdc75d14199133478f2fbe33', slot: "end" })), h("smoothly-input", { key: 'd7a6162e9b0b05794d234dedef605673ca3df8ba', 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"), h("smoothly-input-file", { key: 'b2200911dadfb95781f82dd3a4f31f4217861c84', name: "owner.picture" }, h("span", { key: '4b4d34c2d3956c655f688e320d8f1557fe250dbe', slot: "label" }, "Owner picture")), h("smoothly-input-date", { key: '1092a9022d1e49ad15a8a27cd053b77679e82605', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", h("smoothly-input-reset", { key: '7b3fb12d0755e96fdacca6a9b07fc65616b66330', slot: "end" })), h("smoothly-input-date-range", { key: 'd8f76a97851a6ba11085b42487f69b1056ffd829', 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", h("smoothly-input-reset", { key: 'c879d11886be04ab9bb8d090f7f8b56a67466b9b', slot: "end" })), h("smoothly-input-range", { key: '476435b88267d69b4f75880f0b14d762bad9e55b', 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", h("smoothly-input-reset", { key: 'cfde948cafc0d28ad7eb6cd2eb6fe5147d2ad2e5', slot: "end" })), h("smoothly-input-select", { key: 'e31966b6b1f089057a709e0df0ee74cd4794bc4c', name: "owner.favoriteHat" }, h("span", { key: '0db0b774a2742f2ea985167bf2e9088e13ca2964', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index, selected: this.owner.favoriteHat == value }, value))), h("smoothly-input-reset", { key: 'd7ed622d339284fad2057e703b2c7125fb15c01a', slot: "end" })), h("smoothly-input-color", { key: '537f228ad70488f3347bab5aa8e5fba50d7ad174', name: "owner.favoriteColor", value: this.owner.favoriteColor ? 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", h("smoothly-input-reset", { key: '22b5f2f502e774827676fa238e72dbe083188421', slot: "end" })), h("smoothly-input-radio", { key: '71b2de0772f311b39af9db0a6c32e1ebdbe9b60e', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, h("span", { key: '178dadde1b90e0babc9e4d3d2576f96cbc876fdd', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '8ef6280e5514b390ab22b28146aadd819c89f95e', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), h("smoothly-tabs", { key: 'a566ef21f483d11b0d7ad4d42218244f715ab58c' }, h("smoothly-tab", { key: 'efeebdaf5ee1175c36b248e3ce5d4a1cb0e1e0f1', label: "Dog", name: "dog" }, h("smoothly-input", { key: 'f932840909cede23f122c6094a75525b14378f7c', type: "text", name: "dog.breed" }, "Breed"), h("smoothly-input-file", { key: 'b3b91c23a61e9ba9c20badb039ff555972fe3985', name: "dog.picture" }, h("span", { key: 'c74681d13077eb990d89716c7cd2c89950e44eb9', slot: "label" }, "Dog picture")), h("smoothly-input-date-time", { key: 'bd89d002065c7365b7c93033714eb1e21a8e4774', name: "dog.lastWalk" }, "Time of last walk"), h("smoothly-input-date", { key: '4ac749261e9edb101e85a7000376a813de212942', name: "dog.birthday" }, "Dog birthday"), h("smoothly-input-date-range", { key: '86e21db2c7e5c68e22f1583e7309318e6e4c6003', name: "dog.dateRange" }, "Dog date range"), h("smoothly-input-select", { key: 'efaaffb5b33575a079ca40319ef829ffef5af14e', name: "dog.favoriteHat" }, h("span", { key: 'b9a9268cad14e92950cba4e851b4d1eaf2206b30', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-color", { key: 'd6b56f10b63036a12423b84ebee35cb48faa659a', name: "dog.favoriteColor" }, "Dog's Favorite Color"), h("smoothly-input-radio", { key: '3be208ceca38e4023a06f0df9318e5dd03d7d010', name: "dog.favoritePizza" }, h("span", { key: 'e0b8eb2e2ac66bef9f9efe292d07dd77f5f936c9', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: 'c532d5f50b3a18ecc1e5c52e8aa6b3548ab328c7', name: "dog.hasPet" }, "Has Pet")), h("smoothly-tab", { key: 'fc6d91caf8efbedf2c402cb83c88e8b674214f20', label: "Cat", name: "cat", open: true }, h("smoothly-input", { key: 'd6f645801298a26aaa9ea895f3c2c111463ac71d', name: "cat.favoriteFood" }, "Favorite Food")), h("smoothly-tab", { key: '1d54790895d58a973a0d9909cf037834d5e18d79', label: "Parrot", name: "parrot" }, h("smoothly-input", { key: '58f54b19c876d990ac7bd4aeaaca620dcebc6e04', type: "price", name: "parrot.price", currency: "EUR" }, "Summary Price"), h("smoothly-input-file", { key: 'c05427bbcb200a2021d4e1c5c24a5c5577e58a3f', name: "parrot.picture" }, h("span", { key: 'af2b39ee8335219617413cba2b2be4a17a1c8b6b', slot: "label" }, "Summary picture"), h("smoothly-input-clear", { key: '8a9c7f79972bb8367006428930583285c0e13b2b', slot: "end" })), h("smoothly-input-date", { key: 'c5de0ec3a5094ba38f7390cd738ffd5baac4ee3a', name: "parrot.birthday" }, "Summary birthday"), h("smoothly-input-date-range", { key: '5017f8fdc65f5f28a5917f3d478d01b5bdf09746', name: "parrot.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", h("smoothly-input-reset", { key: '1de78bfe5e684e17cc73588572573e7b8f81f8be', slot: "end" })), h("smoothly-input-range", { key: 'b33b26c10f148fab67de81002b5d17a34952c373', name: "parrot.height", label: "Height" }, h("smoothly-input-reset", { key: '0d197f376f0b195a1f5730fd35b3ca8f489af593', slot: "end" })), h("smoothly-input-select", { key: '3ef09882c984348ac99b741cfc0c9e2203bf5877', name: "parrot.favoriteHat" }, h("span", { key: '939906ee1a07df997032b9ef2ef126038d16ecb5', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-month", { key: '02131f864b606361fe0fe452e2ae77122c16cbb0', name: "parrot.month" }, h("span", { key: 'cd499075feb735fbbea8d15f008e7bca7efe6b10', slot: "month-label" }, "Summary month")), h("smoothly-input-color", { key: '04411c6e66665d6dd1eb87095ca08d42edf409da', name: "parrot.color" }, "Summary Color"), h("smoothly-input-radio", { key: 'bd220ce16e75be0cd9feb80df9d96b6d491eec93', name: "parrot.favoritePizza" }, h("span", { key: '8c0a80e74e9f0f6f4f3d7a6d850d0895d93aa7ae', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '51035c80dac7e59682c2258aa9104a088d907f6b', name: "parrot.hasPet" }, "Has Pet"))), h("smoothly-input-submit", { key: '28c6f78988d06a5d52aa4fc1e7b8c1322d360f52', size: "icon", slot: "submit", color: "success", fill: "solid" })), h("smoothly-display", { key: '20a329d0b039ff4058b7b7869ecb4927d82aaf0c', type: "json", value: this.value })));
+            } }, "Has Owner", h("smoothly-input-reset", { key: '7be8886cdeedbdeb87c28b2024c26bd4532f07ed', slot: "end" })), this.hasOwner && (h(Fragment, { key: '972c8da03c31ff920a5131daa1d046f7e80418c1' }, h("smoothly-input", { key: '4fd076e713c449b56e4d3b38b47009a3301c81df', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name", h("smoothly-input-reset", { key: '2af7bfb23d1d67903be625827d5d237640fc16b0', slot: "end" })), h("smoothly-input", { key: 'ba357c367c5006c2002dee8f597b0344572c6238', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), h("smoothly-input-file", { key: '8caa1d54740a0e1fb3b29d709f6feb32c8c45a31', name: "owner.picture" }, h("span", { key: '10332335746aadd62719e024aaa6f825a5b2800b', slot: "label" }, "Owner picture")), h("smoothly-input-date", { key: 'c8c1afc04ae737af2b45c061ee21b4dfb1713869', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", h("smoothly-input-reset", { key: 'e13a649d0d308340d419d2355d7d48fbfce257e7', slot: "end" })), h("smoothly-input-date-range", { key: '952264d17218340e89fe16c40b6003ee94f34c9e', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange", h("smoothly-input-reset", { key: 'f99d74c312b6b7ddc3d3b169b672d3cc478cb3a3', slot: "end" })), h("smoothly-input-range", { key: 'd799c177fa826a5a582d1785add6d9ac512434a2', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height", h("smoothly-input-reset", { key: 'a872fe1b4ae49293daad5ca2c781fe9abe514b95', slot: "end" })), h("smoothly-input-select", { key: 'cc6a5ef5238abc4dce3c2321c8f5c184c0dfe320', name: "owner.favoriteHat" }, h("span", { key: 'a073973ff9b090a82a23b81ca82875ac5155f822', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index, selected: this.owner.favoriteHat == value }, value))), h("smoothly-input-reset", { key: 'c39f9d320b08362f082749f5338de8d4530f9da5', slot: "end" })), h("smoothly-input-color", { key: '50e462d1f87b19685f627deb90d9eb3d2798c15a', name: "owner.favoriteColor", value: this.owner.favoriteColor ? 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", h("smoothly-input-reset", { key: 'd63535ee7ac6bae7424f60bff48cc5342594ced6', slot: "end" })), h("smoothly-input-radio", { key: 'f015946e2a17358be9f8279c5f92566101dd69ef', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, h("span", { key: '0e33220f442cf7e1b2908259c68bbf196fe2d2b2', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '7db7129193020bc6375b859f8eed9bbd3a774b72', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), h("smoothly-tabs", { key: 'c02261545ec207a2be19261796ff1ab0322221c7' }, h("smoothly-tab", { key: '64fc9145089d8175e87b77746a301d2a300227ff', label: "Dog", name: "dog" }, h("smoothly-input", { key: '93efb08d77a27ebeb0ec1ffaa31d8f20ad1c5c79', type: "text", name: "dog.breed" }, "Breed"), h("smoothly-input-file", { key: 'fbb759287fbb384110dab6bd67e526e0e1b87061', name: "dog.picture" }, h("span", { key: '75354c72313adfbf2f0590a4a1d629b056a584d0', slot: "label" }, "Dog picture")), h("smoothly-input-date-time", { key: '67cb08aae3427ea09418763cd4f5c89f4c12885c', name: "dog.lastWalk" }, "Time of last walk"), h("smoothly-input-date", { key: 'bfc8d1878f5e8c0b9e06dd6db93c5414d072aade', name: "dog.birthday" }, "Dog birthday"), h("smoothly-input-date-range", { key: 'd89333abe0b84513f7b59d0910ec979dc63e4f76', name: "dog.dateRange" }, "Dog date range"), h("smoothly-input-select", { key: '0ca96cd6cd0ed9d0d0b6e3212c4e545b1783edda', name: "dog.favoriteHat" }, h("span", { key: 'e9bb41040522fc010702793420c2f448fa2fc0af', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-color", { key: '609b660e2980b33ac4c437fd3a2cecc212fb700d', name: "dog.favoriteColor" }, "Dog's Favorite Color"), h("smoothly-input-radio", { key: '496506fd830c3da16c3cbb32ed7a93b54e1d023f', name: "dog.favoritePizza" }, h("span", { key: '59bdad0dc97036ca753d7de08dadcd9ab888df47', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '2ad32725e92f4eb3f6402751facf72563491a5a7', name: "dog.hasPet" }, "Has Pet")), h("smoothly-tab", { key: '09d4b79adbbf8772285a13ce1bb45fea67c3c019', label: "Cat", name: "cat", open: true }, h("smoothly-input", { key: '2a298883bf58261ec42cd8a7cb220421604233f2', name: "cat.favoriteFood" }, "Favorite Food")), h("smoothly-tab", { key: '6ded1101edaf7025402e2084cfa3d530a9440497', label: "Parrot", name: "parrot" }, h("smoothly-input", { key: 'c6fec8eff6ed07080cfcfd7e04a1accd9be5e698', type: "price", name: "parrot.price", currency: "EUR" }, "Summary Price"), h("smoothly-input-file", { key: '1ef6c74c21f3a530ea18a5fb843c0f39c5d09a5c', name: "parrot.picture" }, h("span", { key: '1506866be3f7d5032caa07277ddb4900adf796e4', slot: "label" }, "Summary picture"), h("smoothly-input-clear", { key: '2768b4e77018167d8c5459561627c7176f6af19e', slot: "end" })), h("smoothly-input-date", { key: '4482cadd8c81d8cf68d01d940759c9c8fa302889', name: "parrot.birthday" }, "Summary birthday"), h("smoothly-input-date-range", { key: '1db7a128f9fe548e64a26b106f0428cf027515dd', name: "parrot.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", h("smoothly-input-reset", { key: 'f61bb824149c3927ee9e7df5474bc1140b557c2d', slot: "end" })), h("smoothly-input-range", { key: '455be79335de1c32001a9baf41bc6601600a6f2b', name: "parrot.height", label: "Height" }, h("smoothly-input-reset", { key: 'f0c5284602a08d52331e2fca63bf561212bce4f9', slot: "end" })), h("smoothly-input-select", { key: '2b5d15b9bdda780755ddb704019bdf9b075f7593', name: "parrot.favoriteHat" }, h("span", { key: 'e23e7228157f39f8d5b565c6283e65d848d662f2', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-month", { key: '282eb367f0a8bbcc9b296358933c83a2ab1246a2', name: "parrot.month" }, h("span", { key: '46678c21d019c38d586da52a8ca5ba14e54f9545', slot: "month-label" }, "Summary month")), h("smoothly-input-color", { key: '74de10bf1eb9a54f1f5139f9b7549b84d90f521e', name: "parrot.color" }, "Summary Color"), h("smoothly-input-radio", { key: '2135343dbedb74df58a88e011921ed5cf93a8f69', name: "parrot.favoritePizza" }, h("span", { key: 'b549ce953d14b96b12496f989cf8c237fa697d6d', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: 'e4fd4673ea5c4feb91142062527f7537f715738e', name: "parrot.hasPet" }, "Has Pet"))), h("smoothly-input-submit", { key: 'c757eec9af05b183a036119430533a2fdfa7ff26', size: "icon", slot: "submit", color: "success", fill: "solid" })), h("smoothly-display", { key: '94108e7af02550ba3ea038b879e0db56fe057833', type: "json", value: this.value })));
     }
 };
 SmoothlyFormDemoPet.style = styleCss$$();
@@ -5619,7 +5619,7 @@ const SmoothlyFormDemoPrices$1 = class SmoothlyFormDemoPrices {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'ddaf2991aa275d3e43d7b103c1610e9c9d90e540' }, h("h2", { key: 'ade32ad1ec5facad78d0c02c60fb41e7ddc220b2' }, "Prices"), h("smoothly-form", { key: 'babe8324ffdccb239ea220e4f78b0eb8180935e2', looks: "line" }, h("smoothly-input", { key: '108bae0b5210eedc2ea7eecf733c307c81902c67', type: "price", name: "no" }, "No currency"), h("smoothly-input", { key: '8db15ba85d0a56d34e5af866cf41adb26c05f24f', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), h("smoothly-input", { key: 'de60d9244a12bbe6eff9ffc0b9a4ca4bb57059cc', type: "price", name: "usDollar", currency: "USD" }, "USD"), h("smoothly-input", { key: '86c99574c9b71982e761c36c749a299ee77035e1', type: "price", name: "pounds", currency: "GBP" }, "GBP"), h("smoothly-input", { key: '7f60f189c2f39bc4d90ea5e1a4ade4405424bfb2', type: "price", name: "peso", currency: "UYW" }, "UYW"), h("smoothly-input", { key: '2a6608e00e03a3b296df690c332d60d2538d5d5b', type: "price", name: "iceland", currency: "ISK" }, "ISK"), h("smoothly-input", { key: 'b69ac9c3668624b1050b4adbd40ea2988c89b7bc', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), h("smoothly-input-reset", { key: 'e161b00dae69f994c8f8a1cf8b0d218c9b76b186', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: '620aed2e802906bc5c69b9dada89cdc5e01cc2d8', slot: "submit" }))));
+        return (h(Host, { key: 'c1873c86bb44177e638d7b52d7bbbcb1d0482e1b' }, h("h2", { key: 'a8edb5f0241dac96350d75eaad7b0c78adf1c13b' }, "Prices"), h("smoothly-form", { key: '143874192e2caf3ce0297983e1c5ecc6002705a2', looks: "line" }, h("smoothly-input", { key: '151a20903ab8024b291ef1cd6f868bfcbdfdf187', type: "price", name: "no" }, "No currency"), h("smoothly-input", { key: 'c7a5959241c42d8fee2d741064585c1c79560544', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), h("smoothly-input", { key: 'cfe92d5a2e94598e728d0f0b815652e4ed6d33e1', type: "price", name: "usDollar", currency: "USD" }, "USD"), h("smoothly-input", { key: 'bd3ffd16af42eb13fe3d6ea4ddad8ceb83827671', type: "price", name: "pounds", currency: "GBP" }, "GBP"), h("smoothly-input", { key: 'a12b9078e45b65a5b281a0c4ff40caf6446522b8', type: "price", name: "peso", currency: "UYW" }, "UYW"), h("smoothly-input", { key: 'a8a1efcb2bacb8e56b552aeda19e65eca5690fd3', type: "price", name: "iceland", currency: "ISK" }, "ISK"), h("smoothly-input", { key: 'be59abc2f31cb215c192566ca4218a19cf2f004a', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), h("smoothly-input-reset", { key: 'a331ae378f5c10553c3b7f7669322c3d4e9d9973', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: 'bef886536c5366779bf3c7c10e35a3e42f65075b', slot: "submit" }))));
     }
 };
@@ -5639,7 +5639,7 @@ const SmoothlyFormDemoPrices = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '6c26fc85d61f779af5fcab96c9e284d5b878688b' }, h("h2", { key: '03b826fce15279c6e12a41b7b36801ae7ee4c519' }, "Schedule"), h("smoothly-form", { key: 'd346491153ecef66014e4094e2a146d9f22d05d2', looks: "line", validator: TimeTable.type }, h("smoothly-input-date", { key: '2c9e97babe7f546172b3c2cba82196c023a202bd', name: "schedule.0.date" }, "Date"), h("smoothly-input", { key: 'ce96e610d3ccd1dc33a73bd50cdaa76a37cd5bdb', name: "schedule.0.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: '53f1beac7d55968d08bac99d593df36e1aca34be', name: "schedule.1.date" }, "Date"), h("smoothly-input", { key: '4d576bb6887c81df8b3bc70da45b6218d1dce3e9', name: "schedule.1.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: 'f743cfaa8782867a30cd80320c684b7a50aea546', name: "schedule.2.date" }, "Date"), h("smoothly-input", { key: '7a9b171261c173302c61ce089849cdc0ddddf9cf', name: "schedule.2.amount", type: "price" }, "Amount"), h("smoothly-input-reset", { key: 'fe8b3bb4f160c7f40d1f383e39ac700a5e00ff07', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: '2f494f54c287b73b73dd94956018360affffec4c', slot: "submit" }))));
+        return (h(Host, { key: 'af726abe173fe267f43278671ab53c62184ca7b3' }, h("h2", { key: '85994b1d612017c07fcbff85d1c7520419c4125f' }, "Schedule"), h("smoothly-form", { key: '7bace3476a4344bb7ece715a3d797acadf40dd58', looks: "line", validator: TimeTable.type }, h("smoothly-input-date", { key: '5450e239098e87b0eacc7da44459d35dc30bb5dc', name: "schedule.0.date" }, "Date"), h("smoothly-input", { key: '9cc1b52c9f636a99b549267198503d47b3afb0f8', name: "schedule.0.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: '5f298fa2efabe38e2aef28d9c992ec1ec0804b46', name: "schedule.1.date" }, "Date"), h("smoothly-input", { key: 'b71aba89d7e05258226fbbaaf705dc9c435a1c37', name: "schedule.1.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: '22095cea02b58862ae930857daee6242a51b33b6', name: "schedule.2.date" }, "Date"), h("smoothly-input", { key: '9c33bd7be7e0de733986cc2ef6f9c2e52b3f273a', name: "schedule.2.amount", type: "price" }, "Amount"), h("smoothly-input-reset", { key: 'b02b3225e549665b393a77627da3304881473f9e', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: '25d0d08fb11531e71d0f9c4a9394d3bb36a0565c', slot: "submit" }))));
     }
 };
@@ -5648,7 +5648,7 @@ const SmoothlyFormDemoTransparent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '5a3fdbd366a32b297862b100c85177af79f16d86' }, h("h2", { key: 'c38d0dac4ca5c387c8a0e88f1aa016ad671d01f7' }, "Transparent"), h("smoothly-form", { key: '810ccd9b0ffdef37a833a09b7168decb20264262', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, h("smoothly-input-file", { key: '58587dd36208d8ebbc60442c145107d8fe0362b8', name: "file" }, h("span", { key: '3d30591aded5f5b78d8a94c4c8c2df5e3265eda8', slot: "label" }, "File"), h("smoothly-icon", { key: '85ca32d6d83edce9365e547c7d821a97dafc6d50', slot: "button", name: "folder-open-outline", size: "small" })), h("smoothly-input", { key: '34ae4b828a10983ead287a522811715705df3aa6', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), h("smoothly-input-date", { key: 'e562c31da45ad29784b6e6fd0c9790dec0056f33' }, "Date"), h("smoothly-input-date-range", { key: 'e76232bb888f0206eb97573066b02edb984e0d53' }, "Date Range"), h("smoothly-input-select", { key: 'c578c9b0cce028fd15bee9defb3d7ec4ef00a3d5', name: "transport" }, h("smoothly-item", { key: '41cb244bc1e5a71b086f61e0d691bed6e11675b0', value: "plane" }, h("smoothly-icon", { key: 'b47d61e8b5639f49094b35b35a571bed2024f3e1', name: "airplane-outline" })), h("smoothly-item", { key: '1519381101efae10236102ff61b34cf7ffd8687b', value: "car" }, h("smoothly-icon", { key: '045e2d48e1dbc887a582be5bf6541663bce0c585', name: "car-outline" })), h("smoothly-item", { key: '3f15f91ba811d4cb8b690abbe49c374b63003820', value: "bus", selected: true }, h("smoothly-icon", { key: 'bc1141e336893ec5e65db1513c95cc390ca54e60', name: "bus-outline" }))), h("smoothly-input-submit", { key: '9e6a13bc16f206d4b545c9dd8b09ca4babf9719d', icon: "checkbox-outline" }))));
+        return (h(Host, { key: 'fc0659542a5e17d903ecb4da9aee7679ef39cdec' }, h("h2", { key: '1d1b9ac96324d7c421cdb19d2734bd2fbbb5a8fb' }, "Transparent"), h("smoothly-form", { key: '992b6ce5260a8af1f63b9025faca67acef755dc2', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, h("smoothly-input-file", { key: 'e79178c59b6617703cb42fdeb16a246047110f85', name: "file" }, h("span", { key: '0c34c069e55446fdf26eef201f492000b1692a3e', slot: "label" }, "File"), h("smoothly-icon", { key: '85c1a66268e78a94b308be411ff5cb712890a1b0', slot: "button", name: "folder-open-outline", size: "small" })), h("smoothly-input", { key: '64c3c4206bf9455f5c923c427cae185c5f84ca60', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), h("smoothly-input-date", { key: '006326702c0d9d6f349292de7531b390e6b7add8' }, "Date"), h("smoothly-input-date-range", { key: '78784fe14706cbbb5d8ef6d040891127991a418b' }, "Date Range"), h("smoothly-input-select", { key: 'e48d3d2cd97b472558f2cbfb7c19aed71c505ed1', name: "transport" }, h("smoothly-item", { key: 'afdc23c9ed61e272893ddd45b70e8d62f0e613fc', value: "plane" }, h("smoothly-icon", { key: 'ba6c15f1ac729420811ff77b355424426f2b35eb', name: "airplane-outline" })), h("smoothly-item", { key: '90c591649758b43835de47380f9cf0ba89665a43', value: "car" }, h("smoothly-icon", { key: '170d4aeeec48e2ea8d57ee17421daa0eacbd6125', name: "car-outline" })), h("smoothly-item", { key: 'fce1fc75af8d839f10d1057d699b5049cd4bee84', value: "bus", selected: true }, h("smoothly-icon", { key: '1fbb7c4afc326efe8d569c5c032fb7d285876974', name: "bus-outline" }))), h("smoothly-input-submit", { key: 'fd292fb5b88f89e103d843e95b14ccf7a3ab9871', icon: "checkbox-outline" }))));
     }
 };
@@ -5669,7 +5669,7 @@ const SmoothlyFormDemoTyped = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'b2defb07fd1fef12b85e5c983c3ec9a06eaacd5c' }, h("h2", { key: '4f45fac5e8febcc52cdb7ee2e3cb6e6586c04f34' }, "Typed Contact"), h("smoothly-form", { key: '169c7879c27f2e65a5da9f44f2066e65fa4b09db', validator: Contact.type }, h("smoothly-input", { key: '7e11e762f2f88ad82b3bb584f5f151624a73cd37', name: "name.first" }, "First Name"), h("smoothly-input", { key: '207226d54b3ac9250512c962200e97e06dfb237d', name: "name.middle" }, "Middle Name (optional)"), h("smoothly-input", { key: '5235de33144f057b20a46353ae13c7eaa15fd97b', name: "name.last" }, "Last Name"), h("smoothly-input", { key: '3e1607c6f2301ca86a1f430e2c6d3d12c8035f70', name: "age", type: "integer" }, "Age (18-120)"), h("smoothly-input-select", { key: 'd1fa86d5f8ca6e8a4d0c40e363f60c9ca53aad98', name: "country" }, h("span", { key: 'b54fe7f96a97014e3baac54b1ac5f903b88b170b', slot: "label" }, "Country"), isoly.CountryCode.Alpha2.values.map(country => (h("smoothly-item", { value: country }, isoly.CountryCode.Name.en.from(country))))), h("smoothly-input-date", { key: 'c616775dda21611243a88c6bf23ba280e9e89fb3', name: "birthday" }, "Date of birth"), h("smoothly-input-reset", { key: '11c1023ca25b7cae8afb727e1fb21f28ee1e7644', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: '3dbb734a1ef36ab8104dc6588c622b38567e61b2', slot: "submit", size: "icon", color: "success" }))));
+        return (h(Host, { key: '2dbbb21af22c211fa354d7213c94088ec796cf8d' }, h("h2", { key: 'f944fd5f9a04be35baa6d04760ef8fd083f84c6c' }, "Typed Contact"), h("smoothly-form", { key: '43b74057023eda58b4b89ba9c52e59f9f8fd2329', validator: Contact.type }, h("smoothly-input", { key: '6179ce405787b71e56af49ab16cac3d225476c9b', name: "name.first" }, "First Name"), h("smoothly-input", { key: '41568d9f6447f715c2d9ca414aeca6e103085df8', name: "name.middle" }, "Middle Name (optional)"), h("smoothly-input", { key: '71407b265ac5f00f5db126ae0e1b5ced6c329977', name: "name.last" }, "Last Name"), h("smoothly-input", { key: 'f2dcbd6af35236299eb573d573efa521672c0a4e', name: "age", type: "integer" }, "Age (18-120)"), h("smoothly-input-select", { key: 'd881ad1a7d8f3b3279c9f4aac5473514a2b95d5f', name: "country" }, h("span", { key: '1606d2a8eb5f7160abd3c6a4e983561808fabca5', slot: "label" }, "Country"), isoly.CountryCode.Alpha2.values.map(country => (h("smoothly-item", { value: country }, isoly.CountryCode.Name.en.from(country))))), h("smoothly-input-date", { key: '09e7d8d8f9250304279b1d245044b919c147cc1f', name: "birthday" }, "Date of birth"), h("smoothly-input-reset", { key: 'd212e7a41fba21fc4ba2efd9349834f4c5d8a41d', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: 'c5e62e8b33276b0f5e16e5c37538cca20c5e2ace', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = styleCss$_();
@@ -5770,7 +5770,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return h(Host, { key: 'ba28d8662ab4103ffc3708a291b72c179e9e1748', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return h(Host, { key: '0a19bf819d57a94f13fc8c2fbc885aebb0bf7a24', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -5795,25 +5795,25 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (h(Host, { key: 'f176097a9e8b600e7b6849618d986932e1115dfa' }, h("h2", { key: '600c0aaa4c8d9d66b75b3a9fb2546f8128b00f0b' }, "Filter and Variants"), h("smoothly-form", { key: 'da8b0a10a564b01918e644af025436dd13e1aa8c', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: '976282ac0d7bf9025e305b975b5800ba8946190d', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '81287920684545cdaedf4ae5df9e79bb8a9eea4b', name: "variant" }, h("span", { key: '8f14bd0559ab879184978aa720fbe9d72002c981', slot: "label" }, "Variant"), h("smoothly-item", { key: '262b691b55fc7a5dc662b50f6e84ac98e04db140', value: "outline" }, "outline"), h("smoothly-item", { key: '9baf50fd4633f0785577bebf8647f9ec4c9da525', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '5460d9ba34ad9e5f5bc765893174fb57bf88b189', slot: "end" }))), h("h2", { key: 'a204390a284b9da8171a655c315981111ee29906' }, "Props"), h("smoothly-form", { key: 'bbcb2e224b053d8983a743abd34c0a0186bfcc0f', looks: "grid", onSmoothlyFormInput: e => {
+        return (h(Host, { key: 'ec049b1d4b3d93e28913174bd7ab55ce836298ae' }, h("h2", { key: 'd0430155840916db4250402c39e5ee2656dc9930' }, "Filter and Variants"), h("smoothly-form", { key: '4c6f1ffa07fed10ba6051ab4d5f29c1278608b23', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: 'bea5be3b9c5f839da1fe6efd6497b4fa7c946e77', name: "filter" }, "Filter"), h("smoothly-input-select", { key: 'a64ee5957e34d669c481b77ba0f561ba5eebfa55', name: "variant" }, h("span", { key: '80df7e185a498c1c33cfe1c3fde85f955d46f256', slot: "label" }, "Variant"), h("smoothly-item", { key: 'd6447afb06c4471f9b3036838da77182161ebaf1', value: "outline" }, "outline"), h("smoothly-item", { key: '6622d9acf5549f05128632e386cafcabd4e5df0d', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '1a94b3d1d195c77716a7a9e92303bab3dffcf8b0', slot: "end" }))), h("h2", { key: '1320b7b476f6451885fa32dcb0daed671d269612' }, "Props"), h("smoothly-form", { key: '1bc3722b6b25c57352ff7bc1df1571a3df824611', looks: "grid", onSmoothlyFormInput: e => {
                 this.props = e.detail;
                 console.log("props", this.props);
-            } }, h("smoothly-input-select", { key: '7f0f6e1932f649f5fb300f96a2d6eabc88e701aa', name: "color" }, h("span", { key: '508bbda0d768fc4f661f0f0887857e25d21c7a91', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color }, h("span", { style: {
+            } }, h("smoothly-input-select", { key: '8b065ccb0feb16a805a20ee13eab053d0cd8edfe', name: "color" }, h("span", { key: '3ed5be41ac0893b18741356a70c7653c862579a0', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color }, h("span", { style: {
                 background: `rgb(var(--smoothly-${color}-color))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), h("span", null, color)))), h("smoothly-input-clear", { key: 'e9b59296121ab6e415840d4f501ba31a4347e7af', slot: "end" })), h("smoothly-input-select", { key: 'd066f9f4aa8d79c19537b03e9fba85386e673633', name: "fill" }, h("span", { key: 'f6ae683d747cbeb8a3e40e4d240efe08a1ef8ec4', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '594435142c02e0b379f6b54886927069681de3cf', slot: "end" })), h("smoothly-input-select", { key: 'f5f821cfdc6a83063bf22c2eb8417e3fa33845cd', name: "customColor", menuHeight: "12items", ordered: true }, h("span", { key: '2b502f1dc5775cc23df45be8e48da4e297071078', slot: "label" }, "Custom Color"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+            } }), h("span", null, color)))), h("smoothly-input-clear", { key: '50b90280c6f0600a073b8b8a254fb035f1aefec0', slot: "end" })), h("smoothly-input-select", { key: 'efda773381d8cb5d491e591b731cea17b406a005', name: "fill" }, h("span", { key: '396dbb906c3b52b53732b062f5ce8ebe70ce85b6', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '44cc4c40f24ad5c978e423496ea30a3068f862a1', slot: "end" })), h("smoothly-input-select", { key: 'd3aaee102be617722fc42dcd47139fe0d2c7284c', name: "customColor", menuHeight: "12items", ordered: true }, h("span", { key: 'dc450c6debc6be202b40628ef77196159e45a082', slot: "label" }, "Custom Color"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
                 background: `rgb(var(--smoothly-${c}-${v}))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'ca3d4788ce77f1175a2e9e0cce841f3c8aa5925c', name: "customBackground", menuHeight: "12items", ordered: true }, h("span", { key: 'cd4faa49f2167739f5b00f1b0c734fdf6b8ddc4b', slot: "label" }, "Custom Background"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'a68b41f9a46917cb1b46e9ada61d05c280f92ff0', name: "customBackground", menuHeight: "12items", ordered: true }, h("span", { key: 'f094c91bdb64df81fd5fc49945b2760c214c37ed', slot: "label" }, "Custom Background"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
                 background: `rgb(var(--smoothly-${c}-${v}))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'bfebecae9f13f019bd13a8baa8c1029468d83c18', name: "flip" }, h("span", { key: 'e8a300bdca3f1db8c36dff27b0df5afd08c6bda7', slot: "label" }, "Flip"), h("smoothly-item", { key: '5f92573e3420ce19c1d291c394259cf0b1b0cb63', value: "x" }, "x"), h("smoothly-item", { key: 'c55f735398bb6b01d83d0d80922214f007983f07', value: "y" }, "y"), h("smoothly-input-clear", { key: '171d0667b92be8ea4b8ef6c38bc4b6170c1db813', slot: "end" })), h("smoothly-input-select", { key: '30ebb8bdb6d5d75b8cfae380bb8a83bccb89b499', name: "size" }, h("span", { key: '62df815da76512b43ae1c4583ff3e61f29ed5133', slot: "label" }, "Size"), h("smoothly-item", { key: '5cb1ff7cb3660016cc243eb24b5f7f3fde4dd08f', value: "tiny" }, "tiny"), h("smoothly-item", { key: '0d4d0f54b705a47741d11f2b5fd29245362ded31', value: "small" }, "small"), h("smoothly-item", { key: 'd4469868285cfa6c6ec5de5609f313f892cc66f1', value: "medium" }, "medium"), h("smoothly-item", { key: '2b98aac9eeacc7942aa9ea73c48b16f36c226033', value: "large" }, "large"), h("smoothly-item", { key: '520ebe334ad34dde56d5f8b5ecb7ca25e6645989', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '6b6dd6bd7070703371c89175f71ac30049e8042d', slot: "end" })), h("smoothly-input-range", { key: 'c85ffd310deeec0ef502b8549d9bfce3aa0ea895', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: 'a83b8be42b242c1b42b9ab34c9a3c61e0420ab64', slot: "end" }))), h("h1", { key: '02ce154b99955eece2bca3bb28fa47ad8955d18a' }, "Icons"), h("div", { key: 'e40575d19a189a6c8142c40943692854d9899749', class: "icons" }, [
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: '676477dc9f358f3512f0fb0f60a99a1deb3fa400', name: "flip" }, h("span", { key: '7e7924009ac080ccd225052351d0c70079990b6f', slot: "label" }, "Flip"), h("smoothly-item", { key: '70d21d485c90d881422d4c577fa04f101e0dae13', value: "x" }, "x"), h("smoothly-item", { key: '7e57ce51632ddd1dbf5fed24f109599de216eb3e', value: "y" }, "y"), h("smoothly-input-clear", { key: '0ea9f343784f533ebab4bc8d0b0879deb5e75156', slot: "end" })), h("smoothly-input-select", { key: '67e1d6b7b5e040e5284d0f5984c60a9f57a1d47f', name: "size" }, h("span", { key: 'e89ec731e273bd86c43d8993c78dbdcb1e052280', slot: "label" }, "Size"), h("smoothly-item", { key: '06201d3e144034f8984f48a064ea7d01dbdc3a7f', value: "tiny" }, "tiny"), h("smoothly-item", { key: '5f996913a822077f1fd66371819d528b0f67dc7f', value: "small" }, "small"), h("smoothly-item", { key: '1aa1eff32b61221555b6356cbe658fb2591a6678', value: "medium" }, "medium"), h("smoothly-item", { key: '1d18ac8a2bbcc4f16cd19263aa16d2d714582f27', value: "large" }, "large"), h("smoothly-item", { key: 'a0dd2fc34393ef5fc1ed89f1b000d3a3482a2324', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '1cde73483d40576d71b1994ea7a4a18a0df791dc', slot: "end" })), h("smoothly-input-range", { key: 'c57e682c8ad984279d9b4d4eef60a6c076b3014b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '485dc43539bb93a6bdd58ab1ba10ac5ee64abb80', slot: "end" }))), h("h1", { key: 'cef7183437984cc0d8df4765a5afd62790e07881' }, "Icons"), h("div", { key: '332d4c1168cda7307f00eef4106494860ed0a491', class: "icons" }, [
             ...Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),
@@ -6263,7 +6263,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: 'c5d524d1f3afd855836d16272830f435bbea828a', 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(); } }, h("slot", { key: '99bf0a11a07a3aa1622cacb8b16979a08f0ab4ec', name: "start" }), h("div", { key: '230008efd3abd69c42442777c0b2091b8499f42e', class: "smoothly-input-container" }, h("div", { key: '37fbfc2747d5c22d1345df109fa74438261f97d7', class: "guide" }, h("div", { key: 'ae7ef0e2563c7058305457d3b45ee54ad0d8f575', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '3149dc1dc1104e1f7958d71660c634bc9d1532d0', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'c4205c491d6482072762c8cac4f8b9eb06e8c09b', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
+        return (h(Host, { key: 'fab11232a335374619f88d481c37d4e5b3d11f8e', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: 'a0c8cae6adbad3694a28ec8e1e043fa7a8ceb98a', name: "start" }), h("div", { key: 'a2d20222eaa4b3edbc42360bc290f7216d17cca1', class: "smoothly-input-container" }, h("div", { key: '7f076aae537f15217e7bc960c495438729e06c8a', class: "guide" }, h("div", { key: '3b0078359bcc30eb6932c8f667abff7d4f0fe38b', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '2e5bc6a765e9249235b34ec25b6d3e67ee0a475e', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '6062569e9a2fbb73e9785005061a204784cef36f', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled) {
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -6279,7 +6279,7 @@ const SmoothlyInput = class {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), h("label", { key: '009823ce38acac92179f491d72cb504d70f09280', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'b1a6fee2719d4cf37fa73460a3ce42ca40e7ba4b' }))), this.copyable && this.value && (h("span", { key: '575ba5bf3d4fd4bfcc1766e8bed17fb918c15db1', class: "copyable" }, h("small", { key: 'cfcca12301172ebf57db536e4b82faa1f7d430c4' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: 'bc941fd7e23670f3232eb29f00124ce94ef201eb', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: '87bceaa7c79365c97b4757637dee596a3757e8b7', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '39251aaac3bdd727fbfaf16eb79048d2a29231e6', name: "end" })));
+            } }), h("label", { key: '43e8d3ad1afdaa8a8b6fa55583c0d40a3bf24acd', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '3614b3dc27033e9c7b382cfe839adab598f35447' }))), this.copyable && this.value && (h("span", { key: '5e2cb462b6cdde196955d26bf481f9bbcad7e331', class: "copyable" }, h("small", { key: 'c3730452979b2edd6b675990ac627a4e5dd839e4' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: '9d18b939ea4e9b83e5d114b6cea73c66dad07503', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: 'c730f983b4a58c59ac60eb8539a199811655e4f0', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '00a182be5038019d825ec5b6fa8a87026c50cfa3', name: "end" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -6379,10 +6379,10 @@ const SmoothlyInputCheckbox = class {
         }
     }
     render() {
-        return (h(Host, { key: '3d423adb72e619d4119435408a6b4ee9adbc2704' }, h("input", { key: '489144f56039b3edf5dab1f7ffe9f37e2d0fcadd', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
+        return (h(Host, { key: '6c5e8fd09ac7c64be72d541cdeee747c84495a6f' }, h("input", { key: '241ef4d9acc46562323db12313f6ca0a3fea5f0f', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
                 this.checked = e.target.checked;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), this.checked && h("smoothly-icon", { key: '6f97dca6dbfedce3d06d4146269bb518016476a8', name: "checkmark-sharp", size: "tiny" }), h("label", { key: '63fc6b505b6d21a779e60ae9803b56134fd855e0', htmlFor: this.id }, h("slot", { key: '88de07dc316049e436784b8ad1e7a3fe359363ff' })), h("span", { key: 'dd9d9e7f30dd37550a089b65c62d26e38471d8bc', class: "smoothly-checkbox-end-slot" }, h("slot", { key: 'f74c25ab1f6765225044bfc21db40b51e47802aa', name: "end" }))));
+            } }), this.checked && h("smoothly-icon", { key: 'a0909dfe8369e31bf4873a2ab05f21880c3f43fe', name: "checkmark-sharp", size: "tiny" }), h("label", { key: 'c3628052b38e4dfbdffefa92d428a04662726f65', htmlFor: this.id }, h("slot", { key: 'bfdbbb43537661b026600d2cb3af9c244d2ae5b3' })), h("span", { key: '4033bb43f9ead47f2f9f7eb6943e4199c7260766', class: "smoothly-checkbox-end-slot" }, h("slot", { key: 'e8985be231a6f80d71d85e1b665705458fb187f2', name: "end" }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -6445,7 +6445,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '35dfd4b4b5b2aaac1457f14143591df8244e4e2f', title: this.tooltip }, h("smoothly-button", { key: '681e2d83c6fe6061919a06ece237673e0c68a159', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '31f3176ab610d6c1ce68055b6f0df55ba2303e29' }), h("smoothly-icon", { key: 'a454fc3409e50dd4a0fb7566460909645066b944', name: "close", size: "tiny" }))));
+        return (h(Host, { key: 'f1f8c9c1065466cf60851197c73cb3e801593472', title: this.tooltip }, h("smoothly-button", { key: '2166cd37b5a0e93cba98b17657f4bf33e503814e', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '427e397efd7fc89e2e6ba34f1703cd249b8b07cf' }), h("smoothly-icon", { key: '3c16b4541b7d1493213d3dfc93adf32aec831869', name: "close", size: "tiny" }))));
     }
     get element() { return getElement(this); }
 };
@@ -6603,7 +6603,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h(Host, { key: '443b5ede9cb6485ed194f6c4bcd0dfa4d24fbf5f', style: {
+        return (h(Host, { key: '606897dcf8880a8bceaf646a17b0b682dc0de4fe', 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)}`,
@@ -6612,7 +6612,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`,
-            } }, h("smoothly-input", { key: '773d645e7cbe1dba29ed0faaf411873eff3850e4', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: 'e0237c1fd28820b5827660cc3f343a0b0daad919' })), h("div", { key: 'd4be603547b585719296c5fe4a129cffd7e5e904', class: "color-sample" }), h("smoothly-icon", { key: '17a5e51dba9a921faa53a42a2bd0b94cbdb8f490', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: '30eaa873254116bfb5930a1da0f93924682d5810' }, h("slot", { key: '65f98a331cb2b8cabbe58715c2cc496950e5a92c', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: '972192b5efddbb9a173e2b50b35cfeebefb3a1f4', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: '9ec21361f064f9fc889aa1c1b50f672982882cb3', 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]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
+            } }, h("smoothly-input", { key: '3a8211dcd537f07359729f79b88c33ffa8dd26e6', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: '932e1fee6e31f8942841ae068404f674d20c6d75' })), h("div", { key: '55de847010bfc30641a1b4814fc7d4ea1beb8b63', class: "color-sample" }), h("smoothly-icon", { key: '7e69d59ceb71c617d93205b6ada24bc0a0b6d3fe', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: '38771b0daff4bda14ecb821f7ec0725ef575f50c' }, h("slot", { key: 'b005802e73faf84b2772e7bf28163963abe619ca', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: 'ed68b37bbbe25ccb1cfe00167b21b49fdcad5326', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: 'a3643b4c099fb94dfc57b8c2658bde1711aa0c5d', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -6637,7 +6637,7 @@ const SmoothlyInputColorDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'a24614a0d013b44ad55334eba6849d7d4c2ebdc8' }, h("h2", { key: 'f003675167b0a648e3de7cd44a2a2c53a27c1e3a' }, "Color"), h("smoothly-input-color", { key: 'd562fdd31044939c84dd7bd6264adfe9ea4a8bfa', name: "color" }, "Choose color")));
+        return (h(Host, { key: '7b11b0f228e5e8655a3db81717e614354b9fbdc0' }, h("h2", { key: '41e22ff3427c56b0e5b5b5c837215ce3c8e3667b' }, "Color"), h("smoothly-input-color", { key: '778d1355985c37f4b8b193b65d0a534c640c5c1c', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = `style.css`;
@@ -6758,7 +6758,7 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: 'adce039516ed0f3009e61150455b2c51cc0ec899', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '9050a4383696852cac8b11bf7a426f41d592e3dc', name: "start" }), h("label", { key: '82204edd99bc733897ad6a05d79efc8dd74c83f6', class: "label float-on-focus" }, h("slot", { key: '6a479c63d63fdad7947cd25497f3dceba64574df' })), this.placeholder && h("span", { key: 'a905c85bffb75afa43cf2ea7effdf6a985ce64f8', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '0e7c8d8a86189c99f83750435da80988153c6519', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '6271a396fe0a9db78c65a3ceac415baa6993ce72', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '67762b14cf3c1a8657441805585cc22920fcddf6', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '88eaca53d97c64fcfa81e0f749b1e9ff3a0068c4', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'ed5ff09959095128feac27c0c5c4b8ba8b51514f', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '7d482a7dac0561c9f339948ef22573c9f49ccc51', slot: "year-label" }, h("slot", { key: '6a55528882645e6cc6c5e14b3498b480b8c1d6fd', name: "year-label" })), h("div", { key: 'c310a5c99728b55d0b3f19cb494cc7fe20f12353', slot: "month-label" }, h("slot", { key: '3a4324a869730eb9acb114243a4feae03318b6d5', name: "month-label" }))))));
+        return (h(Host, { key: 'd610c101e778aa42a9369aa03f1caf8e14b8b5c8', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '44cfdeb10640f183b8d5aee0a40630dc6d3e994e', name: "start" }), h("label", { key: 'd7b5fdb309c4cbe5ca865169953f50e57bae8d4d', class: "label float-on-focus" }, h("slot", { key: '7230b56a3bdbb7a83a8c45800f056734b01bcb90' })), this.placeholder && h("span", { key: '4a0606f9f3d1bf1610393006ee6238b386b56655', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '19e00959912e9a0ba57bb0989d86a54fbd06006d', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '2f7b6396f29e43ff06f86749b20358fd9067def3', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '384b7d43cebf3f16a8f14687acd424bcd790a55a', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '445ed1618b342123b180cecc999a2899176095c6', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: '6345ea59f7dc66a47dcb0b33b01f15b9a3c7720d', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '6a2d605946629fafeb1a951aa4ce923d5c3cca53', slot: "year-label" }, h("slot", { key: '7352785fb90f97fe59dcc2662e81c12ae3544e70', name: "year-label" })), h("div", { key: '9433f633d73a13a3638df8374cc807e7adfe11d0', slot: "month-label" }, h("slot", { key: '2f9176a79690a41028a1633e5bb6b4bd9c464722', name: "month-label" }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -6786,7 +6786,7 @@ const SmoothlyInputDateDemo = class {
         this.alwaysShowGuide = false;
     }
     render() {
-        return (h(Host, { key: '2eddf4f43fc88d4f0baee5472fb55f98be8464f2' }, h("div", { key: 'a505bd4d499e9fce35b50c88dbb3e3375fe7e36c' }, h("h2", { key: 'b79d4c949fec7c008314b3562ba56ddfe22a1202' }, "Date input"), h("p", { key: 'f76bb9f59b85781610474db18fe10891f1560330' }, "Different locales formatting the same date"), h("smoothly-button", { key: 'c8c39579e4ab97b4b455c88514b7b6d0b78ee781', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: '9e921d7050071821148968680950fe00a0bdad8b', looks: "transparent", onSmoothlyUserInput: e => {
+        return (h(Host, { key: 'b0b29015752f46939700b57c62a07fa06ffe4e40' }, h("div", { key: '513e17083a0162befffa69473ddbdece8548e9ba' }, h("h2", { key: 'd9ac3875a4027fb083c7daad59d99fea4ce27ade' }, "Date input"), h("p", { key: '995523aa50c0634d265b3b9d91f5dac9a8502bf0' }, "Different locales formatting the same date"), h("smoothly-button", { key: '10a90fd4fe35c81b689d4c0cc547cc887b852669', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: 'b7d9b9ab464d611493eb029a1819b1890da7e0c3', looks: "transparent", onSmoothlyUserInput: e => {
                 this.alwaysShowGuide = e.detail.value;
                 console.log(this.alwaysShowGuide);
             } }, "Always Show Guide")), ["en-US", "en-GB", "de-DE", "se-SE"].map(locale => (h(Fragment, null, h("smoothly-input-date", { locale: locale, name: locale, looks: "border", value: this.date, alwaysShowGuide: this.alwaysShowGuide }, locale, h("smoothly-input-clear", { slot: "end" })), h("smoothly-input-date-range", { locale: locale, name: locale + "-range", looks: "border", start: this.date, end: this.date ? isoly.Date.next(this.date) : undefined, alwaysShowGuide: this.alwaysShowGuide }, locale, " Range", h("smoothly-input-clear", { slot: "end" })))))));
@@ -6923,15 +6923,15 @@ const SmoothlyInputDateRange = class {
         this.smoothlyInput.emit({ [this.name]: undefined });
     }
     render() {
-        return (h(Host, { key: '1f8b2d046cbb64b8df5343a945cb51563d721f27', tabindex: this.disabled ? undefined : 0, class: {
+        return (h(Host, { key: '4aafb51483d57234d6f42a6252a45078a5cc4054', tabindex: this.disabled ? undefined : 0, class: {
                 "has-value": !!(this.start || this.end),
                 "has-text": !!(this.startHasText || this.endHasText),
                 "floating-label": this.alwaysShowGuide,
-            } }, h("span", { key: 'abc0f86b086ba26c3b1d4951394d81da35f83e86', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: 'a06c2b9b096aca90e83f765b364dca7544ed99ca', name: "start" }), h("label", { key: '70d76e4a489a17cb028c4b8831d352171214d58f', class: "label float-on-focus" }, h("slot", { key: '929cd10cba08419fbfeb0e19e99d01ef52bfaf96' })), this.placeholder && h("span", { key: '8c91d08654b77a865869dca0633c04d1af54d57f', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '5a37bda38fa94c90ee8e5440f085c9eac3b81648', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
+            } }, h("span", { key: '5516903b15400ea4dd7dba463dd173ef48ca03df', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: '273d0fdad0534db6f46e3c37005ab0649edd8abc', name: "start" }), h("label", { key: '67fd396fd707428cf9413a5b8bd6501485874e64', class: "label float-on-focus" }, h("slot", { key: '67a092adcbb0abf829ffb68b48e2e37cc6dbc5ed' })), this.placeholder && h("span", { key: '54ed8804af377cdde573d7d148d62544adae5eb8', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '3144566fd5983266e70637449965c0ca981962b8', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
                 var _a, _b;
                 return (e.stopPropagation(),
                     this.end ? ((_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)) : (_b = this.endTextElement) === null || _b === void 0 ? void 0 : _b.select());
-            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: '694bb773d16025b187d059c8b0cc7b36f94956d5', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: '830739f213b8c3a27619d7f29667483f4317b612', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: '90767c1048bbcc816563496f3d3afbea4970e953', class: "smoothly-icons" }, h("smoothly-icon", { key: '9f6ffbfa8e626160be54d8e82f8538d5a1e75c5f', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '83aef1b1b1c8726f0a7b8b939fcf1d54b07a8389', name: "end" })), this.open && (h("smoothly-calendar", { key: '395c5ba753121d7a0eb1c2d1e986cfad58e98232', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
+            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: '80257b7865d284f87a6aafd9f53acead98612f09', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: 'e6bb858a6a4ee6669ec02949f7e5dcd668187970', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: '4ccdcf9160a7bb827309e5f5cd908095ba90a0bc', class: "smoothly-icons" }, h("smoothly-icon", { key: '7dbf49e194b48313c7b54eb1bc43d2660f7cf3dc', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '63448fe06f310d74951d3ddbd8b8511d1df170b0', name: "end" })), this.open && (h("smoothly-calendar", { key: '1d334b289c960660269e869ec6e42544beaaf0d7', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
                 e.stopPropagation();
                 this.open = false;
                 this.start = e.detail.start;
@@ -7065,30 +7065,30 @@ const SmoothlyInputDateTime = class {
         this.isDifferentFromInitial = false;
     }
     render() {
-        return (h(Host, { key: 'faf40611232f95c653ef583a7f0b7ed32ebb400d' }, h("smoothly-input", { key: 'e0761d639e8d0b3a4f305a05e70e5a6df241fd29', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+        return (h(Host, { key: 'ad93ad9f51896e7b99f721d7a81808e092816c03' }, h("smoothly-input", { key: '0e212a092315fa9a0feaaf67f3c2127a6c5d76c2', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail.date;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }, h("slot", { key: '7fbe6ae1b6697d22ab4037bcf86ef6d27ce5f923' })), h("smoothly-input", { key: 'cd751c2a4dfe09b316772c07e126ad0c5b875eb4', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }, h("slot", { key: '3365117b617114c1c961a34660585c2ddae7f93d' })), h("smoothly-input", { key: '91b0c6323b1451c1b40f23bcf2aab162eeb2bf4d', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: 'ff4cc79cf32d9cd9528010965e6bbb2c60026f57', class: "colon" }, ":"), h("smoothly-input", { key: 'd96351c5c25c042915f2ea78f94365648f620e35', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }), h("span", { key: '30f3a9608f30b70ec0e999b1087f124a2c0f8f9a', class: "colon" }, ":"), h("smoothly-input", { key: 'd3dfb6f59c4bffd573187b513abbcc3f26621389', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: '258c62771f84b3816025a7831756d52ddc3e61a3', class: "icons" }, h("smoothly-icon", { key: 'f10cdb5bd42fe2a1bc8e3c9eb41cd488957bb0bf', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '867ca6ecbe958d5f97e126fc4df23c6fcef6e1fa', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'd1c1ea3e905b5e677883c273231794de21777fc0', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
+            } }), h("span", { key: 'a909976d14881c52ff1461afde62ee22acccbea0', class: "icons" }, h("smoothly-icon", { key: 'd200862fdf9b53b85d1deb9569cf4b9c93aee077', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'c5391f31a81c2b9ed019fb27e5aefb2e41a91d49', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'ac41f035d3f92fd3116dfcf360f2e4d921a829b0', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
                 this.open = false;
-            } }, h("div", { key: '0ab989467e67bc709d0c45285a7eba7743606171', slot: "year-label" }, h("slot", { key: 'ae14dc89cb7cfa3df3bd12ed531d9e4f71242c07', name: "year-label" })), h("div", { key: '9e226c95c5ae7ab3af1e09a93d290222827c5dab', slot: "month-label" }, h("slot", { key: 'c0f55782eece8e74881124284504a2ac9489ed63', name: "month-label" }))))));
+            } }, h("div", { key: '3a0ea948b27c084501a8a98c9ad31195077abd86', slot: "year-label" }, h("slot", { key: 'cc59da90159452014a6434827619eade272e75d3', name: "year-label" })), h("div", { key: 'a7bbff950447fab625edc43dd12814b24711d568', slot: "month-label" }, h("slot", { key: 'a5d595242c8424d5a6021e7306c219cc828dbfb1', name: "month-label" }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7128,14 +7128,14 @@ const SmoothlyInputDemo = class {
         this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
     }
     render() {
-        return (h(Host, { key: '0610dea0130909d255f6dcbf7f798521cb18fc4e' }, h("smoothly-input-demo-standard", { key: 'e74b371f701b9371972b5428efb0ea4edea9244c' }), h("smoothly-input-date-demo", { key: 'c989f6853579a9ba68c6f57e2e6381c121ff091c' }), h("smoothly-input-demo-user-input", { key: '67189969e7eeb85c53fa6485cc4bc1c6f8810d3c' }), h("smoothly-input-demo-radio", { key: 'd277353814df2808ab955df71df8dd79a14e3b09' }), h("div", { key: '69864f1761f23e2d9fe5003d1a28895195587f23', class: "inputs" }, h("h2", { key: '9e43ab4414d38f5e7d6ed559293a364700e4e3ff' }, "Calendar"), h("smoothly-input-date", { key: '3cc461eaf51348c11e76a541f4e89c7727d49006', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '331225ff58737c6cd60986d47935cf906f143d02', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: '7e7535017eb1d6a683df758a4d017dc7cb1fccc3' }, "Date Range"), h("smoothly-input-date-range", { key: 'fad6725321923c5821fe74add6cef73a560c2496', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '21d5f9edc259b904554d64c234e8268184db9c78', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'd08635584ffc2cf923f93304701d5ae0130dcd57', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '46c5c5ca642f983a7d4956c83385ab25046044e7', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (h(Host, { key: 'ef33e129690f3cd0a771a1b12dcb8f9c79fa566e' }, h("smoothly-input-demo-standard", { key: '5e12871414915755af5fb0e896b2ae9cbaeec449' }), h("smoothly-input-date-demo", { key: 'cd9a7179d6d78b58c64a37329d170dafa3c4d4ee' }), h("smoothly-input-demo-user-input", { key: '1dc3897e7c1bb3de9b45084c880745abfadb568c' }), h("smoothly-input-demo-radio", { key: '3a6b7c1417ea8a91a62d4c911562175ba623c1e5' }), h("div", { key: 'd218e51f2785f7caed4318ea33aaab6dca63d05e', class: "inputs" }, h("h2", { key: '53ac6e802dd3e3581ad3dc2feb629537dbeaf9b6' }, "Calendar"), h("smoothly-input-date", { key: '25127e4d56c34404d0dc25d63b7cc96c5e8c3645', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: 'e3025c6634241fa1347c7b2c93a918288a2371d6', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: '6db99859de7c13e9d6d40aa5c7cbdc25cddffd14' }, "Date Range"), h("smoothly-input-date-range", { key: 'c56da60bdb19ea3c0305d1881180845f848cb625', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '556c9c8b45219b64f966252c9ea23b8a02bf78a2', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'd6e08652074753d81334f6f26872f16a4ad27120', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '65bffbaab83f117517cd37087c028d1ed2b4936c', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, h("smoothly-input-clear", { key: '3465328594f446fbbe97cdb87adb806f057a4041', slot: "end", size: "icon" })), h("h2", { key: 'e2a08b76ba392d10beb4eb95d8363620f07b53e4' }, "Date"), h("smoothly-input-date", { key: 'fbc0b53f5e576341027a9d0199e0a369cab1ed15' }, "Date"), h("smoothly-input-date", { key: 'b5ead1c49120a42e63e310361c29d31eabbcff60', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '18fab78a08e80b35d930d40be27c5f2863beaba1', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'ab9470f9a44be6a115ff89db7c50f631362cecae', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '61aa9be4f7193617ecc89d5250f9c97f30742c35', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '9ab5d2a554d2123360afdac3c266ac79c6035d36', slot: "end", size: "icon" })), h("h2", { key: 'ed8c37111142696858c0eac29661406ae2cd9f55' }, "Select"), h("div", { key: '9ae174d2d4a332de3ad770450464569378f05bdb', class: "select-div" }, h("smoothly-input-select", { key: '34f6a893981c3c8dc6703256a9f2c3089cf4ff25', name: "select-dessert", looks: "border" }, h("label", { key: '7198f30b4aa7cb91377cb72ef16cb7dca79d00ff', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'b85cb7fb77fe50cd6a42d0a6c38020dcfb2166ed', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'de464d05e6cdffe4b578e5708d1e9e33376a0521', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '553b7ecd797f0e55def5b6c460440d8286755f4c', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '3b4349b0785cd4440611499c23f082961541a91a', value: "4" }, "Cookie"), h("smoothly-item", { key: 'a5638b6d6424c31cb1d26cecb42cfeb1004e7674', value: "5" }, "Croissant"), h("smoothly-item", { key: '015c157d486120f18de97fae45e36b9e0b0ef863', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'b16c9fd651670b3808643e57043198550e3a1103', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '277ad384d61f6a4ce7fb849d90a7e2437f105841', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'bcd5acb1903599e959821fc91f6aaf60ad0bb5b9', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '3e5c1545a14684d153a252fba8060965f63b6c46', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '155d20eda1c0ed2816a7bac67d54b2e55a7a101a', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'cdf81df5d54168f33c679918e7f3440f0f8d5da3', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'ee8b1f2e292c76d0b5f1ea73501d56ed7c5c748c', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'ea635dbcfc236dec09da467db23e37b18fc8953a', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'de1bad5de86767304a5244812506166ac09ef395', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'a606780ffc3288ff2c3963c63d1e67922e27eb03', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '12d7b79350e82d58eab979ae139ba1895e6d60e8', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'b9c3dfe20a6df2409ef1e350bf6491284a583d5b', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '609d4f74ac6f9b7b3de0d6cf8239e357e273be3f', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '02c55364f84130fbe531450518a9f14c01d093eb', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '838cb077ef888a9474f387f3e103d1fe5a7446bf', value: "folder", selected: true }, h("smoothly-icon", { key: 'b25142bf3ef747ac3b0efce4e5b0570da8fe3fdf', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '230ece62e3958643281636ba4185118102394ce8', value: "camera" }, h("smoothly-icon", { key: '2388323ed7eb30ca002c1fdb0a5b3c39e11b5da2', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '39a9cf873e9f7d93b05de669efa66d38f2f23ab6', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '9789169a41dfb9e3162112e23caffbfe5b6daeea', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: 'e61e9737c489a68b612e38490fa4b2f95de72a6a', slot: "end", size: "icon" })), h("h2", { key: 'd7f0223de99a710561a28daf86ceb69d7aef1da1' }, "Date"), h("smoothly-input-date", { key: '2cf84ece02042c92ac3754379268a94ef536c91a' }, "Date"), h("smoothly-input-date", { key: 'b1b465843e3562c30e589af11004a09bf2b6157a', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '5810635fbfd26dd8735f8abd2c2e58f30affd61c', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'd63d51b77f52243dfa9f13fe2754e53919d21c06', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '7815c1afc2b1d38d3263630d8ef8d5a4cfa0a096', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'cf8b725f54894024063bb6735e17ed692195c994', slot: "end", size: "icon" })), h("h2", { key: 'db2776f12559673b653e4671f92c578471e65a7a' }, "Select"), h("div", { key: '64ef6bd07f27d07cf6ea6dd23ae434503fdcc740', class: "select-div" }, h("smoothly-input-select", { key: '0a0f832b86bdb2fc7aeb964d52f320a6d76cf40d', name: "select-dessert", looks: "border" }, h("label", { key: 'd95e443f3df2398ca64bd6bcd64d6cdd629d0a8d', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'c081a219a330aac151711e87423b474037b79628', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'c168ee280c6dea09c54d86ae72fe2c79e134d448', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'cfea0b38d63995c108f0277ca248647725d22a60', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: 'b93622e1a391c980d0c0371a0918dfca7ae7b456', value: "4" }, "Cookie"), h("smoothly-item", { key: 'e8733a8a51b09cea7ee31e4017f58152b58f5827', value: "5" }, "Croissant"), h("smoothly-item", { key: '90731e217754cb6c096cc190fb8b0c56c2bac593', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '0129f30c20777f9a37fc19ee8051e377507c9368', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '94d3b7ca28b5fe5f9c9a3c587d995c65c8be45ad', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '2d935f7418f8db300bf20412c4dd15934da5c0d3', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '3c2579bffcde279703cfc041b315560a6dcc098e', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: 'a49fcce300b665b0de07fe67b5ea798e2fa94626', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '4678f38edab9f88113c056ff820df2bd07e2fe33', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'fdcf2ecd485fe75a35ca96ed89352a343819b770', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'f5cafb0e4b020489c72db9cd2362936449826dbd', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '8c49833f66cee2e2ebac320c67ee5452a77636f7', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '146806189c90cecb94e0bc9a01c713695689a2bc', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '56bc9c8ef474ce79b1af47086b65847877d6a03c', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'b13d4158fadfb725ff6c1ca236f4724ba95936df', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '85d95f128731e5fd3ec1c1f3df672d98ff3a199a', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '3bffa0bfbce0ab015208bdff0d648bf8f6d497bf', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '05d80d05561b9a716ea94d8e3fb3e3d5afc66c4c', value: "folder", selected: true }, h("smoothly-icon", { key: 'f86490ab381f59ed6fcdacb1d7441697fe645fd8', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'ec29517ce6ee5b7353bc20fc3c4365751815bfc6', value: "camera" }, h("smoothly-icon", { key: '75c27c69a18c0c37a6d989a2268ed9fa7ffb6daf', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '7ff7efc5b6f7a47da43fbd859a0c20cfb013c1c3', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '3eb848081a594d164a7144ac8fe91719c11dd950', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'f387c1c723590cc0af87d9a1fd57d459c1cc73f6', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'a5db731994586ad163c1077afe56a23f8645654a', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'f1f9ee3d60d71883b4dd1b4aea488f2c22cde1d5', value: "1" }, "January"), h("smoothly-item", { key: 'a4432cbbf045646fdb7c5481edd5a4dc647e714e', value: "2" }, "February"), h("smoothly-item", { key: '5004b0e7acb2fca29c26f563933f66a141a87a21', value: "3" }, "March"), h("smoothly-item", { key: 'f9085fa0f5ac2bdc308a6e6eb5f76d060179adac', value: "4" }, "April"), h("smoothly-item", { key: '45c828dcd5f36bcb4624860f11ffe970ecfe3021', value: "5" }, "May"), h("smoothly-item", { key: '6dcc18a959124619842d5a7bd68b38b507ecbb80', value: "6" }, "June"), h("smoothly-item", { key: 'cd1b161f2f13dfe661b2d3363e3b20647c4ec3ca', value: "7" }, "July"), h("smoothly-item", { key: 'a5ae41fa7eed339f47f69aad3681eae4579e0efe', value: "8" }, "August"), h("smoothly-item", { key: '0016e486b487603da72487e53031739b85dc5318', value: "9" }, "September"), h("smoothly-item", { key: 'f1c6ed5593caa14259f74be4c8b3be20386e54cf', value: "10" }, "October"), h("smoothly-item", { key: 'f636538a7669567ff285e74a4c2de398546108ec', value: "11" }, "November"), h("smoothly-item", { key: '0a83028ce8f962d1b8d501041aad0a288a5829c5', value: "12" }, "December")), h("div", { key: 'e16c4ae44a81885c288ca235fc56e53d08b3253f', class: "select-div-row" }, h("smoothly-input-select", { key: 'a399d1152444fff42ea7b37ca41824a6ecf63d81', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'af648a4bb5f15488197c34a752e282bd60cf79a3', value: "folder", selected: true }, h("smoothly-icon", { key: '16d8cdf17dbf67544d10c06d8f599dd30b87cb61', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '39012cd32fa3bcecb1cc012160048d6817a94c5c', value: "camera" }, h("smoothly-icon", { key: 'a51166743064c08c1e9509fea17b60fde3f39556', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '5b13f14afbbf764ad387c34db65f48335c8e5ff8', value: "boat" }, h("smoothly-icon", { key: '855facc3a62046b5b3b4ff29f0d5226d2aff1c55', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: 'cc1e08d1120f45c8143ae6f28cbdbad769785e58', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'f12155b6e15ef36745915628c1ffc34a2c277bcd', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '32733265cff202c69112ac37afbbe51e9ee16b13' }, "Duration"), h("smoothly-input", { key: '1c359b65c54c00a291d4ab2fca662ae0823545be', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: 'b50a7ea8c22c140a5d1b81eb197caa88d79ff4cc', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '36db6fdd61728c21488000fb0e588858726de95d', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'b3a93c5d2b02f5c5ca50e2041db860082432ba0f', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '5b3f4d4dda6ca6bac04d3d58e14b1bc6808a515d', value: "1" }, "January"), h("smoothly-item", { key: '2137f933a08f0bff7661ef7eedb566ef0613b2c0', value: "2" }, "February"), h("smoothly-item", { key: '2b60b2706c7a4e560dc61969fe8bff8bae2ee3b4', value: "3" }, "March"), h("smoothly-item", { key: '10f7a805783997893080eba61a3a293901273b7e', value: "4" }, "April"), h("smoothly-item", { key: 'fbb81488473ab771ba92650e7f6c0d1e385a5486', value: "5" }, "May"), h("smoothly-item", { key: 'bb9a696e13859137773158b219807224c9e456d5', value: "6" }, "June"), h("smoothly-item", { key: 'cb9cb347df1ab4551d11a6104fea41e53646f7fe', value: "7" }, "July"), h("smoothly-item", { key: 'f636d5874c7b810b59d9aea7454ee060093946ff', value: "8" }, "August"), h("smoothly-item", { key: 'd7882ebaf8e4b13216201b04201f19d0152c7997', value: "9" }, "September"), h("smoothly-item", { key: '30815b5d8ae477d52a6896083f58d5e913fc6ec9', value: "10" }, "October"), h("smoothly-item", { key: '70658c05936d61c7e4faf8ab265d5e7ae448774a', value: "11" }, "November"), h("smoothly-item", { key: 'c737ec283e42443c75334f925d7fab3df2527a4f', value: "12" }, "December")), h("div", { key: 'a149cf4a6ebc5828e095c10e9d6d57abbc43c359', class: "select-div-row" }, h("smoothly-input-select", { key: '0b32d71db9eb24afd885c46ea5f414be1e55133c', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '1c4fb8eeb730b8cfe6e4818ca16c565014a159a7', value: "folder", selected: true }, h("smoothly-icon", { key: '082d0bba96283c4bceb9f92c3e772bd3fd8b7011', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'ea4df02bbe52f26a1888b2f74ed587beb09890fe', value: "camera" }, h("smoothly-icon", { key: '166ec449cff9acf04d866ac4786ba9f30b2a3b42', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '65aa76f7da4c5677b031fe45a5a86fca0a3d29ee', value: "boat" }, h("smoothly-icon", { key: '32d5688b2e74006e65131f11ee06890d8d52b5dd', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: 'fccc2a0bad4e53a6fee2a5ceca85a59b91d70090', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'f8a91a3e5d64b5058bb91a50dde94d3eb128f7b5', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '012a2aeb69da69b0ab9cff4b761500892f2c9aba' }, "Duration"), h("smoothly-input", { key: '55df5644b13c507f13d0efec711da4c3ae59dc95', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: '4aa5fe278bfd9e37e3a625b67304cadb164bdd78', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: '9bf848b3aeb2d99264b20270c030daf0a2e4538c' }, "Integer with Min/Max"), h("smoothly-input", { key: 'ef9a50d998c97e0ee62ce7521a47d9116596f594', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '3fc4295acaaabe23a12e6e9fd192371d137e2ebd', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: 'e3e23c2ff05c311d1d62b86d9de0e333aaf38d16', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: 'a92c74f2b45cc1df86589e62e97b87c8a7060351', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '05151b343a921085863acb3cc263fb4775fc1326' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '433ed8e5372266ef59393311c0dde265b79efb36', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: 'b5e460972d07d70a04099e129f4b11706ee6ea58' }, "Identifiers"), h("smoothly-input", { key: 'd059d3ecee65ec385e40d11bad328bde8be89246', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '669bda44ce4115dc276335a9566cd433ccc992c4', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'a775035df9b192896c2ce7f1beebe6e904c1d42d', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '359285e474ea704c36e73984c35e4ae245c47a00', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'f1a36423248b413cd20749f738fe12a8eeacae15', type: "identifier-camel" }, "Camel"), h("h2", { key: '2f6beac2f107dd3dc34a537e5b47f13d76206a07' }, "Input Alternatives"), h("smoothly-input", { key: '74cfbe969295b7cb9e02af90b126d9bdb60168cc', type: "text", name: "name.last" }, h("smoothly-icon", { key: '34e749e71f3d9976f2b71e57dd8644d53872aa35', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '61f44e09ab53cf0cf061007d3cf8426722e53312', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '55adb72f7485eb5f2235516c9d2839feae927ad7', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '642a573bebe0e805fd7d178dfc8befe7e77bba15', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '5bcfe9a74e7ec780fee1764933bd37f82b36495d', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'cd5b1bbd73247cfb21b6ff99a56c0989ec7f3239', placeholder: "test" }), h("smoothly-input-submit", { key: '02c46969366444af0882851f2f3a0cd80f1b61c3', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '3bc94eda5050b71ec193fda5600d76b5341b71d5' }, "Smoothly checkboxes"), h("div", { key: '165dd5a0d8e539c3d9fdbebf49ded093589acea7', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '17c781cdca9adf265d7418ca27ace984f0b70499', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '413a357d61374d72ae7be41bca5a7360b105e9e0', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '81ad9a572cb4e01b86ca1a189d4ce027c81d588b', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: 'a34d9d7860461de0a508e8f36ab3e89627475777', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'fc64656864d9c68ef8f8ee42868af8f6d27ff217', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '8d1461bc9cc61eb79488162501232355e27bb992', name: "third-checkbox" }, "3rd")), h("h4", { key: '0eca64c7ae21e4f915e7f146d36662983f5c3759' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '7677ce8ca260453a84a650fcced18a6592acc6a7', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'fd28ffad9dc1a32efb02131873f238c54fcb63e2', name: "checkmark-circle", slot: "start" }), h("label", { key: '63d92632a2ef4832fd863f55991480e1ec58fbae', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'a3e81d19c74fc5de2d25e44afb686793807025d5', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '5a4118fd0fb1b24e7a3e957c6186a94caf6c3160', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'beb9d9bfec1ebd2bd268b3c94fde2f23ee77b31b', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '91ff12f5c8d3911b662a4774e3d8887742de6b42', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '5e708295015296538d73936026d36e5badc6f805', name: "radioSecondInput" }, h("label", { key: '8ffb6b2f623f8e16a19d6b9d83b93b28d9fe2637', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'a5cf624fceafa16030eab1e9050cd3cac2c985f1', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '66ab2a39eb130a221dea6cc77beecb0c221cecf5', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '44792e09a3cfff26ec11c364e842db24f1eb10f2', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '78b2689f9c52960b2901431b22c7f7faec8605ae', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'fb6757b00011d410ffcf1cad4dcdfe1c586ca24a', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'dcd365bfd3792cab31ede99aa43edf5d41d8af9e', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: 'c231fb7b9c6d28546b4d13c87ef3a900b33191ca' }), h("smoothly-input-color-demo", { key: '540d7e3d4ec89f99ec6c67d725468e050ec0a183' }), h("smoothly-input-price-demo", { key: 'eb8164f02728a0ee68e10ecb949c6b7f45d2fff2' }), h("smoothly-back-to-top", { key: '98cd43c5de35cfeea70b77434dac7907648c1b6e' }))));
+            } }, "Duration"), h("h2", { key: 'bb855c65c4b59aef87c9d4d18ac6db6b6d21bdec' }, "Integer with Min/Max"), h("smoothly-input", { key: '1a5e0092eb5330cc384aafce47e1438abca4a590', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '359faaba1e62172b0224c8d8ec58e49cb5a81f09', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '6ce0655a6b0134ce4175d65f80792287e48eefbe', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: '3ce841cda01cbb2c4f346009648faa281831a4b2', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: 'e63ebb0b5996cbf653c6b6c969df48d635e28c30' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '62873bd1d9eadab148e0502f44fdbc779aa5a789', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '04dffd24a3af57da6ae369a8fbe9372893e6e380' }, "Identifiers"), h("smoothly-input", { key: '3d18b596880f98b84a07742cb9778d0095719294', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '190651f4f4263eaacd8b80f90f4074fef28da183', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '3a8802a9a173f518f975717cbe23cd1150316fc5', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '00ec5419cd67a7217d23f95513f451f2c8e98f8e', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '93eac4cce148e22640908d0d2f7c19a04b66d3f9', type: "identifier-camel" }, "Camel"), h("h2", { key: '98b93a5cb9daf216199adb5fa089ddd84bc96c61' }, "Input Alternatives"), h("smoothly-input", { key: 'a031c081e8531bad8400469ae449757958d7324a', type: "text", name: "name.last" }, h("smoothly-icon", { key: 'bf00331aeef0f1046c5505911d7db6ba845e636c', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '7824cf3b501d802ff40e4a750dd46defa9cac8b6', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '497b0417f5e7b0714753b0e5d78a78ab18130007', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'ba93dadda8140d398c1d350f98c53d2a08c440db', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '28e8478b908bb51c6c5949e986c69930d1b10cb5', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'fcb8531d6fe4129585e9a6d6e641022f2f14cb94', placeholder: "test" }), h("smoothly-input-submit", { key: '97a4d319d250ecd00ede7a5beb2c06b077e8e82c', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '50579aad1a91b0c728a127076a37be38273b3635' }, "Smoothly checkboxes"), h("div", { key: 'ceee0a83b7626132ac6323dfd894d8ece7ea2f69', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '0eab1d5ac670458ab57af847c9996fcf874fd985', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: 'aa4259b0bc0193a0e31b2bdc2f9550d1e7a9cd66', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '38fe8ffc98f95b0a81aba7dadb0a46f876ec09f4', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '40b2451d7fb2f705251abfb2158bc91a31ae9d3d', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '34675173c8447131c978ca934fdde0d8764f44a8', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '42c6dd2f0fd6bb72d8ce31158f0451c5f500fe2b', name: "third-checkbox" }, "3rd")), h("h4", { key: '94ddf8048c28f947c3d20a2440c49e9340448c58' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '0e308b17b5783bb23ce817cb30fbb9237a1b5b65', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '61ab423d103c3f04fbaae7d02d0a1685d576fcfe', name: "checkmark-circle", slot: "start" }), h("label", { key: 'f75b6164630e97ad5f1174c08afe841e7321fe28', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'fd4284b27663aed055dce8671b46881789ba7dfb', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '9554d37989867953cefb248a039d1c6217ea0c4f', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '7643fa634aa9693163de7926468ea47ea99d232f', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'ef750494dee99f5bf962f93f143a80a540834f20', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '3cf94704be4ce872a79a97abb4dc1828ade9ad71', name: "radioSecondInput" }, h("label", { key: 'd3feeed0e6debeaba6e95eec7c6effa4e3aa0484', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'ed5bc06f71277cc4ad5e644d4b07c42c80dd1027', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '944215e958076b552f4ee8e5728897f63e88657c', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '273705d445c5b1c1c01f6cea30bf8ad4036f932a', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'c16dee456ac64f1aa945dcf6934ff6734c63e597', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'd9795190e66042dedd027a4780900e2a32548ebc', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '985a353d4d42885a3597807d9b3a1d6fe2692520', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '011666bd072c688123437302f21ef556b9bc45cf' }), h("smoothly-input-color-demo", { key: 'a7e2fedb5277f19eee2c670bf88c1089ead1eb92' }), h("smoothly-input-price-demo", { key: '3e2f3d6d9e0e368ad4b8c7f3294bbc8cb19d3358' }), h("smoothly-back-to-top", { key: 'c2ecc189b026a4eae72d521e4cdffcfbd58ddbd9' }))));
     }
 };
 SmoothlyInputDemo.style = styleCss$O();
@@ -7150,7 +7150,7 @@ const SmoothlyInputDemoRadio = class {
         console.log("selected", this.selected);
     }
     render() {
-        return (h(Host, { key: '040a57805b385a247d202b5e955a7f8eba616010' }, h("h2", { key: 'f09dbab032e5a1236b6917adf732333decd4f304' }, "radio input - column direction"), h("smoothly-input-radio", { key: 'b433eda6893f6ace20301795321958f684f47d57', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: '2d9b7a2edea9639f1edebc73c8caca090765ce61', value: "1" }, h("span", { key: 'e42fdc99169da6f957f0f7d701f07e28ec3b6f75' }, "Option 1"), h("span", { key: 'ffdf79cbc7f98435a01a3a1a6c30c307741a566c', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '0d9d95f1375bca503b1aade350a87119bb329c09', value: "2", selected: true }, h("span", { key: 'dc6d2e6888deb8bf32a626badc8a01d1daeb960d' }, "Option 2"), h("div", { key: '5ab436788acba5bcf290faf1551513a1f1b493b6', slot: "detail" }, h("smoothly-tabs", { key: '097716e9e682a11b5eff9880e94c036a01344de4' }, h("smoothly-tab", { key: '4b4117fbeb2aec641c279690438452f1e0ff15d6', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '4cb637cfdb67a7721dc13348cfe830595d47027b', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: '1c4873e9b744831a602192bb520236b440d8b547', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
+        return (h(Host, { key: '926c46d5493184b5562db849fe49f8bc69467635' }, h("h2", { key: '482f5b5dad79420a7d17fd32f8ca364fff3fea40' }, "radio input - column direction"), h("smoothly-input-radio", { key: '56b8f69f400852f3476747d3cfca4e208659a55a', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: 'f8efa9578d1cd57ed8a1c39f99d1ceb61dc15c0a', value: "1" }, h("span", { key: 'e8a9613c4be5a9a5f22e27376e2a5c3dc9432e9e' }, "Option 1"), h("span", { key: '59f7cb9ed2fb5ca96e16af28567e6ac29c920ee7', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '6c4733d75808282a051c25ccafdbffae1efec8b4', value: "2", selected: true }, h("span", { key: '135b8ad7de02530fb2ec7b1748c706ed7ad6a275' }, "Option 2"), h("div", { key: '8d8beb1041e44e46afe0423540b385ad7aa0a0d1', slot: "detail" }, h("smoothly-tabs", { key: '9295b932c4f29d8672003b063930beb56075662c' }, h("smoothly-tab", { key: '970586efae1aa46ddeb1c6ef203b89682251d77f', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '8faade213577e3d7cd4481f8c09ca80210f8312b', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: '00c1e6c7f8fa0e3d2ee17f20ac212463f515c7a3', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
     }
     static get watchers() { return {
         "selected": [{
@@ -7182,7 +7182,7 @@ const SmoothlyInputDemoStandard = class {
         });
     }
     render() {
-        return (h(Host, { key: 'd2a4b3a8e5675b4fe394f551166318902c09ea84' }, h("div", { key: '67b40a89a1cbf17d511c56d966a9173e02a9c92e', class: "description" }, h("h2", { key: 'fdd28a17423a0da06745fc2aad06e1acbde54be4' }, "Input Standard"), h("p", { key: 'e9e84428aa2ebe4ea0b1d04410629ed85de1d329' }, "Height of input should be ", h("code", { key: 'faccb606910cbe8418c176efd45ff05eafd0ffc8' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: 'f8770ba1128622c8b40be48cd26214ed162035e3', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '82ce7ab02f341b560e6347164a19c9273580ed18', name: "color" }, h("span", { key: '4062538c8b4b25d9a1cc1f625df0313383990193', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '659e785d9f5e4043fcf15dc457dde4dc48676215', slot: "end" })), h("smoothly-input-select", { key: '656b68d41b449cde70e4d86b252dc70d994f63ce', name: "looks" }, h("span", { key: '39ef79d28d1dbec7a678b93fa031615457560351', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: '3ae946ee3c4cdcf5b698b0456499c4807e53b257', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: 'f73361b452096abbda4ebc6908371c397c0a9fd4', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: '7a4762f9122be37ce57099515e0d9fac7c18df94', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '0ac401e2b9e2525dfc899eda4957a61b99947758', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '2ba7f175d8aeef4301598f3c3da5d436a17c45c7', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '5844e0ab1cc53ecd0691d585fa4461f89c9994bc', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '6d46add6231e87d95dd8aea7bd91181c47a56490', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '43af9a815da45bc2ce0e54e8442e3a8ab1bc534c', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'cf6750528c66ee0c0b9e97478de77514cbd39045', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '4fbc0ba2b6b142f6c4ac8379157b2953d88cb062', class: "width" }, "width: 100%"), h("div", { key: '7fb5a3a68f6ed4d14bcab9758a8de0a95de7e80c', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: '3d379565ac3335e2ef39e7d616b082fd5247619e', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '7d37fa391bb86cf43fe84db4826d8394c04d8af9' }, "Text"), h("smoothly-input-clear", { key: '5c5b48cd36f13a3b50fc49809edb17148993a004', slot: "end" })), h("div", { key: 'c666bcf200205fbe3d4e045ee69530b217d4845d', class: "height" }), h("smoothly-input-select", { key: '9a2bb30a995830fecbc0dc7f9df2895470ac8e3b', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: 'd91f28c2c80c6b95703b9476c8d07b64387f989a', slot: "label" }, "Select"), h("smoothly-item", { key: '61aeaf05ac730b30d7fb29b749dcf6ba59932c9c', value: "1" }, "January"), h("smoothly-item", { key: '131052c2a6ad24d5c93cda5352dd16873e81fc81', value: "2" }, "February"), h("smoothly-item", { key: '599a8b88c0abd24346856c8c653c1adc69d432e0', value: "3" }, "March"), h("smoothly-item", { key: 'e8933cb5d5af0fbb4d898a919a1d0ccc26584c11', value: "4" }, "April"), h("smoothly-item", { key: 'eb7b7c07dd9fcb31eba2b5a8da79da32e14f2c67', value: "5" }, "May"), h("smoothly-item", { key: '48e70f3d930689aed016ac28241e6f8d253f61db', value: "6" }, "June"), h("smoothly-item", { key: '738b7ad9d5286f6afc8ad033d9cbb9e066c4c861', value: "7" }, "July"), h("smoothly-item", { key: 'aad0e64de6bf35b315fb3472c8cad86e3fb195d9', value: "8" }, "August"), h("smoothly-item", { key: '81c533fd3eeaa48ae7917f6064a17724b101b650', value: "9" }, "September"), h("smoothly-item", { key: '69f567c427f80cee633f72ac4dd06a4d4b4a27c7', value: "10" }, "October"), h("smoothly-item", { key: '0d87e5fa94a04a60b527d7a5f1670b1788bd4339', value: "11" }, "November"), h("smoothly-item", { key: '34b1425da536971ffde20fbab5b96c9d23f71fe3', value: "12" }, "December"), h("smoothly-input-clear", { key: 'd16aad09e1f53274a0c6d23c071f2abe1157ce4f', slot: "end" })), h("div", { key: '51931a5ed8ec83b8937cd7899a303569cf8bf7cd', class: "height" }), h("smoothly-input-checkbox", { key: '20d5a02ab8d8f1f709b030a0258598de61250555', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'd36312b0bb0393568cf05e51eea4cfa057dce607', slot: "end" })), h("div", { key: 'c1353494563098fc08fe2c93cceeb80d56a1aa51', class: "height" }), h("smoothly-input-radio", { key: '84976dd68dfe5534f28c02395d2476593bcb3bcd', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'fd87d0cfc047bcaf959908191d798ea774daca25', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '4029068fb2fea98f2b5c19ec87e8dea13cf22365', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '1ab27866d3db524f52da4f76a3abb5eff1deeed3', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '9415dd464250d9af68a54de51a9e6b15234f8faf', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '8ea8291c65ca421b0044fe3e0da4127f9fac0c40', slot: "end" })), h("div", { key: 'fa351e941ec780e05a037c2c1948dabd8ef371e8', class: "height" }), h("smoothly-input-file", { key: 'b45c3bf3c7b5e9e8408a6cecacdda30c7ce392df', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '7e81668b6bf2a3f72238d18d02c21f19bf6c2756', slot: "label" }, "File"), h("smoothly-input-clear", { key: '4ead6310cb554351b45699cbbc6d84804d26611b', slot: "end" })), h("div", { key: '73cd3845233377057ff16a18b9ad85eb4e4be30f', class: "height" }), h("smoothly-input-range", { key: 'ec0f42a5ee5fddd52fb5c0d283f9add183e429fd', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '49536b00574ad5e0cba72b9a8fdeee599435a886', slot: "end" })), h("div", { key: 'cc112e755aeb5724b6e4bc511ed1b4e32b394d08', class: "height" }), h("smoothly-input-color", { key: 'dbd6daa2196f6ba316721ed338c0638d6c713e00', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '04197c11337298f86531d7ba52d67df221619051' }, "Color"), h("smoothly-input-clear", { key: '6489a29a796e8e443efdf27574df27e4e24111ee', slot: "end" })), h("div", { key: 'e48defb9f45eaa2f935b0108cf3ec6e331d4ecb2', class: "height" }), h("smoothly-input-date", { key: '0a5c51ecc51013f9572ed8cd8ef38f6d92bd4f5b', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: '21f21c543ff1df34c50333fba2d1ca8377ea4e37' }, "Date"), h("smoothly-input-clear", { key: 'f8226e817b97c90070b649935ac70d6ba11f7b30', slot: "end" })), h("div", { key: '8920789228e2911822a6b822d1c8c37537a225e4', class: "height" }), h("smoothly-input-date-time", { key: '2e58e0e5f6370f7a4d0dd7f17c56718038167e6a', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '9ebc24b5b639628fd5f3d11a72500bcd6ae9ab0f', slot: "end" })), h("div", { key: 'dddb389df78c212ec451422436e3f0468f523065', class: "height" }), h("smoothly-input-date-range", { key: '76b7832bcf134165961c00e610180ee37b74968d', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '023a98551ba8d1b848665506fdad5282338a2d2e' }, "Date Range"), h("smoothly-input-clear", { key: '078a1ca386a3f814286b35fc0579573b8e4d64c3', slot: "end" })), h("div", { key: '32733c0b81a14c8a982c1607d5635d807894b2ae', class: "height" }))));
+        return (h(Host, { key: '2e355c9aa093b8466d23357c9aae6d88011170be' }, h("div", { key: 'b212cbda84e5965666cce503713c85baaa045d32', class: "description" }, h("h2", { key: '21f4edf40038c44f1b745a0f0ae5c15a4d909ee6' }, "Input Standard"), h("p", { key: '3f4cf3c1e07effe5cb728f54311cf92f438eecf5' }, "Height of input should be ", h("code", { key: 'e5c546b13ce7c73522216a1509e50022c786a36a' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '6c3be1205cf4699ae45248278c21a217f5d35e9c', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: 'c76494d9a20e705a7a9350f621104aec46b0e857', name: "color" }, h("span", { key: 'c1ccb2f1c17b46e976fadd5331f07c4d7a699791', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: 'dbaa782144733cdcbec4d5257e21b0a4f170e5e5', slot: "end" })), h("smoothly-input-select", { key: '28b28e354ac6fc5637ecf14acccfe30bfef11ff6', name: "looks" }, h("span", { key: 'f1452804684f0a76d78542a9cb64928a478f03ec', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: '3ca928155a582e8b5ab68ebdc2de073c390b58ed', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: '99e0f80359bb1d1813b4445fc642aeff881d0d12', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'fb4e997a1751c7a05fb97d40ae5e151ad62e7a53', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '78a9cf0fe349660d1f6869a4051051006b0f13ac', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '01b1d2c7089b8d24d40de9799f6296d8e2e1c34a', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '3a8c24b67d02e7e040ea452bcb74dfcf8176eb6c', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '143f2e8974ac80899bcac6c582cfe071c370b491', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: 'd16643507059700194c9b5b5d402d83d68ac7d42', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: '5c3a8ad043a7d87f872343009acf3b09c9c61b40', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '2f5cde81d501ffd5c2bce64e1b54586f489cd11f', class: "width" }, "width: 100%"), h("div", { key: 'a055e7019d888ca2c12161581c2c77a35fa247ba', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: 'f7840a4c2c7197895adabac250b283dd1209d440', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '5983ef639593b4f877b77b99d58f08d9fd47b98d' }, "Text"), h("smoothly-input-clear", { key: '252b68a3efdc6b70a0532eacb18cbcd137b207b3', slot: "end" })), h("div", { key: '37c4139e98071dec4901519ba10a075219e270bf', class: "height" }), h("smoothly-input-select", { key: '6ed894124eadea113968089eba5c38c7fff2caf4', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '2229eee3d5a4cab69d203a4f3b8f313693d1852c', slot: "label" }, "Select"), h("smoothly-item", { key: 'bfb7e1e1302677b556256f5c871eaabf83a1a22d', value: "1" }, "January"), h("smoothly-item", { key: '37b4e1404f0d93c3cfec6ae778a009cccc481f37', value: "2" }, "February"), h("smoothly-item", { key: '7804e2f534c4cd279e5f29e212bc8b3f07d3be9e', value: "3" }, "March"), h("smoothly-item", { key: '7de014b6870276d1afbc3f8b4780dd789b42501e', value: "4" }, "April"), h("smoothly-item", { key: 'e30eac74368b6ae4eaf58f371c8bdd0d030c76c1', value: "5" }, "May"), h("smoothly-item", { key: '90e999da893c3c3d6c9aea57d500808fac2f64d4', value: "6" }, "June"), h("smoothly-item", { key: '0c3ae02ce9a1c9ab4fca7c06fd3809ee8067bce5', value: "7" }, "July"), h("smoothly-item", { key: '689c71f20be3bc6fb057445c5ceaa60718f05603', value: "8" }, "August"), h("smoothly-item", { key: 'b1443376f5fa483d15873c9232290f6b6e270f1c', value: "9" }, "September"), h("smoothly-item", { key: '5055f6a2b1e136f911f32bc053d35c1931faaf02', value: "10" }, "October"), h("smoothly-item", { key: '512f871512f7bdd02462b286f724b66b7a845c48', value: "11" }, "November"), h("smoothly-item", { key: '4b6c5608cd060744cdd798803e67f2188ada562f', value: "12" }, "December"), h("smoothly-input-clear", { key: '7fd619f654ad16a0048a12793092d214bb87a7dc', slot: "end" })), h("div", { key: 'ab13b70b196dbc83d694145abd870bee5d121be1', class: "height" }), h("smoothly-input-checkbox", { key: '2eb487f1b741e7b12b50bc1b6eed8990a89b059e', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'df9db551b674bb4df52b7c84bafbf25adab266fa', slot: "end" })), h("div", { key: 'bb29d6b57fdf27d523c4690ce4903187590c5b18', class: "height" }), h("smoothly-input-radio", { key: '12e400081cb687023137e7f1a3834915c846ac3f', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'd0646e2ca2ddd5ec6d7b6cdcddace55e907f4f59', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '5f2dd2ecb3289f99f82367cc0ab4c14b578ca0a3', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '5abdb6fb7897c18e088c85ec08313769e744583c', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '2bba28393706691b0973bd9f92836bd28c890b07', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '5853dbcda5ed68ce1401245bba244f19a248ccbe', slot: "end" })), h("div", { key: '7b1fc6de01785728d758ea07c55c3f2ff47415c8', class: "height" }), h("smoothly-input-file", { key: '1eac17bd99f215911b95f67312164ed294952b6d', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '43d11a34c076520aed899bceb035c829836fd725', slot: "label" }, "File"), h("smoothly-input-clear", { key: '106b3c31ae10b64bdc4bc309a3512d58e929f4e2', slot: "end" })), h("div", { key: 'd13c20742bb1e088160b7cc59efb5f75dbfa4eaf', class: "height" }), h("smoothly-input-range", { key: 'd81378e953c5fe82ec020e544de7cf15d0e76434', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '27e6247aa7c628859ebab11d8da32cf8be3dfd03', slot: "end" })), h("div", { key: 'ae21676a75148c438d070bf932e96b09f2237325', class: "height" }), h("smoothly-input-color", { key: '718f8309dd37c5e4552de5a2d5c00483b6397127', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'eaadb8d6f5fa9f6143f2d2549e1b7901e32b2bef' }, "Color"), h("smoothly-input-clear", { key: 'f396f11146e3fb840e559086cf45ec745fe9dad8', slot: "end" })), h("div", { key: '60c4fcb685302ae33a5ff3f700b1b3c0010fd316', class: "height" }), h("smoothly-input-date", { key: '9eadbb8a6648c0986b83bc6c044683ddc7012472', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: 'f2502eeec674553779739ba3bf9d6beaa55566a2' }, "Date"), h("smoothly-input-clear", { key: 'f36a9a9403e5aa756a5c1a955cc526b2b349aeb3', slot: "end" })), h("div", { key: 'd0a81dd6a18ae37f0c55e7aa448d4323197b4e40', class: "height" }), h("smoothly-input-date-time", { key: 'a2c25b754dab6b88d1e25a8abecbe227153eab18', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '8e392cdd2f0c92a9aca8f1e468c236065fd3c2b0', slot: "end" })), h("div", { key: '76f81fc46a552dd4ebe1b15b888b85e0faabf5bb', class: "height" }), h("smoothly-input-date-range", { key: '3837975fd0e591d52386c1b12f3171d64e91cf80', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '676c2f53a26198524881f0221c73e6b654bb13dc' }, "Date Range"), h("smoothly-input-clear", { key: '1e4740db4bf043f74cfafa1e7e91312878b71b86', slot: "end" })), h("div", { key: 'db0449b44b24dd20fccdb99329b876d938d5f68c', class: "height" }))));
     }
     get element() { return getElement(this); }
 };
@@ -7201,11 +7201,11 @@ const SmoothlyInputDemoUserInput = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'eab36e7674fb973f979c4aaed34abadae7576fe0' }, h("div", { key: '8225faa4114dc00127534d7a4400b1d9b23f4ae7' }, h("h2", { key: 'a6e84f195de0a08ef8ea173615663417db7cb4fb' }, "User Input Event"), h("p", { key: 'e6aad349cb3b67654e5eb4499aa0088367862ceb' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: 'ca92dbe2b5834d176ee33651b5d4287ece6d585c' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '96cfdda6ccf73450ce38e886fbb26681c17667ea' }), "Check the console to see the details of each ", h("code", { key: '13af94b46758e72141f7ba0da21f93f2ef70a052' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '5f3eadf13479a585b26f63bbd14d5a06d4efd82e', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '18606ed8401bc0a7a9146ab7b8da848b9f155971', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '89d848edf493f23af859f999c62788cd58f89b9e', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '223ebf76fcfd12bb61cf78cdafb7cc2a6f9ab95a', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '1bb540b065fdf0f3571482e0c8a3417a4d9be70a', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: 'c8759cf4029e8910db9eca83c856bbcd203721ae', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: 'a613696a09d76a9410d66e4fc51833db30a8acd6', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '552e86df8bca79435198c9d18258d89471c17f2f', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: '83d0d370cfb15750bfec897741493bf51352409e', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '205e6dc2498d0ae6b95a119aba4d19c75cefabea', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: '13bc5121320b0982bdcf65c0ea5454841783ef24', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'c6097f9351a54aefda3b9f51694c71d4faa803a5', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: '5356c9d3d1ebd1edc281d0802deee76cd098ed7d', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '18d6651482ef0254f9c1dd1cdefd2127c4d67dc1', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '3da5ff4f15a19d39a1537fc0f3f738bc840b17c4', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: 'c20a4edf0546a89bcbd55a1f67840ffb6ca6a98a', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '0ab185dd19fabc2ded8387b5d08b1580d47726c9', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (h(Host, { key: '3707001c9bf5406f3770f566924f8983d4444e18' }, h("div", { key: '6970bb763108f56a34284bb1f3cb73545f2dba2c' }, h("h2", { key: 'e5f96a2b6c360e8f9a81dd90d148822758719850' }, "User Input Event"), h("p", { key: 'e1fb246660c29ddb2791f4dc6f9779ed5f1c18a7' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: '5a9145c2d8517baff49e70fd4aeed1f38600ba7f' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '15459234d2bf75b83479ff0786a20d2433e2dec3' }), "Check the console to see the details of each ", h("code", { key: 'bc857f9996667580c4ba88a74eca429fbc0d9c83' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '66a1190b2266b0650ba087572545780f93d86ac0', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: 'a8630cec4bbada0c7084172822b3eeef576066ce', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '74fe6cc20fa495f2d6c79d13bb016bc76cada1bc', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '5f1ad8448db267de3fc98b820be7aca9b64c2a9e', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '507fcecb4e27938be38144991221dfe3603c0667', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '883f987123234566bdfd192ebd71605b078434ab', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '26a326a43a44339392cca252cace5148c55305d9', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '39dfbc581f8468c49969d5186c9a39304c8b805c', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: 'f26209ed69e401cacbf6ea0094c1e3c8c6640181', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '30b7f2d96d68bbeef6578e5c3fa07d5c56e8131e', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: '7d1e0c7d7175bae2453a2392e47a84e21faaa4ea', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: '0d90079afa3c0beaf9562af7b6db39c0a2795008', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: '2161ee4b978c2c37049cfc3d1bfd6ea5de6e16ea', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '271b3aaeba445473425259990276cf6803eeba55', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '5d21c601bdd2b921e6d6cd6596e871fe0ce0d486', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: '176fda15f938f2b90134e186c75869db175621a3', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '50ee6d7e90187eca79dea958e43fe4d38bb4e544', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? isoly.DateTime.nextDay(this.datetimeValue)
-                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: '402a80aa4b3b25a460d2acec85964446350501fa', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '89b12f184e5f3c2953b3882fca43dbea273f5178', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: 'b688a44b6ae626c27a5e3e26d4c9be570d0f59f1', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '9172cca5a258985cda5f244d38d56b692ea75e00', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: isoly.Date.next(this.dateRangeValue.start), end: isoly.Date.next(this.dateRangeValue.end) }
-                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '7c2c3867bb8465daf5da9496c70e717bdfd2616c', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
+                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '4ee747fb66efa022a9e31fda59f4ca839e4b0c5d', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
 };
 SmoothlyInputDemoUserInput.style = styleCss$L();
@@ -7238,7 +7238,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3fa8bd92acf77d574acfe3bd36d305e043376237', title: this.tooltip }, h("smoothly-button", { key: '758777db051b7ed16e62e11c01c74d718cfefea7', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '15d7fef684aa41d04a1a5e11ffa18480ae6aeee8' }), h("smoothly-icon", { key: 'd47e6290709546c917d2b15ad60e30fa1df11410', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: '9a5ec7132b415604c425c43a2ac7c460c6ca784b', title: this.tooltip }, h("smoothly-button", { key: '68711cee29eb01755e85b9acb21bd153ef88f2df', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '73063df194c9194a5d06dc2c1d0fee8d03d0cdfa' }), h("smoothly-icon", { key: '39b4f6d6a588feeedfd6610777e323dc0da34f32', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = styleCss$K();
@@ -7354,7 +7354,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '92ab54c45c171373ca1202527ac452358b1c8de8', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'e7865d1f743acdb3f262f812e47a7aa33e7f455b' }, h("slot", { key: 'ea009dfb71d55f4de0214c0188abdeca97cfb126', name: "label" })), h("div", { key: '9875aef8a3075c1c93450da31789c263279d2104', class: "input" }, h("smoothly-button", { key: '70c1985a28a92b0df083fcf89caa8bc6798f94ee', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '4b3eb404ef91e9ed042e2fd99b22e012a7f07780', name: "button" })), h("span", { key: 'e41716ae95c78739678c28d50d9ba65f830384fd' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '89f1c26d6d4d7bb4cc52b8897ee30bd1b36717d8', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: 'b88edd52dcbe45bc147a152cb8550de5487dfd70', name: "document-attach-outline" })), h("input", { key: '44aed5773dc5425b492ef090685df3575a1358e6', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '4a24ad4127a02b97b04369952822aa354509ca0d', onClick: (e) => e.stopPropagation() }, h("slot", { key: '70189241ca504152198d2c20c68bdfc0f31eb71b', name: "end" }))));
+        return (h(Host, { key: '2e050fb7cb01d7ca5883d61d758ac5977e4dc924', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'f86995572138b5b55929705c4aa61bb3b3c8a1d1' }, h("slot", { key: '52a4f69b13363d0a1fce31f90606ff4d21208121', name: "label" })), h("div", { key: 'c54b40386b0d0efba68b056be954938879ed7df9', class: "input" }, h("smoothly-button", { key: '9e410cfb7cb0fc2b978f4f74256a753c43491f17', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '41b301b936471d3c57001a1dbd44ca8372624c3a', name: "button" })), h("span", { key: '619c56a1f7e01df014208f2b4372db8a3da3daeb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '22bc6bb85102cb5863ed88a7d6cbd51fd931c646', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '6614887b4520638121de556ee1b22cbb7da6ed7f', name: "document-attach-outline" })), h("input", { key: 'f93e131c684891ac1b7f956a699db014dde8108c', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '0d1d1835e479070204bc72f083a6747d05387c82', onClick: (e) => e.stopPropagation() }, h("slot", { key: '7df7be0bc7f23c18e349bf5bba640a6cfa83813d', name: "end" }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7480,21 +7480,21 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '28204b265ebea6c0cbb757b8cc4a6a1e01e3b74c' }, h("smoothly-icon", { key: 'f4c14f7bf0825b0baede2c01ff097482ec9d75f5', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: '0916e28b908af47e518baff4c2953a15c4e5b93e' }, h("smoothly-icon", { key: 'fd4d9e582a0feb692b8fc4455e0fef445326d929', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: '08a0e79d5558899bbc60d20b9a3e8b13bd736bed', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: 'b09547849f9f3e7f3780ea4e6231bcd47c4ae175', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const month = e.detail.value;
                 if (month && isoly.Date.is(month)) {
                     const value = isoly.Date.firstOfMonth(month);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: 'fe85ea22cbf1dda9cbae9ba96b2d6e45343c9a31', slot: "label" }, h("slot", { key: '1f0e5aef19949285791558528dac50ada4cb1f32', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: 'a5718197e3389df6c5d175ecf362826e5a6dafad', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, searchDisabled: true }, h("div", { key: 'e1f4f143cfef863419a68b24e887579ecf3fe9d9', slot: "label" }, h("slot", { key: '01b386aa3ec76ba077158774c26256b1c25c97ca', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: 'c7193a5c1430db7fbb14766b5e1985e1258cdb77', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const year = e.detail.value;
                 if (year && isoly.Date.is(year)) {
                     const value = isoly.Date.firstOfMonth(year);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: 'd4d00cd1968bf5766fee52de789f9fe983730210', slot: "label" }, h("slot", { key: '1b0a796b6cb66e6c549cd6eaef2f281ef519816a', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: 'dc499bc33e59e0f918194a7a4b3a61bcdd270600', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
+            }, searchDisabled: true }, h("div", { key: '0d5bc697879c2c018331583326029b20fc7a442c', slot: "label" }, h("slot", { key: '3909a5c34b455c6ed65f6bebf7a2174e0577de2b', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: '441a3228fcb722ab8ebbcb1138aba71e0306625a', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7527,7 +7527,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: '2d35ede0ba48999e163c9b401e822a703c049639' }, h("h2", { key: '6e3c78bd7a51616418555e74379ed81f4351688a' }, "State demo on smoothly-input"), h("p", { key: 'd43ad6219d21d065dc62197872e4cb689fececb5' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'e2a250b7bfb6433bc61fa3d740df11cae0713f85' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '4d111e1bd9fbc0dcc57d3a842cfd0756a4807991', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '4c81a6bf8c3d854f3443942a6c1fb64db9b67b54', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: 'c467c7cb0bc71a80d80b0249bbdaf6b6be48af4b' }, h("h2", { key: '216b76ae5cb923903331b846f0897471ae96bd87' }, "State demo on smoothly-input"), h("p", { key: '50522fbe29c228cf83f1450dbcb32e96d37b2587' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '5393c97d661ad1dd1fe8bbac11a2f731ad7fea77' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'f782f50671c0b67344238121e6d742df328672bc', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '18a4f7dbfc952fcfa6db9188f8ad98c0c7f98731', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = styleCss$H();
@@ -7686,7 +7686,7 @@ const SmoothlyInputRadioItem = class {
         });
     }
     render() {
-        return (h(Host, { key: '548451e8afccb134004214398c0b040031bc9592', onClick: () => this.inputHandler(true) }, h("input", { key: '75518c6651b452bce6ec4f805555871bb503d032', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '0edda6108f36a759d2bab5e188c4c336daaa1756', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: '0e909f5c587e643e61fb99c3b5458009591ac813' }, h("slot", { key: '026b2f86ba15cbff2b7fc4e2514b82cdf0d7941a' })), h("slot", { key: 'cc688d36199d3de40150f38763035593d96a1799', name: "detail" })));
+        return (h(Host, { key: '6cda60049d14ae191ab196ba44e1b865b337638c', onClick: () => this.inputHandler(true) }, h("input", { key: '5e312eb0fef6fde4eeaa6f450447b0d2cd0536fe', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: 'ac4eed680c8cb314f1b5f4a9857e6646aac6cb82', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: 'c96f7fcd07b7687db703519960ae88101abb17c6' }, h("slot", { key: 'a3628941ed9b7a933c3a92908b0b5fd03d20d98e' })), h("slot", { key: 'f689489ccc1616f2715c1336979f674d64f56a9c', name: "detail" })));
     }
     get element() { return getElement(this); }
 };
@@ -7795,18 +7795,18 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'db02e0bee4842a0dcce6ee6856758372481f2fb4', class: {
+        return (h(Host, { key: '5156fee6f8e0d7a3a14c11bc6476424935972d46', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '5bcbb8d839800fef403fc14fc981182f6ed9ae30', name: "start" }), h("div", { key: '26827d93b47f12eef2709aea32588c1ec6786337' }, h("label", { key: '20c1213e52d592773db4c68b2bfcfb721d62d364', htmlFor: this.name }, this.label), h("smoothly-input", { key: '5e0bdd6c0467690f2d91cc33f24e7f3710f4b063', 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(),
+            } }, h("slot", { key: '85ba263c778cec6970979f819a815a98088a8dae', name: "start" }), h("div", { key: 'd1e281cc39cfd5b442c298659ddad32927f83a7e' }, h("label", { key: 'fbe971c908c237c3f2497e8c5c4d858abf031be6', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'a123e5a35b4524d8d3f200f31dea6586947e2a3e', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: 'a5502d4adaff32f798bc8e8b198d8f5258ab27e3', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'e2afaea01a569f8cafcbfa09dab6ad6551e76f07', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: '8d3df2b1b5899cfe814bb70754ca586af4a5de25', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '819a42fa4da5e95b804260f99197524fa2aaf90d', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
                 this.smoothlyUserInput.emit({ name: this.name, value: this.value });
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '92c309c4224fe86c16b22445f2ef1ba4168306e8', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'f9373a748b2d160781543f267373f12c43dfd46b', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: 'f0d1d8872a42854cf442f996de63ffcf584995cf', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'e3e904b4883dbceda975cd4d74cd526b77c5d471', name: "end" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7831,7 +7831,7 @@ const SmoothlyInputRangeDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '93085adc52dbed67cd824108eaaf64b3bda0fb6e' }, h("h2", { key: 'a91437c641e21986ad592c73f92a14234eddb9b9' }, "Range"), h("h3", { key: '5003225e9af30f278a7f37ccc1daab93df370e80' }, "Phone Number"), h("smoothly-input-range", { key: '5c790737cea0d76367f27072088ee92dec80a662', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '6bff0c3ac7f529787a042a7b02256eae19ad5b4b' }, "Stars out of ten"), h("smoothly-input-range", { key: 'eaee03d21dc424fc65158b29a4a7d3b255209fd3', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'f2124aaca6dccfa59cf65efbb9dfbecebf575740' }, "Percent"), h("smoothly-input-range", { key: 'ce14e10e75cf3320b2699021f99c5757b6598bbe', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: 'a12635fed326ae754cef8e15aa8f728c0bea9639' }, "With icon at start and clear button"), h("smoothly-input-range", { key: 'f8050fdae3ff4e0be8f00914e6580d69df51c18b', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '438d15ceb8cd3360ebc6394ee7aee2b0131ac808', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '98dd0d35d727339290b76dfcf4348a846db22396', size: "icon", slot: "end" }))));
+        return (h(Host, { key: 'fd572625434e3a3a511d2fdc4e39a11734eee8fb' }, h("h2", { key: '0bf7d54f8cf11e3e870d6c1152fdad2665baf305' }, "Range"), h("h3", { key: '37f05494fea8a36a05684fb0ad0aede0d27630aa' }, "Phone Number"), h("smoothly-input-range", { key: '68d94bdeb4db077a49a011c4849e99a1b33db40b', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'd1b81f1dae6424d685997bd8dfe02a10832a1b2a' }, "Stars out of ten"), h("smoothly-input-range", { key: 'dca3283520395117ed946a844bb46f7fc52c0212', max: 10, step: 1, label: "Stars" }), h("h3", { key: '8670432a44d93f9f7dbc315c1f0a51d9aa79100a' }, "Percent"), h("smoothly-input-range", { key: '78863ada16280bb963e15f1682aa8131667a1bd3', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '1b4a9ba5d75f92f1f90dc46a4710a35edd2fe2e9' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '95c8798a86fc50de7ad65b67f837a71e2743c2ae', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: 'f44529bf690bcf4ceff1dfa1520d2cf92a456f2f', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '27ef758b1ba28f93ae5a19cc14fb1bdbf1415c70', size: "icon", slot: "end" }))));
     }
 };
@@ -7878,7 +7878,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8be31b0878733c9af02d47f85fb2ce160d66f064', title: this.tooltip }, h("smoothly-button", { key: 'ffacca4558cfe1b94c3399ecbb4384ca6730c208', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, h("slot", { key: 'a0b3a925b4062d14975cb3479f4cee3f40de7af7' }), h("smoothly-icon", { key: '8ca0aa0f3a534558de7fcefafe9267a1992d9594', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: 'f69a407428454170f461cee5d8e6b8ece33f682f', title: this.tooltip }, h("smoothly-button", { key: '21fed26fa5cb6c8dc32af427f492cb5879682d3c', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, h("slot", { key: 'ed9f01c4274c9b5b59c6cd27c2cdd62e3a7bb259' }), h("smoothly-icon", { key: '0ddd9963d333449a5d029b6c29f532ca8d2b3423', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = styleCss$D();
@@ -8255,11 +8255,11 @@ const SmoothlyInputSelect = class {
         }
     }
     render() {
-        return (h(Host, { key: '3eb062d5cc34ecef9c9341630243d549aad808c3', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, h("div", { key: 'e605a24480a0b3dafbd1b596fac1725d5e25be84', class: "select-display", ref: element => (this.displayElement = element) }, this.placeholder), h("div", { key: '3366fc93ccab479a0d9d67e206617941ad091340', class: "icons", ref: element => (this.iconsElement = element) }, h("smoothly-icon", { key: '3f64b7dc283062976a7292160917ab7a8c281521', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'be63eaedc949912f5717ecceabb64ac93910dc98', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: 'e41773f5b431e916f8177e76b877290c5cad7db6', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: 'd2c2d0d9a983dfe2609b18eedda29244a339bbd8', name: "label" }), h("div", { key: '5e51033c06fa134e945ff2c27245340bcaed2069', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, h("div", { key: 'f4237bc5b2001f68aa5fc0b30a0df08f4bf2bc4e', class: "search" }, h("smoothly-icon", { key: 'b23bba84f76f4da515ddeffa9a2ae7f62277915b', name: "search-outline", size: "small" }), h("input", { key: '86e28d85b9fd95a039d084db092b098342244813', class: "search-input", ref: el => (this.searchElement = el), disabled: this.searchDisabled, onKeyDown: e => this.onKeyDown(e), onInput: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); }, onPaste: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); } }), h("smoothly-icon", { key: 'e585529e50786c3ffc2dab72245230debd60558f', name: "backspace-outline", size: "small", onClick: () => {
+        return (h(Host, { key: '6d9239e0bb319a543a99a7c1d5876ab8956834af', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, h("div", { key: '1bbd7412577695182436ea90d1e9034e541ddc2a', class: "select-display", ref: element => (this.displayElement = element) }, this.placeholder), h("div", { key: '20ae505d620469c1c9c1844891b17001833583c9', class: "icons", ref: element => (this.iconsElement = element) }, h("smoothly-icon", { key: '281acc334850d4f32a2a73c289181b5aba66c955', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'c571161f39c874c66656f81a7aa3fcf2f3526cdb', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '555d40a6a768e0f28e427f8eade8afd35d127f00', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '009fd9d19911fb0790d2850f9d10b867da144ed1', name: "label" }), h("div", { key: '5b7eeb9d3aefeabdf47193a367d47f314696ea2f', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, h("div", { key: '8f6e8ddc7f8b5505ee806d0a1fbf081d25feba28', class: "search" }, h("smoothly-icon", { key: 'e49ae095f2dc52ed27f8b8006cf41fa65e880d76', name: "search-outline", size: "small" }), h("input", { key: '2c8c17873271a717f6ee14455ecb717280a45b99', class: "search-input", ref: el => (this.searchElement = el), disabled: this.searchDisabled, onKeyDown: e => this.onKeyDown(e), onInput: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); }, onPaste: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); } }), h("smoothly-icon", { key: '7b008955b46e1c60e5fff82faf06f2899e6cabd1', name: "backspace-outline", size: "small", onClick: () => {
                 var _a;
                 this.resetFilter();
                 (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus();
-            } }), this.mutable && h("smoothly-icon", { key: '49866182fe80ba3ad18e1b821e7c2a55852f4bb2', name: "add", size: "small", onClick: () => this.addItem() })), h("div", { key: 'f635f6143d0eeff2e01fa0283f7f7d1c337ef8d8', class: "menu", hidden: !this.open }, h("slot", { key: '7f483cf3b64fb231c724ef4004073cf232d1a7ad' }), this.addedItems))));
+            } }), this.mutable && h("smoothly-icon", { key: 'c8ad6a47483f41b314cd432a55820df927feb326', name: "add", size: "small", onClick: () => this.addItem() })), h("div", { key: '7d6c90136e1d0ff45b1639d3366c312c94ffde33', class: "menu", hidden: !this.open }, h("slot", { key: 'aca107a78851a9af53747d7ee022255ceac9dc9c' }), this.addedItems))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8329,7 +8329,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '771dbd864209f2f419212813858c654de9352797', title: this.tooltip }, this.delete == true ? (h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (h(Host, { key: '70b53b4424d3bb5c5daf2d8cedbc0ef488a35e38', title: this.tooltip }, this.delete == true ? (h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
 };
 SmoothlyInputSubmit.style = styleCss$B();
@@ -8375,7 +8375,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (h(Host, { key: 'a7ee995ec37b480a02715fb95c885152560cc0c1', tabIndex: -1 }, h("slot", { key: 'dcc2403a2253a7059dc88b4658c17c6533876a9f' })));
+        return (h(Host, { key: 'f86c77b9ed66eeca4f9521883517fea9a8ce3292', tabIndex: -1 }, h("slot", { key: '9a72363e41c726d78c213179afcebafcafa48abc' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8394,9 +8394,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2ae229f53b855fbc470064e7ded803a990d98711', title: this.description, style: {
+        return (h(Host, { key: 'ce3bb78edc46a6edd6ceeb2d8d799835e74e889e', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '52d6798bf0fbea2948297aad2fe3a71a000b4f76' })));
+            } }, h("slot", { key: 'e2d3e99a943fe1a2e862e0102d87c327c9c3f1b8' })));
     }
 };
 SmoothlyLabel.style = styleCss$z();
@@ -8413,7 +8413,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (h(Host, { key: 'ecab373df940835270db5097a80b0214fc97907f' }, h("slot", { key: 'ac37f8070fab8c51b229f6dc81c9f2e65e64f251', name: "before" }), h("smoothly-load-more", { key: '3e43d4fd0c5f37d7826b7cc7da796fec07c7f7be', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '815b33c3657c84b81f0dd12768f2f2e983df48a9' })));
+        return (h(Host, { key: 'ba06250ac8a325c3b51801b09999efdbd0c552f6' }, h("slot", { key: '89e3aa0b677038bac4a999c3aba63e8f86f3e9ea', name: "before" }), h("smoothly-load-more", { key: '4d817981ffa9f3231972a3eb153339ca805c05e3', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '55ab66fb5706d1bb40350a5b545b97ddb5787eab' })));
     }
 };
 SmoothlyLazy.style = styleCss$y();
@@ -8457,7 +8457,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return h(Host, { key: '88150a06ccdec5a72446a3f8dac86339b3007b72' });
+        return h(Host, { key: 'c53981c4ea71c41217b4a4262c971dab45a84fe9' });
     }
     get element() { return getElement(this); }
 };
@@ -8482,9 +8482,9 @@ const SmoothlyModal = class {
         this.open = true;
     }
     render() {
-        return (h(Host, { key: '12ffaa744cfce7d329f9e335be7b63827eb40644', role: "alertdialog", onClick: (e) => {
+        return (h(Host, { key: 'c8517f814256addf886be09be0058a8c15b73c14', role: "alertdialog", onClick: (e) => {
                 this.closable && !e.composedPath().some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("modal"); }) && this.closeModal();
-            } }, h("div", { key: '264ba4a63559188eb2fdc52d0b15014ff8991622', class: "modal" }, h("div", { key: 'c99296b4e6b05e4669ffb56b4ae93bf815e2e449', class: "header" }, h("slot", { key: 'cf25306f526a89e8daea125faaecb33d72fa9e4d', name: "header" }), this.closable && h("smoothly-icon", { key: 'd676f4f20a6ee187295a7f7ebc573e3a06a98ed6', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '22955703aec9be9e882bb77cfd0fd327f2436903' }), h("div", { key: 'd8dd03aa8538e9cb373282aab2f55a6793e76c83', class: "actions" }, h("slot", { key: '45b9e1bf4300ea44dbf13b50839ca9689576121e', name: "actions" })))));
+            } }, h("div", { key: '665feff20545ab424191b52e7cba17414d6d79c9', class: "modal" }, h("div", { key: '1a459e840e395cc03825883b8305c070929dfc34', class: "header" }, h("slot", { key: 'b89490cc7029d45456126502db3985fcfdd99fd9', name: "header" }), this.closable && h("smoothly-icon", { key: '83559c6915c83f2f2fdc0ac3e173e55845b7b4f3', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '4f069fcb1506d9fbdcaba2c657c7af533dec9bae' }), h("div", { key: 'df07bf9b97164aa24c8a7c41440494372f2ae9e0', class: "actions" }, h("slot", { key: '78a5774d274306aef00dc5a6cb91bf0027b84543', name: "actions" })))));
     }
     static get watchers() { return {
         "open": [{
@@ -8549,7 +8549,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: '6c91fd348be22152c98396a00e0f333901e7edb3', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'dfb962471e36cd4b2b063d81470dd2500c5f52ab', fill: "clear", name: "close" }, h("smoothly-icon", { key: '0552e3732cdc2371b430c565b7bc243a6b855446', name: "close-circle-outline" }))), h("span", { key: 'c7df2fc46e03a56f937d3fcddce3ee9a9a199b88', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '8662182866050fc3aaeeb51b0d79529c0a57e10b', name: this.properties[1] }), h("p", { key: '0f539660c5267a748ba9fc514abdd33429b9042d' }, this.notice.message))));
+        return (h(Host, { key: '73f1ac93fe920e40d0045cf9ae2c756ffe451d66', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'c044dec06d857487dbdb8a17d20c6d07c6b7e370', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'd33fb56efc3ff17f1ba41c16ffd4ed214b98bc57', name: "close-circle-outline" }))), h("span", { key: 'd2554c0a86856c3f8f760d8e71f9761b619ddf41', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: 'f4466028e87356a50f0cdb08ba23dbd1d65d5689', name: this.properties[1] }), h("p", { key: '6de62c145781c1127b7ea762a371f7a142bc324f' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": [{
@@ -8574,11 +8574,24 @@ const Notifier = class {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (h(Host, { key: '00187e7d82c05944c3e4ed5ce6ae2367b113e2fb' }, h("slot", { key: 'ce3b80b8e40d1a745cf910126cde0fa97a16cdc4' }), h("div", { key: '2b8faa5193ebf47c4cb7a8602c3821d44c46dbcb', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (h(Host, { key: '4e003f931f925f8b9b7bf025a30ed5637d1883f6' }, h("slot", { key: '24474dce23d51652d402faf096be33cbd2356a53' }), h("div", { key: '23d8511a4e84d13e2e19a623ebadcc7957881221', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
 };
 Notifier.style = styleCss$v();
+const SmoothlyNotifierDemo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.notice = createEvent(this, "notice");
+    }
+    task(succeed, ms = 2000) {
+        return () => new Promise(resolve => window.setTimeout(() => resolve(succeed ? [true, "Task completed."] : [false, "Task failed."]), ms));
+    }
+    render() {
+        return (h("main", { key: 'e3d338d08a8155c994f121e190583b1492631049' }, h("fieldset", { key: '3d775b4ed5229982b2dbe2175a80223ccda92106' }, h("h2", { key: '0a351b1923d27a7bf576c2fbb43cd5368ce6442d' }, "Immediate"), h("p", { key: 'bff747d88b7d561ec2a60a65b76ee0c1bc49ad39' }, "Fires right away and closes after the default 15 seconds."), h("smoothly-button", { key: '1b8830e040cd6530425d3d66b5c78a7ed4e80357', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.succeeded("Payment processed successfully.")) }, "Success"), h("smoothly-button", { key: '3ad3baf9b33d67c27fdd0cff8585f7b6eeed8807', color: "danger", fill: "solid", onClick: () => this.notice.emit(Notice.failed("Payment could not be processed.")) }, "Failed"), h("smoothly-button", { key: '2c90a3b3742edac4c4afcee809048e65375ec705', color: "warning", fill: "solid", onClick: () => this.notice.emit(Notice.warn("Balance is running low.")) }, "Warning")), h("fieldset", { key: 'e9740e78990b6beefb77c16663e96d627b619b7b' }, h("h2", { key: '9668a13f88db3b43b20e84d64339e46c0b876f9a' }, "Task"), h("p", { key: '9625eaf81bd2a90ca74094f5a6ba4a23e8605853' }, "Shows an executing spinner while the task runs, then transitions to success or failure."), h("smoothly-button", { key: 'e99ab12076adc90e2097c7586e4f6d2377ba592c', color: "success", fill: "outline", onClick: () => this.notice.emit(Notice.execute("Processing payment…", this.task(true))) }, "Execute (succeeds after 2s)"), h("smoothly-button", { key: 'c37c6803dcc33ebb1789e981ec9bbd4453df2944', color: "danger", fill: "outline", onClick: () => this.notice.emit(Notice.execute("Processing payment…", this.task(false))) }, "Execute (fails after 2s)"), h("smoothly-button", { key: 'e37ff795ca11e50e80bac180c0b9fae40e8ec587', color: "medium", fill: "solid", onClick: () => this.notice.emit(Notice.delay("Payment scheduled…", this.task(true))) }, "Delay (waits 5s, then executes)")), h("fieldset", { key: 'af63d14a88d1cd79fb022d5efbd9f5a42adf191b' }, h("h2", { key: '2fe03dc548758db94a03948f0595a296e145a0e5' }, "Custom lifetime"), h("p", { key: '6aead78b7f995d63d29f75d8a164aaf2188111bd' }, "Controls how long the notice stays visible after resolving."), h("smoothly-button", { key: 'f480806e042ba24075c030c7a767a1fb4a65de22', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.succeeded("Gone in 3 seconds.", 3000)) }, "Success (3s)"), h("smoothly-button", { key: 'bd377ef80546a629a08919899fff0e4c57ad24b3', color: "warning", fill: "solid", onClick: () => this.notice.emit(Notice.warn("Sticks around for 30 seconds.", 30000)) }, "Warning (30s)"))));
+    }
+};
 const styleCss$u = () => `[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 SmoothlySpinner = class {
@@ -8588,9 +8601,9 @@ const SmoothlySpinner = class {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (h(Host, { key: '458303df1f0703dad9d88e9a6c1dfbd063de34e7', style: {
+        return (h(Host, { key: 'ecb6e441b9ff2e197c2b600e2c5b2d51cd95ee89', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, h("svg", { key: '8065db9227fb249027fe4b7dbc79152de2627ec2', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '8da0fa969c76d3930a14005f951f79f20dc6bf57', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, h("svg", { key: '5e6288163ac9a0fe615a91e8431fb78a966630ea', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '7ad5566138f4d87e15be7bc0d4777e80cc6c1f83', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = styleCss$u();
@@ -8610,7 +8623,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (h("details", { key: 'eff4cfcc4681f7ae8a50dffb024ed2a2c7f34a82', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '579a019b8ae584f018c1a039ad2f637eb136db88' }, h("smoothly-icon", { key: '5b13ecddb1ee8805bba66d60aff9f1cfe8cd10b3', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: 'b01c31deaf1bb7574eaa5a383a5385555444845d', name: "summary" })), h("slot", { key: '04fe3aca685b1108f7227f2c45d28d6ef38e9292', name: "content" })));
+        return (h("details", { key: 'e033a7d2dadc508342c0e35b8b50502452c285f5', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '2081c1c5e3c154fa26e4333f519f56232895ee74' }, h("smoothly-icon", { key: 'e8c587d8d364e72e1dd1e2958db8f784343a8508', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '158befa55709d084049bec16c29d2bef2a2884e0', name: "summary" })), h("slot", { key: 'fff93c13da720ef9e0905ac698bba0baf9dd9c20', name: "content" })));
     }
 };
 SmoothlySummary.style = styleCss$t();
@@ -8655,7 +8668,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (h(Host, { key: 'dd61170ab95f4c9ceaca14bea3f9a232960a6d9d' }, h("div", { key: 'cfc1188d6c8c405c46a234ad9ac98eb81fd65ec8', onClick: () => !this.disabled && (this.open = true) }, h("label", { key: '25b8c5b4de124f5e597a524aa086a54f3f65ba56', "data-smoothly-tooltip": this.tooltip }, this.label)), h("div", { key: 'd9931e625c2f70c92b8c6ac0efa66f28ae7f4d62', hidden: !this.open }, h("slot", { key: '5811a6f791ceddbf1ef12a80913357fabbc53e5e' }))));
+        return (h(Host, { key: 'ae035e66fbacdf7ce232ec1be2d73b2573bea978' }, h("div", { key: '8b16f293f91934e88ac5d41a837f83506ea50737', onClick: () => !this.disabled && (this.open = true) }, h("label", { key: '3d2d6e324ad8bcfe438e5ed9000271c04840f3ea', "data-smoothly-tooltip": this.tooltip }, this.label)), h("div", { key: '3b041ece9f6bd5931bef85b1b3d8f50ea1200e1e', hidden: !this.open }, h("slot", { key: '157b5ecc4ace4e1318629b12a34d9e7b52d20af4' }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8680,7 +8693,7 @@ const SmoothlyTable = class {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: 'e1e0fc478ebf90003f156eddb44e1de2213cf4e0', style: { "--columns": this.columns.toString() } }, h("slot", { key: '10e080ed0213084a43750f73df364993b30f72b4' })));
+        return (h(Host, { key: 'f875112f3c3c917be64b0874106e35a318b3ded5', style: { "--columns": this.columns.toString() } }, h("slot", { key: 'f84673ca127c951381152b7e5b70b3d0d16f584a' })));
     }
 };
 SmoothlyTable.style = styleCss$r();
@@ -8692,7 +8705,7 @@ const SmoothlyTableBody = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '35794212738d56a6ee77383f2cdee89a57db82f1' }, h("slot", { key: '34c2c0ce45bc87a5ce11c7ded126b1bdb89af320' })));
+        return (h(Host, { key: '1f19a1c0da7b296ea394daa0bc91ac499424ad0e' }, h("slot", { key: 'acd72cd22a3d49c02de514f5f9818d16ff913897' })));
     }
 };
 SmoothlyTableBody.style = styleCss$q();
@@ -8706,7 +8719,7 @@ const SmoothlyTableCell = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c135688a83c65d795da7cbc7e946df1842b7eee1', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '06ae1f08e462da16c0a010a99facdbd2bd41f71f' })));
+        return (h(Host, { key: '71cd9be174ec7961ae0b338fd5775a0f8b41264c', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '9cbca72183db11968f3a6630bd1a226830754bd7' })));
     }
 };
 SmoothlyTableCell.style = styleCss$p();
@@ -8718,7 +8731,7 @@ const SmoothlyTableDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '94e95e0d83a8ff1f6b0175d81f6a4d0f573b3387' }, h("smoothly-table-demo-filler-row", { key: '0517b70eb65ed6a34faaa1c7805907f304654951' }), h("smoothly-table-demo-group", { key: 'e92405b3fa081cfa94f0311970db780f44782bd5' }), h("smoothly-table-demo-colspan", { key: 'd9f10e07549f56da20d1dcbca45f3a497db3e072' }), h("smoothly-table-demo-simple", { key: '0ae3ade94e2cc900e0a5362f65778163868f3ef0' }), h("smoothly-table-demo-nested-no-cell", { key: '9d0f1784998f8f7607f93b914cd2d5c53a986f8a' })));
+        return (h(Host, { key: 'ce870c3cb75e3021ae6df094be0beb4e15a4fa96' }, h("smoothly-table-demo-filler-row", { key: '8454629cbaca209d691c20e2cadb2084fb813d0c' }), h("smoothly-table-demo-group", { key: '4a39a52dd85a7820ff9144684ced5a9c39e68b9a' }), h("smoothly-table-demo-colspan", { key: '69466e2c64c235167f3f48ce792a883ccb0c4304' }), h("smoothly-table-demo-simple", { key: '7185d7dfafc506488c5d8de8eeb2d1f0771712af' }), h("smoothly-table-demo-nested-no-cell", { key: '30e67b1983df629081c1c4e7cbf4787817ce2bbb' })));
     }
 };
 SmoothlyTableDemo.style = styleCss$o();
@@ -8730,7 +8743,7 @@ const SmoothlyTableDemoColspan = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '591888818b4300109779447443c6e5aab1b14da8' }, h("smoothly-table", { key: 'c938d62de711c1ccf5f4688757b3513df44e8af8', columns: 3 }, h("smoothly-table-head", { key: '479a91f092d7ab61f5e023187b3962cbcfa752ea' }, h("smoothly-table-row", { key: '09acaf59f4ab8afc3af9931911547c6c9160e96c' }, h("smoothly-table-cell", { key: '7d8343c2153cc0dad70a3b93f713297911b6a999' }, "Date"), h("smoothly-table-cell", { key: 'e383250690b45d63ca6932488089448063a00b59' }, "Skip"), h("smoothly-table-cell", { key: '9249209f1c691bf8b599c19a7c69241b4c375bfc' }, "Total"))), h("smoothly-table-body", { key: '08ae40864961b80b1522166a429f53962f0248c5' }, h("smoothly-table-row", { key: 'ea7dd286a24979f8d193c215fcf97728a165fa16' }, h("smoothly-table-cell", { key: '441dee1ea77f41f61fc110987a62e404a05aa297', span: 2 }, h("smoothly-display", { key: 'b6f97a5c900d27d4cd5c8a3193c08d379c73da0a', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'a3c7b056c9b0af04ec00c95d01422d2f56c3c806' }, h("smoothly-display", { key: 'dc812c579111236c03c21edaafb7906297cb2625', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: '004a397622e3facc508a92e645a3ac4fa9532e0a' }, h("smoothly-table-expandable-cell", { key: 'a4b75ba00befe6a8a34fc5c99690cb03c3ade7d7', span: 2 }, h("smoothly-display", { key: 'bb91f39b2d8833ad116268618a9be82aa96a2fc4', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '51e9b4cf9d9a9ef15c04996aef32d7ec916ae79b', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: 'cbce7604964ca0c217d549bc1b1e50758b0217b8' }, h("smoothly-display", { key: '3cabab2c49146b2ac49882b592ce38cae1dd17ce', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '84d7a668b2f59da0df7a95eb1fa3d8221365f2f8', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-table-row", { key: '8c8cabd1f86d8c435925a3e2386bfe91f9d604da' }, h("smoothly-table-cell", { key: '36d5b65550ad5c09fed7441e9c0892bdf595d979' }, h("smoothly-display", { key: '3580d0ec9bcabc49ba7e3247786c3626760dd405', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'cf38589846b2f9925a79f79d64c298e96a3174b8' }, "Not Skipped"), h("smoothly-table-cell", { key: '2ae25896d0fcfaa3884da36a63bda5bd730797bd' }, h("smoothly-display", { key: '88fed0a43e38e936abc981beac382b83e86263e6', type: "price", value: 320, currency: "EUR" })))))));
+        return (h(Host, { key: '0c48cda90a42886342351b0a4f4b0ddcdbba84e1' }, h("smoothly-table", { key: '6ddf793f667d275b6e3969331d06c1d2f5e4c491', columns: 3 }, h("smoothly-table-head", { key: '425732dcb06bbc7dd1c5b46689fcb9a5d1f8aae0' }, h("smoothly-table-row", { key: '698dbdfbabfb904df19d92aaef652fc57b4371ad' }, h("smoothly-table-cell", { key: '162b14024e5d5c1993c2c5120f014bd65dc452b8' }, "Date"), h("smoothly-table-cell", { key: '7c8dfddd08a7a241ba4921d48c231e154e8ce2f7' }, "Skip"), h("smoothly-table-cell", { key: '90c02f35f7233314a0478fdef7fe7e8d59ee6307' }, "Total"))), h("smoothly-table-body", { key: 'ee7c05917d77a73653f262da586d358a6c2d8c5f' }, h("smoothly-table-row", { key: 'fb8ea7dbe4c82f92258d4c531f88bf9192a121a7' }, h("smoothly-table-cell", { key: '8c4f6a68055a38eafbbedde78acdec47610c3a45', span: 2 }, h("smoothly-display", { key: '914cbd4c7716cb44df1fb2c9f30e864733398627', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: '28379684e4c04c36261cece4276bd0599bca8201' }, h("smoothly-display", { key: '454f88e0c8f6236864d5507677e87c4129940fd6', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: '484339508d40ad812eb7edd24efa06ed18739b39' }, h("smoothly-table-expandable-cell", { key: '885b10db54f9fb0051f0ac8d878dbd4a5413d698', span: 2 }, h("smoothly-display", { key: '27a9840c4c283269809fef636b95e7dc46d18586', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '031f1ee60536b3b633c7638aed6e0d1d6a013ba8', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: 'c1e0fc733a48eb0e5bf50d0ff70494e0f293b34e' }, h("smoothly-display", { key: 'fe0202769ab5932ed8257867802e297707efdb78', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: 'e170de6a7c33e6ce938e2a5240a33397a9d15d21', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-table-row", { key: 'e06c96d7d22adc11c20140b67b877b69c0b95737' }, h("smoothly-table-cell", { key: '6a6a0d756b16ccc002934e7aea89165959748518' }, h("smoothly-display", { key: '9cabf2591bbfe35af7e58f649a185b872843b365', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'bc20c5059843db6e9a61b5f600ddcbb959c544cd' }, "Not Skipped"), h("smoothly-table-cell", { key: '306e585f47e9eb496ef5a1ddbecfcc9c823adde2' }, h("smoothly-display", { key: 'b1623473097b41ebc6bf1a03eeafd4a650371b98', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyTableDemoColspan.style = styleCss$n();
@@ -8748,7 +8761,7 @@ const SmoothlyTableDemoFillerRow = class {
         }, 3000);
     }
     render() {
-        return (h(Host, { key: '38d70dda60dda3debcf93c39712447b147f1f8aa' }, h("smoothly-display", { key: '184a415c969fe7f8067d39b8bca1c60e2cdc525c', type: "text", value: "Filler row" }), h("smoothly-table", { key: 'c25e191ff3a0d83771c8c4057a391af7d29f3aeb', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '6a0abb3c6732c84bbf349fa5564d27d3b0189f36' }, h("smoothly-table-row", { key: '2f91fa838939f85bee7d2fc07bbcf66f19e31af0' }, h("smoothly-table-cell", { key: 'b50f41f05faeb8105905c2d2bc694ceba0291b11' }, "Breed"), h("smoothly-table-cell", { key: '1165986b307056c5356dad70b6ce04059aaebdd1' }, "Country"), h("smoothly-table-cell", { key: '348327ae0225c33862c65c536b31bbab5bd706d9' }, "Coat"), h("smoothly-table-cell", { key: '449b076a7ccb0922362af57fa66bbf081fe73c1d' }, "Origin"))), h("smoothly-table-body", { key: '7b4d12422054f92287036881aaba5156de8adc87' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
+        return (h(Host, { key: '557f61c2ccd69af2aefa39306df1aad555ff0744' }, h("smoothly-display", { key: '7ab6ad735601adb00416b7e36c0cd8815ad61ef8', type: "text", value: "Filler row" }), h("smoothly-table", { key: '5a4a96a7e7eefb555c293a59fa4549566c4e3d37', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '6552d25cd1b2655207fd58a8b193125c5489e44a' }, h("smoothly-table-row", { key: '713cc7a78a8375c1559e6dd612e91012d95d94e9' }, h("smoothly-table-cell", { key: '6916664b0ccc30759af2b01eecbb0720a293e5e1' }, "Breed"), h("smoothly-table-cell", { key: '23ebe72dbbfbb68993ce024cd574a80c78fedf97' }, "Country"), h("smoothly-table-cell", { key: '56dc58c22a7fbc62a5a33d88e11e3198d76cce8b' }, "Coat"), h("smoothly-table-cell", { key: '1b17e1b9e961951228b9134a979e154650a5692f' }, "Origin"))), h("smoothly-table-body", { key: 'e9cabfd3b379487e2f47c4e292f61f219dd1a170' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
     }
 };
 SmoothlyTableDemoFillerRow.style = styleCss$m();
@@ -8760,7 +8773,7 @@ const SmoothlyTableDemoGroup = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '13ca441187f66529344769d886b77d0c01cf0ec7' }, h("smoothly-display", { key: 'b2dbf9deacd800eb2bbcc303418a5f2ce6344399', type: "text", value: "Group" }), h("smoothly-table", { key: '8e80f2e26eda2a33c65d665d2d369b11a03f39b3', color: "primary", columns: 2 }, h("smoothly-table-head", { key: 'a80ad7e011c9432b00488a3dad6cc48d4cf56ffa' }, h("smoothly-table-row", { key: '9d15a2c5ec712913ef7195f40eae2d7cc4328b43' }, h("smoothly-table-cell", { key: '4658db6a627442459d39caf71d3053c0b0373153' }, "Date"), h("smoothly-table-cell", { key: '62640f3c5426d8b1cbb7e5309b9a5eb8ae1fd244' }, "Total"))), h("smoothly-table-body", { key: '30185fa157aeed1482eb4ed13e227e735450204f' }, h("smoothly-table-row-group", { key: '2f88c12ff6aa6b59f6545f1939c0b390ff04fb9b', align: true }, h("smoothly-display", { key: '504c5fd4776cf580054b1643d3cdf25746b0ef4d', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: 'abb7c187f97506286cce8fdb7cf9e44024cb1eee', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: '4c4ee8e36cdef0fa1c7dd5e088ba27b0470b94a0' }, h("smoothly-table-cell", { key: 'e78d6d08b6b141e5d37e309697ae71a5158aa83e' }, h("smoothly-display", { key: 'd4545cbccf585edd9a753216cd7eb065794cc61d', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: '2bfa64247f7bf2ccf879859f66de74904dd7438f' }, h("smoothly-display", { key: '45bc665caae3e04dd8f4a94ab96d0e5f974c1b66', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: '60b37654b01d3c248d2c7339593990e5a04fb188', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'e18d58866e7e132073ccd951f114780566bc19d8' }, h("smoothly-table-cell", { key: '9bce755fdb66c5a53be2a1a30b897c56cfd292e2' }, h("smoothly-display", { key: 'e93ddd23a90132c87a717651c39cd9b3e0ec76be', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: '25760dc3dc0c4db717a663849b0a5b4855d0fa49' }, h("smoothly-display", { key: '6bddb16177d1b3aaba00f690e15830b4de4c560f', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: 'b270f93a5b22cc963761b4ba3fac9831948eb229', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '13eeb89739730d945227aff29d6ffb02405a7162' }, h("smoothly-table-cell", { key: 'f6ee0efe4aafe2b3bc46d1391addd0cdd0372643' }, h("smoothly-display", { key: 'fefcd6b25329f0acac11ce9b5f62936c250e4e13', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'ef2d0fc611d84b2380f4cb3342e9a747ca7b0571' }, h("smoothly-display", { key: '049dfb4f85369daf945b216256ced74597135572', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: '0818d5289ddf639e1f41b8377eefda9a42e8a660' }, h("smoothly-display", { key: 'c313d4b6c8e1658c6a2bb9bda1b7aee77b5c4708', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: '6e57124ffd9cb7a0737b49144fdae07c04e7ce54', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '075bcd04dbac92bb2733eae3983e205c604c0897' }, h("smoothly-table-cell", { key: '2da65d488c647c5952fd2f7b496ad477c78e43a0' }, h("smoothly-display", { key: '268b41c5942180ff8cbf781c225569a464a98048', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'bf8c3e7a40c471fc22de92ff894ab5145407949c' }, h("smoothly-display", { key: 'ee271b788d3bccfec5354a4e96b0a16a9faa224d', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '684a6831e691a9dc67f81977c39f32cb74ca4796', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '82ca4163f480bb0f87f51d40680ee079dd615b11' }, h("smoothly-table-cell", { key: 'c7022929f9eee697165dabdf09f209f62cec9e20' }, h("smoothly-display", { key: 'f85ecb5f99a2f5f00b1d8946a33057b87691ebf2', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: '71a2d8a0b8426614bc5842b27e80957bc560066b' }, h("smoothly-display", { key: '6e1fa476d41664ccd4f4475e3d78e6811181dc83', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '3c21237b9ab3bcbad4ce8f71d590b62e92f425e4', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '89f7bd195d9558793f2806d9331a4f60127a2288' }, h("smoothly-display", { key: '9af59f5175f04af6c3c661efea33c884ef2443a4', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: 'cf98a3d3738cc247ddb748eb5d62103b5f4cb898' }, h("smoothly-table-cell", { key: 'fed5bcbfedb84593f7372d686ec367176e09f203' }, h("smoothly-display", { key: 'cbaf8f631003338f43637aca9af85e05ee61acb9', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: '01ca45bac88026b162678192a11a4f5dd3c068be' }, h("smoothly-display", { key: '80a57b43c7a010aab88b2d16c7fbedaeb29568ce', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '70d2c87d6db5d93807832babed5234fb464f74f4', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '20cb4d49bb58652118d26a85e3700303493c68c5' }, h("smoothly-table-cell", { key: '825986c6db5f37ccc73569f6f1c2228a5974165a' }, h("smoothly-display", { key: '21e131ad762de83ceb50ba3c73438b19726c38e2', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'c5ee086388bcba90b3f2f8b8e87de8b640af19ae' }, h("smoothly-display", { key: '0451e5542008991f62d5aed3be962be7ede89e92', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: 'eff29a26691c08d70aa7cacad2a199dabc06f76c', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '16aa704a00da4ee503ef5c8a66ce41cd2768d704' }, h("smoothly-display", { key: 'ebda8de8516871eaf501d00fe3c334dc229b8105', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: 'dc912bef3657af1eadb481ecbaa1f71e061fd3ae' }, h("smoothly-table-cell", { key: '7f3451e00998d997440f16b85fb53598778128c8' }, h("smoothly-display", { key: 'def111369e6fae7bcb7e5c6bdc3bfaaa9700b6fe', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'cf70102ed28029c2eafbfa3c14f5f42bf185b4cf' }, h("smoothly-display", { key: '567fe6aa345e74223a8332b93cc1b1b9cb288eba', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '3ad490689fcafce374b5b02550d5e03962da7a75', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '0cfffb40fd9119c737384bdfcf4196252e2680ed' }, h("smoothly-table-cell", { key: '17017970a2de014c63dc0c2f942e83a4ef9b322d' }, h("smoothly-display", { key: '9f6d27350e38a66bab11ce29a331ccecee9335d0', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'f1d2cc0caf106aaabb4d9262fb6f589924ded4cf' }, h("smoothly-display", { key: '1ae2025a7b69811c991c4e50acd45be7f2af4820', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: 'fd8db8bbca191d29614972042d49aabf04b00325', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: '7ed94c5850dca92de109a72d543e7892a4ad1f27' }, h("smoothly-table-row-group", { key: 'fd411b94eb083f25414f29ee5f0c82fe10e336b2' }, h("smoothly-display", { key: 'c1eec946da5403fe5fb367f864de25a07d37bb45', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: 'b69b22be0181ebd04b4fb6c9934b76d41a8c92f6', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: '39f7a1f520615967cc4972f7c2f2ffd6824c3fcc' }, h("smoothly-table-row", { key: 'a0edb450a28de03759ae4c2240a979f27704718b' }, h("fake-cell-wrapper", { key: '9c2c3823f9e8771e15625a0353e7031be7ab862c' }, h("smoothly-table-cell", { key: 'b47064b530ce8ee1bb66350cc2bb4ac172bfbe99' }, h("smoothly-display", { key: '23245c1af652033586ff8b001f406da931221ff7', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: 'cecaf2863e686ddd4b7b6db5bf0ba39a6f77b70b' }, h("smoothly-table-expandable-cell", { key: 'b715899e9cc80dfded13610df5224069c9eebabe' }, h("smoothly-display", { key: '3e261554b8e11c7388c5cf4057228575b87acd0e', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: '5844d701bc675abd246d2d18f7387edd9c9f7e7b', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), h("fake-expandable-row-wrapper", { key: '32bce4a1c74db7b752671e090eca7216dfeda5e4' }, h("smoothly-table-expandable-row", { key: '76397c42828314da38f36ba8046227bce793f3b0' }, h("fake-cell-wrapper", { key: '4707a608abe80f2fa745d0a669dd26d327ce3fa7', class: "span-2" }, h("smoothly-table-cell", { key: 'a4b2b9dba3fe2d95439f995c04d218729f6f7c05', span: 2 }, h("smoothly-display", { key: 'd3ab93ede3071809115eb9a392b29c97ada02788', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: 'ab3787df579b0c266b5cc521e6c88b8976d7eeb4', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: '31e0f780af3568f236e185c33beffd1fe131f15c' }, h("smoothly-display", { key: '71f3de541c67562eed2c4138b3c487e13f45891a', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '56b9d221c55a67b758a529d3542819b8cc73a9d1', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (h(Host, { key: 'c2349ac60d42721e7efdd0145bda64bf634665f9' }, h("smoothly-display", { key: '3fa0ccdbb80609b7d1213e4607a8417d654ba61e', type: "text", value: "Group" }), h("smoothly-table", { key: '031831fab9aad960876d3652e0f061bc11c6b641', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '8962746018f32803f9194677e85b1cac061cbc8a' }, h("smoothly-table-row", { key: 'ce3b222b7bf572395130029a242349f1f23e3efa' }, h("smoothly-table-cell", { key: '9b487a8dd643eeb32b8636a393a21825af9e15f0' }, "Date"), h("smoothly-table-cell", { key: '9445abb441db3d0474aa0925da39f9f8cd841e96' }, "Total"))), h("smoothly-table-body", { key: 'e05046be6bcd868fedd3a998e33243d350a24fac' }, h("smoothly-table-row-group", { key: '9f9f39b99ee48b80079e4f0c7b8b5933841bc8db', align: true }, h("smoothly-display", { key: 'f5c8b076b84674dca4082025540f37fed2c1fdfb', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: '8684e46b76affeace45688d66ce925053e8487cb', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: 'eafc06e33f099744334b1ab4633c4065e5c7bafb' }, h("smoothly-table-cell", { key: '163413e33f1fc87f3ee8d913b7f67aadaef23527' }, h("smoothly-display", { key: '7906a8a2a7cdbc094ea377dbbf46f46ea1aa2773', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'b7c3d34d0872a3b925cd59648818ac4f970f7665' }, h("smoothly-display", { key: '1755af70c7682d88f2a8053249f618e21ccd8dcd', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: '972b58445087486e16aa9ef60ceca24b0cdb878a', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'f4167f1f151a4b6a11e55c3b44b44a174e7e460a' }, h("smoothly-table-cell", { key: 'd42b86d4bbbfa2687ccb9ef5426199cfcb970454' }, h("smoothly-display", { key: '691ce08e0f570a2fe95f6274c5e5a2c594ca0e81', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'ca5ba776a4c026015fe14ffd6c0f61682fb50a0e' }, h("smoothly-display", { key: '314ca518de45211edf1b423fe2fd5e6e852e0abf', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: '3ab4074da42478f0275ad173efbbcb4ae7892132', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '15c7c4c80763efe785d46350dbcb9458787fa7de' }, h("smoothly-table-cell", { key: 'dc40672665de18746244848faf04db3ad9f5aeef' }, h("smoothly-display", { key: '49eb95b7c7cddc7b31919e63052773b561ec73e4', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'a06c95ad5472971a1e65334780f236ec9661730d' }, h("smoothly-display", { key: 'c7e5e70b5711a0921bc9b31a783a6c74d5052115', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: '4d369fc1b9f725c6c87119f74ceacc791e7ecedd' }, h("smoothly-display", { key: '7476433911fe24ae672a06fbcd1903b30d9d4dcd', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: '66757326ae2f2533781187b3cc539ecc630e18da', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '074ed70eee56b560206f6af3c3653f866eb19b1f' }, h("smoothly-table-cell", { key: 'd42fa537b638422f059064fc81f3eca4b508adb1' }, h("smoothly-display", { key: '53555e64e4a188b56312547d00e051400db9109b', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: '9a87625f1792a602a8f261b09639a2f3437e4a00' }, h("smoothly-display", { key: '48f68e9b82035798b802914d1e3676baeb45b1c6', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'fda86f80536a88dfc1b37122353d7728d59c3145', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '79f5e690018349b7bbf387f42459fd0cf7bf41c9' }, h("smoothly-table-cell", { key: 'b90737c98969bac197c075f618074d0de7e49ba4' }, h("smoothly-display", { key: 'e8f3430fe190bd51b2f16613545502e080e881ec', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'b6d3f7d14324859ba247b4936b21a8730b3d48f5' }, h("smoothly-display", { key: '2a31cd875eb7275138ff31018fa00445d98636f9', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '4fead269f59feb74e3182c5f45ceb27f75b06815', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: 'f934924e769318b0cbf620e8b36dd5beb5b9289b' }, h("smoothly-display", { key: '19cd9b2be6022ee7ca06d65ea8ed7233cfc09282', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: 'da7f61e549d633fcfeb11d0b6340db1ed25b2203' }, h("smoothly-table-cell", { key: 'b317a6ff13c60a5e788285295131c314dfdc5451' }, h("smoothly-display", { key: 'fdc2c7b05beb0d0a85cb132ecda0250dec82437b', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: '00332f1d86bee165bfcb258a7e0a977630391c3f' }, h("smoothly-display", { key: '482fb06ef577eebb00020dc96c1f38be4a9c06f4', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'e0be1bdf78a509739ba6200b84eb09b1fdceafa5', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '33394ca7530c500982772ad00fa167a28945dac7' }, h("smoothly-table-cell", { key: '9d0342b72e2e1c5c4fe165f5dd82e2bd2aea486e' }, h("smoothly-display", { key: '7067dcfee78ed06a503fda1daba6d2290e542749', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: '0dc3ff01ee8aa112baadd9d9b86950be1e206863' }, h("smoothly-display", { key: 'ff66908b6e8fae1880aeb7c2e3afb2fa0459055b', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: 'd4c0cbfd9ea8e4325b8ae831e4c39e4c454a78df', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '094dcd75d983e523eec8cb86ef99dcf162e38ea9' }, h("smoothly-display", { key: '69f640137011b2a87f19869a37d4838472a0e85c', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '5813f668878b19bda0ec525192f8bd114b8eea10' }, h("smoothly-table-cell", { key: 'a17328b2f0e29e25462129c21a4f7285a570d55b' }, h("smoothly-display", { key: 'a0d200bab62d2d1cd9c79d671dac3a01aa49d596', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'e1d33ee6f5562a526343a7b8a8a4eedd74536faa' }, h("smoothly-display", { key: 'fbee48d8fa8d7360f35e81f52953a1e50d059f66', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '4b35e8e6b67c474be6f1921df8c035ca75e6d65e', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '73b7b56a1374a050d4c060481691a765993d7aa0' }, h("smoothly-table-cell", { key: 'ef757fee21011b6217509b8df104bbd551a8f083' }, h("smoothly-display", { key: 'ce28e49e2b34609b9b118c1d959b40e92da999ea', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: '9ab4fffdd44c403204a950bf6988c85cec2b566d' }, h("smoothly-display", { key: 'f031bf8fedf553a4a35941682c52c20a5d35945c', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '6be1eed0b8757a4ef23b2f89d207de78a691fb2a', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: '217e2c3da76ee12debcfdd72e8dc1a5ce366e677' }, h("smoothly-table-row-group", { key: '6b6a75487b0649e29aaa80f09ae1525fb89d0a4a' }, h("smoothly-display", { key: '595d74d25315145d10c0f90cb425080f26327171', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: '0960bdd999050e2ef1f54affd7d9c7e37b7a105f', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: '99957e7a704294b44a16785076c8039fabafe467' }, h("smoothly-table-row", { key: '094abc7dde56b47077b83d4aeee91d935673dbca' }, h("fake-cell-wrapper", { key: 'c3046f3eb7072139a86ec4c777a83e3b31342a5f' }, h("smoothly-table-cell", { key: '65e3f33d4e058906c1e705c138f64eb875372f8b' }, h("smoothly-display", { key: 'dae18d82f496305e108996e52fb4f08df46c0b4d', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: '1f797ef11066becab0585c2d707795752cc1919a' }, h("smoothly-table-expandable-cell", { key: '7162dfb6b14b854eb20ade26aa14c41ada84ee88' }, h("smoothly-display", { key: 'a0caf476fcef38d8f0f0aac87f1a8939edf8251b', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: '96639f825747c82e48a6df2f5ffcd0aa541af947', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), h("fake-expandable-row-wrapper", { key: '96e1217758b98bb236eaf1e9fbf0cdbc7c97961b' }, h("smoothly-table-expandable-row", { key: 'b463b6ace09039c949856a47cae1646722de7515' }, h("fake-cell-wrapper", { key: '908e37e012b4e7264faafa8778161b0d23e65bbf', class: "span-2" }, h("smoothly-table-cell", { key: 'd08c1503351a035e6f8ef9052cc80c8bc9d002fa', span: 2 }, h("smoothly-display", { key: '391e427d5ddf9f1d2e82678ff66d9ffcc41c8a77', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '0a8773a5d33603c6a42d84487c730eaf950a2540', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: 'f22475f2b9aca2131c4ff305aa4ba2e7c6e600ba' }, h("smoothly-display", { key: '956d8be67c99b3673d815101a05e91c9c6131439', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '0daba64dde819e327b688619e584b43bb042ef0d', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyTableDemoGroup.style = styleCss$l();
@@ -9706,7 +9719,7 @@ const SmoothlyTableDemoNestedNoCell = class {
         this.loadedRows = [];
     }
     render() {
-        return (h(Host, { key: '58aa208d70e2da93e893ef08cb5967664bd0c051' }, h("smoothly-display", { key: '2deea15d1b6e1df7377c7d7a75f1bf3bdc0e23e6', type: "text", value: "Nested" }), h("smoothly-table", { key: '86c9c4de9e86faddf03910093dc8046534198a6e', color: "primary", columns: 8 }, h("smoothly-table-head", { key: 'e68242f5576ac5903448bc958706512b6fdde4a2' }, h("smoothly-table-row", { key: 'db1d09f006f8e6d7ce18ae91caf34d6f5a14bf83' }, h("div", { key: '3e3e11e86247d24322182392410b18b1f77be2d9', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'd9e4adcfa2c4f241f0351c78cb21a968663a6c44', class: "smoothly-table-cell" }, "Registered"), h("div", { key: 'fe70738e34cad44a2334118b1390c3a4fc55a78c', class: "smoothly-table-cell" }, "Name"), h("div", { key: '8d289629063da16589bb44c438577ece4eff5703', class: "smoothly-table-cell" }, "Age"), h("div", { key: '41d4a8187b8a431cea1ab7c0d5dd94fc5e3d7c14', class: "smoothly-table-cell" }, "Balance"), h("div", { key: '1394c75f60c62a437f8e45bd331e102a84b3357e', class: "smoothly-table-cell" }, "EyeColor"), h("div", { key: '675a742c81647d180c327a3b033a7dd90bda7411', class: "smoothly-table-cell" }, "Gender"), h("div", { key: '16c97f1027ac5d65ebfaa303a56bb80ea37c7c40', class: "smoothly-table-cell" }, "Company"))), h("smoothly-table-body", { key: '8839563b64e8c05cdfbf0be64fd78e901490dcf3' }, data.map((entry, index) => (h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
+        return (h(Host, { key: '04d9aea1741a42783f48d2f496507f026e7ec592' }, h("smoothly-display", { key: 'b1ca21dc02166b03949f1e5733d199dfc98abe57', type: "text", value: "Nested" }), h("smoothly-table", { key: '8822eb9d9038e1475460993e8408a34e2c278fc5', color: "primary", columns: 8 }, h("smoothly-table-head", { key: 'fe36a6cf11d90f4a6d61b8f52b6c32725f9446bf' }, h("smoothly-table-row", { key: '480555a61bc7ab26c44b6ed481c5002e76f3d8fb' }, h("div", { key: '4a916151819146c8dfb3bde56af42cd9177404f3', class: "smoothly-table-cell" }, "Id"), h("div", { key: '4c5f4888480ac4afdc2a7ea0ea1223f019ac342f', class: "smoothly-table-cell" }, "Registered"), h("div", { key: 'fcbbba0e6600648b61a64f1c79021d8a3b6ff7a7', class: "smoothly-table-cell" }, "Name"), h("div", { key: 'b1ae7b7361472a8bc480eda7f578c2ef2ee31d01', class: "smoothly-table-cell" }, "Age"), h("div", { key: '5abc8febf53d4a1c88bf4d48c9f775854f79c9c0', class: "smoothly-table-cell" }, "Balance"), h("div", { key: '556a2cc1c4edadce3207d5d5f0669945aac0e549', class: "smoothly-table-cell" }, "EyeColor"), h("div", { key: 'c73289aaf060e3c633105d35ce31864109e6b0fb', class: "smoothly-table-cell" }, "Gender"), h("div", { key: '768db739d85a8a20408ea8d866af0006051d35f1', class: "smoothly-table-cell" }, "Company"))), h("smoothly-table-body", { key: 'cdb13c9d2feb7505eb856a172848a9e0a7c8eec5' }, data.map((entry, index) => (h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
                 if (event.detail) {
                     this.loadingIndex = index;
                     setTimeout(() => {
@@ -9714,7 +9727,7 @@ const SmoothlyTableDemoNestedNoCell = class {
                         this.loadedRows = [...this.loadedRows, index];
                     }, 1500);
                 }
-            } }, this.loadingIndex === index && h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.registered), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance), h("div", { class: "smoothly-table-cell" }, entry.eyeColor), h("div", { class: "smoothly-table-cell" }, entry.gender), h("div", { class: "smoothly-table-cell" }, entry.company))))), h("smoothly-table-foot", { key: '6b4ad314b547876f79a192885d8f6c396b5289a4' }, h("smoothly-table-row", { key: 'd0b756f7d918e94ef014702eae9f6b60de81feec' }, h("div", { key: '06107bc944f6e1304054e68b91622ea30e0a833e', class: "smoothly-table-cell" }, "Footer Cell"), h("div", { key: '0150811226ddc55197a6ef7933f024a54ab2c853', class: "smoothly-table-cell" }, "Footer Cell"))))));
+            } }, this.loadingIndex === index && h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.registered), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance), h("div", { class: "smoothly-table-cell" }, entry.eyeColor), h("div", { class: "smoothly-table-cell" }, entry.gender), h("div", { class: "smoothly-table-cell" }, entry.company))))), h("smoothly-table-foot", { key: 'd220bcbd57cd66ba23f5f0a95f91ea76815abfb5' }, h("smoothly-table-row", { key: '667777310b2345e3d3a168ce2e740bf7bb3065c2' }, h("div", { key: 'b3e7fec6bcea4b27ae2ddf5e8b23438affc74185', class: "smoothly-table-cell" }, "Footer Cell"), h("div", { key: 'ee6456fc221e5cc95ebf4ca4615f24df1a4da926', class: "smoothly-table-cell" }, "Footer Cell"))))));
     }
 };
 SmoothlyTableDemoNestedNoCell.style = styleCss$k();
@@ -9727,7 +9740,7 @@ const SmoothlyTableDemoNestedNoCellInner = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9150c28b151e6567c9d4d385068702f600fcb2f1' }, h("smoothly-table", { key: '7261ea2339bc05332c0bb2e8d43a9362bbe13d3a', columns: 4 }, h("smoothly-table-head", { key: 'd800c29461ff8bc75f0ac1265e50640c0138d211' }, h("smoothly-table-row", { key: '56bb549fe6154737b01ad2564df4c58a6e5f8c52' }, h("div", { key: 'e6e3a1c445d93d2c814c7cb6057643124c132de2', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'c92d18120e36c54139713090f821a605ad42e3fc', class: "smoothly-table-cell" }, "Name"), h("div", { key: '2fc4f2987f92840727806f222a300bf463990917', class: "smoothly-table-cell" }, "Age"), h("div", { key: '4c5f4888480ac4afdc2a7ea0ea1223f019ac342f', class: "smoothly-table-cell" }, "Balance"))), h("smoothly-table-body", { key: 'ea1511197b149bc2963a00345c5cde47378c7f26' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (h("smoothly-table-expandable-row", null, h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
+        return (h(Host, { key: '979ac258e43562eb1d3ec213533ed762b0637958' }, h("smoothly-table", { key: '359ecbb755ebb1119ecc4d60901a52508094fa7f', columns: 4 }, h("smoothly-table-head", { key: '688c8cecdac166cd9ce2865ecbf3002811a2ef5f' }, h("smoothly-table-row", { key: '7f8b10a9205258b5cad319c0cb6a2ae6f0609da9' }, h("div", { key: '8310e2fdaefb1c5d6a686d238bf2c118e9eacbac', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'daaeb0da6571b0dde9d6e80ac35142aa666a1ba5', class: "smoothly-table-cell" }, "Name"), h("div", { key: 'abca17f20bd0491dcf05dc81ba11d801b4933a6c', class: "smoothly-table-cell" }, "Age"), h("div", { key: '346be426720be1a8c9578a50e6dacc2dddc5493a', class: "smoothly-table-cell" }, "Balance"))), h("smoothly-table-body", { key: 'd2d182cae581d3f5bc8abae108a6626b20b9451a' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (h("smoothly-table-expandable-row", null, h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
     }
 };
 SmoothlyTableDemoNestedNoCellInner.style = styleCss$j();
@@ -9739,7 +9752,7 @@ const SmoothlyTableDemoSimple = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'fa0ee8dabad78b4e11466c08476a7b7bab777bcf' }, h("smoothly-display", { key: 'f1929229c708243f89969fb865281c87cdea3974', type: "text", value: "Simple" }), h("smoothly-table", { key: 'a74ccd3d2757769582a1640cd03f275040258979', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '3740997a15cd0be3f576a5ccd325dedbcf7ecf57' }, h("smoothly-table-row", { key: '173e8a0edf3ca6131dbfd5fd2e23bf5e818de068' }, h("smoothly-table-cell", { key: '6ccc98fe385d936d3fc18a0802aa171c9e4833f0' }, "Breed"), h("smoothly-table-cell", { key: 'f12b6543b4b7be9f4d26610d2a90b900951e7f52' }, "Coat"))), h("smoothly-table-body", { key: '2cc82f1d8659f303f29352fa4cce8961fa698fab' }, cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country:", h("br", null), cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), h("smoothly-table-row", { key: '9548adc12d9a485c5e973deeb2fe4abf22119809' }, h("smoothly-table-cell", { key: '502907286ab36ee5358c143d8d5613bb0685fa29' }, "Cell5"), h("smoothly-table-expandable-cell", { key: '4ed0239f7262bfb76e8dbfd94b4b76e992dbf1af' }, "Expandable Cell", h("div", { key: 'f576406602ee34bf67621939ff7fe2c57c4b66be', slot: "detail" }, "Content of the expandable cell"))), h("smoothly-table-row", { key: '54e2ecd8dcb9c666930d9005ba31a3f64e25aabc' }, h("smoothly-table-expandable-cell", { key: '88b51a8cf477ca4de13d0735a491c30fe28870c6' }, "Expandable Cell 1", h("div", { key: 'd0ddd7d5489dc8e9df88b52315d61e97d9c6434d', slot: "detail" }, "Content of the expandable cell 1")), h("smoothly-table-expandable-cell", { key: 'ee707b238f569e36eb9bdbaca1c82fc7a0f830bc' }, "Expandable Cell 2", h("div", { key: 'bbdaab7554b86deee81fea4697afc013909cb218', slot: "detail" }, "Content of the expandable cell 2")))), h("smoothly-table-foot", { key: '936f27ddd1dbc6b3b1f8fa5cbe9887898c1b3688' }, h("smoothly-table-row", { key: '161b992762fa4617785cd6c6c83d957a7d5f976c' }, h("smoothly-table-cell", { key: '158fc3ac159fe7eeac086fdde980b1f39c9d79db' }, "Footer Cell"), h("smoothly-table-cell", { key: '3a6ff2185ab3ff1306655498582ea9bfff4d7099' }, "Footer Cell"))))));
+        return (h(Host, { key: '80449d99f9dd0f1b3ccc6fe1ca76f81c383b0b73' }, h("smoothly-display", { key: 'a8a925063304469fd491d875aac3ca41262c2654', type: "text", value: "Simple" }), h("smoothly-table", { key: 'c73c0af22285cf5769b7aae1bc619e681425059c', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '55a6fa56086f9ecf4c5ad6e937c672164e4ec329' }, h("smoothly-table-row", { key: 'c130d923b09c92b269da5f16ea18e3ee895cab52' }, h("smoothly-table-cell", { key: 'b937e3114409fa9e58e16333d00367839bc74d15' }, "Breed"), h("smoothly-table-cell", { key: '9aba71f6c1a20a762e89500ca5efa3a82d7cbd89' }, "Coat"))), h("smoothly-table-body", { key: 'b79c14240246a1d441fc2bfb2cf0857834121312' }, cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country:", h("br", null), cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), h("smoothly-table-row", { key: 'b3897b89193457cc34ef8a636ee70eb440b09923' }, h("smoothly-table-cell", { key: 'd3ff9b985f616112a698ad7c3d1154ae7ca3b17a' }, "Cell5"), h("smoothly-table-expandable-cell", { key: 'ed7165825d15f3025231a21aead04f6bcd048872' }, "Expandable Cell", h("div", { key: 'b5ffac563fce0a0a5027706cf4f83ec8825ad037', slot: "detail" }, "Content of the expandable cell"))), h("smoothly-table-row", { key: '3a6eb6e10fb590b9036d329307a22393958f6aaa' }, h("smoothly-table-expandable-cell", { key: '43570c5844b23b46572678bd5229d325c26b677f' }, "Expandable Cell 1", h("div", { key: '2c643f6a728b5967d7e42c47d657ce07ef295c78', slot: "detail" }, "Content of the expandable cell 1")), h("smoothly-table-expandable-cell", { key: '1d9f1e32259d590d5f0a7c043c56424f30019e6e' }, "Expandable Cell 2", h("div", { key: 'ea45ab8f26e3a2b7bd4d012b3dec1899836620b6', slot: "detail" }, "Content of the expandable cell 2")))), h("smoothly-table-foot", { key: '99a7c70b238c32203143077e8e1a3c58ee82adf7' }, h("smoothly-table-row", { key: '2abe5c4e633f55dd722f21263ab6647018b7319b' }, h("smoothly-table-cell", { key: '805be40c4d87dd23a8ab71017453b6340adf200e' }, "Footer Cell"), h("smoothly-table-cell", { key: '1137748f294d4199d08de20a8316588df635bfb2' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -9847,7 +9860,7 @@ const SmoothlyTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '1c27ff4e5c10ad504e0c8307be3bfb1243afc5d9', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '9df957e7d9f55f6687adbdfc550b3cfa6a8d3dea', class: "content" }, h("slot", { key: '505b6a8964feb91d4d0256b6ea3f27519742ef6c' })), h("div", { key: '9054849f559fc9f02c7ba5c9c95cabf1e741f417', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, h("slot", { key: '0feb5288d454fc6b606ad4585706f40ec3789443', name: "detail" }))));
+        return (h(Host, { key: '624fcbc59506d5a4c9c3a63a8c72e5dacc381c88', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '53a96ed671c80e1ecac6e34051c91e9a947b2fe9', class: "content" }, h("slot", { key: '3a3576002c26476a9a64113b36245e1befb1b032' })), h("div", { key: '39a6657696c643342205d451e12f7ce43b9059ad', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, h("slot", { key: 'b9e027e1fe622d4a20fffb508ac66bc1bbd2f06b', name: "detail" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -9879,7 +9892,7 @@ const SmoothlyTableExpandableRow = class {
         this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (h(Host, { key: '21d040e883e73f9415ee1a3e7055fa5ce9adc57b', onClick: (e) => this.clickHandler(e) }, h("slot", { key: '9c42a350c5e00b6b24f7c746cc801588df69c14f' }), h("div", { key: '0c5c8a4e231018e1f96e09348447c876051540cf', class: "smoothly-table-detail", ref: e => (this.div = e) }, h("slot", { key: '263395e4d57775e72e510071245261a23097175f', name: "detail" }))));
+        return (h(Host, { key: '3007de001a37cd97b19055f2300d0c4200714da4', onClick: (e) => this.clickHandler(e) }, h("slot", { key: '8eec771831b3e72481baaa792403fd6f28ce23b2' }), h("div", { key: 'f4a0071effd34729d812fdc02023f55c29c61da2', class: "smoothly-table-detail", ref: e => (this.div = e) }, h("slot", { key: 'e9eae5eaddd3886cb39a8086bba97a177791378d', name: "detail" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -9896,7 +9909,7 @@ const SmoothlyTableFillerRow = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("smoothly-table-row", { key: '7561aa3596121beb8d1fa3af10d14ed9be08f7f2' }, h("smoothly-table-cell", { key: '04c9c851fb31ec6a246b2bc82cdbc7293478a0e3' }, h("slot", { key: 'f0db97bf64c0979fbca0c6f5ab4296684f743a70' }))));
+        return (h("smoothly-table-row", { key: '4925aa29f641ac932dd2686bdfb285dfbba27008' }, h("smoothly-table-cell", { key: '8aebd5713c716392a50afae52b1aed1c091c15f8' }, h("slot", { key: '822bc6ecef95836f099ac8c122a0b6c00999abe2' }))));
     }
 };
 SmoothlyTableFillerRow.style = styleCss$f();
@@ -9908,7 +9921,7 @@ const SmoothlyTableFoot = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'fa6bc933396023c1d84d01460a4ff641c53136a1' }, h("slot", { key: '7aaddf60b15f344866dce0847441bec4dc739ae0' })));
+        return (h(Host, { key: '491e31a72bf7cf753be9722c5f9ffd189b75beae' }, h("slot", { key: '717637b20804c096f1daac46183047b2f7570569' })));
     }
 };
 SmoothlyTableFoot.style = styleCss$e();
@@ -9954,10 +9967,10 @@ const SmoothlyTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (h(Host, { key: 'a892578836b416a7ca7dcecf5436988fcd9c33d1', class: { scrolled: !!this.scrolled }, style: {
+        return (h(Host, { key: 'a543c06de129e8ee177a6e98e31e7e6de42edff6', class: { scrolled: !!this.scrolled }, style: {
                 "--top": `calc(${this.depth} * var(--smoothly-table-cell-min-height))`,
                 "--z-index": `${10 - this.depth}`,
-            } }, h("slot", { key: '6905eb9cae9ac8411ff90d83de4ff7a2a5fd5f12' })));
+            } }, h("slot", { key: 'a937f04e674b9eb19534395494741f87e7f2df49' })));
     }
     get element() { return getElement(this); }
 };
@@ -9982,7 +9995,7 @@ const SmoothlyTableRow = class {
         }
     }
     render() {
-        return (h(Host, { key: '213964e8d2239419bb9dd5751e00096a922ab084' }, h("slot", { key: '37b92c81dff5ba150141d0d060f7d1eb17c414d2' })));
+        return (h(Host, { key: 'a7150d8e85573818c5253287f7a16af0726cd566' }, h("slot", { key: '11a1f41ac92bfdfbbe55a5d56998395ffbe7f1df' })));
     }
 };
 SmoothlyTableRow.style = styleCss$c();
@@ -10005,7 +10018,7 @@ const SmoothlyTableRowGroup = class {
         }
     }
     render() {
-        return (h(Host, { key: '8407e47bd79c00425a93bbf78bfaa234417e6730' }, h("div", { key: '80a4d3121142f72cecf08afee5083fc3f00e8772', onClick: () => this.clickHandler() }, h("div", { key: 'ae02eb813ffb3951e41363c41b89e16f8cf93199' }, h("slot", { key: '5020efcd50f6b9349c05c93c90c7b0499ebaa5f6', name: "start" })), h("div", { key: '081546adcccc771440f2f5e681dfc15712579fb3' }, h("slot", { key: 'd05a5dff9ba8473a329e3cb00bedc0732cbed6f9', name: "end" }))), h("div", { key: '26e75848ce1b7f8c889fb7376f5c65c9a1f95ef8' }, h("slot", { key: '0d1687ebc94faafddea6b096c26ce5fdd408ff7f' }))));
+        return (h(Host, { key: '76fef86fb057d3a38a48176ae86e9d0acd8cbd3e' }, h("div", { key: 'd4c4ce1a498d4ad36ea115c59513a7127526a654', onClick: () => this.clickHandler() }, h("div", { key: '66b75a4c40238ef265054ee334252f301dc6d136' }, h("slot", { key: 'e4438e7a0a62ae369526bc341d9ca38f0661f719', name: "start" })), h("div", { key: 'e242813ad448fe97141372e0d58f9cee9315b42d' }, h("slot", { key: '32ea0ec41821bca492f088f8e905183a70b97d58', name: "end" }))), h("div", { key: '3dadc2ae7fdde5bd4cbee29da00dd23e544c5d59' }, h("slot", { key: 'd7d82c8713ace989d6eaa9c354fff5bc5f8da797' }))));
     }
 };
 SmoothlyTableRowGroup.style = styleCss$b();
@@ -10073,7 +10086,7 @@ const SmoothlyTabsDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'e5afcbf69dade2bfdfbccdb5ebef98067703e03e' }, h("div", { key: '720708cebe6311006737245ba3bfd2ce495fddd4' }, h("smoothly-button", { key: '9cc479c1ca7de47f611071bc020640509ec55f13', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '5e91c482c3f8d282c48630216797762712fbd088', tabs: "multiple" }, h("smoothly-tab", { key: '30fd2e83a0ad2e4ef4363b2471d5ef3a8f508e79', label: "Single Tab", open: true }, h("strong", { key: '46b7eb4a05793c23e1235026732d599ad7cd8acf' }, "Single Tab content here."), " If only one tab is available setting ", h("code", { key: '7f0e856a9e3b6f922c9a872e303f8ef2af92fe68' }, "tabs"), " to", " ", h("code", { key: 'b8398697b2d6c2757cd0a9a6216b1ca9b1680053' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (h("smoothly-tab", { key: 'd52047652788873a578d9f071e07e7a0ade65ea9', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), h("div", { key: '4ce9bdf4953f65e8296e45fc63ea4eef285010bd' }, h("smoothly-button", { key: '68c65012a5382c124b140c26442bbbf00e09b94c', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '7afa233b048274a8966859485ebbe28c76e6b87b' }, h("smoothly-tab", { key: '390d8492e788d1f8748090a43e57b12f0ce88107', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), h("smoothly-tab", { key: 'f3e74d731d6b3fcd9d188a5653beaec79fc179ee', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), h("smoothly-tab", { key: '6de96abf84eb6fb72065cdcc97691257cd0ced76', label: "test2" }, "this is a test message!"), this.extraTab2 && h("smoothly-tab", { key: '01fba3e8e1ad1ed22b3458bd5240f4f4192f3145', label: "test-extra" }, "this is a test message!"))));
+        return (h(Host, { key: '667daa4673c8e0045b0b9bb673fa25d577234bcd' }, h("div", { key: '53bc7758593ff652cd66571751d44f215b96f3e2' }, h("smoothly-button", { key: '9152b373e992825a1e7a5daad5fdb8454f0e72fa', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '45e823f55772be61f25d6b48688524dc98d052c9', tabs: "multiple" }, h("smoothly-tab", { key: 'ecb21ddc688927084d739e1f0e0590c83d773577', label: "Single Tab", open: true }, h("strong", { key: '8364c0c2e1afa1d729f6caa372e6864c37720b10' }, "Single Tab content here."), " If only one tab is available setting ", h("code", { key: '654811a94f174badec1416c90842741a49f202bd' }, "tabs"), " to", " ", h("code", { key: '5083b020fd3619e8deaf83044537e92423557e80' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (h("smoothly-tab", { key: '3c0d1ccc9c611be2d80ab6495d1c82d4670f21f5', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), h("div", { key: '939a6f264018acc6532aec79aa35c8bec9e15982' }, h("smoothly-button", { key: 'b40612b706c471876d98f92665a76a5cc6d71564', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '7950a34808a55e1c2ff8dc75eb73826270295763' }, h("smoothly-tab", { key: '30e6c350d870d9e2b2de98ee1a5e8441e33187e9', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), h("smoothly-tab", { key: 'db66384d6fc370218db0f63c57bf1334b3496672', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), h("smoothly-tab", { key: '863e0927c3c0d5d3513f9bcb4aa36c5df4d479b2', label: "test2" }, "this is a test message!"), this.extraTab2 && h("smoothly-tab", { key: '42f481c9e506f49267b289b8ed89d6c157ee34ce', label: "test-extra" }, "this is a test message!"))));
     }
 };
 SmoothlyTabsDemo.style = styleCss$9();
@@ -10085,7 +10098,7 @@ const SmoothlyThemeColor = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '2ffa9ed25b646e14b48d6da53a3afd3a9f897468' }, this.color, ["tint", "color", "shade"].map(variant => (h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
+        return (h(Host, { key: 'a5e578a10c7a46c0abd3ca72b8247a7ca74cd0c4' }, this.color, ["tint", "color", "shade"].map(variant => (h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
     }
 };
 SmoothlyThemeColor.style = styleCss$8();
@@ -10133,7 +10146,7 @@ const SmoothlyThemeDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '259010889b682573bbfb69b7711dcf03f972b06f' }, h("h2", { key: 'fe4330363bc1b6322e015569a02662077907cca8' }, "Theme"), h("smoothly-theme-picker", { key: '6df264adb5b90050418224f373e927dc33373d3f' }, h("smoothly-item", { key: 'ac79f3b604c3b6bffe8e1cd19e7b24b03960bf14', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), h("smoothly-item", { key: '4ca9bad0897a7a216a56aa0db0004a6e14b6f272', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), h("smoothly-item", { key: '2e71be7455105d37aa039c6347e4aa24dab3c15a', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), h("smoothly-item", { key: '235223f83245bb7cc3455f2102237a8923c5cf22', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), h("smoothly-item", { key: '43153d498cde19b3a97ea93036be8dabb90c86d7', value: "https://test.dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), h("smoothly-item", { key: 'e5e1e6079b7b20cfe8a62c5572f1fa48c6365a90', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), h("smoothly-item", { key: '26b2f21f376a927f788771a32292d3fb13d7380e', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), h("smoothly-item", { key: 'c36d493ae4ba1b8152c3bb8f41b086b08437f600', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), h("smoothly-item", { key: '1dab38f02ffadd2e2160f99f6209f72e294ac874', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), h("div", { key: 'f542097bfc16f9214244cfb7bcc1e2a2e31704e8' }, h("smoothly-theme-colors", { key: 'a363e1e7ba2164cd58bc1fa03d5b9d13c8e81c10' }), h("smoothly-theme-guide", { key: 'bedcda407b6d30d538176e1c32112d455feddcfd' })), h("smoothly-button", { key: 'aeb9185b1efeb83db2e4359b733c8bad207adb2b', type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { key: '761c81b4c4724e61a6d7bb96f44ef3d241b86ee1', type: "link", link: "/redirect" }, "To /redirect"), h("smoothly-button", { key: 'a45adb52d81652f71a997c9f1c81466822e3da4e', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), h("smoothly-button", { key: '0ad5ce583e40ea790411d756bcc0d9ebb118452c', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (h(Host, { key: '3e505cbc2317099fa9c7a8ce39eb009f2c3024ca' }, h("h2", { key: '5cf6837bdc6d17642828e4328265929512384435' }, "Theme"), h("smoothly-theme-picker", { key: 'be136a3fae2657ac4e26ad1fbd3aaeb25645a8d5' }, h("smoothly-item", { key: 'fa5fc77333513622192574123bf36506e52e3269', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), h("smoothly-item", { key: '2961c2261191e11a1c592906b80da6145bd404fd', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), h("smoothly-item", { key: 'dd127647b610afd4840859d7c8c10ff451dc2b56', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), h("smoothly-item", { key: '5e8ad2191b20cd08d6d1cb35816dc0454611fd71', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), h("smoothly-item", { key: '24410b3ba716c13887406e39d8269ad0f5623434', value: "https://test.dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), h("smoothly-item", { key: '0aeb4c24f7610227b1ddcd85c4a6768fac6169ab', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), h("smoothly-item", { key: '54ab7e4db39f5011d1575b08a7454edd3c8c0afa', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), h("smoothly-item", { key: '8f80758dacf77044e05035ad32620cd62129e9b5', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), h("smoothly-item", { key: 'd505ed591e6379bc67fc3958361c4895a57e1ee9', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), h("div", { key: 'b9419547eb4bbda394e480e58b7dff8dc0ebcb1d' }, h("smoothly-theme-colors", { key: '3bf0624cac39fbcb490bc7992dfa530f3043122b' }), h("smoothly-theme-guide", { key: '388b8841be3ddfd0a42a5ecbe098b512210ad26a' })), h("smoothly-button", { key: '3a56e3439212da68889c98cfe64141730732aefa', type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { key: '56add7b4f875bb0521b32e34719c703591e21961', type: "link", link: "/redirect" }, "To /redirect"), h("smoothly-button", { key: '6319b234d80bb29370f55225bae9fef3278dee83', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), h("smoothly-button", { key: 'a842d75971928d0a6d0738009da122244d7b95a0', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = styleCss$5();
@@ -10146,14 +10159,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            h("smoothly-display", { key: '9d9ac39e30705ec8aa0175a54771ab32d88f70cb' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            h("br", { key: '704a1265d7bb3ec33ab58b3f997df5afdf0707a5' }),
-            h("smoothly-display", { key: '2335c861ac8cb203da8e68ee536565bc2a90174f' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
-            h("br", { key: '02804573e827624e8eebec30f835679c1ecf2fd3' }),
-            h("smoothly-display", { key: '75dfb78b730a334347ff3b5d305df980fa8f41aa' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
-            h("br", { key: '988cfafb48a6f100c7eca395e6a4ac5be3e9d329' }),
-            h("smoothly-display", { key: '2bf7c0cdc1be980a3ff5b0e360a8ffbad6553980' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            h("br", { key: 'c6dbc6a33cf896d8be26a3c8c08641b9de7ade17' }),
+            h("smoothly-display", { key: '504bfdf471aa62a566cb5ac96654b9e00d88e292' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            h("br", { key: '9eb11da56a43e89a690df6872cb34900f565ff75' }),
+            h("smoothly-display", { key: '1955543920f4ea9c106d44a2d795fe2bde0df1f5' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
+            h("br", { key: 'cc09a61f2e021b2782fd63734b07c21973e4cd56' }),
+            h("smoothly-display", { key: '9e26806ea2d6f725073f674a9f19c8d9b916c223' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
+            h("br", { key: '1e0130f07d2a001fc206190d93c660f117596899' }),
+            h("smoothly-display", { key: '4c7cdf267964d06803f03ff567ab0cb881b709b8' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            h("br", { key: 'b2abb2ebff2bf2a5f329e5665f9bcf7c11b65bfc' }),
         ];
     }
 };
@@ -10167,12 +10180,12 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (h(Host, { key: '6b397ed31434037a5f53640cd677e4bf9f680671' }, h("smoothly-input-select", { key: 'e89de311276c516112329aa634ec4fa372eeeda7', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (h(Host, { key: '70e3737e113724291c1decf423e6cd39733763a7' }, h("smoothly-input-select", { key: 'eed6362c4c845f26fe45ab80a36261a851146a32', name: "theme", looks: "border", onSmoothlyInput: e => {
                 const element = document.querySelector(`#${this.element}`);
                 if (element instanceof HTMLLinkElement && typeof e.detail.theme == "string") {
                     element.href = e.detail.theme;
                 }
-            } }, h("label", { key: '185ea02a7eeda366e8290a3b2855e287eb62e91d', slot: "label" }, "Select theme"), h("slot", { key: '3844628b22bfe87cebc35c2ab396accc02cf48dc' }))));
+            } }, h("label", { key: '39e4c5e3793f19cc007f3a8b96988922a09109cf', slot: "label" }, "Select theme"), h("slot", { key: 'ea07c5aaee7e847991b27358eef479edb0105f91' }))));
     }
 };
 SmoothlyThemePicker.style = styleCss$3();
@@ -10195,7 +10208,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (h(Host, { key: '8fe4ea1f46f6c01c92b57819809602946c96c06f' }, h("button", { key: 'd9bfcb5daac769bbd7ef5aaa7839737e4711d76a', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, h("smoothly-icon", { key: '270b37fed4a32ba6ce9226af559a6aaa23aae7de', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
+        return (h(Host, { key: '0291d49b2ab1c542e752a3a694b5e15f446be27c' }, h("button", { key: '2be03163917c089e2a81404556996c93befeafa3', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, h("smoothly-icon", { key: 'a261b04197599fa3c80fedc502a532043e943bbe', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = styleCss$2();
@@ -10207,7 +10220,7 @@ const SmoothlyToggleSwitchDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '427648c217c445ff9bfcbc15897305cd8cc7a1fb' }, h("h4", { key: 'de6459b36d5a11ca5ef125e7be6fd47b6a7eb938' }, "Toggle switches"), h("div", { key: '544de9cabe5fa1da5a303b3ac4cb21f46d4e773a' }, h("p", { key: '3e464b80ef1bd8fe1ab43b29a1dffd8fb328df7d' }, "Checkmark"), h("span", { key: '3439d69cae6f0d7e5a6df6132050abe5c344b187' }, h("p", { key: 'fc9499fddd3bc798c7c52b614cec7bcb6bf52b65' }, "Tiny"), h("smoothly-toggle-switch", { key: '34bdc859582b47fbbb74341becc0e6087072eba5', disabled: false, size: "tiny" })), h("span", { key: 'a58d98e68a782423c12f4b8df8e80857e03dc139' }, h("p", { key: '9034c32dc86c0efdf5a8ab6fff641c09ad43a1a4' }, "Small"), h("smoothly-toggle-switch", { key: 'db605c265143f36a67891e7ed45351e36621df13', disabled: false, size: "small" })), h("span", { key: 'bebf928abd8c347d8022255de8e889dc85c09c77' }, h("p", { key: 'e860772082f263847681a239953580e86e29c399' }, "Standard"), h("smoothly-toggle-switch", { key: '79f4366d8b1862858afb468219c75ecb7018789c', disabled: false })), h("span", { key: 'f4ad70d60ecc85f2814d3e87dfdc7a236e7fef13' }, h("p", { key: 'fb93088b1c7482580821322ee74aaf6e9d3cf87e' }, "Large"), h("smoothly-toggle-switch", { key: '694db2c0cfc2fc9fa5ab37934891c3df9a7cbcff', disabled: false, size: "large" })), h("p", { key: '367eeb72e8cdd2c16e456e425c152e8a68976e06' }, "Colors checkmark"), h("span", { key: '9aea20656b1cb4223c036b138790c0fa46182bcd' }, h("p", { key: '861904268f1d9f131fc12de30419576dd4e03ca4' }, "Danger"), h("smoothly-toggle-switch", { key: 'f3e7eb843fa01e958c29dcb055bf121fae011348', color: "danger", disabled: false, size: "small" })), h("span", { key: 'ad94d89305156111da3908a7f4b07dd157e0fcd5' }, h("p", { key: '7c23b1a9151d430b267b66f21430da94b8492acd' }, "Primary color"), h("smoothly-toggle-switch", { key: '50fd4aaa9762a92c9b2f2607d61ed30c8350ce1e', color: "primary", disabled: false, size: "small" })), h("span", { key: '8a8fa2fdf036938a89b0cee770199aadae78b6b0' }, h("p", { key: '581928f8b5a88a15ad840b1ed0c43487cbb58465' }, "Secondary color"), h("smoothly-toggle-switch", { key: '833d19dfc2a929777ec935e69314588883bf153e', color: "secondary", disabled: false, size: "small" })), h("p", { key: 'b36bd1756c7911a71c17b48857c89e41efd497ef' }), h("p", { key: '911b6241ac22a6b6987014b86afa7bae155bad70' }, "Colors no checkmark"), h("span", { key: '6136db79afe7390f27a70286b2b7af2c85f360bb' }, h("p", { key: 'bc5fb4108a80a40d247464b44131eba9dd7613cb' }, "Danger"), h("smoothly-toggle-switch", { key: 'ab1d1ac99e8871dbfe8bffe0d71f1ab3b3542f5a', checkmark: false, color: "danger", disabled: false, size: "small" })), h("span", { key: '2876aa64a40c492e295f7e24d5812ea8d790c405' }, h("p", { key: 'fd59cd462154da9215c9aa80b026319baa021582' }, "Primary color"), h("smoothly-toggle-switch", { key: '50cc57021cc9aaddaf0d1053ce1e9c73ed02813d', checkmark: false, color: "primary", disabled: false, size: "small" })), h("span", { key: '1608427985a0e07188d5566c7f3709a347864b9a' }, h("p", { key: '23050dbf5fb9e8cc76120818921a3fbbfef4d21d' }, "Secondary color"), h("smoothly-toggle-switch", { key: '5c8152a8d52d9fd778aea9f84f3b36b49acf9869', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (h(Host, { key: '470464d6d37e40e5f340822febb85cfb8d287267' }, h("h4", { key: 'fdb67153afb84fa7d734bf1f701def5b647f6ce7' }, "Toggle switches"), h("div", { key: 'bc4bf67807f2bba85c1bc42e7c5376eee516995e' }, h("p", { key: '07fda130d51c52347d2ac0680b2044f25f0fa994' }, "Checkmark"), h("span", { key: '1c444c3c73daf0130db447e44cb031f24abd01f8' }, h("p", { key: 'cdd900d00acb877aa76c9ae55c5cb083049abb43' }, "Tiny"), h("smoothly-toggle-switch", { key: 'a37f5af8a756a3b31a04ab5935a4b8a0bfbef243', disabled: false, size: "tiny" })), h("span", { key: '0b0dc28ca00a27fd8b234b89ae71ea293f84df65' }, h("p", { key: '14076ac015952db2b5ebe528085c5ca9c6c383b8' }, "Small"), h("smoothly-toggle-switch", { key: 'ea50543c67201c279a5f4a2807ba8b23d2ebff13', disabled: false, size: "small" })), h("span", { key: 'd45cf2681dfdbf26f6acc66dab5bcf37ab051d0b' }, h("p", { key: 'a3ca4cf338454d0276e4b4caddad85225ce41676' }, "Standard"), h("smoothly-toggle-switch", { key: '99a061952aa9c18b40f40cb6e5bfaaac0ee9e016', disabled: false })), h("span", { key: '451ea07c909458ae1033a3362d07d0f5974dc3e6' }, h("p", { key: 'b60a09266e15ce4ae54ca1c9bf05aceca06aed05' }, "Large"), h("smoothly-toggle-switch", { key: 'eb7f4deceae4b69ec5bcc8fb5a140d76be1fe4cd', disabled: false, size: "large" })), h("p", { key: 'ad75b8c6bddd9f59246a42d78056c51a8231713d' }, "Colors checkmark"), h("span", { key: '633ebf151c353aa20662b9cc0c6fc7ef2d27f659' }, h("p", { key: '0ecb5da92182163deb10667fb1cfbeeeb91a4f95' }, "Danger"), h("smoothly-toggle-switch", { key: '9f8b43c2fbdb0f1d56d564ba936740c56cd19615', color: "danger", disabled: false, size: "small" })), h("span", { key: '29eba3b1395741d2cd8821725ab2720f8c2bfc65' }, h("p", { key: '4de96be58373d873576be6ab6b8244444795cd88' }, "Primary color"), h("smoothly-toggle-switch", { key: '1268bb9b2081aeff88bdb4ed657d7ea05f10fb69', color: "primary", disabled: false, size: "small" })), h("span", { key: '40baf7b8cf63b0b401107ad780246da0192468e5' }, h("p", { key: 'efa762aff61e90aa7a9e5be8290c84e8c8ec570d' }, "Secondary color"), h("smoothly-toggle-switch", { key: 'a648aa6596da331b42a06917bf5e69ce92efc6d6', color: "secondary", disabled: false, size: "small" })), h("p", { key: '8b105d3cfa1bc78a0f818a7661240ebbf6475ca4' }), h("p", { key: '274e9e35dcb487642858cbe7d6f73dd61ab6f865' }, "Colors no checkmark"), h("span", { key: '3e919b9d7b34da5733153911758268b52678c9fb' }, h("p", { key: '500fc3bde72ce1af1a0cda2027a98f5568a029e0' }, "Danger"), h("smoothly-toggle-switch", { key: '2292abd9acac252aa8633ffb1427a6961c6a9928', checkmark: false, color: "danger", disabled: false, size: "small" })), h("span", { key: '47516027ff4083165416e71475e262d1e6f3aed8' }, h("p", { key: 'e345a770b485052b082ed2d88ba3dce0099da701' }, "Primary color"), h("smoothly-toggle-switch", { key: '79896d7ff3091c6af545a3352668c7daaf8491cb', checkmark: false, color: "primary", disabled: false, size: "small" })), h("span", { key: 'afc9c9d03135b7cebfa6866cccb8ab993f1fa5f4' }, h("p", { key: '39b9563fd95bd730a05ecda2e0ddb3db96503d08' }, "Secondary color"), h("smoothly-toggle-switch", { key: '02623b5220ccb3d547dda23d2eae0216ca20fd77', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = styleCss$1();
@@ -10233,7 +10246,7 @@ const SmoothlyTrigger = class {
                 result = this.disabled ? (h("slot", null)) : (h("a", { onClick: e => this.onClick(e) }, h("slot", null)));
                 break;
             case "button":
-                result = (h("button", { key: 'a8277d3521475192961463b4867553aacea5f8e3', disabled: this.disabled, name: this.name }, h("slot", { key: '6998482165ff6a73d87eb079235f88741353a1ce' })));
+                result = (h("button", { key: '3df0af31da21f4eeb53048b22a0a1fe9f37b608d', disabled: this.disabled, name: this.name }, h("slot", { key: '9566f4ff09d80a9b4c1d9d79acef49609cd3a425' })));
                 break;
         }
         return result;
@@ -10241,7 +10254,7 @@ const SmoothlyTrigger = class {
 };
 SmoothlyTrigger.style = styleCss();
-export { SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, SmoothlyAppRoom as smoothly_app_room, SmoothlyBackToTop as smoothly_back_to_top, SmoothlyBurger as smoothly_burger, SmoothlyButton as smoothly_button, SmoothlyButtonConfirm as smoothly_button_confirm, SmoothlyButtonDemo as smoothly_button_demo, SmoothlyButtonDemoStandard as smoothly_button_demo_standard, Calendar as smoothly_calendar, SmoothlyInputDateRangeText as smoothly_date_text, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyDisplayDemoJson as smoothly_display_demo_json, SmoothlyDisplayJson as smoothly_display_json, SmoothlyDisplayJsonObject as smoothly_display_json_object, SmoothlyDisplayJsonPrimitive as smoothly_display_json_primitive, SmoothlyDisplayJsonRecordKey as smoothly_display_json_record_key, SmoothlyForm as smoothly_form, SmoothlyFormDemo as smoothly_form_demo, SmoothlyFormDemoAll as smoothly_form_demo_all, SmoothlyFormDemoCard as smoothly_form_demo_card, SmoothlyFormDemoControlled as smoothly_form_demo_controlled, SmoothlyFormDemoDate as smoothly_form_demo_date, SmoothlyFormDemoDateRange as smoothly_form_demo_date_range, SmoothlyFormDemoLogin as smoothly_form_demo_login, SmoothlyFormDemoPet as smoothly_form_demo_pet, SmoothlyFormDemoPrices$1 as smoothly_form_demo_prices, SmoothlyFormDemoPrices as smoothly_form_demo_schedule, SmoothlyFormDemoTransparent as smoothly_form_demo_transparent, SmoothlyFormDemoTyped as smoothly_form_demo_typed, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, SmoothlyInputCheckbox as smoothly_input_checkbox, SmoothlyInputClear as smoothly_input_clear, SmoothlyInputColor as smoothly_input_color, SmoothlyInputColorDemo as smoothly_input_color_demo, SmoothlyInputDate as smoothly_input_date, SmoothlyInputDateDemo as smoothly_input_date_demo, SmoothlyInputDateRange as smoothly_input_date_range, SmoothlyInputDateTime as smoothly_input_date_time, SmoothlyInputDemo as smoothly_input_demo, SmoothlyInputDemoRadio as smoothly_input_demo_radio, SmoothlyInputDemoStandard as smoothly_input_demo_standard, SmoothlyInputDemoUserInput as smoothly_input_demo_user_input, SmoothlyInputEdit as smoothly_input_edit, SmoothlyInputFile as smoothly_input_file, SmoothlyInputMonth as smoothly_input_month, SmoothlyInputPriceDemo as smoothly_input_price_demo, SmoothlyInputRadio as smoothly_input_radio, SmoothlyInputRadioItem as smoothly_input_radio_item, SmoothlyInputRange as smoothly_input_range, SmoothlyInputRangeDemo as smoothly_input_range_demo, SmoothlyInputReset as smoothly_input_reset, SmoothlyInputSelect as smoothly_input_select, SmoothlyInputSubmit as smoothly_input_submit, SmoothlyItem as smoothly_item, SmoothlyLabel as smoothly_label, SmoothlyLazy as smoothly_lazy, LoadMore as smoothly_load_more, SmoothlyModal as smoothly_modal, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlySpinner as smoothly_spinner, SmoothlySummary as smoothly_summary, SmoothlyTab as smoothly_tab, SmoothlyTable as smoothly_table, SmoothlyTableBody as smoothly_table_body, SmoothlyTableCell as smoothly_table_cell, SmoothlyTableDemo as smoothly_table_demo, SmoothlyTableDemoColspan as smoothly_table_demo_colspan, SmoothlyTableDemoFillerRow as smoothly_table_demo_filler_row, SmoothlyTableDemoGroup as smoothly_table_demo_group, SmoothlyTableDemoNestedNoCell as smoothly_table_demo_nested_no_cell, SmoothlyTableDemoNestedNoCellInner as smoothly_table_demo_nested_no_cell_inner, SmoothlyTableDemoSimple as smoothly_table_demo_simple, SmoothlyTableExpandableCell as smoothly_table_expandable_cell, SmoothlyTableExpandableRow as smoothly_table_expandable_row, SmoothlyTableFillerRow as smoothly_table_filler_row, SmoothlyTableFoot as smoothly_table_foot, SmoothlyTableHead as smoothly_table_head, SmoothlyTableRow as smoothly_table_row, SmoothlyTableRowGroup as smoothly_table_row_group, SmoothlyTabs as smoothly_tabs, SmoothlyTabsDemo as smoothly_tabs_demo, SmoothlyThemeColor as smoothly_theme_color, SmoothlyThemeColorVariant as smoothly_theme_color_variant, SmoothlyThemeColors$1 as smoothly_theme_colors, SmoothlyThemeDemo as smoothly_theme_demo, SmoothlyThemeColors as smoothly_theme_guide, SmoothlyThemePicker as smoothly_theme_picker, SmoothlyToggleSwitch as smoothly_toggle_switch, SmoothlyToggleSwitchDemo as smoothly_toggle_switch_demo, SmoothlyTrigger as smoothly_trigger };
-//# sourceMappingURL=smoothly-app.smoothly-app-demo.smoothly-app-room.smoothly-back-to-top.smoothly-burger.smoothly-button.smoothly-button-confirm.smoothly-button-demo.smoothly-button-demo-standard.smoothly-calendar.smoothly-date-text.smoothly-dialog.smoothly-dialog-demo.smoothly-display.smoothly-display-demo.smoothly-display-demo-json.smoothly-display-json.smoothly-display-json-object.smoothly-display-json-primitive.smoothly-display-json-record-key.smoothly-form.smoothly-form-demo.smoothly-form-demo-all.smoothly-form-demo-card.smoothly-form-demo-controlled.smoothly-form-demo-date.smoothly-form-demo-date-range.smoothly-form-demo-login.smoothly-form-demo-pet.smoothly-form-demo-prices.smoothly-form-demo-schedule.smoothly-form-demo-transparent.smoothly-form-demo-typed.smoothly-frame.smoothly-icon.smoothly-icon-demo.smoothly-input.smoothly-input-checkbox.smoothly-input-clear.smoothly-input-color.smoothly-input-color-demo.smoothly-input-date.smoothly-input-date-demo.smoothly-input-date-range.smoothly-input-date-time.smoothly-input-demo.smoothly-input-demo-radio.smoothly-input-demo-standard.smoothly-input-demo-user-input.smoothly-input-edit.smoothly-input-file.smoothly-input-month.smoothly-input-price-demo.smoothly-input-radio.smoothly-input-radio-item.smoothly-input-range.smoothly-input-range-demo.smoothly-input-reset.smoothly-input-select.smoothly-input-submit.smoothly-item.smoothly-label.smoothly-lazy.smoothly-load-more.smoothly-modal.smoothly-notification.smoothly-notifier.smoothly-spinner.smoothly-summary.smoothly-tab.smoothly-table.smoothly-table-body.smoothly-table-cell.smoothly-table-demo.smoothly-table-demo-colspan.smoothly-table-demo-filler-row.smoothly-table-demo-group.smoothly-table-demo-nested-no-cell.smoothly-table-demo-nested-no-cell-inner.smoothly-table-demo-simple.smoothly-table-expandable-cell.smoothly-table-expandable-row.smoothly-table-filler-row.smoothly-table-foot.smoothly-table-head.smoothly-table-row.smoothly-table-row-group.smoothly-tabs.smoothly-tabs-demo.smoothly-theme-color.smoothly-theme-color-variant.smoothly-theme-colors.smoothly-theme-demo.smoothly-theme-guide.smoothly-theme-picker.smoothly-toggle-switch.smoothly-toggle-switch-demo.smoothly-trigger.entry.js.map
+export { SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, SmoothlyAppRoom as smoothly_app_room, SmoothlyBackToTop as smoothly_back_to_top, SmoothlyBurger as smoothly_burger, SmoothlyButton as smoothly_button, SmoothlyButtonConfirm as smoothly_button_confirm, SmoothlyButtonDemo as smoothly_button_demo, SmoothlyButtonDemoStandard as smoothly_button_demo_standard, Calendar as smoothly_calendar, SmoothlyInputDateRangeText as smoothly_date_text, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyDisplayDemoJson as smoothly_display_demo_json, SmoothlyDisplayJson as smoothly_display_json, SmoothlyDisplayJsonObject as smoothly_display_json_object, SmoothlyDisplayJsonPrimitive as smoothly_display_json_primitive, SmoothlyDisplayJsonRecordKey as smoothly_display_json_record_key, SmoothlyForm as smoothly_form, SmoothlyFormDemo as smoothly_form_demo, SmoothlyFormDemoAll as smoothly_form_demo_all, SmoothlyFormDemoCard as smoothly_form_demo_card, SmoothlyFormDemoControlled as smoothly_form_demo_controlled, SmoothlyFormDemoDate as smoothly_form_demo_date, SmoothlyFormDemoDateRange as smoothly_form_demo_date_range, SmoothlyFormDemoLogin as smoothly_form_demo_login, SmoothlyFormDemoPet as smoothly_form_demo_pet, SmoothlyFormDemoPrices$1 as smoothly_form_demo_prices, SmoothlyFormDemoPrices as smoothly_form_demo_schedule, SmoothlyFormDemoTransparent as smoothly_form_demo_transparent, SmoothlyFormDemoTyped as smoothly_form_demo_typed, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, SmoothlyInputCheckbox as smoothly_input_checkbox, SmoothlyInputClear as smoothly_input_clear, SmoothlyInputColor as smoothly_input_color, SmoothlyInputColorDemo as smoothly_input_color_demo, SmoothlyInputDate as smoothly_input_date, SmoothlyInputDateDemo as smoothly_input_date_demo, SmoothlyInputDateRange as smoothly_input_date_range, SmoothlyInputDateTime as smoothly_input_date_time, SmoothlyInputDemo as smoothly_input_demo, SmoothlyInputDemoRadio as smoothly_input_demo_radio, SmoothlyInputDemoStandard as smoothly_input_demo_standard, SmoothlyInputDemoUserInput as smoothly_input_demo_user_input, SmoothlyInputEdit as smoothly_input_edit, SmoothlyInputFile as smoothly_input_file, SmoothlyInputMonth as smoothly_input_month, SmoothlyInputPriceDemo as smoothly_input_price_demo, SmoothlyInputRadio as smoothly_input_radio, SmoothlyInputRadioItem as smoothly_input_radio_item, SmoothlyInputRange as smoothly_input_range, SmoothlyInputRangeDemo as smoothly_input_range_demo, SmoothlyInputReset as smoothly_input_reset, SmoothlyInputSelect as smoothly_input_select, SmoothlyInputSubmit as smoothly_input_submit, SmoothlyItem as smoothly_item, SmoothlyLabel as smoothly_label, SmoothlyLazy as smoothly_lazy, LoadMore as smoothly_load_more, SmoothlyModal as smoothly_modal, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlyNotifierDemo as smoothly_notifier_demo, SmoothlySpinner as smoothly_spinner, SmoothlySummary as smoothly_summary, SmoothlyTab as smoothly_tab, SmoothlyTable as smoothly_table, SmoothlyTableBody as smoothly_table_body, SmoothlyTableCell as smoothly_table_cell, SmoothlyTableDemo as smoothly_table_demo, SmoothlyTableDemoColspan as smoothly_table_demo_colspan, SmoothlyTableDemoFillerRow as smoothly_table_demo_filler_row, SmoothlyTableDemoGroup as smoothly_table_demo_group, SmoothlyTableDemoNestedNoCell as smoothly_table_demo_nested_no_cell, SmoothlyTableDemoNestedNoCellInner as smoothly_table_demo_nested_no_cell_inner, SmoothlyTableDemoSimple as smoothly_table_demo_simple, SmoothlyTableExpandableCell as smoothly_table_expandable_cell, SmoothlyTableExpandableRow as smoothly_table_expandable_row, SmoothlyTableFillerRow as smoothly_table_filler_row, SmoothlyTableFoot as smoothly_table_foot, SmoothlyTableHead as smoothly_table_head, SmoothlyTableRow as smoothly_table_row, SmoothlyTableRowGroup as smoothly_table_row_group, SmoothlyTabs as smoothly_tabs, SmoothlyTabsDemo as smoothly_tabs_demo, SmoothlyThemeColor as smoothly_theme_color, SmoothlyThemeColorVariant as smoothly_theme_color_variant, SmoothlyThemeColors$1 as smoothly_theme_colors, SmoothlyThemeDemo as smoothly_theme_demo, SmoothlyThemeColors as smoothly_theme_guide, SmoothlyThemePicker as smoothly_theme_picker, SmoothlyToggleSwitch as smoothly_toggle_switch, SmoothlyToggleSwitchDemo as smoothly_toggle_switch_demo, SmoothlyTrigger as smoothly_trigger };
+//# sourceMappingURL=smoothly-app.smoothly-app-demo.smoothly-app-room.smoothly-back-to-top.smoothly-burger.smoothly-button.smoothly-button-confirm.smoothly-button-demo.smoothly-button-demo-standard.smoothly-calendar.smoothly-date-text.smoothly-dialog.smoothly-dialog-demo.smoothly-display.smoothly-display-demo.smoothly-display-demo-json.smoothly-display-json.smoothly-display-json-object.smoothly-display-json-primitive.smoothly-display-json-record-key.smoothly-form.smoothly-form-demo.smoothly-form-demo-all.smoothly-form-demo-card.smoothly-form-demo-controlled.smoothly-form-demo-date.smoothly-form-demo-date-range.smoothly-form-demo-login.smoothly-form-demo-pet.smoothly-form-demo-prices.smoothly-form-demo-schedule.smoothly-form-demo-transparent.smoothly-form-demo-typed.smoothly-frame.smoothly-icon.smoothly-icon-demo.smoothly-input.smoothly-input-checkbox.smoothly-input-clear.smoothly-input-color.smoothly-input-color-demo.smoothly-input-date.smoothly-input-date-demo.smoothly-input-date-range.smoothly-input-date-time.smoothly-input-demo.smoothly-input-demo-radio.smoothly-input-demo-standard.smoothly-input-demo-user-input.smoothly-input-edit.smoothly-input-file.smoothly-input-month.smoothly-input-price-demo.smoothly-input-radio.smoothly-input-radio-item.smoothly-input-range.smoothly-input-range-demo.smoothly-input-reset.smoothly-input-select.smoothly-input-submit.smoothly-item.smoothly-label.smoothly-lazy.smoothly-load-more.smoothly-modal.smoothly-notification.smoothly-notifier.smoothly-notifier-demo.smoothly-spinner.smoothly-summary.smoothly-tab.smoothly-table.smoothly-table-body.smoothly-table-cell.smoothly-table-demo.smoothly-table-demo-colspan.smoothly-table-demo-filler-row.smoothly-table-demo-group.smoothly-table-demo-nested-no-cell.smoothly-table-demo-nested-no-cell-inner.smoothly-table-demo-simple.smoothly-table-expandable-cell.smoothly-table-expandable-row.smoothly-table-filler-row.smoothly-table-foot.smoothly-table-head.smoothly-table-row.smoothly-table-row-group.smoothly-tabs.smoothly-tabs-demo.smoothly-theme-color.smoothly-theme-color-variant.smoothly-theme-colors.smoothly-theme-demo.smoothly-theme-guide.smoothly-theme-picker.smoothly-toggle-switch.smoothly-toggle-switch-demo.smoothly-trigger.entry.js.map
-//# sourceMappingURL=smoothly-app_98.entry.js.map
+//# sourceMappingURL=smoothly-app_99.entry.js.map