npm - smoothly - Versions diffs - 1.2.1-alpha.57 → 1.2.1-alpha.59 - Mend

smoothly 1.2.1-alpha.57 → 1.2.1-alpha.59

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

package/dist/cjs/{smoothly-app_110.cjs.entry.js → smoothly-app_99.cjs.entry.js} RENAMED Viewed

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ba6d0734.js');
 const Scrollable = require('./Scrollable-20426515.js');
+const Submittable = require('./Submittable-c2f14f2a.js');
 const TimeZone = require('./TimeZone-c7477083.js');
-const redirect = require('./redirect-fa5e9d71.js');
+const Notice = require('./Notice-43957905.js');
 const en = require('./en-f4546147.js');
+require('./redirect-ae1fa359.js');
 function any(name) {
     return new IslyAny(name ?? "any");
@@ -21,8 +23,8 @@ function getLocale() {
     return TimeZone.Locale.is(result) ? result : TimeZone.Language.is(result) ? TimeZone.Locale.toLocale(result) : undefined;
 }
-const styleCss$1w = "smoothly-app{--header-height:5rem;display:block}smoothly-app>smoothly-notifier>main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}header:has(smoothly-burger[visible])>nav>ul smoothly-app-room{width:100%;height:4em}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:5;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2;height:100%}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;margin:0}smoothly-app:not([label])>smoothly-notifier>header>h1{display:none}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container{display:flex;align-items:center;height:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{display:flex;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav{width:fit-content;max-width:100%;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;width:100%}smoothly-app>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}}smoothly-app>smoothly-notifier>header>nav:not(.menu-open){display:none}smoothly-app>smoothly-notifier>main>div{overflow-y:scroll;height:100%}";
-const SmoothlyAppStyle0 = styleCss$1w;
+const styleCss$1l = "smoothly-app{--header-height:5rem;display:block}smoothly-app>smoothly-notifier>main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}header:has(smoothly-burger[visible])>nav>ul smoothly-app-room{width:100%;height:4em}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:5;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2;height:100%}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;margin:0}smoothly-app:not([label])>smoothly-notifier>header>h1{display:none}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container{display:flex;align-items:center;height:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{display:flex;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav{width:fit-content;max-width:100%;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;width:100%}smoothly-app>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}}smoothly-app:not([menu-open])>smoothly-notifier>header>nav{display:none}smoothly-app>smoothly-notifier>main>div{overflow-y:scroll;height:100%}";
+const SmoothlyAppStyle0 = styleCss$1l;
 const SmoothlyApp = class {
     constructor(hostRef) {
@@ -49,10 +51,10 @@ const SmoothlyApp = class {
         var _a;
         Object.values(this.rooms).forEach(room => { var _a; return (room === null || room === void 0 ? void 0 : room.element.path) != ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.element.path) && (room === null || room === void 0 ? void 0 : room.element.setSelected(false)); });
         const content = await ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.element.getContent());
-        if (this.mainElement && content) {
-            this.mainElement.innerHTML = "";
-            this.mainElement.appendChild(content);
-        }
+        requestAnimationFrame(() => {
+            if (this.mainElement && content)
+                this.mainElement.replaceChildren(content);
+        });
     }
     burgerVisibilityHandler(event) {
         this.burgerVisibility = event.detail;
@@ -84,14 +86,11 @@ const SmoothlyApp = class {
         }
     }
     clickHandler(event) {
-        if (this.burgerVisibility)
-            if (event.composedPath().some(e => e == this.burgerElement || e == this.navElement))
-                ;
-            else
-                this.menuOpen = false;
+        if (this.burgerVisibility && !event.composedPath().some(e => e == this.burgerElement || e == this.navElement))
+            this.menuOpen = false;
     }
     render() {
-        return (index.h("smoothly-notifier", { key: 'e9b90a7541f72cd1357e2bb68c1f26709984d176' }, index.h("header", { key: '2fad88bef48cd6afcb8e5a3dc88c3126413e24cb', color: this.color }, index.h("h1", { key: '56b0cf1059806fa6d522ff7c306d68e5b1fe6a02' }, index.h("a", { key: '4609bf678748cbaf824c169f8723de0944d1940a', href: "" }, this.label)), index.h("slot", { key: '69b8995d75823b0dc79f9ac3e6589d93373d0b9e', name: "header" }), index.h("nav", { key: '74c0984bd564554aea61d69cc56057d49dc59431', ref: e => (this.navElement = e), class: { "menu-open": this.menuOpen } }, index.h("ul", { key: '824b6fca8abe6cb0d94cf6af063522eb17bd7f24' }, index.h("div", { key: 'b341a3703747911119ce85bfcb799d85e8b36bc3', class: "nav-start-container" }, index.h("slot", { key: 'a88cd0274213cdcaea4750f26e543ff2a86458e9', name: "nav-start" })), index.h("slot", { key: 'abefaa514bb2b5d9580c462d44356cc9336dbbad' }), index.h("div", { key: '3bd9dc239b15781dada1557337fda06525f03486', class: "nav-end-container" }, index.h("slot", { key: 'd42926c3698e00ef3d90cf9a0a2222c1b5ad0bbc', name: "nav-end" })))), index.h("smoothly-burger", { key: '174b04034324bd0e8e44416fe7781873c0749b01', ref: e => (this.burgerElement = e), open: this.menuOpen, onSmoothlyNavStatus: e => this.burgerStatusHandler(e), onSmoothlyVisibleStatus: e => this.burgerVisibilityHandler(e) })), index.h("main", { key: '116290e55aafdce447c85854f8f8a6040210b81a', ref: e => (this.mainElement = e) })));
+        return (index.h("smoothly-notifier", { key: 'ca8596edab7ca03d2790ac426dae3ed2b0a016e5' }, index.h("header", { key: 'd1d3c3b9aadde6e8ac48f6e2a0ed1dbda13efaca', color: this.color }, index.h("h1", { key: '299cec593915416e4cbb909a9184863a5d873203' }, index.h("a", { key: '97c7829f4faf239c853eaf96355ebc40871e9827', href: "" }, this.label)), index.h("slot", { key: '199d31b149daaeb1cd9b5323dba192dda646ecb8', name: "header" }), index.h("nav", { key: 'a4b4229f4a441c44c11fc191f3148c28bb0bfb77', ref: e => (this.navElement = e) }, index.h("ul", { key: '83d549969e763e30e1b9b7f93319588637dea8a8' }, index.h("div", { key: '2e668a0eca12985f4c134ba47b04eae2888dd487', class: "nav-start-container" }, index.h("slot", { key: '2b38080d9a134492fa81c2d902331fb9c7bb6fbb', name: "nav-start" })), index.h("slot", { key: '7a4264888094eeafebff0f1b608a440f721c7d80' }), index.h("div", { key: '7db0a3a05fdb6e8c8c22cafb01aeb1d7099a6f8b', class: "nav-end-container" }, index.h("slot", { key: '7edaccd0522fdece150fd91d5dd8bfa8f7399b71', name: "nav-end" })))), index.h("smoothly-burger", { key: '5228e136cd1af7109fcc6556a9745c3db170a4c6', ref: e => (this.burgerElement = e), open: this.menuOpen, onSmoothlyNavStatus: e => this.burgerStatusHandler(e), onSmoothlyVisibleStatus: e => this.burgerVisibilityHandler(e) })), index.h("main", { key: '13e58905f69f051662d77529c7f5bedc7fb82572', ref: e => (this.mainElement = e) })));
     }
     static get watchers() { return {
         "selected": ["selectedChanged"]
@@ -105,7 +104,7 @@ const SmoothlyAppDemo = class {
         this.baseUrl = undefined;
     }
     render() {
-        return (index.h("smoothly-app", { key: 'aa798117a543b094b87cd4f794e41c2c62eedcf5', color: "dark", label: "Smoothly Demo", home: "/root", ref: e => (this.app = e) }, index.h("smoothly-trigger", { key: '8576545a5f1408fe488c80ca5a0856650d3d5b49', slot: "nav-start", type: "link", name: "logout" }, index.h("smoothly-icon", { key: '193f43f5a6d919ba06eec2a08149ed2374aee06f', toolTip: "Log out", name: "log-out", size: "medium" })), index.h("smoothly-app-room", { key: 'e8844d73ceb204d13bfc279e946a0bac80dc4d68', path: "/root", label: "root" }, index.h("smoothly-theme-demo", { key: '6cb3d1813bf4d9fe930ef3ed82215aac2af0d628' })), index.h("smoothly-app-room", { key: 'cbf46329c16c64a199535b1553e7a8c672529fbc', path: "/links", label: "Links" }, index.h("smoothly-input", { key: '4a9793a5fcca2a9addc6090c9c0cd671b1ebbd24', type: "text" }, "Default"), index.h("div", { key: '14eeb3c49e15d784862c4f6e9d59c8a3d8da7963', style: { padding: "1em", maxWidth: "12em" } }, index.h("smoothly-button", { key: '31b4d3395c2591401eb6dab6da14d6caac0411fe', fill: "solid", color: "danger", link: "https://google.com" }, "open"), index.h("smoothly-button", { key: 'bfad0b8b15643d8d31c85ee11a9c0e84db2ab6c9', fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", type: "download" }, "download"), index.h("smoothly-button", { key: 'bebe8268049b005938a50db82b40c0ee87612743', fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { key: 'e29cddc1f4bfd034dde47491361278c6ce87ba7d', disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { key: 'd8cc0600b0632998ba1b869ad084edab91fad2e5', type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), index.h("smoothly-app-room", { key: 'ac76d59a6a1abf64390f2abf922d5f5a6dee1669', path: "/form", label: "Form" }, index.h("smoothly-form-demo", { key: '0bdc1d11f5b8f934dda4ff392458b08d4a70be3f' })), index.h("smoothly-app-room", { key: '4563223ad6f765c0939cc30cd45dc30cd5d69032', path: "/input", label: "Input" }, index.h("smoothly-input-demo", { key: '375c06afd265f6307fc66e93c9835dc49ce3e6d6' })), index.h("smoothly-app-room", { key: '42e0a3a236f724591145301dd9df043f679af9ee', path: "/button", label: "Button" }, index.h("smoothly-button-demo", { key: '5901292f12d2d24973a2cf5387508a431803b2e8' })), index.h("smoothly-app-room", { key: 'd4a8784af2165b95cfc42aff5ca3be1e5c958e87', path: "/dialog", label: "Dialog" }, index.h("smoothly-dialog-demo", { key: '35c854b7844271e48d3f0e6533f9306c8464baf0' })), index.h("smoothly-app-room", { key: 'e2ad58e1f1265d3a5027cd3f224083e40d5973f7', path: "/display", label: "Display", icon: "eye-outline" }, index.h("smoothly-display-demo", { key: '2bfc57d7150503495f8b12d2ed3d9ec7d5d89a88' })), index.h("smoothly-app-room", { key: '8d586a62c12cf26864db2f247ad12681f590a77d', path: "/table", label: "Table" }, index.h("smoothly-table-demo", { key: '38415d9b5ce66403af5628b3348410592e67fa23' })), index.h("smoothly-app-room", { key: '751c2b58dcbc1863dcc5529d88dd4fdd903e757a', path: "/next", label: "Next" }, index.h("smoothly-next-demo", { key: '4e59f67d38365c613cea03506f3084ea692ee586' })), index.h("smoothly-app-room", { key: 'ae695b723b25a16a108fa9e0c2b3b09533e50286', path: "/tabs", label: "Tabs", slot: "nav-end" }, index.h("smoothly-tabs-demo", { key: 'c283c99faa9ac420440b044c3aeebe8a01ec43e4' })), index.h("smoothly-app-room", { key: '267db613a187c690e77b432dd39bcff73234ac38', path: "/icon", label: "Icon", content: index.h("smoothly-icon-demo", null), slot: "nav-end" }), index.h("smoothly-app-room", { key: '8bfbb99b17ad01a4fd09b8806a822546cdf720a3', path: "/redirect", label: "Redirect", slot: "nav-end" }, index.h("smoothly-button", { key: 'd4b35584d2c1287d720ebc459100761b276de121', type: "link", link: "/input" }, "To input"), index.h("smoothly-button", { key: '8f207c300488db536215a3c61edb66519a22cc4d', type: "link", link: "../button" }, "To button"), index.h("smoothly-button", { key: 'c71e440088db8957a47434ab649fe7fe7c6c0f8e', type: "link", link: new URL("/hidden", window.location.origin).href }, "To hidden"), index.h("smoothly-button", { key: 'e6257c6f6da592e923ba67f73d587b35d2435d09', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: 'd55eb65cf2286b9fef264f8531f68b499af73199', type: "link", link: "nested" }, "To redirect nested, relative path")), index.h("smoothly-app-room", { key: '3ba5cd1cfc05a1b00ec42ea9ddfebbe8abf74d02', path: "/hidden" }, index.h("p", { key: '0033b0c86f9199c4623da10af5ad62ae3c89eb82' }, "hello world!")), index.h("smoothly-app-room", { key: '5f43fc7540b1d3a123b278eed2b6be274a661fd5', path: "/redirect/nested" }, "this is a nested room")));
+        return (index.h("smoothly-app", { key: 'aa798117a543b094b87cd4f794e41c2c62eedcf5', color: "dark", label: "Smoothly Demo", home: "/root", ref: e => (this.app = e) }, index.h("smoothly-trigger", { key: '8576545a5f1408fe488c80ca5a0856650d3d5b49', slot: "nav-start", type: "link", name: "logout" }, index.h("smoothly-icon", { key: '193f43f5a6d919ba06eec2a08149ed2374aee06f', toolTip: "Log out", name: "log-out", size: "medium" })), index.h("smoothly-app-room", { key: 'e8844d73ceb204d13bfc279e946a0bac80dc4d68', path: "/root", label: "root" }, index.h("smoothly-theme-demo", { key: '6cb3d1813bf4d9fe930ef3ed82215aac2af0d628' })), index.h("smoothly-app-room", { key: 'cbf46329c16c64a199535b1553e7a8c672529fbc', path: "/links", label: "Links" }, index.h("smoothly-input", { key: '4a9793a5fcca2a9addc6090c9c0cd671b1ebbd24', type: "text" }, "Default"), index.h("div", { key: '14eeb3c49e15d784862c4f6e9d59c8a3d8da7963', style: { padding: "1em", maxWidth: "12em" } }, index.h("smoothly-button", { key: '31b4d3395c2591401eb6dab6da14d6caac0411fe', fill: "solid", color: "danger", link: "https://google.com" }, "open"), index.h("smoothly-button", { key: 'bfad0b8b15643d8d31c85ee11a9c0e84db2ab6c9', fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", type: "download" }, "download"), index.h("smoothly-button", { key: 'bebe8268049b005938a50db82b40c0ee87612743', fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { key: 'e29cddc1f4bfd034dde47491361278c6ce87ba7d', disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { key: 'd8cc0600b0632998ba1b869ad084edab91fad2e5', type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), index.h("smoothly-app-room", { key: 'ac76d59a6a1abf64390f2abf922d5f5a6dee1669', path: "/form", label: "Form" }, index.h("smoothly-form-demo", { key: '0bdc1d11f5b8f934dda4ff392458b08d4a70be3f' })), index.h("smoothly-app-room", { key: '4563223ad6f765c0939cc30cd45dc30cd5d69032', path: "/input", label: "Input" }, index.h("smoothly-input-demo", { key: '375c06afd265f6307fc66e93c9835dc49ce3e6d6' })), index.h("smoothly-app-room", { key: '42e0a3a236f724591145301dd9df043f679af9ee', path: "/button", label: "Button" }, index.h("smoothly-button-demo", { key: '5901292f12d2d24973a2cf5387508a431803b2e8' })), index.h("smoothly-app-room", { key: 'd4a8784af2165b95cfc42aff5ca3be1e5c958e87', path: "/dialog", label: "Dialog" }, index.h("smoothly-dialog-demo", { key: '35c854b7844271e48d3f0e6533f9306c8464baf0' })), index.h("smoothly-app-room", { key: 'e2ad58e1f1265d3a5027cd3f224083e40d5973f7', path: "/display", label: "Display", icon: "eye-outline" }, index.h("smoothly-display-demo", { key: '2bfc57d7150503495f8b12d2ed3d9ec7d5d89a88' })), index.h("smoothly-app-room", { key: '8d586a62c12cf26864db2f247ad12681f590a77d', path: "/table", label: "Table" }, index.h("smoothly-table-demo", { key: '38415d9b5ce66403af5628b3348410592e67fa23' })), index.h("smoothly-app-room", { key: 'fc4374a2899d24726ff968058d0a16ea6cce7365', path: "/tabs", label: "Tabs", slot: "nav-end" }, index.h("smoothly-tabs-demo", { key: '70a19333e47bb86ec1cf90aa962b3c5c3f671c59' })), index.h("smoothly-app-room", { key: 'b473968866ef68c464557ddf1522534e82bbec21', path: "/icon", label: "Icon", content: index.h("smoothly-icon-demo", null), slot: "nav-end" }), index.h("smoothly-app-room", { key: 'cd923d2c197c4959bf1ef0c09a98dd21936345dc', path: "/redirect", label: "Redirect", slot: "nav-end" }, index.h("smoothly-button", { key: '9ae8f62b8f386083773fee5605c6ec11d7329fb1', type: "link", link: "/input" }, "To input"), index.h("smoothly-button", { key: '6134da794a9c7b5bc9d8bc9ee2ad69f067a52ed6', type: "link", link: "../button" }, "To button"), index.h("smoothly-button", { key: '2cd938d7bc294f5121ed3f61e897dd4b250ece62', type: "link", link: new URL("/hidden", window.location.origin).href }, "To hidden"), index.h("smoothly-button", { key: '94b2ab4849d1068d106f8b020fb0cebbc14c1b58', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '8a27a6dff40273aa934695d3beb097ec3737676c', type: "link", link: "nested" }, "To redirect nested, relative path")), index.h("smoothly-app-room", { key: 'b4ae3ba6bb1064f111d7bd3aa97dac20aa48bad4', path: "/hidden" }, index.h("p", { key: '8ad17243e6d05bd54855b337e37906eb1756dc74' }, "hello world!")), index.h("smoothly-app-room", { key: '179175fe00cf6dcb4cba153e815ddc7ebac72eef', path: "/redirect/nested" }, "this is a nested room")));
     }
 };
@@ -1526,14 +1525,14 @@ if (!globalThis.URLPattern) {
   globalThis.URLPattern = URLPattern$1;
 }
-const styleCss$1v = ".sc-smoothly-app-room-h{display:flex;justify-content:center;text-align:center;cursor:pointer;height:100%;position:relative}.sc-smoothly-app-room-h>div.sc-smoothly-app-room{overflow-y:auto;height:100%}:not([label].sc-smoothly-app-room-h,[icon]).sc-smoothly-app-room-h,[disabled].sc-smoothly-app-room-h{display:none}.sc-smoothly-app-room-h>div.sc-smoothly-app-room{display:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room{height:100%;list-style:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0 1.5em;height:100%}[selected].sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{display:flex;color:rgb(var(--smoothly-color-contrast));background:rgb(var(--smoothly-color-shade))}.sc-smoothly-app-room-h:hover>li.sc-smoothly-app-room>a.sc-smoothly-app-room{color:rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-color-tint));transition:0.2s}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>smoothly-icon.sc-smoothly-app-room{align-self:inherit}[icon].sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>.label.sc-smoothly-app-room{display:none}[icon][label].sc-smoothly-app-room-h:hover::before,[icon][label].sc-smoothly-app-room-h:hover::after{position:absolute;color:rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-color-tint));border-radius:0.25rem;pointer-events:none}[icon][label].sc-smoothly-app-room-h:hover::before{content:\"\";bottom:-1.75rem;transform:rotate(45deg);width:1.25em;height:1.25em}[icon][label].sc-smoothly-app-room-h:hover::after{content:attr(label);white-space:nowrap;bottom:-3.25rem;padding:.5rem 1rem;border-radius:.25rem}@media screen and (max-width: 900px){.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0}[icon].sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>.label.sc-smoothly-app-room{display:unset;padding:0 1rem}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem}[icon][label].sc-smoothly-app-room-h:hover::before,[icon][label].sc-smoothly-app-room-h:hover::after{content:unset}}";
-const SmoothlyAppRoomStyle0 = styleCss$1v;
+const styleCss$1k = ".sc-smoothly-app-room-h{display:flex;justify-content:center;text-align:center;cursor:pointer;height:100%;position:relative}.sc-smoothly-app-room-h>div.sc-smoothly-app-room{overflow-y:auto;height:100%}:not([label].sc-smoothly-app-room-h,[icon]).sc-smoothly-app-room-h,[disabled].sc-smoothly-app-room-h{display:none}.sc-smoothly-app-room-h>div.sc-smoothly-app-room{display:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room{height:100%;list-style:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0 1.5em;height:100%}[selected].sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{display:flex;color:rgb(var(--smoothly-color-contrast));background:rgb(var(--smoothly-color-shade))}.sc-smoothly-app-room-h:hover>li.sc-smoothly-app-room>a.sc-smoothly-app-room{color:rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-color-tint));transition:0.2s}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>smoothly-icon.sc-smoothly-app-room{align-self:inherit}[icon].sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>.label.sc-smoothly-app-room{display:none}[icon][label].sc-smoothly-app-room-h:hover::before,[icon][label].sc-smoothly-app-room-h:hover::after{position:absolute;color:rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-color-tint));border-radius:0.25rem;pointer-events:none}[icon][label].sc-smoothly-app-room-h:hover::before{content:\"\";bottom:-1.75rem;transform:rotate(45deg);width:1.25em;height:1.25em}[icon][label].sc-smoothly-app-room-h:hover::after{content:attr(label);white-space:nowrap;bottom:-3.25rem;padding:.5rem 1rem;border-radius:.25rem}@media screen and (max-width: 900px){.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0}[icon].sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>.label.sc-smoothly-app-room{display:unset;padding:0 1rem}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem}[icon][label].sc-smoothly-app-room-h:hover::before,[icon][label].sc-smoothly-app-room-h:hover::after{content:unset}}";
+const SmoothlyAppRoomStyle0 = styleCss$1k;
 const SmoothlyAppRoom = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.smoothlyRoomSelected = index.createEvent(this, "smoothlyRoomSelected", 7);
-        this.smoothlyRoomLoaded = index.createEvent(this, "smoothlyRoomLoaded", 7);
+        this.smoothlyRoomSelect = index.createEvent(this, "smoothlyRoomSelect", 7);
+        this.smoothlyRoomLoad = index.createEvent(this, "smoothlyRoomLoad", 7);
         this.label = undefined;
         this.icon = undefined;
         this.disabled = undefined;
@@ -1543,7 +1542,7 @@ const SmoothlyAppRoom = class {
     }
     componentWillLoad() {
         this.selected = (typeof this.path == "string" ? new URLPattern({ pathname: this.path }) : this.path).test(window.location);
-        this.smoothlyRoomLoaded.emit({ selected: this.selected });
+        this.smoothlyRoomLoad.emit({ selected: this.selected });
     }
     async getContent() {
         return this.contentElement;
@@ -1551,7 +1550,7 @@ const SmoothlyAppRoom = class {
     async setSelected(selected, options) {
         this.selected = selected;
         if (selected)
-            this.smoothlyRoomSelected.emit({ history: !!(options === null || options === void 0 ? void 0 : options.history) });
+            this.smoothlyRoomSelect.emit({ history: !!(options === null || options === void 0 ? void 0 : options.history) });
     }
     clickHandler(event) {
         if (!event.metaKey && !event.ctrlKey && event.which != 2 && event.button != 1) {
@@ -1560,13 +1559,13 @@ const SmoothlyAppRoom = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'c8a335193ee0aa36091178413f9c66aeedb8c055' }, index.h("li", { key: '14789089daba4c466cfae4f85d4cc00f713d2f7d' }, index.h("a", { key: '5fa57305ed064e5c797b19bbdb21bb80798e5bd7', href: typeof this.path == "string" ? this.path : this.path.pathname, onClick: e => this.clickHandler(e) }, this.icon && index.h("smoothly-icon", { key: '8e460965cfcf0be0dbc4ec3b0a5f2fac870c8847', name: this.icon }), this.label && index.h("span", { key: 'df177b3036464c00da7b305b59425e2421809adc', class: "label" }, this.label))), index.h("div", { key: '8efc7494ce11d1260c32aba361d72a5a51cac010', ref: e => (this.contentElement = e) }, this.content && index.h("smoothly-lazy", { key: '2bd422f0c20d4e56746dce0d120c578171a70a57', content: this.content }), index.h("slot", { key: 'd45b27b47bd8bdb85fed17fc196d53eb33234bd8' }))));
+        return (index.h(index.Host, { key: '145d89e87e5bc7988a2c37b30321e8e969724508' }, index.h("li", { key: 'bf5a642b87750bf78273b9eb856187ec5d0dfade' }, index.h("a", { key: 'b22e1fcf21a1d4cb60d73b967cca67e639ec539b', href: typeof this.path == "string" ? this.path : this.path.pathname, onClick: e => this.clickHandler(e) }, this.icon && index.h("smoothly-icon", { key: '88d633a1be498eba8ae63b19102e1762a85b3bcd', name: this.icon }), this.label && index.h("span", { key: '9bfcc6c6c346f60aa07117b8ea3e18fef6967a49', class: "label" }, this.label))), index.h("div", { key: '9b580e92396bfadfee43584bb21ce80ad1bddbfa', ref: e => (this.contentElement = e) }, this.content && index.h("smoothly-lazy", { key: '6296e55633381bbe1c0f3adfa1f0630555bb5667', content: this.content }), index.h("slot", { key: '616d7564d45cea1b7360e4f3babefdacae4bfe1e' }))));
     }
 };
 SmoothlyAppRoom.style = SmoothlyAppRoomStyle0;
-const styleCss$1u = ".sc-smoothly-back-to-top-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
-const SmoothlyBackToTopStyle0 = styleCss$1u;
+const styleCss$1j = ".sc-smoothly-back-to-top-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
+const SmoothlyBackToTopStyle0 = styleCss$1j;
 const SmoothlyBackToTop = class {
     constructor(hostRef) {
@@ -1591,21 +1590,21 @@ const SmoothlyBackToTop = class {
             "--bottom": this.bottom,
             "--right": this.right,
         };
-        return (index.h(index.Host, { key: 'd58ae307b6f213cac17096127f4f02f89261134e', style: cssVariables, onClick: () => {
+        return (index.h(index.Host, { key: 'b2fe364dcdf392c75b51a6c0bc90802ac2c9b44a', style: cssVariables, onClick: () => {
                 var _a;
                 return (_a = this.scrollableParent) === null || _a === void 0 ? void 0 : _a.scrollTo({
                     top: 0,
                     left: 0,
                     behavior: "smooth",
                 });
-            } }, index.h("smoothly-icon", { key: 'ced3df0d986862792b4233ab646aa39acfbf5276', name: "caret-up-outline" })));
+            } }, index.h("smoothly-icon", { key: '3bc541c6b69fe0543e01282ef916abcecb63eb7a', name: "caret-up-outline" })));
     }
     get element() { return index.getElement(this); }
 };
 SmoothlyBackToTop.style = SmoothlyBackToTopStyle0;
-const styleCss$1t = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{font-size:1.7em;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
-const SmoothlyBurgerStyle0 = styleCss$1t;
+const styleCss$1i = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{font-size:1.7em;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
+const SmoothlyBurgerStyle0 = styleCss$1i;
 const SmoothlyBurger = class {
     constructor(hostRef) {
@@ -1650,7 +1649,7 @@ const SmoothlyBurger = class {
         this.history = result;
     }
     render() {
-        return (index.h(index.Host, { key: '6e32b13474959bdbd15eb7be2339e1e14f109d33' }, index.h("span", { key: '93fc4c98a838d5a37f5df7ac675e201b9c017cfd', class: "burger" }, index.h("smoothly-icon", { key: '6c11e78a8e1ba2180ec15117a5affa8bcd52f4bd', name: "menu" }))));
+        return (index.h(index.Host, { key: '6cf2501d1c4ad5a0a2865dd41667e40abffe756a' }, index.h("span", { key: 'c7bb85eb13d1acb54554a6456aa279f1e8593da8', class: "burger" }, index.h("smoothly-icon", { key: 'b7b51da7eb3de4c290ba0f4f0c9f9a44fe494c00', name: "menu" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -1659,37 +1658,8 @@ const SmoothlyBurger = class {
 };
 SmoothlyBurger.style = SmoothlyBurgerStyle0;
-const Button = ({ disabled, type, link }, children) => {
-    return disabled && (link || type == "link") ? (index.h("slot", null)) : type == "link" ? (index.h("a", { href: link, onClick: !link || !local(link) ? undefined : e => (e.preventDefault(), redirect.redirect(convert(link))) },
-        index.h("slot", { name: "start" }),
-        index.h("slot", null),
-        children,
-        index.h("slot", { name: "end" }))) : type == "download" ? (index.h("a", { href: link, target: "_blank", download: true },
-        index.h("slot", { name: "start" }),
-        index.h("slot", null),
-        children,
-        index.h("slot", { name: "end" }))) : (index.h("button", { type: type, disabled: disabled },
-        index.h("slot", { name: "start" }),
-        index.h("slot", null),
-        children,
-        index.h("slot", { name: "end" })));
-};
-function convert(path) {
-    let result;
-    if (path.startsWith(window.location.origin))
-        result = new URL(path).pathname;
-    else if (path.match(/^\//))
-        result = new URL(path, window.location.origin).pathname;
-    else
-        result = new URL(`${window.location.pathname.replace(/\/+$/, "")}/${path}`, window.location.origin).pathname;
-    return result;
-}
-function local(path) {
-    return new URL(path, window.location.origin).origin == window.location.origin;
-}
-const styleCss$1s = "[color=default].sc-smoothly-button{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-button{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-button{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-button{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-button{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-button{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-button{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-button{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-button{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-button{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-button-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-button-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-button-h{display:inline}[disabled].sc-smoothly-button-h{opacity:0.5;pointer-events:none}.sc-smoothly-button-h>a.sc-smoothly-button,.sc-smoothly-button-h>button.sc-smoothly-button{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-button-h>a.sc-smoothly-button:empty,.sc-smoothly-button-h>button.sc-smoothly-button:empty{border-width:0}.sc-smoothly-button-h>button.sc-smoothly-button{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-button-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-button{padding:0.8em;min-width:8em}.sc-smoothly-button-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-button{padding:0.6em}[size=icon].sc-smoothly-button-h>button.sc-smoothly-button{padding:0.5em}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-button-h>button.sc-smoothly-button{font-size:100%}[size=large].sc-smoothly-button-h>button.sc-smoothly-button{font-size:130%}.sc-smoothly-button-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-button-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-button-h>button.sc-smoothly-button{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-button-h{width:100%}[expand=full].sc-smoothly-button-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-button-h:not([fill=clear])>button.sc-smoothly-button:hover,.sc-smoothly-button-h>button.sc-smoothly-button:focus-visible,[fill=outline].sc-smoothly-button-h:active>button.sc-smoothly-button::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button:hover::before,[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button:focus-within::before,[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-button-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-button:hover,.sc-smoothly-button-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-button:focus-visible,.sc-smoothly-button-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-button:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-button-h>button.sc-smoothly-button,.sc-smoothly-button-h.sc-smoothly-button-s>smoothly-icon,.sc-smoothly-button-h .sc-smoothly-button-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-button-h{display:none}";
-const SmoothlyButtonStyle0 = styleCss$1s;
+const styleCss$1h = "[color=default].sc-smoothly-button{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-button{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-button{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-button{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-button{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-button{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-button{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-button{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-button{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-button{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-button-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-button-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-button-h{display:inline}[disabled].sc-smoothly-button-h{opacity:0.5;pointer-events:none}.sc-smoothly-button-h>a.sc-smoothly-button,.sc-smoothly-button-h>button.sc-smoothly-button{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-button-h>a.sc-smoothly-button:empty,.sc-smoothly-button-h>button.sc-smoothly-button:empty{border-width:0}.sc-smoothly-button-h>button.sc-smoothly-button{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-button-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-button{padding:0.8em;min-width:8em}.sc-smoothly-button-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-button{padding:0.6em}[size=icon].sc-smoothly-button-h>button.sc-smoothly-button{padding:0.5em}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-button-h>button.sc-smoothly-button{font-size:100%}[size=large].sc-smoothly-button-h>button.sc-smoothly-button{font-size:130%}.sc-smoothly-button-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-button-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-button-h>button.sc-smoothly-button{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-button-h{width:100%}[expand=full].sc-smoothly-button-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-button-h:not([fill=clear])>button.sc-smoothly-button:hover,.sc-smoothly-button-h>button.sc-smoothly-button:focus-visible,[fill=outline].sc-smoothly-button-h:active>button.sc-smoothly-button::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button:hover::before,[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button:focus-within::before,[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-button-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-button:hover,.sc-smoothly-button-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-button:focus-visible,.sc-smoothly-button-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-button:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-button-h>button.sc-smoothly-button,.sc-smoothly-button-h.sc-smoothly-button-s>smoothly-icon,.sc-smoothly-button-h .sc-smoothly-button-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-button-h{display:none}";
+const SmoothlyButtonStyle0 = styleCss$1h;
 const SmoothlyButton = class {
     constructor(hostRef) {
@@ -1704,13 +1674,13 @@ const SmoothlyButton = class {
         this.link = undefined;
     }
     render() {
-        return (index.h(Button, { key: 'd9f40ca3fcace86a986f242917b8f1965f2e7bed', disabled: this.disabled, type: this.type, link: this.link }, index.h("slot", { key: '0d4561fa6cb301d7bd37c4f614b760943074298c' })));
+        return (index.h(Submittable.Button, { key: '1350144b97a2a5fdc24d5b53678ea9d7f97b5b71', disabled: this.disabled, type: this.type, link: this.link }, index.h("slot", { key: '315355a1987956c9741a03819de181d2f626a205' })));
     }
 };
 SmoothlyButton.style = SmoothlyButtonStyle0;
-const styleCss$1r = ".sc-smoothly-button-confirm-h{display:inline-block}[disabled].sc-smoothly-button-confirm-h{opacity:0.5;pointer-events:none}.sc-smoothly-button-confirm-h:not([warning])>smoothly-button.sc-smoothly-button-confirm:first-child{display:none}[warning].sc-smoothly-button-confirm-h>smoothly-button.sc-smoothly-button-confirm:nth-child(2){display:none}[expand].sc-smoothly-button-confirm-h{width:100%}";
-const SmoothlyButtonConfirmStyle0 = styleCss$1r;
+const styleCss$1g = ".sc-smoothly-button-confirm-h{display:inline-block}[disabled].sc-smoothly-button-confirm-h{opacity:0.5;pointer-events:none}.sc-smoothly-button-confirm-h:not([warning])>smoothly-button.sc-smoothly-button-confirm:first-child{display:none}[warning].sc-smoothly-button-confirm-h>smoothly-button.sc-smoothly-button-confirm:nth-child(2){display:none}[expand].sc-smoothly-button-confirm-h{width:100%}";
+const SmoothlyButtonConfirmStyle0 = styleCss$1g;
 const SmoothlyButtonConfirm = class {
     constructor(hostRef) {
@@ -1741,13 +1711,13 @@ const SmoothlyButtonConfirm = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f6fef52919cece13e8cefc87e6876375057a0f07', warning: this.clickTimeStamp }, index.h("smoothly-button", { key: '15ba285763f7e51d255144bf7b4a74c4e12ecc22', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("smoothly-icon", { key: 'ab590fe61a83cede946727532183e7fa3f3420bf', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), index.h("smoothly-button", { key: '7e2f4b3056cea2eacba62a7e0ebaaa967ab98f4d', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("slot", { key: '516023c4ad2d3080f49284d5f6ae9b299954c977' }))));
+        return (index.h(index.Host, { key: '92ecc0cbcbe8a3c567a5b6f5839f4f5e422866e9', warning: this.clickTimeStamp }, index.h("smoothly-button", { key: 'bf8ce05dfa68aa34801975f5c590b98837f918f0', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("smoothly-icon", { key: '9ba0e4fcbb52a958443e4e2d9aca9e0f1c9b31e3', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), index.h("smoothly-button", { key: 'c2e053984ab532494fa5d5c9cff0dfd4f236fa57', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, index.h("slot", { key: 'c485c3a61102c224621ba0ef0390a24932be5956' }))));
     }
 };
 SmoothlyButtonConfirm.style = SmoothlyButtonConfirmStyle0;
-const styleCss$1q = "smoothly-button-demo{display:block;margin:1rem}smoothly-button-demo>section>div{display:flex;align-items:center}smoothly-button-demo smoothly-button{margin:.2em .5em}";
-const SmoothlyButtonDemoStyle0 = styleCss$1q;
+const styleCss$1f = "smoothly-button-demo{display:block;margin:1rem}smoothly-button-demo>section>div{display:flex;align-items:center}smoothly-button-demo smoothly-button{margin:.2em .5em}";
+const SmoothlyButtonDemoStyle0 = styleCss$1f;
 const SmoothlyButtonDemo = class {
     constructor(hostRef) {
@@ -1755,9 +1725,9 @@ const SmoothlyButtonDemo = class {
     }
     render() {
         return [
-            index.h("h2", { key: '3c8025ac2be655262bcd2b450a7bf231a4fb4895' }, "Buttons"),
-            index.h("section", { key: '7135bb7d07661d9c7feef8b28bd17f0cc2c290c2' }, index.h("h4", { key: 'a15d2adbce40601099357e61ceb47627f491e820' }, "Confirm button (two clicks)"), index.h("div", { key: 'ae1862a69fa8a949b3eb4338fcd42db23f33e0ea' }, index.h("smoothly-button-confirm", { key: 'c2408dce7880cb2c97feb9abf74cfe23293d9e8a', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), index.h("smoothly-button-confirm", { key: 'b933c3bfcc21591ea587c022be60b5dfa83d29dd', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, index.h("smoothly-icon", { key: 'bb53ab8ab65c37b896d4d8889187fbaf1453b6aa', name: "checkmark-outline", size: "tiny" })), index.h("smoothly-button-confirm", { key: '29e5f6c63362ec0f2d67212ec119fb1527cf0715', name: "confirm-icon", shape: "rounded", color: "danger", size: "icon", fill: "outline" }, index.h("smoothly-icon", { key: '5503b6db201faf2fc6756efb8eb7eed61f4e99b3', name: "trash-outline", size: "tiny", fill: "outline" }))), index.h("h4", { key: 'ff82842ee1489a963ff6e609496210f1551c96d2' }, "Toggle button"), index.h("smoothly-toggle", { key: '6222a1678c626c55914eac351c85d72a7f34baf9' }, index.h("smoothly-icon", { key: '8bac18e6a2e093b6b3351e213f80f8659cf2bfad', name: "card", fill: "solid", slot: "icon-slot" })), index.h("smoothly-toggle", { key: '1f6fb978ecb57512a2edb0e827f3f755b9fed7b3' }, index.h("smoothly-icon", { key: '92e78f07a80098c87db14a753ee185bbb4787965', name: "briefcase", slot: "icon-slot" })), index.h("smoothly-toggle", { key: '9dd282964fd8c821f9eaa4835a94ee46792160fd' }, index.h("smoothly-icon", { key: '27fde3eb695917bb2aa80166deb3f79763672615', name: "airplane", slot: "icon-slot" })), index.h("smoothly-toggle-switch-demo", { key: '8142bb42ee3d41d537aaf9881499d8c14ae636ab' }), index.h("h4", { key: '8bf7ce023276823e238dc778ea7de087227b3c55' }, "Links with icons"), index.h("smoothly-button", { key: '5dc5c52e56653c38b24653f8a09492b657a52812', type: "link" }, index.h("smoothly-icon", { key: 'bd37a7612e50a5b46a463cb33fcb3d3db4984fdc', name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { key: '8c88fe90275d89b4d9266292ee5dfe2c89189453', type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { key: '7d0f38f8def892c6a70f94cfae60c97379f97a19', name: "call", slot: "start" }), index.h("a", { key: 'c9a545939c8c69a936d7234f667a38304475ce29', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: '19ad20237f00b0fc3be118342479c542172aac85', link: "https://google.com", type: "link" }, index.h("smoothly-icon", { key: '9417f3deb9468f0ec67b5e6f2e691d75237dfd8b', name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", { key: '431e11211e7388a31e74c05c872f1225da3a8f2d' }, "Size and Color test"), index.h("smoothly-button", { key: 'e06b07125a4809a2fbfba8b663e7df05f2cafe2a', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { key: '4e6e0cd9552783605c85c0179ceb9867073d52f2', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { key: '86e387b350d60cf3bf568aab93a4f87351556b03', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { key: '81ae2d506757e6d6aefa22389b27cf52115b0cd6', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { key: '8e54050a99f8373f550dc225ec562415d6a28341', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { key: '73fff1e9835ea73331f883f877b330ffc92366e2', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { key: '38c004df8478e18cfaadeafb000d566e618cd4ce', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { key: '423bc99ba52358b5fab7d023926c13d3d4147f79', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { key: '66f6cfaa814db14e2eb4dc58ff61d3f3e5df6407', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", { key: 'e8ab771bcfd1cb19d506768c70bd1489c3a63612' }, "Expand examples"), index.h("smoothly-button", { key: 'c33ba658c35a6d638885657a10b8355c1a39cad8', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { key: '893978e950151a1f3bd34fa4e4d67be88a703f94', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", { key: '7ca51c36f0f7795529b768ff164fe897a545a503' }, "Fill examples"), index.h("div", { key: '352da5da95852f703b34102dacd5056e96d49d2f' }, index.h("smoothly-button", { key: '11060ec131da8694e760f9659ed298ff064bd02c', shape: "rounded", color: "primary", fill: "solid" }, index.h("smoothly-icon", { key: 'c1720e101a57dd3d3c6142ff00d7b6d3050b93ce', name: "checkmark-circle", slot: "start" }), "Fill Solid"), index.h("smoothly-button", { key: 'a04d9f0204302610c9394e95bf954764fe8eaf8c', shape: "rounded", color: "secondary", fill: "outline" }, index.h("smoothly-icon", { key: 'd6dc32cc36c6f801abf35271167d2bca787faea3', name: "checkmark-circle", slot: "start" }), "Fill Outline"), index.h("smoothly-button", { key: 'ffd1db87eaeb7e12f983146449be5d79e7de2b53', shape: "rounded", color: "tertiary", fill: "clear" }, index.h("smoothly-icon", { key: '15086ae92c84b20973d964c699b219cca193fd6d', name: "checkmark-circle", slot: "start" }), "Fill Clear"), index.h("smoothly-button", { key: '461519344c8a5024d6b0dce79171375645abbdf8', size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: '1068fe90e108438f28c66f8f4c6b2a6f203120df', name: "basketball" }))), index.h("h4", { key: '8e09f401d9ec18825e5b248cac01bddbf10ad95b' }, "Buttons with Icon in \"start\""), index.h("div", { key: 'd17091668a8b535291fe14b7fb5fa64bcee3d77d' }, index.h("smoothly-button", { key: '7fbcf5e63dfa6370f6ea8db63fe23eaafdf92d56', shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { key: '43da748cdca6199f9b0d677ec26a6ed14349522e', name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'dc64fcac7f381493149bd161dc78fa0b75d1e01f', shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { key: 'b64e9f855ee14612b83a4d6d320247056825e85a', name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'f714f8a9a143d68077a10e9bcc3008aebe34b931', shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: 'b39275e626a28eceb0d6c34b1781f175cf012b2d', name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { key: '3c744c78969e58dbff1efadd767c59353a261a3b', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '64aa5126a00bd7e0c157defe25e0c0a636f6a524', name: "call" })), index.h("smoothly-button", { key: 'a5fff4c066a80e3e1b592b76facee2bb4bba2083', size: "flexible", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: 'a3d95e518c35e3f4e508d303dad7d1b40c55319a', name: "airplane" }))), index.h("h4", { key: '308a6bfd84cfc8466d3df9900b39577edd0d58de' }, "Buttons with Icon in \"end\""), index.h("smoothly-button", { key: 'd2a76de598220adf8083e951bc2694d81643c833', fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { key: '878b5626becbb010ac6b8556251fe51b0360cf22', name: "arrow-forward", slot: "end" })), index.h("h4", { key: '94f535345d7687b50d2d07cc3d61b24ca18ed4a0' }, "Test for icon button"), index.h("div", { key: '9a3da368b7c537da7f95d60d75509940d462329e' }, index.h("smoothly-button", { key: '065d688ae55163481d40f96e12c8e917360fc05b', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '758c53a3eae336fbf8d3d7270236e4105ed532d4', name: "call" })), index.h("smoothly-button", { key: '32b14031344f9c74984ae1d8da0715b0b2b76be0', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { key: '8e1988d9199e234f1b206d81fc69457c0461edf0', name: "search-outline" })), index.h("smoothly-button", { key: '16d4c1196b3b9f39777649f5047e5024624367a3', size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { key: 'f217f1893799b98be1aee4d07f91766e791d5a6b', name: "checkmark-circle" }))), index.h("h4", { key: '07490863a687effc3cce1e96b730cb73441470e5' }, "Link examples"), index.h("div", { key: '8d551baa54233f19b6829cbe6bd83498c2a8cc33' }, index.h("smoothly-button", { key: '6eee7e1bc81598a59034ea1677795e0552b62327', type: "link" }, "type link"), index.h("smoothly-button", { key: 'c9121104f5847dc29da2bf88f09d8c7bab43ffbc', type: "button", fill: "clear" }, index.h("a", { key: 'b8cc19e6bd19dd64138d909e3a7e2a966c1ba8dd', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'd47a8cb6b0f0102411f7badf1829d8d1c7ffd66c', link: "https://google.com", type: "link" }, "link + type link")), index.h("h4", { key: '5468594fd4858fe83b593dac3e1da0a0982182bf' }, "Disabled buttons"), index.h("div", { key: 'cd4000d7596bc837b5735e72ac50a047f985244b' }, index.h("smoothly-button", { key: 'cd0fae2e3e985640c3cc8a89e34ef7c5c84c55d6', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { key: '72ed13dfb8bc8262daab63047dfb455f1fb602f7', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
-            index.h("smoothly-back-to-top", { key: '2ec8649e3e567d6875b2c6a07125bdebd844786a' }),
+            index.h("h2", { key: 'bddbcdcb9ce5d83b6bfa7b6ecfdc6aa39a2eb566' }, "Buttons"),
+            index.h("section", { key: '1a68d5f5e150439e623fa625432c0b76d84cb4da' }, index.h("h4", { key: 'ce297567bb70f6f61cb5c9adfce457b96a727dee' }, "Confirm button (two clicks)"), index.h("div", { key: '6b8561f4fe3001800c5a058e01a023361e8ff5fc' }, index.h("smoothly-button-confirm", { key: 'c26ec515d6e59142694394336d6c408f9d77d5c2', name: "confirm", shape: "rounded", color: "danger", size: "large" }, "Delete"), index.h("smoothly-button-confirm", { key: 'bc1fe30703e9469b80851611286309c2465b6708', name: "confirm-icon", shape: "rounded", color: "success", size: "icon" }, index.h("smoothly-icon", { key: '2c5ad6e48b66c4aac2b85dc8ea27b292b9229054', name: "checkmark-outline", size: "tiny" })), index.h("smoothly-button-confirm", { key: 'b00eff042a7e4ad8d84dbd5928499dfe93e0aade', name: "confirm-icon", shape: "rounded", color: "danger", size: "icon", fill: "outline" }, index.h("smoothly-icon", { key: '180734788ed2a6bf6dd7b833ec6e2bb8c8aa4d65', name: "trash-outline", size: "tiny", fill: "outline" }))), index.h("h4", { key: 'e25fbefe45792c9e30a2c57a0c653b7a9ee5d459' }, "Toggle button"), index.h("smoothly-toggle", { key: '382d2e1645b0414d8b913ba02b564f265d0fe208' }, index.h("smoothly-icon", { key: '2d5caa807f9c533bf30020a7597b3822e885caaf', name: "card", fill: "solid", slot: "icon-slot" })), index.h("smoothly-toggle", { key: 'da2f7951f9bc1ea632c90599c57ad868f22cd290' }, index.h("smoothly-icon", { key: '85db948b65cbba1e30d71ee5ed411ca53524a768', name: "briefcase", slot: "icon-slot" })), index.h("smoothly-toggle", { key: '7bad484109e1f6df60a4cb05785d783bba91c56f' }, index.h("smoothly-icon", { key: '4849e45149660ba218e5cae473c0255ba5efc8c3', name: "airplane", slot: "icon-slot" })), index.h("smoothly-toggle-switch-demo", { key: '06f58473630483cedbb138dacfecdf365f9764f2' }), index.h("h4", { key: '39a37218c3e78ba0eed05c7bc979f684ec9cfd5e' }, "Links with icons"), index.h("smoothly-button", { key: '6f2ea8c9f81abc8457cccf843d374e38dee9c414', type: "link" }, index.h("smoothly-icon", { key: '2f8327a92cc50d6bdde8d4681fea503d63eee458', name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { key: '729c498d4ef7889a562eea874b8e345bbb5c9a6d', type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { key: '79c0ad41bae432115486c9a94ac2105a47ee6889', name: "call", slot: "start" }), index.h("a", { key: 'f92828657c9412966b63de1682bb9a9f74ae0810', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'df22e82e78cf20218705c7e17d2a85391e91728d', link: "https://google.com", type: "link" }, index.h("smoothly-icon", { key: '2559f870c0de1afecbef1f464f2d054ff427ba97', name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", { key: 'd2d656b36bc277012f55b4ed6ae0ec6ea0c4b0b9' }, "Size and Color test"), index.h("smoothly-button", { key: 'c4776c12998ee23138e5a8f1547055745127abd5', color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { key: 'ce1953e2e3e2695abaae471b0c44172057a0671d', color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { key: '8621fa2d0ce4ba8fa60cb5e43b953de6a6cb9805', color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { key: '7a1052cd7510ed173bbb1f8811a6817e98a7a3db', color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { key: 'baada7f0ae6e127cbc138f2f9e562dc32bfbca67', color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { key: '2284694f04ff21da01d8605e75d6565b248acc21', color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { key: 'b482866674d54db4eb85221f2e2d3d84fd870563', color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { key: 'a7cf640e62331c9b63f18cb55beeb40fff068658', color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { key: '44e9e2e48824dc8eaff0907069cf7febe80ab973', color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", { key: '50d1c92c049f542c62c9f79d12aaea3e7a4f4de1' }, "Expand examples"), index.h("smoothly-button", { key: 'e78f2efe4e4ed3fb647599ab93a2e2b4246d2258', color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { key: '0f569e8d632eb66884ceb68b2eb789f9b8b2e407', color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", { key: 'b6a1509b2af743e899c790b3bc912248b0c7fe30' }, "Fill examples"), index.h("div", { key: '097d37ae19fc0decd75a1b251a7f9113d14a04d7' }, index.h("smoothly-button", { key: '702dd5b3d510e506fc879c57125c8d85c86b8d33', shape: "rounded", color: "primary", fill: "solid" }, index.h("smoothly-icon", { key: 'e3e452c9a3ac2be5c4420c1f34e8e8440bdc4ca1', name: "checkmark-circle", slot: "start" }), "Fill Solid"), index.h("smoothly-button", { key: 'a603b5a8f6d68d0970402da4c74c54f605a79b6d', shape: "rounded", color: "secondary", fill: "outline" }, index.h("smoothly-icon", { key: '8a559f61438f0007b10edaf265c19de63c8b20c9', name: "checkmark-circle", slot: "start" }), "Fill Outline"), index.h("smoothly-button", { key: '451847da000b10276df61d3f2e42d8f247cb462d', shape: "rounded", color: "tertiary", fill: "clear" }, index.h("smoothly-icon", { key: 'fd753e9fbefae7dee7d169e6ea49c87c16033d04', name: "checkmark-circle", slot: "start" }), "Fill Clear"), index.h("smoothly-button", { key: '5548028db3cc8ad643822b274ba1deb60956aa29', size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: '7fb252b38d07a0abe3eb5f1295e40d9ecd800a62', name: "basketball" }))), index.h("h4", { key: 'a3de2980d6a18f7e9cecd64c69b8db58310aab27' }, "Buttons with Icon in \"start\""), index.h("div", { key: 'b48a87856d2d148989d3dc73468afc457093ec23' }, index.h("smoothly-button", { key: '8358dad571e80fb9f39d63510e9aed5676f51738', shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { key: '1e2ebaa44bd22cf7dbf86c7751df66c4ec4966ff', name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { key: '333dfceabef7bc36c64ae92e7f6d4a2ff804ee95', shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { key: '130506a14ef685f425abf91533379c0cfadb44a6', name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { key: 'aa97eefe4c8c3ae201b8b84e2741b63743d26379', shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '12a4b1ec667fb64b249c9fefed25307eecff413f', name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { key: '9a013d490114608df3541e1be3085d58d5a9c893', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: 'ecdedc28a718342d4f2cd381ebe3b644eb0d345b', name: "call" })), index.h("smoothly-button", { key: '3e091360913644b8d49a0e2edd6e521b63956b2d', size: "flexible", fill: "solid", color: "success" }, index.h("smoothly-icon", { key: '205c26e01142bdbd92e2050be57f4a5e7f26ed66', name: "airplane" }))), index.h("h4", { key: '6af814a7a17d0f4485cbf30c9adda74c1039955c' }, "Buttons with Icon in \"end\""), index.h("smoothly-button", { key: '2c7b13a218fc9acbd007351bae7c4e0f6b6c3b04', fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { key: 'f510de55dd3b7fb530c74a08a8d8de0357344a1c', name: "arrow-forward", slot: "end" })), index.h("h4", { key: '9cb432cc45d2ec11a81cfca765f3b44d7bcfef12' }, "Test for icon button"), index.h("div", { key: '9c3e9afd73c2e4bbc83030eb1b76e23dff1de7f8' }, index.h("smoothly-button", { key: 'd7904201e3d847c89a0eb0ebe48bea8286798fe6', size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { key: '0de1a6a633b8889e589855af51b40207524b6b20', name: "call" })), index.h("smoothly-button", { key: 'b30a8f27281ec69f9188bce6bc65d14bae575777', size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { key: '6a93940995c8a876f2f94c04d272e75ed200f872', name: "search-outline" })), index.h("smoothly-button", { key: '6b7c3792eb8c3c24e081bbea8b8ca054e19691f7', size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { key: '10ae921d594626219164798b7fef26ae58820f89', name: "checkmark-circle" }))), index.h("h4", { key: '3edda3f0844009caca72092c082ef6887ba59d22' }, "Link examples"), index.h("div", { key: '0d325af0dad3cba81135c414191cb50b7f76b9ea' }, index.h("smoothly-button", { key: '60896f23076678b0e4c1ba360f8f813f60b829c0', type: "link" }, "type link"), index.h("smoothly-button", { key: '6bd1fb72c9e26fdef6e3e8af062b3336421e0fe8', type: "button", fill: "clear" }, index.h("a", { key: 'f0653380134cece6f73eb4c406887d40be8fe62d', href: "https://google.com" }, "link")), index.h("smoothly-button", { key: 'ac0585eff0af8ed5879c7c78101572351f7aa482', link: "https://google.com", type: "link" }, "link + type link")), index.h("h4", { key: '3073a9f4170c740b38206bbeaae124fc89a78c09' }, "Disabled buttons"), index.h("div", { key: '4b68a637830af2cff027c9260ff206eac96e36d3' }, index.h("smoothly-button", { key: '26c9f9f86d4876e5a7e4ae51fa77449da40b7346', disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { key: 'b5c9af1c591cd12a1e6f467e60d4ffd1d42cc2f0', type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
+            index.h("smoothly-back-to-top", { key: '7f1a9d67235da79253d37e710f5f929503842313' }),
         ];
     }
 };
@@ -1821,8 +1791,8 @@ function years(current, min, max) {
     return result;
 }
-const styleCss$1p = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5;padding:0.5em;border:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{padding:0 0.5em}.sc-smoothly-calendar-h>table.sc-smoothly-calendar{table-layout:fixed;width:100%}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>thead.sc-smoothly-calendar>tr.sc-smoothly-calendar>th.sc-smoothly-calendar,.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;box-sizing:border-box;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));-webkit-user-select:none;user-select:none}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar{position:relative;cursor:pointer}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(6),.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-calendar-weekend-foreground, var(--smoothly-danger-color)))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-calendar-weekend-foreground, var(--smoothly-danger-color)), var(--other-month-opacity))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:not(.selected,.disable).sc-smoothly-calendar:hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.today.sc-smoothly-calendar::before{content:\"\";inset:2px;position:absolute;border:1px solid currentColor}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.disable.sc-smoothly-calendar{cursor:not-allowed;opacity:0.5}";
-const SmoothlyCalendarStyle0 = styleCss$1p;
+const styleCss$1e = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5;padding:0.5em;border:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{padding:0 0.5em}.sc-smoothly-calendar-h>table.sc-smoothly-calendar{table-layout:fixed;width:100%}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>thead.sc-smoothly-calendar>tr.sc-smoothly-calendar>th.sc-smoothly-calendar,.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;box-sizing:border-box;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));-webkit-user-select:none;user-select:none}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar{position:relative;cursor:pointer}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(6),.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-calendar-weekend-foreground, var(--smoothly-danger-color)))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-calendar-weekend-foreground, var(--smoothly-danger-color)), var(--other-month-opacity))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.sc-smoothly-calendar:not(.selected,.disable).sc-smoothly-calendar:hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.today.sc-smoothly-calendar::before{content:\"\";inset:2px;position:absolute;border:1px solid currentColor}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}.sc-smoothly-calendar-h>table.sc-smoothly-calendar>tr.sc-smoothly-calendar>td.disable.sc-smoothly-calendar{cursor:not-allowed;opacity:0.5}";
+const SmoothlyCalendarStyle0 = styleCss$1e;
 const Calendar = class {
     constructor(hostRef) {
@@ -1885,10 +1855,10 @@ const Calendar = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Fragment, { key: '72c5a169add38daacba482bf64d5e0ac4e5376f2' }, index.h("smoothly-input-month", { key: '400a611870cd3bd1dfef25b76497a7ddef88db0b', name: "month", value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, min: this.min, max: this.max, inCalendar: true, next: true, previous: true, showLabel: false, onSmoothlyInput: e => {
+        return (index.h(index.Fragment, { key: '7b1fb3ef1cbdc1d5e6613384e64da895fcaa5cf3' }, index.h("smoothly-input-month", { key: 'ad67fc659c6a18d45132f422733ea24d7d56dd2b', name: "month", value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, min: this.min, max: this.max, inCalendar: true, next: true, previous: true, showLabel: false, onSmoothlyInput: e => {
                 e.stopPropagation();
                 "month" in e.detail && typeof e.detail.month == "string" && (this.month = e.detail.month);
-            } }, index.h("div", { key: '8c399dd9fdfd8de727bde48d1123d78f25f208a8', slot: "year-label" }, index.h("slot", { key: '9e8fbc095327b1a09c7ac6c71817d9157d20b53d', name: "year-label" })), index.h("div", { key: '56fc2501be0d3fc5a7156e5156cfe0db7294f7f2', slot: "month-label" }, index.h("slot", { key: '715855818d0299d69946f44d4b2031a47f3ce0a2', name: "month-label" }))), index.h("table", { key: '25a94c6bd36a6a509402b152456de995411cf00c' }, index.h("thead", { key: 'd310889be1da1ecef2b1a15aa5537815ed014660' }, index.h("tr", { key: '2aabd32a00df64e4692d91c797934c5309e42a6c' }, weekdays().map(day => (index.h("th", null, day))))), month((_c = (_b = this.month) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : TimeZone.Date.now()).map(week => (index.h("tr", null, week.map(date => {
+            } }, index.h("div", { key: 'b5da7a44e2576313b98caa246146c74eea0cdae3', slot: "year-label" }, index.h("slot", { key: '3862506ef62aaa5226d366b65351549a74c9ec6e', name: "year-label" })), index.h("div", { key: 'c1e36c66c30e6540039271fd1719c9d4438c8afa', slot: "month-label" }, index.h("slot", { key: 'e88f780f22b3e310b87df52e430de3d40de4d552', name: "month-label" }))), index.h("table", { key: 'a7ef6dc817715ed613e895b668c4ef1bf4cd1386' }, index.h("thead", { key: '6ddbd34b74a61affd2afee8ff27c44461a542224' }, index.h("tr", { key: '79141f617b4eacbd6dbc8f17045281a5a0a49ace' }, weekdays().map(day => (index.h("th", null, day))))), month((_c = (_b = this.month) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : TimeZone.Date.now()).map(week => (index.h("tr", null, week.map(date => {
             var _a, _b, _c, _d;
             return (index.h("td", { tabindex: 1, onMouseOver: () => (this.withinLimit(date) ? this.onHover(date) : undefined), onClick: this.withinLimit(date) ? () => this.onClick(date) : undefined, class: {
                     selected: date == this.value || (this.doubleInput && (date == this.start || date == this.end)),
@@ -1908,8 +1878,8 @@ const Calendar = class {
 };
 Calendar.style = SmoothlyCalendarStyle0;
-const styleCss$1o = ".sc-smoothly-dialog-h{display:block;position:fixed;top:55%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%;z-index:1;background:rgba(var(--smoothly-default-color), var(--smoothly-semitransparent)) !important}[hidden].sc-smoothly-dialog-h{display:none}.sc-smoothly-dialog-h>section.sc-smoothly-dialog{margin-top:var(--smoothly-dialog-margin-top)}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>div.header.sc-smoothly-dialog{border-top-left-radius:8px;border-top-right-radius:8px;margin-top:2em;color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color));border-color:rgb(var(--smoothly-primary-color))}.sc-smoothly-dialog-h:not([header]) div.header.sc-smoothly-dialog{border:none}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>*.sc-smoothly-dialog{position:relative;color:rgb(var(--smoothly-default-contrast));background-color:rgb(var(--smoothly-default-color));border-color:rgb(var(--smoothly-color));border-width:1px;border-style:solid;max-width:40em;width:calc(100vw - 4em - 2px);max-height:calc(100vh - 6em - 2px);height:auto;margin-left:auto;margin-right:auto;border-collapse:collapse}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>div.content.sc-smoothly-dialog{border-bottom-left-radius:8px;border-bottom-right-radius:8px;margin-bottom:2em;border:1px solid rgb(var(--smoothly-default-contrast));box-sizing:border-box;overflow:hidden}.sc-smoothly-dialog-h:not([header])>section.sc-smoothly-dialog>div.content.sc-smoothly-dialog{border-radius:8px}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog{position:absolute;right:-2em;top:-2em;z-index:1;border-color:transparent}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog:hover{border-color:transparent}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>div.header.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog>smoothly-icon.sc-smoothly-dialog{background-color:rgb(var(--smoothly-color));border-radius:50%}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>*.sc-smoothly-dialog>*.sc-smoothly-dialog{margin:10px}";
-const SmoothlyDialogStyle0 = styleCss$1o;
+const styleCss$1d = ".sc-smoothly-dialog-h{display:block;position:fixed;top:55%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%;z-index:1;background:rgba(var(--smoothly-default-color), var(--smoothly-semitransparent)) !important}[hidden].sc-smoothly-dialog-h{display:none}.sc-smoothly-dialog-h>section.sc-smoothly-dialog{margin-top:var(--smoothly-dialog-margin-top)}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>div.header.sc-smoothly-dialog{border-top-left-radius:8px;border-top-right-radius:8px;margin-top:2em;color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color));border-color:rgb(var(--smoothly-primary-color))}.sc-smoothly-dialog-h:not([header]) div.header.sc-smoothly-dialog{border:none}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>*.sc-smoothly-dialog{position:relative;color:rgb(var(--smoothly-default-contrast));background-color:rgb(var(--smoothly-default-color));border-color:rgb(var(--smoothly-color));border-width:1px;border-style:solid;max-width:40em;width:calc(100vw - 4em - 2px);max-height:calc(100vh - 6em - 2px);height:auto;margin-left:auto;margin-right:auto;border-collapse:collapse}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>div.content.sc-smoothly-dialog{border-bottom-left-radius:8px;border-bottom-right-radius:8px;margin-bottom:2em;border:1px solid rgb(var(--smoothly-default-contrast));box-sizing:border-box;overflow:hidden}.sc-smoothly-dialog-h:not([header])>section.sc-smoothly-dialog>div.content.sc-smoothly-dialog{border-radius:8px}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog{position:absolute;right:-2em;top:-2em;z-index:1;border-color:transparent}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog:hover{border-color:transparent}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>div.header.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog>smoothly-icon.sc-smoothly-dialog{background-color:rgb(var(--smoothly-color));border-radius:50%}.sc-smoothly-dialog-h>section.sc-smoothly-dialog>*.sc-smoothly-dialog>*.sc-smoothly-dialog{margin:10px}";
+const SmoothlyDialogStyle0 = styleCss$1d;
 const SmoothlyDialog = class {
     constructor(hostRef) {
@@ -1931,14 +1901,14 @@ const SmoothlyDialog = class {
         };
     }
     __stencil_render() {
-        return (index.h("section", { key: '895d01d3dc41982402c51de51028bd6f775fc83a' }, index.h("div", { key: 'a10dddff73f3afde845bed759770b71c9fe87d17', class: "header" }, this.closable && (index.h("smoothly-trigger", { key: '42957dd2cfa11eb08041897a84073d93e87d7f11', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '245fed623b099c0c7d8aff0c2a098c5730329a3d', name: "close-circle", fill: "solid", color: this.color }))), this.header ? index.h("h1", null, this.header) : index.h("slot", { name: "header" })), index.h("div", { key: '0ad2e35ade6a11497a69b5e6c63be9f05de79c78', class: "content" }, index.h("slot", { key: '0af86e9eda2be05845a2653a1e97c60848911e03' }))));
+        return (index.h("section", { key: 'ca3b4f95802da90bb96a3b40b780205f8e1d2bb4' }, index.h("div", { key: '23b2def77984b4f28b0f7f2719f30aa909556ae7', class: "header" }, this.closable && (index.h("smoothly-trigger", { key: '260384e3d9d2c34a770ac59a82912e0932d4da94', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'a684c6e625f4e15bfd365ee719587ffcd0c1af1f', name: "close-circle", fill: "solid", color: this.color }))), this.header ? index.h("h1", null, this.header) : index.h("slot", { name: "header" })), index.h("div", { key: 'b7e40e5039d6857e64f219abf99a116e42d9d668', class: "content" }, index.h("slot", { key: '4afe1422624889e79aab5212fbc5d09f283ea688' }))));
     }
     render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
 };
 SmoothlyDialog.style = SmoothlyDialogStyle0;
-const styleCss$1n = ".sc-smoothly-dialog-demo-h>smoothly-button.sc-smoothly-dialog-demo{display:block;margin-block:2rem}";
-const SmoothlyDialogDemoStyle0 = styleCss$1n;
+const styleCss$1c = ".sc-smoothly-dialog-demo-h>smoothly-button.sc-smoothly-dialog-demo{display:block;margin-block:2rem}";
+const SmoothlyDialogDemoStyle0 = styleCss$1c;
 const SmoothlyDialogDemo = class {
     constructor(hostRef) {
@@ -1948,7 +1918,7 @@ const SmoothlyDialogDemo = class {
         this.showFrame = false;
     }
     render() {
-        return (index.h(index.Host, { key: '6f23592546df981ab328a997d491fc38dd018cd9' }, index.h("smoothly-button", { key: '10c77679cf0d56bc2a6f72a811af6a8565c8a089', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), index.h("smoothly-button", { key: '3ac4824da8c88e874ef3ce1fd074c14eb03b564c', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), index.h("smoothly-button", { key: '90b57556f3c083e437e6adf978ca5985d2dcbdac', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), index.h("smoothly-modal", { key: 'd3302307ea096a2f80305f2d5ef18fa5e97a723e', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, index.h("h2", { key: '7659aef15bb808a8057ecf1be592d3a98c84000c', slot: "header" }, "Modal"), index.h("span", { key: '68eec929d76adaf9abb535220d7fbe7a7fcf8b0a' }, "Are you sure you want to confirm this action?"), index.h("smoothly-button", { key: '85963882f77a2d5d05076a873dc612a9dbb1d735', slot: "actions", color: "success" }, "Confirm"), index.h("smoothly-button", { key: 'a106ae037ea3c9ec9bbcc33f6a00324220b07b61', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), index.h("smoothly-modal", { key: '9d91b3f59755964920ae0a9dba277b7de4795d09', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, index.h("h2", { key: 'b8f58b34e93ea54fdb83880b6a132aedd530d69b', slot: "header" }, "Modal"), index.h("smoothly-summary", { key: '454a5f57522f0dbb0e2eb56365d62968a07b8f8c' }, index.h("div", { key: '17607ba2a7b918eed58e4f827697aaccc1a3849b', slot: "summary" }, "Lorem ipsum"), index.h("div", { key: 'fda1929764661b8ceee7fff0de965716590d04fb', slot: "content" }, Array.from({ length: 10 }).map(() => (index.h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))))), index.h("smoothly-button", { key: 'c176e661ec34df09bde9beffdf502264851a9548', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (index.h("smoothly-dialog", { key: '0596a4eba8b82b63d6711cb8f9e840eebf537072', closable: true }, index.h("smoothly-frame", { key: '1a027bc120e983af8790e4b03d47195b092deaa4', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
+        return (index.h(index.Host, { key: 'bb869a1a3c54958bdf29a0094d3649afa81770e5' }, index.h("smoothly-button", { key: '1ef55f5b1f3b350bd7d33348d8370f6cd95a289d', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), index.h("smoothly-button", { key: '1867bfeda91bc8f39c4b2e2cf00ec971845b97cb', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), index.h("smoothly-button", { key: 'a24d0a80108afdad983900b1abf9b6093a29673e', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), index.h("smoothly-modal", { key: 'e30f0149b3d8dc8037da0470815c9aa704d2d7c4', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, index.h("h2", { key: '76e559f061029a850bbdfcb2c7b9eae66bec49a9', slot: "header" }, "Modal"), index.h("span", { key: 'f2429c7978f5a14db471fd643a608581232e6b99' }, "Are you sure you want to confirm this action?"), index.h("smoothly-button", { key: '7cbb9b7df38d30076d8fb1074640a5447e8c9def', slot: "actions", color: "success" }, "Confirm"), index.h("smoothly-button", { key: '274d9655b7f23b7ce891e736b31924dc00fe8c0c', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), index.h("smoothly-modal", { key: '284f4e666fafa5e9de84f0fd19014657e9c4ea28', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, index.h("h2", { key: '78f7eda89834a0228792e95bf9d78f1cef6dab93', slot: "header" }, "Modal"), index.h("smoothly-summary", { key: '41ec8ae55ee1241e1935db9e5035450d4f50832d' }, index.h("div", { key: '4a807f599a75573c249539f7e8a456b44f4280cd', slot: "summary" }, "Lorem ipsum"), index.h("div", { key: 'eca8bdcd9bd740a4597b28f7fc7361ec9ecb3753', slot: "content" }, Array.from({ length: 10 }).map(() => (index.h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))))), index.h("smoothly-button", { key: 'a1da70bd2670e5ebe2f209286c6c626b0c3a233a', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (index.h("smoothly-dialog", { key: '41e8a92ef77e563f4cf59eeb17d6c0c90a21f20f', closable: true }, index.h("smoothly-frame", { key: '7296968b616654ad2ca0a757fbe7b0b8a8d06c31', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
     }
 };
 SmoothlyDialogDemo.style = SmoothlyDialogDemoStyle0;
@@ -3768,8 +3738,8 @@ class Handler {
 }
 add$5("hex-color", () => new Handler());
-const styleCss$1m = ".sc-smoothly-display-h{display:block;white-space:wrap}[hidden].sc-smoothly-display-h{display:none}.sc-smoothly-display-h>div.sc-smoothly-display{opacity:0.6;font-size:.8rem}";
-const SmoothlyDisplayStyle0 = styleCss$1m;
+const styleCss$1b = ".sc-smoothly-display-h{display:block;white-space:wrap}[hidden].sc-smoothly-display-h{display:none}.sc-smoothly-display-h>div.sc-smoothly-display{opacity:0.6;font-size:.8rem}";
+const SmoothlyDisplayStyle0 = styleCss$1b;
 const SmoothlyDisplay = class {
     constructor(hostRef) {
@@ -3789,16 +3759,16 @@ const SmoothlyDisplay = class {
         const type = this.type;
         switch (type) {
             case "json":
-                result = index.h("smoothly-display-json", { key: 'dae527906c3ef17061176ca4fa2b609136029d2a', value: this.value, collapseDepth: this.collapseDepth });
+                result = index.h("smoothly-display-json", { key: '6b31a96e16b4b4f5a881fe9de434326d7262d302', value: this.value, collapseDepth: this.collapseDepth });
                 break;
             default:
                 result = format(this.value, type);
                 break;
             case "email":
-                result = index.h("a", { key: '473961d0ae2df537bbd562de4c303b8a78579fe6', href: "mailto:" + this.value }, format(this.value, type));
+                result = index.h("a", { key: '8cdbbe4ee158e11761a3dabeffa6fd7165004639', href: "mailto:" + this.value }, format(this.value, type));
                 break;
             case "phone":
-                result = index.h("a", { key: 'ccb2abfa11f6240d8e2defb0d603db7910d9bfa4', href: "tel:" + this.value }, format(this.value, type, this.country));
+                result = index.h("a", { key: '17745ad8ad63df1451e314608b210dd31b35c8e7', href: "tel:" + this.value }, format(this.value, type, this.country));
                 break;
             case "postal-code":
                 result = format(this.value, type, this.country);
@@ -3835,35 +3805,35 @@ const SmoothlyDisplayDemo = class {
     }
     render() {
         return [
-            index.h("main", { key: '39eb7bb72cea0c312714780bd9db27a77836a07d' }, index.h("fieldset", { key: '46b0779510e3c6ee1106a6b3a83a13d41ac63b2e' }, index.h("h2", { key: 'f680e63af56e7d50cc660eac1a1b81de653d48bd' }, "Smoothly display"), index.h("dl", { key: '26c00ce48352dde5b499bdd170488ffc0e9be984' }, index.h("dt", { key: '8dbadab550b83b5bfc4acf8cff7b61d7ffd43af9' }, "Duration"), index.h("dd", { key: 'fc8689620efd6dd6e1ab8d1390b8d813be2520ca' }, index.h("div", { key: '6ef111616240ac903eb2af7f2636936611c0a4f8' }, index.h("div", { key: '7dc311657409ada5e96ce832158c020e55c4cc45' }, index.h("smoothly-display", { key: '80fa4e17d62413c7699b94ef3ffa286f04b3f7b8', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: 'e36d5b6131c20a99397c4c59f1dd2aace482dd9d' }, index.h("smoothly-display", { key: '2858bd44eda1a0e81e22cd7f156ada646ce74e4b', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: 'ad4757c65bfdee5ec7eaec6ca93985f8205ef629' }, index.h("smoothly-display", { key: 'e6b76219a8a754060a122303f9946fd3bac53ac3', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: '5448e1f01cde73667fcddb1c12322bb3580570fd' }, index.h("smoothly-display", { key: '716327a3acf4cc15693d1dd4bc4a2652ed10c6e5', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: '7163c5acb2a9f3dcb9c620866a1bde90548f1d9a' }, index.h("smoothly-display", { key: '75f2c509df90c14512e0ff6f9b218806c3b1d690', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: '67bf890913db1d4907a7d8dc4a1386a85b30bb49' }, index.h("smoothly-display", { key: 'f38320854b7cbe1133ac214fda629cdb6e34fd04', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: 'a0a553d3d7f1bf1e28c58f307e1cfc56dede0a86' }, index.h("smoothly-display", { key: 'dc28a4fab596e16a1180a6ff1d0ee081d2250efb', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: 'cc4498418d1266333357fa9a47cfe267fefc4cb1' }, "text"), index.h("dd", { key: 'dbd253f9d092d730792090edc0d1c7294cd3268b' }, index.h("smoothly-display", { key: '4b140b91c5b2e268dc691c4b2789ab1ad113cf9f', type: "text", value: "text" })), index.h("dt", { key: '7a7655e9282322688e901e034483e09aefe8dc69' }, "postal code"), index.h("dd", { key: '3f880dcdad765deeb5bce0cfa92341cf08e42ceb' }, index.h("smoothly-display", { key: '253b67d433924b812db35ac4b9442e8df6fb456e', type: "postal-code", value: "752 31" })), index.h("dt", { key: 'a344618739cc1ce559ac80554f09405901643514' }, "password"), index.h("dd", { key: '0f6f97055179d534b56754e9f4ffe868982f8364' }, index.h("smoothly-display", { key: '0a95e73ffd18edec818388c6451e10e74ac25a1f', type: "password", value: "password" })), index.h("dt", { key: 'd799959280bd357c59c1458620947ceb8261a8bc' }, "email"), index.h("dd", { key: '6d822ad99d14d7ac68dfe5e60e76bc4f62039c60' }, index.h("smoothly-display", { key: 'df086753232838bbec2b4d6fe17a02e7640c7ec3', type: "email", value: "test@example.com" })), index.h("dt", { key: 'eade96bd9319f2782533ad3ee6e73a279780dcc4' }, "price"), index.h("dd", { key: '82580ddd52f3ec732054a92803c608241a03870c' }, index.h("smoothly-display", { key: 'db4df7924f25fe5c4b8c1ef79e4a2ccbfdb2b759', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '6218fda2e606e48855cf22d2541a1b811f568a31' }, "price without decimals"), index.h("dd", { key: '6f7b2d3f397e98bfcf7031739b8ded01b39c45b8' }, index.h("smoothly-display", { key: 'eec6de2446c60659d6fcfba09d1e1867dc5bb5f9', type: "price", value: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: '049e4dd01a1ecadf48febcb0c651b3a463373be7' }, "price with decimals if they are set, otherwise no decimal"), index.h("dd", { key: '55b856f1380424862dc75ddb5a5d4ff9d6d4393b' }, index.h("smoothly-display", { key: 'd53fa00ba54c27011a7769bf89fb048d5ac43c2f', type: "price", value: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: '90d8a4d1e1649038656607cb0b65d805e3cb2aab' }, "price with decimals"), index.h("dd", { key: 'c9632b9d6252727300a101c585a8b26e5cc7fe51' }, index.h("smoothly-display", { key: 'fef95d8888886353708964a0bad03d716975c183', type: "price", value: 200.2, currency: "SEK" })), index.h("dt", { key: '7abf3203c89e5c502717cd9757c937e582c1b6c7' }, "percent"), index.h("dd", { key: '2fd5b7ec91de2fb4e0cbaf864ca258b852e88cca' }, index.h("smoothly-display", { key: '0e241291b20784a4d802a83e15dadf318079f236', type: "percent", value: "42" })), index.h("dt", { key: '6c48237d73aba23ab3f35980f898eff5c2b87364' }, "phone"), index.h("dd", { key: '53f16cee1b5c59599e8283cb4c22e751e8be1f3b' }, index.h("smoothly-display", { key: '0338829b491a27c9d345cac5190203339c41ac6e', type: "phone", value: "0101881108" })), index.h("dt", { key: 'afb89b8f0a49ad5bf1ef8bba4a51637f7ed57af1' }, "card number"), index.h("dd", { key: '29e4eb02d6924ed8f7ac2797377ea3bf7b3e0623' }, index.h("smoothly-display", { key: '745fefbafe113e1c12ace365f34c39938b3bb659', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '54a9b3bf222d4a9fa1bf1444b64fa7e6b4b7d5fd' }, "card expires"), index.h("dd", { key: 'a538c6af31872884cebb5e5667cd799d1cbe92dd' }, index.h("smoothly-display", { key: '511a2c804811e9e1d3195d4ab8dad15e3e73cae4', type: "card-expires", value: "7/22" })), index.h("dt", { key: '16fa7df01a7d60ec01af68a37d196e35ff8d6503' }, "card csc"), index.h("dd", { key: '0a3df0ba09f6fc7be53d17f0c87eece817a8145c' }, index.h("smoothly-display", { key: '1351526da17988597fd739fe805a0da21689b520', type: "card-csc", value: "987" })), index.h("dt", { key: '4ac6ff219663982e06b96e7b3d7661b7317cee7f' }, "date"), index.h("dd", { key: '6474b93898b9d357a4276a1801c0b1d739e8ae30' }, index.h("smoothly-display", { key: 'e6a43b2f91d87d9de7dd49583c97c93660157dfd', type: "date", value: "2022-07-07" })), index.h("dt", { key: 'ad203d97c4b014f6235005882d1e35f32c37d291' }, "date time"), index.h("dd", { key: '7869f2afaba99fd6c277707fd06dbc546e912377' }, index.h("smoothly-display", { key: 'c63424a1d505cedcd348aeddbc4083ec0fb99b43', type: "date-time", format: {
+            index.h("main", { key: 'fd051f67ea55f254181be2b43716e84e00cabb05' }, index.h("fieldset", { key: 'bea8026fe521ec050e1780416fa9e32989b2afa4' }, index.h("h2", { key: 'ef4c1a656d67796afc8f9c5c9db63c04f96aab4c' }, "Smoothly display"), index.h("dl", { key: '8deda943fa8ead28b6df1b007907f6d9dbf66d85' }, index.h("dt", { key: 'caf0ad2fe220cdb62d47140efd9684998246e2c3' }, "Duration"), index.h("dd", { key: 'f1c4659bf36f0a327fabba9314042dace342c13b' }, index.h("div", { key: '30872a9bd82d2814a82cf53ec42f3a7b3fe13b3a' }, index.h("div", { key: '5f733cc2b6a745712e246479c59b8aa3daf11312' }, index.h("smoothly-display", { key: '1998b9c2061fa468aa9fffe4d733a8a683baae05', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), index.h("div", { key: '159344fc77844facc8960a4f71a99813623a7763' }, index.h("smoothly-display", { key: 'd0f14a4f05e1b9353b9a0b389c17e3fbd7537b1b', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), index.h("div", { key: 'cc65ac80578b939be2d3802fd3a5ded8fbf5b384' }, index.h("smoothly-display", { key: '489a7d80e18f1bb9d26eb8e807467f0cd8e0e1dc', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), index.h("div", { key: 'a7d5607906b992f698a00d293872dd5cfc65ad42' }, index.h("smoothly-display", { key: 'b868bb9a2ce5b8b0bab62e4ab90f5ed8172b2dc1', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), index.h("div", { key: 'bf53f2aae5ab5cdb6f7d98aba73a9e382fb98bd6' }, index.h("smoothly-display", { key: 'd27e664c4d0007dccfae976a13b3c3e202d7052b', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), index.h("div", { key: '7e7ab059fe4ce79836b9b3c63a212e5ab9e4b36c' }, index.h("smoothly-display", { key: '388670fcb5c8371244c4112d0cf5f0050b59b134', style: { display: "inline" }, type: "duration", value: {} }), " h"), index.h("div", { key: 'e34c143b748072810cec75427ee497bfa25f92d7' }, index.h("smoothly-display", { key: 'bc74a20668e2b2b8e5561ebcd79fcff63c7886d7', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), index.h("dt", { key: '04d7d7e6d8695b50afd0c80d7b8123d22a96a0a0' }, "text"), index.h("dd", { key: '0a51fa2990fa85c8154e2a14ad374252104d8658' }, index.h("smoothly-display", { key: '75b7cf9296c52cda27db01cc201b4417e2f19288', type: "text", value: "text" })), index.h("dt", { key: '3c9fa1e7b2eda3a838d779885ad48073a1e7ca78' }, "postal code"), index.h("dd", { key: 'adcfacf0c296667c4a98919fc64ff1b6823f253c' }, index.h("smoothly-display", { key: 'f35d166fc0ae74f26d9dab3ce217edf1e8df348e', type: "postal-code", value: "752 31" })), index.h("dt", { key: '5dd7df04105283e70182a8c24d69c7abc1632a0e' }, "password"), index.h("dd", { key: 'd785701c8d5e6ce9dddfe618b91f113b1cc47694' }, index.h("smoothly-display", { key: 'd9a04bc3d9c62eebf4b8fa192ee43544e25f48ec', type: "password", value: "password" })), index.h("dt", { key: '72a245580c0d67958d821918a64634089badf6e0' }, "email"), index.h("dd", { key: '4e2129c4690821e35017a025378a52a82d9c6e12' }, index.h("smoothly-display", { key: '6f60bb0a22b496b52f76d72c25f9c4959c275174', type: "email", value: "test@example.com" })), index.h("dt", { key: 'b47e6d91ac2ad5839eff3f2ed72793406c447381' }, "price"), index.h("dd", { key: '5ed6dc4d1894989f8c59e85a9d6b3474b1838d46' }, index.h("smoothly-display", { key: '88d50f738cc333ee0284011ded0e5bc2eb90eb01', type: "price", value: "13.37", currency: "SEK" })), index.h("dt", { key: '52b377e012d006448361e4190e85238eab82f425' }, "price without decimals"), index.h("dd", { key: '2d070cde97c125943423c28dd37a1bec7f1bf521' }, index.h("smoothly-display", { key: 'a63703e7aa73188db4b78d2378f2e30d491b35d7', type: "price", value: 200, currency: "SEK", toInteger: true })), index.h("dt", { key: '10348b35a582998ee6107a2b5c55a589e0d8c66d' }, "price with decimals if they are set, otherwise no decimal"), index.h("dd", { key: 'da178ce35a352086c815f4cfac4096e34abbaef7' }, index.h("smoothly-display", { key: '08b7c0ba00f0b9b57d1ea8cc4b537bf6b632c2b0', type: "price", value: 200.2, currency: "SEK", toInteger: true })), index.h("dt", { key: 'd7db59b325e85da3458ac99916b9bcf67ea567ff' }, "price with decimals"), index.h("dd", { key: '526c59b42c339389a0839a0ee96299d184850d2c' }, index.h("smoothly-display", { key: '2d7ebb7450b5eb08ee6ff7ada84034db4cfb06ab', type: "price", value: 200.2, currency: "SEK" })), index.h("dt", { key: '0417d708b6db96a1a3d08ccb552dc3704383f498' }, "percent"), index.h("dd", { key: '8c35ad31827aeddb6b205a7009e9987d317a813c' }, index.h("smoothly-display", { key: 'ebd4dd2565a20e48d31724b44d11b5cb44ae5277', type: "percent", value: "42" })), index.h("dt", { key: '65a23b48dbed3e8e7b50725148acd17891e19ddd' }, "phone"), index.h("dd", { key: '515ed149215811c8434f340256f8b4d331763db9' }, index.h("smoothly-display", { key: '6b7422b4b8387e74ef38aba7e8567f11b263cf9a', type: "phone", value: "0101881108" })), index.h("dt", { key: 'c1fe3e553de1313a579833275f43246d0673f812' }, "card number"), index.h("dd", { key: '6078440f5880b8442e388517f42660362841db2a' }, index.h("smoothly-display", { key: '6eb5a018d0d6f7f8458955369481294408d4fdf4', type: "card-number", value: "4111111111111111" })), index.h("dt", { key: '4ac0a352835d49083a89465d7fea27f951d2c4ac' }, "card expires"), index.h("dd", { key: 'db0cbb3b0795b19ffbf184da0dd2625eb8fb8918' }, index.h("smoothly-display", { key: 'd9ee4dc173460f0952d77053d12c68fce7feddc6', type: "card-expires", value: "7/22" })), index.h("dt", { key: '515cacce3dca652dfba9bf5528211576231495e5' }, "card csc"), index.h("dd", { key: '9f6c2d8490963f09828993d42ee16b9ffc5e0d0f' }, index.h("smoothly-display", { key: '1afda51b0213c77cf3b353bade47671790475112', type: "card-csc", value: "987" })), index.h("dt", { key: 'e7204fbb88672bf46f9551d7cf50e750cc8bbb38' }, "date"), index.h("dd", { key: '34fcebf482a696d179efbccc0708b8e71e8726d1' }, index.h("smoothly-display", { key: 'a55391a66ccc1cf033a2519fdf3b75c2510cb11f', type: "date", value: "2022-07-07" })), index.h("dt", { key: '4a818e58e65af6b0b27d090fb53909f4030a0442' }, "date time"), index.h("dd", { key: '18874fbe62d3f0d4758fbcb3ea56c28698285c23' }, index.h("smoothly-display", { key: '137a6be8368b02ec204b5baa82bf455f69a2fded', type: "date-time", format: {
                     year: "numeric",
                     month: "short",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: 'bad6623c83aa440db37bba77404a0e3261406359' }, index.h("smoothly-display", { key: '70e4ab1844a5c575c54ef14314ce6f40423df47b', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '81829d196bd5886e41d896369a9c20a0e9ac6475' }, index.h("smoothly-display", { key: '69d3bce166d11def43480659575c51c171c22a45', type: "date-time", format: {
                     year: "2-digit",
                     month: "long",
                     day: "2-digit",
                     hour: "2-digit",
                     minute: "2-digit",
                     second: "2-digit",
-                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: 'b7d2b44b723b3d32e063a517034db9c6478a77c5' }, index.h("smoothly-display", { key: '12492a2754ccdcfa781e2ef46a2579ad3bbb49a0', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), index.h("dd", { key: '9f8913ccf6eb9aa0320ccc96c5f63d1368e03cb5' }, index.h("smoothly-display", { key: '440dec80b84e484440f55e568d018a46ebdcc199', type: "date-time", format: {
                     year: "numeric",
                     month: "2-digit",
                     day: "2-digit",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '72fda443ec030240fd29071d1a3eca87e2fa77d2' }, index.h("smoothly-display", { key: '3bf63c1395a81d5da4c6594825a3120d99d36fd3', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: 'ca5f7e206cf42b4bee3e885c8dd6fb5ce1fb414e' }, index.h("smoothly-display", { key: 'c2258980a847c8d2ac8c77a47e7a5772bce08ec8', type: "date-time", format: {
                     year: "numeric",
                     month: "numeric",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: 'd9a5a251c68c83e51610bc8aac39c23a14a0da10' }, index.h("smoothly-display", { key: '8a7438690f5b6ba0bbad4d676ebd161538024540', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: 'f426a55591ef6e03405cce72c0e64eaff677beb3' }, index.h("smoothly-display", { key: '3402255ed959acefbc71333683b92dee43275d7d', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: 'cc2b1b59c5d789358fb67a6d48a5a9cdf7fe599b' }, index.h("smoothly-display", { key: '1f3a0edc25b8b9b34d6ffbe88787133bd145bc4c', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), index.h("dd", { key: '8b99f1ea1299e7001053e7b9deece7e6a15e2542' }, index.h("smoothly-display", { key: '89c93cace88996c65faa0791cc0ffd7a4e9e083a', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '570142486b7ab93ddd59d9f418a60d700c7817d5' }, index.h("smoothly-display", { key: '63dfcf83183fba060fceed447d4bcdd0c30eb5a9', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", { key: '4cc6f5ba3ddd1b339d5fb015de456abae54aab43' }, index.h("smoothly-display", { key: '6c2f659af73220903642fd0807d1151f204ba837', type: "date-time", format: {
                     year: "2-digit",
                     month: "numeric",
                     day: "numeric",
@@ -3871,21 +3841,21 @@ const SmoothlyDisplayDemo = class {
                     minute: "2-digit",
                     second: "2-digit",
                     timeZone: "Europe/Stockholm",
-                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: '747992d0fa309d7c8cbd13d8eb7818accbb6d522' }, "Display JSON"), index.h("dd", { key: 'bc2d0785dbb216170fd320a3e7ba000d532e54ff' }, index.h("smoothly-display-demo-json", { key: '6d23c6c7cc4720d60ea2160780f26ad10384d6f9' })))), index.h("h2", { key: '2e29c1a9d6b24b00ff6fc6c41201fecd16003684' }, "With labels"), index.h("dd", { key: 'e60a4cf0fa048db54972698f0c41c10dd420231f' }, index.h("smoothly-display", { key: 'c31dc1154af9e19ae130336862060106d3e1ca80', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: 'f442d5b680e29cffa32a35b5beab2281bb41d1e8', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: '7054be327820ae495a87652e4eee220bd224835c', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: '164ed80432c0342192e83ddaea4f27a1b283b222', label: "Logs", type: "json", value: [
+                }, value: "2022-07-07T12:15Z" })), index.h("dt", { key: 'cb48cb11e0a8400291f08caa821b53cb443f8f12' }, "Display JSON"), index.h("dd", { key: '5f88f3eedffc8993d747898f9bf5dc9da06dbfb1' }, index.h("smoothly-display-demo-json", { key: '695a426dd6523dbac16fe830167f21e095499760' })))), index.h("h2", { key: 'e847b40c54e9c2343c3c572802732594110a3520' }, "With labels"), index.h("dd", { key: 'fa442318099a443bbc08f8b989993184afe12f57' }, index.h("smoothly-display", { key: 'e0b37f5c62a577c16805b7b3793a397ade55944e', label: "Today", type: "date", value: TimeZone.Date.now() }), index.h("smoothly-display", { key: 'e17917bd5c0ba53f198a218ac5377feb64a3219c', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), index.h("smoothly-display", { key: 'd8c0252e5b772d1328adcaff951d2394b4da4fdf', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), index.h("smoothly-display", { key: '3a020e58a1fbac08de20efa83040a6d2fff73d40', label: "Logs", type: "json", value: [
                     { type: "trace", message: "Hello" },
                     { type: "error", message: "Oh no!" },
-                ] })), index.h("fieldset", { key: 'ae8fda6783a1045b24a90f73d95eb75fef524c3b' }, index.h("h2", { key: '8b735feede5041d16621b35ab4ed65b4f6893e02' }, "Test of different kinds of notifier"), index.h("button", { key: 'eff36a6ecd92f817fcb196996b6677945e535c6a', onClick: () => this.noticeWarning(redirect.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: 'bedcbef25de624da67f1ce3b1d6413d7f170113e', onClick: () => this.noticeWarning(redirect.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: 'c6a9ac7dacf8cc450d2bfb02a2bcb85f484f0f24', onClick: () => this.noticeWarning(redirect.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: 'a31c5b25807dac6438f1d3aad447610260611dbf', onClick: () => this.noticeWarning(redirect.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { key: '6875bd9cadd9f5eedfdc1dc41a68ef602f3ba160', onClick: () => this.noticeWarning(redirect.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", { key: 'f7493cc029025477c394be2e48640f943e7d45df' }, index.h("h2", { key: '14f549bdca342919dd0cc6b6e039b387ca9d5f47' }, "Smoothly spinner"), index.h("div", { key: '2532ec422ca3c7f482fa2f80b8f0e188d00ed9e7', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: 'ca6bff694dfae13cbe31781fe75dc5a7f22726ce', size: "large", style: {
+                ] })), index.h("fieldset", { key: '08d6ad86a6d79ff873156f7cb4d84360d8e92f38' }, index.h("h2", { key: '91450decd67bdc21c204adaa7f95d9d0d2f64107' }, "Test of different kinds of notifier"), index.h("button", { key: 'ded2972233a8361b91b75c8386ca3f3299735959', onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { key: '833fe76b9edaa48c4db0aed015bfd310936bd01a', onClick: () => this.noticeWarning(Notice.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { key: '5f74587f60215db920ea6a0b9a01702642e61745', onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { key: 'ed76217b6f2a5f84ecc04a04ebc13c1441958b39', onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { key: '7f7b974a4ed5528d8d226d380233e219203553bc', onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", { key: '287c9ce5ae199417e9883b2d10c7f74e755ec0f1' }, index.h("h2", { key: '14379ccb8cc02c5041a11ba85b15785a4fd87711' }, "Smoothly spinner"), index.h("div", { key: '71d53a5d93355f097f377cf0665c299fe85746e8', style: { width: "fit-content" } }, "Large", index.h("smoothly-spinner", { key: 'ea3b1bc70eb21b536c561f33176caffd2891b6df', size: "large", style: {
                     "--spinner-background": "200,255,200",
                     "--spinner-background-opacity": "0.2",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '94e96d5ea29719b5ed508879df5905db45e9b892', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: 'a54f39247c27520000ec8a35acc4dca1eab61269', size: "medium" })), index.h("div", { key: '694bb6839a34c4d3c159674ac9d7b8764e715a0a', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: 'a4842814663b330faa6eb266722507dea1f1b0f0', size: "small" })), index.h("div", { key: '11dd2fd0047e3de22abe1de29f63ac56898b715e' }, "Icon sized spinner on button", Scrollable.Color.types.map(color => (index.h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
+                } })), index.h("div", { key: '0d5e895fdd77b5726b8c239e47cd044a067d1f2a', style: { width: "fit-content" } }, "Medium", index.h("smoothly-spinner", { key: '385f5a706c79db46521602b25a2b74010108c08d', size: "medium" })), index.h("div", { key: 'c7fa64f4652ec6c43d76f2479b7c0d495b839a39', style: { width: "fit-content" } }, "Small", index.h("smoothly-spinner", { key: '5c495259b28ce92f47998e40c30899ceaca44712', size: "small" })), index.h("div", { key: '788b86e0d1b31798d3ccb7a36b3b2ca30bbe5492' }, "Icon sized spinner on button", Scrollable.Color.types.map(color => (index.h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
                     this.downloadingSpinner = true;
                     setTimeout(() => (this.downloadingSpinner = false), 3000);
-                } }, !this.downloadingSpinner && index.h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (index.h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), index.h("h3", { key: '8e492b4dbad096875ccc36db465cd7441d33a6fa' }, "Spinner with overlay"), index.h("div", { key: '00c85d4ee92d8f2cefec690537912abd43f97707', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: 'd340e0a508673de5a44756e13a85cedcfe328e71', overlay: true, size: "large", style: {
+                } }, !this.downloadingSpinner && index.h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (index.h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), index.h("h3", { key: 'bfc699d0d863be1f32947b2c6fc8e423cfe9c6e7' }, "Spinner with overlay"), index.h("div", { key: '8b104392475d98d3ed535266efb5e1e43242eec2', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", index.h("smoothly-spinner", { key: 'da19b77e7623e6e5beb7a79f481c1454c0ba54ae', overlay: true, size: "large", style: {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), index.h("div", { key: '016fe696e6e74e25bda569a1699e6049ac92c889', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: '66092e4011ae66dfaa436c55a39721be315c519a', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '36a1cc846982bb5a1dc54c2f543c476b1fce8c91', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: 'b693e53a081661680f6a19ba81dacd2e41371902', overlay: true, size: "small" }))), index.h("fieldset", { key: '5a7e3b61ad86969f26a3679a58323a5a3e3eab65' }, index.h("h2", { key: 'bcc731681d6db9513cfc7391fcf3689233c2d540' }, "Smoothly summary"), index.h("smoothly-summary", { key: '28698a792708b9630138d21a00bd6e367c8d2836' }, index.h("p", { key: '43cddb839948c05ee1abe3e972b465601edcfa57', slot: "summary" }, "Some title"), index.h("p", { key: '7e170421c947e618d3c88c2c78bc937cf895e7d5', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '7766bc278e892e217b6e6441e41aa626d7ecf2d0', size: "large" }, index.h("p", { key: 'a0d83a3dacd955442983b2cbf086c95e5f54b87b', slot: "summary" }, "Some title"), index.h("p", { key: '2d5957d9d8bd0d0ad1a8f0b11eb2ff211879c393', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '9a03d40210651f64b7e3146b4f1f90d0af8e3b68', color: "danger", fill: "clear" }, index.h("div", { key: '91888525a78ae6cf2bfbf492d4b8dc205d4ac1da', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: 'a22f933241a444da80c6d89b65275c4f6592609d' }, "Person"), index.h("smoothly-icon", { key: 'c79775e186b742d77715789887948c93c2c5867b', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: '41b5c81feda26d37aab0d42093de072484c53045', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: 'b7d82ffdf718528fbd038b9ce51490cbce1226fe', color: "danger", fill: "clear", open: true }, index.h("p", { key: 'f09c420f105318297999e44fb90b3e22f3a89a67', slot: "summary" }, "Some other title"), index.h("p", { key: 'b2761d6607e63756c7e0ee18a9da1f16f5c48969', slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")), index.h("h2", { key: 'de8ca3994652d8f1dd8b364d79879a8ee638f9e6' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: 'dd8c4d057d26e554b03aefc7a1cc63ccb4f162c4', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
+                } })), index.h("div", { key: '5db60a3ef1c609c086605215bf67587018350a2b', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", index.h("smoothly-spinner", { key: '5680ba103faabfaf100971b44bd593c78e829d6f', overlay: true, color: "secondary", size: "medium" })), index.h("div", { key: '5c1744129386116f82e90b461a82b41f1b1a7fa2', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", index.h("smoothly-spinner", { key: '986d2d8a53fc002aee01448f70959a084712c3a2', overlay: true, size: "small" }))), index.h("fieldset", { key: '3c8217e31e5895740f9ec2db68a5936ece213134' }, index.h("h2", { key: '230544e3d1daf869ffe78018507938ede4cdd25f' }, "Smoothly summary"), index.h("smoothly-summary", { key: '1ef51bf9f6f09efec5ce78320c8c8d887e832536' }, index.h("p", { key: 'bbb4e1c627cc29bcd3dcbf869123cd46fcee7c78', slot: "summary" }, "Some title"), index.h("p", { key: '98c3df7e2be91138ada47962a3d816ef7ca96116', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '0cee5711b5d4982d83a5af38de7b4a9d07f5b681', size: "large" }, index.h("p", { key: '01d3e7770a29191f3435ff71b5b910b1fe971986', slot: "summary" }, "Some title"), index.h("p", { key: '4bf19406510e9754aa6a6e80bf246250d16147b7', slot: "content" }, "Some content")), index.h("smoothly-summary", { key: '140ae2b80f6444ae1b0c6f010a986ad44a3ae660', color: "danger", fill: "clear" }, index.h("div", { key: '79d24ee9a8b34a5a1237133cf3b91b57a1939be9', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", { key: 'f356abe390f260e9a42fdda66618326133aa077d' }, "Person"), index.h("smoothly-icon", { key: 'adbc3c65da8c17a682f1f94dff503a2fb8b15f6c', name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { key: 'c9ee2266ff09249a525c04d5f336f7d837b683bf', slot: "content" }, "Some person information.")), index.h("smoothly-summary", { key: '8ceed261dadef7e9e1a36223034838843b193d95', color: "danger", fill: "clear", open: true }, index.h("p", { key: 'f463c38fc03dd5bd1f1888a1112f0ff81d333bbd', slot: "summary" }, "Some other title"), index.h("p", { key: '443efb036132d38db530da20d718f66659a30594', slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")), index.h("h2", { key: '3e0fe4420b481349bae4af2c0f82b3488be08dc1' }, "Label"), labels.map(l => (index.h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), index.h("smoothly-label", { key: '2a741a99f86afdb9facdc93c3e39eadc8087910d', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
         ];
     }
 };
@@ -3912,7 +3882,7 @@ const SmoothlyDisplayDemoJson = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a3e2a042bff06a25da98b43e95705b303a4e2d7c' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (index.h(index.Host, { key: '67b8c263dfe7d72e1072ba3d630ea74f0a05788a' }, [0, 1, 3, undefined].map(colapseDepth => [
             index.h("div", null, "collapseDepth=", colapseDepth !== null && colapseDepth !== void 0 ? colapseDepth : "undefined"),
             index.h("div", null, index.h("smoothly-display", { type: "json", value: json, collapseDepth: colapseDepth })),
         ])));
@@ -3937,8 +3907,8 @@ const JsonValue = ({ value, collapseDepth }) => {
     return TimeZone.object().is(value) || Array.isArray(value) ? (index.h("smoothly-display-json-object", { value: value, collapseDepth: collapseDepth })) : (index.h("smoothly-display-json-primitive", { value: value }));
 };
-const styleCss$1l = ".sc-smoothly-display-json-h{font-family:monospace}";
-const SmoothlyDisplayJsonStyle0 = styleCss$1l;
+const styleCss$1a = ".sc-smoothly-display-json-h{font-family:monospace}";
+const SmoothlyDisplayJsonStyle0 = styleCss$1a;
 const SmoothlyDisplayJson = class {
     constructor(hostRef) {
@@ -3947,13 +3917,13 @@ const SmoothlyDisplayJson = class {
         this.collapseDepth = undefined;
     }
     render() {
-        return index.h(JsonValue, { key: 'c09039321486768334c742e4efc26dab510d2ffc', value: this.value, collapseDepth: this.collapseDepth });
+        return index.h(JsonValue, { key: '4794f1dc5f6a104cc37ef15d6ff54650c2e162e6', value: this.value, collapseDepth: this.collapseDepth });
     }
 };
 SmoothlyDisplayJson.style = SmoothlyDisplayJsonStyle0;
-const styleCss$1k = ".sc-smoothly-display-json-object-h{font-family:monospace;position:relative}[hidden].sc-smoothly-display-json-object-h{display:none}.indent.sc-smoothly-display-json-object{padding-left:1rem;border-left:1px solid rgb(var(--smoothly-light-shade))}.sc-smoothly-display-json-object-h:not(.open) .content.sc-smoothly-display-json-object{display:none}.sc-smoothly-display-json-object-h>.content.sc-smoothly-display-json-object>.indent.sc-smoothly-display-json-object:last-child>.comma.sc-smoothly-display-json-object{display:none}.open-bracket.sc-smoothly-display-json-object::after{background-color:rgb(var(--smoothly-light-color));color:rgb(var(--smoothly-light-shade));white-space:pre;border-radius:0.25rem;font-weight:bold;font-size:0.8em}.sc-smoothly-display-json-object-h:not(.open):not(.empty)>.open-bracket.sc-smoothly-display-json-object::after{content:\" ▶ \" attr(data-length) \" ◀ \"}.open.sc-smoothly-display-json-object-h:not(.empty)>.open-bracket.sc-smoothly-display-json-object::after{content:\" ▼ \"}";
-const SmoothlyDisplayJsonObjectStyle0 = styleCss$1k;
+const styleCss$19 = ".sc-smoothly-display-json-object-h{font-family:monospace;position:relative}[hidden].sc-smoothly-display-json-object-h{display:none}.indent.sc-smoothly-display-json-object{padding-left:1rem;border-left:1px solid rgb(var(--smoothly-light-shade))}.sc-smoothly-display-json-object-h:not(.open) .content.sc-smoothly-display-json-object{display:none}.sc-smoothly-display-json-object-h>.content.sc-smoothly-display-json-object>.indent.sc-smoothly-display-json-object:last-child>.comma.sc-smoothly-display-json-object{display:none}.open-bracket.sc-smoothly-display-json-object::after{background-color:rgb(var(--smoothly-light-color));color:rgb(var(--smoothly-light-shade));white-space:pre;border-radius:0.25rem;font-weight:bold;font-size:0.8em}.sc-smoothly-display-json-object-h:not(.open):not(.empty)>.open-bracket.sc-smoothly-display-json-object::after{content:\" ▶ \" attr(data-length) \" ◀ \"}.open.sc-smoothly-display-json-object-h:not(.empty)>.open-bracket.sc-smoothly-display-json-object::after{content:\" ▼ \"}";
+const SmoothlyDisplayJsonObjectStyle0 = styleCss$19;
 const SmoothlyDisplayJsonObject = class {
     constructor(hostRef) {
@@ -3981,15 +3951,15 @@ const SmoothlyDisplayJsonObject = class {
     }
     render() {
         const nextCollapseDepth = typeof this.collapseDepth == "number" ? Math.max(this.collapseDepth - 1, 0) : undefined;
-        return (index.h(index.Host, { key: 'f0d5f6e755c48269ebeddd210961a91a45ac637c', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '9d8da480999cb92e162e1472c4cf0c4253033553', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: '4e540c3b7ab63546106d485b5e88849be5e497a3', class: "content" }, Array.isArray(this.value)
+        return (index.h(index.Host, { key: '096aba61e52c82b8fbddfa73b76ad5378898997b', class: { empty: this.empty, open: this.open } }, index.h("span", { key: '23b082be0c70e647b622f876ce92a91aebcdfcd5', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), index.h("span", { key: '851efa46e336cdcd39eb20b08106b37cf3189c53', class: "content" }, Array.isArray(this.value)
             ? this.value.map(v => (index.h("div", { class: "indent" }, index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))
-            : Object.entries(this.value).map(([k, v]) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))), index.h("span", { key: 'b8bd52db35dcf7bc14de9fdfe3b928eebdc04d7a' }, this.closeBracket)));
+            : Object.entries(this.value).map(([k, v]) => (index.h("div", { class: "indent" }, index.h("smoothly-display-json-record-key", { value: k }), ":", " ", index.h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), index.h("span", { class: "comma" }, ","))))), index.h("span", { key: 'ea5f8fbd4f35a2c5a462c66fbb9133f806655e64' }, this.closeBracket)));
     }
 };
 SmoothlyDisplayJsonObject.style = SmoothlyDisplayJsonObjectStyle0;
-const styleCss$1j = ".sc-smoothly-display-json-primitive-h{font-family:monospace;display:inline;word-wrap:anywhere}[hidden].sc-smoothly-display-json-primitive-h{display:none}.string.sc-smoothly-display-json-primitive-h,.number.sc-smoothly-display-json-primitive-h,.boolean.sc-smoothly-display-json-primitive-h{font-weight:bold}.string.sc-smoothly-display-json-primitive-h{color:rgb(var(--smoothly-primary-color))}.number.sc-smoothly-display-json-primitive-h{color:rgb(var(--smoothly-secondary-color))}.boolean.sc-smoothly-display-json-primitive-h{color:rgb(var(--smoothly-tertiary-color))}.null.sc-smoothly-display-json-primitive-h,.undefined.sc-smoothly-display-json-primitive-h{color:rgb(var(--smoothly-medium-color))}";
-const SmoothlyDisplayJsonPrimitiveStyle0 = styleCss$1j;
+const styleCss$18 = ".sc-smoothly-display-json-primitive-h{font-family:monospace;display:inline;word-wrap:anywhere}[hidden].sc-smoothly-display-json-primitive-h{display:none}.string.sc-smoothly-display-json-primitive-h,.number.sc-smoothly-display-json-primitive-h,.boolean.sc-smoothly-display-json-primitive-h{font-weight:bold}.string.sc-smoothly-display-json-primitive-h{color:rgb(var(--smoothly-primary-color))}.number.sc-smoothly-display-json-primitive-h{color:rgb(var(--smoothly-secondary-color))}.boolean.sc-smoothly-display-json-primitive-h{color:rgb(var(--smoothly-tertiary-color))}.null.sc-smoothly-display-json-primitive-h,.undefined.sc-smoothly-display-json-primitive-h{color:rgb(var(--smoothly-medium-color))}";
+const SmoothlyDisplayJsonPrimitiveStyle0 = styleCss$18;
 const SmoothlyDisplayJsonPrimitive = class {
     constructor(hostRef) {
@@ -3997,13 +3967,13 @@ const SmoothlyDisplayJsonPrimitive = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '2b2dbfe65a076ca4c5e5b4f16b9431eeca85ffbc', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return index.h(index.Host, { key: '7fb3f1eae3a5a4e958aff79b218347ad089810cd', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
 };
 SmoothlyDisplayJsonPrimitive.style = SmoothlyDisplayJsonPrimitiveStyle0;
-const styleCss$1i = ".sc-smoothly-display-json-record-key-h{font-family:monospace;display:inline;color:rgb(var(--smoothly-default-contrast))}[hidden].sc-smoothly-display-json-record-key-h{display:none}";
-const SmoothlyDisplayJsonRecordKeyStyle0 = styleCss$1i;
+const styleCss$17 = ".sc-smoothly-display-json-record-key-h{font-family:monospace;display:inline;color:rgb(var(--smoothly-default-contrast))}[hidden].sc-smoothly-display-json-record-key-h{display:none}";
+const SmoothlyDisplayJsonRecordKeyStyle0 = styleCss$17;
 const SmoothlyDisplayJsonRecordKey = class {
     constructor(hostRef) {
@@ -4011,7 +3981,7 @@ const SmoothlyDisplayJsonRecordKey = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: 'e76d5030ff940c6a7d9acf859603e6be834a3b81' }, "\"", this.value, "\"");
+        return index.h(index.Host, { key: 'e7e589428127bdfdc3a226523417e256788003f9' }, "\"", this.value, "\"");
     }
 };
 SmoothlyDisplayJsonRecordKey.style = SmoothlyDisplayJsonRecordKeyStyle0;
@@ -7000,8 +6970,8 @@ var Filter;
     });
 })(Filter || (Filter = {}));
-const styleCss$1h = ".sc-smoothly-filter-h {\n\tposition: relative;\n\tborder: 1px solid rgb(var(--smoothly-medium-tint));\n\tmargin-left: 1rem;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tmargin-right: 1rem;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n}\n\n.sc-smoothly-filter-h>div.sc-smoothly-filter-s > [slot=detail] {\n\tz-index: 5;\n}\n\n.sc-smoothly-filter-h.sc-smoothly-filter-s > [slot=bar] {\n\tpointer-events: auto;\n\tmargin-left: 0.3em;\n\tmargin-right: 0.3em;\n\n\t&>[looks=\"plain\"] {\n\t\tdisplay: flex;\n\t\talign-self: stretch;\n\t\talign-items: center;\n\t}\n}\n\n.sc-smoothly-filter-h > div.sc-smoothly-filter:empty + smoothly-icon.sc-smoothly-filter {\n\tdisplay: none;\n}\n\n.sc-smoothly-filter-h > smoothly-icon.sc-smoothly-filter {\n\tcursor: pointer;\n\tmargin-left: 0.3em;\n\tmargin-right: 0.3em;\n\tflex-shrink: 0;\n}\n\n.sc-smoothly-filter-h > div.close.sc-smoothly-filter {\n\tposition: fixed;\n\tz-index: 3;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100dvw;\n\theight: 100dvh;\n\tbackground: transparent;\n}\n\n.sc-smoothly-filter-h > div.hidden.sc-smoothly-filter {\n\tdisplay: none;\n}\n\n.sc-smoothly-filter-h > .container.sc-smoothly-filter {\n\tpadding: 2em;\n\tposition: absolute;\n\tright: 0.35em;\n\twidth: fit-content;\n\tdisplay: flex;\n\tjustify-content: center;\n\ttop: 100%;\n\twidth: fit-content;\n\tz-index: 4;\n\tbackground-color: rgb(var(--smoothly-color));\n\tmargin: 0.8em -2em;\n}\n\n\n.sc-smoothly-filter-h > div.container.sc-smoothly-filter:before {\n\tcontent: \"\";\n\twidth: 0.6em;\n\theight: 0.6em;\n\ttransform: rotate(45deg);\n\tborder-top: 1px solid rgb(var(--smoothly-medium-tint));\n\tborder-left: 1px solid rgb(var(--smoothly-medium-tint));\n\tbackground-color: rgb(var(--smoothly-color));\n\tposition: absolute;\n\tz-index: 3;\n}\n\n\n.sc-smoothly-filter-h > div.container.arrow-top.sc-smoothly-filter:before {\n\tleft: calc(91%);\n\ttop: -5px;\n}\n\n.sc-smoothly-filter-h div.container.sc-smoothly-filter:after {\n\tcontent: \"\";\n\theight: 100%;\n\twidth: 100%;\n\tborder: 1px solid rgb(var(--smoothly-medium-tint));\n\tborder-radius: 0.25em;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}";
-const SmoothlyFilterStyle0 = styleCss$1h;
+const styleCss$16 = ".sc-smoothly-filter-h {\n\tposition: relative;\n\tborder: 1px solid rgb(var(--smoothly-medium-tint));\n\tmargin-left: 1rem;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tmargin-right: 1rem;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n}\n\n.sc-smoothly-filter-h>div.sc-smoothly-filter-s > [slot=detail] {\n\tz-index: 5;\n}\n\n.sc-smoothly-filter-h.sc-smoothly-filter-s > [slot=bar] {\n\tpointer-events: auto;\n\tmargin-left: 0.3em;\n\tmargin-right: 0.3em;\n\n\t&>[looks=\"plain\"] {\n\t\tdisplay: flex;\n\t\talign-self: stretch;\n\t\talign-items: center;\n\t}\n}\n\n.sc-smoothly-filter-h > div.sc-smoothly-filter:empty + smoothly-icon.sc-smoothly-filter {\n\tdisplay: none;\n}\n\n.sc-smoothly-filter-h > smoothly-icon.sc-smoothly-filter {\n\tcursor: pointer;\n\tmargin-left: 0.3em;\n\tmargin-right: 0.3em;\n\tflex-shrink: 0;\n}\n\n.sc-smoothly-filter-h > div.close.sc-smoothly-filter {\n\tposition: fixed;\n\tz-index: 3;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100dvw;\n\theight: 100dvh;\n\tbackground: transparent;\n}\n\n.sc-smoothly-filter-h > div.hidden.sc-smoothly-filter {\n\tdisplay: none;\n}\n\n.sc-smoothly-filter-h > .container.sc-smoothly-filter {\n\tpadding: 2em;\n\tposition: absolute;\n\tright: 0.35em;\n\twidth: fit-content;\n\tdisplay: flex;\n\tjustify-content: center;\n\ttop: 100%;\n\twidth: fit-content;\n\tz-index: 4;\n\tbackground-color: rgb(var(--smoothly-color));\n\tmargin: 0.8em -2em;\n}\n\n\n.sc-smoothly-filter-h > div.container.sc-smoothly-filter:before {\n\tcontent: \"\";\n\twidth: 0.6em;\n\theight: 0.6em;\n\ttransform: rotate(45deg);\n\tborder-top: 1px solid rgb(var(--smoothly-medium-tint));\n\tborder-left: 1px solid rgb(var(--smoothly-medium-tint));\n\tbackground-color: rgb(var(--smoothly-color));\n\tposition: absolute;\n\tz-index: 3;\n}\n\n\n.sc-smoothly-filter-h > div.container.arrow-top.sc-smoothly-filter:before {\n\tleft: calc(91%);\n\ttop: -5px;\n}\n\n.sc-smoothly-filter-h div.container.sc-smoothly-filter:after {\n\tcontent: \"\";\n\theight: 100%;\n\twidth: 100%;\n\tborder: 1px solid rgb(var(--smoothly-medium-tint));\n\tborder-radius: 0.25em;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}";
+const SmoothlyFilterStyle0 = styleCss$16;
 const SmoothlyFilter = class {
     constructor(hostRef) {
@@ -7040,17 +7010,17 @@ const SmoothlyFilter = class {
         this.filters.forEach(update => update(this.criteria));
     }
     render() {
-        return (index.h(index.Host, { key: '8fa96851dc8a5b97455ffcc90d8edb4f556e1a5e' }, index.h("slot", { key: '0a3c57ae72c5f8902d2b5f97de96c78fe6b1e091', name: "bar" }), index.h("smoothly-filter-field", { key: 'fdc85964b77a2aa02effa9f1a634164a35086f52', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '5a2a3f4582bb4ceb282c4ef6be1d439efd19ddc0', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
+        return (index.h(index.Host, { key: '458866acba458b727749aab418c5d07b009f0886' }, index.h("slot", { key: '6deb9fb89f67c8adc89c88b67762b3200953ed29', name: "bar" }), index.h("smoothly-filter-field", { key: 'f3c3c18a6385b7abfeb82ec2320312f0a13f439e', criteria: this.criteria, ref: e => (this.field = e) }), this.criteria.toString() != "" && (index.h("smoothly-icon", { key: '5e7586e48cd66190af3d48ab013c1af4ff006acf', name: "close", toolTip: "Clear all filters", size: "small", onClick: () => {
                 this.clear();
-            } })), index.h("div", { key: '6b7bba3c3a30cb4f9b562481d2921d595ea7e5fa', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: '5cdea6994206c24a2c62e1ac3208e03b6263468e', name: "detail" })), index.h("smoothly-icon", { key: '85d0324d62c557048e3caaaae33b2d8b0d0d4897', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
+            } })), index.h("div", { key: '742d3c1ab86806412d5ab95bf19249feffb2cd35', class: this.expanded ? "container arrow-top" : "hidden" }, index.h("slot", { key: 'e8837329167c794efbcbb255ca9c50def503ef3f', name: "detail" })), index.h("smoothly-icon", { key: '0ebf30bb6797347fa77dec156f48c4b0a9d22e89', name: this.expanded ? "options" : "options-outline", toolTip: (this.expanded ? "Hide" : "Show") + " additional filters", size: "small", onClick: () => {
                 this.expanded = !this.expanded;
-            } }), index.h("div", { key: 'f57ac805ce77fcc263d7c68581db9ae98566cf41', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
+            } }), index.h("div", { key: '31f476a863f44affca3c643529331e769f9658a0', class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
     }
 };
 SmoothlyFilter.style = SmoothlyFilterStyle0;
-const styleCss$1g = ".sc-smoothly-filter-field-h{flex-grow:5}";
-const SmoothlyFilterFieldStyle0 = styleCss$1g;
+const styleCss$15 = ".sc-smoothly-filter-field-h{flex-grow:5}";
+const SmoothlyFilterFieldStyle0 = styleCss$15;
 const SmoothlyFilterField = class {
     constructor(hostRef) {
@@ -7071,7 +7041,7 @@ const SmoothlyFilterField = class {
         this.value = event.detail.filter;
     }
     render() {
-        return (index.h(index.Host, { key: '52e0af5554f3372a7613a7b42a434457685c5863' }, index.h("smoothly-input", { key: '8e133079de86dc284c3322f0c300beee667d7da8', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyKeydown: e => {
+        return (index.h(index.Host, { key: '101fba7d3f376e7b556425daf64c5ac8932fefbc' }, index.h("smoothly-input", { key: 'b0652849fec0e9748b289cc5b6a1dd556906fbba', name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyKeydown: e => {
                 e.stopPropagation();
                 e.detail.key == "Enter" && this.filterFieldEmit();
             }, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => {
@@ -7082,8 +7052,8 @@ const SmoothlyFilterField = class {
 };
 SmoothlyFilterField.style = SmoothlyFilterFieldStyle0;
-const styleCss$1f = ".sc-smoothly-filter-input-h{display:contents}.sc-smoothly-filter-input-h>smoothly-input.sc-smoothly-filter-input{flex-grow:1;min-width:10em;flex-basis:40%}";
-const SmoothlyFilterInputStyle0 = styleCss$1f;
+const styleCss$14 = ".sc-smoothly-filter-input-h{display:contents}.sc-smoothly-filter-input-h>smoothly-input.sc-smoothly-filter-input{flex-grow:1;min-width:10em;flex-basis:40%}";
+const SmoothlyFilterInputStyle0 = styleCss$14;
 const SmoothlyFilterInput = class {
     constructor(hostRef) {
@@ -7151,13 +7121,13 @@ const SmoothlyFilterInput = class {
             (rest.length == 0 || (!!criteria.criteria && this.findInstanceOf(criteria.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-input", { key: '743a8c6c26b12a10833791e322c06887a93a23c2', name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, this.label, index.h("slot", { key: '68eacc299a625d16ce66b0eec27e4db1b0b6fb4c' })));
+        return (index.h("smoothly-input", { key: '90646ba0c33a81236352bc130c9139d652473b64', name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, this.label, index.h("slot", { key: 'f6ba39d46857fb3ac409c9ae4cc404b0dca9a7bd' })));
     }
 };
 SmoothlyFilterInput.style = SmoothlyFilterInputStyle0;
-const styleCss$1e = ".sc-smoothly-filter-select-h{display:contents}.sc-smoothly-filter-select-h>smoothly-input-select.sc-smoothly-filter-select{flex-grow:1;width:12.5em}.options.sc-smoothly-filter-select{border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}";
-const SmoothlyFilterSelectStyle0 = styleCss$1e;
+const styleCss$13 = ".sc-smoothly-filter-select-h{display:contents}.sc-smoothly-filter-select-h>smoothly-input-select.sc-smoothly-filter-select{flex-grow:1;width:12.5em}.options.sc-smoothly-filter-select{border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}";
+const SmoothlyFilterSelectStyle0 = styleCss$13;
 const SmoothlyFilterSelect = class {
     constructor(hostRef) {
@@ -7260,14 +7230,14 @@ const SmoothlyFilterSelect = class {
         return result && this.property.split(".").reduceRight((r, e) => property(e, r), result);
     }
     render() {
-        return (index.h("smoothly-input-select", { key: 'd033eebdc74a6a25c7c9059d2f5ce06dc1c3fadc', ref: e => (this.selectElement = e), name: this.property, looks: this.looks, multiple: this.multiple, menuHeight: this.menuHeight, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyItemSelect: e => e.stopPropagation(), onSmoothlyInput: e => this.selectHandler(e) }, this.label && (index.h("span", { key: '74642e91b226596e425c6f676f6f855354bd0a39', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: 'bf075d1fee4c85cd8953b79cf9831c2d47b71b23', name: "items" })));
+        return (index.h("smoothly-input-select", { key: '7880e87f45d9227a6663854c8eb427ac39f0bce8', ref: e => (this.selectElement = e), name: this.property, looks: this.looks, multiple: this.multiple, menuHeight: this.menuHeight, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyItemSelect: e => e.stopPropagation(), onSmoothlyInput: e => this.selectHandler(e) }, this.label && (index.h("span", { key: 'b1ec133090f874ce79645ba2e82718d78590282c', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '87022479beb55154bc3006ec2ac564865f37a9c8', name: "items" })));
     }
     get element() { return index.getElement(this); }
 };
 SmoothlyFilterSelect.style = SmoothlyFilterSelectStyle0;
-const styleCss$1d = ".sc-smoothly-filter-toggle-h{position:relative;display:inline-block;cursor:pointer}.sc-smoothly-filter-toggle-h:hover>smoothly-icon.sc-smoothly-filter-toggle{stroke:rgb(var(--smoothly-success-tint));color:rgb(var(--smoothly-success-tint));fill:rgb(var(--smoothly-success-tint))}[flip].sc-smoothly-filter-toggle-h{transform:scaleX(-1)}";
-const SmoothlyFilterToggleStyle0 = styleCss$1d;
+const styleCss$12 = ".sc-smoothly-filter-toggle-h{position:relative;display:inline-block;cursor:pointer}.sc-smoothly-filter-toggle-h:hover>smoothly-icon.sc-smoothly-filter-toggle{stroke:rgb(var(--smoothly-success-tint));color:rgb(var(--smoothly-success-tint));fill:rgb(var(--smoothly-success-tint))}[flip].sc-smoothly-filter-toggle-h{transform:scaleX(-1)}";
+const SmoothlyFilterToggleStyle0 = styleCss$12;
 const SmoothlyFilterToggle = class {
     constructor(hostRef) {
@@ -7344,7 +7314,7 @@ const SmoothlyFilterToggle = class {
             (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
     }
     render() {
-        return (index.h("smoothly-icon", { key: 'dd151c8e540e1808b87d0a291f3a2c5aba7ee321', fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
+        return (index.h("smoothly-icon", { key: '2fc0a0d6ad73406cacdb79964618ec4a97f7cfdf', fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
     }
 };
 SmoothlyFilterToggle.style = SmoothlyFilterToggleStyle0;
@@ -8190,8 +8160,8 @@ var Input;
     Input.registerSubAction = registerSubAction;
 })(Input || (Input = {}));
-const styleCss$1c = "smoothly-form{display:block;position:relative}smoothly-form>form{position:relative;min-width:15em}smoothly-form>form>fieldset{display:flex;flex-flow:row wrap;margin-inline-start:unset;margin-inline-end:unset;padding-block-start:unset;padding-inline-start:unset;padding-inline-end:unset;padding-block-end:unset;min-inline-size:unset;border-width:unset;border-style:unset;border-color:unset;border-image:unset}smoothly-form>form>fieldset>*{flex-grow:1;min-width:10em;flex-basis:40%}smoothly-form[looks=\"line\"]>form>fieldset,smoothly-form[looks=\"border\"]>form>fieldset,smoothly-form[looks=\"transparent\"]>form>fieldset{gap:2em}smoothly-form[looks=\"grid\"]>form>fieldset{padding:1px;gap:1px}smoothly-form>form>div:not(:empty){display:flex;justify-content:end;gap:1em;margin-top:0.5rem}";
-const SmoothlyFormStyle0 = styleCss$1c;
+const styleCss$11 = "smoothly-form{display:block;position:relative}smoothly-form>form{position:relative;min-width:15em}smoothly-form>form>fieldset{display:flex;flex-flow:row wrap;margin-inline-start:unset;margin-inline-end:unset;padding-block-start:unset;padding-inline-start:unset;padding-inline-end:unset;padding-block-end:unset;min-inline-size:unset;border-width:unset;border-style:unset;border-color:unset;border-image:unset}smoothly-form>form>fieldset>*{flex-grow:1;min-width:10em;flex-basis:40%}smoothly-form[looks=\"line\"]>form>fieldset,smoothly-form[looks=\"border\"]>form>fieldset,smoothly-form[looks=\"transparent\"]>form>fieldset{gap:2em}smoothly-form[looks=\"grid\"]>form>fieldset{padding:1px;gap:1px}smoothly-form>form>div:not(:empty){display:flex;justify-content:end;gap:1em;margin-top:0.5rem}";
+const SmoothlyFormStyle0 = styleCss$11;
 const SmoothlyForm = class {
     constructor(hostRef) {
@@ -8309,7 +8279,7 @@ const SmoothlyForm = class {
             });
             if (this.action) {
                 const action = this.action;
-                this.notice.emit(redirect.Notice.execute("Submitting form", async () => {
+                this.notice.emit(Notice.Notice.execute("Submitting form", async () => {
                     const method = remove
                         ? "DELETE"
                         : !this.type || this.type == "create"
@@ -8359,7 +8329,7 @@ const SmoothlyForm = class {
         await Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue()));
     }
     render() {
-        return (index.h(index.Host, { key: '1d9d37d4d3c61cbf3fbb844dbe72c1eed2335938' }, index.h("smoothly-spinner", { key: 'b8c7d90a3e089d7d52a1486a1dedbd166e3207e7', overlay: true, hidden: !this.processing }), index.h("form", { key: '1eae5c52bf9a4c92da64f2bf9500b524d9cb124d', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '75a96e948df29ae53698993b122ba1a1b8ca7f0b' }, index.h("slot", { key: '9b197a101f00720485dbe22c7c799ff1c710778d' })), index.h("div", { key: 'c3d2ad2b7007e03afca830609c53a5a744e15167' }, index.h("slot", { key: '0dfb32cdf5a653cf88f3c8295cbd0abe7ac3cca3', name: "clear" }), index.h("slot", { key: '60cbc0922c41c48e9bdfd7921dfade2aef44f920', name: "edit" }), index.h("slot", { key: 'ded5e82b98663d312145f451fdea0224133361a3', name: "reset" }), index.h("slot", { key: '865d5339d8d09ff8edfeb00e8f3f963564226635', name: "delete" }), index.h("slot", { key: 'cbad91b715a714ee8fd1effe79b06965bc3fd4e5', name: "submit" })))));
+        return (index.h(index.Host, { key: '2a470af3268fe4b09126d86c2f1c01e1b6ac2ab2' }, index.h("smoothly-spinner", { key: 'e296f07867de64502324dc2ec4e50d8161ba8128', overlay: true, hidden: !this.processing }), index.h("form", { key: '4714f583928de712a0825df741f8cc5e308ad61c', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '540893b763c751596966cd0004c6f835fb0bf707' }, index.h("slot", { key: 'ab23afac707e9a70375314c92e4e33e2c6412705' })), index.h("div", { key: '297ebfa45ea2c708b299b92ecefaa715bccdaa6d' }, index.h("slot", { key: '4123990062064e150a3ec5fb2df4bb062753585f', name: "clear" }), index.h("slot", { key: '2b3ae04fa317a90056a6d768379db05094c4e8d4', name: "edit" }), index.h("slot", { key: 'fcfbc817ac6d2b408dc58cf7562b8c8eff9d834e', name: "reset" }), index.h("slot", { key: 'cf6227e56a5b0a36417aa6e0c80e85b181f128b5', name: "delete" }), index.h("slot", { key: '3c715796fadcf3154645f45b2fdbafde39260f10', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8369,15 +8339,15 @@ const SmoothlyForm = class {
 };
 SmoothlyForm.style = SmoothlyFormStyle0;
-const styleCss$1b = ".sc-smoothly-form-demo-h{display:flex;margin-top:2em;margin-bottom:10em}.sc-smoothly-form-demo-h>div.sc-smoothly-form-demo{margin:auto;width:1200px;max-width:100%}";
-const SmoothlyFormDemoStyle0 = styleCss$1b;
+const styleCss$10 = ".sc-smoothly-form-demo-h{display:flex;margin-top:2em;margin-bottom:10em}.sc-smoothly-form-demo-h>div.sc-smoothly-form-demo{margin:auto;width:1200px;max-width:100%}";
+const SmoothlyFormDemoStyle0 = styleCss$10;
 const SmoothlyFormDemo = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f1ca7be120d87c8cdb9bd0c9121b7ccc2346d812' }, index.h("div", { key: '0a57eceabdcb885bb2b114c107bbdbf0297c4396' }, index.h("smoothly-form-demo-all", { key: 'ceedbb7ddd84562a8e4ee35e15b7b9ea51c8e979' }), index.h("smoothly-form-demo-pet", { key: '4cba93208eb3e1ef043a19713d08a286e705c5ff' }), index.h("smoothly-form-demo-card", { key: 'f5f566679b5dae179121e826534594daea439bc9' }), index.h("smoothly-form-demo-login", { key: 'befffde4476de1a6b3e5918fea806391482bfdd3' }), index.h("smoothly-form-demo-prices", { key: 'bd187e2eed55caf537cdb4383f2ef8d08de2de96' }), index.h("smoothly-form-demo-typed", { key: '3d059700b23d5cdb4bca6b133bec53b44bec85a3' }), index.h("smoothly-form-demo-transparent", { key: 'ebfb7021b446605a417d1ef7a839ddd7d565cc54' }), index.h("smoothly-form-demo-date", { key: 'a9af3ae6f5d7e4a71d3ebe4c1c3bf029fb2bb9b7' }), index.h("smoothly-form-demo-schedule", { key: '2011739c48572e39e1eea2d330e1b04caf0ef94b' }), index.h("smoothly-form-demo-date-range", { key: '11317d1feb82c20fc09284cb996e55f80038ed2f' }), index.h("smoothly-form-demo-controlled", { key: 'd9ac6a284edbe2fe977abbe1947cf3412066cecb' }))));
+        return (index.h(index.Host, { key: '8e9b91eba4771356a02e26aa874149e9aec1e49e' }, index.h("div", { key: '322a7b8c4053c5307e09aedc034aec3bd58cfa40' }, index.h("smoothly-form-demo-all", { key: '36cff0fce86410559185639407888e064aa7f6f5' }), index.h("smoothly-form-demo-pet", { key: '8ac19a250eae3f03b36b7eefa4bb0b8fcef9bc67' }), index.h("smoothly-form-demo-card", { key: 'e92a4974e434fc122a4d6a9036031c19eb8fbdce' }), index.h("smoothly-form-demo-login", { key: '0551748193b700acbc0ef91afe2e330ac67c1ec6' }), index.h("smoothly-form-demo-prices", { key: '98e1cd3159817b7943b0fcab4b8e455527679aef' }), index.h("smoothly-form-demo-typed", { key: 'ee3a5a705e8295e6f030201876e8e9e6e0b17ce5' }), index.h("smoothly-form-demo-transparent", { key: 'f245050d3f3838922c51ab02a6fc7c51d030be49' }), index.h("smoothly-form-demo-date", { key: 'b9dab7e216a735a7d4a71e63e9dcdcbb261d35b9' }), index.h("smoothly-form-demo-schedule", { key: '5f7073b2b7d9ec29a787d1c47a54261d7a312735' }), index.h("smoothly-form-demo-date-range", { key: '6d0c60c7aac3037d3d697e1440ce3643fd107298' }), index.h("smoothly-form-demo-controlled", { key: 'e307e69e96b98c85cd15f6e1e68facd7a86ebcb0' }))));
     }
 };
 SmoothlyFormDemo.style = SmoothlyFormDemoStyle0;
@@ -8387,9 +8357,9 @@ const SmoothlyFormDemoAll = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f24ac803db965645290763057bd1230a3123d1b6' }, index.h("h2", { key: 'd0acef992a1610c807639136d041cff6cc6ec269' }, "All inputs"), index.h("smoothly-form", { key: '8edb30c23ed6dca4e1c0df70b4252fba6c973bc6', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
+        return (index.h(index.Host, { key: '0385c6c02d1a129cae00d079094839f60b9e4d59' }, index.h("h2", { key: '9ab19de22f878f88a3f0f7dec246645f22621374' }, "All inputs"), index.h("smoothly-form", { key: '0afb15a06693181711b9002415e0729db1042c3a', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
                 Object.entries(e.detail.value).forEach(([key, value]) => console.log(key, value));
-            } }, index.h("smoothly-input", { key: '2a2cb7fcad7d202a4eac70e7afef558423aed257', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '2b735ec5a01555419fd7fbee889aecce3823004a', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: 'b3c5c0105b909e6d12faf1063dd89ac7e5e3f1ab', size: "icon", slot: "end" })), index.h("smoothly-input", { key: 'da05d67ac53bbcaa7d1df327903a88b4bda7ddd5', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '9cea89c87657646a1695784616b2b6528ab29a15', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'd846018ac718c5edaf3af59a799c1f0719295fc7', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '75d8455e9c3fff37ebaf26a0ca9ab96f3fe47ca3', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '4ad289b3f1e6ab329d0d9d5260b3ad805c74947b', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '7567c6aabde81a027372ed78420832b74ba0b12d', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'a24e987bcfd2d8e3c17319f552570568bcc322eb', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: 'b822ebfe6fd9e39c4d8ddebf7560650e897d26a0', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '2b188685740f2986a2905a12a41599d2fb27a387', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '442ddbf643f8593f014e9c8ebfb89b548e25f9e4', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'b426d55f660ea12f314c808970185ba84ca96c2e', value: "1" }, "January"), index.h("smoothly-item", { key: '3bd9373d991fcf8b32464a2911cb94b6ffbe3e98', value: "2" }, "February"), index.h("smoothly-item", { key: 'afad8edbbbd715d6f47d59ff2b0e3b56effa4a28', value: "3" }, "March"), index.h("smoothly-item", { key: '00811873dbc227b95b271f6ffb399ed9cb91ff77', value: "4" }, "April"), index.h("smoothly-item", { key: '1cb9763c83f89593cf5c3acc2fa6c1131b96f4b9', value: "5" }, "May"), index.h("smoothly-item", { key: '162a4852b915c8b4823ba0cfb8b9224a3da02329', value: "6" }, "June"), index.h("smoothly-item", { key: 'a82491db9bdbc0876c368b4753a6bacf10f1f809', value: "7" }, "July"), index.h("smoothly-item", { key: '8c2ef1528a44c3f34baf3a867210791b7db4df38', value: "8" }, "August"), index.h("smoothly-item", { key: '018b8535cd06d8fb76af46807acd67f777aa839c', value: "9" }, "September"), index.h("smoothly-item", { key: '5559631cf35eebf6dbc2daf016ac65cae0100d56', value: "10" }, "October"), index.h("smoothly-item", { key: '7a05b0f47332d3c47b171c7af45616098818cb3b', value: "11" }, "November"), index.h("smoothly-item", { key: '783eba3fc1f02dda35b95bc3168d8fc40a2cfb9b', value: "12" }, "December")), index.h("smoothly-input-select", { key: '708ae228ebac730d88542fadac9eacdbef65816d', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'ab3cc10c5837684c8c3fd31189ab9df3488d484f', value: "folder", selected: true }, index.h("smoothly-icon", { key: '23a5c0fa737f6d2787b68a1f74b1945f7e6db4f9', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'bf26b10ff966c3c228838b97e8193ecbe73fe1ee', value: "camera" }, index.h("smoothly-icon", { key: '0dbc3d1789c62478fcf7a8fe7b3de76a2952f27a', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '04a361a611548788fc62295e38f1a142587171e8', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '1a1be95b3bd3560f7f96b0fdc1c5c183f409cdb6', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: '90e62b694df1dd076c6ae8d2f1a2c300d1fe8667', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: 'fd79baee4d795d8bc85c07da9ad648b6f9be66ce', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: 'f4c6ce348957870ef206697bcc9a48d65ce97039', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: 'c5dc005f7bd1953be10ffa4cab2abb994779aa4f', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: 'bcfcae2f743f64d25b41cbf66835dad3b6859798', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '78a97ca7891fd91b59efe623a67eb96711a79d63', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '3d9c41e44797337be3864d9fbb029e300309aa92', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: 'b3fcea11a832b7b36049d4e4adeb555f80146652', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: 'ef82a2ac85080c6b45efe658e76e9c0bc0469f14', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '1155235a811c711d163c187b1597fb80ee62c8c7', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '87ff969b859405209fb9bcfce698b9d319f34b72', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: 'bf68e9ad454eff0c639b5da2c7242fc402a35c65', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '447e503c8e3c48b93f41f620b5fc277dc4d8d475', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: '1a732b5a30f9e7b5d87a09be76c2fcecec722394', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '9ef5b1fddf599242589f45a77ae81d53cfb6244b', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'a9d1d83e4d1bfd131cec91e4a64ef26134294d48', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+            } }, index.h("smoothly-input", { key: 'ee53cbde0c7bfe23cd594857fc835cdbc8997be8', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: 'e8dabfb02d84e6fef81d6a411f354cded4a13125', showLabel: false, name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '007aadc8941ac9fa2f021e3e7f22e3963926f9be', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '1e950ab385f9a2ce8fd2e53a28c90390f28ff899', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: '145855140f87a29ccb57bbb6f849a194b7acf196', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '2201218715b3f5a2f3329666b323f5c9bf333573', clearable: true, name: "radioFirstInput" }, index.h("label", { key: '59ee297d1330677038c37c54ebfc5836b84e1f6d', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'f3c8d30e7bdf29403246920b1f02233d3edfed2d', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '2bf870391e90289389c3b22eb1e1b255fa98a6f7', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'a90a3faad2d93630c2b6202838d398ef9b89cfe1', value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '31fd3877a6f20c27ab0872b95f063e39895e6708', name: "color" }, "Color"), index.h("smoothly-input-select", { key: '9b047ab54f69e2da1a25abc6fdf9f11e0d716d7f', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'b5ab72a4bccfd7c0b8e1038fa87bb8e66fc44a43', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '0f3d894bd9dae781826566109399e1e856c89d1b', value: "1" }, "January"), index.h("smoothly-item", { key: 'cb61f8ab32e41fa7253bf7b48d94ea38d0d19ecb', value: "2" }, "February"), index.h("smoothly-item", { key: '7b1622524d978dd546ca7c6008f115c9f44cc6be', value: "3" }, "March"), index.h("smoothly-item", { key: 'e1b2b778033ccdd54a64b4da83d310327ed54396', value: "4" }, "April"), index.h("smoothly-item", { key: '8d332fe5eb51c160967758b0c8f4027b97dc0e62', value: "5" }, "May"), index.h("smoothly-item", { key: 'bc1f0d30456a8b594bedea79c8e4fc5ca4b1da68', value: "6" }, "June"), index.h("smoothly-item", { key: '488700b5282383005b2c0461c51790d84f7ca016', value: "7" }, "July"), index.h("smoothly-item", { key: '839587c691493cbbfc08042be2046c19b5f56289', value: "8" }, "August"), index.h("smoothly-item", { key: '70c7887a84bf8fcb9a9431338d93b14addc15161', value: "9" }, "September"), index.h("smoothly-item", { key: 'c322400e0887f7679c544fae17349eaa56e7cc02', value: "10" }, "October"), index.h("smoothly-item", { key: 'c10061927e97aed1dca867c2bf5ba0c73d07b52c', value: "11" }, "November"), index.h("smoothly-item", { key: '55e3a278605d6d993db666ec9de378b8379a5ab3', value: "12" }, "December")), index.h("smoothly-input-select", { key: 'd77d5b5c87a21c14dcbb717ca795c5ca4254c8d6', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '9e38015a8147bb4ed6e364b9322e322a31634c11', value: "folder", selected: true }, index.h("smoothly-icon", { key: '4d76c912b915fd7dddad9cbe8b81607f01ef4949', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '7fbdf3b545e1d55a2b0ce3ba335f4aea2a7da264', value: "camera" }, index.h("smoothly-icon", { key: '352ee5b864d40be93eac21c5254acef61f988c6e', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '530dc05e2e2d51afbb45c768ad1637737b1cddf4', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '6ddc97414bd84c2e1c843879aebbc5f5c1977d05', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { key: 'bd862dfb912da37eb20e2811858da0e788eba924', step: 1, name: "range3", value: 20, label: "Range" }), index.h("smoothly-input", { key: '2548250dacd06f9ba1de8045d48d3cfa98eb9d1b', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: '78dab22e4689a72c9ce3436b31925646f5b303c8', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), index.h("smoothly-input", { key: 'eca7538c78a471144ef765e1df2f106a18dcf1f9', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: 'e1ddaf4aa7094e686697ac03746aa1cdfc71ba42', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), index.h("smoothly-input", { key: '0890a1f3a253504a4a58fafca62dd4b54116c564', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '3fd7d0325432d62a54ab244e030b3a369f068f22', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), index.h("smoothly-input-file", { key: '568ece01b6aa322f154b5c78040e1b115ccda380', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: '51fd8921d6a698a2a7dd9d3773cde43383e1999f', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '5026285c999994ce45ac5bed2683469ef562add5', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input", { key: '7cd8a2a7dc3225931f7c6ab15b5d4dc8d2da3b3c', type: "duration", name: "duration", value: {} }, "Duration"), index.h("smoothly-input-clear", { key: '675198ec95d9332a46d5304a777cf275cea8f8a4', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '097b5accc35106459a734e3b5184533f88f1866b', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'c6ed2a9e024bca4816ca24cbe369a573de8d46ff', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '8e52f80b304f44cf55a5928114858b1bf6907859', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'c82da9b800869ca3438b45945b99b7ab5161abd6', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };
@@ -8398,7 +8368,7 @@ const SmoothlyFormDemoCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '6ce5500bac732834bb5dfad51a4176eb6919e084' }, index.h("h2", { key: 'd0bfdef60eb67936e2b4462a1a4bb2c89dc59993' }, "Card"), index.h("smoothly-form", { key: 'a708e697d518fa8950c2cf83cc076e92ebffbaef', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: '166ba0f75ac66c2d5f11f03c8fadb20cf89d6435', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: 'd61c7bd39e8c09ae774606b92a8bb3e537836e57', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: '70b23dd5937565ad6c87f9936b83a02d2f8c070c', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: 'dc59de914f323faed35381b6c4eb2e4c72539178', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: 'b27fdb3e0a8fc1c02d3c570e1e3fb434f97e63b3', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'e76461cffe3afca778b1151a188b47c7ef7d9c8d', type: "text", name: "name.last" }, "Last Name"))));
+        return (index.h(index.Host, { key: 'de64604dbfaa81289d06fb7f035e266385a24c53' }, index.h("h2", { key: 'de36abc60544d5f6023d06933c2234cf04887253' }, "Card"), index.h("smoothly-form", { key: '51aefd9496fd4cb72a61a6e922db326633bd1928', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: 'c9cd0695bd416621f1758ece4b54e68e32c5d24a', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input-submit", { key: '1989c48e8a3a0294d7d9d2eaf64a30329a7a88b9', size: "icon", slot: "submit", color: "success", fill: "solid" }), index.h("smoothly-input", { key: '48887253eeb8ede70e8a09b8e3bbba364d2830d3', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: 'f39016c5c87709cbce3cd4713bd3598855770a88', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: 'a2f5a4a644b0c1eb56d4556f774a1e7d0a12a0c1', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '3eb6744a2fee26035aa7dac8e786c4bbfa689f3d', type: "text", name: "name.last" }, "Last Name"))));
     }
 };
@@ -8434,15 +8404,15 @@ const SmoothlyFormDemoControlled = class {
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '7844d1e5845e087bc559f6f3395dbffa97ce3059' }, index.h("h2", { key: '56c4d14611046efdf9b06816e59aea0e7e3a2fad' }, "Controlled"), index.h("smoothly-form", { key: '875ef51cf0633aef4bb3510d8a22f0f41dcaa944', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '08550c8bf896ce5996a2ea17da506bf55e6d0cef', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: '9f2394024404cee03db2563fa1fc674fb1d23fb8', name: "currency" }, index.h("span", { key: '837b2f0f698e6299eaa6d56dd71ea53558edc502', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'd4cf009fb3f52de30d6f26990d9fa44f21d8f50e' }, "Dummy"), index.h("smoothly-input-month", { key: '9d149577b8ac244b2a00c5643e9d06a332929895', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '36fa1ee96d15026fc2db142c17864e7dcd458a9a', slot: "year-label" }, "Year"), index.h("span", { key: 'cf11d02d8dacaee8c5d073e635997495a1bea1bc', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '06304a23cd66351fb145733e675bd960b5340b5f', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: 'b002ca14148b17cd648602c8b950f65c2106a07b', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: '998f09cbbf11b0e5dbf2efa606fa7ad7a80cc86c', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: 'e312871aa3d76c94091e33d4ca6594a12de64673' }, index.h("h2", { key: '01f69f3ac2f7aa936b97604c9ed9f2006b72d845' }, "Controlled"), index.h("smoothly-form", { key: '999072a4a6bab7ee0d00810e4677fe96948a5591', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { key: '132707e9e475d5b2621528410998ef2b3a9ff589', type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-select", { key: 'f99fdb9c0389f9aa0d41ca19345a59f81626a789', name: "currency" }, index.h("span", { key: '07e163ae48a752ea46818ced40c54f6c02b20291', slot: "label" }, "Currency"), this.currencies.map(currency => (index.h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'a4541576d6174d00edc35dc30d16e7107f8e787e' }, "Dummy"), index.h("smoothly-input-month", { key: '52795ebfac126f55b07a670ed1c5d74e408e317c', name: "date", value: this.date, next: true, previous: true }, index.h("span", { key: '6c2020021f005783a25136f68c873d5536b87d71', slot: "year-label" }, "Year"), index.h("span", { key: 'ff7c8e28d5c0dd2cb503613a0ecdd3f0f1b14e97', slot: "month-label" }, "Month")), index.h("smoothly-input-edit", { key: '3762d99e64f8fd135050b3e174db72fa3dfa776c', slot: "edit", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { key: '3c65df079fb6cf79a9c9f9dcf8d078e53a9b211f', slot: "reset", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { key: '89ebbedc35474bdcd13d210dd64f2fbeda3efc76', slot: "submit", size: "icon", color: "success" }))));
     }
     static get watchers() { return {
         "name": ["nameChanged"]
     }; }
 };
-const styleCss$1a = ".sc-smoothly-form-demo-date-h{display:block}";
-const SmoothlyFormDemoDateStyle0 = styleCss$1a;
+const styleCss$$ = ".sc-smoothly-form-demo-date-h{display:block}";
+const SmoothlyFormDemoDateStyle0 = styleCss$$;
 const SmoothlyFormDemoDate = class {
     constructor(hostRef) {
@@ -8456,22 +8426,22 @@ const SmoothlyFormDemoDate = class {
         event.stopPropagation();
         if (!this.validator.is(event.detail.value)) {
             console.error(`Type is incomplete.`);
-            this.notice.emit(redirect.Notice.failed(`Type is incomplete.`));
+            this.notice.emit(Notice.Notice.failed(`Type is incomplete.`));
         }
         else {
-            this.notice.emit(redirect.Notice.succeeded(`Type is complete!`));
+            this.notice.emit(Notice.Notice.succeeded(`Type is complete!`));
             event.detail.result(true);
         }
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: 'fec03fe6e146f8c4ca93d4cd4418d997e1dac8de' }, index.h("h2", { key: '767fa5fdb9f5474e12bd65857fc97b6e734eb6e0' }, "Date input"), index.h("smoothly-form", { key: '6f5fa68123ea141e005d8f8730f04828298863d0', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: '5e290e7adfeea3b1527763f03bea07614c225402', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: 'c69663690016397e994f7045e57a04ba26f4aba8', slot: "submit" }, index.h("smoothly-icon", { key: '7cf86ec53b1c8d02a44a9fe410a9597051b8baea', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: 'c855ac16e0490761f1c8613aea19ad2408170f61' }, index.h("h2", { key: '3668f293c8ab4980e4e25782d6ca17afdf0eacbc' }, "Date input"), index.h("smoothly-form", { key: 'cc403e758e981e551901533b40623aed9fb89437', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date", { key: '4b3aa55a1ad49138fa2894c4f953cd5c3ea18551', name: "date" }, "Date"), index.h("smoothly-input-submit", { key: 'da1083abf5b98c967835443321cb4e3dfef52003', slot: "submit" }, index.h("smoothly-icon", { key: '892de2aea93d01e62effcb14d25e78ea00778b14', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDate.style = SmoothlyFormDemoDateStyle0;
-const styleCss$19 = ".sc-smoothly-form-demo-date-range-h{display:block}";
-const SmoothlyFormDemoDateRangeStyle0 = styleCss$19;
+const styleCss$_ = ".sc-smoothly-form-demo-date-range-h{display:block}";
+const SmoothlyFormDemoDateRangeStyle0 = styleCss$_;
 const SmoothlyFormDemoDateRange = class {
     constructor(hostRef) {
@@ -8485,16 +8455,16 @@ const SmoothlyFormDemoDateRange = class {
         event.stopPropagation();
         if (!this.validator.is(event.detail.value)) {
             console.error(`Type is incomplete.`);
-            this.notice.emit(redirect.Notice.failed(`Type is incomplete.`));
+            this.notice.emit(Notice.Notice.failed(`Type is incomplete.`));
         }
         else {
-            this.notice.emit(redirect.Notice.succeeded(`Type is complete!`));
+            this.notice.emit(Notice.Notice.succeeded(`Type is complete!`));
             event.detail.result(true);
         }
         event.detail.result(false);
     }
     render() {
-        return (index.h(index.Host, { key: '250862ffe0d53e328905329437e91b5ebad8562b' }, index.h("h2", { key: '536e40aadb53f8ed550fe333e587b93172e8d415' }, "Date-range input"), index.h("smoothly-form", { key: 'e74f74d9b1c5ece5e0d7b0961964322b5cb10bfb', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: '34570b46ba3407959fe53675ca6069d39b1020f9', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '61250eec0b407776f16c883832e6525ed43f4e8e', slot: "submit" }, index.h("smoothly-icon", { key: '60d386f83cc1f370534ba360e5769b300840483f', name: "checkmark-outline" })))));
+        return (index.h(index.Host, { key: '8268dbce8002112c47995db37c6c4db5dfbd5b53' }, index.h("h2", { key: 'aa3db2510b5e19dde1f362870a29ee9c8d2199e6' }, "Date-range input"), index.h("smoothly-form", { key: '1f79aa6badf665f27a4e16cf8694f07e6159a7ce', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input-date-range", { key: '0844d7c580ebaebf4b0241446d1a8c73621a3441', name: "range" }, "Range"), index.h("smoothly-input-submit", { key: '530f99ec11e4ae634852572a1e39e4aa3a221f43', slot: "submit" }, index.h("smoothly-icon", { key: 'eec2006e62c67157029dd9bf1c79be6f4fb8bee7', name: "checkmark-outline" })))));
     }
 };
 SmoothlyFormDemoDateRange.style = SmoothlyFormDemoDateRangeStyle0;
@@ -8504,12 +8474,12 @@ const SmoothlyFormDemoLogin = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2a5f43deb8d5412bd6e3f689121dae61a8e810fe' }, index.h("h2", { key: '4da410bb5c2d0567d2ded09d3d12d2e734754783' }, "Login"), index.h("smoothly-form", { key: 'd7d13e509e44bbf7565c44ffba00ad05d47a0bef', looks: "border" }, index.h("smoothly-input", { key: 'dfe6efa937a9a30356f8fe83ee0f177983450100', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '0f77f8eace6a54580330c59dde1f78d7fc2b9777', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: '9fd28636ee5650135f8d92fe3652952df6fdd0b4', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'a55b68e79b7e4eda5cd0b9b936b8d568d6c395fb', slot: "submit" }))));
+        return (index.h(index.Host, { key: '805689f0a9b1f399f36da3a4375f79a65d350f61' }, index.h("h2", { key: '6afdfc52c85ba2c2a43b90aafc5509f66976ebea' }, "Login"), index.h("smoothly-form", { key: 'e671b3b795cffd38b35254cb29700ce1bdcd14ea', looks: "border" }, index.h("smoothly-input", { key: 'e89a85e6321bafaa4dd4d13ba69b6ad0201a3eea', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '68c7a62b137d8e7c05da4d55a72482be1afc2b0c', type: "password", name: "password" }, "Password"), index.h("smoothly-input-reset", { key: '450db23043ff3df033fc18b5bd557d94605f6e77', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'aac8654e7ca9d53ed2672851faa146e80fd62ae5', slot: "submit" }))));
     }
 };
-const styleCss$18 = ".sc-smoothly-form-demo-pet-h{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;grid-column-gap:2rem}.sc-smoothly-form-demo-pet-h smoothly-input-checkbox[name=\"hasOwner\"].sc-smoothly-form-demo-pet,.sc-smoothly-form-demo-pet-h>smoothly-form.sc-smoothly-form-demo-pet smoothly-summary.sc-smoothly-form-demo-pet,.sc-smoothly-form-demo-pet-h>smoothly-form.sc-smoothly-form-demo-pet smoothly-tabs.sc-smoothly-form-demo-pet{flex-basis:100%}";
-const SmoothlyFormDemoPetStyle0 = styleCss$18;
+const styleCss$Z = ".sc-smoothly-form-demo-pet-h{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;grid-column-gap:2rem}.sc-smoothly-form-demo-pet-h smoothly-input-checkbox[name=\"hasOwner\"].sc-smoothly-form-demo-pet,.sc-smoothly-form-demo-pet-h>smoothly-form.sc-smoothly-form-demo-pet smoothly-summary.sc-smoothly-form-demo-pet,.sc-smoothly-form-demo-pet-h>smoothly-form.sc-smoothly-form-demo-pet smoothly-tabs.sc-smoothly-form-demo-pet{flex-basis:100%}";
+const SmoothlyFormDemoPetStyle0 = styleCss$Z;
 const SmoothlyFormDemoPet = class {
     constructor(hostRef) {
@@ -8520,10 +8490,10 @@ const SmoothlyFormDemoPet = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'db081d6ec048537567ff4c3de3efb80f02e875a9' }, index.h("h2", { key: '152ec589606c14d600458d16edd6aa2c45366007' }, "Pet"), index.h("h3", { key: '51ccb3e2d3a10b11579fa24ae5998a10ed2e656c' }, "Value"), index.h("smoothly-form", { key: 'b1e76f0e962498c312fb61b2198f27e177eedeea', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: 'c60c6da48f5e5c62b84a934dd908f18278bd5a7a', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: '92cf53c5a0fc3dbb9d1f7b042c6600458524cfd7', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: 'e4e9f551b36342ac128b5c189e372add1453be38', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '50d7eaf7522daa10b3f5832a87fff8674b162dea' }, index.h("h2", { key: '1262eb5e63ca5d7874f776837470a88bf5b8769e' }, "Pet"), index.h("h3", { key: '48e2bedbc5a62495d3b6f75dcc94b1b81b746e33' }, "Value"), index.h("smoothly-form", { key: '2d2f7c7ce198228e17c7e7ae1e507d7a97d73ff0', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, index.h("smoothly-input", { key: 'd5b952488d27c212a51bb0f19c07f32a4b02bdc2', type: "text", name: "name.first" }, "Name"), index.h("smoothly-input", { key: '160482d107ee5fbb66e6e9be4dd17549085ec66b', type: "integer", name: "age" }, "Age (Years)"), index.h("smoothly-input-checkbox", { key: '1a3a7229c18eb1adff2ab0f80fc79b3c02e5c6fe', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: 'd4e41bd4f0ea384e45d3c7b0ebcfc8fef0c8a273' }, index.h("smoothly-input", { key: 'a8f6dec76b80683428d77f30c3e444a883d1afc7', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name"), index.h("smoothly-input", { key: '7556e46fc24f10f1ca8252d3759e13ef6be294e7', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index.h("smoothly-input-file", { key: 'eb895e44123c07d936fbdca933b873aa20eed521', name: "owner.picture" }, index.h("span", { key: '8b44d1b0e331113f3d9c994edd860bcbbaa0235a', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: '5ea7342881dc271817826891f9e4007d4d1f1389', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday"), index.h("smoothly-input-date-range", { key: '6209c4291574f87a35c1904defebd4cbde66290c', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange"), index.h("smoothly-input-range", { key: 'b9dc7ac7da7ff8593e1a2e4a4d328dd81dfc5992', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height"), index.h("smoothly-input-select", { key: '21d3858ea701a6286251ae44371b2dbb9c370412', name: "owner.favoriteHat" }, index.h("span", { key: '2e8cef55162db373af79645a4b5e374a6b40bbb2', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1, selected: this.owner.favoriteHat == value }, value)))), index.h("smoothly-input-color", { key: '24133d180e198e554b63de26bc3323cbe3744601', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color"), index.h("smoothly-input-radio", { key: '274fb656b13bde70abea4fa35eb688cdf46eacb8', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index.h("span", { key: 'df83a30c36b5177a23d8763d5e66611db3bbe697', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '5a733c0b2ff06ddad303ec77097775d4a42fadb5', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index.h("smoothly-summary", { key: '6d2fcc2affe9250787419dce8157912339803fee' }, index.h("span", { key: 'b589d7b6ca57d95b621d827cfb5927db3faca50b', slot: "summary" }, "Summary"), index.h("div", { key: 'd4d1293918327030bdee186d4ca5a55682b3703c', slot: "content" }, index.h("smoothly-input", { key: '5959e26fe56c7347f7c15a17cdfd4f2acdfb9fef', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: 'd1bb869132deb842aa805655d552906c80858ec8', name: "summary.picture" }, index.h("span", { key: 'f8b1915acdd0d42eb33978fcb02f662d65a8f2ab', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: 'b64e66df7956ab1a05197fe2d51e44361f984c0e', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: '5466ee7830e653a6f6db25961645c9ab203ccb51', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: '7ce763b3bef80bc5e0e0206c7f66fec8631d29d6', name: "summary.height", label: "Height" }), index.h("smoothly-input-select", { key: '83b72df95cff68356940bdaec14fc5afb136fc36', name: "summary.favoriteHat" }, index.h("span", { key: 'f8b6d174307542335f4da99192b8aaf6c85c9aec', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-month", { key: 'b75782058ca787708a313135fc1e8bb152e6b3c3', name: "summary.month" }, index.h("span", { key: '696e8468f1f4ed059418e8ce73630f2e342bbddc', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: '8e667d352bd2c206980b6104c67f9ae2c5a99966', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: 'd1aaf397f6b3ab4f09334b5a7bb29dc8d21c6ddd', name: "summary.favoritePizza" }, index.h("span", { key: 'f3b6a36b33d5a57ae90fed082e49f64009f918cd', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: 'a3623c6c863c01ececceb3662bc28e866bb02624', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: '560c301f9084430a3116610ecac87526c4c75fe3' }, index.h("smoothly-tab", { key: 'a6daa32792c96cc28522f8be2bedd0cb55c0fd11', label: "Dog" }, index.h("smoothly-input", { key: '7d49e5553a141bddea389bf51dd84a9c77bcefe6', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: 'aa8ad2af83ad5f74e7094cddde1ad86232708335', name: "dog.picture" }, index.h("span", { key: 'ba9254c5c1e741d44136d0f6cbb28d5f4f0dafc4', slot: "label" }, "Dog picture")), index.h("smoothly-input-date", { key: '8e49fb563376bd4349e7151a8ef4292fffa2badd', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: '5a8b95b3fa01a59a7e6cfe32c0158b10d6548805', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: '9db97eab10483487370a2eea58a7b4c69bf1d6c4', name: "dog.favoriteHat" }, index.h("span", { key: '84f01e17a57d9bc3ce1c6c7e3973ebddf6ec1388', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-color", { key: '40b05d29bf1fce02de12100fd649d3c24313b104', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: 'e7477ef30a27eced86023fd8463c8982e3c949cd', name: "dog.favoritePizza" }, index.h("span", { key: 'f58e1ccc4ddabc64df4f567ea3b279075acb17e8', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: 'f02baf4ffd3456d15eda802c1f701e941bf74c08', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: 'cffe512b4e6ac0a4c9ca085de43e1924e3778b7b', label: "Cat", open: true }, index.h("smoothly-input", { key: 'f7196eec6788c2f294ff6743bb4360e1a57b0a14', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: 'f4912e7af63e667a438d389a82cd4292fdcdaf7d', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: 'fa69764806f0a1ba82cc066aedcc1ce9e18e0a50', type: "json", value: this.value })));
+            } }, "Has Owner"), this.hasOwner && (index.h(index.Fragment, { key: 'c358b2d9b6b7160187ffc2005c31acb2e245e195' }, index.h("smoothly-input", { key: '181824a1a8c9336a6281a2c75c0dca8dd1efec5d', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name"), index.h("smoothly-input", { key: '48c584e660552cbcb6b8591cb76db4ad82a1574a', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), index.h("smoothly-input-file", { key: '0337e5784fda5203110240ce57a59999b95eb0b6', name: "owner.picture" }, index.h("span", { key: '376e9b3c74bd3c91b7c4830088214d6f25d97b2f', slot: "label" }, "Owner picture")), index.h("smoothly-input-date", { key: 'a46ac3dcf0f642c3e73a05e372b89c3d2bc05af4', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday"), index.h("smoothly-input-date-range", { key: '091a40ffac1d94fb84ab34fafe53e6f3fdc4eb2e', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange"), index.h("smoothly-input-range", { key: '481c3e71f7fa1c4a6212c2a7793b29520a0a4a7a', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height"), index.h("smoothly-input-select", { key: '2a1d02d5822bba65319793184fca0bb0c228b09f', name: "owner.favoriteHat" }, index.h("span", { key: '3b0d1c7ab9d640a6beb7386d3fcf32d01c4862bd', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1, selected: this.owner.favoriteHat == value }, value)))), index.h("smoothly-input-color", { key: '0213d002d04794540650094b87c2f51dc4c79dcc', name: "owner.favoriteColor", value: this.owner.favoriteColor ? Scrollable.RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color"), index.h("smoothly-input-radio", { key: '779bc55c0302cfbdd760fcca76d4218d248f04bc', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, index.h("span", { key: '95dc274f29b977810e20393866165337f5e8b375', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '6c54742a964b261f6149eff7a3f8f8f99def63eb', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), index.h("smoothly-summary", { key: 'd0e0717f5ab5654263f61b19b9aaaeb744884f2b' }, index.h("span", { key: 'de40ea4e5537031fa91affb4282ee438282f3051', slot: "summary" }, "Summary"), index.h("div", { key: 'b416d9370549c02235eee7757fd9fc1d42004394', slot: "content" }, index.h("smoothly-input", { key: '7351bc85a7388f5f8b77f6b1d528c566c3fa97a5', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), index.h("smoothly-input-file", { key: '9f296928fd94ac6f35a1614595da37b3995b107f', name: "summary.picture" }, index.h("span", { key: 'd7fe9c0f53565bef390c8503a58f6f50868610a7', slot: "label" }, "Summary picture")), index.h("smoothly-input-date", { key: '44c483cf3c8f71be268d90d5f468a49c22cd2f8b', name: "summary.birthday" }, "Summary birthday"), index.h("smoothly-input-date-range", { key: 'b5124dfc4e7816e7ba4f820a5aca3d14af0fb837', name: "summary.ownedRange" }, "Summary ownedRange"), index.h("smoothly-input-range", { key: 'ea62f55332b6b3e125903d3c6baa380689ed864e', name: "summary.height", label: "Height" }), index.h("smoothly-input-select", { key: '99ffc93ca528a13281fe6dd188139b638f5c8ba5', name: "summary.favoriteHat" }, index.h("span", { key: '0da54511b795b429e768a119074d5392abaf2b9c', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-month", { key: '3419ad81154cb4af9bb372c3045925456d4fe7fd', name: "summary.month" }, index.h("span", { key: '6794ccd25d220bdb0612adcfeb9389885c53ebb6', slot: "month-label" }, "Summary month")), index.h("smoothly-input-color", { key: 'bd5a2efeee77428de15a54f85f3f23f44e8ca024', name: "summary.color" }, "Summary Color"), index.h("smoothly-input-radio", { key: '21ede19a4f9112977e253fb51cea2aa39ad819f6', name: "summary.favoritePizza" }, index.h("span", { key: '889b43b3ee59c109fab04a38dde1ea7a804c84f9', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '47a39cc2ddd1d4745b25125b59d3a85f7f68b6c1', name: "summary.hasPet" }, "Has Pet"))), index.h("smoothly-tabs", { key: 'bff4910b703b19ac81799c63704a47c79690dec1' }, index.h("smoothly-tab", { key: '03a01fc8534e7228be5a042fc2f1a605700c6019', label: "Dog" }, index.h("smoothly-input", { key: 'b70ec959c8415429276bac30aac2f799eaad9e48', type: "text", name: "dog.breed" }, "Breed"), index.h("smoothly-input-file", { key: '098a0dec9bd010569eca48f0736ed354d478e4c2', name: "dog.picture" }, index.h("span", { key: '089b32a2ff3926d59b9ce01e8a0f73f0eddde01b', slot: "label" }, "Dog picture")), index.h("smoothly-input-date", { key: 'd365a6a7c8cbc7df81f12cc2be3d1b5958d694bd', name: "dog.birthday" }, "Dog birthday"), index.h("smoothly-input-date-range", { key: 'b063302e3f366a53071cf0fb2e5d87e39c5d9a44', name: "dog.dateRange" }, "Dog date range"), index.h("smoothly-input-select", { key: 'd2c7c1c0ef6ef428bf667a3d61f752761c0936dc', name: "dog.favoriteHat" }, index.h("span", { key: '82759482ed126788312fd90fb7500bd4622eab32', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index$1) => (index.h("smoothly-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-color", { key: 'bc0ee988a7e70ce19d1735811283c268ae9eed04', name: "dog.favoriteColor" }, "Dog's Favorite Color"), index.h("smoothly-input-radio", { key: 'e84dd8ad3145a438fb640bfcd168991450021c64', name: "dog.favoritePizza" }, index.h("span", { key: '18907f9eac1bafbabcde910add33cf33d5b23a2c', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, key: index$1 }, value)))), index.h("smoothly-input-checkbox", { key: '53ae41ef70927bb4ec0f9ee52f6d702606d9f367', name: "dog.hasPet" }, "Has Pet")), index.h("smoothly-tab", { key: 'ecda137898640fb248b79cceff42f25c5f854160', label: "Cat", open: true }, index.h("smoothly-input", { key: '897f0578ab304103685a1adabc231cd14d15312a', name: "cat.favoriteFood" }, "Favorite Food"))), index.h("smoothly-input-submit", { key: '4e99398ce10eb1629fb24d5552e050a543614e45', size: "icon", slot: "submit", color: "success", fill: "solid" })), index.h("smoothly-display", { key: 'a9f5819004771a10f89f1d1cdc63fe2be8ab3777', type: "json", value: this.value })));
     }
 };
 SmoothlyFormDemoPet.style = SmoothlyFormDemoPetStyle0;
@@ -8533,7 +8503,7 @@ const SmoothlyFormDemoPrices$1 = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5ed4038bcc2aaa09d52b20596234e323fb2fc8f7' }, index.h("h2", { key: 'd9a9121129755d8a9f9a38976ac7a277d152b5f7' }, "Prices"), index.h("smoothly-form", { key: 'b1d1646ef95052ecf5e56786132405bc99fcdc55', looks: "line" }, index.h("smoothly-input", { key: '682ab8b618be4ba29d0a0823f76ccc5d4f0fb88d', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: 'a50fde19f136d84e78b33a556ef06132d3de9862', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: 'af5cbc7ba716720732f2ca8378bcd6930c858124', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '26c3529dadcca120c36f4e9e429af3a2a0c67afe', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '1bd61f5772d6cecb4d8122f0bb7e12d0fd78750b', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '7c81bd4291f7530da19745d67c3fb7b791fbf429', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '9b5da213d1fde556b6c5c5295203a8d3abfe14ba', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: '9dc494033b06e3a6e14f9ba9f5bc3c7cc7e3bd88', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '6f8a1c4c31461564c2acea4034117f4e78846dc6', slot: "submit" }))));
+        return (index.h(index.Host, { key: 'fefcedbfe8f22921bea912762f1f6d8caf6ea3e4' }, index.h("h2", { key: 'c18e909d513549a9a8cc28b2b1d8982b96703343' }, "Prices"), index.h("smoothly-form", { key: '1eb8cab4a08f19f246c5cd46362452b416db1573', looks: "line" }, index.h("smoothly-input", { key: '75439c727baa6c39b500deec470d0a32953fddc7', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: '11b3a7ab0e4dd1626e7efea03c56ba4c1c5e9c27', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), index.h("smoothly-input", { key: '837b810384d7818df18c2ed9d6d08eb965124627', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '6ffb11da5cecbbeeef8b6482cbe3cee39e16b6ef', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '4409191ea5b5b0ded31bffc9408927c36bb1bd3b', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '8dc492d719d9e2eabba22c402e0349fc5aa7dc9f', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '2def9348a43704dafc21e3738de05d074f189285', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-reset", { key: 'a788708ac62aedac125182d8b2e85ce1e9a62001', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'b8952a88dfb22db800ae00540c83d90feb160152', slot: "submit" }))));
     }
 };
@@ -8553,7 +8523,7 @@ const SmoothlyFormDemoPrices = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a2dfe85cbe9a77c05371417039b053de1ff6438f' }, index.h("h2", { key: '55c26e3adbbf9bd5f96c665f7adfd1ae4f30bb68' }, "Schedule"), index.h("smoothly-form", { key: '4800c705002c5f850ca5bc117d7d2269acdf6df4', looks: "line", validator: TimeTable.type }, index.h("smoothly-input-date", { key: 'a370ad7ed5c8feaf03fd91f3a9fd58e4cf378fc3', name: "schedule.0.date" }, "Date"), index.h("smoothly-input", { key: '7d99e4f920f10aebbb99678f74a9bf46da4e5728', name: "schedule.0.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '11911e751725ad9f2eb47e796d6ed34c55db8bdc', name: "schedule.1.date" }, "Date"), index.h("smoothly-input", { key: '54edda245c6b1803da201addf93942b6d640ae00', name: "schedule.1.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: 'e800f5668d0df1af08c65ed91ec1c3690789d1b6', name: "schedule.2.date" }, "Date"), index.h("smoothly-input", { key: 'fc5e69f6de150b83389b34b4fd51d82eec7422c1', name: "schedule.2.amount", type: "price" }, "Amount"), index.h("smoothly-input-reset", { key: '8b32edd5df32e1e1a12314adf83a701d5b8353c1', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: '87350ae3b3bc920cb1f89d8a4b63f13a91f658eb', slot: "submit" }))));
+        return (index.h(index.Host, { key: '8676cb9b188b2378d815226827e2f7426f514deb' }, index.h("h2", { key: 'e11dc90193d5f06378378c07412f7e8a842c6ec1' }, "Schedule"), index.h("smoothly-form", { key: '5875dcd80af050a71d7434fb2f84f18446436dbf', looks: "line", validator: TimeTable.type }, index.h("smoothly-input-date", { key: '0551573f423a5022499d7d3a25fe6815e75e8554', name: "schedule.0.date" }, "Date"), index.h("smoothly-input", { key: '4889b711330406e9902beff8b8cc5a22d018978a', name: "schedule.0.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '9c2e767a364b4d29ec745fff9cf6a185403208b3', name: "schedule.1.date" }, "Date"), index.h("smoothly-input", { key: '279a1c6e7a5aad5525347c609ae74f7295182102', name: "schedule.1.amount", type: "price" }, "Amount"), index.h("smoothly-input-date", { key: '8a8c4e848347f3eb01c7f987926b1a4439665bff', name: "schedule.2.date" }, "Date"), index.h("smoothly-input", { key: 'cea7149a54447cc79ea1bfacdebc539323eb4377', name: "schedule.2.amount", type: "price" }, "Amount"), index.h("smoothly-input-reset", { key: 'fe5f1fddbaa59572935420bb42aaab83106278ad', slot: "reset", fill: "default", type: "form", color: "warning" }), index.h("smoothly-input-submit", { key: 'f435d61a9cbe0aaf693763d86a3babb93ec9acde', slot: "submit" }))));
     }
 };
@@ -8562,7 +8532,7 @@ const SmoothlyFormDemoTransparent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '33e58258f38663c8283869c8aa751ce54b6ff131' }, index.h("h2", { key: 'd257eb6844086ddff32d309aefe38e3d3c49aab4' }, "Transparent"), index.h("smoothly-form", { key: '215bf30f6faa569f594bfb0dcfbf325dedaced3d', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: 'ce7f5ae99c6fc49fc1ff8aa52accbec42440ef6d', name: "file" }, index.h("span", { key: '3a9770ab2e6dcbdc5cfb77cab7b4dcf5324d9357', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'e6ad4f9a1aae3f1c458ac3c0d2aa36e5b18dfc71', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '5b6e425b22c551e516b7b95f03aab78a4a0bdb70', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: '28d44980fcc5b752884afa43a2eb3217d87ff8ba' }, "Date"), index.h("smoothly-input-date-range", { key: 'd98533b265ea972f8cea9f9d7e24a7bbed315afa' }, "Date Range"), index.h("smoothly-input-select", { key: '046e7d26992ec93436b9b55ed0b7ad1d5e9ed0b2', name: "transport" }, index.h("smoothly-item", { key: '8f04e6b1398efd270dc28c72de932f00b967afb8', value: "plane" }, index.h("smoothly-icon", { key: '027bb9786ae542ab1d9ebe25747798999e8afc67', name: "airplane-outline" })), index.h("smoothly-item", { key: '7df0d69db219641e7d0b5f577987a0fb787f8b7c', value: "car" }, index.h("smoothly-icon", { key: '69dd108bcb129943931c80ae65e809851e637b2d', name: "car-outline" })), index.h("smoothly-item", { key: '554f0e330adfa4f357a5403e61f4df724830ebbb', value: "bus", selected: true }, index.h("smoothly-icon", { key: 'fff4c573b60864f3a17336ab999d735cdb1bbac4', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '922e7c4c4cb99315ae58ca6014bad981e39822c7', icon: "checkbox-outline" }))));
+        return (index.h(index.Host, { key: '56bb25aa930390f6f18deef5a7f11cd60743c8c1' }, index.h("h2", { key: '6b02cc5c2ab9dd9ce512ea709a6e8c318803f806' }, "Transparent"), index.h("smoothly-form", { key: 'eb5a7a12b66c950c6cfb6b63279d6d3d0fb3c9e9', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, index.h("smoothly-input-file", { key: '7af20181794d27a18c0657525c6feeac396bb830', name: "file" }, index.h("span", { key: '2ee590e2395504e7ba95985b3c3cbce3f7704df1', slot: "label" }, "File"), index.h("smoothly-icon", { key: 'c6fb9a872fb7c4486c31b11ce40fd147304fd7e6', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '221c41fee6498fd25c075c1025b4c09ca63a88f3', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-input-date", { key: 'b14c619d972e6233ad58a200fb6bb9d5554cf17f' }, "Date"), index.h("smoothly-input-date-range", { key: '2a4f0cb951dc7f72e48fa102a5cfc598c6a9a229' }, "Date Range"), index.h("smoothly-input-select", { key: '411bc52358b29c5216d52950902a5204f420ebd6', name: "transport" }, index.h("smoothly-item", { key: 'cc29561b22ff405cb5fa0f8d3341d0967ef657f7', value: "plane" }, index.h("smoothly-icon", { key: '040582665fba3aae4cede769c68963223ee83091', name: "airplane-outline" })), index.h("smoothly-item", { key: '22657c50d58b142833a6a429273ce3d774e0b5e0', value: "car" }, index.h("smoothly-icon", { key: 'ccce5f3ffdf89c5a2845857c2c0f0f770f464e96', name: "car-outline" })), index.h("smoothly-item", { key: '1b10530f7bc4499c821ed533ab6a36cb85f3d7e4', value: "bus", selected: true }, index.h("smoothly-icon", { key: '23b2876323a8f5d806e5fb668b2639c11b4c2705', name: "bus-outline" }))), index.h("smoothly-input-submit", { key: '15f781edd28f7dfe12c8557866afd2475ee9e4ba', icon: "checkbox-outline" }))));
     }
 };
@@ -8576,21 +8546,21 @@ var Contact;
     });
 })(Contact || (Contact = {}));
-const styleCss$17 = "";
-const SmoothlyFormDemoTypedStyle0 = styleCss$17;
+const styleCss$Y = "";
+const SmoothlyFormDemoTypedStyle0 = styleCss$Y;
 const SmoothlyFormDemoTyped = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'aa45fe19db2b739480b0d6e1acf25f5d25021fe7' }, index.h("h2", { key: '5a75209e55f6082316117ab8202ac29ec45f6fec' }, "Typed Contact"), index.h("smoothly-form", { key: 'dce44554c5d5523c0035a7a51bdd795423e2b682', validator: Contact.type }, index.h("smoothly-input", { key: 'fb7eba03fcca4a8f832ef757b92864fb0ed9c308', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '6acff61dc9c33c18aaa9c2d3c03b1602684a0c47', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: '368aadb5ad7ea5807ccc2b0f0b969e0a86c1ad89', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '7f787fd008d9e5915f97ab994834e4323e8efd0b', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '52748a9b0f51a5bb7f7955708544a1e2fb3b4e30', name: "country" }, index.h("span", { key: '779b0df0a80132981dbf8131cb7657c4ac9cd50f', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '5ec8b16b0e21c6d369c0edbb1db313d00aa23eed', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: '1fb641919146d2d69762c1eff443c2a280d42065', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: '183df4f3ededc6c7dfd8e1cb27142959e7694a90', slot: "submit", size: "icon", color: "success" }))));
+        return (index.h(index.Host, { key: '589d8de4c0b6b7e857a7a4ddbbbbc9a2e860d502' }, index.h("h2", { key: 'd402f921eaccf3321e04df59c96e9d32aec67582' }, "Typed Contact"), index.h("smoothly-form", { key: 'fd0c811ba55c3aab606a8ac8575e5d36968b556a', validator: Contact.type }, index.h("smoothly-input", { key: '86f4b7aec26301e5b74e65c36d7a10d29e32f441', name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '61ffe1927a42f0f7a7ae49e158485c99dc8581bc', name: "name.middle" }, "Middle Name (optional)"), index.h("smoothly-input", { key: 'dc5620803aeecca0a640ff675b970f6faa98b8ab', name: "name.last" }, "Last Name"), index.h("smoothly-input", { key: '1dea7fc4ba31c47ad39bcb57238b360a7df0f74d', name: "age", type: "integer" }, "Age (18-120)"), index.h("smoothly-input-select", { key: '83f5df5e7d8d96600a9eb6b38762d25c5c5098ae', name: "country" }, index.h("span", { key: '00666ef0610990ac0cf1e11635db1b7beffaeb59', slot: "label" }, "Country"), TimeZone.Alpha2.values.map(country => (index.h("smoothly-item", { value: country }, en.from(country))))), index.h("smoothly-input-date", { key: '3e95f926e1a84109cae654429f747a979972c372', name: "birthday" }, "Date of birth"), index.h("smoothly-input-reset", { key: 'b4c35bb7106d310df2ad78e6eee3c89e393730d1', slot: "reset", type: "form", size: "icon", color: "warning" }), index.h("smoothly-input-submit", { key: 'c9fdb24ebc4f4ec46bae6b097259dad7b1487ff7', slot: "submit", size: "icon", color: "success" }))));
     }
 };
 SmoothlyFormDemoTyped.style = SmoothlyFormDemoTypedStyle0;
-const styleCss$16 = ".sc-smoothly-frame-h{display:block;width:100%;height:100%}[hidden].sc-smoothly-frame-h{display:none}.sc-smoothly-frame-h>iframe.sc-smoothly-frame{border:none;padding:none;margin:none}";
-const SmoothlyFrameStyle0 = styleCss$16;
+const styleCss$X = ".sc-smoothly-frame-h{display:block;width:100%;height:100%}[hidden].sc-smoothly-frame-h{display:none}.sc-smoothly-frame-h>iframe.sc-smoothly-frame{border:none;padding:none;margin:none}";
+const SmoothlyFrameStyle0 = styleCss$X;
 const SmoothlyFrame = class {
     constructor(hostRef) {
@@ -8637,8 +8607,8 @@ const SmoothlyFrame = class {
 };
 SmoothlyFrame.style = SmoothlyFrameStyle0;
-const styleCss$15 = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:flex;align-items:center;justify-content:center;box-sizing:content-box}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}.sc-smoothly-icon-h.sc-smoothly-icon-s>svg{width:100%}";
-const SmoothlyIconStyle0 = styleCss$15;
+const styleCss$W = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:flex;align-items:center;justify-content:center;box-sizing:content-box}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}.sc-smoothly-icon-h.sc-smoothly-icon-s>svg{width:100%}";
+const SmoothlyIconStyle0 = styleCss$W;
 const SmoothlyIcon = class {
     constructor(hostRef) {
@@ -8682,7 +8652,7 @@ const SmoothlyIcon = class {
     }
     render() {
         var _a;
-        return index.h(index.Host, { key: 'b98eb1398e4508e58a131c6d5ff723486c0a32f7', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return index.h(index.Host, { key: '90d808b89e55e020357e31996664df7ae6e492e7', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get watchers() { return {
         "toolTip": ["nameChanged"],
@@ -8691,8 +8661,8 @@ const SmoothlyIcon = class {
 };
 SmoothlyIcon.style = SmoothlyIconStyle0;
-const styleCss$14 = ".sc-smoothly-icon-demo-h{display:block;width:clamp(200px, 100%, 1200px);margin:auto}[hidden].sc-smoothly-icon-demo-h{display:none}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo{display:flex;flex-flow:row wrap}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo>smoothly-icon.sc-smoothly-icon-demo{padding:1rem;position:relative}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo>smoothly-icon.sc-smoothly-icon-demo:hover{scale:1.5}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo>smoothly-icon.sc-smoothly-icon-demo:hover::after{content:attr(data-name);position:absolute;white-space:nowrap;bottom:100%;background:rgb(var(--smoothly-default-contrast));color:rgb(var(--smoothly-default-color));padding:0.25rem 1rem;z-index:1;pointer-events:none}";
-const SmoothlyIconDemoStyle0 = styleCss$14;
+const styleCss$V = ".sc-smoothly-icon-demo-h{display:block;width:clamp(200px, 100%, 1200px);margin:auto}[hidden].sc-smoothly-icon-demo-h{display:none}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo{display:flex;flex-flow:row wrap}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo>smoothly-icon.sc-smoothly-icon-demo{padding:1rem;position:relative}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo>smoothly-icon.sc-smoothly-icon-demo:hover{scale:1.5}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo>smoothly-icon.sc-smoothly-icon-demo:hover::after{content:attr(data-name);position:absolute;white-space:nowrap;bottom:100%;background:rgb(var(--smoothly-default-contrast));color:rgb(var(--smoothly-default-color));padding:0.25rem 1rem;z-index:1;pointer-events:none}";
+const SmoothlyIconDemoStyle0 = styleCss$V;
 const SmoothlyIconDemo = class {
     constructor(hostRef) {
@@ -8703,14 +8673,14 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (index.h(index.Host, { key: '1c6981b2ead8d852bd3095ea2b8e167ccfa3999e' }, index.h("h2", { key: 'a674e2334702d721bbe80c38e340dd4df83b1d8c' }, "Filter and Variants"), index.h("smoothly-form", { key: '7ce406f374d1d73f0ef76988f94366a0737dca0c', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: '2880e33baad9499180d57e928a613a839edf5504', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '238a669e80f19114a5530d5fbc46e12d4607818c', name: "variant" }, index.h("span", { key: 'd03a1b35b864531d62e2d09f99a1e3f500170ffa', slot: "label" }, "Variant"), index.h("smoothly-item", { key: '0e826e3272ed4c017ad98a7a7d6b137b71ef9333', value: "outline" }, "outline"), index.h("smoothly-item", { key: '0e330f7e224f1bb4e9a99f5e1e162a786888b14c', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: 'c5aabc95974e08dfc599ff7d639918647c04100f', slot: "end" }))), index.h("h2", { key: '83a640f95d8fce430ece0c95c7a8cb360747e5eb' }, "Props"), index.h("smoothly-form", { key: 'd04aa102e7fa19243158a4927e0fd1073076dc3a', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: 'fb220fa5e5ddd2483d0af445008e8f53132dbfc9', name: "color" }, index.h("span", { key: '469f2b7809c85dab743be2a787deea0f928cf887', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '93d833e82d0329fe42fd699550e7090d2aee8b10', slot: "end" })), index.h("smoothly-input-select", { key: 'ca8185ac3e6dec1b773dcc84eb3e0b67c84fd897', name: "flip" }, index.h("span", { key: '430a8a3e7333ab6f854bfeb26f27375a6f085b39', slot: "label" }, "Flip"), index.h("smoothly-item", { key: 'bdaa614c66e08e12a03b63ecb92e6f8fd4b22477', value: "x" }, "x"), index.h("smoothly-item", { key: '091a2f82865030b1c35d4d974683a35bd2b15f87', value: "y" }, "y"), index.h("smoothly-input-clear", { key: 'a845f8a9224de65fbbec6fca8a25da9126beb661', slot: "end" })), index.h("smoothly-input-select", { key: 'f7c069d6af5a183902268d411bcc6ad2ea7dd11b', name: "size" }, index.h("span", { key: 'e8a85b03fac104008ab9c3351ee1fc604f906762', slot: "label" }, "Size"), index.h("smoothly-item", { key: '9d986f27066f821c253f7604f3c2fe3c2c5daece', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '706de8a8dee95736dfd610c87f0c6ddee4053d8e', value: "small" }, "small"), index.h("smoothly-item", { key: 'fb34e0afcf503ea5a373c110bca59bc500189495', value: "medium" }, "medium"), index.h("smoothly-item", { key: 'aa72f96fcd840ef012d9bb3ea5f4785a2d47247f', value: "large" }, "large"), index.h("smoothly-input-clear", { key: '650667d92f842cc29b2b821a813f6afe68a855a7', slot: "end" })), index.h("smoothly-input-range", { key: '14095e1c264aa84327020bde44c9ed1a16f6682b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '9b70eebe0d7a713d38fd99f02023fb6a1a9b889a', slot: "end" }))), index.h("h1", { key: '9e7af6108684d5a189e7ccaecec8bf4ae9b63d52' }, "Icons"), index.h("div", { key: '1de01a285b956ffe3a540022f2905b6257cea5bc', class: "icons" }, [
+        return (index.h(index.Host, { key: '40c73c1b86c82de25ef710d90250ee26f5a97d18' }, index.h("h2", { key: '9da59d3a9759d294b018b1cccd6b1ab22a80a14d' }, "Filter and Variants"), index.h("smoothly-form", { key: 'f00d40984821c21dbe6da17699bed1af9833ba98', onSmoothlyFormInput: e => (this.display = e.detail) }, index.h("smoothly-input", { key: '1e3aea269957e45707b59cac29c7acda1b88b44a', name: "filter" }, "Filter"), index.h("smoothly-input-select", { key: '920017ab5a12f3ac301e1d497ab5f646b2f5b250', name: "variant" }, index.h("span", { key: '6f72768a6901c6848b9a8eb15890726b8d9aad65', slot: "label" }, "Variant"), index.h("smoothly-item", { key: 'e19740138b3d3fb726891c8c83ca48cb63a6d32b', value: "outline" }, "outline"), index.h("smoothly-item", { key: '9e1101547a526f2e6d5626ea1cb6f9d509e3d77c', value: "sharp" }, "sharp"), index.h("smoothly-input-clear", { key: '90bf7ea10c6e28f2fe0946246e932c188d2e36d6', slot: "end" }))), index.h("h2", { key: '03af9cd3b892c8ce5c85ec5f24308ec568d3d7a4' }, "Props"), index.h("smoothly-form", { key: '5523dd394791968c76bcaa4611ad7f061ef3d4df', onSmoothlyFormInput: e => (this.props = e.detail) }, index.h("smoothly-input-select", { key: 'afaef5167021cf3f92c0ec46db5a13dc86a793be', name: "color" }, index.h("span", { key: 'a70c95e49fa7e5863e2ee085cea1a779bae32672', slot: "label" }, "Color"), Scrollable.Color.types.map(color => (index.h("smoothly-item", { value: color, color: color }, color))), index.h("smoothly-input-clear", { key: '2e0a61224d72bb2177ccdca8464a062b55c2cdf6', slot: "end" })), index.h("smoothly-input-select", { key: '33dd05fc21187e59d50294ac6e516859b682cc85', name: "flip" }, index.h("span", { key: '1c6cfbc839f886094d1c5159ffe15cd53aa7408c', slot: "label" }, "Flip"), index.h("smoothly-item", { key: '5106005eb437b4928c85f0c199e8a63d2ccb15cf', value: "x" }, "x"), index.h("smoothly-item", { key: '74127b329d004f066a26cd5ebf1d371b4aa3b0b0', value: "y" }, "y"), index.h("smoothly-input-clear", { key: '136a83fec40ffe558a645692ee166bf41895a127', slot: "end" })), index.h("smoothly-input-select", { key: '18f3fefd865f1e464fe028a28cb3c08ed1f521b1', name: "size" }, index.h("span", { key: 'e12ba7003ac5bd1150df707fe72d4638eb873e6d', slot: "label" }, "Size"), index.h("smoothly-item", { key: '1aaed4a2d9de5cbb2d11b7e57d4e10fb62023a8b', value: "tiny" }, "tiny"), index.h("smoothly-item", { key: '506c7ac8f330114d6cfeeacd2ccf28617f48d18f', value: "small" }, "small"), index.h("smoothly-item", { key: 'fa323988312e0bd28fdb047a29b2bf9b6393316c', value: "medium" }, "medium"), index.h("smoothly-item", { key: '4a70d203ff25c15d7de12884df57c5908bfddf3f', value: "large" }, "large"), index.h("smoothly-input-clear", { key: '1484395ca63048f2da3086608c69fd16adc4c767', slot: "end" })), index.h("smoothly-input-range", { key: '9ec2aa43cbcba1b05b4d0f15630fb3652ba1c68b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", index.h("smoothly-input-clear", { key: '9edc8e3b7bd75b9709da67bb106713265d9bae99', slot: "end" }))), index.h("h1", { key: 'e163cd387bad76c2d031e30ebd3ef3c99ed5c3f4' }, "Icons"), index.h("div", { key: '991f7e26e28d46d076f9977a2e08ec8e3902a518', class: "icons" }, [
             ...Scrollable.Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),
             ...Scrollable.Icon.Logo.values.filter(name => !this.display.filter || name.includes(this.display.filter)),
         ].map(name => (index.h("smoothly-icon", { name: name, toolTip: name, "data-name": name, color: this.props.color, flip: this.props.flip, size: this.props.size, rotate: this.props.rotate, onClick: () => {
                 navigator.clipboard.writeText(name);
-                this.notice.emit(redirect.Notice.succeeded(`Copied "${name}"`));
+                this.notice.emit(Notice.Notice.succeeded(`Copied "${name}"`));
             } }))))));
     }
 };
@@ -8994,8 +8964,8 @@ var Key;
     Key.create = create;
 })(Key || (Key = {}));
-const styleCss$13 = ".sc-smoothly-input-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-h{border:transparent solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-h,[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-h>input.sc-smoothly-input,[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within)>input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-h.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .label.sc-smoothly-input{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h.floating-label.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.floating-label .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder] .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly] .sc-smoothly-input-s>[slot=label],.has-value.sc-smoothly-input-h .label.sc-smoothly-input,[placeholder].sc-smoothly-input-h .label.sc-smoothly-input,[readonly].sc-smoothly-input-h .label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-h:not([show-label]):not(.show-label) .label.sc-smoothly-input{display:none}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);overflow:hidden;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input{position:relative;flex-grow:1;height:100%}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>label.sc-smoothly-input{left:var(--input-padding-side)}.sc-smoothly-input-h:not([show-label])>div.sc-smoothly-input>input.sc-smoothly-input{padding:0 var(--input-padding-side)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.ghost.sc-smoothly-input{position:absolute;box-sizing:border-box;align-content:center;height:100%;padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.ghost.sc-smoothly-input>div.value.sc-smoothly-input{display:inline;pointer-events:none;opacity:0}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.ghost.sc-smoothly-input>div.remainder.sc-smoothly-input{display:inline;pointer-events:none;opacity:0.5}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>input.sc-smoothly-input{padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side);box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}.sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:none;z-index:2;cursor:pointer;padding:0.5rem}[invalid].sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:flex}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:focus{outline:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:hover,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:focus,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--smoothly-input-foreground))}";
-const SmoothlyInputStyle0 = styleCss$13;
+const styleCss$U = ".sc-smoothly-input-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-h{border:transparent solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-h,[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-h>input.sc-smoothly-input,[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within)>input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-h.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h .label.sc-smoothly-input{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h.floating-label.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.floating-label .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value.sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h.has-value .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[placeholder] .sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly].sc-smoothly-input-s>[slot=label],.sc-smoothly-input-h[readonly] .sc-smoothly-input-s>[slot=label],.has-value.sc-smoothly-input-h .label.sc-smoothly-input,[placeholder].sc-smoothly-input-h .label.sc-smoothly-input,[readonly].sc-smoothly-input-h .label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-h:not([show-label]):not(.show-label) .label.sc-smoothly-input{display:none}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);overflow:hidden;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input{position:relative;flex-grow:1;height:100%}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>label.sc-smoothly-input{left:var(--input-padding-side)}.sc-smoothly-input-h:not([show-label])>div.sc-smoothly-input>input.sc-smoothly-input{padding:0 var(--input-padding-side)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.ghost.sc-smoothly-input{position:absolute;box-sizing:border-box;align-content:center;height:100%;padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side)}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.ghost.sc-smoothly-input>div.value.sc-smoothly-input{display:inline;pointer-events:none;opacity:0}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>div.ghost.sc-smoothly-input>div.remainder.sc-smoothly-input{display:inline;pointer-events:none;opacity:0.5}.sc-smoothly-input-h>.smoothly-input-container.sc-smoothly-input>input.sc-smoothly-input{padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side);box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}.sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:none;z-index:2;cursor:pointer;padding:0.5rem}[invalid].sc-smoothly-input-h>.smoothly-invalid.sc-smoothly-input{display:flex}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:focus{outline:none}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:hover,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:focus,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--smoothly-input-background)) inset}.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill,.sc-smoothly-input-h>div.sc-smoothly-input>input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--smoothly-input-foreground))}";
+const SmoothlyInputStyle0 = styleCss$U;
 const SmoothlyInput = class {
     constructor(hostRef) {
@@ -9127,7 +9097,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: '2919cd51f7d7b3ba2176eddc1ff831816c92c987', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '5145e533a3a92d3af606feac8a293d3970c9ebf8', name: "start" }), index.h("div", { key: 'c3994ad092c25b645d28ee356abd6162b7e33f48', class: "smoothly-input-container" }, index.h("div", { key: 'd17593ce3fc28fd323aca60246cd5220be409d63', class: "ghost" }, index.h("div", { key: 'e36e8596487c7010d060895ff659a52ff6797c34', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '7c00c930e40ae6dc5d5af224235f41e1bcfbcabb', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '7575ecc7896b798e4005b42f7b6734344efe6657', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (index.h(index.Host, { key: 'd0d30f86a3191eef178aff469bce606f5b272756', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '53a7ace43ee6059f655a326b66e090e026e4bcca', name: "start" }), index.h("div", { key: '3e702fb3c868f4d900336285389467cc0b8c9414', class: "smoothly-input-container" }, index.h("div", { key: '970aa37994c030b2e1e4587295237530023f5e43', class: "ghost" }, index.h("div", { key: 'adc29884be96004a326089a9f1a66c5f06f4c181', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'b4beaad4c6ab63a50e025f9a79d09f0eb53c1e6c', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '4f0d41c10006a3099b4da5ab4755c69d74d4895f', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -9140,7 +9110,7 @@ const SmoothlyInput = class {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), index.h("label", { key: 'cf0a7fd7232276a7171dd4ab7e6a0415cb1cbf36', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '9bc5693244bb31c83ff78c101c6e1c324ceab39f' }))), index.h("smoothly-icon", { key: '9717625bea2486d73fe336222b1daa573fd5f381', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'c4517ef1496aaf425e4273264a85bc1fa0be7051', name: "end" })));
+            } }), index.h("label", { key: '7de82b4cae3a2095fa19f90437651a457f2b3626', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'dfb357d535afc67901c4a65eabf1fc97fa933078' }))), index.h("smoothly-icon", { key: '7719826df70ce91b60b28ca5ff0133afb5387d5e', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '060792b3b86d22a66da5fb719607e7e11b5c5f32', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9153,8 +9123,8 @@ const SmoothlyInput = class {
 };
 SmoothlyInput.style = SmoothlyInputStyle0;
-const styleCss$12 = ".sc-smoothly-input-checkbox-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-checkbox-h[looks=\"border\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-checkbox-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-checkbox-h{border:transparent solid 1px}.sc-smoothly-input-checkbox-h[looks=\"line\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-checkbox-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-checkbox-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-checkbox-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-checkbox-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-checkbox-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-checkbox-h,[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox,[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within)>input.sc-smoothly-input-checkbox{background:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-checkbox-h.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-checkbox-h.floating-label.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.floating-label .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.has-value.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.has-value .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[placeholder].sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[placeholder] .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[readonly].sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[readonly] .sc-smoothly-input-checkbox-s>[slot=label],.has-value.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,[placeholder].sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,[readonly].sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-checkbox{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-checkbox-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-checkbox{display:none}.sc-smoothly-input-checkbox-h{display:flex;align-items:center;flex-direction:row;position:relative;gap:.5rem;padding:0 var(--input-padding-side);background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-checkbox-h>smoothly-icon.sc-smoothly-input-checkbox{position:absolute;z-index:1}.sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1.25rem;width:1.25rem;border:1px solid black;display:block}.sc-smoothly-input-checkbox-h:not([readonly]),.sc-smoothly-input-checkbox-h:not([readonly])>*.sc-smoothly-input-checkbox{cursor:pointer}[readonly].sc-smoothly-input-checkbox-h,[readonly].sc-smoothly-input-checkbox-h>*.sc-smoothly-input-checkbox{cursor:not-allowed}[disabled].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox,[disabled].sc-smoothly-input-checkbox-h>smoothly-icon.sc-smoothly-input-checkbox{cursor:not-allowed;border-color:rgb(var(--smoothly-color-contrast), 0.3);color:rgb(var(--smoothly-color-contrast), 0.4)}[looks=\"transparent\"].sc-smoothly-input-checkbox-h{background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not([readonly]):focus-within{outline-color:transparent}";
-const SmoothlyInputCheckboxStyle0 = styleCss$12;
+const styleCss$T = ".sc-smoothly-input-checkbox-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-checkbox-h[looks=\"border\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-checkbox-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-checkbox-h{border:transparent solid 1px}.sc-smoothly-input-checkbox-h[looks=\"line\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-checkbox-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-checkbox-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-checkbox-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-checkbox-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-checkbox-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-checkbox-h,[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox,[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within)>input.sc-smoothly-input-checkbox{background:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-checkbox-h.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-checkbox-h.floating-label.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.floating-label .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.has-value.sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h.has-value .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[placeholder].sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[placeholder] .sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[readonly].sc-smoothly-input-checkbox-s>[slot=label],.sc-smoothly-input-checkbox-h[readonly] .sc-smoothly-input-checkbox-s>[slot=label],.has-value.sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,[placeholder].sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,[readonly].sc-smoothly-input-checkbox-h .label.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-checkbox{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-checkbox-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-checkbox{display:none}.sc-smoothly-input-checkbox-h{display:flex;align-items:center;flex-direction:row;position:relative;gap:.5rem;padding:0 var(--input-padding-side);background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-checkbox-h>smoothly-icon.sc-smoothly-input-checkbox{position:absolute;z-index:1}.sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1.25rem;width:1.25rem;border:1px solid black;display:block}.sc-smoothly-input-checkbox-h:not([readonly]),.sc-smoothly-input-checkbox-h:not([readonly])>*.sc-smoothly-input-checkbox{cursor:pointer}[readonly].sc-smoothly-input-checkbox-h,[readonly].sc-smoothly-input-checkbox-h>*.sc-smoothly-input-checkbox{cursor:not-allowed}[disabled].sc-smoothly-input-checkbox-h>input.sc-smoothly-input-checkbox,[disabled].sc-smoothly-input-checkbox-h>smoothly-icon.sc-smoothly-input-checkbox{cursor:not-allowed;border-color:rgb(var(--smoothly-color-contrast), 0.3);color:rgb(var(--smoothly-color-contrast), 0.4)}[looks=\"transparent\"].sc-smoothly-input-checkbox-h{background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not([readonly]):focus-within{outline-color:transparent}";
+const SmoothlyInputCheckboxStyle0 = styleCss$T;
 const SmoothlyInputCheckbox = class {
     constructor(hostRef) {
@@ -9221,7 +9191,7 @@ const SmoothlyInputCheckbox = class {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: '95a1522022f5a25c402a1563187cc1f483d88ec1', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: 'a8b3077019550c1ff4e44eb9a81f817d5390ee84', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '161bcd14b479d105d143137493a956ab82f46146', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: 'd7f7dfc554a0706ff045a83a95931d50ac124832' }, index.h("slot", { key: 'c6ac7cca4bdb1aa315d4e0ef1811b3c4ae3a655a' }))));
+        return (index.h(index.Host, { key: '7e9d8f10f1bb4607a3d6d01667ce46b8ab4863d6', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: 'fdc900044c63fe533744d5176893e9a8bcd6591d', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: '7a2c0e280b1e8455c87f717ac87b044bc5746b2b', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '9772a8094fa5f788859098f5eb4aca41149d9727' }, index.h("slot", { key: '050412eef281c0e64980baf7c1b4bae7b835d9b0' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9230,8 +9200,8 @@ const SmoothlyInputCheckbox = class {
 };
 SmoothlyInputCheckbox.style = SmoothlyInputCheckboxStyle0;
-const styleCss$11 = "[color=default].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-clear-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-clear-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-clear-h{display:inline}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-clear-h>a.sc-smoothly-input-clear,.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-clear-h>a.sc-smoothly-input-clear:empty,.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:empty{border-width:0}.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-clear{padding:0.8em;min-width:8em}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-clear{padding:0.6em}[size=icon].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{padding:0.5em}[type=button].sc-smoothly-input-clear-h>a.sc-smoothly-input-clear{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:100%}[size=large].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:130%}.sc-smoothly-input-clear-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-clear-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-clear-h{width:100%}[expand=full].sc-smoothly-input-clear-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-clear-h:not([fill=clear])>button.sc-smoothly-input-clear:hover,.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:focus-visible,[fill=outline].sc-smoothly-input-clear-h:active>button.sc-smoothly-input-clear::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:hover::before,[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:focus-within::before,[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-clear-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-clear:hover,.sc-smoothly-input-clear-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-clear:focus-visible,.sc-smoothly-input-clear-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-clear:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h.sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h .sc-smoothly-input-clear-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-clear-h{display:none}.sc-smoothly-input-clear-h{display:flex}.sc-smoothly-input-clear-h:not([display]){display:none}.sc-smoothly-input-clear-h[type=\"input\"].sc-smoothly-input-clear-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-clear-h.sc-smoothly-input-clear-s>smoothly-button>button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-clear-h{cursor:not-allowed}.sc-smoothly-input-clear-h[type=\"input\"]:hover.sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h[type=\"input\"]:hover .sc-smoothly-input-clear-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}";
-const SmoothlyInputClearStyle0 = styleCss$11;
+const styleCss$S = "[color=default].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-clear-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-clear-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-clear-h{display:inline}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-clear-h>a.sc-smoothly-input-clear,.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-clear-h>a.sc-smoothly-input-clear:empty,.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:empty{border-width:0}.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-clear{padding:0.8em;min-width:8em}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-clear{padding:0.6em}[size=icon].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{padding:0.5em}[type=button].sc-smoothly-input-clear-h>a.sc-smoothly-input-clear{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:100%}[size=large].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:130%}.sc-smoothly-input-clear-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-clear-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-clear-h{width:100%}[expand=full].sc-smoothly-input-clear-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-clear-h:not([fill=clear])>button.sc-smoothly-input-clear:hover,.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:focus-visible,[fill=outline].sc-smoothly-input-clear-h:active>button.sc-smoothly-input-clear::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:hover::before,[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:focus-within::before,[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-clear-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-clear:hover,.sc-smoothly-input-clear-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-clear:focus-visible,.sc-smoothly-input-clear-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-clear:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h.sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h .sc-smoothly-input-clear-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-clear-h{display:none}.sc-smoothly-input-clear-h{display:flex}.sc-smoothly-input-clear-h:not([display]){display:none}.sc-smoothly-input-clear-h[type=\"input\"].sc-smoothly-input-clear-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-clear-h.sc-smoothly-input-clear-s>smoothly-button>button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-clear-h{cursor:not-allowed}.sc-smoothly-input-clear-h[type=\"input\"]:hover.sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h[type=\"input\"]:hover .sc-smoothly-input-clear-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}";
+const SmoothlyInputClearStyle0 = styleCss$S;
 const SmoothlyInputClear = class {
     constructor(hostRef) {
@@ -9271,13 +9241,13 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '443c2519cefdff110d087244d4a153a9b1a2b408', title: this.tooltip }, index.h("smoothly-button", { key: 'c88f9fa84c854b37db34f498addddd95f71b628e', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '4dffca4a3499f5fbf79bf2d7a91a1e0e6a7f0052' }), index.h("smoothly-icon", { key: '331c0dcd767585f0711c1072580dff6d91f39e06', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: '17668319b54cc454ef29fda2fdef56f9718d1ce8', title: this.tooltip }, index.h("smoothly-button", { key: 'f1334ad4a05dba52ce919945a9648882eb7d94f2', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '8699712b8661a46231822acfa57fdd15a811b9af' }), index.h("smoothly-icon", { key: '050e6cc18db2f64bff841a4465b420de3df156c9', name: "close", size: "tiny" }))));
     }
 };
 SmoothlyInputClear.style = SmoothlyInputClearStyle0;
-const styleCss$10 = ".sc-smoothly-input-color-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-color-h[looks=\"border\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-color-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-color-h{border:transparent solid 1px}.sc-smoothly-input-color-h[looks=\"line\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-color-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-color-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-color-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-color-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-color-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-color-h,[looks=\"transparent\"].sc-smoothly-input-color-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-color-h>input.sc-smoothly-input-color,[looks=\"transparent\"].sc-smoothly-input-color-h:not(:focus-within)>input.sc-smoothly-input-color{background:transparent}[looks=\"transparent\"].sc-smoothly-input-color-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h .label.sc-smoothly-input-color{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-color-h.floating-label.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.floating-label .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.has-value.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.has-value .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[placeholder].sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[placeholder] .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[readonly].sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[readonly] .sc-smoothly-input-color-s>[slot=label],.has-value.sc-smoothly-input-color-h .label.sc-smoothly-input-color,[placeholder].sc-smoothly-input-color-h .label.sc-smoothly-input-color,[readonly].sc-smoothly-input-color-h .label.sc-smoothly-input-color,.sc-smoothly-input-color-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-color{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-color-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-color{display:none}.sc-smoothly-input-color-h{display:flex;position:relative;background-color:rgb(var(--smoothly-input-background));align-items:center;justify-content:center}.sc-smoothly-input-color-h>smoothly-input.sc-smoothly-input-color{width:100%;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-color-h div.color-sample.sc-smoothly-input-color{height:2em;width:3em;margin-right:0.5rem;background-color:var(--hexCode);outline:1px solid rgb(var(--smoothly-input-border));border-radius:3px}.sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color{padding-right:var(--input-padding-side)}[readonly].sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color{filter:opacity(60%)}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color{background-color:rgb(var(--smoothly-input-background));position:absolute;padding:1em 1em 1em 0;top:calc(var(--element-height) + .8em);left:0;box-sizing:border-box;z-index:10;border:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color::before{content:\"\";transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border));position:absolute;z-index:100;top:0em}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color>smoothly-toggle-switch.sc-smoothly-input-color{margin-left:auto;margin-right:1em;margin-bottom:1em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color{padding:.5em 0}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color label.sc-smoothly-input-color{width:4em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-thumb{background-color:#777}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-thumb{background-color:#777}";
-const SmoothlyInputColorStyle0 = styleCss$10;
+const styleCss$R = ".sc-smoothly-input-color-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-color-h[looks=\"border\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-color-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-color-h{border:transparent solid 1px}.sc-smoothly-input-color-h[looks=\"line\"].sc-smoothly-input-color-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-color-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-color-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-color-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-color-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-color-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-color-h,[looks=\"transparent\"].sc-smoothly-input-color-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-color-h>input.sc-smoothly-input-color,[looks=\"transparent\"].sc-smoothly-input-color-h:not(:focus-within)>input.sc-smoothly-input-color{background:transparent}[looks=\"transparent\"].sc-smoothly-input-color-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h .label.sc-smoothly-input-color{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-color-h.floating-label.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.floating-label .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.has-value.sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h.has-value .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[placeholder].sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[placeholder] .sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[readonly].sc-smoothly-input-color-s>[slot=label],.sc-smoothly-input-color-h[readonly] .sc-smoothly-input-color-s>[slot=label],.has-value.sc-smoothly-input-color-h .label.sc-smoothly-input-color,[placeholder].sc-smoothly-input-color-h .label.sc-smoothly-input-color,[readonly].sc-smoothly-input-color-h .label.sc-smoothly-input-color,.sc-smoothly-input-color-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-color{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-color-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-color{display:none}.sc-smoothly-input-color-h{display:flex;position:relative;background-color:rgb(var(--smoothly-input-background));align-items:center;justify-content:center}.sc-smoothly-input-color-h>smoothly-input.sc-smoothly-input-color{width:100%;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-color-h div.color-sample.sc-smoothly-input-color{height:2em;width:3em;margin-right:0.5rem;background-color:var(--hexCode);outline:1px solid rgb(var(--smoothly-input-border));border-radius:3px}.sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color{padding-right:var(--input-padding-side)}[readonly].sc-smoothly-input-color-h smoothly-icon[name=options-outline].sc-smoothly-input-color{filter:opacity(60%)}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color{background-color:rgb(var(--smoothly-input-background));position:absolute;padding:1em 1em 1em 0;top:calc(var(--element-height) + .8em);left:0;box-sizing:border-box;z-index:10;border:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color::before{content:\"\";transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border));position:absolute;z-index:100;top:0em}.sc-smoothly-input-color-h>div.rgb-sliders.sc-smoothly-input-color>smoothly-toggle-switch.sc-smoothly-input-color{margin-left:auto;margin-right:1em;margin-bottom:1em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color{padding:.5em 0}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color label.sc-smoothly-input-color{width:4em}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(255, var(--rgb-g), var(--rgb-b)), rgb(0, var(--rgb-g), var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-moz-range-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=r].sc-smoothly-input-color::-webkit-slider-thumb{background-color:red}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), 255, var(--rgb-b)), rgb(var(--rgb-r), 0, var(--rgb-b)))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-moz-range-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=g].sc-smoothly-input-color::-webkit-slider-thumb{background-color:green}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to left, rgb(var(--rgb-r), var(--rgb-g), 255), rgb(var(--rgb-r), var(--rgb-g), 0))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-moz-range-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=b].sc-smoothly-input-color::-webkit-slider-thumb{background-color:blue}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right in hsl longer hue, red, red)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=h].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), 100%, 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, hsl(var(--hsl-h), 0%, 50%), hsl(var(--hsl-h), 100%, 50%))}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-moz-range-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=s].sc-smoothly-input-color::-webkit-slider-thumb{background-color:hsl(var(--hsl-h), var(--hsl-s), 50%)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-runnable-track{background:linear-gradient(to right, black, white)}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-moz-range-thumb{background-color:#777}div.rgb-sliders.sc-smoothly-input-color smoothly-input-range.sc-smoothly-input-color>div.sc-smoothly-input-color>input[name=l].sc-smoothly-input-color::-webkit-slider-thumb{background-color:#777}";
+const SmoothlyInputColorStyle0 = styleCss$R;
 const SmoothlyInputColor = class {
     constructor(hostRef) {
@@ -9421,7 +9391,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: '7f1cdee26ce9429dcfce8d03d876c66c4bc6b4ad', style: {
+        return (index.h(index.Host, { key: '06ccbfbb8103fb4157b7aab79cdd4b275b477bc0', 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)}`,
@@ -9430,7 +9400,7 @@ const SmoothlyInputColor = class {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, index.h("smoothly-input", { key: '56287469e8bf02977505c701fe5ed71354928d76', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'a9ab7e21bfc75d25ab1000deb2270fab7dbdf864' })), index.h("div", { key: 'd0512a2df8b8a1de5e64729c616bccc9c89bb296', class: "color-sample" }), index.h("smoothly-icon", { key: '06289ee0bec2159be080b61ace4959d9c51b34bc', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '8133f8753df1b4df9f64783aead0f08c5755932e' }, index.h("slot", { key: '1477cf5aa7ff10134e84eb8807d139ff256d6e60', name: "end" })), this.open && !this.readonly && (index.h("div", { key: '8b190e294cc1b315ad8d3fd769afd544546d914b', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '39c25111b8a835258d2573a9901df7fc632242e4', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
+            } }, index.h("smoothly-input", { key: 'c010412a9135a0a2ea6b4c766260fc0f720eaf5b', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'c28a3ec9985cefd718787b74c30f8434ac07ad5c' })), index.h("div", { key: '6ef1c860d2d6431fccea0aebaad5d930753cd9af', class: "color-sample" }), index.h("smoothly-icon", { key: '9184753b181267e611d19c51709aa1c233fc89dc', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '85be89a51fb536882133d724d81d8d29d794e1aa' }, index.h("slot", { key: 'd44ffd1cabe83efb3f1a727710737ff1c75bcb28', name: "end" })), this.open && !this.readonly && (index.h("div", { key: 'e4fd1fd66897f84c7b82b594cdc4afa794c245c1', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '2b8ab54580f8a96a72ee6b762616b061d2782d73', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9444,13 +9414,13 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c2fe23975b38b280a677c518054c4e60e6af2e2c' }, index.h("h2", { key: 'd9c3935d08df05cdf004cad00512a228c39c642e' }, "Color"), index.h("smoothly-input-color", { key: 'ffafa281cf391ee7d741055b4baae0dac8fe6a7c', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: '233cd244e8fbd24d8d36b67afc5e32c74f9c84e9' }, index.h("h2", { key: 'd3245bbee2dd2b9af5218bb81433138ca9cef085' }, "Color"), index.h("smoothly-input-color", { key: 'de7d138d123d61aaf0404b64404f335d399423ec', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
-const styleCss$$ = ".sc-smoothly-input-date-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-date-h[looks=\"border\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-h{border:transparent solid 1px}.sc-smoothly-input-date-h[looks=\"line\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-date-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-date-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-h,[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-h>input.sc-smoothly-input-date,[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within)>input.sc-smoothly-input-date{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-h.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .label.sc-smoothly-input-date{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-h.floating-label.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.floating-label .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder] .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly] .sc-smoothly-input-date-s>[slot=label],.has-value.sc-smoothly-input-date-h .label.sc-smoothly-input-date,[placeholder].sc-smoothly-input-date-h .label.sc-smoothly-input-date,[readonly].sc-smoothly-input-date-h .label.sc-smoothly-input-date,.sc-smoothly-input-date-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date{display:none}.sc-smoothly-input-date-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date{width:100%;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date>div.sc-smoothly-input-date>input.sc-smoothly-input-date{cursor:pointer}[readonly].sc-smoothly-input-date-h,[readonly].sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date>div.sc-smoothly-input-date>input.sc-smoothly-input-date{cursor:not-allowed}[looks=transparent].sc-smoothly-input-date-h smoothly-input.sc-smoothly-input-date{outline:none}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));min-width:18em}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>smoothly-calendar.sc-smoothly-input-date::before{content:\"\";box-sizing:border-box;position:absolute;top:1px;z-index:9;transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-h>span.icons.sc-smoothly-input-date{display:flex;flex-direction:row;align-items:center}@media screen and (min-width: 400px){.sc-smoothly-input-date-h>nav.sc-smoothly-input-date{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));max-width:22em}}";
-const SmoothlyInputDateStyle0 = styleCss$$;
+const styleCss$Q = ".sc-smoothly-input-date-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-date-h[looks=\"border\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-h{border:transparent solid 1px}.sc-smoothly-input-date-h[looks=\"line\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-date-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-date-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-h,[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-h>input.sc-smoothly-input-date,[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within)>input.sc-smoothly-input-date{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-h.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .label.sc-smoothly-input-date{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-h.floating-label.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.floating-label .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder] .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly] .sc-smoothly-input-date-s>[slot=label],.has-value.sc-smoothly-input-date-h .label.sc-smoothly-input-date,[placeholder].sc-smoothly-input-date-h .label.sc-smoothly-input-date,[readonly].sc-smoothly-input-date-h .label.sc-smoothly-input-date,.sc-smoothly-input-date-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date{display:none}.sc-smoothly-input-date-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date{width:100%;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date>div.sc-smoothly-input-date>input.sc-smoothly-input-date{cursor:pointer}[readonly].sc-smoothly-input-date-h,[readonly].sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date>div.sc-smoothly-input-date>input.sc-smoothly-input-date{cursor:not-allowed}[looks=transparent].sc-smoothly-input-date-h smoothly-input.sc-smoothly-input-date{outline:none}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));min-width:18em}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>smoothly-calendar.sc-smoothly-input-date::before{content:\"\";box-sizing:border-box;position:absolute;top:1px;z-index:9;transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-h>span.icons.sc-smoothly-input-date{display:flex;flex-direction:row;align-items:center}@media screen and (min-width: 400px){.sc-smoothly-input-date-h>nav.sc-smoothly-input-date{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));max-width:22em}}";
+const SmoothlyInputDateStyle0 = styleCss$Q;
 const SmoothlyInputDate = class {
     constructor(hostRef) {
@@ -9536,13 +9506,13 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '6955944dd414b37f64792071b7cf07f18ed38ed3' }, index.h("smoothly-input", { key: '334571bf04611a652c3feffe1e5faa5c7b1f26c0', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '537241a6d277b3d97892e6d2a6e7785d1445dd21' }, index.h("smoothly-input", { key: 'd6b4712b11564007b357279d0ef6353353f2ead2', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, index.h("slot", { key: '7540f9c4b099fd8a659cc1e39b2a1195b0a7f59a' })), index.h("span", { key: 'ebdb6a365e74a5c635f63811ce309c160d5af35d', class: "icons" }, index.h("slot", { key: 'e5ebb2ef8dbd85a62c6a71e93fd41886ee9ac308', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '6924bc97b9f03e84bc449039f33232b05fc15729' }, index.h("smoothly-calendar", { key: '68964bdc3c4fc4a7e8a84bec206ecb39ae65947c', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, index.h("slot", { key: '9b353cf3658a2017a6fdf44ea00853c8cf22958e' })), index.h("span", { key: 'b2d0c1951f0a6c92f8ec7b48a1b049eddc16208d', class: "icons" }, index.h("slot", { key: '4d1f3d6771d6ee0ea13a7d709740b76350a9ac00', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '33fe4e270a7dd48a48a66205342e79c9cf505e22' }, index.h("smoothly-calendar", { key: '2084bd5d0ef9575c45f2e52504c5bef6a076dba2', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, index.h("div", { key: '27fac3ecaaebb4ce91f4c6e7503fb9308f3bb6f3', slot: "year-label" }, index.h("slot", { key: '2d3a5016114b92a0036321efc3fa8b86006ed7c5', name: "year-label" })), index.h("div", { key: '47124124ab93b08722058f150101093abbbbb950', slot: "month-label" }, index.h("slot", { key: '06fe48332f022c57e380381b02f30889cad73a39', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: 'c6c5f4e7f6c4d840251e360667154deb2ea4d1f8', slot: "year-label" }, index.h("slot", { key: 'e1ed184a3b88e62306ff446d4484ff1b44dde2d3', name: "year-label" })), index.h("div", { key: '89136139b0624ea7f160615ad12e7f66ae83d0bb', slot: "month-label" }, index.h("slot", { key: '6a4ba7bacf62d96fc09ed3fb8aa28dcc071504f5', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9551,8 +9521,8 @@ const SmoothlyInputDate = class {
 };
 SmoothlyInputDate.style = SmoothlyInputDateStyle0;
-const styleCss$_ = ".sc-smoothly-input-date-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-date-range-h[looks=\"border\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-range-h{border:transparent solid 1px}.sc-smoothly-input-date-range-h[looks=\"line\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-range-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-date-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-date-range-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h>input.sc-smoothly-input-date-range,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within)>input.sc-smoothly-input-date-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-range-h.floating-label.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.floating-label .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder] .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly] .sc-smoothly-input-date-range-s>[slot=label],.has-value.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[placeholder].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[readonly].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-range{display:none}.sc-smoothly-input-date-range-h{position:relative;display:flex;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range>div.sc-smoothly-input-date-range>input.sc-smoothly-input-date-range{cursor:pointer}[readonly].sc-smoothly-input-date-range-h,[readonly].sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range>div.sc-smoothly-input-date-range>input.sc-smoothly-input-date-range{cursor:not-allowed}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));max-width:22em;min-width:18em}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>smoothly-calendar.sc-smoothly-input-date-range::before{content:\"\";position:absolute;box-sizing:border-box;top:1px;left:-7em;z-index:9;transform:translate(10em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;width:100%;background-color:var(--smoothly-input-background);border-radius:0.25rem;cursor:pointer}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{min-width:15rem;width:100%;background-color:transparent;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}.sc-smoothly-input-date-range-h>span.icons.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}";
-const SmoothlyInputDateRangeStyle0 = styleCss$_;
+const styleCss$P = ".sc-smoothly-input-date-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-date-range-h[looks=\"border\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-range-h{border:transparent solid 1px}.sc-smoothly-input-date-range-h[looks=\"line\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-range-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-date-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-date-range-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h>input.sc-smoothly-input-date-range,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within)>input.sc-smoothly-input-date-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-range-h.floating-label.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.floating-label .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder] .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly] .sc-smoothly-input-date-range-s>[slot=label],.has-value.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[placeholder].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[readonly].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-range{display:none}.sc-smoothly-input-date-range-h{position:relative;display:flex;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range>div.sc-smoothly-input-date-range>input.sc-smoothly-input-date-range{cursor:pointer}[readonly].sc-smoothly-input-date-range-h,[readonly].sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range>div.sc-smoothly-input-date-range>input.sc-smoothly-input-date-range{cursor:not-allowed}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));max-width:22em;min-width:18em}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>smoothly-calendar.sc-smoothly-input-date-range::before{content:\"\";position:absolute;box-sizing:border-box;top:1px;left:-7em;z-index:9;transform:translate(10em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;width:100%;background-color:var(--smoothly-input-background);border-radius:0.25rem;cursor:pointer}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{min-width:15rem;width:100%;background-color:transparent;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}.sc-smoothly-input-date-range-h>span.icons.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}";
+const SmoothlyInputDateRangeStyle0 = styleCss$P;
 const SmoothlyInputDateRange = class {
     constructor(hostRef) {
@@ -9648,12 +9618,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: '888acc7f9b13d584516df9b02b00a6d1d355bc67', tabindex: 0 }, index.h("section", { key: '4d48b609e57b5efb08d6a959e5e6493590a4d958', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '9b08f7f4b55ee7c47caae23c60557fee2474d7e9', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (index.h(index.Host, { key: '2e8c505b46587906c275c87e0af9632050377e6f', tabindex: 0 }, index.h("section", { key: '56f3f315fa60e4b6d7230697901f3d34a60fe6b1', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '09e0e316a5f498ea0fe99cb0ca12a5033dccba3c', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
                 ? `${format(this.start, "date", locale)} — ${format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, index.h("slot", { key: '05a2ad08ac0a1ffafc57b296c6b307a3e94d93b1' }))), index.h("span", { key: 'a30ab3b21738225028eeb8ec224c1e57e6867d5b', class: "icons" }, index.h("slot", { key: 'dc9950b0053872d98e537dc2b52959ec804dc88e', name: "end" })), this.open && (index.h("nav", { key: '957af34215a9aed9c77a287bb0c9dd0b38130a2e' }, index.h("smoothly-calendar", { key: '4ef33a937d1e3bd08769284d12678ae264d32710', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: 'a80798ad483cc7bf3c941d661e0da713f7905646' }))), index.h("span", { key: '1cc09e3db78b7cb703783115cad043f63066d0a3', class: "icons" }, index.h("slot", { key: 'dd11c58b1f8a99ee26641bc6b716daa0d619a469', name: "end" })), this.open && (index.h("nav", { key: '4adfdcf4721a35794cff32cdc944c5fe3c6d1de9' }, index.h("smoothly-calendar", { key: '6fe6d33dded81926a71c964126b6f405e673c469', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9674,8 +9644,8 @@ const SmoothlyInputDateRange = class {
 };
 SmoothlyInputDateRange.style = SmoothlyInputDateRangeStyle0;
-const styleCss$Z = ".sc-smoothly-input-demo-h{display:flex;flex-direction:column;margin-top:2em;margin-bottom:10rem}smoothly-input-demo-standard.sc-smoothly-input-demo{margin-bottom:2rem}div.inputs.sc-smoothly-input-demo{margin:auto;width:50%}div.inputs.sc-smoothly-input-demo>h2.sc-smoothly-input-demo:not(:first-child){padding-top:3em;margin-top:3em;border-top:1px solid black}.checkbox-group.sc-smoothly-input-demo{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--smoothly-input-background))}.select-div.sc-smoothly-input-demo{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}.select-div.sc-smoothly-input-demo>smoothly-color.sc-smoothly-input-demo>*.sc-smoothly-input-demo,.select-div.sc-smoothly-input-demo>*.sc-smoothly-input-demo{flex-basis:49%}";
-const SmoothlyInputDemoStyle0 = styleCss$Z;
+const styleCss$O = ".sc-smoothly-input-demo-h{display:flex;flex-direction:column;margin-top:2em;margin-bottom:10rem}smoothly-input-demo-standard.sc-smoothly-input-demo{margin-bottom:2rem}div.inputs.sc-smoothly-input-demo{margin:auto;width:50%}div.inputs.sc-smoothly-input-demo>h2.sc-smoothly-input-demo:not(:first-child){padding-top:3em;margin-top:3em;border-top:1px solid black}.checkbox-group.sc-smoothly-input-demo{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--smoothly-input-background))}.select-div.sc-smoothly-input-demo{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}.select-div.sc-smoothly-input-demo>smoothly-color.sc-smoothly-input-demo>*.sc-smoothly-input-demo,.select-div.sc-smoothly-input-demo>*.sc-smoothly-input-demo{flex-basis:49%}";
+const SmoothlyInputDemoStyle0 = styleCss$O;
 const SmoothlyInputDemo = class {
     constructor(hostRef) {
@@ -9684,23 +9654,23 @@ const SmoothlyInputDemo = class {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (index.h(index.Host, { key: 'f5fb9f6b4974bc45606cf2d8c8e36d1df5615968' }, index.h("smoothly-input-demo-standard", { key: '76b7f4807acddd7a1abaafc15dd2a831023b1e2d' }), index.h("div", { key: 'cf8fa718aef87f25b5e808ab2e6208b1aaee69ea', class: "inputs" }, index.h("h2", { key: '19b8c7a5a6bc49fb40aee9e84ac9773c5def7366' }, "Calendar"), index.h("smoothly-input-date", { key: '927e3a5305f7ed3b7f0b968580604a8d647d6cab', name: "some-date" }, "Calendar"), index.h("h2", { key: '1764deed7d46371f2e4f788916bab240d4f239d8' }, "Date Range"), index.h("smoothly-input-date-range", { key: '9f5201fc2ee08446de0f9d76651db829866f848c', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: '7376ad2973f5925d66e859bedefde669fa1150a8', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index.h("smoothly-input-reset", { key: '4b596600cc7f285bc256da0e745797d8d7901c1d', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '4a5a7f575ded4a0279e9281712dc7e89a2d80bda', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (index.h(index.Host, { key: '2246e64ca0039a593a5e79c1b3cbec9f6cb61cd2' }, index.h("smoothly-input-demo-standard", { key: '2b37d1d772346558fc9877495c98ec484e443d24' }), index.h("div", { key: '989abdad396917b2bdfe9bc11140a1293546ac5c', class: "inputs" }, index.h("h2", { key: 'dcf89a34ee6e6397e5f714121724ef563dd3fd28' }, "Calendar"), index.h("smoothly-input-date", { key: '8e65b556c3fcf1a39323dd3a33d12a30b81e1dcd', name: "some-date" }, "Calendar"), index.h("h2", { key: '3cb4035f84892162377f96c19ee73680e03125d0' }, "Date Range"), index.h("smoothly-input-date-range", { key: '064bc75323dc8e65ba0676eb8c70c1a2f8a9b9d6', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: 'ae142e649ad82d43e4f1b8cb465ced91a58350e5', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index.h("smoothly-input-reset", { key: 'd3363179e7f9bff0745df55aa55861f75741b2fb', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '4000f0d117f23321ed547f563d3480d7c4630cf3', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, index.h("smoothly-input-clear", { key: '0a6fcc2bf611100b030151f697a92c265cab70ce', slot: "end", size: "icon" })), index.h("h2", { key: '6dff02322fe2e6d046ab87783ee10e2bf8811846' }, "Date"), index.h("smoothly-input-date", { key: '12d8d46d4b3b6c15edaf3dc57b42f8b8ae2e7673' }, "Date"), index.h("smoothly-input-date", { key: 'e29de3a00b02eddf2d1b12bacd3cac2fcd4ba21d', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: 'da1503dc2c330128d6c45cf8ddae57ddfa07777a', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '1928e5521e5f057770e55cb01779f4db5ea2b969', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: 'd2a7c44b60f34eae763e9d2ab0a1638116cb4ab6', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: 'c8f3b4d83b9c7b7e9bc7a77e69f5a5f62574f383', slot: "end", size: "icon" })), index.h("h2", { key: '3fd8792c958f964c72268ea7864e559b23ed0437' }, "Select"), index.h("div", { key: '3a9eb0b50df2f894a6bdd21b929ae6359c861cd1', class: "select-div" }, index.h("smoothly-input-select", { key: '0cfb6c169c267de816dfa241d60fe276e240ab8f', name: "select-dessert", looks: "border" }, index.h("label", { key: 'dc2e67f25a9e838324b0af86086fb383f62ed885', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: 'ffb1b308014b5860cd6211fd474b5fd0b324004b', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: 'ff46f80bed769056e4724b1aa349ab8df6316277', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '7234bcf8495a875b320b44b3cf685960c16994b6', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '368eb6a25a0cab467d6c15ae162d80f9fd2b694d', value: "4" }, "Cookie"), index.h("smoothly-item", { key: 'ba54e39b1ef822b404c7b41d8ede588efffb9379', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '3508452be1107a52a6eae701cfefddb7430a0f83', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '8fbb58174a3ff374d1b6f9ecb41f4eafc42ac3df', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '442fd11b7bed0671dbad3d3c6513f610f068263b', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: 'c25ff454d762fbf5c3753c940c5f19270f77c930', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '3eab5157ea0aced4df728508eceddd9de2108c41', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: 'e091e11fac9863053119399195eb7b151d40d5b1', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: 'f951cf1b3c8921fb7e5a56ce717cbc5ce9ee2105', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: 'd218c0a625bf06749ce47c6771e3d551080c9792', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '7dcf5a03476f818a5843034813da35c185631322', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '27b8c6510f419ed030987fc6279121336549e541', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'a4fee9f21deca306d278d4f9e79107ae6604921b', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '72dffbe468f90f77d86aced927ce371995d5f485', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '1cdfcffbfb7d105ba775827736dea14298c449cf', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '4918e8c669062246ebbc6646b40e3f1b63c03744', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '863ce71edfa5a6812ec68f4d91a5b93bd03cb02a', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '71b4cbd7e1d2f4ad2dd1e1e81f983eb5af57320d', value: "folder", selected: true }, index.h("smoothly-icon", { key: '85a9c63762b5a906e74bd14472caf542308b12fc', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'e376aff6f1f203274cc4c7e5185f429f2ab2413a', value: "camera" }, index.h("smoothly-icon", { key: 'acf038728fb05e63e8ca9a23d86ddfa775e75c88', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'e5e3c9cdbee2bd5d25405bb00bc8a1b0a28bbcbe', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'e8fb5709c0e79b9e38580a16f81fb1d7bbc4a37a', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, index.h("smoothly-input-clear", { key: 'da0845b453ca7c9a74ac953f88730320d62f8f29', slot: "end", size: "icon" })), index.h("h2", { key: '28cf510595b361e9193e7d1770b3cf0d55595083' }, "Date"), index.h("smoothly-input-date", { key: '3de03030bcec5baf9361b3bbb5af388169a596f0' }, "Date"), index.h("smoothly-input-date", { key: '086585a5f1059372089e8c8ce95bbc6dd350f43a', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '6da09b55f2b5dfb95dc08b330c6885f0f79649be', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'bf5060f5877a64db06fb01b1b64f8eaee99814e6', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '56de828757eb015c17065914a4ee54ed0d36879e', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '98396400e48fce1ec11b78e533c05f1e78663fba', slot: "end", size: "icon" })), index.h("h2", { key: '4ee32f44346c24d6221af7fd6459ffaf79f17add' }, "Select"), index.h("div", { key: '3d59b743af200f5af22c96cc2ba5dd40a4833bf0', class: "select-div" }, index.h("smoothly-input-select", { key: '87361abaf048809adb5feb041175652e966750ff', name: "select-dessert", looks: "border" }, index.h("label", { key: '89bb70bbd9d666f4f06d3d9dc3a52e226fc313ed', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '02da82218453add4004d7540dfb649b216db39a4', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '07fa67c7f191ed17838faded52c17596c33193a5', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '763e38c41ca9573c4e1c24e1ecaaf2fe2058cd06', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '99a7d6d917fec0e472b56258244ec71b54ad169d', value: "4" }, "Cookie"), index.h("smoothly-item", { key: 'f570819e108519b81cfb82e52c41b73b5d4f48d5', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '4f0774466b0bfa42dc5b8505acacdbcef3349fd6', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '06273b8350dc715553ae497082c4dc1b7a389319', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '4dde96a80a23c0e1f23e2e1b6046864b35e5b8c9', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: 'de59c8f6721e5017a9453e135fa13802121889e2', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '3a64640ee2a8cea53b5c1f072681907013909289', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '5f6c0ac3a1e4bfe54913c0fb859e531564651c30', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '254e618bf4f3eeb158d4e605a3264508af1ca4e0', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: 'eb7fc43a664c7ae8301772bc843b2207dec0a0f5', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '8b1e6c19edd6b069ca4e91f6d564e5d658a465ba', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '7008f3aaa631954f12d11caebf66636efc83673e', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '2e186069d445222f213ff973d5dd6faa428868a3', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '0628ed3c08639eac2cce4ac94884a9a63b93eb2a', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '80de67a9b068fb7e60068c6e14ce4b50ec686408', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: 'e87b478d6d04f1aa9eb076667b5b92d7c97da371', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: 'e9bf36baedbb296c8bef5aeecded8c933708186e', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'f69168796d350c9bb0549ba66159f2324ed7d641', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'c1dc8699652a2964af9e59f857ee6aed811ebcc3', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '42235a47c44cb36945e009258852123ec24c0e3c', value: "camera" }, index.h("smoothly-icon", { key: 'e4d4370e712660a56866ef6a56909c1fc13ddbd9', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'f8bb5ab1ae61724510f197d2508f580ff9f2d803', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '4465f00632cdea82f17f25c55c88b6f9617626d0', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: '9e3f99927f6e54ee05c91f8aa5cf7f6ebcf69998', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '07d0a34094bc6ab9fbef7e4dbcdce146042b2b88', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: '152ef005ce3793e97354445a860ad68cbee8ab33', value: "1" }, "January"), index.h("smoothly-item", { key: 'f7e641e238be611474914f9019d8f0c04e1748c4', value: "2" }, "February"), index.h("smoothly-item", { key: 'cc5d5bd3eca19b02bcd890569bba07742dcedc04', value: "3" }, "March"), index.h("smoothly-item", { key: '5c3c1adbb28372473d78d5358025f00c2f179eca', value: "4" }, "April"), index.h("smoothly-item", { key: 'e67ff66dc999b688481fdfdd3f9c401ff0ae308f', value: "5" }, "May"), index.h("smoothly-item", { key: '24fef6b4773f4a541443ed337e9efd6aadd40ad3', value: "6" }, "June"), index.h("smoothly-item", { key: 'd870d078612432334a40908b71d4c80969f6c307', value: "7" }, "July"), index.h("smoothly-item", { key: '0476e0648671e4d40a942a9f0b3d4ceac4c00e70', value: "8" }, "August"), index.h("smoothly-item", { key: '1036c20d89e5e8d2239a3e159d709c6146e5bffa', value: "9" }, "September"), index.h("smoothly-item", { key: '284995044dbfcc51e19d5f0df1573c56b2e4c6eb', value: "10" }, "October"), index.h("smoothly-item", { key: '2db4b959ef88bb76743c5244da2b658e56a92b63', value: "11" }, "November"), index.h("smoothly-item", { key: '32da23e740fa20b0bbe4e659a9676057d0e9aa73', value: "12" }, "December"))), index.h("h2", { key: '156972cad40cac5ffb02ace653cf02befacd6b6a' }, "Duration"), index.h("smoothly-input", { key: 'c94595a4b896161c04d02d6215ba538e29edcdc3', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: 'ca20e04f28b44a43ec6c82224000d37569a4fd73', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '80c630f64f89b562ebe2d24191fb8b83f0c62d97', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'd340b3b9d21819109c7a35684db9ff08ad9e578e', value: "1" }, "January"), index.h("smoothly-item", { key: 'a13d72f788c8cf6a5766afc35be2d07b35462459', value: "2" }, "February"), index.h("smoothly-item", { key: '92654e2c8018d4d5e9fe4a0635cbf0f3b9c78c9f', value: "3" }, "March"), index.h("smoothly-item", { key: '00462ca4544ba9e745e634c7d8c38339d8885105', value: "4" }, "April"), index.h("smoothly-item", { key: '94a413e7323347e17d853e69a8e09d4c5dd3a31e', value: "5" }, "May"), index.h("smoothly-item", { key: 'e5bf44718b1d6745706ec1b5cbec379e9f18455c', value: "6" }, "June"), index.h("smoothly-item", { key: '7949c2017dd026ff8d822ca8203af3d06809561d', value: "7" }, "July"), index.h("smoothly-item", { key: 'dbefc27eb9c51b72513b8c0a3716984b2cf3bbda', value: "8" }, "August"), index.h("smoothly-item", { key: '6acc28561cfafcaaed68ca73d72ea4eab9b842ed', value: "9" }, "September"), index.h("smoothly-item", { key: 'c738376274d3e2d06c905ec2a1e0bcb0036a0bba', value: "10" }, "October"), index.h("smoothly-item", { key: '492b1b3e17674e88e73511d2e6f23a65c604d8bf', value: "11" }, "November"), index.h("smoothly-item", { key: '80f4ee0c7f048c42540d0935fdf87592a1517364', value: "12" }, "December"))), index.h("h2", { key: '874812121057cd11b6f798c6231ab2cc53f4f198' }, "Duration"), index.h("smoothly-input", { key: '3d2b537c6a23dbdbad77002fe505a94f6ff48e41', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), index.h("smoothly-input", { key: '6866dd633ddcf17b103ec8cbc5710e52862a2d4f', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), index.h("smoothly-input", { key: '31c69494b9b20b04abe2cf57ccb7d695fde2381c', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), index.h("h2", { key: 'd0b5633f6333132c4260b3d1cbce7af063e56f6d' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '7b981f8d3094db4beceb49819e39cd64d3a58cdc', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index.h("h2", { key: '4a6cb992d7a790ac8f90a9457624b39dde605f1f' }, "Identifiers"), index.h("smoothly-input", { key: 'ea8c8c5733677215ebe8bb58dbdb003e0fe2ffcc', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '59d0e1b81408577c66471703272024ea00e65b23', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '0c37d4cc4c095af41847d0481dbaa758344a1f44', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '1f007396c2ce2eeb4b808f6cf685101ecaaa2b39', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'e98f7782122213569d5849aeb51bebef7dc76e1a', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '10370fde30ddc40fb1756fda0a13473ef6b54c5c' }, "Input Alternatives"), index.h("smoothly-input", { key: 'b6477cffb527fe7aadefc72fcea14edec8d9be52', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '8e74243a055105befb639cd9349a8851762d5634', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '3233f8e9ffa51aabef8677a3c6b9e340099fc76c', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '8b44ab9254c128952ce3403930cd0d2b33869f67', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '874ea98d4329a8de0179ab35738439c988c5795d', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '320e158a5b8e453b260a4641dcdd7e7eebb735ed', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '3842e1d2cdb6114319aa7997123e9643b9749efc', placeholder: "test" }), index.h("smoothly-input-submit", { key: '06ce532c4703c3c798c91c9416b21ecddd6db84b', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '2dbce1c8a6d42eba1c40ced7750d4728b999210e' }, "Smoothly checkboxes"), index.h("div", { key: 'a1804c8d0644e13a196a37ae1eec78d27f2aedb3', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'a420ffd579f723297c69ad49ea6cb0ee0c9596de', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '249c0ba3c8745e8333f8b535d4b409f7b37473df', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: 'd784dcad4cf36a3ac7c1de6b01fc2563cee5844d', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '2d547862dc1f1e401ce0e28161ec22518bf50daf', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '660cbd34a71a2f3db60f4bcb71f84d65b0a2e26d', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: 'c611d17fe695f639bece084d60334ec600c29dd9', name: "third-checkbox" }, "3rd")), index.h("h4", { key: '472ff0bc98b21b279f81b6023208b4dbed53da87' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '8d5be0841845fb0077a09d130231ab53c4bd4fb9', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '1405d82a5326946e9b75aaa044c493101cd10cf6', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '0de40dc5cd9ed9c8fc179603c99b506969de235b', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '7a580563ae23ff537bbd3d24949b4c5293301919', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '802ac68270881b22463edb41b1993da3523caf24', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '3fc3d97e8a222e4bb4ed345cc3fd2dc722b15915', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '12edb81d592e715090fb863ba1f813b829eb6c25', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '6eefa5acda608df32bf346f4d39112d416d303d0', name: "radioSecondInput" }, index.h("label", { key: 'adfdd8cccf5066275893d97312bc25f4a534fb4c', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '212a3e5b79ae95879528b06e2c5c171d30346574', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '1b7e69595c0ff030d70c81983f6ba2935bff0a59', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'f021ef6ba5491e532c956770dec1cdb743b2ecd8', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '5e9aeb6fab5d2e163f3dd0af8e6c907d7c216159', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'b89bffddc3d2ecc88f2f77065babd1ed961d9a30', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '2ac6c8f18deefff5e47a4956c482ded44a4bce56', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: 'd745e05ff520d1437f67e7e52a81494f4aad1fba' }), index.h("smoothly-input-color-demo", { key: 'f75787af771c042203883f797b3f018e48f6770d' }), index.h("smoothly-input-price-demo", { key: 'bfd9b06dbbb6626e32687b48bb9cbdce12cc59e3' }), index.h("smoothly-back-to-top", { key: '7c1b9cb3aaf8e709a2c0cd746eb98f9426d51a10' }))));
+            } }, "Duration"), index.h("h2", { key: 'c78d1b06ae1e9aef1d786b39af91982684eb3452' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '456ab898aaf6b4d269b6f0b9d48d7349948686e6', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), index.h("h2", { key: 'a288aa3df39fb19ca0d44827e1d7c0489610e046' }, "Identifiers"), index.h("smoothly-input", { key: 'fe3d08d9a64ba2baeb706ea0ab9c053e968f885f', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '59b666e5146da44a7a79f60bb7e3b67ca5975e3e', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '29a8e3906080c7e47a8502635600ae11747929ce', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'd896ec7d737f28f1e00d6d30e00106b33e918305', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'c899e4975f7916fd068727f42f5ddc25cc6bd4b5', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '1a3092bcdcce85823d114d8f037d61869d52e137' }, "Input Alternatives"), index.h("smoothly-input", { key: '01ade0834ed5f9c9b69649f25cf5b4090a8f9d2a', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '47050c61b2662c446140967a16adcb768507ad8b', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: 'd36e063bced5df59acb62a3108f5bc217d1326c9', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '28b224587ef722ea922597e69a379bef898ad9bf', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '2fd68628f6a00015e8b5ba4e78352d2d30c7246a', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '7f74440964fb216aa3c14c404339b4aa44c1797d', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '3b1ec4027204c9aac3a814e1f62a5e821bb852b0', placeholder: "test" }), index.h("smoothly-input-submit", { key: '2d9d1ee5cd2b640b378a1ee800e8dad5d775afe7', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '90733510058253ced88e37e97780512b18a66c92' }, "Smoothly checkboxes"), index.h("div", { key: '0124ec0d8e5245e21c38eb9056175d5175621993', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'ad6be760e89dfdb226ae9aeb1d5726f16d575b91', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '8349bfee0a762f279cdc0e08321af501991f5100', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '9c8c65645ae8c46a5ac5416da7c0e2c93ac54918', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: 'fd5437c763c6d19b03923e3a474998f97f66789e', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: 'fe55422ed81149ae681eafcabb4e3fa9538831c5', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '7eb94c9402938aaa6ae67c6b3cdda5c92fd08580', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'ea87736ccbee320b096f4856aa3bcbc88426c41b' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: 'f15efe64ad577865edfd6823a77c86ef19321944', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '96d19316c599bfd226f79d3afa09b6c8100e15b2', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '4880b44d7c7a2cda25dc24891c0d02a630a1e98f', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'e96d2728250a0f8e5d7321ee9ed0d901f243594c', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '57a67b7245bac10e31f0c6d884ca9b46116096d2', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'e6330920c699220a2d61a370d4f327a39a93f17d', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'b566620fb4415749caafaca8c208da5291074c02', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '04467ea359d66dff2f6973dbeb300ce54782fdf7', name: "radioSecondInput" }, index.h("label", { key: '2e18a368bbcd42e8737a60b60fc5ab3d9527feb3', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '140611cc263911444b883d410b08fad76938155f', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '010289b81070c333efcef882ba7d220b070757aa', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'a58baa64c37c6ac6677169b966268fbf04273e7d', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: 'f6c20d76e67d2da0e24e8e485d05b63e03dcba55', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '5e5c3fe6d6b959096f04dfa6366884c572d2a47b', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: 'eaa815e3e36181813b96fd0940c6f082a86b3b1a', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '998301695517a9138d1442fdf4bded2dc847bcb3' }), index.h("smoothly-input-color-demo", { key: 'fd4c2a0541985a79861c6ddab8eae7cf1788827c' }), index.h("smoothly-input-price-demo", { key: '96b937a0faf4d3d973ac594ede823a3f260a8872' }), index.h("smoothly-back-to-top", { key: '003390fcc7cfacbda5778522eaa60f691348ad09' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
-const styleCss$Y = ".sc-smoothly-input-demo-standard-h{width:50%;margin:auto}.sc-smoothly-input-demo-standard-h h2.sc-smoothly-input-demo-standard,.sc-smoothly-input-demo-standard-h p.sc-smoothly-input-demo-standard{margin:.5rem 0}div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;margin-top:1rem;grid-template-columns:2fr 1fr;gap:1rem;position:relative;justify-content:space-around}div.input-wrapper.sc-smoothly-input-demo-standard>[name].sc-smoothly-input-demo-standard{grid-column:1 / 2}div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard{width:100%;text-align:center;border-bottom:1px dashed black}div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard{align-content:center;grid-column:2 / 3;border-left:1px dashed black;padding-left:1rem;content:\"hello\"}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{width:0.5rem;grid-column:1 / 2;white-space:nowrap;overflow:visible;position:relative;cursor:default}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard::before{content:\"\";position:absolute;width:100%;top:1.5rem;bottom:-1rem;border:1px  dashed black;z-index:2}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard:hover::before{bottom:-100vh}.vertical.sc-smoothly-input-demo-standard-h{width:100%;row-gap:0;position:relative}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;grid-template-columns:repeat(auto-fill, 14rem);gap:.5rem}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{display:none}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::before,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::after{content:\"\";pointer-events:none;right:0;width:100vw;position:absolute;z-index:2;border-top:1px dotted black}.sc-smoothly-input-demo-standard-h:not(.vertical) .guide-lines.sc-smoothly-input-demo-standard{display:none}.guide-lines.sc-smoothly-input-demo-standard{text-align:end;justify-self:center;align-content:center}.guide-lines.sc-smoothly-input-demo-standard::before{top:1rem}.guide-lines.sc-smoothly-input-demo-standard::after{top:2rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::before{top:1.05rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::after{top:2.3rem}";
-const SmoothlyInputDemoStandardStyle0 = styleCss$Y;
+const styleCss$N = ".sc-smoothly-input-demo-standard-h{width:50%;margin:auto}.sc-smoothly-input-demo-standard-h h2.sc-smoothly-input-demo-standard,.sc-smoothly-input-demo-standard-h p.sc-smoothly-input-demo-standard{margin:.5rem 0}div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;margin-top:1rem;grid-template-columns:2fr 1fr;gap:1rem;position:relative;justify-content:space-around}div.input-wrapper.sc-smoothly-input-demo-standard>[name].sc-smoothly-input-demo-standard{grid-column:1 / 2}div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard{width:100%;text-align:center;border-bottom:1px dashed black}div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard{align-content:center;grid-column:2 / 3;border-left:1px dashed black;padding-left:1rem;content:\"hello\"}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{width:0.5rem;grid-column:1 / 2;white-space:nowrap;overflow:visible;position:relative;cursor:default}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard::before{content:\"\";position:absolute;width:100%;top:1.5rem;bottom:-1rem;border:1px  dashed black;z-index:2}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard:hover::before{bottom:-100vh}.vertical.sc-smoothly-input-demo-standard-h{width:100%;row-gap:0;position:relative}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;grid-template-columns:repeat(auto-fill, 14rem);gap:.5rem}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{display:none}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::before,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::after{content:\"\";pointer-events:none;right:0;width:100vw;position:absolute;z-index:2;border-top:1px dotted black}.sc-smoothly-input-demo-standard-h:not(.vertical) .guide-lines.sc-smoothly-input-demo-standard{display:none}.guide-lines.sc-smoothly-input-demo-standard{text-align:end;justify-self:center;align-content:center}.guide-lines.sc-smoothly-input-demo-standard::before{top:1rem}.guide-lines.sc-smoothly-input-demo-standard::after{top:2rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::before{top:1.05rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::after{top:2.3rem}";
+const SmoothlyInputDemoStandardStyle0 = styleCss$N;
 const SmoothlyInputDemoStandard = class {
     constructor(hostRef) {
@@ -9723,14 +9693,14 @@ const SmoothlyInputDemoStandard = class {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (index.h(index.Host, { key: 'f801d0ca2e585a3e8775aecd56392be0ad18f322', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'f308006ee7d5a5ee74bdfd6e4c0a396d5943344a', class: "description" }, index.h("h2", { key: '1786838f1f0618009ad88cb3e7118f377115ccfe' }, "Input Standard"), index.h("p", { key: 'a855497d229e1460e0a391a4eeafc4319e319ad3' }, "Height of input should be ", index.h("code", { key: '7315775949288b674244360d9b71a68db0ba63ec' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: 'e99c009de95c9a336f55f205d6c0095978065fe4', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: 'ea85f606a17014c35939c7b03382387f941c7d45', name: "looks" }, index.h("span", { key: 'e65ced6505c629ca053f448ebdde22464ea0d4ec', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '6d2f3ad828e435adc7fececf895a227ff8794c54', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: '63b277bad1655eb8684e55d54f12eaa1472eef3a', name: "color" }, index.h("span", { key: 'e21fc88c66ea60bf93132b69c37eeea6ee0df079', slot: "label" }, "Color"), Scrollable.Color.types.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '101a4fd136d354e63d61cfdf49bf1cbff1f9122e', slot: "end" })), index.h("smoothly-input-checkbox", { key: '5e534abe2dc92da3c53dea0ca219f28a86df9ddc', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '4418a73f24ae416737954e43ed543795f5b25218', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input-checkbox", { key: 'ba03de22f1f3395ed792c959499881dfb54f2f0b', name: "placeholder" }, "Placeholder"), index.h("smoothly-input-checkbox", { key: 'd16eeb2a080eff475a865ae3539c65c2dd845c85', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: 'e6b74813ff8548ed316f162ac1361d8b56c37461', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-range", { key: '051b4b2a13728bf248a1173db5f2dedb0e349428', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '8dcf1f2a2e93d3844579adfc4111084d6af30158', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '0a963e124569f0d001c4123244875d0202b0101a', class: "width" }, "100%"), index.h("div", { key: '3146298bfdf86c8acb3801c6031d3c56de357237', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '377154e6ccfc475e159e1402d7f355b088639b8e', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '7ba4aae924980bbbf20b685dd9200d009ba8c118' }, "Text"), index.h("smoothly-input-clear", { key: '07d1c750c2e8b206df1792749862dd9e05cd0081', slot: "end" })), index.h("div", { key: '428184fd6e353ef4fb5b2f09eb298631f28ea806', class: "height" }), index.h("smoothly-input-select", { key: '720bc2716b3e179e5e58d2223ad2e5c5ab945b0f', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '07ce6eff5aafb6e59309fa5f2764d698ab6aabb1', slot: "label" }, "Select"), index.h("smoothly-item", { key: '329eb5df9b843bada0107b7d7e70cb4ed2d65c12', value: "1" }, "January"), index.h("smoothly-item", { key: '02c18fc00ff6bd79ebea43430e42880252170876', value: "2" }, "February"), index.h("smoothly-item", { key: '3d3f3d9b6970a5b6171430c9b4ac77dc28ee15a8', value: "3" }, "March"), index.h("smoothly-item", { key: 'bbd6a45806844288797cf6dd54a1f0f6241613fb', value: "4" }, "April"), index.h("smoothly-item", { key: 'ea16ddebeb69043bbf81b00d24d7579c3c460ae4', value: "5" }, "May"), index.h("smoothly-item", { key: '65b5079f6bcb347c0bd7607ab1d254aab6587b08', value: "6" }, "June"), index.h("smoothly-item", { key: '112ae9deacf35b229b21b5ba98ccd6b6cf20b3d4', value: "7" }, "July"), index.h("smoothly-item", { key: '6357123ba774f460c3d472796440bcdea31cabff', value: "8" }, "August"), index.h("smoothly-item", { key: '7e152148473ba0a78095bf958a47ff250ca3f7ae', value: "9" }, "September"), index.h("smoothly-item", { key: '18ec71e93e318bbc26219c255e41e044f8f581d7', value: "10" }, "October"), index.h("smoothly-item", { key: 'dcda8c3efc3252db74fa2996394437199ae26bfb', value: "11" }, "November"), index.h("smoothly-item", { key: '0664655a80357d780f14683275d94746bea0acac', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '34703e234f2d283f5b2bf1bb7786e40d463b6640', slot: "end" })), index.h("div", { key: 'b378b73ec0f9068d04c274348a9802de24cf61b7', class: "height" }), index.h("smoothly-input-checkbox", { key: '7f29bd8cf5a22ee998b0fe1621772c6da9db6afe', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '205b4f56f31677ab496b39e5b8b70e2923569031', class: "height" }), index.h("smoothly-input-radio", { key: '70b98121b60a4ff5b09b35b7ce100b00cf9f91e2', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: '06ad97853a1d43877843eb19b4309c9fdf2e79ca', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: 'de0e8a10725c63cb558505983d2a30d7d4529851', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'a82a4fe51692ea235a14c19d3e6368aa286c88ff', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'fbcb1165ad5da5dfe59ed3e354d4c3fc1782027e', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'a18902a2746e7706b076b6184887396cf6a3b149', slot: "end" })), index.h("div", { key: '1cfd2b4ad56c3fd4ebd7f391588546898bc917c1', class: "height" }), index.h("smoothly-input-file", { key: '37d561139145352286dbefd2536cc2eb4dfa7755', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'a786ef8c9b450e13b494a51739afad7022c34ba8', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '561d9ccdc2eab0fd9782a39ac07ecba92268e80e', slot: "end" })), index.h("div", { key: 'f787cd9ec44d38988dd30892bf54f2e8ec6a4c44', class: "height" }), index.h("smoothly-input-range", { key: 'f467e42c4add7954da4183236493fd229ba95f32', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: '546d10f1c7bf5bdd153bf5acea8dcc570f89938a', slot: "end" })), index.h("div", { key: 'c82cabb2a0746af4d10340632011cd4c57a7d47f', class: "height" }), index.h("smoothly-input-color", { key: '017d27dab7c05d7113cb647ab8c90c82142a4df9', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '8d95c32f98043872cda16442aed23d889751bc6d' }, "Color"), index.h("smoothly-input-clear", { key: 'fb813435fcef0bfc196ad89f552c6a9465cfca99', slot: "end" })), index.h("div", { key: 'd0dbe76654cd3e96954aeb0ed77f89249e186f20', class: "height" }), index.h("smoothly-input-date", { key: 'ddf1219d69dead7028cae1d97a009a11f0031921', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '5ffa6841300743bff16347451140fd59fe04cf50' }, "Date"), index.h("smoothly-input-clear", { key: '822cdbf10ea7ff2dcdca5cb2b42eabf419f76aad', slot: "end" })), index.h("div", { key: '49411f5b1f1a847a7a4ef623af0496366a2e172b', class: "height" }), index.h("smoothly-input-date-range", { key: '8e2eda1171ae3c705b3691b8fb300e95d9b59a64', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '7763d6f09482427b40d2070add839ef6ff3b59a9' }, "Date Range"), index.h("smoothly-input-clear", { key: 'ebaa2a654561246dfe5914d2eda6077c0c94011a', slot: "end" })), index.h("div", { key: 'cd19dc2bbf52e9afcb8d29f4aba60885ac9b2fb5', class: "height" }), index.h("div", { key: 'd446c605508523f32111dba2b3e2758f4112e5f9', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (index.h(index.Host, { key: '8aa962825e1296bc628efec4e466e73715befd1b', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'd004d304e08c6e9605ae8cd84cbdcdbd28bd65b6', class: "description" }, index.h("h2", { key: 'f0a699835b1f30ee8c298f5bd5857f18ec9dc3f9' }, "Input Standard"), index.h("p", { key: '90f851dfe136ddc107be8447aa19458b10bd37a8' }, "Height of input should be ", index.h("code", { key: '7b14060b78e3cfa06b2a756b2e9288e043e83c54' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '9b3bd231a424364e3a87dc6e6145ffcb4ed47394', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '54b8fa969d6d1108c114f438c0aca8c574bef74b', name: "looks" }, index.h("span", { key: '6b62373be4425c189ca8be7949da8f5bcfd0d0cc', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: 'cc7bb8fb80875792a1eda791f60a70f1c8ff39b3', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: 'c53a28283995a2c5c4d174d0e963c281a4e33141', name: "color" }, index.h("span", { key: '16a0a65fd6e304362cfdbe5d39fbd0a5f362692c', slot: "label" }, "Color"), Scrollable.Color.types.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '0cd4c64c1c5ad7d1bb54b61030a7dd756b2b8b94', slot: "end" })), index.h("smoothly-input-checkbox", { key: 'd59a8d9c710c83ca79499d2a70ed599c6b1568cd', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '4f9803054d9d25bd3335ef2965f4830b4f0fef54', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input-checkbox", { key: '86c40006e0c436bceeb129d88de77ab1501c6403', name: "placeholder" }, "Placeholder"), index.h("smoothly-input-checkbox", { key: 'e38283c71a325e31610b99ed77cd3e5db5038aac', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: '9762940e6e1343c873ba98a347f382e89d989989', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-range", { key: '491915006bfecd91e5d02a3cfbb9cdb349e9bfb3', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '79a53b405704bde4894bfc39b42ba542e7bcefd7', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '71ca3058464f4340ad7405bf1f14d694c80e2d9e', class: "width" }, "100%"), index.h("div", { key: '4d38bf2fba9ac79d6087a4a44e5a6a0265433b81', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '907cb200b3af2b0363e7e50fde286863001d6208', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '69af29497810d5c7b195a4797761b45a8f224d7a' }, "Text"), index.h("smoothly-input-clear", { key: '8751d3657c11032ed42cdcf7f3239da486b6bcdd', slot: "end" })), index.h("div", { key: '22b7282d29aacf0a3b1dfb3f76ffe99730339ae9', class: "height" }), index.h("smoothly-input-select", { key: 'e7d9d9055412561857757486ff2fb6a1bc59c0eb', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '8acc4518e88a106a0de0ebe28c3a923dcc455386', slot: "label" }, "Select"), index.h("smoothly-item", { key: '301a4a9552ec2eef9a4f928936b18f7e9107b114', value: "1" }, "January"), index.h("smoothly-item", { key: '57f95a521973fbdc622d48c28408cd0e02427335', value: "2" }, "February"), index.h("smoothly-item", { key: 'bc63e7735e9f28ab454c74b0d98b19935271dd6d', value: "3" }, "March"), index.h("smoothly-item", { key: '770f4809ffdb1cc07bd05eddb42d8f17efaf9e5c', value: "4" }, "April"), index.h("smoothly-item", { key: 'eed7814fce0a090e06a938542b0fb96b4c8775f0', value: "5" }, "May"), index.h("smoothly-item", { key: 'd6fcb6315460e3123f542a9aa086dae4bb9980c5', value: "6" }, "June"), index.h("smoothly-item", { key: '4783ef4199a920611a47123a07743a198b55377c', value: "7" }, "July"), index.h("smoothly-item", { key: '0908adb55342eac905135e34333e3d916c71c42e', value: "8" }, "August"), index.h("smoothly-item", { key: 'b3fc187f94aa343a52fb2a5d758e43ada204f9ff', value: "9" }, "September"), index.h("smoothly-item", { key: '804fd1ff43714501f9dc6b0de1da6cb0392ba67c', value: "10" }, "October"), index.h("smoothly-item", { key: '290ae89e5a1a5e234549f1f1904fd1b8c932b964', value: "11" }, "November"), index.h("smoothly-item", { key: '19b2be273bb59ce6af74dabb5f9e4ff258b9ec77', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '01cbd8563a82294e3da345533e97ed7a1b85b67e', slot: "end" })), index.h("div", { key: '261af67d8483de7ee3dc0f4963f886f48ee084cc', class: "height" }), index.h("smoothly-input-checkbox", { key: '8303ba24923b9b8b13447c046a2fa65aa0ec7893', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: 'd33115b084716cb5ab4023e449033433775b3a8d', class: "height" }), index.h("smoothly-input-radio", { key: 'b132cdd287ea663a32c23dd6e6e92b579f091369', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: '1051e45c467687f6fb216e9ce7af9fe04cbe14aa', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: 'b83a814d9680740524b8b761ffc512112c03d2b3', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '6e24dfbac9b60d36c4274016948e6a0cd18103da', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '8f76e19046118064b9662de610b8ff968d9fdde9', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'ccfdf6c463d8d234d938efb7593a44e4812f8a83', slot: "end" })), index.h("div", { key: '63364601805ef10a677e29c9499bcb1e9287749b', class: "height" }), index.h("smoothly-input-file", { key: '9d8f6c91e32abecfb6178ad5595168ceeec13ec2', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '6d9e22b67009eed740ae41b80b5c5a81ad312844', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: 'ba253284acccf598554bd1edea6684e9a8ed8107', slot: "end" })), index.h("div", { key: '0bdaaef2fdfa1197d713d0abb3a543274e24edd3', class: "height" }), index.h("smoothly-input-range", { key: '9e11a15e31ad6bfa5e866be26071b7a16686564e', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: 'aa5ef09cc22d34cb0cb54aa4bba8c2f3e2edf6f0', slot: "end" })), index.h("div", { key: '0c2c975cc420ea562b9fa5e37f8172bae6157cbc', class: "height" }), index.h("smoothly-input-color", { key: '586c74561d71616595e4795d3f6aa7f23bc0af47', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '8f4363cb395c23be8c1a3a03bdde7d64d69ad64c' }, "Color"), index.h("smoothly-input-clear", { key: '9d4970454fb5abb1e62246f090a73dfd3199d14e', slot: "end" })), index.h("div", { key: '36677d790afbc98b62e40a6678bbaf7ef737bc70', class: "height" }), index.h("smoothly-input-date", { key: '6b2bbc3de13543759eafe8c299ee6cda99be391a', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '3c0a34d0f8ea7740578feabab28e27529c4ad5ad' }, "Date"), index.h("smoothly-input-clear", { key: 'acb02b016be386b131befeaa45cccef12552e2bc', slot: "end" })), index.h("div", { key: '5cf261fe94cc224e97c50162a6ae3727290b8c4b', class: "height" }), index.h("smoothly-input-date-range", { key: 'd07d21a86113aea4de043971d5599ddf8035dcb4', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '946be83c640174bcf22bbe47321eaaa427491516' }, "Date Range"), index.h("smoothly-input-clear", { key: '05f482e1aa4b473072e22158fb43c468e571a900', slot: "end" })), index.h("div", { key: '9e3746b294fd0414c0a470c6409b7deeb05cfd08', class: "height" }), index.h("div", { key: 'ce5e5210cbdb0df00a2aad7d0b3240abc474f507', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     get element() { return index.getElement(this); }
 };
 SmoothlyInputDemoStandard.style = SmoothlyInputDemoStandardStyle0;
-const styleCss$X = "[color=default].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-edit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-edit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-edit-h{display:inline}[disabled].sc-smoothly-input-edit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit:empty,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:empty{border-width:0}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-edit{padding:0.8em;min-width:8em}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-edit{padding:0.6em}[size=icon].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{padding:0.5em}[type=button].sc-smoothly-input-edit-h>a.sc-smoothly-input-edit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:100%}[size=large].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:130%}.sc-smoothly-input-edit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-edit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-edit-h{width:100%}[expand=full].sc-smoothly-input-edit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-edit-h:not([fill=clear])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-visible,[fill=outline].sc-smoothly-input-edit-h:active>button.sc-smoothly-input-edit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:hover::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-within::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:focus-visible,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit,.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>smoothly-icon,.sc-smoothly-input-edit-h .sc-smoothly-input-edit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-edit-h{display:none}.sc-smoothly-input-edit-h:not([display]){display:none}[editable].sc-smoothly-input-edit-h{opacity:0.5}.sc-smoothly-input-edit-h[type=\"input\"].sc-smoothly-input-edit-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-edit-h smoothly-icon.default.sc-smoothly-input-edit{transform:translate(.1em, -.1em)}.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>button>*+smoothly-icon{display:none}";
-const SmoothlyInputEditStyle0 = styleCss$X;
+const styleCss$M = "[color=default].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-edit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-edit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-edit-h{display:inline}[disabled].sc-smoothly-input-edit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit:empty,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:empty{border-width:0}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-edit{padding:0.8em;min-width:8em}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-edit{padding:0.6em}[size=icon].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{padding:0.5em}[type=button].sc-smoothly-input-edit-h>a.sc-smoothly-input-edit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:100%}[size=large].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:130%}.sc-smoothly-input-edit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-edit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-edit-h{width:100%}[expand=full].sc-smoothly-input-edit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-edit-h:not([fill=clear])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-visible,[fill=outline].sc-smoothly-input-edit-h:active>button.sc-smoothly-input-edit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:hover::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-within::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:focus-visible,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit,.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>smoothly-icon,.sc-smoothly-input-edit-h .sc-smoothly-input-edit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-edit-h{display:none}.sc-smoothly-input-edit-h:not([display]){display:none}[editable].sc-smoothly-input-edit-h{opacity:0.5}.sc-smoothly-input-edit-h[type=\"input\"].sc-smoothly-input-edit-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-edit-h smoothly-icon.default.sc-smoothly-input-edit{transform:translate(.1em, -.1em)}.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>button>*+smoothly-icon{display:none}";
+const SmoothlyInputEditStyle0 = styleCss$M;
 const SmoothlyInputEdit = class {
     constructor(hostRef) {
@@ -9762,13 +9732,13 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '4c82763575091a9e53ed58a308c0d506c584753a', title: this.toolTip }, index.h("smoothly-button", { key: '9e14baa0ac6e202fa3416630c9fa8703ebdb7ba8', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '8a0ef151886a6fc09874f68c1367826682bd9e87' }), index.h("smoothly-icon", { key: '2078d35ea1fdd67224c58684245cb169a71f3c3e', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '4a7251d30dc56d103cce6f4c646e87c1f9dedb2f', title: this.toolTip }, index.h("smoothly-button", { key: '10187eef09463ed960cd9fab4a224c603a3f2ac7', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '31a06bf95969d56a3d5d4a2214580ffa1a5a054f' }), index.h("smoothly-icon", { key: 'ae6116c6f7ac25efb5a511d14816b489bee3dc1c', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
-const styleCss$W = ".sc-smoothly-input-file-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-file-h[looks=\"border\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-file-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-file-h{border:transparent solid 1px}.sc-smoothly-input-file-h[looks=\"line\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-file-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-file-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-file-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-file-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-file-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-file-h,[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-file-h>input.sc-smoothly-input-file,[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within)>input.sc-smoothly-input-file{background:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-file-h.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h .label.sc-smoothly-input-file{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-file-h.floating-label.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.floating-label .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.has-value.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.has-value .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[placeholder].sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[placeholder] .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[readonly].sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[readonly] .sc-smoothly-input-file-s>[slot=label],.has-value.sc-smoothly-input-file-h .label.sc-smoothly-input-file,[placeholder].sc-smoothly-input-file-h .label.sc-smoothly-input-file,[readonly].sc-smoothly-input-file-h .label.sc-smoothly-input-file,.sc-smoothly-input-file-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-file{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-file-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-file{display:none}.sc-smoothly-input-file-h{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;position:relative;width:100%;padding-left:var(--input-padding-side);background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file{position:absolute;inset:0;background-color:rgb(var(--smoothly-input-hover-background), 0.6);border-radius:var(--smoothly-input-border-radius);border:0.25rem dashed rgb(var(--smoothly-input-hover-foreground));display:flex;justify-content:center;align-items:center}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file>smoothly-icon.sc-smoothly-input-file{color:rgb(var(--smoothly-input-hover-foreground))}.sc-smoothly-input-file-h:not(.dragging)>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file{display:none}.sc-smoothly-input-file-h>div.input.sc-smoothly-input-file>input.sc-smoothly-input-file{overflow:hidden;height:0;width:0;padding:0}.sc-smoothly-input-file-h:not([show-label])>div.input.sc-smoothly-input-file{display:flex;align-items:center;padding-bottom:0.2rem}.sc-smoothly-input-file-h:not([show-label])>smoothly-button.sc-smoothly-input-file:not(:empty){margin-right:1ch}[show-label].sc-smoothly-input-file-h>div.input.sc-smoothly-input-file{display:flex;padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom);height:100%;box-sizing:border-box;flex-grow:1}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>smoothly-button.sc-smoothly-input-file{margin:0;border:none}.sc-smoothly-input-file-h>label.sc-smoothly-input-file{left:var(--input-padding-side)}.sc-smoothly-input-file-h,.sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:pointer}[readonly].sc-smoothly-input-file-h,[readonly].sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:not-allowed}";
-const SmoothlyInputFileStyle0 = styleCss$W;
+const styleCss$L = ".sc-smoothly-input-file-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-file-h[looks=\"border\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-file-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-file-h{border:transparent solid 1px}.sc-smoothly-input-file-h[looks=\"line\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-file-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-file-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-file-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-file-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-file-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-file-h,[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-file-h>input.sc-smoothly-input-file,[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within)>input.sc-smoothly-input-file{background:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-file-h.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h .label.sc-smoothly-input-file{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-file-h.floating-label.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.floating-label .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.has-value.sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h.has-value .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[placeholder].sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[placeholder] .sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[readonly].sc-smoothly-input-file-s>[slot=label],.sc-smoothly-input-file-h[readonly] .sc-smoothly-input-file-s>[slot=label],.has-value.sc-smoothly-input-file-h .label.sc-smoothly-input-file,[placeholder].sc-smoothly-input-file-h .label.sc-smoothly-input-file,[readonly].sc-smoothly-input-file-h .label.sc-smoothly-input-file,.sc-smoothly-input-file-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-file{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-file-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-file{display:none}.sc-smoothly-input-file-h{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;position:relative;width:100%;padding-left:var(--input-padding-side);background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file{position:absolute;inset:0;background-color:rgb(var(--smoothly-input-hover-background), 0.6);border-radius:var(--smoothly-input-border-radius);border:0.25rem dashed rgb(var(--smoothly-input-hover-foreground));display:flex;justify-content:center;align-items:center}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file>smoothly-icon.sc-smoothly-input-file{color:rgb(var(--smoothly-input-hover-foreground))}.sc-smoothly-input-file-h:not(.dragging)>div.sc-smoothly-input-file>div.drag-overlay.sc-smoothly-input-file{display:none}.sc-smoothly-input-file-h>div.input.sc-smoothly-input-file>input.sc-smoothly-input-file{overflow:hidden;height:0;width:0;padding:0}.sc-smoothly-input-file-h:not([show-label])>div.input.sc-smoothly-input-file{display:flex;align-items:center;padding-bottom:0.2rem}.sc-smoothly-input-file-h:not([show-label])>smoothly-button.sc-smoothly-input-file:not(:empty){margin-right:1ch}[show-label].sc-smoothly-input-file-h>div.input.sc-smoothly-input-file{display:flex;padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom);height:100%;box-sizing:border-box;flex-grow:1}.sc-smoothly-input-file-h>div.sc-smoothly-input-file>smoothly-button.sc-smoothly-input-file{margin:0;border:none}.sc-smoothly-input-file-h>label.sc-smoothly-input-file{left:var(--input-padding-side)}.sc-smoothly-input-file-h,.sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:pointer}[readonly].sc-smoothly-input-file-h,[readonly].sc-smoothly-input-file-h *.sc-smoothly-input-file{cursor:not-allowed}";
+const SmoothlyInputFileStyle0 = styleCss$L;
 const SmoothlyInputFile = class {
     constructor(hostRef) {
@@ -9876,7 +9846,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '491be622870e2e5217bfeacc20acdccf4bf42be1', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '47c1ed4c5ad27b176a8b14a3749ec4d05229ef64' }, index.h("slot", { key: 'd134c8621f220fed69e11cd4100a1360c5e45bb8', name: "label" })), index.h("div", { key: 'efc23d0c156e488040cde379a6e4aff45a248768', class: "input" }, index.h("smoothly-button", { key: '6ef15877e7195e9e92fbb86e708c56a409acab1d', type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '88eefbd5b2be014c36c5aa00bfc643c943b7fff1', name: "button" })), index.h("span", { key: 'b8bad33bcf514befc3f02cdb3c6a5d2f83a3c362' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '3bc1075f3d478345787eed612fad5904d5a3140b', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: 'f1d3fcf2cb8921654eb694e74e6425dc83c60355', name: "document-attach-outline" })), index.h("input", { key: '6b1a8c513be73af93a942a3325d57350656ff406', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("div", { key: 'b3b2b22f77ca1dacbea0a369b7eb2ae13b8c9f98', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '8dd99bb19272b490a1a22582ec1c6182a31fa7f6', name: "end" }))));
+        return (index.h(index.Host, { key: '1c91c11701f45734b2d5685bd0c6a543bdbb6fb7', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: 'f8ab23e372eabeac02168549ceb03f7a9eb5cbc4' }, index.h("slot", { key: '6eba1aa1e14556c55d647c0afdfc8382f4322994', name: "label" })), index.h("div", { key: '13e73b1c5b9d7e5cd4655237619a94929a2182fd', class: "input" }, index.h("smoothly-button", { key: '6a9f5ae011900e5b80a8106d5ccba3931515f382', type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '582510137aca819dc05ccd6b75fa1168a1eefa47', name: "button" })), index.h("span", { key: 'f91cacc327e3643948633cde61974a7fa433c7bb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '03b0f3af81ff691b034231a7b9bb159e97d60a43', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '8bf1766c10bad401e01a4fa1c7dfbc2aa12af1c4', name: "document-attach-outline" })), index.h("input", { key: '8884488c624c70a0ff57f030b43f2acdd11d2ea4', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("div", { key: '63c67251fd574e731d7b4eb926cd0f92e5bfeafb', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '6c880201bcac2587a0e4432015ee9202cf2767a1', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9885,8 +9855,8 @@ const SmoothlyInputFile = class {
 };
 SmoothlyInputFile.style = SmoothlyInputFileStyle0;
-const styleCss$V = ".sc-smoothly-input-month-h{display:flex;flex-direction:row;justify-content:space-between;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-month-h:not([in-calendar])>smoothly-input-select.sc-smoothly-input-month{display:flex;flex:1}[looks=line].sc-smoothly-input-month-h,[looks=border].sc-smoothly-input-month-h,[looks=transparent].sc-smoothly-input-month-h{gap:2em}.sc-smoothly-input-month-h:not([previous])>smoothly-icon.sc-smoothly-input-month:first-of-type,.sc-smoothly-input-month-h:not([next])>smoothly-icon.sc-smoothly-input-month:last-of-type{display:none}.sc-smoothly-input-month-h>smoothly-icon.sc-smoothly-input-month{display:flex;align-self:center;cursor:pointer}.sc-smoothly-input-month-h>smoothly-icon.disabled.sc-smoothly-input-month{opacity:0.5;cursor:not-allowed}";
-const SmoothlyInputMonthStyle0 = styleCss$V;
+const styleCss$K = ".sc-smoothly-input-month-h{display:flex;flex-direction:row;justify-content:space-between;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-month-h:not([in-calendar])>smoothly-input-select.sc-smoothly-input-month{display:flex;flex:1}[looks=line].sc-smoothly-input-month-h,[looks=border].sc-smoothly-input-month-h,[looks=transparent].sc-smoothly-input-month-h{gap:2em}.sc-smoothly-input-month-h:not([previous])>smoothly-icon.sc-smoothly-input-month:first-of-type,.sc-smoothly-input-month-h:not([next])>smoothly-icon.sc-smoothly-input-month:last-of-type{display:none}.sc-smoothly-input-month-h>smoothly-icon.sc-smoothly-input-month{display:flex;align-self:center;cursor:pointer}.sc-smoothly-input-month-h>smoothly-icon.disabled.sc-smoothly-input-month{opacity:0.5;cursor:not-allowed}";
+const SmoothlyInputMonthStyle0 = styleCss$K;
 const SmoothlyInputMonth = class {
     constructor(hostRef) {
@@ -9997,9 +9967,9 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'aa0b40073f5f9bcf32241509ed90d4b8ae4b0f34' }, index.h("smoothly-icon", { key: 'e85c13db823491d60f653b4d6be7655f6027060c', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index.h(index.Host, { key: '31a5375f473313057fdee7b8d7b87594ac238550' }, index.h("smoothly-icon", { key: '78271c79baeaa0892cff0ef62be3eddc88574d3c', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '668d3851808a3f4081c40a038110dd92ff70b472', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '4daa5c21a6e912f1c68070f61787093cbd7b76e0', slot: "label" }, index.h("slot", { key: '6128ae5b123b765f06c79955b65ae6615c2dbfbc', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: 'def2544540acfe361de31656f257caa42e00ec70', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '6ce12ac4ae5d6106fbd2a24100dedbae5fe2ef4f', slot: "label" }, index.h("slot", { key: 'd4735ee00f44e15696f3f8c2ea97c2ec7cd6367b', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: '8c23347945ff433523df1d8b3b0f5907e194fd14', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: 'ae36fb2b6d31d627f29ff20d5a1cf71ab5648626', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '14b76d20799c3ffdeee0bd8abc2c17de24a50205', slot: "label" }, index.h("slot", { key: '7a02aaaa7c03963d2a4266fc5f20d595453ff938', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: 'd7203269b2e6be8b45120bc9315fcba8a207fe32', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'b73693770456df31f3eedce66b344775ecc9cb68', slot: "label" }, index.h("slot", { key: '649381e8437b40b805bcd089b06264d83c078629', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: '2d5f6e00759a55b9ab596c45e97421081e83dc55', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
@@ -10012,8 +9982,8 @@ const SmoothlyInputMonth = class {
 };
 SmoothlyInputMonth.style = SmoothlyInputMonthStyle0;
-const styleCss$U = ".sc-smoothly-input-price-demo-h{display:block}";
-const SmoothlyInputPriceDemoStyle0 = styleCss$U;
+const styleCss$J = ".sc-smoothly-input-price-demo-h{display:block}";
+const SmoothlyInputPriceDemoStyle0 = styleCss$J;
 const SmoothlyInputPriceDemo = class {
     constructor(hostRef) {
@@ -10022,13 +9992,13 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index.h(index.Host, { key: 'bad11b3c20ae711a30e32dbe00b0fd9a4fe2e233' }, index.h("h2", { key: '1f0b35ab38d25f7cf85e5d88a94a1155bd9958c0' }, "State demo on smoothly-input"), index.h("p", { key: 'b2f1472ebca834019523652fba825675cbd79c08' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '0b91d3d13dd721e2cb1f0e597eceef6df7b10664' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: 'cfcbe6cb9e757806316b0452e49c621483136391', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '697ee9173e9673c9208193a2becdc7d688fa9e4e', type: "price", currency: this.currency }, "price")));
+        return (index.h(index.Host, { key: '9d4cec481dd329c3fc3b49bae2872d71c3f96513' }, index.h("h2", { key: 'df1d994e3fd1972722084557fcd7bbdcc94e7f05' }, "State demo on smoothly-input"), index.h("p", { key: '16d5e13aa5d4d973f00bfc9df8a53222ff546755' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '0184623d96c8cbbb8f16c647f46768a9cd42dd16' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: '2eaf3b89d33550fd81b0862750b1dfa3f7336af9', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: '57a7d64a9ef245b2601c7d47a26574491b599585', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = SmoothlyInputPriceDemoStyle0;
-const styleCss$T = ".sc-smoothly-input-radio-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-radio-h[looks=\"border\"].sc-smoothly-input-radio-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-radio-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-radio-h{border:transparent solid 1px}.sc-smoothly-input-radio-h[looks=\"line\"].sc-smoothly-input-radio-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-radio-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-radio-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-radio-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-radio-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-radio-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-radio-h,[looks=\"transparent\"].sc-smoothly-input-radio-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-radio-h>input.sc-smoothly-input-radio,[looks=\"transparent\"].sc-smoothly-input-radio-h:not(:focus-within)>input.sc-smoothly-input-radio{background:transparent}[looks=\"transparent\"].sc-smoothly-input-radio-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-radio-h.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-radio-h.floating-label.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.floating-label .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.has-value.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.has-value .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[placeholder].sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[placeholder] .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[readonly].sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[readonly] .sc-smoothly-input-radio-s>[slot=label],.has-value.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,[placeholder].sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,[readonly].sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,.sc-smoothly-input-radio-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-radio{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-radio-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-radio{display:none}.sc-smoothly-input-radio-h{background-color:rgb(var(--smoothly-input-background));display:flex;align-items:center;padding-left:var(--input-padding-side);box-sizing:border-box}[show-label].sc-smoothly-input-radio-h>div.sc-smoothly-input-radio{position:relative;padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-radio-h>div.sc-smoothly-input-radio,.sc-smoothly-input-radio-h>div.sc-smoothly-input-radio>div.options.sc-smoothly-input-radio{display:flex;gap:1.5rem}.sc-smoothly-input-radio-h.sc-smoothly-input-radio-s>[slot=end]{margin-right:0;margin-left:auto}[readonly].sc-smoothly-input-radio-h smoothly-input-radio-item.sc-smoothly-input-radio *.sc-smoothly-input-radio{cursor:not-allowed}";
-const SmoothlyInputRadioStyle0 = styleCss$T;
+const styleCss$I = ".sc-smoothly-input-radio-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-radio-h[looks=\"border\"].sc-smoothly-input-radio-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-radio-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-radio-h{border:transparent solid 1px}.sc-smoothly-input-radio-h[looks=\"line\"].sc-smoothly-input-radio-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-radio-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-radio-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-radio-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-radio-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-radio-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-radio-h,[looks=\"transparent\"].sc-smoothly-input-radio-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-radio-h>input.sc-smoothly-input-radio,[looks=\"transparent\"].sc-smoothly-input-radio-h:not(:focus-within)>input.sc-smoothly-input-radio{background:transparent}[looks=\"transparent\"].sc-smoothly-input-radio-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-radio-h.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-radio-h.floating-label.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.floating-label .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.has-value.sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h.has-value .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[placeholder].sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[placeholder] .sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[readonly].sc-smoothly-input-radio-s>[slot=label],.sc-smoothly-input-radio-h[readonly] .sc-smoothly-input-radio-s>[slot=label],.has-value.sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,[placeholder].sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,[readonly].sc-smoothly-input-radio-h .label.sc-smoothly-input-radio,.sc-smoothly-input-radio-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-radio{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-radio-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-radio{display:none}.sc-smoothly-input-radio-h{background-color:rgb(var(--smoothly-input-background));display:flex;align-items:center;padding-left:var(--input-padding-side);box-sizing:border-box}[show-label].sc-smoothly-input-radio-h>div.sc-smoothly-input-radio{position:relative;padding-block:var(--input-value-padding-top) var(--input-value-padding-bottom)}.sc-smoothly-input-radio-h>div.sc-smoothly-input-radio,.sc-smoothly-input-radio-h>div.sc-smoothly-input-radio>div.options.sc-smoothly-input-radio{display:flex;gap:1.5rem}.sc-smoothly-input-radio-h.sc-smoothly-input-radio-s>[slot=end]{margin-right:0;margin-left:auto}[readonly].sc-smoothly-input-radio-h smoothly-input-radio-item.sc-smoothly-input-radio *.sc-smoothly-input-radio{cursor:not-allowed}";
+const SmoothlyInputRadioStyle0 = styleCss$I;
 const SmoothlyInputRadio = class {
     constructor(hostRef) {
@@ -10131,7 +10101,7 @@ const SmoothlyInputRadio = class {
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
     render() {
-        return (index.h(index.Host, { key: 'd5c9b50ade17c87ee4207620548a1756452dd7f1', class: "floating-label" }, index.h("slot", { key: '0bb47eacc21cd80ad57cef2e264c22c30408170e', name: "start" }), index.h("div", { key: '1a128681cef051664cad9c99a65cc5af7f69ee7d' }, index.h("slot", { key: '81d055488a0f0b1089459413fbc0835e6726d0b7', name: "label" }), index.h("div", { key: 'babf56f83549be2478dc43e3f0cd1efcafb7d9df', class: "options" }, index.h("slot", { key: '434fd9a81af5a5ff6813bc247b95b2cec6f85272' }))), index.h("slot", { key: '99fe30e834b74f9a518f4df1ec58a220474c97d3', name: "end" })));
+        return (index.h(index.Host, { key: '84feefdf8a3f79ac031f8f4e12af4eaea6d3b464', class: "floating-label" }, index.h("slot", { key: '5394a95744be929c8a0d5bbce9e09abc53edd8d9', name: "start" }), index.h("div", { key: '34f00d17365ec06c256338f759e24e6d13592997' }, index.h("slot", { key: '528b489815eb69473529b683965fc79ce80aaad4', name: "label" }), index.h("div", { key: '42dc1e97f591cef1ba66d1c16e0843c9f6b21c75', class: "options" }, index.h("slot", { key: '9db82fe518bd4790cf7cb95e2dfd083ef8e67795' }))), index.h("slot", { key: '67ede49d41d2e031da5387f819058031e886e1d1', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10141,8 +10111,8 @@ const SmoothlyInputRadio = class {
 };
 SmoothlyInputRadio.style = SmoothlyInputRadioStyle0;
-const styleCss$S = ".sc-smoothly-input-radio-item-h{display:flex;align-items:center;position:relative}.sc-smoothly-input-radio-item-h:hover>*.sc-smoothly-input-radio-item{cursor:pointer}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item:focus-visible+smoothly-icon.sc-smoothly-input-radio-item{outline:2px solid rgb(var(--smoothly-primary-color));border-radius:1px}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item{opacity:0;z-index:1;width:1.5em;height:1.5em;position:absolute;transform:translateX(50%)}.sc-smoothly-input-radio-item-h>label.sc-smoothly-input-radio-item{padding:0 .3em;white-space:nowrap}";
-const SmoothlyInputRadioItemStyle0 = styleCss$S;
+const styleCss$H = ".sc-smoothly-input-radio-item-h{display:flex;align-items:center;position:relative}.sc-smoothly-input-radio-item-h:hover>*.sc-smoothly-input-radio-item{cursor:pointer}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item:focus-visible+smoothly-icon.sc-smoothly-input-radio-item{outline:2px solid rgb(var(--smoothly-primary-color));border-radius:1px}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item{opacity:0;z-index:1;width:1.5em;height:1.5em;position:absolute;transform:translateX(50%)}.sc-smoothly-input-radio-item-h>label.sc-smoothly-input-radio-item{padding:0 .3em;white-space:nowrap}";
+const SmoothlyInputRadioItemStyle0 = styleCss$H;
 const SmoothlyInputRadioItem = class {
     constructor(hostRef) {
@@ -10162,14 +10132,14 @@ const SmoothlyInputRadioItem = class {
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (index.h(index.Host, { key: '4050066bdb8e251aea327a2793ff76fa8328ccb1', onClick: () => this.inputHandler() }, index.h("input", { key: 'b084c07081ca1ec30b6babc95c20edacbab38dc8', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '789673f1d35f1e8df752c9613bf7e91f0f85cbb8', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '7471bd5c94859d74f2a939211bbb3908b1cd2f2c' }, index.h("slot", { key: '56b5c28d9393c2552d9361e405b84b0ce5dabb32' }))));
+        return (index.h(index.Host, { key: 'e7cf32e18aaa3c68ed5f10ddd837d00c57ce314c', onClick: () => this.inputHandler() }, index.h("input", { key: '48daeb5ece6f22f24d7ba0d21d6ab1d5ffe050ef', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: '981a3f17ce966be3bd90a3030d5eed18ed1ae087', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '3c3e288cbd8496bd4c2a62b83865eae8e39019a6' }, index.h("slot", { key: 'c660628b0873ef7041a06d90884f1bd88046dfed' }))));
     }
     get element() { return index.getElement(this); }
 };
 SmoothlyInputRadioItem.style = SmoothlyInputRadioItemStyle0;
-const styleCss$R = ".sc-smoothly-input-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-range-h[looks=\"border\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-range-h{border:transparent solid 1px}.sc-smoothly-input-range-h[looks=\"line\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-range-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-range-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-range-h,[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-range-h>input.sc-smoothly-input-range,[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within)>input.sc-smoothly-input-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-range-h.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .label.sc-smoothly-input-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-range-h.floating-label.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.floating-label .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder] .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly] .sc-smoothly-input-range-s>[slot=label],.has-value.sc-smoothly-input-range-h .label.sc-smoothly-input-range,[placeholder].sc-smoothly-input-range-h .label.sc-smoothly-input-range,[readonly].sc-smoothly-input-range-h .label.sc-smoothly-input-range,.sc-smoothly-input-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-range{display:none}*.sc-smoothly-input-range{box-sizing:border-box}.sc-smoothly-input-range-h{position:relative;width:100%;justify-content:center;align-items:center;display:flex;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-range-h>div.sc-smoothly-input-range:not([slot]){position:relative;display:flex;justify-content:center;align-items:center;width:100%;padding-right:var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{width:12em;--input-min-height:calc(3rem - 2px)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range:focus{outline:none;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{white-space:nowrap}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range{padding:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{text-align:center;margin-left:var(--input-padding-side);border:none;box-sizing:border-box;width:5em;order:3;margin:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-display.sc-smoothly-input-range,.sc-smoothly-input-range-h:not(.output-side-right)>div.sc-smoothly-input-range>label.sc-smoothly-input-range{display:none}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range input.sc-smoothly-input-range{padding:0;text-align:center}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{width:100%}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>label.sc-smoothly-input-range{position:static;font-size:inherit;text-align:center;margin:0 var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range{-webkit-appearance:none;width:100%;background:transparent;height:1.5em;padding:0 .4em}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{-webkit-appearance:none;height:0.8em;width:0.8em;border-radius:100%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;margin-top:-.25em;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{height:0.8em;width:0.8em;border-radius:100%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{width:100%;height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h:not([value])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background-color:rgb(var(--smoothly-primary-tint))}.sc-smoothly-input-range-h:not([value])>dov.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-tint))}[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track,[readonly].sc-smoothly-input-range-h,[readonly].sc-smoothly-input-range-h *.sc-smoothly-input-range{cursor:not-allowed}input.sc-smoothly-input-range::-webkit-outer-spin-button,input.sc-smoothly-input-range::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}";
-const SmoothlyInputRangeStyle0 = styleCss$R;
+const styleCss$G = ".sc-smoothly-input-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-range-h[looks=\"border\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-range-h{border:transparent solid 1px}.sc-smoothly-input-range-h[looks=\"line\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-range-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-range-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-range-h,[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-range-h>input.sc-smoothly-input-range,[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within)>input.sc-smoothly-input-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-range-h.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .label.sc-smoothly-input-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-range-h.floating-label.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.floating-label .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder] .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly] .sc-smoothly-input-range-s>[slot=label],.has-value.sc-smoothly-input-range-h .label.sc-smoothly-input-range,[placeholder].sc-smoothly-input-range-h .label.sc-smoothly-input-range,[readonly].sc-smoothly-input-range-h .label.sc-smoothly-input-range,.sc-smoothly-input-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-range{display:none}*.sc-smoothly-input-range{box-sizing:border-box}.sc-smoothly-input-range-h{position:relative;width:100%;justify-content:center;align-items:center;display:flex;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-range-h>div.sc-smoothly-input-range:not([slot]){position:relative;display:flex;justify-content:center;align-items:center;width:100%;padding-right:var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{width:12em;--input-min-height:calc(3rem - 2px)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range:focus{outline:none;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{white-space:nowrap}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range{padding:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{text-align:center;margin-left:var(--input-padding-side);border:none;box-sizing:border-box;width:5em;order:3;margin:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-display.sc-smoothly-input-range,.sc-smoothly-input-range-h:not(.output-side-right)>div.sc-smoothly-input-range>label.sc-smoothly-input-range{display:none}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range input.sc-smoothly-input-range{padding:0;text-align:center}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{width:100%}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>label.sc-smoothly-input-range{position:static;font-size:inherit;text-align:center;margin:0 var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range{-webkit-appearance:none;width:100%;background:transparent;height:1.5em;padding:0 .4em}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{-webkit-appearance:none;height:0.8em;width:0.8em;border-radius:100%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;margin-top:-.25em;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{height:0.8em;width:0.8em;border-radius:100%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{width:100%;height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h:not([value])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background-color:rgb(var(--smoothly-primary-tint))}.sc-smoothly-input-range-h:not([value])>dov.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-tint))}[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track,[readonly].sc-smoothly-input-range-h,[readonly].sc-smoothly-input-range-h *.sc-smoothly-input-range{cursor:not-allowed}input.sc-smoothly-input-range::-webkit-outer-spin-button,input.sc-smoothly-input-range::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}";
+const SmoothlyInputRangeStyle0 = styleCss$G;
 const SmoothlyInputRange = class {
     constructor(hostRef) {
@@ -10266,17 +10236,17 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'db364d48a08c466ba61bfd2379499309c57548c6', class: {
+        return (index.h(index.Host, { key: '54110def7ede46a497e9f89badfa411f2101f9f1', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: 'a44f61849476e4bf811486a555c3f81c3a21ad11', name: "start" }), index.h("div", { key: '50a390145faa95bc18c76f0177aaaf6316a48e02' }, index.h("label", { key: 'b3896b960fce4e257bf250044d9446bf13b4d05f', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '98f34e1d9f3d314f1d36ea51570ade80248e09e9', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, index.h("slot", { key: '2a5b1e0011a44f1d61965cf7d5c40fb65810d70e', name: "start" }), index.h("div", { key: '8d6c07448362f9b14c0fbc5e6d12f14ad7900d18' }, index.h("label", { key: '1f0c9181fcb31bb9481e2831d97807824d0fda3b', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '5cfa5a192ec52e3b1542c8b902fc0708f9f7f638', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), index.h("smoothly-display", { key: 'ba539540cebbcdf6b8ed8074069ded8bd9083a53', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '9c4d96d7954a42d3acdd87559143237665e12ca3', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), index.h("smoothly-display", { key: 'ba0ffa533194066830cbd8644dc56407ca8e98f6', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '89a2f41c2e5b11ad7ca84be16fce678348b05684', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'b6c57b76d0f3f640af5e3bb40c91b3c2ca4fab7c', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '62120d5aae2ad288a41202ed279a7c973f8ae210', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'bdb12803d40ceb8205d3f34516e9cc7d5f0c55b7', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'f605bf487c677804bbd6b1da7329fdc10a8f24bd', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10290,12 +10260,12 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7755296b3ff4f4d0ef6985a7926ce037208483a3' }, index.h("h2", { key: 'f8dbb6c4b466de2f05ac82ea261be961f35f3d2b' }, "Range"), index.h("h3", { key: '690a16cfba6122e9a927dbf9c8dc078038cdadcb' }, "Phone Number"), index.h("smoothly-input-range", { key: 'e197f625e981e2507122af04920e13e6663ad9cd', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: 'fcdeeac93c47c4cf96f8d7a52811f09e2f75ea1e' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '8a9693949a16495e411f944ea18d882044b9501b', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: 'c0dc4bb173e2d01acce664076d65dbe306f43302' }, "Percent"), index.h("smoothly-input-range", { key: '95f56d349df31ff4cc1879f585250cec0662fbb0', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: 'd97aad1bd87a1237720d6dd06ebc47e226acb96a' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '693dce4b8ce3a2991656da0d758ef56e4b1bc7ca', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '3a0f308943942de7306f5b5c616cdc344f9ef553', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '0a724a9f326c4ccc8440561a817ceb1d5d2cd354', size: "icon", slot: "end" }))));
+        return (index.h(index.Host, { key: 'c2c0307b8cfb3649b3829935ceac7a239c0a3035' }, index.h("h2", { key: '3dc59277ebd70ee6d2845111fac8cc705ae274af' }, "Range"), index.h("h3", { key: '50b58f50d58c00c86f0746ce5c05b1f57b57efa2' }, "Phone Number"), index.h("smoothly-input-range", { key: 'ae8d9c8125beb1790cbd642d9b25ed202635c7a2', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '7b8e733f33aa344bdd07be2b23cb566485a4d13a' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '55c63696b90405074cabee9694379befd5aa9310', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '27f0e64c163354a5c7669100e1a074ae2d9a141d' }, "Percent"), index.h("smoothly-input-range", { key: '2035cfb5de1eeaf6edc7086417dc00c9dee8c339', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: '04fab376af7923769f62db4246062508c1ef1194' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '145a4d0fa6fa5903f5690cb25554af63a28edcef', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '2a3ff0a0b93638f49fb59015acc37e30f22f934f', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '33cfa613f632309014a96dfd2a678bf9f71b2b67', size: "icon", slot: "end" }))));
     }
 };
-const styleCss$Q = "[color=default].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-reset-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-reset-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-reset-h{display:inline}[disabled].sc-smoothly-input-reset-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-reset-h>a.sc-smoothly-input-reset,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-reset-h>a.sc-smoothly-input-reset:empty,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:empty{border-width:0}.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-reset-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-reset{padding:0.8em;min-width:8em}.sc-smoothly-input-reset-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-reset{padding:0.6em}[size=icon].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{padding:0.5em}[type=button].sc-smoothly-input-reset-h>a.sc-smoothly-input-reset{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:100%}[size=large].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:130%}.sc-smoothly-input-reset-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-reset-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-reset-h{width:100%}[expand=full].sc-smoothly-input-reset-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-reset-h:not([fill=clear])>button.sc-smoothly-input-reset:hover,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:focus-visible,[fill=outline].sc-smoothly-input-reset-h:active>button.sc-smoothly-input-reset::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:hover::before,[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:focus-within::before,[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:hover,.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:focus-visible,.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset,.sc-smoothly-input-reset-h.sc-smoothly-input-reset-s>smoothly-icon,.sc-smoothly-input-reset-h .sc-smoothly-input-reset-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-reset-h{display:none}.sc-smoothly-input-reset-h:not([display]){display:none}.sc-smoothly-input-reset-h[type=\"input\"].sc-smoothly-input-reset-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-reset-h.sc-smoothly-input-reset-s>smoothly-button>button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-reset-h{cursor:not-allowed}.sc-smoothly-input-reset-h[type=\"input\"]:hover.sc-smoothly-input-reset-s>smoothly-icon,.sc-smoothly-input-reset-h[type=\"input\"]:hover .sc-smoothly-input-reset-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}";
-const SmoothlyInputResetStyle0 = styleCss$Q;
+const styleCss$F = "[color=default].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-reset{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-reset-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-reset-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-reset-h{display:inline}[disabled].sc-smoothly-input-reset-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-reset-h>a.sc-smoothly-input-reset,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-reset-h>a.sc-smoothly-input-reset:empty,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:empty{border-width:0}.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-reset-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-reset{padding:0.8em;min-width:8em}.sc-smoothly-input-reset-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-reset{padding:0.6em}[size=icon].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{padding:0.5em}[type=button].sc-smoothly-input-reset-h>a.sc-smoothly-input-reset{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:100%}[size=large].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{font-size:130%}.sc-smoothly-input-reset-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-reset-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-reset-h{width:100%}[expand=full].sc-smoothly-input-reset-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-reset-h:not([fill=clear])>button.sc-smoothly-input-reset:hover,.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:focus-visible,[fill=outline].sc-smoothly-input-reset-h:active>button.sc-smoothly-input-reset::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:hover::before,[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:focus-within::before,[fill=outline].sc-smoothly-input-reset-h>button.sc-smoothly-input-reset:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:hover,.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:focus-visible,.sc-smoothly-input-reset-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-reset:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-reset-h>button.sc-smoothly-input-reset,.sc-smoothly-input-reset-h.sc-smoothly-input-reset-s>smoothly-icon,.sc-smoothly-input-reset-h .sc-smoothly-input-reset-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-reset-h{display:none}.sc-smoothly-input-reset-h:not([display]){display:none}.sc-smoothly-input-reset-h[type=\"input\"].sc-smoothly-input-reset-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-reset-h.sc-smoothly-input-reset-s>smoothly-button>button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-reset-h{cursor:not-allowed}.sc-smoothly-input-reset-h[type=\"input\"]:hover.sc-smoothly-input-reset-s>smoothly-icon,.sc-smoothly-input-reset-h[type=\"input\"]:hover .sc-smoothly-input-reset-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}";
+const SmoothlyInputResetStyle0 = styleCss$F;
 const SmoothlyInputReset = class {
     constructor(hostRef) {
@@ -10336,7 +10306,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '9ee18eb0aab780f7646269da2ff328d91428d4a3', title: this.tooltip }, index.h("smoothly-button", { key: '42de50f9d8a82f1b0cd77cd780a4974196c70416', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index.h("slot", { key: '052e1b22942b64a527981f537f183a74318da4f9' }), index.h("smoothly-icon", { key: '2cafb12e9fb7a0856c65415dd255ba87cc6e1897', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '8542dba163fb848653f31f2559e52aac50826c40', title: this.tooltip }, index.h("smoothly-button", { key: 'dcac9b394999e1751be7786f4eb7b3033ce2d5a7', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index.h("slot", { key: '5756f37b4fe0cae8e0f6e0e7d0776cae56f2f002' }), index.h("smoothly-icon", { key: 'aecb2d327ddf0b0441c48660c9b061fa338fdd3b', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10357,8 +10327,8 @@ var Item;
     Item.is = Item.type.is;
 })(Item || (Item = {}));
-const styleCss$P = ".sc-smoothly-input-select-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-select-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-select-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h>input.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within)>input.sc-smoothly-input-select{background:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .label.sc-smoothly-input-select{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.floating-label.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.floating-label .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder] .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly] .sc-smoothly-input-select-s>[slot=label],.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,[placeholder].sc-smoothly-input-select-h .label.sc-smoothly-input-select,[readonly].sc-smoothly-input-select-h .label.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-select{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-select-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h{display:flex;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));padding-left:var(--input-padding-side)}.open.sc-smoothly-input-select-h{border-radius:var(--smoothly-input-border-radius) var(--smoothly-input-border-radius) 0 0}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{box-sizing:border-box;display:flex;cursor:pointer;padding:var(--input-value-padding-top) 0 var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not(:has([slot=label]))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>div.select-display.sc-smoothly-input-select{padding:.6em 0;align-items:center}[readonly].sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{cursor:not-allowed}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select smoothly-icon.sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select-s>smoothly-icon:not(\"color\"){color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));filter:opacity(60%)}.sc-smoothly-input-select-h:hover>div.icons.sc-smoothly-input-select-s>smoothly-icon{filter:opacity(100%)}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{opacity:.7;cursor:pointer;height:100%;padding-inline:var(--input-padding-side)}[invalid].sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:block;padding:0.5rem}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h .label.sc-smoothly-input-select{left:.5rem}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>div.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:10;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));left:0;right:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);min-width:fit-content;border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select{left:-1px;right:-1px}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>smoothly-item,.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{padding:.7em .7em .7em .25em}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{display:flex;gap:1em;background-color:rgba(var(--smoothly-primary-tint), .5);color:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));stroke:rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name=\"backspace-outline\"].sc-smoothly-input-select{margin-left:auto;margin-right:0}.sc-smoothly-input-select-h>div.options.hidden.sc-smoothly-input-select{display:none}";
-const SmoothlyInputSelectStyle0 = styleCss$P;
+const styleCss$E = ".sc-smoothly-input-select-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-select-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-select-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-select-h>input.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within)>input.sc-smoothly-input-select{background:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .label.sc-smoothly-input-select{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.floating-label.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.floating-label .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder] .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly] .sc-smoothly-input-select-s>[slot=label],.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,[placeholder].sc-smoothly-input-select-h .label.sc-smoothly-input-select,[readonly].sc-smoothly-input-select-h .label.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-select{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-select-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h{display:flex;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));padding-left:var(--input-padding-side)}.open.sc-smoothly-input-select-h{border-radius:var(--smoothly-input-border-radius) var(--smoothly-input-border-radius) 0 0}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{box-sizing:border-box;display:flex;cursor:pointer;padding:var(--input-value-padding-top) 0 var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not(:has([slot=label]))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>div.select-display.sc-smoothly-input-select{padding:.6em 0;align-items:center}[readonly].sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{cursor:not-allowed}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select smoothly-icon.sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select-s>smoothly-icon:not(\"color\"){color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));filter:opacity(60%)}.sc-smoothly-input-select-h:hover>div.icons.sc-smoothly-input-select-s>smoothly-icon{filter:opacity(100%)}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{opacity:.7;cursor:pointer;height:100%;padding-inline:var(--input-padding-side)}[invalid].sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:block;padding:0.5rem}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h .label.sc-smoothly-input-select{left:.5rem}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>div.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:10;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));left:0;right:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);min-width:fit-content;border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=\"transparent\"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select{left:-1px;right:-1px}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>smoothly-item,.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{padding:.7em .7em .7em .25em}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{display:flex;gap:1em;background-color:rgba(var(--smoothly-primary-tint), .5);color:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));stroke:rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name=\"backspace-outline\"].sc-smoothly-input-select{margin-left:auto;margin-right:0}.sc-smoothly-input-select-h>div.options.hidden.sc-smoothly-input-select{display:none}";
+const SmoothlyInputSelectStyle0 = styleCss$E;
 const SmoothlyInputSelect = class {
     constructor(hostRef) {
@@ -10644,14 +10614,14 @@ const SmoothlyInputSelect = class {
         this.addedItems = this.addedItems.concat(index.h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (index.h(index.Host, { key: '4504ac07b8bf4cf9cca3dcb8940c23312f515e60', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '95d2b27548a22908478cab1f198df216ad2bc29d', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '1c64ca38fad25046d160b7dabe20bbeff9d6039e', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: 'c01d911fcf4243f8f14e7509838778576d368ce8', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '64ab88efbc7dc266bb23782684a0519a79fad7c8', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '0c298580239d66f231443607c4d17ef060b5521e', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: '4f068fdd583639ca1ece34b5730f79ac033d6629', name: "label" }), index.h("div", { key: '28be42612595dd29726eb179d26b4a06870816dc', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '2773ae2fdc7ea0a8bb3149fa66617dd948546329', class: "search-preview" }, index.h("smoothly-icon", { key: '6ebd89df60b86ee71b887657e4b051daddcee282', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'c5c689051167bf3ba0312c9c0e2e54fb99eb977c', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: '1d76fb338bf27746dd487880308232aa8ecdd12f', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: 'beed912656ab08542f8fde7b5f966ed87d02147a', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '89f4877de01e0c4b0977dc49f9faf4540de48c35', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: '0a50ced02160624b0f4f1e04af48558d2fb24d03', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'c60fe48ae2ac0551b01d1f02f3d60116b2f8e739', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: 'e072a9bc63f2641bc17cf14ab82e5cead1cae657', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: 'f9ff50a655ea619e6efd01ca01cb7de403286d09', name: "label" }), index.h("div", { key: 'fe6ec4db8f46d72488c59bf80fc865f986ec3a37', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: 'a9608fcaed8f494a4b5a5f6af10f55ed250edad3', class: "search-preview" }, index.h("smoothly-icon", { key: '07bb196ecb24bff125198e5acc5ffed7e2b976a1', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'b987265ff13c5a553bc5d6c7173dfb510f1aa660', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: 'd8101bce9ca797f3aade26475d4046da69c5ce3b', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: '7cbbeefd7d4935e0e4a465940d4cdea61b40c700', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '808eb34f3ca3efa1ed144039faaad03d17e6acea' }), this.addedItems)));
+            } })))), index.h("slot", { key: '27e9c24931e5d22058df8a5dd5d18ca3137d7010' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10664,16 +10634,8 @@ const SmoothlyInputSelect = class {
 };
 SmoothlyInputSelect.style = SmoothlyInputSelectStyle0;
-var Submittable;
-(function (Submittable) {
-    function is(value) {
-        return value && typeof value == "object" && typeof value.submit == "function";
-    }
-    Submittable.is = is;
-})(Submittable || (Submittable = {}));
-const styleCss$O = "[color=default].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-submit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-submit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-submit-h{display:inline}[disabled].sc-smoothly-input-submit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit:empty,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:empty{border-width:0}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-submit{padding:0.8em;min-width:8em}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-submit{padding:0.6em}[size=icon].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{padding:0.5em}[type=button].sc-smoothly-input-submit-h>a.sc-smoothly-input-submit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:100%}[size=large].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:130%}.sc-smoothly-input-submit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-submit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-submit-h{width:100%}[expand=full].sc-smoothly-input-submit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-submit-h:not([fill=clear])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-visible,[fill=outline].sc-smoothly-input-submit-h:active>button.sc-smoothly-input-submit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:hover::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-within::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:focus-visible,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-icon,.sc-smoothly-input-submit-h .sc-smoothly-input-submit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-submit-h{display:none}.sc-smoothly-input-submit-h{display:flex}.sc-smoothly-input-submit-h:not([display]){display:none}.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button button>*+smoothly-icon,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button-confirm button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-submit-h{cursor:not-allowed}";
-const SmoothlyInputSubmitStyle0 = styleCss$O;
+const styleCss$D = "[color=default].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-submit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-submit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-submit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-submit-h{display:inline}[disabled].sc-smoothly-input-submit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit:empty,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:empty{border-width:0}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-submit{padding:0.8em;min-width:8em}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-submit{padding:0.6em}[size=icon].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{padding:0.5em}[type=button].sc-smoothly-input-submit-h>a.sc-smoothly-input-submit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:100%}[size=large].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:130%}.sc-smoothly-input-submit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-submit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-submit-h{width:100%}[expand=full].sc-smoothly-input-submit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-submit-h:not([fill=clear])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-visible,[fill=outline].sc-smoothly-input-submit-h:active>button.sc-smoothly-input-submit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:hover::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-within::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:focus-visible,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-icon,.sc-smoothly-input-submit-h .sc-smoothly-input-submit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-submit-h{display:none}.sc-smoothly-input-submit-h{display:flex}.sc-smoothly-input-submit-h:not([display]){display:none}.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button button>*+smoothly-icon,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button-confirm button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-submit-h{cursor:not-allowed}";
+const SmoothlyInputSubmitStyle0 = styleCss$D;
 const SmoothlyInputSubmit = class {
     constructor(hostRef) {
@@ -10692,7 +10654,7 @@ const SmoothlyInputSubmit = class {
     }
     componentWillLoad() {
         this.smoothlyInputLoad.emit(parent => {
-            if (Submittable.is(parent) && Editable.type.is(parent)) {
+            if (Submittable.Submittable.is(parent) && Editable.type.is(parent)) {
                 this.parent = parent;
                 parent.listen("changed", async (p) => {
                     var _a;
@@ -10712,13 +10674,13 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '9e88fd69d424fde703b43ff3982e50a7dd22ea9a', title: this.toolTip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (index.h(index.Host, { key: 'f659d9fcff6418ed79a26b588a0b2392a85affa2', title: this.toolTip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
 };
 SmoothlyInputSubmit.style = SmoothlyInputSubmitStyle0;
-const styleCss$N = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-item-selected-background));color:rgb(var(--smoothly-item-selected-foreground));border-left:.3em solid rgb(var(--smoothly-item-selected-border))}[disabled].sc-smoothly-item-h,.sc-smoothly-item-h[disabled].sc-smoothly-item-s>*{background-color:rgb(var(--smoothly-item-disabled-background));color:rgb(var(--smoothly-item-disabled-foreground));opacity:var(--smoothly-item-disabled-opacity);cursor:not-allowed}.sc-smoothly-item-h{padding:0.5em;cursor:pointer;border-left:.3em solid transparent;color:rgb(var(--smoothly-item-foreground));fill:rgb(var(--smoothly-item-foreground));stroke:rgb(var(--smoothly-item-foreground));box-sizing:border-box;min-height:3rem}.sc-smoothly-item-h.sc-smoothly-item-s>*{color:rgb(var(--smoothly-item-foreground));fill:rgb(var(--smoothly-item-foreground));stroke:rgb(var(--smoothly-item-foreground))}.sc-smoothly-item-h:not([disabled])[marked],.sc-smoothly-item-h:not([disabled]):hover,.sc-smoothly-item-h:not([disabled])[marked].sc-smoothly-item-s>*,.sc-smoothly-item-h:not([disabled]):hover.sc-smoothly-item-s>*{background-color:rgb(var(--smoothly-item-hover-background));color:rgb(var(--smoothly-item-hover-foreground));fill:rgb(var(--smoothly-item-hover-foreground));stroke:rgb(var(--smoothly-item-hover-foreground))}";
-const SmoothlyItemStyle0 = styleCss$N;
+const styleCss$C = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-item-selected-background));color:rgb(var(--smoothly-item-selected-foreground));border-left:.3em solid rgb(var(--smoothly-item-selected-border))}[disabled].sc-smoothly-item-h,.sc-smoothly-item-h[disabled].sc-smoothly-item-s>*{background-color:rgb(var(--smoothly-item-disabled-background));color:rgb(var(--smoothly-item-disabled-foreground));opacity:var(--smoothly-item-disabled-opacity);cursor:not-allowed}.sc-smoothly-item-h{padding:0.5em;cursor:pointer;border-left:.3em solid transparent;color:rgb(var(--smoothly-item-foreground));fill:rgb(var(--smoothly-item-foreground));stroke:rgb(var(--smoothly-item-foreground));box-sizing:border-box;min-height:3rem}.sc-smoothly-item-h.sc-smoothly-item-s>*{color:rgb(var(--smoothly-item-foreground));fill:rgb(var(--smoothly-item-foreground));stroke:rgb(var(--smoothly-item-foreground))}.sc-smoothly-item-h:not([disabled])[marked],.sc-smoothly-item-h:not([disabled]):hover,.sc-smoothly-item-h:not([disabled])[marked].sc-smoothly-item-s>*,.sc-smoothly-item-h:not([disabled]):hover.sc-smoothly-item-s>*{background-color:rgb(var(--smoothly-item-hover-background));color:rgb(var(--smoothly-item-hover-foreground));fill:rgb(var(--smoothly-item-hover-foreground));stroke:rgb(var(--smoothly-item-hover-foreground))}";
+const SmoothlyItemStyle0 = styleCss$C;
 const SmoothlyItem = class {
     constructor(hostRef) {
@@ -10753,7 +10715,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (index.h(index.Host, { key: '43c89251f05f6c6e6d9b6364c44cc4625ebb560b', tabIndex: -1 }, index.h("slot", { key: '51384f68f245a159fb854a9c1240b02f4eccf672' })));
+        return (index.h(index.Host, { key: '51866154258a830cd316996c2995632892c68034', tabIndex: -1 }, index.h("slot", { key: 'd09f55dd228895f53f8ba4231229ea98aab10b48' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10762,8 +10724,8 @@ const SmoothlyItem = class {
 };
 SmoothlyItem.style = SmoothlyItemStyle0;
-const styleCss$M = ".sc-smoothly-label-h{position:relative;width:max-content;display:flex;justify-content:center;align-items:center;padding:0.15em 0.6em;border-radius:2em;color:rgb(var(--smoothly-default-contrast));background-color:hsl(var(--hue), 85%, 70%)}[shape=rectangle].sc-smoothly-label-h{border-radius:0.3em}";
-const SmoothlyLabelStyle0 = styleCss$M;
+const styleCss$B = ".sc-smoothly-label-h{position:relative;width:max-content;display:flex;justify-content:center;align-items:center;padding:0.15em 0.6em;border-radius:2em;color:rgb(var(--smoothly-default-contrast));background-color:hsl(var(--hue), 85%, 70%)}[shape=rectangle].sc-smoothly-label-h{border-radius:0.3em}";
+const SmoothlyLabelStyle0 = styleCss$B;
 const SmoothlyLabel = class {
     constructor(hostRef) {
@@ -10774,15 +10736,15 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'e707400400f0a62c9f515b8b8b7eeea0e2b8341f', title: this.description, style: {
+        return (index.h(index.Host, { key: '0fc0990f6f3a09be9ba3d964867e6e964725499f', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index.h("slot", { key: 'a15aa17b778520de6770aa51780532625ef97b12' })));
+            } }, index.h("slot", { key: '6e1b85b84645891087866414a70a9f91aa90a8db' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
-const styleCss$L = ".sc-smoothly-lazy-h{display:block}";
-const SmoothlyLazyStyle0 = styleCss$L;
+const styleCss$A = ".sc-smoothly-lazy-h{display:block}";
+const SmoothlyLazyStyle0 = styleCss$A;
 const SmoothlyLazy = class {
     constructor(hostRef) {
@@ -10795,7 +10757,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index.h(index.Host, { key: '456486b3992a1f20395368286a55de3354ec032c' }, index.h("slot", { key: '529fa4229d8d4425fd591a49cbf02d5511b4ba43', name: "before" }), index.h("smoothly-load-more", { key: 'd8412e6f119340e3e41a53118ff432ba68daa5bb', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '81acba6b30bb362cb35a8e4b1b5f24544c1eecd2' })));
+        return (index.h(index.Host, { key: 'de115abe3101a1fa5d32e3ae3cef919afca90ea4' }, index.h("slot", { key: '61aa5f412fbbeca1c1b2f9bafde7d87bca0a94b9', name: "before" }), index.h("smoothly-load-more", { key: '6c3bd20f8f1b0d2b8900dcbb640f33dd76c7452a', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: 'f0b6bd381a12f5270797494a6eb414c38763e5fd' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -10839,13 +10801,13 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: '88d78cc2de5316901400d9aaf4b4821c41141a6f' });
+        return index.h(index.Host, { key: '7169adeca2956b6f0c85e3a7ceab410a3dddd7f5' });
     }
     get element() { return index.getElement(this); }
 };
-const styleCss$K = ".sc-smoothly-modal-h{position:fixed;display:flex;justify-content:center;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--smoothly-modal-backdrop));color:rgb(var(--smoothly-modal-foreground));z-index:5}.sc-smoothly-modal-h:not([open]),[hidden].sc-smoothly-modal-h{display:none}[align=center].sc-smoothly-modal-h{align-items:center}[align=top].sc-smoothly-modal-h>div.modal.sc-smoothly-modal{margin-top:calc((100dvh - var(--smoothly-modal-max-height)) / 2)}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal{display:flex;flex-direction:column;padding:2rem;gap:1.5rem;width:var(--smoothly-modal-width, 40rem);max-width:calc(100dvw - 1rem);height:fit-content;max-height:min(var(--smoothly-modal-max-height), 100dvh);background:rgb(var(--smoothly-modal-background, var(--smoothly-color)));border:1px solid rgb(var(--smoothly-modal-border));border-radius:var(--smoothly-modal-border-radius);box-shadow:var(--smoothly-modal-shadow);box-sizing:border-box}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:empty,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal:empty{display:none}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal{display:flex;justify-content:space-between;align-items:center}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>*.sc-smoothly-modal{margin-block:0}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal:not(.header):not(.actions){overflow-y:auto}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:not(:has([slot=\"header\"])){justify-content:end}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]){cursor:pointer;opacity:0.7;color:rgb(var(--smoothly-default-contrast))}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]):hover{opacity:1}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}";
-const SmoothlyModalStyle0 = styleCss$K;
+const styleCss$z = ".sc-smoothly-modal-h{position:fixed;display:flex;justify-content:center;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--smoothly-modal-backdrop));color:rgb(var(--smoothly-modal-foreground));z-index:5}.sc-smoothly-modal-h:not([open]),[hidden].sc-smoothly-modal-h{display:none}[align=center].sc-smoothly-modal-h{align-items:center}[align=top].sc-smoothly-modal-h>div.modal.sc-smoothly-modal{margin-top:calc((100dvh - var(--smoothly-modal-max-height)) / 2)}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal{display:flex;flex-direction:column;padding:2rem;gap:1.5rem;width:var(--smoothly-modal-width, 40rem);max-width:calc(100dvw - 1rem);height:fit-content;max-height:min(var(--smoothly-modal-max-height), 100dvh);background:rgb(var(--smoothly-modal-background, var(--smoothly-color)));border:1px solid rgb(var(--smoothly-modal-border));border-radius:var(--smoothly-modal-border-radius);box-shadow:var(--smoothly-modal-shadow);box-sizing:border-box}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:empty,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal:empty{display:none}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal{display:flex;justify-content:space-between;align-items:center}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>*.sc-smoothly-modal{margin-block:0}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal:not(.header):not(.actions){overflow-y:auto}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:not(:has([slot=\"header\"])){justify-content:end}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]){cursor:pointer;opacity:0.7;color:rgb(var(--smoothly-default-contrast))}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]):hover{opacity:1}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}";
+const SmoothlyModalStyle0 = styleCss$z;
 const SmoothlyModal = class {
     constructor(hostRef) {
@@ -10859,7 +10821,7 @@ const SmoothlyModal = class {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '801947ef6b4a478a8f886a8c4ae1dd56524a63ea', role: "alertdialog" }, index.h("div", { key: '7c985ac2faa462ba5032eda403590bb2f7a4ee54', class: "modal" }, index.h("div", { key: '76980f70e1ee060a8ed350bdf0853541c0ac405d', class: "header" }, index.h("slot", { key: 'd44475efdc67173d95fa445dd0c315e19e945d66', name: "header" }), this.closable && index.h("smoothly-icon", { key: '208721565897332ba64c7dfeca45c7963f281447', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: '94c8fefa8d6fecd8cddeb1081e7a8e0e3f9037b8' }), index.h("div", { key: 'f9a0794ce0b7b950c7cbd49fb1129a5d3b4bf8b1', class: "actions" }, index.h("slot", { key: '2b248577e2099e7391bbbc10f9c68594db42fc16', name: "actions" })))));
+        return (index.h(index.Host, { key: '583eadffaf2e24575a5c1cc4e1fddd804b184dd5', role: "alertdialog" }, index.h("div", { key: 'ca8af6bb11f18895f1899db9facd795c061430c0', class: "modal" }, index.h("div", { key: 'bc66d69748c12e5707f7c601717d1f96309ee09d', class: "header" }, index.h("slot", { key: 'b41c4051fd74e25efc53334172724b91070a4359', name: "header" }), this.closable && index.h("smoothly-icon", { key: '138c5ba8fdcf1d1132d92c36299615ea1fda0f3a', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), index.h("slot", { key: '0ac2f594b68b53729724f8fc372b9a451d42b909' }), index.h("div", { key: '05b7d6ca01ee55b0e2a1afd34226505a0f9772c1', class: "actions" }, index.h("slot", { key: 'd3395b6b76ace8c9916b9d60e4208bd7a3e8d032', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -10867,156 +10829,477 @@ const SmoothlyModal = class {
 };
 SmoothlyModal.style = SmoothlyModalStyle0;
-const styleCss$J = ".sc-smoothly-next-demo-h{display:grid;gap:5rem;box-sizing:border-box;max-width:80rem;width:100%;margin:auto;padding:2rem}";
-const SmoothlyNextDemoStyle0 = styleCss$J;
+const styleCss$y = ".sc-smoothly-notification-h{display:block;position:relative;min-width:30em;min-height:3em;border-radius:5px;margin:0.5em}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification,.sc-smoothly-notification-h>span.clean.sc-smoothly-notification{display:flex;justify-content:center;align-self:center}.sc-smoothly-notification-h>span.sc-smoothly-notification{margin:0 2rem 0 1rem}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification{display:flex;width:100%;justify-content:center}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>p.sc-smoothly-notification{padding-right:1em}.sc-smoothly-notification-h>span.sc-smoothly-notification>p.sc-smoothly-notification{text-align:left}[hidden].sc-smoothly-notification-h{display:none}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification{margin:0 0.5rem}.sc-smoothly-notification-h>smoothly-trigger.sc-smoothly-notification{font-size:0.7em;position:absolute;right:0}";
+const SmoothlyNotificationStyle0 = styleCss$y;
+const Notification = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.remove = index.createEvent(this, "remove", 7);
+        this.listener = notice => {
+            if (notice.state == "closed")
+                this.remove.emit(notice);
+            else
+                this.tick = {};
+        };
+        this.notice = undefined;
+        this.closable = true;
+        this.icon = undefined;
+        this.tick = {};
+    }
+    get properties() {
+        let result;
+        switch (this.notice.state) {
+            case "delayed":
+            case "warning":
+                result = ["warning", "warning-outline"];
+                break;
+            case "success":
+                result = ["success", "checkmark-circle"];
+                break;
+            case "executing":
+                result = ["light", "hourglass-outline"];
+                break;
+            case "failed":
+                result = ["danger", "alert-circle"];
+                break;
+            default:
+                result = ["light", undefined];
+                break;
+        }
+        return result;
+    }
+    onTrigger(event) {
+        if (event.detail.name == "close") {
+            event.stopPropagation();
+            this.notice.close();
+        }
+    }
+    onUpdatedNotice(newValue, oldValue) {
+        if (oldValue)
+            oldValue.unlisten(this.listener);
+        newValue.listen(this.listener);
+    }
+    componentDidLoad() {
+        this.onUpdatedNotice(this.notice);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c611384b95683af1f6ed47b501214a6271120cc5', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: 'b35a32ca975321bce93d94d0d9fd85efe3779493', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '39ed83da3b2e2705de5e420e96b5a9157324c422', name: "close-circle-outline" }))), index.h("span", { key: 'bacd889f892be05aa3cef0cddfaaf16675372eb9', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '91470bdc68bb23be8b6b74eb62bca99f3c7566cd', name: this.properties[1] }), index.h("p", { key: '4ba91f71befba77a1510469899850f78d9300ab1' }, this.notice.message))));
+    }
+    static get watchers() { return {
+        "notice": ["onUpdatedNotice"]
+    }; }
+};
+Notification.style = SmoothlyNotificationStyle0;
+const styleCss$x = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;position:fixed;bottom:3rem;left:0;text-align:center;z-index:100}";
+const SmoothlyNotifierStyle0 = styleCss$x;
-const SmoothlyNextDemo = class {
+const Notifier = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.icon = false;
+        this.notices = [];
+    }
+    onNotice(event) {
+        this.notices = [...this.notices, event.detail];
+    }
+    onRemove(event) {
+        this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (index.h(index.Host, { key: '77f3283fde37e54b01579e48c68c902d2bb86c87' }, index.h("smoothly-next-demo-filler-row-demo", { key: 'e444e7bf46afead76768a7b28c4c6da1f54f25d1' }), index.h("smoothly-next-demo-group", { key: '3f9156e7f83e2702c61a3b138f1315e040b0074d' }), index.h("smoothly-next-demo-colspan", { key: '9505639e7f3c473e9c5709b378258b685053070b' }), index.h("smoothly-next-demo-simple", { key: '170dcda20a68650c765f40df09a9c66a3744c73e' }), index.h("smoothly-next-demo-nested", { key: '606abd8e4cd0aeb491ff6cb90de1dfbc9eaeb407' }), index.h("smoothly-next-table-demo-filtered", { key: '8d052af6a38c5b2b95259357b75b9157924faaa1' })));
+        return [
+            index.h("slot", { key: '3dc0962bdfdfd4e8903426f810209aa823e7b72e' }),
+            index.h("aside", { key: 'fb97e4ecd99175554a59212cd3054ef3577e3cad' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
+        ];
     }
 };
-SmoothlyNextDemo.style = SmoothlyNextDemoStyle0;
+Notifier.style = SmoothlyNotifierStyle0;
-const styleCss$I = ".sc-smoothly-next-demo-colspan-h{display:block}.sc-smoothly-next-demo-colspan-h smoothly-display.sc-smoothly-next-demo-colspan{display:inline}";
-const SmoothlyNextDemoColspanStyle0 = styleCss$I;
+const styleCss$w = "[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h{cursor:wait;--spinner-time:1.4s;--spinner-color:var(--smoothly-color-contrast);--spinner-background:var(--smoothly-color);--spinner-background-opacity:var(--smoothly-semitransparent, 0.8);display:block;stroke:rgb(var(--spinner-color));background-color:rgba(var(--spinner-background), var(--spinner-background-opacity))}.sc-smoothly-spinner-h:not([overlay]){width:var(--spinner-size);height:var(--spinner-size)}[overlay].sc-smoothly-spinner-h{position:absolute;inset:0;width:100%;height:100%;z-index:4;background-color:rgba(var(--spinner-background), var(--spinner-background-opacity))}[color].sc-smoothly-spinner-h:not([overlay]),[color][overlay].sc-smoothly-spinner-h{background-color:rgba(var(--spinner-background), var(--spinner-background-opacity));stroke:rgb(var(--spinner-color))}[overlay].sc-smoothly-spinner-h>svg.sc-smoothly-spinner{position:absolute;width:var(--spinner-size);left:calc(50% - var(--spinner-size) / 2);top:calc(50% - var(--spinner-size) / 2)}.sc-smoothly-spinner-h>svg.sc-smoothly-spinner{animation:SPIN-SVG var(--spinner-time) linear infinite}.sc-smoothly-spinner-h>svg.sc-smoothly-spinner>circle.sc-smoothly-spinner{transform-origin:center;animation:SPIN-CIRCLE var(--spinner-time) ease-in-out infinite;stroke-dasharray:187;stroke-dashoffset:0}@keyframes SPIN-SVG{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes SPIN-CIRCLE{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}";
+const SmoothlySpinnerStyle0 = styleCss$w;
-const SmoothlyNextDemoColspan = class {
+const SmoothlySpinner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.size = "large";
+        this.overlay = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'f4b9dedf21ff1bc10b8b5846f31066e8b982df5b' }, index.h("smoothly-next-table", { key: 'fcc3275be4f42a5655ed6c31afbb4e99e566f430', columns: 3 }, index.h("smoothly-next-table-head", { key: '22baac2ea55e6f5109fe7eeb9a5307acfbb01b33' }, index.h("smoothly-next-table-row", { key: '2b5ef747bcc723acc2a587c683cfaae1fc236926' }, index.h("smoothly-next-table-cell", { key: '2d7d833c0f5f4d617470b74b8a45c68bd691464c' }, "Date"), index.h("smoothly-next-table-cell", { key: 'ca2a65a1319363134923542878524b31967aac43' }, "Skip"), index.h("smoothly-next-table-cell", { key: '7834a87db66b346cc9bc6c5fa2cf29c76c94cea3' }, "Total"))), index.h("smoothly-next-table-body", { key: '91cb707c1edb81d26df9b95fa311ce17be675f48' }, index.h("smoothly-next-table-row", { key: '133a083be06cccb72d0ab04b5782b4b644a4f422' }, index.h("smoothly-next-table-cell", { key: '0f6ba7ca4bf7e40950862a256e4dc6fb7e95733d', span: 2 }, index.h("smoothly-display", { key: 'bc17db67687b098609e1be26ad1c6f6a62537ec2', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: 'ede7cc9b3a41505a1bf3ed95c66f71235f2ee7f0' }, index.h("smoothly-display", { key: 'cbe24d66d6922a51aecd1d8ec43564887a31a2cc', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '210fc2e7486179f9018ec60c857e3fae7e9b5212' }, index.h("smoothly-next-table-expandable-cell", { key: '8e4812931707a514be28b4b21bdabc4181454716', span: 2 }, index.h("smoothly-display", { key: '20fc43a45a6fd58a5a28c6a7195366caff87433a', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '32ab868369e465b891408cdb89391dab342452e9', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-next-table-expandable-cell", { key: '028d8ea8539bcb61de41074b0465b24c4ee2d7fb' }, index.h("smoothly-display", { key: '88f1ca1dcb24fd7753be901fa5f361ab8b0bd788', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '928ae7c789c543dba2dd18a93b4ef8d4e8e2941d', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index.h("smoothly-next-table-row", { key: '4dc6398001ea9fbefba2300eabaa7046ae8bcf8d' }, index.h("smoothly-next-table-cell", { key: 'a4ddd0e4adb3969bfb21cdbaa722d54443e589ae' }, index.h("smoothly-display", { key: 'ed638e181d9907dd9f10a74a23ae8121e3c9a0d2', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '3d65be363fff107f6a81e872bedbcee3f03cfb6b' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '0bc8547528f9dc2f75bd46dad39661114606a3ac' }, index.h("smoothly-display", { key: '724b68d3980c0bba5cd82cc97ee3fd47bbf6936b', type: "price", value: 320, currency: "EUR" })))))));
+        const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
+        return (index.h(index.Host, { key: 'ad927ab405fb8e1d9f65754de12159074f4674e4', style: {
+                "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
+            } }, index.h("svg", { key: 'c40d7dc9441ded52ef098365baf77870b110f757', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'c3316f222b869cca1e1fd167c39a064ea3f210ab', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
-SmoothlyNextDemoColspan.style = SmoothlyNextDemoColspanStyle0;
+SmoothlySpinner.style = SmoothlySpinnerStyle0;
-const styleCss$H = ".sc-smoothly-next-demo-filler-row-demo-h{display:block}.sc-smoothly-next-demo-filler-row-demo-h>smoothly-display.sc-smoothly-next-demo-filler-row-demo{font-size:2em}.sc-smoothly-next-demo-filler-row-demo-h>*.sc-smoothly-next-demo-filler-row-demo{margin-bottom:2rem}";
-const SmoothlyNextDemoFillerRowDemoStyle0 = styleCss$H;
+const styleCss$v = ".sc-smoothly-summary-h{display:grid;grid-template-columns:auto 1fr;column-gap:0.3rem}.sc-smoothly-summary-h>details.sc-smoothly-summary{display:contents}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary{display:grid;grid-template-columns:subgrid;grid-column:1/-1;list-style:none;align-items:center;cursor:pointer}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:transform 0.2s, opacity 0.1s;opacity:0.3}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary:hover>smoothly-icon.sc-smoothly-summary{opacity:1}.sc-smoothly-summary-h>details[open].sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transform:rotate(90deg)}.sc-smoothly-summary-h>details.sc-smoothly-summary-s>[slot=content]{grid-column:2}@media (prefers-reduced-motion){.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:none}}@supports selector(details::details-content){.sc-smoothly-summary-h>details.sc-smoothly-summary::details-content{grid-column:2}}";
+const SmoothlySummaryStyle0 = styleCss$v;
-const SmoothlyNextDemoFillerRowDemo = class {
+const SmoothlySummary = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.cats = [];
+        this.smoothlySummaryOpen = index.createEvent(this, "smoothlySummaryOpen", 7);
+        this.inputs = {};
+        this.open = false;
+        this.color = undefined;
+        this.fill = "solid";
+        this.size = "tiny";
+    }
+    async toggleHandler(event) {
+        if (event.target instanceof HTMLDetailsElement) {
+            this.open = event.target.open;
+            this.smoothlySummaryOpen.emit(this.open);
+            this.open
+                ? await Promise.all(Object.values(this.inputs).map(input => input.register()))
+                : await Promise.all(Object.values(this.inputs).map(input => input.unregister()));
+        }
+    }
+    onInputLoad(event) {
+        if (Input.Element.is(event.target)) {
+            this.inputs[event.target.name] = event.target;
+            if (!this.open)
+                event.stopPropagation();
+        }
+    }
+    render() {
+        return (index.h("details", { key: '867e247e3c2b27f03fe3d8d79ddccd2a4a24bd2a', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '302c2da5ca9acd9b7b1d0500f7cd449d5c0363b9' }, index.h("smoothly-icon", { key: 'd8f86b4a3a12ccb790a9d00269501d8f427eafcb', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: 'b6746b271026ed27921a810b9adcc30a5d139a57', name: "summary" })), index.h("slot", { key: '81118cd7721c2ed5294eabb32c0fe819c423d9e0', name: "content" })));
+    }
+};
+SmoothlySummary.style = SmoothlySummaryStyle0;
+const styleCss$u = ".sc-smoothly-tab-h{display:contents;--line-width:3px}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child{grid-column:span 1;background-color:transparent;border-bottom-color:rgb(var(--smoothly-default-shade));border-bottom-width:var(--line-width);border-bottom-style:solid}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{display:block;padding:.5rem;width:fit-content;margin:auto;cursor:pointer}[open].sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{border-bottom:var(--line-width) solid rgb(var(--smoothly-primary-color));margin-bottom:calc(-1 * var(--line-width));position:relative}.sc-smoothly-tab-h>div.sc-smoothly-tab:nth-child(2){grid-row:2 / 3;grid-column:1 / -1}";
+const SmoothlyTabStyle0 = styleCss$u;
+const SmoothlyTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.smoothlyTabOpen = index.createEvent(this, "smoothlyTabOpen", 7);
+        this.smoothlyTabLoad = index.createEvent(this, "smoothlyTabLoad", 7);
+        this.inputs = {};
+        this.label = undefined;
+        this.open = undefined;
+    }
+    async openHandler() {
+        if (this.open)
+            this.smoothlyTabOpen.emit(this.label);
+        this.open
+            ? await Promise.all(Object.values(this.inputs).map(input => input.register()))
+            : await Promise.all(Object.values(this.inputs).map(input => input.unregister()));
+    }
+    onClick() {
+        this.open = true;
+    }
+    connectedCallback() {
+        this.smoothlyTabLoad.emit();
     }
     async componentDidLoad() {
-        window.setTimeout(() => {
-            this.cats = undefined;
-        }, 3000);
+        await this.openHandler();
+    }
+    onInputLoad(event) {
+        if (Input.Element.is(event.target)) {
+            this.inputs[event.target.name] = event.target;
+            if (!this.open)
+                event.stopPropagation();
+        }
     }
     render() {
-        return (index.h(index.Host, { key: '30e3c4d25ef807be7419dab29ccc640b8b31bf06' }, index.h("smoothly-display", { key: '6591ac275302c2d8281b377d4abdbeb8d415e0f0', type: "text", value: "Filler row" }), index.h("smoothly-next-table", { key: 'ebfce17362e0fcb5cd63caba4f0fe1313c8ea3b2', color: "primary", columns: 4 }, index.h("smoothly-next-table-head", { key: '4cd56033a6a04a4e4217be8fb1b8b4bd68e56b36' }, index.h("smoothly-next-table-row", { key: '7e46a458e7805266fe3eca11973e4c8ee529387f' }, index.h("smoothly-next-table-cell", { key: 'aeb99aa8c144dc58e0b4c029d937a52c8dce59d8' }, "Breed"), index.h("smoothly-next-table-cell", { key: 'f6a5be96cbe6b2ed93db037ba3e7dfd0198d83db' }, "Country"), index.h("smoothly-next-table-cell", { key: 'c92067b9d661d669b2941d6e8d6d2fa1100faa4a' }, "Coat"), index.h("smoothly-next-table-cell", { key: '867960d040823b2a28850e0ddca464c0bcbbcb51' }, "Origin"))), index.h("smoothly-next-table-body", { key: '3d4a400189f57525c9148d573f5059f383e7d697' }, this.cats === undefined ? (index.h("smoothly-next-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-next-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", null, a.breed), index.h("smoothly-next-table-cell", null, a.country), index.h("smoothly-next-table-cell", null, a.coat), index.h("smoothly-next-table-cell", null, a.origin)))))))));
+        return (index.h(index.Host, { key: 'cf40ac0574fdd7f01bc314ae73fadba15bfbe85b' }, index.h("div", { key: '4bc51b1667b0e5e9d859e9ee56cb60e595d3834b' }, index.h("label", { key: '82086748d110f0b960196cc23c6293926e136edf' }, this.label)), index.h("div", { key: 'e82a249814fda484771336d830f5ed2b63205da9', hidden: !this.open }, index.h("slot", { key: '3b57b209692f6a98d826c53154ae98e8a6201dee' }))));
     }
+    static get watchers() { return {
+        "open": ["openHandler"]
+    }; }
 };
-SmoothlyNextDemoFillerRowDemo.style = SmoothlyNextDemoFillerRowDemoStyle0;
+SmoothlyTab.style = SmoothlyTabStyle0;
-const styleCss$G = ".sc-smoothly-next-demo-group-h{display:block}.sc-smoothly-next-demo-group-h smoothly-display.sc-smoothly-next-demo-group{display:inline}.sc-smoothly-next-demo-group-h fake-cell-wrapper.span-2.sc-smoothly-next-demo-group{grid-column:span 2}.sc-smoothly-next-demo-group-h>smoothly-display.sc-smoothly-next-demo-group{display:inherit;font-size:2em}.sc-smoothly-next-demo-group-h>*.sc-smoothly-next-demo-group{margin-bottom:2rem}.sc-smoothly-next-demo-group-h fake-group-wrapper.sc-smoothly-next-demo-group,.sc-smoothly-next-demo-group-h fake-row-wrapper.sc-smoothly-next-demo-group,.sc-smoothly-next-demo-group-h fake-expandable-row-wrapper.sc-smoothly-next-demo-group{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.sc-smoothly-next-demo-group-h fake-cell-wrapper.sc-smoothly-next-demo-group{grid-column:span 1;display:block}.sc-smoothly-next-demo-group-h fake-expandable-cell-wrapper.sc-smoothly-next-demo-group{display:contents}";
-const SmoothlyNextDemoGroupStyle0 = styleCss$G;
+const styleCss$t = ".sc-smoothly-table-h{display:grid;grid-template-columns:repeat(var(--columns), auto);color:rgb(var(--smoothly-table-foreground));stroke:rgb(var(--smoothly-table-foreground));fill:rgb(var(--smoothly-table-foreground))}";
+const SmoothlyTableStyle0 = styleCss$t;
-const SmoothlyNextDemoGroup = class {
+const SmoothlyTable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.columns = 1;
+    }
+    smoothlyTableExpandableRowChange(event) {
+        event.stopPropagation();
+    }
+    smoothlyTableExpandableCellChange(event) {
+        event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: 'f438f845e508f119760a5d9d1417537e0a187c8d' }, index.h("smoothly-display", { key: 'b063c8b2e634ad0334c5eee04fac31d3d2fa5cea', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: '52246d8d8cc18b2c732722f78a8f92ed9f7fc56f', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '03d8a1fd2afc66618c4636efabfc242b8107ce89' }, index.h("smoothly-next-table-row", { key: '389efc99c30410173841b3898b03bfa344c84fc2' }, index.h("smoothly-next-table-cell", { key: '2a1252bf188f55b0c8530490c7e5a191933c2e51' }, "Date"), index.h("smoothly-next-table-cell", { key: '981a383ac216ad3a763b10b77a78e56b2e0acb9d' }, "Total"))), index.h("smoothly-next-table-body", { key: '352c32809ef5a0a6f026f121b3e9fa7c5602fc9b' }, index.h("smoothly-next-table-row-group", { key: '34b2cde15f636a4a1bd8219f3b82655014a6827f', align: true }, index.h("smoothly-display", { key: '6d08243f9bed82544920f2b1e29c8cd87ac6fc7b', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'c36b911fb892d60f7285bb44cdd531dd49f32f80', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: 'dc9d0a9925e00e9f8cb43a417d3967678a4cf793' }, index.h("smoothly-next-table-cell", { key: 'd15f4087317aab19ca1c4f8082e53ef73b5f4e72' }, index.h("smoothly-display", { key: 'e97116560bc6cec0faca35bb072e2513d933a6ba', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'dd63e1ac67603230824f3eb3dbd0608d885dda1c' }, index.h("smoothly-display", { key: 'd2a71eebcb034dae79995da03e1a158aa27c86c6', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '217d130757e685618c2e880852765916eea69a4e', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'a493c7ac95042b65c65919ec8e8f446008e95727' }, index.h("smoothly-next-table-cell", { key: 'f80da21fdaf0ed83ffeda20884f79868488994f9' }, index.h("smoothly-display", { key: 'f0fcc94ccef41a242cc1a3993b79970e79798d29', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '354a83be386ed4dc31e2cc9e3dca5f5c03e89a0f' }, index.h("smoothly-display", { key: 'df7600b467501dce2faf70a97f493f4a28ee31f0', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '2472126497a4abbe6dff4878c12e922620611a01', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: 'ea225e8856b326e1b26a7495b42905853ec4bf60' }, index.h("smoothly-next-table-cell", { key: '2f32e34fe19a259d3212770e342092a7831a3e7a' }, index.h("smoothly-display", { key: '21ff447d38f07c50e6101438e61dddf43a0cf3bb', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '55052d34e1bc2a4cf7e092785e12153e05632bed' }, index.h("smoothly-display", { key: '631ac0e93aaaa61d9af8f9096b3a6d7d1fea9ad3', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: '5b9248a9e92120d03766c3ce67865a59e8b5bfd8' }, index.h("smoothly-display", { key: '41197505cd1a42721c0d9844616e04e870d2e0a2', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '7302e8c593ef5bc023bb233282f327793856593c', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: 'e0a6c69ab62a15c43e44816cb5130e58ceec4492' }, index.h("smoothly-next-table-cell", { key: '4a48560719d745cf3015d8d34c151276bb13eaea' }, index.h("smoothly-display", { key: '2fdae1cb2862c52c685f9f7ed9087fcbb4a08b60', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '2f00eb73e451ad74bfff8b01f2eee8adcae5f94c' }, index.h("smoothly-display", { key: '304430905b43e8995f90c3812cfebc8104d3e150', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'e141401ae7f5b7c45a00b09e9cfe12e9b8c597ab', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '50de8386a3d931a717f14720c8f352532943b773' }, index.h("smoothly-next-table-cell", { key: '6739fea91bb41955864d52cb4a5c85e4c2f81b83' }, index.h("smoothly-display", { key: '94fd10189e30070f6ea7d210e09c9ecfd9ad64d7', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'f78b644c126d08151babb3e024e2a79e61ffaf46' }, index.h("smoothly-display", { key: '720a36e523dd6eabfe3b3f71abf7087955c52224', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '340d8a3270f6128d0bc19504d88f1732bcf84bee', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'c34727de27d394bb98b879884b673d0bd75750ae' }, index.h("smoothly-display", { key: '567b2e5b524c9cada1aa51785c9da29a3ff8f6e7', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: 'e9397664dfb67b2aa789c258cbb7db52331b9f11' }, index.h("smoothly-next-table-cell", { key: '133d0c0bbad9906cdd7fed0002281e6bd8f95735' }, index.h("smoothly-display", { key: '12553307bd2858b815d1b1fd3bb60cca3a9ac172', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'bb16cb23cd3bf926a3e7cff600ec5e46afb49d95' }, index.h("smoothly-display", { key: '946cb985b7983915c63cb9bec0c77bc014c057e5', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'ec0e18ee5349eb4c741033ffab823a603d818d40', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '7de78cf016e32c3377629ff7839493ed17655c9c' }, index.h("smoothly-next-table-cell", { key: '77683b0d026583ba660324feb22e098f7f994a15' }, index.h("smoothly-display", { key: '8e278dc09aa54b862b5eba6b9bcc37207a790c71', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '158c5fc2040dedf1d7a243db4ddd94bcd1830b31' }, index.h("smoothly-display", { key: '61f2712bb9661e12899b47596ba0600972c4aa1e', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '7e36c202eeaa9f50c9dee678bf7701f1309f5a76', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: 'bc2b345fdc9685d08783167a6bbdbbfacda38862' }, index.h("smoothly-display", { key: '5585c6dcc49ebb4618884ae160bf912897a0518c', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: 'a82a7353e74bda8c0ad2cc0ee67ae01999d4166c' }, index.h("smoothly-next-table-cell", { key: 'c05d7d3a0be4835275dcc3843a00a59f04ab254f' }, index.h("smoothly-display", { key: '2b9558f096c0b9b5aa1079a62ab16ca13f1254e1', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '41eba08c01304a4f9aec7551a1ef4625a678a30c' }, index.h("smoothly-display", { key: 'f473141b066e0d2068e0ba6c08bc20ccda7134b9', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'b779ad6c760e839bcabf6510a87b103400d062a6', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '6866db858e2f5790f213fd12dd3c60f1fb8ec852' }, index.h("smoothly-next-table-cell", { key: '53f0601d302570f2626ac4585b421b1eab0b9a48' }, index.h("smoothly-display", { key: '4415bed74423eb3278d389edb9fc86aabe673fed', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'eb182a27716b2e2301a3dcd7384204ab4805f536' }, index.h("smoothly-display", { key: 'e33ea69bdeb61f7a8f6b3c86bf83599e3c9560e4', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'a3ce825e7a5aa4ef6d8b675376f51f43fbc9e928', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '472cde886820cf1be0c77f6e914770496722775f' }, index.h("smoothly-next-table-row-group", { key: '2a12af1141467042452b99b402e276357854b2b2' }, index.h("smoothly-display", { key: 'a8e15064f175eea2cce9e383b6946f8ac11cfb3f', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '7a66dd85295a699f11e24db5107528bd9dacbe6d', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '4824c878c60b359b8297947f3c73c95068ec1ede' }, index.h("smoothly-next-table-row", { key: 'd5fc8fd89983b5e298f1e64202f398c62aef84ec' }, index.h("fake-cell-wrapper", { key: '29039fbb6d1385c10f9bd1545e5693b6a909dd09' }, index.h("smoothly-next-table-cell", { key: '5884c013998c5a34ab6d2aa5dbc17f86dcd6336d' }, index.h("smoothly-display", { key: '2074cb5957766f3af4ac271dbb335a45f98a9934', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: '4a8d45a72dfe1b1e5cfd9143ea68d667f74fd683' }, index.h("smoothly-next-table-expandable-cell", { key: '8c773ef6fd9ada6046a8aaa6265f8db5d3de49ca' }, index.h("smoothly-display", { key: 'e101a532017ccd5b1a8c7e58f8daa4f2f0323b2b', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: 'b56e9ec28b863ad72afe97442be081655c18c4d3', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index.h("fake-expandable-row-wrapper", { key: 'f086248ed75c7f3f13869b68e9ccbb66a1f3504a' }, index.h("smoothly-next-table-expandable-row", { key: '3b91cdcd4900102f3628c761617ca864a102b8f7' }, index.h("fake-cell-wrapper", { key: 'f84d006ffa6d69515ecdcfa0f9f2d1a6f85b722a', class: "span-2" }, index.h("smoothly-next-table-cell", { key: '62bb0db4db5beef2ac5cbf44e3bcaff1b597a0b3', span: 2 }, index.h("smoothly-display", { key: 'd0376da98c0bb2dd5169718f6574d0d8c2a496c1', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '98fe8efda94c4771d5a11283886512115a46cc8c', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-next-table-row-group", { key: '81e12dd71cb3dc1a43168a10df3c08e751c1f7bf' }, index.h("smoothly-display", { key: '8caaad42fc515599c80fdd773da393e1a5a2e000', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '97b7d127b051bbf25ae93fca3c7bb2be01b0e3aa', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index.h(index.Host, { key: '9910a52a5c47f2aa29f68eb62cd451c4a03b2257', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: 'd439efe423eb6dbcc8612ea135710225f036efaa' })));
     }
 };
-SmoothlyNextDemoGroup.style = SmoothlyNextDemoGroupStyle0;
+SmoothlyTable.style = SmoothlyTableStyle0;
-const data$1 = [
-    {
-        id: "667d329f9f4934ecdc4bf9eb",
-        balance: 1450.03,
-        age: 35,
-        eyeColor: "blue",
-        name: "Glenda Ballard",
-        gender: "female",
-        company: "ZENTIA",
-        registered: "2022-06-13T12:39:15.908",
-        friends: [
-            {
-                id: 0,
-                name: "Manning Hunter",
-                age: 30,
-                balance: 1922.25,
-            },
-            {
-                id: 1,
-                name: "Mcmillan Oliver",
-                age: 32,
-                balance: 2440.53,
-            },
-            {
-                id: 2,
-                name: "Graham Garza",
-                age: 33,
-                balance: 3712.59,
-            },
-            {
-                id: 3,
-                name: "Gabrielle Neal",
-                age: 36,
-                balance: 2519.25,
-            },
-            {
-                id: 4,
-                name: "Dotson Duncan",
-                age: 29,
-                balance: 3274.11,
-            },
-        ],
-    },
-    {
-        id: "667d329f4e07097167ef92a2",
-        balance: 2488.91,
-        age: 21,
-        eyeColor: "blue",
-        name: "Delaney Haley",
-        gender: "male",
-        company: "COMTOURS",
-        registered: "2018-05-11T08:58:36.197",
-        friends: [
-            {
-                id: 0,
-                name: "Elsa Cochran",
-                age: 28,
-                balance: 2009.45,
-            },
-            {
-                id: 1,
-                name: "Willis Acevedo",
-                age: 33,
-                balance: 2198.01,
-            },
-            {
-                id: 2,
-                name: "Slater Fowler",
-                age: 34,
-                balance: 2888.16,
-            },
-            {
-                id: 3,
-                name: "Ashley Wilkerson",
-                age: 22,
-                balance: 1863.65,
-            },
-            {
-                id: 4,
-                name: "Ola Lynch",
-                age: 23,
-                balance: 3649.29,
-            },
-        ],
-    },
-    {
-        id: "667d329f14a0aeea0d70d5e7",
-        balance: 1660.91,
-        age: 36,
-        eyeColor: "brown",
-        name: "Riddle Reilly",
-        gender: "male",
+const styleCss$s = ".sc-smoothly-table-body-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;color:rgb(var(--smoothly-table-foreground));background-color:rgb(var(--smoothly-table-background))}";
+const SmoothlyTableBodyStyle0 = styleCss$s;
+const SmoothlyTableBody = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '3514090979dca3daa66aa8ea35358229fd0b9065' }, index.h("slot", { key: '9540bae0c43bdeff30d05835c2b039f23c9c458a' })));
+    }
+};
+SmoothlyTableBody.style = SmoothlyTableBodyStyle0;
+const styleCss$r = ".sc-smoothly-table-cell-h{grid-column:span var(--smoothly-table-cell-span, 1);display:flex;align-items:center;padding:0.3rem 1.1rem;white-space:nowrap}";
+const SmoothlyTableCellStyle0 = styleCss$r;
+const SmoothlyTableCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.span = 1;
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: '579536102af161d3f9eb9e00af627344d069b2d9', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '716b8539866c94a4e9f57beedc26c0b3398f3830' })));
+    }
+};
+SmoothlyTableCell.style = SmoothlyTableCellStyle0;
+const styleCss$q = ".sc-smoothly-table-demo-h{display:grid;gap:5rem;box-sizing:border-box;max-width:80rem;width:100%;margin:auto;padding:2rem}";
+const SmoothlyTableDemoStyle0 = styleCss$q;
+const SmoothlyTableDemo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f02c9aa3d13d5348511bc42671c77fe88473618e' }, index.h("smoothly-table-demo-filler-row", { key: '57b9f89eba6c6a93cfea05e753646a08ec5999d1' }), index.h("smoothly-table-demo-group", { key: '8bef227a7c5e4c4b3094c1ec04393909b22fdca9' }), index.h("smoothly-table-demo-colspan", { key: '2f4d90087abedaa28c03d535835f92b60f596241' }), index.h("smoothly-table-demo-simple", { key: 'c518a151a2d43c0377bd4d9d94f85497bb73c1ec' }), index.h("smoothly-table-demo-nested", { key: '4ce6c41b94062d9dfea5b1730cdda6e9a87391a6' }), index.h("smoothly-table-demo-filtered", { key: '4a7901a241a00affa343c593c477509776596735' })));
+    }
+};
+SmoothlyTableDemo.style = SmoothlyTableDemoStyle0;
+const styleCss$p = ".sc-smoothly-table-demo-colspan-h{display:block}.sc-smoothly-table-demo-colspan-h smoothly-display.sc-smoothly-table-demo-colspan{display:inline}";
+const SmoothlyTableDemoColspanStyle0 = styleCss$p;
+const SmoothlyTableDemoColspan = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '9f2e3eb9e4d95cd8230e6fb82791d5d0c6012b53' }, index.h("smoothly-table", { key: 'f74d01b7f0160f4b23424ffdb8fa6b7b44d9fedd', columns: 3 }, index.h("smoothly-table-head", { key: '4a53bd44d03ef7a46a46a85bd39af45b69456f59' }, index.h("smoothly-table-row", { key: '1823ff3900ae5b940aacafa8f1b610b51e4adaa4' }, index.h("smoothly-table-cell", { key: 'c5c75b7295bd895df50f12fed08995265ffbfbbb' }, "Date"), index.h("smoothly-table-cell", { key: '79bbe92adfea579806f89da74bff195092a1e85b' }, "Skip"), index.h("smoothly-table-cell", { key: 'c8541523b82dc0e447ab67b52ab66e15f655bf16' }, "Total"))), index.h("smoothly-table-body", { key: '7c924ca900b3d482b340d3cbb5b461cc0371dc45' }, index.h("smoothly-table-row", { key: '73845881085f1dba7afb783d6ec9eeea860df09f' }, index.h("smoothly-table-cell", { key: '33c011cd65a3cbed12dc95372b3cc8321861e2c8', span: 2 }, index.h("smoothly-display", { key: 'd35fb76e50566c42e4ae7834d056ec7c3fd19651', type: "date", value: "2024-01-01" })), index.h("smoothly-table-cell", { key: '34b5085f8162964c3b5a690704a28d57ba98c507' }, index.h("smoothly-display", { key: 'cf24a3b830e3f0e4e57b8c0ece0b8d639c11fc82', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-table-row", { key: '2a4f9a805b0141475f0f56305b68babfdbe99364' }, index.h("smoothly-table-expandable-cell", { key: '1e37cefbe785ecc65d5cec5370d8f1ec8ae155bc', span: 2 }, index.h("smoothly-display", { key: '16a398443bf00001d9302a106708a33739138cef', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: 'c872fac48a23e9245817e020bbf119f10abb5a87', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-table-expandable-cell", { key: 'a0619681740d615b3638b0c1381868fd876d7b96' }, index.h("smoothly-display", { key: '9b983efcc92fe95fa83b691ae129f4c81ec27566', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: 'c066cb080f4938384a01ec61b0d8660fc4f74267', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index.h("smoothly-table-row", { key: 'b50830acc0c012b28d177b54cacc50f8bd4bfb1e' }, index.h("smoothly-table-cell", { key: 'ce9db98b833a2e09ee94bfad3582c0d5d107d9f5' }, index.h("smoothly-display", { key: '5770b3138473dfd7fab6ec400f67250ac6b671f0', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'c9f828236815c213bb2e78f989f1a484f7fd5a26' }, "Not Skipped"), index.h("smoothly-table-cell", { key: 'ddd50ffd161dd24d9196e6760fcd9e4bfce003c6' }, index.h("smoothly-display", { key: '30b22f99777dcfb88cdb6420b718c45f709b2db5', type: "price", value: 320, currency: "EUR" })))))));
+    }
+};
+SmoothlyTableDemoColspan.style = SmoothlyTableDemoColspanStyle0;
+const styleCss$o = ".sc-smoothly-table-demo-filler-row-h{display:block}.sc-smoothly-table-demo-filler-row-h>smoothly-display.sc-smoothly-table-demo-filler-row{font-size:2em}.sc-smoothly-table-demo-filler-row-h>*.sc-smoothly-table-demo-filler-row{margin-bottom:2rem}";
+const SmoothlyTableDemoFillerRowStyle0 = styleCss$o;
+const SmoothlyTableDemoFillerRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.cats = [];
+    }
+    async componentDidLoad() {
+        window.setTimeout(() => {
+            this.cats = undefined;
+        }, 3000);
+    }
+    render() {
+        return (index.h(index.Host, { key: '4bfc0a1cdf124c7e8b9e139cea9fb1d40a698977' }, index.h("smoothly-display", { key: 'b4ecca1026d3f3c0d5fd964b0e6e668f068fd4de', type: "text", value: "Filler row" }), index.h("smoothly-table", { key: 'aa373236eada287cf36872a8309b46864cd8a23e', color: "primary", columns: 4 }, index.h("smoothly-table-head", { key: '0ab77571d777d6e808eaed27304af683dc0ae7ce' }, index.h("smoothly-table-row", { key: '5a615f3b3dfbb0c3c2627cb5fc93643931adebf3' }, index.h("smoothly-table-cell", { key: 'c874d318c92a76a6eca2050cde288ac99c6aa3de' }, "Breed"), index.h("smoothly-table-cell", { key: '8325696db18f5c147f6dce7154bfb5f328557fbe' }, "Country"), index.h("smoothly-table-cell", { key: '7bbb2ab808a0a51dbd00a4b0cd8b4e16a4901fc5' }, "Coat"), index.h("smoothly-table-cell", { key: 'a26e3b609437a4bb89485b02cfca289beba1c427' }, "Origin"))), index.h("smoothly-table-body", { key: 'e3505ea86686e84fd19a3bd054193e02a879396d' }, this.cats === undefined ? (index.h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, a.breed), index.h("smoothly-table-cell", null, a.country), index.h("smoothly-table-cell", null, a.coat), index.h("smoothly-table-cell", null, a.origin)))))))));
+    }
+};
+SmoothlyTableDemoFillerRow.style = SmoothlyTableDemoFillerRowStyle0;
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Selector_selected;
+class Selector {
+    get selected() {
+        var _a;
+        return (__classPrivateFieldSet(this, _Selector_selected, (_a = __classPrivateFieldGet(this, _Selector_selected, "f")) !== null && _a !== void 0 ? _a : Object.values(this.data), "f"));
+    }
+    constructor(key, data = {}) {
+        this.key = key;
+        this.data = data;
+        _Selector_selected.set(this, void 0);
+    }
+    handle(data) {
+        var _a;
+        return new Selector(this.key, "check-all" in data
+            ? (_a = data["check-all"]) !== null && _a !== void 0 ? _a : {}
+            : Object.fromEntries(Object.entries(Object.assign(Object.assign({}, this.data), data)).filter(([_, value]) => value != undefined)));
+    }
+    render(item) {
+        var _a, _b, _c;
+        return Array.isArray(item) ? (index.h("smoothly-checkbox", { name: "check-all", value: Object.fromEntries(item.map(i => [i[this.key], i])), intermediate: this.selected.length > 0 && this.selected.length < item.length, checked: this.selected.length == item.length ? true : this.selected.length == 0 && false })) : (index.h("smoothly-checkbox", { name: (_a = item[this.key]) === null || _a === void 0 ? void 0 : _a.toString(), value: item, checked: !!this.data[(_c = (_b = item[this.key]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ""] }));
+    }
+    static create(key) {
+        return new Selector(key);
+    }
+}
+_Selector_selected = new WeakMap();
+const styleCss$n = ".sc-smoothly-table-demo-filtered-h{display:grid;grid-template-columns:auto auto;grid-template-areas:\"header filter\"\n\t\t\"main main\";margin-bottom:50em}.sc-smoothly-table-demo-filtered-h>smoothly-display.sc-smoothly-table-demo-filtered{font-size:2em;grid-area:header}.sc-smoothly-table-demo-filtered-h>smoothly-filter.sc-smoothly-table-demo-filtered{margin-left:auto;grid-area:filter;height:fit-content}.sc-smoothly-table-demo-filtered-h>*.sc-smoothly-table-demo-filtered{margin-bottom:2rem;grid-area:main}.sc-smoothly-table-demo-filtered-h>smoothly-table.sc-smoothly-table-demo-filtered{grid-template-columns:min-content repeat(calc(var(--columns) - 1), auto)}smoothly-table.sc-smoothly-table-demo-filtered>smoothly-table-row.sc-smoothly-table-demo-filtered>smoothly-table-cell.sc-smoothly-table-demo-filtered:nth-of-type(2),.sc-smoothly-table-demo-filtered-h>smoothly-table.sc-smoothly-table-demo-filtered>smoothly-table-head.sc-smoothly-table-demo-filtered>smoothly-table-row.sc-smoothly-table-demo-filtered>smoothly-table-cell.sc-smoothly-table-demo-filtered:nth-of-type(4){justify-content:end}";
+const SmoothlyTableDemoFilteredStyle0 = styleCss$n;
+const TableDemoFiltered = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.criteria = {};
+        this.cats = undefined;
+        this.selector = Selector.create("breed");
+    }
+    onFilterUpdate(event) {
+        event.stopPropagation();
+        this.criteria = event.detail;
+    }
+    smoothlyInputHandler(event) {
+        event.stopPropagation();
+        this.selector = this.selector.handle(event.detail);
+    }
+    async componentWillLoad() {
+        const response = await fetch("https://catfact.ninja/breeds?limit=15");
+        this.cats =
+            response.status == 200 &&
+                (await response.body).data.map((cat) => {
+                    var _a, _b;
+                    return (Object.assign(Object.assign({}, cat), { price: [...cat.breed].reduce((r, c) => r + c.charCodeAt(0), 0), nested: Object.assign(Object.assign({}, cat), { names: (_a = names[cat.country]) !== null && _a !== void 0 ? _a : [] }), names: (_b = names[cat.country]) !== null && _b !== void 0 ? _b : [] }));
+                });
+    }
+    render() {
+        const cats = this.cats && filter(this.criteria, this.cats);
+        return (index.h(index.Host, { key: '8d55f782a5df458d13a02d59a0c204037cb084d3' }, index.h("smoothly-display", { key: 'b031a5503b68b070fbe0fa1e0a7973104bdd66b9', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '5114ba3045e6a38813a4dda29ac3303f001af64e' }, index.h("smoothly-filter-toggle", { key: '845ee58c9a0ce4fa8ff8c1e4114de768ac175fac', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '7c8e98ac1bfc7537a9aa6412255b34a54fc60de3', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'f14605713a881dfdc90e7fcac7bd7a550b06f587', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '2183ee1b6762ebd5ccaff93f0c1848a6c4cac5c7', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '266ad69988175d612400edfcfb8dcfd7af16670b', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+            Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
+                var _a;
+                return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
+            })), index.h("div", { key: '801474cee57610ea30e72193425c88d8de454e4e', slot: "detail" }, index.h("smoothly-form", { key: '752f211850ac2e71727e5a7b2021f1bbcf7d68b3', looks: "border" }, index.h("smoothly-filter-select", { key: 'e9ecc6a81dd93740bb29c31d0916b32191317d77', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
+                var _a;
+                return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
+            })), index.h("smoothly-filter-select", { key: 'e3ccd5e3248302430f151cb7190b82f6013e6c65', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
+            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (index.h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), index.h("smoothly-filter-select", { key: '72505b6a1afe108c13b52aef6ab2874bb5c97782', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            .flat()
+            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (index.h("smoothly-item", { slot: "items", value: name }, name)))), index.h("smoothly-filter-input", { key: '6b5fc795a759f451ff4e46fad05c108ed5b47fc5', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '53086231e9056ad86984bd63c1208b8e1df5ef15', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", { columns: 4 }, index.h("smoothly-table-head", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cats)), index.h("smoothly-table-cell", null, "Breed"), index.h("smoothly-table-cell", null, "Coat"), index.h("smoothly-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-foot", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", { span: 3 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
+    }
+};
+const names = {
+    "United States": ["bill", "bob", "brad", "joe", "molly"],
+    Australia: ["nigel", "bruce", "sheila", "brad", "shane"],
+    "United Kingdom": ["nigel", "james", "molly", "shane", "bob"],
+    Greece: ["dionysius", "demetrius", "polikarpos"],
+};
+TableDemoFiltered.style = SmoothlyTableDemoFilteredStyle0;
+const styleCss$m = ".sc-smoothly-table-demo-group-h{display:block}.sc-smoothly-table-demo-group-h smoothly-display.sc-smoothly-table-demo-group{display:inline}.sc-smoothly-table-demo-group-h fake-cell-wrapper.span-2.sc-smoothly-table-demo-group{grid-column:span 2}.sc-smoothly-table-demo-group-h>smoothly-display.sc-smoothly-table-demo-group{display:inherit;font-size:2em}.sc-smoothly-table-demo-group-h>*.sc-smoothly-table-demo-group{margin-bottom:2rem}.sc-smoothly-table-demo-group-h fake-group-wrapper.sc-smoothly-table-demo-group,.sc-smoothly-table-demo-group-h fake-row-wrapper.sc-smoothly-table-demo-group,.sc-smoothly-table-demo-group-h fake-expandable-row-wrapper.sc-smoothly-table-demo-group{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.sc-smoothly-table-demo-group-h fake-cell-wrapper.sc-smoothly-table-demo-group{grid-column:span 1;display:block}.sc-smoothly-table-demo-group-h fake-expandable-cell-wrapper.sc-smoothly-table-demo-group{display:contents}";
+const SmoothlyTableDemoGroupStyle0 = styleCss$m;
+const SmoothlyTableDemoGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ab17a5de6350253218129e9ef1a901afca119cb9' }, index.h("smoothly-display", { key: '241b4f2a5d975758716c86f4a9e607a603deda71', type: "text", value: "Group" }), index.h("smoothly-table", { key: '862a1f6f51b60bdf7180a23ae2e5e8ba756da733', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: 'fd02d23e191fa245f87fba4ad4d6bca4589568d9' }, index.h("smoothly-table-row", { key: 'e680167eb05b171558d9eaa020078890e21b4417' }, index.h("smoothly-table-cell", { key: '6b52630d199801fed460f8ec4006ed99917b55b0' }, "Date"), index.h("smoothly-table-cell", { key: '257ab1871963edba4c508b9239d91fdc47a4188c' }, "Total"))), index.h("smoothly-table-body", { key: 'e105bea8ba10cbc7f28ff60276e905905e6a4f61' }, index.h("smoothly-table-row-group", { key: 'cfb10b12fa24d5f3503efc04cb630ed6f062426d', align: true }, index.h("smoothly-display", { key: '1eb844826cb1b1acf2ac13aa7e042a430d930cfd', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'f80a2845de1d28e0827cc41f5d1060749c4ec953', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-table-expandable-row", { key: '4efa1e4899770886d3a227487f50c3584555a8d0' }, index.h("smoothly-table-cell", { key: '547add4a1a36ed0d969caa0c066d564cb44e2748' }, index.h("smoothly-display", { key: 'bb67befeef44104cbc3bf02c7880ff58387f2891', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '6c9442e995afeba0d129e32c7a32744af53c9725' }, index.h("smoothly-display", { key: '2d310c3f5a84ccad1d17c457dfb74b9d7e1bd9fc', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '6f978c968c43d7315509241291a2a955ebbe5539', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '492e93fa2821b38ab1f0ce305ea9fd65f8781e62' }, index.h("smoothly-table-cell", { key: '68dd180e3c2954bf50ec903b3809304b4300dac8' }, index.h("smoothly-display", { key: '172525308c6323f08391250970f83648f295f928', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '102655f27f8fff0e563c1b9c4f91a7a5180517ed' }, index.h("smoothly-display", { key: 'a292efb6a9913c52a09669531f1ae420dee9bafe', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '2229625dc6667273d75e5bab7e37c28353ff55c1', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-table-row", { key: '2f6a9d343d2b8faeb54591568fca534491e09624' }, index.h("smoothly-table-cell", { key: 'd28918b88277bab63ce3ac9e0c2ea2952fdc149f' }, index.h("smoothly-display", { key: '57254b712a9af72bd17db942d8c67b550f4bc249', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'ce6078b20e8ad3a60a2c7487b3c10033721c71e7' }, index.h("smoothly-display", { key: '59811e12b22df83a8b9f96743592aa3f0660c06a', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-table-row-group", { key: '794c6bd76c772c87610ddaf77da871e28b6fa3ce' }, index.h("smoothly-display", { key: '4abdc694438211eca8549e931f62db5078e13d4f', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '4d9af1d234da7b5489714cb6e0c2fa368e88e39e', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: 'a0866cf4f36b6e50e600d446ff6d101ebd5164fd' }, index.h("smoothly-table-cell", { key: 'd5f7ad1ff62d6b1002a3b191352fc3bf4cd4945c' }, index.h("smoothly-display", { key: 'e0066e67a6de844cd3e61d0898b216c14664dc65', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '2de722ca6f420151fc220421e71e6ae4f76d63d6' }, index.h("smoothly-display", { key: '83f90ecb3d641449e5abceaf5ea70dcc863ce6ad', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'cab86fe7bdf6a750ab4acdf9f329829b8ee0f885', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '737a4b2c40839d199221bc63185b59668a081428' }, index.h("smoothly-table-cell", { key: '1aab121795680be1745e57dc057d0b3d110679c7' }, index.h("smoothly-display", { key: 'ca32ff5340a004a4c2c44bf321ec47e7857a144c', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '340e08d0a9bc1e9d483215e9bda2c9c20183fff3' }, index.h("smoothly-display", { key: '017cdd7cf3ac6aa73b2419abbd10484223ff8c93', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '7e924702b8fd7ab2485fbeeca10c37851a415f62', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '0a71b3746078226007b57f1ef91a2cdd29a22dad' }, index.h("smoothly-display", { key: '6e179b5eddbcf3ba6effb11e02c0fd0c414a2f89', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-table-expandable-row", { key: '05dcfe20a4b3f6e312d2a7f487690b31190d0191' }, index.h("smoothly-table-cell", { key: '9ec721a6d7ef609b489c9a9c67ef9013f337d187' }, index.h("smoothly-display", { key: 'bbf1daa961b4fa73148bab8bd0cb843f34aecafc', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '9bf0559b4456306ca7547011a93ea009dfa5a47a' }, index.h("smoothly-display", { key: 'a505d472404ec220b78837d01fa9c48ab479fbf1', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '07defc9828ac26cda563bc5fab971e95e5edb7cb', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'b14b8ddb71431247dbaf2fa0a9a5bfa519773850' }, index.h("smoothly-table-cell", { key: '15f885b73e9b55da373fc4ba2a9f2ec26df7a1ad' }, index.h("smoothly-display", { key: 'f837ee876510ded9cdc95fb1f319ad3f0d033066', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '24ee4da95e2f6567e84979bf550ba12383f8bbc7' }, index.h("smoothly-display", { key: '0c238ff9e955c702396b5f55362aa2b9b870e623', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '4ddb314c99c1fcd10e0dfd624e15c705194d3999', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '76c28c274cbe1d43976ce8bf2f68c6a7c38cfb20' }, index.h("smoothly-display", { key: 'b906ac9acb1c046c0e180d99cb5f4d75ccb063aa', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '1a1cfdb1ed8c2fe215346bba93775813853aa082' }, index.h("smoothly-table-cell", { key: '5d093841d54189dff2088e417a0df853af75fd9e' }, index.h("smoothly-display", { key: '85c9271cc6eeb69e1e8a9b2e99baaecec0d24e6e', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'd0207e188bfc3fcae67208cb54313e37b39bcae4' }, index.h("smoothly-display", { key: 'fda474c50fc46b3b1f9e3a765b83859082367204', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'a6212b95f076d12ab0f70d1ce10170647d3dac5f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '2e3631f82c36b66f801d36ac420a9972121626e2' }, index.h("smoothly-table-cell", { key: '83e96169bc9e24188f64356e8ce2909ea93705a5' }, index.h("smoothly-display", { key: 'fac1debee6f460708486d20a44da4783f7ef798d', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'acc2178f2d34df95125bb8a6591f3eeac8637c97' }, index.h("smoothly-display", { key: '2ba249b1cb1f3fa8e0f19d660bf555bfc2023934', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'e2325d894438f3283173ed8b9ed9a5ad7fe1f766', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '6f03088f762e762bca3aaf5c9c2e0db272ea859b' }, index.h("smoothly-table-row-group", { key: '8588a6eb1d4ae426898fdaac653e45053488f977' }, index.h("smoothly-display", { key: 'e74e5318cf74c0a3baf0af70a603238dd0aea2bc', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '37bbc408b2e023340c64ee2184efb3414a8ed78a', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: 'aa2b9dcb132df48feba44e8e645bb5f9d866d700' }, index.h("smoothly-table-row", { key: '3fb8882c74c28e9f52bb812ecf95fc72788f4e28' }, index.h("fake-cell-wrapper", { key: '65a11fedd55768fa7a2bfde52e35752f20bf941c' }, index.h("smoothly-table-cell", { key: '3abc35523c899732331481fd7a533499647e9e11' }, index.h("smoothly-display", { key: '15d61e95a487e711bb423a71dd687b9c8ac99b3b', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'a5635badb923e122f6b539825695f23f07784ee5' }, index.h("smoothly-table-expandable-cell", { key: '92596731648f02e90a6d3393f5b9154358590fc5' }, index.h("smoothly-display", { key: '946cce4395db9b1db2994fbb898dabcf9587c445', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '593551e1a00a7367db227a1b165b01325d0bbfe2', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index.h("fake-expandable-row-wrapper", { key: 'c3b8371c6f75c763d2f7983f9d6814cb6fda7b2b' }, index.h("smoothly-table-expandable-row", { key: 'f368d9a8964cd3491a6c3b15fee582316d93321b' }, index.h("fake-cell-wrapper", { key: 'e53b542c79a919162a5663937ea215f5ade7abe7', class: "span-2" }, index.h("smoothly-table-cell", { key: '4d3d43c2fbcb74b8ab0ddc290d31eddf6eb3adaf', span: 2 }, index.h("smoothly-display", { key: 'e29d593e033eef6aa308729c115d6131c57527f8', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '8efb4c4255338d4a042909417b6bdeee312a1395', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-table-row-group", { key: 'b6d86bb92d60916bd58e1eb3d6eee104cfbe95e3' }, index.h("smoothly-display", { key: '7f9f43eb7f95a2671a83bda52957c69b286881d3', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '5c7cac6977f26a51ad35fdcbf4a70a0aefa0d4cf', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+    }
+};
+SmoothlyTableDemoGroup.style = SmoothlyTableDemoGroupStyle0;
+const data = [
+    {
+        id: "667d329f9f4934ecdc4bf9eb",
+        balance: 1450.03,
+        age: 35,
+        eyeColor: "blue",
+        name: "Glenda Ballard",
+        gender: "female",
+        company: "ZENTIA",
+        registered: "2022-06-13T12:39:15.908",
+        friends: [
+            {
+                id: 0,
+                name: "Manning Hunter",
+                age: 30,
+                balance: 1922.25,
+            },
+            {
+                id: 1,
+                name: "Mcmillan Oliver",
+                age: 32,
+                balance: 2440.53,
+            },
+            {
+                id: 2,
+                name: "Graham Garza",
+                age: 33,
+                balance: 3712.59,
+            },
+            {
+                id: 3,
+                name: "Gabrielle Neal",
+                age: 36,
+                balance: 2519.25,
+            },
+            {
+                id: 4,
+                name: "Dotson Duncan",
+                age: 29,
+                balance: 3274.11,
+            },
+        ],
+    },
+    {
+        id: "667d329f4e07097167ef92a2",
+        balance: 2488.91,
+        age: 21,
+        eyeColor: "blue",
+        name: "Delaney Haley",
+        gender: "male",
+        company: "COMTOURS",
+        registered: "2018-05-11T08:58:36.197",
+        friends: [
+            {
+                id: 0,
+                name: "Elsa Cochran",
+                age: 28,
+                balance: 2009.45,
+            },
+            {
+                id: 1,
+                name: "Willis Acevedo",
+                age: 33,
+                balance: 2198.01,
+            },
+            {
+                id: 2,
+                name: "Slater Fowler",
+                age: 34,
+                balance: 2888.16,
+            },
+            {
+                id: 3,
+                name: "Ashley Wilkerson",
+                age: 22,
+                balance: 1863.65,
+            },
+            {
+                id: 4,
+                name: "Ola Lynch",
+                age: 23,
+                balance: 3649.29,
+            },
+        ],
+    },
+    {
+        id: "667d329f14a0aeea0d70d5e7",
+        balance: 1660.91,
+        age: 36,
+        eyeColor: "brown",
+        name: "Riddle Reilly",
+        gender: "male",
         company: "OPTIQUE",
         registered: "2016-09-15T09:46:07.962",
         friends: [
@@ -11858,43 +12141,43 @@ const data$1 = [
     },
 ];
-const styleCss$F = ".sc-smoothly-next-demo-nested-h{display:block}.sc-smoothly-next-demo-nested-h>smoothly-display.sc-smoothly-next-demo-nested{font-size:2em}.sc-smoothly-next-demo-nested-h>*.sc-smoothly-next-demo-nested{margin-bottom:2rem}";
-const SmoothlyNextDemoNestedStyle0 = styleCss$F;
+const styleCss$l = ".sc-smoothly-table-demo-nested-h{display:block}.sc-smoothly-table-demo-nested-h>smoothly-display.sc-smoothly-table-demo-nested{font-size:2em}.sc-smoothly-table-demo-nested-h>*.sc-smoothly-table-demo-nested{margin-bottom:2rem}";
+const SmoothlyTableDemoNestedStyle0 = styleCss$l;
-const SmoothlyNextDemoNested = class {
+const SmoothlyTableDemoNested = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ac8b819ed68a0fc335daf5836b943d1893535c7b' }, index.h("smoothly-display", { key: '1876305df37da314e0859e0857e9d1fab90c21cf', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: 'b403ee029a6128fe077110877d8632b9af90cea5', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: '5bbd2f1ad09fe5dcace93880c78506d5484c4eda' }, index.h("smoothly-next-table-row", { key: 'a16bee62f8ae68a7922bdd27ce38a09c4bba102d' }, index.h("smoothly-next-table-cell", { key: '5a9deb384aa90652576801be5193879a09638eec' }, "Id"), index.h("smoothly-next-table-cell", { key: 'bacf06de880e02186416119846d60149850b6300' }, "Registered"), index.h("smoothly-next-table-cell", { key: '72097acbf587110feca0b46c6fd539cf4c57b007' }, "Name"), index.h("smoothly-next-table-cell", { key: 'c9bd54f8c6bdd0449a1dbc01bd45e0fd93fb38a1' }, "Age"), index.h("smoothly-next-table-cell", { key: '74bb02db61b2750620fb3d7a0c295a9ab9ac1475' }, "Balance"), index.h("smoothly-next-table-cell", { key: '365e126a9a8de563d60dd19076058b19b528bbed' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: '2c8fcb094da0cf5042e5a138a37e109d79f398c3' }, "Gender"), index.h("smoothly-next-table-cell", { key: '0b10a8d72633a7ee7087cdd2f941af842570be46' }, "Company"))), index.h("smoothly-next-table-body", { key: 'c5a41f8b6185f0c49d23f63cfabc6e1e1831c707' }, data$1.map(entry => (index.h("smoothly-next-table-expandable-row", null, index.h("smoothly-next-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), index.h("smoothly-next-table-cell", null, entry.id), index.h("smoothly-next-table-cell", null, entry.registered), index.h("smoothly-next-table-cell", null, entry.name), index.h("smoothly-next-table-cell", null, entry.age), index.h("smoothly-next-table-cell", null, entry.balance), index.h("smoothly-next-table-cell", null, entry.eyeColor), index.h("smoothly-next-table-cell", null, entry.gender), index.h("smoothly-next-table-cell", null, entry.company))))), index.h("smoothly-next-table-foot", { key: '0ab984aaec3f9875ef7732374ccd22ce753aca5e' }, index.h("smoothly-next-table-row", { key: 'de147ff0b4b130fe9b3130590313b4d7fc701c5b' }, index.h("smoothly-next-table-cell", { key: 'fee07b3789bbb5ec11eb0b41d065bef1ae9b2f7b' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'cf687206d40467456fb30facd28c742880a0a6b2' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: 'f7dc608b56f946058e12ed68ea7e90df810f987a' }, index.h("smoothly-display", { key: '358904431eafbb1d627d0fdee7c08086f6153dc6', type: "text", value: "Nested" }), index.h("smoothly-table", { key: 'c2f0330f908bffe60134686ab682c4cd2387248d', color: "primary", columns: 8 }, index.h("smoothly-table-head", { key: 'b1fe6f04435b744f361633a7a887578b933fa1cd' }, index.h("smoothly-table-row", { key: '78e9506a94ad8fdf48e78f9ab62bec3e9d9bb935' }, index.h("smoothly-table-cell", { key: '7a7231af5f81a6eb7ee43349d63f83358103eb3d' }, "Id"), index.h("smoothly-table-cell", { key: 'ff3a6cc9c47a64b963b5e40001e88d3069bdbf0c' }, "Registered"), index.h("smoothly-table-cell", { key: 'c38b672be9a1365330d07b69054989f5e60ee1c8' }, "Name"), index.h("smoothly-table-cell", { key: 'c292d75f64bdc388ff8c264ecbf085e771ce2492' }, "Age"), index.h("smoothly-table-cell", { key: '8365cd3d2247db5520b8e50ea0d0fcd87b382cd6' }, "Balance"), index.h("smoothly-table-cell", { key: '62d413791161883a1e49ee7dff722391e82e5fb3' }, "EyeColor"), index.h("smoothly-table-cell", { key: '49c25aaf48bb22a60746db2ccf645e7036a64ead' }, "Gender"), index.h("smoothly-table-cell", { key: '0788fc296b75856ccc29ed294b4e626492813c5a' }, "Company"))), index.h("smoothly-table-body", { key: '1a0cd70d6e0571c0ab7eb46af0d593f5728a6706' }, data.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.registered), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance), index.h("smoothly-table-cell", null, entry.eyeColor), index.h("smoothly-table-cell", null, entry.gender), index.h("smoothly-table-cell", null, entry.company))))), index.h("smoothly-table-foot", { key: 'ffd413ef41a90b18d9bc871c7b93f41510dc0509' }, index.h("smoothly-table-row", { key: 'eaf3e4be22c78eef4eb41ff9299781fca20496e0' }, index.h("smoothly-table-cell", { key: 'afae4894d7f49040746b279f6ce95a3eeb110778' }, "Footer Cell"), index.h("smoothly-table-cell", { key: 'c4b6dd203fbe9d891a46eb279188fd1140e6f514' }, "Footer Cell"))))));
     }
 };
-SmoothlyNextDemoNested.style = SmoothlyNextDemoNestedStyle0;
+SmoothlyTableDemoNested.style = SmoothlyTableDemoNestedStyle0;
-const styleCss$E = ".sc-smoothly-next-demo-nested-inner-h{display:block;margin:1em auto;width:60%}";
-const SmoothlyNextDemoNestedInnerStyle0 = styleCss$E;
+const styleCss$k = ".sc-smoothly-table-demo-nested-inner-h{display:block;margin:1em auto;width:60%}";
+const SmoothlyTableDemoNestedInnerStyle0 = styleCss$k;
-const SmoothlyNextDemoNestedInner = class {
+const SmoothlyTableDemoNestedInner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.data = undefined;
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '1062b8d6fba3a84174feb5211fb04c0fd989ad51' }, index.h("smoothly-next-table", { key: 'c72db56d3f0357edf110eebcbef76c68cb8fe8e6', columns: 4 }, index.h("smoothly-next-table-head", { key: '5871f66a70b4493ee55585ad9c945dc81d33d926' }, index.h("smoothly-next-table-row", { key: '5010c8279548c690f9b760f761f8aa62d5355388' }, index.h("smoothly-next-table-cell", { key: '77cbfff256e218565ac3a3cfa61641a1f4fa294d' }, "Id"), index.h("smoothly-next-table-cell", { key: '75456ebc4d8b510678ddaba496c6ac33e4c4d20b' }, "Name"), index.h("smoothly-next-table-cell", { key: '9e6f715453f564ae310d7d1293443602136d264b' }, "Age"), index.h("smoothly-next-table-cell", { key: 'af45cc242d04f9797e4f27ec74ae96d5ac81e8e2' }, "Balance"))), index.h("smoothly-next-table-body", { key: '165151de9cdce730d6a3fcf9854ab5a88603826f' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-next-table-expandable-row", null, index.h("smoothly-next-table-cell", null, entry.id), index.h("smoothly-next-table-cell", null, entry.name), index.h("smoothly-next-table-cell", null, entry.age), index.h("smoothly-next-table-cell", null, entry.balance))))))));
+        return (index.h(index.Host, { key: '5c101d92550729cfde6440bf56e62dfd38aa03c6' }, index.h("smoothly-table", { key: '9412c6c571b7ad4b48f883e30914cdb82a2ab24d', columns: 4 }, index.h("smoothly-table-head", { key: '8c7348cef6b37f3a44fcdcfe24df87f54ec65144' }, index.h("smoothly-table-row", { key: '0c81c23928a5c3822190d40e855dd86869094a01' }, index.h("smoothly-table-cell", { key: '3ad50370e49f30a997b9549f262dc305e53ff25c' }, "Id"), index.h("smoothly-table-cell", { key: '64e491e442a81d44f04719f9244f28fbe184a91d' }, "Name"), index.h("smoothly-table-cell", { key: 'fd80beeaacbd5f32db39deb0eeeaaf3c4fcd5034' }, "Age"), index.h("smoothly-table-cell", { key: 'fa5cbb0cfe826bfb09459894a822467a0e7e5ca7' }, "Balance"))), index.h("smoothly-table-body", { key: 'cbfc52a2bda400b6dcc2798a152d3b752bb7ce76' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, entry.id), index.h("smoothly-table-cell", null, entry.name), index.h("smoothly-table-cell", null, entry.age), index.h("smoothly-table-cell", null, entry.balance))))))));
     }
 };
-SmoothlyNextDemoNestedInner.style = SmoothlyNextDemoNestedInnerStyle0;
+SmoothlyTableDemoNestedInner.style = SmoothlyTableDemoNestedInnerStyle0;
-const styleCss$D = ".sc-smoothly-next-demo-simple-h{display:block}.sc-smoothly-next-demo-simple-h>smoothly-display.sc-smoothly-next-demo-simple{font-size:2em}.sc-smoothly-next-demo-simple-h>*.sc-smoothly-next-demo-simple{margin-bottom:2rem}";
-const SmoothlyNextDemoSimpleStyle0 = styleCss$D;
+const styleCss$j = ".sc-smoothly-table-demo-simple-h{display:block}.sc-smoothly-table-demo-simple-h>smoothly-display.sc-smoothly-table-demo-simple{font-size:2em}.sc-smoothly-table-demo-simple-h>*.sc-smoothly-table-demo-simple{margin-bottom:2rem}";
+const SmoothlyTableDemoSimpleStyle0 = styleCss$j;
-const SmoothlyNextDemoSimple = class {
+const SmoothlyTableDemoSimple = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c7a387e18e1a0ad7a93b0f7017ef14d02d83a080' }, index.h("smoothly-display", { key: '5fa46ce5ca3b08722f4a81a7b0a6e3c0ceaa0f05', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: '50ff0ce43b710ba66813e75eb5fcf61b35bac119', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '8cb12dd8221bf13dde4b980739d6a70ed5182459' }, index.h("smoothly-next-table-row", { key: 'c2dff6a966cf78b7afec05692f49a331b0dce7ca' }, index.h("smoothly-next-table-cell", { key: '9ad3c0cbcc04b65a4ef62ccf6a52182275637e68' }, "Breed"), index.h("smoothly-next-table-cell", { key: '42a77d3ee2f95b1e3589c73e1d89fb4fd099e712' }, "Coat"))), index.h("smoothly-next-table-body", { key: 'b8ad170167657fdf32c5bfd0020a8fc920aff7a4' }, cats.map(cat => (index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-next-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-next-table-expandable-row", { key: 'ebd68bd3341545fe985ad7ef01577b3327d4dcd8' }, index.h("div", { key: 'fe08666bdfc246d7136715b63fcc57a1ed24e008', slot: "detail" }, "Content", index.h("br", { key: 'ff6f04fa14792219eac639b8825f9b2f2aa582c9' }), "of", index.h("br", { key: 'aaff7afd83edb8585e4bcccf91b649f7c1942568' }), "the", index.h("br", { key: '1cd00b863b05eb86f706fb2dbf9eade4a0830d3f' }), "expandable", index.h("br", { key: '681aff287c7420f5da807882806b4bffdd9897e0' }), "row"), index.h("smoothly-next-table-cell", { key: '754c125a05adcca4c08104e4aa7020e91a0d1700' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: 'dbb5ad17a7d13d7e3f330480bf1b6c74123ebbdf' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: '300acbbdfad5ee1cedbbd9748e3d7a57e16fec86' }, index.h("smoothly-next-table-cell", { key: 'ec1a3b814b324ac007d4a07dd6c40f4cfbbc25a4' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: 'd2e3f4b636cd2aa55526a08f4a4268137618ab55' }, "Expandable Cell", index.h("div", { key: '9bc93e19463e94a49526a218da1daac775eb7203', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: '5c7b02cb821b4a23b733c94b0a804649865c6b2c' }, index.h("smoothly-next-table-expandable-cell", { key: 'f49a2d857eb6b90c3fd375113f6ee443debf9d17' }, "Expandable Cell 1", index.h("div", { key: 'caf38888f3081b4be3c4f79616f992fb7a40508f', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: 'dbabef0729d5c038782da8307573b45f60438a1e' }, "Expandable Cell 2", index.h("div", { key: '52f0bf6a13bcf46e4f927e2cf93f97eb25947808', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: 'cf8bd92b99724f997ad35393630d6acd83f498e4' }, index.h("smoothly-next-table-row", { key: '246ae7fdc74a4ef67f5230dd208ad56b261f300f' }, index.h("smoothly-next-table-cell", { key: 'c5bec448e27ac5888f95fed87a4bb00914e68cc7' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '4003e5d8ee32cf0bcbc333cad1e80f75497c963b' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '7a1bac3d2892a466093ba4142113a0c67b757a6e' }, index.h("smoothly-display", { key: 'd0281faf4bc55a5432974d45971dad531e61fa2a', type: "text", value: "Simple" }), index.h("smoothly-table", { key: '09b616689732bf5d0246af33cdfe9551e6a6a879', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '7fad53ce1745be87aa696524fe5992472e509f13' }, index.h("smoothly-table-row", { key: '7a38f71a563e17dde293404d1b2e744f86c4d356' }, index.h("smoothly-table-cell", { key: 'f24ae5d56b106567db557f6958b32d539590f251' }, "Breed"), index.h("smoothly-table-cell", { key: '96ba0bf58ec0f283f84c00c90107d06254c63a81' }, "Coat"))), index.h("smoothly-table-body", { key: '992aaee0b138ea7401ed3db9c5349eec6a7afeec' }, cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-table-expandable-row", { key: 'c2ec45ddc7b5dc119a915cd0d2457b2367f12188' }, index.h("div", { key: '73c069db23c714c6b1c084bb24173e4a09e8b564', slot: "detail" }, "Content", index.h("br", { key: 'cc86f8f9c9dda93bb9c15a1c5cc6cc8a2a3486e7' }), "of", index.h("br", { key: 'a2eee8e62352f2340613cca097e7953d01525bc0' }), "the", index.h("br", { key: 'e99454d1aab588f127ad11841d0b6cc5d67e3b73' }), "expandable", index.h("br", { key: '90d33ff03447c0db1eb214e5c12ee6936e5e43a2' }), "row"), index.h("smoothly-table-cell", { key: 'a6fd99375d0dce9c73bb42c9ee7ef644efbf4e33' }, "Cell1 in expandable row"), index.h("smoothly-table-cell", { key: 'e9db7f1181f1081c8a6c41156ab3081e129e415e' }, "Cell2 in expandable row")), index.h("smoothly-table-row", { key: '737ef8dd3914162e4107b24dae43077b29786b5f' }, index.h("smoothly-table-cell", { key: '5b68efd60b226c22993cc064db1eaca8d54070e5' }, "Cell5"), index.h("smoothly-table-expandable-cell", { key: '354dcf3f557b809c78dda6b22106613425bbd6e7' }, "Expandable Cell", index.h("div", { key: '2008c93a669890609aff6b1f049b219682be1277', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-table-row", { key: '89fd80e93b9dab809e2a53d3ae30b1a552ca0eba' }, index.h("smoothly-table-expandable-cell", { key: '3bace8fae4cacc7f427902e09a3384fcca784ea6' }, "Expandable Cell 1", index.h("div", { key: '072770a51f3c9bd98d5c43e70f6c12c51ce1030d', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-table-expandable-cell", { key: '2cd5fe1b928d238ef45217c4a061756e9b887b9a' }, "Expandable Cell 2", index.h("div", { key: '65d0735ba8dd6f0059e26e2afaf2b89c5b1ea533', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-table-foot", { key: '65653e24e03fd281077a57ab93ab4235ff5eb858' }, index.h("smoothly-table-row", { key: 'f2f5735fdfa593094a37b8b9acab98036b1a54d2' }, index.h("smoothly-table-cell", { key: 'ad4ed310413fc142079ee4854a543345dcc5ad1d' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '9cbed75f0aa8890bb0843e8a6ea32e33d6cd9781' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -11969,232 +12252,95 @@ const cats = [
         pattern: "Solid",
     },
 ];
-SmoothlyNextDemoSimple.style = SmoothlyNextDemoSimpleStyle0;
+SmoothlyTableDemoSimple.style = SmoothlyTableDemoSimpleStyle0;
-const styleCss$C = ".sc-smoothly-next-table-h{display:grid;grid-template-columns:repeat(var(--columns), auto);color:rgb(var(--smoothly-table-foreground));stroke:rgb(var(--smoothly-table-foreground));fill:rgb(var(--smoothly-table-foreground))}";
-const SmoothlyNextTableStyle0 = styleCss$C;
+const styleCss$i = ".sc-smoothly-table-expandable-cell-h{display:contents}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell{padding:0.3rem 1.1rem}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell{grid-column:span var(--smoothly-table-cell-span, 1);display:flex;box-sizing:border-box;align-items:center;white-space:nowrap;position:relative}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell:hover::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell::before{rotate:45deg}.sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell:hover{background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground));stroke:rgb(var(--smoothly-table-hover-foreground));fill:rgb(var(--smoothly-table-hover-foreground))}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell:first-child{cursor:pointer}.sc-smoothly-table-expandable-cell-h>div.detail.sc-smoothly-table-expandable-cell{grid-column:1/-1;grid-row:2;position:relative}[open].sc-smoothly-table-expandable-cell-h>div.content.sc-smoothly-table-expandable-cell{box-shadow:1px 1px 1px -1px rgb(var(--smoothly-table-border)) inset, -3px -1px 1px -3px rgb(var(--smoothly-table-border)) inset}[open].sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));stroke:rgb(var(--smoothly-table-expanded-foreground));fill:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-table-expandable-cell-h:not([open])>div.detail.sc-smoothly-table-expandable-cell{display:none}.sc-smoothly-table-expandable-cell-h>div.detail.sc-smoothly-table-expandable-cell::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-cell-h>div.detail.sc-smoothly-table-expandable-cell::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
+const SmoothlyTableExpandableCellStyle0 = styleCss$i;
-const SmoothlyNextTable = class {
+const SmoothlyTableExpandableCell = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.columns = 1;
+        this.smoothlyTableExpandableCellChange = index.createEvent(this, "smoothlyTableExpandableCellChange", 7);
+        this.smoothlyTableExpandableCellRegister = index.createEvent(this, "smoothlyTableExpandableCellRegister", 7);
+        this.span = 1;
+        this.open = false;
     }
-    smoothlyNextTableExpandableRowChange(event) {
-        event.stopPropagation();
+    componentWillLoad() {
+        this.smoothlyTableExpandableCellRegister.emit();
     }
-    smoothlyNextTableExpandableCellChange(event) {
-        event.stopPropagation();
+    async close() {
+        this.open = false;
+    }
+    clickHandler() {
+        this.open = !this.open;
+    }
+    openChange() {
+        this.smoothlyTableExpandableCellChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: 'b26059040484b92b47073a4a1b131e0961cb7beb', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '367756c156480524dedd898c79b4e609fe1ca137' })));
+        var _a;
+        return (index.h(index.Host, { key: 'edf19222d3f1a5954572dbe5dc67035f47e33f2b', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: '21e0ad7b364c875f510e981dbf3b0449459a55d2', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: 'dbd3f3735d7de5ccaef85fa724ff89dc4606432f' })), index.h("div", { key: 'f8032d040bf4b84c8aac87a8b2c2cafd8885abef', class: "detail" }, index.h("slot", { key: 'f603898706b87596c4eaefe1588dad1db17028f2', name: "detail" }))));
     }
+    static get watchers() { return {
+        "open": ["openChange"]
+    }; }
 };
-SmoothlyNextTable.style = SmoothlyNextTableStyle0;
+SmoothlyTableExpandableCell.style = SmoothlyTableExpandableCellStyle0;
-const styleCss$B = ".sc-smoothly-next-table-body-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;color:rgb(var(--smoothly-table-foreground));background-color:rgb(var(--smoothly-table-background))}";
-const SmoothlyNextTableBodyStyle0 = styleCss$B;
+const styleCss$h = ".sc-smoothly-table-expandable-row-h{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto 0fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h.sc-smoothly-table-expandable-row-s>*{cursor:pointer}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:not(:last-child){background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground))}[open].sc-smoothly-table-expandable-row-h{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));grid-template-rows:auto 1fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border)), 0px 0px 1px rgb(var(--smoothly-table-border)) inset;grid-template-rows:0fr 1fr}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{grid-column:1/-1;cursor:default;position:relative;overflow:hidden;background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child){position:relative}.sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-expandable-row-h:has(>.sc-smoothly-table-expandable-row:not(:last-child):hover)>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-table-expandable-row-h>.sc-smoothly-table-expandable-row:first-child:not(:last-child)::before{rotate:45deg}[open].sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child{overflow:visible;padding:0.3rem 1.1rem}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row:last-child::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
+const SmoothlyTableExpandableRowStyle0 = styleCss$h;
-const SmoothlyNextTableBody = class {
+const SmoothlyTableExpandableRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.smoothlyTableExpandableRowChange = index.createEvent(this, "smoothlyTableExpandableRowChange", 7);
+        this.open = false;
+    }
+    clickHandler(event) {
+        (this.div && event.composedPath().includes(this.div)) || (this.open = !this.open);
+    }
+    openChange() {
+        this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: 'fc5b3f777e5da3121ac41f5ed46bd48de4d6566a' }, index.h("slot", { key: 'a5a92fe0af635d355cbd006c1ad326a9fdfbe093' })));
+        return (index.h(index.Host, { key: '4bed1759b9e09e82573bb7f3c251dfb994b0ad25', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '7bcc22204301c6f3e2e89cc16238c345418ff0bc' }), index.h("div", { key: '925ba79c7580b1960371b68a1b5e180c7d83b146', ref: e => (this.div = e) }, index.h("slot", { key: '5d35d3d3f462562d734a864b872307375872d37e', name: "detail" }))));
     }
+    static get watchers() { return {
+        "open": ["openChange"]
+    }; }
 };
-SmoothlyNextTableBody.style = SmoothlyNextTableBodyStyle0;
+SmoothlyTableExpandableRow.style = SmoothlyTableExpandableRowStyle0;
-const styleCss$A = ".sc-smoothly-next-table-cell-h{grid-column:span var(--smoothly-table-cell-span, 1);display:flex;align-items:center;padding:0.3rem 1.1rem;white-space:nowrap}";
-const SmoothlyNextTableCellStyle0 = styleCss$A;
+const styleCss$g = ".sc-smoothly-table-filler-row-h{grid-column:1 / -1}";
+const SmoothlyTableFillerRowStyle0 = styleCss$g;
-const SmoothlyNextTableCell = class {
+const SmoothlyTableFillerRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.span = 1;
-    }
-    render() {
-        var _a;
-        return (index.h(index.Host, { key: '78a499f0a16c677f1834f1704ecc53952b08a5ae', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '5ec1cb941acd0ff5fecf223cde1e797119b40a61' })));
-    }
-};
-SmoothlyNextTableCell.style = SmoothlyNextTableCellStyle0;
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _Selector_selected;
-class Selector {
-    get selected() {
-        var _a;
-        return (__classPrivateFieldSet(this, _Selector_selected, (_a = __classPrivateFieldGet(this, _Selector_selected, "f")) !== null && _a !== void 0 ? _a : Object.values(this.data), "f"));
-    }
-    constructor(key, data = {}) {
-        this.key = key;
-        this.data = data;
-        _Selector_selected.set(this, void 0);
-    }
-    handle(data) {
-        var _a;
-        return new Selector(this.key, "check-all" in data
-            ? (_a = data["check-all"]) !== null && _a !== void 0 ? _a : {}
-            : Object.fromEntries(Object.entries(Object.assign(Object.assign({}, this.data), data)).filter(([_, value]) => value != undefined)));
-    }
-    render(item) {
-        var _a, _b, _c;
-        return Array.isArray(item) ? (index.h("smoothly-checkbox", { name: "check-all", value: Object.fromEntries(item.map(i => [i[this.key], i])), intermediate: this.selected.length > 0 && this.selected.length < item.length, checked: this.selected.length == item.length ? true : this.selected.length == 0 && false })) : (index.h("smoothly-checkbox", { name: (_a = item[this.key]) === null || _a === void 0 ? void 0 : _a.toString(), value: item, checked: !!this.data[(_c = (_b = item[this.key]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ""] }));
-    }
-    static create(key) {
-        return new Selector(key);
-    }
-}
-_Selector_selected = new WeakMap();
-const styleCss$z = ".sc-smoothly-next-table-demo-filtered-h{display:grid;grid-template-columns:auto auto;grid-template-areas:\"header filter\"\n\t\t\"main main\";margin-bottom:50em}.sc-smoothly-next-table-demo-filtered-h>smoothly-display.sc-smoothly-next-table-demo-filtered{font-size:2em;grid-area:header}.sc-smoothly-next-table-demo-filtered-h>smoothly-filter.sc-smoothly-next-table-demo-filtered{margin-left:auto;grid-area:filter;height:fit-content}.sc-smoothly-next-table-demo-filtered-h>*.sc-smoothly-next-table-demo-filtered{margin-bottom:2rem;grid-area:main}.sc-smoothly-next-table-demo-filtered-h>smoothly-next-table.sc-smoothly-next-table-demo-filtered{grid-template-columns:min-content repeat(calc(var(--columns) - 1), auto)}smoothly-next-table.sc-smoothly-next-table-demo-filtered>smoothly-next-table-row.sc-smoothly-next-table-demo-filtered>smoothly-next-table-cell.sc-smoothly-next-table-demo-filtered:nth-of-type(2),.sc-smoothly-next-table-demo-filtered-h>smoothly-next-table.sc-smoothly-next-table-demo-filtered>smoothly-next-table-head.sc-smoothly-next-table-demo-filtered>smoothly-next-table-row.sc-smoothly-next-table-demo-filtered>smoothly-next-table-cell.sc-smoothly-next-table-demo-filtered:nth-of-type(4){justify-content:end}";
-const SmoothlyNextTableDemoFilteredStyle0 = styleCss$z;
-const TableDemoFiltered$1 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.criteria = {};
-        this.cats = undefined;
-        this.selector = Selector.create("breed");
-    }
-    onFilterUpdate(event) {
-        event.stopPropagation();
-        this.criteria = event.detail;
-    }
-    smoothlyInputHandler(event) {
-        event.stopPropagation();
-        this.selector = this.selector.handle(event.detail);
-    }
-    async componentWillLoad() {
-        const response = await fetch("https://catfact.ninja/breeds?limit=15");
-        this.cats =
-            response.status == 200 &&
-                (await response.body).data.map((cat) => {
-                    var _a, _b;
-                    return (Object.assign(Object.assign({}, cat), { price: [...cat.breed].reduce((r, c) => r + c.charCodeAt(0), 0), nested: Object.assign(Object.assign({}, cat), { names: (_a = names$1[cat.country]) !== null && _a !== void 0 ? _a : [] }), names: (_b = names$1[cat.country]) !== null && _b !== void 0 ? _b : [] }));
-                });
     }
     render() {
-        const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: '819c08970d7851e60ec03ebc75b5762636712313' }, index.h("smoothly-display", { key: 'd85d2d9d2b290b64a5163c7eb5b4185558fc01db', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '25fc6a71565a5a02c3ce62b03f1ac5280c7b37ce' }, index.h("smoothly-filter-toggle", { key: '0f0aadc2296c8b86eaddd7680cdb4333050ac398', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '70a20a4079ecb827ee4386308a1b95687417eae3', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'dec5e592bb5bab7a636221f4877f29957dbbe504', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'c84f8aa97c89a024a58f0635d24f5e254ed69931', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '0e36dba26303cf7575103119375ec76c3c629133', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
-                var _a;
-                return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("div", { key: '12bc508938faeeca2ff380dad0bc0e0add984849', slot: "detail" }, index.h("smoothly-form", { key: 'fd018c0d14b5b7a66cf8fcd9358c0466990f75e4', looks: "border" }, index.h("smoothly-filter-select", { key: 'a5e9324423f7adba4db420ac82e7712088dccf99', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
-                var _a;
-                return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("smoothly-filter-select", { key: '39eacd58fac8964b5a2a4be46041ebe5703fea89', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (index.h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), index.h("smoothly-filter-select", { key: '8605a94f31d45afbe9f339eecae0737c318cf9f8', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names$1)
-            .flat()
-            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (index.h("smoothly-item", { slot: "items", value: name }, name)))), index.h("smoothly-filter-input", { key: '9ea45abf079f3844da63f6d9f046a35fa3a0d7a1', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '87437930089acc044bb1c3c2dd86054059701709', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-next-table", { columns: 4 }, index.h("smoothly-next-table-head", null, index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", null, this.selector.render(cats)), index.h("smoothly-next-table-cell", null, "Breed"), index.h("smoothly-next-table-cell", null, "Coat"), index.h("smoothly-next-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", null, this.selector.render(cat)), index.h("smoothly-next-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-next-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-next-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-next-table-foot", null, index.h("smoothly-next-table-row", null, index.h("smoothly-next-table-cell", { span: 3 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
+        return (index.h("smoothly-table-row", { key: '487cc599f66e2256280eba9623a90c089489d1f6' }, index.h("smoothly-table-cell", { key: '4ad4fb2d4bd3ff44bf6a62d20489cf7607f5d7ca' }, index.h("slot", { key: 'b1b8b30cdca397452636e65e2ff2f0c2e8624d42' }))));
     }
 };
-const names$1 = {
-    "United States": ["bill", "bob", "brad", "joe", "molly"],
-    Australia: ["nigel", "bruce", "sheila", "brad", "shane"],
-    "United Kingdom": ["nigel", "james", "molly", "shane", "bob"],
-    Greece: ["dionysius", "demetrius", "polikarpos"],
-};
-TableDemoFiltered$1.style = SmoothlyNextTableDemoFilteredStyle0;
+SmoothlyTableFillerRow.style = SmoothlyTableFillerRowStyle0;
-const styleCss$y = ".sc-smoothly-next-table-expandable-cell-h{display:contents}.sc-smoothly-next-table-expandable-cell-h>div.sc-smoothly-next-table-expandable-cell{padding:0.3rem 1.1rem}.sc-smoothly-next-table-expandable-cell-h>div.content.sc-smoothly-next-table-expandable-cell{grid-column:span var(--smoothly-table-cell-span, 1);display:flex;box-sizing:border-box;align-items:center;white-space:nowrap;position:relative}.sc-smoothly-next-table-expandable-cell-h>div.content.sc-smoothly-next-table-expandable-cell::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-next-table-expandable-cell-h>div.content.sc-smoothly-next-table-expandable-cell:hover::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-next-table-expandable-cell-h>div.content.sc-smoothly-next-table-expandable-cell::before{rotate:45deg}.sc-smoothly-next-table-expandable-cell-h>div.content.sc-smoothly-next-table-expandable-cell:hover{background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground));stroke:rgb(var(--smoothly-table-hover-foreground));fill:rgb(var(--smoothly-table-hover-foreground))}.sc-smoothly-next-table-expandable-cell-h>div.sc-smoothly-next-table-expandable-cell:first-child{cursor:pointer}.sc-smoothly-next-table-expandable-cell-h>div.detail.sc-smoothly-next-table-expandable-cell{grid-column:1/-1;grid-row:2;position:relative}[open].sc-smoothly-next-table-expandable-cell-h>div.content.sc-smoothly-next-table-expandable-cell{box-shadow:1px 1px 1px -1px rgb(var(--smoothly-table-border)) inset, -3px -1px 1px -3px rgb(var(--smoothly-table-border)) inset}[open].sc-smoothly-next-table-expandable-cell-h>div.sc-smoothly-next-table-expandable-cell{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));stroke:rgb(var(--smoothly-table-expanded-foreground));fill:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-next-table-expandable-cell-h:not([open])>div.detail.sc-smoothly-next-table-expandable-cell{display:none}.sc-smoothly-next-table-expandable-cell-h>div.detail.sc-smoothly-next-table-expandable-cell::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-next-table-expandable-cell-h>div.detail.sc-smoothly-next-table-expandable-cell::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
-const SmoothlyNextTableExpandableCellStyle0 = styleCss$y;
+const styleCss$f = ".sc-smoothly-table-foot-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:sticky;z-index:1;bottom:0;background-color:rgb(var(--smoothly-table-footer-background));color:rgb(var(--smoothly-table-footer-foreground));stroke:rgb(var(--smoothly-table-footer-foreground));fill:rgb(var(--smoothly-table-footer-foreground))}";
+const SmoothlyTableFootStyle0 = styleCss$f;
-const SmoothlyNextTableExpandableCell = class {
+const SmoothlyTableFoot = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.smoothlyNextTableExpandableCellChange = index.createEvent(this, "smoothlyNextTableExpandableCellChange", 7);
-        this.smoothlyNextTableExpandableCellRegister = index.createEvent(this, "smoothlyNextTableExpandableCellRegister", 7);
-        this.span = 1;
-        this.open = false;
-    }
-    componentWillLoad() {
-        this.smoothlyNextTableExpandableCellRegister.emit();
-    }
-    async close() {
-        this.open = false;
-    }
-    clickHandler() {
-        this.open = !this.open;
-    }
-    openChange() {
-        this.smoothlyNextTableExpandableCellChange.emit(this.open);
     }
     render() {
-        var _a;
-        return (index.h(index.Host, { key: 'f4e00f34b020024107236090f248c9b29f1569cd', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: '671c8f23c8372b1746a88fb9b628791aafe94dbc', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '98c2aac2a0b26b833d67e2acaae2b91a6f53ea30' })), index.h("div", { key: 'acbf37b2e9612cd8c68939147efdb70722a89832', class: "detail" }, index.h("slot", { key: 'f1112de8599b7c62b0ce8e18b67fa0246837a498', name: "detail" }))));
+        return (index.h(index.Host, { key: '8f13c28ec690d682f9d9d2161af1d8f5d21ac027' }, index.h("slot", { key: '97de36a9401b62b683a8b6e86eef2d72910c067f' })));
     }
-    static get watchers() { return {
-        "open": ["openChange"]
-    }; }
 };
-SmoothlyNextTableExpandableCell.style = SmoothlyNextTableExpandableCellStyle0;
+SmoothlyTableFoot.style = SmoothlyTableFootStyle0;
-const styleCss$x = ".sc-smoothly-next-table-expandable-row-h{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto 0fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-next-table-expandable-row-h.sc-smoothly-next-table-expandable-row-s>*{cursor:pointer}.sc-smoothly-next-table-expandable-row-h:has(>.sc-smoothly-next-table-expandable-row:not(:last-child):hover)>.sc-smoothly-next-table-expandable-row:not(:last-child){background-color:rgb(var(--smoothly-table-hover-background));color:rgb(var(--smoothly-table-hover-foreground))}[open].sc-smoothly-next-table-expandable-row-h{background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground));grid-template-rows:auto 1fr;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border)), 0px 0px 1px rgb(var(--smoothly-table-border)) inset;grid-template-rows:0fr 1fr}.sc-smoothly-next-table-expandable-row-h>div.sc-smoothly-next-table-expandable-row:last-child{grid-column:1/-1;cursor:default;position:relative;overflow:hidden;background-color:rgb(var(--smoothly-table-expanded-background));color:rgb(var(--smoothly-table-expanded-foreground))}.sc-smoothly-next-table-expandable-row-h>.sc-smoothly-next-table-expandable-row:first-child:not(:last-child){position:relative}.sc-smoothly-next-table-expandable-row-h>.sc-smoothly-next-table-expandable-row:first-child:not(:last-child)::before{content:\"\";display:flex;position:absolute;top:50%;translate:0 -50%;height:0.4em;width:0.4em;left:0.3em;border-bottom:1px solid rgb(var(--smoothly-table-foreground));border-right:1px solid rgb(var(--smoothly-table-foreground));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-next-table-expandable-row-h:has(>.sc-smoothly-next-table-expandable-row:not(:last-child):hover)>.sc-smoothly-next-table-expandable-row:first-child:not(:last-child)::before{border-bottom:1px solid rgb(var(--smoothly-table-hover-foreground));border-right:1px solid rgb(var(--smoothly-table-hover-foreground));opacity:1}[open].sc-smoothly-next-table-expandable-row-h>.sc-smoothly-next-table-expandable-row:first-child:not(:last-child)::before{rotate:45deg}[open].sc-smoothly-next-table-expandable-row-h>div.sc-smoothly-next-table-expandable-row:last-child{overflow:visible;padding:0.3rem 1.1rem}.sc-smoothly-next-table-expandable-row-h>div.sc-smoothly-next-table-expandable-row:last-child::before{content:\"\";position:absolute;display:flex;box-sizing:border-box;top:0;bottom:0;left:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));border-left:0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));box-shadow:2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}.sc-smoothly-next-table-expandable-row-h>div.sc-smoothly-next-table-expandable-row:last-child::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:-1em;width:1em;background-color:rgb(var(--smoothly-table-expanded-background));box-shadow:-2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border))}";
-const SmoothlyNextTableExpandableRowStyle0 = styleCss$x;
+const styleCss$e = ".sc-smoothly-table-head-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;top:0;position:sticky;z-index:1;--smoothly-color:var(--smoothly-table-header-background);--smoothly-color-contrast:var(--smoothly-table-header-foreground);background-color:rgb(var(--smoothly-table-header-background));color:rgb(var(--smoothly-table-header-foreground));stroke:rgb(var(--smoothly-table-header-foreground));fill:rgb(var(--smoothly-table-header-foreground));font-weight:bold;transition:box-shadow 0.3s ease}.scrolled.sc-smoothly-table-head-h{box-shadow:var(--smoothly-table-header-shadow)}";
+const SmoothlyTableHeadStyle0 = styleCss$e;
-const SmoothlyNextTableExpandableRow = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.smoothlyNextTableExpandableRowChange = index.createEvent(this, "smoothlyNextTableExpandableRowChange", 7);
-        this.open = false;
-    }
-    clickHandler(event) {
-        (this.div && event.composedPath().includes(this.div)) || (this.open = !this.open);
-    }
-    openChange() {
-        this.smoothlyNextTableExpandableRowChange.emit(this.open);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'ae127ed0832293efd673f48d7c84dbd788d30bb4', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '14c8a0f4a3dfb73d054cb410b2b34316aef3a593' }), index.h("div", { key: '475653118c4b0297ae2944c0b6569802fca4ee73', ref: e => (this.div = e) }, index.h("slot", { key: '3d9149d0c0dfc63d953c53358643411d8cd9e9b3', name: "detail" }))));
-    }
-    static get watchers() { return {
-        "open": ["openChange"]
-    }; }
-};
-SmoothlyNextTableExpandableRow.style = SmoothlyNextTableExpandableRowStyle0;
-const styleCss$w = ".sc-smoothly-next-table-filler-row-h{grid-column:1 / -1}";
-const SmoothlyNextTableFillerRowStyle0 = styleCss$w;
-const SmoothlyNextTableFillerRow = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("smoothly-next-table-row", { key: 'b1115b06ee32528145d95e83bafbbd494deac5e3' }, index.h("smoothly-next-table-cell", { key: '664c9b9de47c08ec60506f4bef8eed26667d3ebd' }, index.h("slot", { key: '81df8108154d511bb9b054518e0e1ae460bd2d7e' }))));
-    }
-};
-SmoothlyNextTableFillerRow.style = SmoothlyNextTableFillerRowStyle0;
-const styleCss$v = ".sc-smoothly-next-table-foot-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:sticky;z-index:1;bottom:0;background-color:rgb(var(--smoothly-table-footer-background));color:rgb(var(--smoothly-table-footer-foreground));stroke:rgb(var(--smoothly-table-footer-foreground));fill:rgb(var(--smoothly-table-footer-foreground))}";
-const SmoothlyNextTableFootStyle0 = styleCss$v;
-const SmoothlyNextTableFoot = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'cd3059ed84b8029caa4704f79d9be300f7d84bba' }, index.h("slot", { key: '19716629341805a42a04b8120aa5d621dc99783e' })));
-    }
-};
-SmoothlyNextTableFoot.style = SmoothlyNextTableFootStyle0;
-const styleCss$u = ".sc-smoothly-next-table-head-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;top:0;position:sticky;z-index:1;--smoothly-color:var(--smoothly-table-header-background);--smoothly-color-contrast:var(--smoothly-table-header-foreground);background-color:rgb(var(--smoothly-table-header-background));color:rgb(var(--smoothly-table-header-foreground));stroke:rgb(var(--smoothly-table-header-foreground));fill:rgb(var(--smoothly-table-header-foreground));font-weight:bold;transition:box-shadow 0.3s ease}.scrolled.sc-smoothly-next-table-head-h{box-shadow:var(--smoothly-table-header-shadow)}";
-const SmoothlyNextTableHeadStyle0 = styleCss$u;
-const SmoothlyNextTableHead = class {
+const SmoothlyTableHead = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.onScroll = (event) => {
@@ -12217,588 +12363,54 @@ const SmoothlyNextTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (index.h(index.Host, { key: '979e66bdf8727780501e8f2315c022d7f8326a07', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: 'f83d2e0de19aa2ddc4eaeffac977ec75803b9643' })));
+        return (index.h(index.Host, { key: 'b6bfb1f382f927b434e0007568170daf00f63c75', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: 'd37d97f75e41498348e2d1ba12e6bf86187edb1f' })));
     }
     get element() { return index.getElement(this); }
 };
-SmoothlyNextTableHead.style = SmoothlyNextTableHeadStyle0;
+SmoothlyTableHead.style = SmoothlyTableHeadStyle0;
-const styleCss$t = ".sc-smoothly-next-table-row-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;box-sizing:border-box;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-next-table-row-h:has(smoothly-next-table-expandable-cell){grid-template-rows:auto 0fr 0fr}.sc-smoothly-next-table-row-h:has(smoothly-next-table-expandable-cell[open]){grid-template-rows:auto 1fr 0fr}";
-const SmoothlyNextTableRowStyle0 = styleCss$t;
+const styleCss$d = ".sc-smoothly-table-row-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;box-sizing:border-box;box-shadow:0px 1px 1px -1px rgb(var(--smoothly-table-border))}.sc-smoothly-table-row-h:has(smoothly-table-expandable-cell){grid-template-rows:auto 0fr 0fr}.sc-smoothly-table-row-h:has(smoothly-table-expandable-cell[open]){grid-template-rows:auto 1fr 0fr}";
+const SmoothlyTableRowStyle0 = styleCss$d;
-const SmoothlyNextTableRow = class {
+const SmoothlyTableRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.expandableCells = new Set();
     }
-    smoothlyNextTableExpandableCellRegisterHandler(event) {
+    smoothlyTableExpandableCellRegisterHandler(event) {
         event.stopPropagation();
         this.expandableCells.add(event.target);
     }
-    smoothlyNextTableExpandableCellChangeHandler(event) {
+    smoothlyTableExpandableCellChangeHandler(event) {
         if (event.detail)
             for (const cell of this.expandableCells)
                 event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: '6c4ba8bb78dc9f436eefa8573bdc734385857cf4' }, index.h("slot", { key: 'e36b1c6630859bb833c6fc43d7fe119f79cff9c8' })));
+        return (index.h(index.Host, { key: '84924ddbf8eb1970ba47a5eaf91c918d8bcb3c06' }, index.h("slot", { key: '7e100fae4fa251b97011f7fce663917e026b44e5' })));
     }
 };
-SmoothlyNextTableRow.style = SmoothlyNextTableRowStyle0;
+SmoothlyTableRow.style = SmoothlyTableRowStyle0;
-const styleCss$s = ".sc-smoothly-next-table-row-group-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;margin-top:1px}.sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child{grid-column:1 / -1;display:grid;position:relative;cursor:pointer}.sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:last-child{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}[align].sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child{grid-template-columns:subgrid}[align].sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child>div.sc-smoothly-next-table-row-group{display:contents}[align].sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child>div.sc-smoothly-next-table-row-group>*.sc-smoothly-next-table-row-group{padding:0.3rem 1.1rem}.sc-smoothly-next-table-row-group-h:not([align])>div.sc-smoothly-next-table-row-group:first-child{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2, auto);justify-content:space-between;padding:0.3rem 1.1rem}.sc-smoothly-next-table-row-group-h:not([align])>div.sc-smoothly-next-table-row-group:first-child>div.sc-smoothly-next-table-row-group:first-child{justify-self:start;display:flex;gap:1rem}.sc-smoothly-next-table-row-group-h:not([align])>div.sc-smoothly-next-table-row-group:first-child>div.sc-smoothly-next-table-row-group:last-child{justify-self:end;display:flex;gap:1rem}.sc-smoothly-next-table-row-group-h:not([open]){grid-template-rows:auto 0fr}.sc-smoothly-next-table-row-group-h:not([open])>div.sc-smoothly-next-table-row-group:last-child{grid-row:2;overflow:hidden}.sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child>div.sc-smoothly-next-table-row-group:first-child::before{content:'';display:flex;position:absolute;top:50%;translate:0 -50%;left:0.3em;height:0.4em;width:0.4em;border-bottom:1px solid rgb(var(--smoothly-default-contrast));border-right:1px solid rgb(var(--smoothly-default-contrast));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child:hover>div.sc-smoothly-next-table-row-group:first-child::before{opacity:1}[open].sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child>div.sc-smoothly-next-table-row-group:first-child::before{rotate:45deg}.sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child{background-color:rgb(var(--smoothly-default-tint))}.sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child{border-bottom:1px solid rgb(var(--smoothly-default-shade))}.sc-smoothly-next-table-row-group-h>div.sc-smoothly-next-table-row-group:first-child:hover{background-color:rgb(var(--smoothly-default-shade))}";
-const SmoothlyNextTableRowGroupStyle0 = styleCss$s;
+const styleCss$c = ".sc-smoothly-table-row-group-h{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;margin-top:1px}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{grid-column:1 / -1;display:grid;position:relative;cursor:pointer}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:last-child{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}[align].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{grid-template-columns:subgrid}[align].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group{display:contents}[align].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group>*.sc-smoothly-table-row-group{padding:0.3rem 1.1rem}.sc-smoothly-table-row-group-h:not([align])>div.sc-smoothly-table-row-group:first-child{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2, auto);justify-content:space-between;padding:0.3rem 1.1rem}.sc-smoothly-table-row-group-h:not([align])>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:first-child{justify-self:start;display:flex;gap:1rem}.sc-smoothly-table-row-group-h:not([align])>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:last-child{justify-self:end;display:flex;gap:1rem}.sc-smoothly-table-row-group-h:not([open]){grid-template-rows:auto 0fr}.sc-smoothly-table-row-group-h:not([open])>div.sc-smoothly-table-row-group:last-child{grid-row:2;overflow:hidden}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:first-child::before{content:'';display:flex;position:absolute;top:50%;translate:0 -50%;left:0.3em;height:0.4em;width:0.4em;border-bottom:1px solid rgb(var(--smoothly-default-contrast));border-right:1px solid rgb(var(--smoothly-default-contrast));transition:rotate 200ms ease-in-out;rotate:-45deg;opacity:0.3}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child:hover>div.sc-smoothly-table-row-group:first-child::before{opacity:1}[open].sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child>div.sc-smoothly-table-row-group:first-child::before{rotate:45deg}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{background-color:rgb(var(--smoothly-default-tint))}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child{border-bottom:1px solid rgb(var(--smoothly-default-shade))}.sc-smoothly-table-row-group-h>div.sc-smoothly-table-row-group:first-child:hover{background-color:rgb(var(--smoothly-default-shade))}";
+const SmoothlyTableRowGroupStyle0 = styleCss$c;
-const SmoothlyNextTableRowGroup = class {
+const SmoothlyTableRowGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.smoothlyNextTableRowGroupChange = index.createEvent(this, "smoothlyNextTableRowGroupChange", 7);
+        this.smoothlyTableRowGroupChange = index.createEvent(this, "smoothlyTableRowGroupChange", 7);
         this.align = false;
         this.open = false;
     }
     clickHandler() {
         this.open = !this.open;
-        this.smoothlyNextTableRowGroupChange.emit(this.open);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'd3b00684150badf532b9e22875f5336b3046c2f6' }, index.h("div", { key: '97df58601849cc6d33927c57df492ac7d1c3a3f2', onClick: () => this.clickHandler() }, index.h("div", { key: '9eb12d4d482d9a7281bda20e2fab7786b57304af' }, index.h("slot", { key: '9c16eb02aa173f60ccf9511ec9e3ed6326a69e52', name: "start" })), index.h("div", { key: 'd42092eebabe3aa692a683611bcf0b39346df059' }, index.h("slot", { key: 'ff10f4778d37364614497d63e6409941175677e0', name: "end" }))), index.h("div", { key: 'e31785e564d6a0070252beed387109683db6cf9c' }, index.h("slot", { key: 'a3cddc81231e743c8e35ce25e72011e3449f084a' }))));
-    }
-};
-SmoothlyNextTableRowGroup.style = SmoothlyNextTableRowGroupStyle0;
-const styleCss$r = ".sc-smoothly-notification-h{display:block;position:relative;min-width:30em;min-height:3em;border-radius:5px;margin:0.5em}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification,.sc-smoothly-notification-h>span.clean.sc-smoothly-notification{display:flex;justify-content:center;align-self:center}.sc-smoothly-notification-h>span.sc-smoothly-notification{margin:0 2rem 0 1rem}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification{display:flex;width:100%;justify-content:center}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>p.sc-smoothly-notification{padding-right:1em}.sc-smoothly-notification-h>span.sc-smoothly-notification>p.sc-smoothly-notification{text-align:left}[hidden].sc-smoothly-notification-h{display:none}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification{margin:0 0.5rem}.sc-smoothly-notification-h>smoothly-trigger.sc-smoothly-notification{font-size:0.7em;position:absolute;right:0}";
-const SmoothlyNotificationStyle0 = styleCss$r;
-const Notification = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.remove = index.createEvent(this, "remove", 7);
-        this.listener = notice => {
-            if (notice.state == "closed")
-                this.remove.emit(notice);
-            else
-                this.tick = {};
-        };
-        this.notice = undefined;
-        this.closable = true;
-        this.icon = undefined;
-        this.tick = {};
-    }
-    get properties() {
-        let result;
-        switch (this.notice.state) {
-            case "delayed":
-            case "warning":
-                result = ["warning", "warning-outline"];
-                break;
-            case "success":
-                result = ["success", "checkmark-circle"];
-                break;
-            case "executing":
-                result = ["light", "hourglass-outline"];
-                break;
-            case "failed":
-                result = ["danger", "alert-circle"];
-                break;
-            default:
-                result = ["light", undefined];
-                break;
-        }
-        return result;
-    }
-    onTrigger(event) {
-        if (event.detail.name == "close") {
-            event.stopPropagation();
-            this.notice.close();
-        }
-    }
-    onUpdatedNotice(newValue, oldValue) {
-        if (oldValue)
-            oldValue.unlisten(this.listener);
-        newValue.listen(this.listener);
-    }
-    componentDidLoad() {
-        this.onUpdatedNotice(this.notice);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'b465684388e211b2ded5fd95c2606598836eb9f7', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: 'f9c192c92023caa247d76d2b429aca24f344eadd', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'd2d9149ed8e0223269ed2f07f520916d526e183d', name: "close-circle-outline" }))), index.h("span", { key: 'f039aac3b2c5552dabf88890906e5d884da223aa', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '832732e4e3794174cd334664d76859ec0c8591db', name: this.properties[1] }), index.h("p", { key: 'c10b5d2560bf2a61c8ecf30b1ab1fc2311978aff' }, this.notice.message))));
-    }
-    static get watchers() { return {
-        "notice": ["onUpdatedNotice"]
-    }; }
-};
-Notification.style = SmoothlyNotificationStyle0;
-const styleCss$q = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;position:fixed;bottom:3rem;left:0;text-align:center;z-index:100}";
-const SmoothlyNotifierStyle0 = styleCss$q;
-const Notifier = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.icon = false;
-        this.notices = [];
-    }
-    onNotice(event) {
-        this.notices = [...this.notices, event.detail];
-    }
-    onRemove(event) {
-        this.notices = [...this.notices.filter(n => n != event.detail)];
-    }
-    render() {
-        return [
-            index.h("slot", { key: '1cdd6270fc1a9040c2c086e2f144e2e2c0428c16' }),
-            index.h("aside", { key: '86367dd48e79c97440bae007fe1ef8c8f4e8a8d0' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
-        ];
-    }
-};
-Notifier.style = SmoothlyNotifierStyle0;
-const styleCss$p = "[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h{cursor:wait;--spinner-time:1.4s;--spinner-color:var(--smoothly-color-contrast);--spinner-background:var(--smoothly-color);--spinner-background-opacity:var(--smoothly-semitransparent, 0.8);display:block;stroke:rgb(var(--spinner-color));background-color:rgba(var(--spinner-background), var(--spinner-background-opacity))}.sc-smoothly-spinner-h:not([overlay]){width:var(--spinner-size);height:var(--spinner-size)}[overlay].sc-smoothly-spinner-h{position:absolute;inset:0;width:100%;height:100%;z-index:4;background-color:rgba(var(--spinner-background), var(--spinner-background-opacity))}[color].sc-smoothly-spinner-h:not([overlay]),[color][overlay].sc-smoothly-spinner-h{background-color:rgba(var(--spinner-background), var(--spinner-background-opacity));stroke:rgb(var(--spinner-color))}[overlay].sc-smoothly-spinner-h>svg.sc-smoothly-spinner{position:absolute;width:var(--spinner-size);left:calc(50% - var(--spinner-size) / 2);top:calc(50% - var(--spinner-size) / 2)}.sc-smoothly-spinner-h>svg.sc-smoothly-spinner{animation:SPIN-SVG var(--spinner-time) linear infinite}.sc-smoothly-spinner-h>svg.sc-smoothly-spinner>circle.sc-smoothly-spinner{transform-origin:center;animation:SPIN-CIRCLE var(--spinner-time) ease-in-out infinite;stroke-dasharray:187;stroke-dashoffset:0}@keyframes SPIN-SVG{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes SPIN-CIRCLE{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}";
-const SmoothlySpinnerStyle0 = styleCss$p;
-const SmoothlySpinner = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.size = "large";
-        this.overlay = undefined;
-    }
-    render() {
-        const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (index.h(index.Host, { key: '792938768d1a1ddb59946572417c670e80c3394e', style: {
-                "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index.h("svg", { key: 'd64fc32ce94e45ae866b6c9cf446e9e722992911', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'b69441f0e8f46fe235ce5aa0c2b436a026a6c6c4', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
-    }
-};
-SmoothlySpinner.style = SmoothlySpinnerStyle0;
-const styleCss$o = "[color=default].sc-smoothly-submit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-submit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-submit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-submit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-submit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-submit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-submit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-submit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-submit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-submit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-submit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-submit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-submit-h{display:inline}[disabled].sc-smoothly-submit-h{opacity:0.5;pointer-events:none}.sc-smoothly-submit-h>a.sc-smoothly-submit,.sc-smoothly-submit-h>button.sc-smoothly-submit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-submit-h>a.sc-smoothly-submit:empty,.sc-smoothly-submit-h>button.sc-smoothly-submit:empty{border-width:0}.sc-smoothly-submit-h>button.sc-smoothly-submit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-submit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-submit{padding:0.8em;min-width:8em}.sc-smoothly-submit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-submit{padding:0.6em}[size=icon].sc-smoothly-submit-h>button.sc-smoothly-submit{padding:0.5em}[type=button].sc-smoothly-submit-h>a.sc-smoothly-submit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-submit-h>button.sc-smoothly-submit{font-size:100%}[size=large].sc-smoothly-submit-h>button.sc-smoothly-submit{font-size:130%}.sc-smoothly-submit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-submit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-submit-h>button.sc-smoothly-submit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-submit-h{width:100%}[expand=full].sc-smoothly-submit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-submit-h>button.sc-smoothly-submit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-submit-h:not([fill=clear])>button.sc-smoothly-submit:hover,.sc-smoothly-submit-h>button.sc-smoothly-submit:focus-visible,[fill=outline].sc-smoothly-submit-h:active>button.sc-smoothly-submit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-submit-h>button.sc-smoothly-submit:hover::before,[fill=outline].sc-smoothly-submit-h>button.sc-smoothly-submit:focus-within::before,[fill=outline].sc-smoothly-submit-h>button.sc-smoothly-submit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-submit:hover,.sc-smoothly-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-submit:focus-visible,.sc-smoothly-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-submit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-submit-h>button.sc-smoothly-submit,.sc-smoothly-submit-h.sc-smoothly-submit-s>smoothly-icon,.sc-smoothly-submit-h .sc-smoothly-submit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-submit-h{display:none}.sc-smoothly-submit-h{margin:1em 0em}";
-const SmoothlySubmitStyle0 = styleCss$o;
-const SmoothlySubmit = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
-        this.color = "success";
-        this.expand = undefined;
-        this.fill = undefined;
-        this.disabled = false;
-        this.type = undefined;
-        this.size = undefined;
-        this.shape = undefined;
-        this.prevent = true;
-    }
-    async componentWillLoad() {
-        console.warn(`smoothly-submit is deprecated, use smoothly-input-submit instead.\n <smoothly-button type="submit"> can also be used if you're using a regular form.`);
-        this.smoothlyInputLoad.emit(parent => {
-            if (Submittable.is(parent)) {
-                this.parent = parent;
-            }
-        });
-    }
-    clickHandler() {
-        var _a;
-        (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
-    }
-    render() {
-        return (index.h(Button, { key: 'f781491f3c975123d85054ccbe8a743ab386e6cd', disabled: this.disabled, type: this.type }, index.h("slot", { key: 'b667f21e7cb7eaf090e605360a961071be1e5ba6' })));
-    }
-};
-SmoothlySubmit.style = SmoothlySubmitStyle0;
-const styleCss$n = ".sc-smoothly-summary-h{display:grid;grid-template-columns:auto 1fr;column-gap:0.3rem}.sc-smoothly-summary-h>details.sc-smoothly-summary{display:contents}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary{display:grid;grid-template-columns:subgrid;grid-column:1/-1;list-style:none;align-items:center;cursor:pointer}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:transform 0.2s, opacity 0.1s;opacity:0.3}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary:hover>smoothly-icon.sc-smoothly-summary{opacity:1}.sc-smoothly-summary-h>details[open].sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transform:rotate(90deg)}.sc-smoothly-summary-h>details.sc-smoothly-summary-s>[slot=content]{grid-column:2}@media (prefers-reduced-motion){.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:none}}@supports selector(details::details-content){.sc-smoothly-summary-h>details.sc-smoothly-summary::details-content{grid-column:2}}";
-const SmoothlySummaryStyle0 = styleCss$n;
-const SmoothlySummary = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.smoothlySummaryOpen = index.createEvent(this, "smoothlySummaryOpen", 7);
-        this.inputs = {};
-        this.open = false;
-        this.color = undefined;
-        this.fill = "solid";
-        this.size = "tiny";
-    }
-    async toggleHandler(event) {
-        if (event.target instanceof HTMLDetailsElement) {
-            this.open = event.target.open;
-            this.smoothlySummaryOpen.emit(this.open);
-            this.open
-                ? await Promise.all(Object.values(this.inputs).map(input => input.register()))
-                : await Promise.all(Object.values(this.inputs).map(input => input.unregister()));
-        }
-    }
-    onInputLoad(event) {
-        if (Input.Element.is(event.target)) {
-            this.inputs[event.target.name] = event.target;
-            if (!this.open)
-                event.stopPropagation();
-        }
-    }
-    render() {
-        return (index.h("details", { key: '2e7c82742cbb10a395c875c66696811d1de29c6e', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: '28adf6434b953eef82b707bdcccba74cd1ffe145' }, index.h("smoothly-icon", { key: 'cfa652669f478a9b12e8895f8d2bdc2187456ae3', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: 'f2ccc1c98284600c7c029e5cd6698a3b2fc25fcd', name: "summary" })), index.h("slot", { key: 'f6b3ea00b87675164d8c78c11dc8f4e7aa79acd8', name: "content" })));
-    }
-};
-SmoothlySummary.style = SmoothlySummaryStyle0;
-const styleCss$m = ".sc-smoothly-tab-h{display:contents;--line-width:3px}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child{grid-column:span 1;background-color:transparent;border-bottom-color:rgb(var(--smoothly-default-shade));border-bottom-width:var(--line-width);border-bottom-style:solid}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{display:block;padding:.5rem;width:fit-content;margin:auto;cursor:pointer}[open].sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{border-bottom:var(--line-width) solid rgb(var(--smoothly-primary-color));margin-bottom:calc(-1 * var(--line-width));position:relative}.sc-smoothly-tab-h>div.sc-smoothly-tab:nth-child(2){grid-row:2 / 3;grid-column:1 / -1}";
-const SmoothlyTabStyle0 = styleCss$m;
-const SmoothlyTab = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.smoothlyTabOpen = index.createEvent(this, "smoothlyTabOpen", 7);
-        this.smoothlyTabLoad = index.createEvent(this, "smoothlyTabLoad", 7);
-        this.inputs = {};
-        this.label = undefined;
-        this.open = undefined;
-    }
-    async openHandler() {
-        if (this.open)
-            this.smoothlyTabOpen.emit(this.label);
-        this.open
-            ? await Promise.all(Object.values(this.inputs).map(input => input.register()))
-            : await Promise.all(Object.values(this.inputs).map(input => input.unregister()));
-    }
-    onClick() {
-        this.open = true;
-    }
-    connectedCallback() {
-        this.smoothlyTabLoad.emit();
-    }
-    async componentDidLoad() {
-        await this.openHandler();
-    }
-    onInputLoad(event) {
-        if (Input.Element.is(event.target)) {
-            this.inputs[event.target.name] = event.target;
-            if (!this.open)
-                event.stopPropagation();
-        }
-    }
-    render() {
-        return (index.h(index.Host, { key: 'e3b8ce1e4d8c920cf35f403dcd55d4ff4d0715e5' }, index.h("div", { key: '9579fce4fe5a38698c0ee55dbd3f02eb21ba8cab' }, index.h("label", { key: '576b85cb3df20264de65fe0857f1ed50d8c5cae8' }, this.label)), index.h("div", { key: 'e610c3b56b96ed0f9bb2e853b57a7e08ced5c7b5', hidden: !this.open }, index.h("slot", { key: 'a2ee7a416f0320022248f226e4750ae3531f59c7' }))));
-    }
-    static get watchers() { return {
-        "open": ["openHandler"]
-    }; }
-};
-SmoothlyTab.style = SmoothlyTabStyle0;
-const styleCss$l = ".sc-smoothly-table-h{display:table;width:var(--table-width, 80%);box-sizing:border-box;background-color:rgb(var(--smoothly-default-color))}[root].sc-smoothly-table-h{margin-left:1.5rem;margin-right:1.5rem}.sc-smoothly-table-h:not([root]){margin:0;width:100%}";
-const SmoothlyTableStyle0 = styleCss$l;
-const Table = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.smoothlyNestedTable = index.createEvent(this, "smoothlyNestedTable", 7);
-        this.smoothlySpotlightChange = index.createEvent(this, "smoothlySpotlightChange", 7);
-        this.smoothlyTableLoad = index.createEvent(this, "smoothlyTableLoad", 7);
-        this.expandable = new WeakMap();
-        this.expanded = new Set();
-        this.root = true;
-        this.color = undefined;
-        this.align = "middle";
-        this.open = false;
-    }
-    componentWillLoad() {
-        this.smoothlyNestedTable.emit(() => (this.root = false));
-        this.smoothlyTableLoad.emit((owner) => (this.owner = owner));
-    }
-    handleExpandableLoaded(event) {
-        event.stopPropagation();
-        event.target && this.expandable.set(event.target, event.detail);
-    }
-    handleExpandableState(event) {
-        event.stopPropagation();
-        event.target && (event.detail ? this.expanded.add(event.target) : this.expanded.delete(event.target));
-        this.smoothlySpotlightChange.emit({ allowSpotlight: !this.expanded.size, owner: this.owner });
-    }
-    handleSpotlightState(event) {
-        var _a;
-        this.open = !!this.expanded.size;
-        event.target != this.element &&
-            (event.stopPropagation(),
-                event.detail.owner && ((_a = this.expandable.get(event.detail.owner)) === null || _a === void 0 ? void 0 : _a.allowSpotlight(event.detail.allowSpotlight)));
-    }
-    handleNestedTable(event) {
-        event.target != this.element && (event.stopPropagation(), event.detail());
-    }
-    handleEvents(event) {
-        event.stopPropagation();
-    }
-    render() {
-        return [index.h("slot", { key: '752a663b8b13236087774b1de3e6b6ed8e149908' })];
-    }
-    get element() { return index.getElement(this); }
-};
-Table.style = SmoothlyTableStyle0;
-const styleCss$k = ".sc-smoothly-table-cell-h{display:table-cell;line-height:1.5rem;white-space:nowrap;padding:0.3rem .5rem;box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade))}.sc-smoothly-table-cell-h>div.sc-smoothly-table-cell>smoothly-icon.sc-smoothly-table-cell{display:none;width:1em;height:auto;aspect-ratio:1 / 1;margin:0 0.3rem;transition:transform 0.2s, opacity 0.1s;opacity:0.3}.sc-smoothly-table-cell-h:hover>div.sc-smoothly-table-cell>smoothly-icon.sc-smoothly-table-cell{opacity:1}smoothly-table-expandable-row>div .sc-smoothly-table-cell-h:last-of-type>div.sc-smoothly-table-cell>smoothly-icon.sc-smoothly-table-cell{display:flex}smoothly-table-expandable-row[open]>div>.sc-smoothly-table-cell-h:last-of-type>div.sc-smoothly-table-cell>smoothly-icon.sc-smoothly-table-cell{transform:rotate(90deg)}.sc-smoothly-table-cell-h>div.sc-smoothly-table-cell{display:grid;grid-template-columns:1fr auto;align-items:center}.sc-smoothly-table-cell-h>div.sc-smoothly-table-cell>div.sc-smoothly-table-cell{width:100%}smoothly-table[align=bottom] .sc-smoothly-table-cell-h{vertical-align:bottom}smoothly-table[align=middle] .sc-smoothly-table-cell-h{vertical-align:middle}smoothly-table[align=top] .sc-smoothly-table-cell-h{vertical-align:top}";
-const SmoothlyTableCellStyle0 = styleCss$k;
-const TableCell = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h(index.Host, { key: '12dc536e6c34db5fdc5917dd24a00779a9b686a4' }, index.h("div", { key: '40d94360ed7dfd15447ac62b4f8285ec3b4f9be9' }, index.h("div", { key: '22a3e08c5e3daa9a71a620b5e2d1f6179631c757' }, index.h("slot", { key: '49b76835654a627f0e4b6cefa68426d3f572f49a' })), index.h("smoothly-icon", { key: '406786469dde8704e84ba600d13cb14ba83edf8d', name: "caret-forward-outline", size: "tiny" }))));
-    }
-};
-TableCell.style = SmoothlyTableCellStyle0;
-const styleCss$j = ".sc-smoothly-table-demo-h{display:flex;flex-direction:column;align-items:center;gap:3rem;padding-bottom:10rem;margin-left:2rem;margin-right:2rem}.content.sc-smoothly-table-demo{display:contents}smoothly-lazy.sc-smoothly-table-demo{width:80%}";
-const SmoothlyTableDemoStyle0 = styleCss$j;
-const TableDemo = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h(index.Host, { key: '51b35ded9f79fd725f62621440425fb4158fb499' }, index.h("h4", { key: '23c261386ae6d407b41bd51875fb273efbc2eb8c' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: '1ae795cac6bd7b13d44dc28ec448c5dfb1eab8d6', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: 'ce7604a8859eaa145b243c2074718699a62cd38b' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: 'af13be417b896c4cacd5962bbcce1f1eed36b515' }), " ", index.h("h4", { key: 'fe0b0d95a28506fa9c53765bd85d4aa1380b5ac1' }, "Demo table 3"), index.h("smoothly-table", { key: '7c8df77c92d50bc0cb7b30fa9b3c347b5c4c6617' }, index.h("smoothly-table-row", { key: 'b1dda122006333ea3b811ae0ef26ccc78874252c' }, index.h("smoothly-table-header", { key: '44bd732bdcb5ffba2c0cd98890d36bba72d41884' }, "Header A"), index.h("smoothly-table-header", { key: '60a4b83a8a90bac3605e2a458883b0301b0ab79a' }, "Header B"), index.h("smoothly-table-header", { key: '8e747ba13137cd4c514341453b30bf220ea23cad' }, "Header C"), index.h("smoothly-table-header", { key: '612ed44db5916a271c28ac484da65bfa58f1e746' }, "Header D")), index.h("smoothly-table-row", { key: '6ef4d1d4562c5379084c9cbf944446f399255830' }, index.h("smoothly-table-expandable-cell", { key: '6c97ac4bf3356ba626925e7d05f97a8897b5c0cb' }, "normal row (exp.cell)", index.h("div", { key: '5880c6015f001618827158c71ff0e6194f3474b1', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: 'a5308992866c604bb19b2bf2751962005eb42fea' }, "expandable cell", index.h("div", { key: '6f34518760161e5122fb0e5c5421c26afd1fd7a3', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: '1d7260ebd83fd3af49ceae40f84b1140e6cc8fac' }, "expandable cell", index.h("div", { key: '0f6fca306db05fcc62492b15b2796fcfea454f4d', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: 'f340f2ffdd41d973e07321b0b223c12373e2f099' }, "expandable cell", index.h("div", { key: '2d7d2b9a11a5c5a2fea1291a43667d652018fcd1', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: 'fa40908672f9ee6b4dda4c4f624c2cb86ec8b9e0' }, index.h("smoothly-table-cell", { key: '67b3e59e9d63021095168cc4a929e6ec986ac840' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: 'e8bc8bf95802917ad9d2e07365eb3b6d502bb3d2' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: '22554689665c7dd33e4bae24a89510c7cd4ffdf0' }, "expandable cell", index.h("div", { key: 'e9d7e1929ff9543ed5ae36e731c0d22582a95959', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: '00387a856b04a6b14c3d83b0563923286118db33' }, "expandable cell", index.h("div", { key: '8be0a558b9b16f08168bd32192e29ea499990267', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: '95d701f8e523fccf5f2e02e121e0fbe4ba947026' }, index.h("smoothly-table-cell", { key: '3700c8d7e36232b86fdd7246fd7c59483b6517b9' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: '60344f1b89546b74eb4236ddb71918b3ab6516db' }, "Normal cell"), index.h("smoothly-table-cell", { key: '0e572179151ea06370591d6feee336458f62b8d4' }, "normal cell"), index.h("smoothly-table-cell", { key: '1ee1a28a276760c1b0de7fcc4580afdb5aaaa32f' }, "Normal cell"), index.h("div", { key: '3b67d84399d5de8d2c2801ac078d1168bc51bb2e', slot: "detail" }, "expandable row content"))), index.h("h4", { key: '498f8bff4c0537fd1dc47413bcbb4d5328fde4d0' }, "Demo table 4"), index.h("smoothly-table", { key: '5d5e61c8a261f5efd6b9cb6440ef356de54e30b4' }, index.h("smoothly-table-row", { key: '7bb88e25c5ce755b851d2809bb40f8670bc603ba' }, index.h("smoothly-table-header", { key: 'd38a03f7d37db39c48932a6c43cb1fae5974697c' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: 'f3ef8a67806b3c6afb1e330f2c54b5b88e2b6027' }, "Header expansion", index.h("div", { key: '89a34e92fca0028ee35f1ff5a139b644ee6732f8', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: 'a8c947b92c3716f70409ddb3f5f765bb2ef21c21' }, index.h("smoothly-table-cell", { key: 'b9a4a84c69f62cdb426de5a885ea71a1a65fa94d' }, "A Content"), index.h("smoothly-table-cell", { key: '5d9920de7838ace6cc62634363ba2052be0ffa28' }, "Expansion cell"), index.h("div", { key: 'c3c90b0433ceb8425f97fad5ff24671825a93da4', slot: "detail" }, index.h("smoothly-tab-switch", { key: '005b9f476134a11709754dd0dd2ec65d1a49efd8' }, index.h("smoothly-tab", { key: '6e3ba20b0cd120e514887ef4f6dcdf1194fae440', label: "innertable 1", open: true }, index.h("smoothly-table", { key: '98a5031bc6455f71ea7271186ed19606e91bf2d9' }, index.h("smoothly-table-row", { key: '9602024d5b3d043c4181d4f154d61b242f60f85b' }, index.h("smoothly-table-header", { key: 'b1a48298c6d5c4b5e2dbb81b2b67fe9b808330cd' }, "Header B")), index.h("smoothly-table-expandable-row", { key: '12923478bd85699910491a90fb1ba79037a747a8' }, "B Content"))), index.h("smoothly-tab", { key: '38a211fcb2fa39f08b4abab4a6bf062077420957', label: "innertable 2" }, index.h("smoothly-table", { key: '0c52b2ec005ee2b9e217354a121dcf3cd1085575' }, index.h("smoothly-table-row", { key: '6e49f8762c43c2aeb0804089e113f630d7229c29' }, index.h("smoothly-table-header", { key: 'e0a1640d345ae80ba113a363ecf92c9a88708de6' }, "Header C")), index.h("smoothly-table-expandable-row", { key: 'b3df3069c0ee3cc27a69efa23a5dbf01f9b39017' }, index.h("smoothly-table-cell", { key: '2d59298537b43937184f824b1894dae09f1093f3' }, "C Content"))))))), index.h("smoothly-table-row", { key: '398950c51e841302cf70c6c4906de57560d9e286' }, index.h("smoothly-table-cell", { key: 'a35a442d9383de212850c335fc7aa50d643a66fd' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: 'd5bff81775abbabe606838b2b9abfe00c596bac9' }, "Expandable cell", index.h("div", { key: '4d2b6959b83f5c2577d39940f07cf60f3bd75934', slot: "detail" }, "Expansion content")))), index.h("h4", { key: '48e4c3931aa50a8cd4962720785b707cc8d4abec' }, "Demo table 5"), index.h("smoothly-table", { key: 'fe5d1a032e950b478df5fe05f7965f164af978d0' }, index.h("smoothly-table-row", { key: '254569ae6f28d55511b35dc6a44a768562fdd53f' }, index.h("smoothly-table-header", { key: '21e41414dfc044a80fc254716f5899580187c076' }, "A"), index.h("smoothly-table-header", { key: 'ece90aaefe8ce0908f417599798f3a09cab76ec5' }, "B")), index.h("smoothly-table-expandable-row", { key: '9810a18ffe57eae5a1605fa3447eae0e98e30c72' }, index.h("smoothly-table-cell", { key: '25d32f1932d51028a8451428861139c1685daa61' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '88c2e50333cf22982868c495035862ac0c9d48f9' }, "b row"), index.h("div", { key: '4936c3a53fdc6e5e7f437a24d04585aab0308ff0', slot: "detail" }, index.h("smoothly-table", { key: '97ce2398a891ca1824d8d231fe969fdc2194f9f7' }, index.h("smoothly-table-row", { key: '97c34fe0b3824e31844b225f3dccc4a4c07a1834' }, index.h("smoothly-table-header", { key: '67c548534556e287c85b5baa615b9ee4a6a09980' }, "C"), index.h("smoothly-table-header", { key: '8607d26470e447d7b243f2ae1d09ed231d2c30fc' }, "D")), index.h("smoothly-table-expandable-row", { key: 'af3dc065a497ac0481b244500f9aaee3a9ea2e92' }, index.h("smoothly-table-cell", { key: 'ecb14c34536e25b26b2085243b7dcbf6dfd9eb08' }, "c"), index.h("smoothly-table-cell", { key: '6b785fb1e1a988fac6923e16e8d10046b8e79895' }, "d"), index.h("div", { key: '778f347547d53773f7ca7d78f1e27aa9f1f514ed', slot: "detail" }, index.h("smoothly-table", { key: 'b3e43661a405fdcdf38129835dc81f72ab1e9513' }, index.h("smoothly-table-row", { key: 'ff63e122ffb5cbd576428e8c55bbbe2caa0eb0a9' }, index.h("smoothly-table-header", { key: 'e200c49bccc18e76a8f26af8c2fd91709f0ab1e7' }, "E"), index.h("smoothly-table-header", { key: '474e143069858b5b529841beafc897ff9a9916e9' }, "F")), index.h("smoothly-table-expandable-row", { key: 'eadd405f57e633696bd2db052a4ad36d8bd75273' }, index.h("smoothly-table-cell", { key: '51318cc6f2d98f73d579c8895fb3c76ba1400c95' }, "e row"), index.h("smoothly-table-cell", { key: '5ff6bf2ae2a24c67aad41f1bb361fd7a1f76d052' }, "f row"), index.h("div", { key: 'fc9cc6b21ce1589c7f45a3c9a52f12ffcb74619b', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: 'de4a7061c8e3505874a988c09d155736d81072bf' }, index.h("smoothly-table-cell", { key: 'c45b37d4f85b6d872ee4d5745651f12ba53c5455' }, index.h("span", { key: 'f1ccaab3bed7286d4c0ad80e1c0b4d1bf2607cc0' }, "one"), index.h("span", { key: '8674af810ea990e8be3f4237d2a3a57db8db2e4a' }, "two"), index.h("span", { key: '95c7141959bbcb2c8c9929c2bc9bc384538c5ac5' }, "three")), index.h("smoothly-table-cell", { key: 'ec7db910dc3cc2e3e2e7927e1af4b01c30f23bc2' }, "five", index.h("smoothly-icon", { key: '0d98f968459807290548568b951dd4294f073032', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: '198ade6e521dc295afd66dbb122f721d3445c6b5', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: 'a70fd6842edf7b94fb99dbe0b2829c6ac302e8e5' }, index.h("smoothly-table-expandable-cell", { key: 'a2a4c921e1d9e4f1ca56ab04df93b0f1425c7df0' }, index.h("span", { key: '99ae2dea6e49dffd0efc90d4e1290f96b121e411' }, "nested expandable cells"), index.h("div", { key: 'e214102ef72d47d8003f0c4660721f3e73bbb55e', slot: "detail" }, index.h("smoothly-table", { key: 'fbba9ecaa67ccf1ff5c7d23539b3c4faf11d37ff' }, index.h("smoothly-table-row", { key: '5b356b5abe955986091795c86972e7c8dedfb0e6' }, index.h("smoothly-table-header", { key: '3a387b80348beb6593df2e21373427239725a132' }, "E"), index.h("smoothly-table-header", { key: '990944ca9580d1276647f1001be1897143ffabfe' }, "F")), index.h("smoothly-table-row", { key: 'a24cd6cd06bd02455749a5813dff08884ff7d730' }, index.h("smoothly-table-expandable-cell", { key: '96f632226a852491811fabb166d30ad3232390e2' }, "e cell", index.h("div", { key: '85f936ac49d1b8cfd909df0aec2f7d76120c458c', slot: "detail" }, index.h("smoothly-table", { key: 'add17081f7a3dc48a1b475ac6dae5b815e7967b1' }, index.h("smoothly-table-row", { key: '7054c59a67d524b905707d30a83e103d291ce695' }, index.h("smoothly-table-header", { key: '82950d41f1b24e227dd7d9128e3d6cd419f88935' }, "G"), index.h("smoothly-table-header", { key: '7ce42ef76c3d943363ce142f1b5c01dd7b4dab5f' }, "H")), index.h("smoothly-table-row", { key: 'b6681ab1291a07775dff7e771c09806b7882da70' }, index.h("smoothly-table-expandable-cell", { key: 'afddc209176b2c7568582af0421bc0d75452a952' }, "g cell", index.h("div", { key: '0fce912ac8e5218ad6c05b7062723a16949994aa', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: 'dff026211bfd19c7a8ef9e428323ae57c773eaf9' }, "h cell", index.h("div", { key: '2279bc7734a0f5794177a92490c61467de71423c', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: '92abfad6d298498850261f1fc2198da12cfeb257' }, "f cell", index.h("div", { key: '3dc31a972a8bfa6f393b68c703ab91affec02a55', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: '7a8f3bec9e794e6b678519b0b263a8ebf1a178cf' }, "b cell", index.h("div", { key: '4fbea5fc06942974d01fca3e4a5691f17b057830', slot: "detail" }, index.h("smoothly-table", { key: '77d25149f84328019709cc2e9ad2ce7a217be911' }, index.h("smoothly-table-row", { key: '399228c5534dccbdc3a7f150ab9c4b5fa5a5b983' }, index.h("smoothly-table-header", { key: '1ee897e7b8d3ce871deb4b2d89bac5a6d30b4af6' }, "C"), index.h("smoothly-table-header", { key: 'f3c0c86c9aeae5805eff55eaf2319efbbfe95752' }, "D")), index.h("smoothly-table-row", { key: 'fc6618e4c1f7a5a981ba9af172dbd96043dae82a' }, index.h("smoothly-table-expandable-cell", { key: '5612caa5f79b80ff181b703f4ee7aa2237bf2a7d' }, "c cell", index.h("div", { key: '4dbdddb850c53ca4c21bac31a6acb62f636ac6c9', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: '6b651fd10dc99b9a1fbcf0fae07c31b360c0fe69' }, "d cell", index.h("div", { key: '958ae4bb7fc6adad65f30c5bd87512d59302cf65', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: '884e8ebdcb911f2600c24e18f108bd445b7ab44b' }, "Demo table 6"), index.h("smoothly-table", { key: 'd98c7e0bff92551854080a6893232ef52ef73d9c' }, index.h("smoothly-table-row", { key: '9e9e16cf3dbcbb770200ccfb9c64b8a6eb678e99' }, index.h("smoothly-table-header", { key: '91aad45887e6f06329e9146d802155e1da317107' }, "display"), index.h("smoothly-table-header", { key: '97b7a29f0b381cdeb3302f331f8b8c8f70949d6f' }, "contents")), index.h("smoothly-table-expandable-row", { key: '91de275cd0d3fe7b7053a0310e73ff289254728b' }, index.h("div", { key: '1891ba933e601ac77df5b55831d7de8b56af6157', class: "content" }, index.h("smoothly-table-cell", { key: 'b2660bd964a4030328df78ce92ca7daede8eed5b' }, "A"), index.h("smoothly-table-cell", { key: '949104774b8d8b6f3c00f5e435360c8a5b0acc1e' }, "B")), index.h("div", { key: '2b9322f1138b53d9d2b9ab9068e5e0bc6e8f9d35', slot: "detail" }, "expansion"))), index.h("h4", { key: '56378a1ec3e4f7567538cfde94c0bdd87446512e' }, "Demo table 7"), " ", index.h("span", { key: 'bb9685ee9ff98dfcf0d383ba9804d52849d32c35' }, "nested 1 then normal"), index.h("smoothly-table", { key: '9ae6f5b81526a775b2eb0122d9f11aa6735c53e6' }, index.h("smoothly-table-row", { key: '3e9be7613b2402eeeed6e1ada1bee80779140036' }, index.h("smoothly-table-header", { key: '812ba2a3c4a7bd32f47ed76747a95070c19d8a5b' }, "A"), index.h("smoothly-table-header", { key: 'b240b0b9d0624b1dd677aabce2423a064c6c08bc' }, "B")), index.h("smoothly-table-expandable-row", { key: '092f059addebb8806b0902339d325f44cff42fd1' }, index.h("smoothly-table-cell", { key: 'ec88368f12ac9985881121d1cf41d55fea614403' }, "a"), index.h("smoothly-table-cell", { key: '01e029ba16ae7174f44163a17539c7d827a9fcb3' }, "b"), index.h("div", { key: '89fae13e100f7bf3111c763fe0a5f892f97aa4c5', slot: "detail" }, index.h("smoothly-table", { key: 'd98d1ae09ff1ca5fb5928b0c2c9b04af9460480c' }, index.h("smoothly-table-row", { key: 'd088825f427f1abfba3e4e729be598d2a9f52271' }, index.h("smoothly-table-header", { key: 'bbe9e4fdd58637d1f047061d8ff21f424c69b118' }, "C"), index.h("smoothly-table-header", { key: '3fa1124d1921267ae31129c592369e549d42b7f8' }, "D")), index.h("smoothly-table-row", { key: 'cb9e993adaaaf705f26915842e05714cf9df711d' }, index.h("smoothly-table-cell", { key: '0ae9cb561d4959f7fb810c06395c405e143fe127' }, "c"), index.h("smoothly-table-cell", { key: '071b888b03a43d0eed525501bfabc4c79f44796f' }, "d")), index.h("smoothly-table-row", { key: '0d4e99cbc7139ee9adf72e828c4a33fb353f904d' }, index.h("smoothly-table-cell", { key: 'ac48c46e781f7737915705e750dec5ef53f611cd' }, "ccc"), index.h("smoothly-table-cell", { key: 'f9274be68c34c202145a8783ecf1c9a102e5236e' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '526ce3d98a6ec359bd2a270a1f4306b94cc15f06' }, index.h("smoothly-table-cell", { key: '6b3d45595b284244c68914495e195215d95a5db5' }, "cccc"), index.h("smoothly-table-cell", { key: 'c462e0eb709b026b842df45cf06aec2348459d6b' }, "dddd"), index.h("div", { key: 'f69fe21672deaa27ab406e5a01e60ecff46f0e9e', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: 'ba3629c04f136319dc904965eda31382d9690bfb' }, index.h("smoothly-table-cell", { key: 'ca3b595163ce24fb198cf55d2ace684f9501b5d7' }, "ccccc"), index.h("smoothly-table-cell", { key: 'ae00dbe6489535d79bb92eeb1bf0cd4301d82b10' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '271eb2685bb55e7968a4f72724351931413281db' }, index.h("smoothly-table-cell", { key: 'f70ebd4310de1e44f6a30c7a68439bb9b0eac15a' }, "cccc"), index.h("smoothly-table-cell", { key: '9ede6fd9b1589f0b511610717a241d5c92f88b7f' }, "dddd"), index.h("div", { key: '1886b1e36182359488e97f4b1042b3b78eff9735', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: 'c5541946942c9749f553faef3b7c85e84202da93' }, "Demo table 8"), " ", index.h("span", { key: 'caf31f46cde96cb7dfcd044d41dae130aa84b4d4' }, "not nested"), index.h("smoothly-table", { key: '05e22b3f749c16472520155d3fe4c7b8f2e05a5b' }, index.h("smoothly-table-row", { key: '3bb391a4bca51d9885eae83007d3f9bb4b93f17a' }, index.h("smoothly-table-header", { key: 'bcd6278cca1fc6fe3428cc3764e5a8359fb209eb' }, "C"), index.h("smoothly-table-header", { key: '7952bb1adef6eadaf2a84f29b8abc4d3ca402cd7' }, "D")), index.h("smoothly-table-row", { key: 'd25ddb631b030f3fc90874739cb00b0c5552f121' }, index.h("smoothly-table-cell", { key: 'e4f2a03d24f7efcb01874dfa3c199879dbab28c1' }, "c"), index.h("smoothly-table-cell", { key: 'c417b230cedbe9e4dd87ef0b1bfa20f3f6c3688f' }, "d")), index.h("smoothly-table-row", { key: 'adc0c86a1002d03231129acfce5cd7a40f3cb089' }, index.h("smoothly-table-cell", { key: '732943a8b65f134d9d0502f64713bca443a79af9' }, "cc"), index.h("smoothly-table-cell", { key: 'dea2f0020f4c8dd7e3367d14bc9c6d6d0acc8d63' }, "dd")), index.h("smoothly-table-row", { key: 'ea869528b5eee2e6dc18cf3e9a40c91a207ea6db' }, index.h("smoothly-table-cell", { key: '5a1794e075f346bde3951ca71096f46c30ba195d' }, "ccc"), index.h("smoothly-table-cell", { key: '0abb14eb7a0ba89e8c9554c5f19c30ac4402d45f' }, "ddd"))), index.h("h4", { key: '224f98ff987b968e26631bb207527c07025a2d57' }, "Demo table 9"), index.h("smoothly-table", { key: 'cfc6f020da76331640b71aff11ae8b9ede4675fc' }, index.h("smoothly-table-row", { key: '349eb0c4d8a78ff23c78018e710c7659903e5e1e' }, index.h("smoothly-table-header", { key: '643b76621a4153759118ce25153d117608cca347' }, "First name"), index.h("smoothly-table-header", { key: 'c6aec6d1d6e71e0f37b8f892e05f6de95cca7800' }, "Last name"), index.h("smoothly-table-header", { key: '90f9c6aaa2c1183a083a366ca06ac4d16d3a8188', style: { width: "1px" } }, index.h("smoothly-icon", { key: '849630497b0b9f909160dc1fe52e9ea61adca3bf', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: 'd9e6bf70df8bb6456e969fe1587dc0df8f0b3a41' }, index.h("smoothly-table-cell", { key: 'f07ddb540da19e99dd841caca74f4ebd9f96783b' }, "Jessie"), index.h("smoothly-table-cell", { key: '03807f60095d97dc7790366fb5d8c50f68194189' }, "Doe"), index.h("smoothly-table-cell", { key: '9eb039e7aca0a5135af193794541b52379206da2' }), index.h("div", { key: '1e07d22ac5f6544c86b253482da9125009f1c106', slot: "detail" }, index.h("p", { key: 'd5acae7db701d5fb4d5a1803ad923214309e3ae5' }, "This is Jessie")))), index.h("h4", { key: 'ec36a21f08b5fb689c148b6da319ce5ca9d257c1' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: '142fa7aa03feba15c3d0be3abeaaebb3bf57d2fb' }, index.h("smoothly-table-row", { key: '5afff6455e38def419becd81d9ee30a727010581' }, index.h("smoothly-table-header", { key: 'e5cf3d96b7db6dbb18375076021447483ae618b1' }, "Company")), index.h("smoothly-table-expandable-row", { key: '6a69baac2ca1639d151e8f1da051cc84e00a4185' }, index.h("smoothly-table-cell", { key: '269dfec64b91c1b65e1204d95867dc499beb3d92' }, "Proquse"), index.h("smoothly-lazy", { key: 'c00915b08957723e10387cc5f404fa6c34d3ece2', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) })), index.h("smoothly-table-expandable-row", { key: '2f51137e19f15bd766a382358d354bee5992bb8a' }, index.h("smoothly-table-cell", { key: '97aaa589538275a6d5ab63646bc110298bf47e13' }, "Pax2Pay"), index.h("smoothly-lazy", { key: '1dc54430c599285aee13fb26a1b5de588b585569', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: 'a11b7428bd565d38e90615fc07ea65961ae1fc56' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: 'cd2972ec07c66aaa1b5cf9c9630422fedf541f10' }, index.h("smoothly-table-row", { key: '8b76eacdad16e7cb431de8a85a4e3c7fa106392f' }, index.h("smoothly-table-header", { key: 'a072c5bc21db606346da479fb44313aacb2eb609' }, "Company")), index.h("smoothly-table-row", { key: 'c184aaa82302b8ebe9c309f3f984d4ae2e2a5a96' }, index.h("smoothly-table-expandable-cell", { key: '2ef22098494d03e5dc908fe728c8982a9b3b92b7' }, "Proquse", index.h("smoothly-lazy", { key: 'e090426f9729024858fbbbfad50dc19b30199d06', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: '7550d5a6f932c38fbb0d85e97aae750121847e21' }, index.h("smoothly-table-expandable-cell", { key: '098b30f7661e8b983f038f0ec9a29baa0ccdc7a1' }, "Pax2Pay", index.h("smoothly-lazy", { key: '15e7264414e10b010a6fa18dc2dcc6ff1fa89e69', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: 'e64f1315e78a6e57b7c2506d4ea32422d8ff9339' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: '53a12803827744bf37720f60c3cd99439bc65eee' }, index.h("smoothly-table-row", { key: '3a45a13afaf3eba9bcf1c31a913d53c7bd996ac4' }, index.h("smoothly-table-header", { key: '4766556d4c34028d1bfada4f1eba93a6957ab8d0' }, "Name"), index.h("smoothly-table-header", { key: '95890692aec371f1ee7c3b772fa73b060b9f9113' }, "Age"), index.h("smoothly-table-header", { key: '648f385ff6ae89e95ec9d0a5f8e7b8ba422818e1' }, "Location")), index.h("smoothly-table-row", { key: '63721c569f6f084449561140168994b06afde157' }, index.h("smoothly-table-expandable-cell", { key: '486425032788b8da0381e11ebd17dff792e36bf6' }, "Jessie", index.h("div", { key: '637e06af0b62528f5f56b59fa2f4ca8471b1962c', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: 'a552c0a280737e1e126e5689662bb134c65d0438' }, new Date().getFullYear() - 2000, index.h("div", { key: '9bf19736d79312b4f24cf5e80887748505e2409a', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: 'b48dd4c3cabb278b50d9276db5ec0538d06d249b' }, "UK", index.h("div", { key: 'daded4b764817e9cb9b6a99768228480f44444dd', slot: "detail" }, "London"))))));
-    }
-};
-TableDemo.style = SmoothlyTableDemoStyle0;
-const styleCss$i = ".sc-smoothly-table-demo-filtered-h{display:block;width:80%}smoothly-table-cell.sc-smoothly-table-demo-filtered:nth-of-type(2){text-align:right}td.sc-smoothly-table-demo-filtered{padding-left:1.5em}";
-const SmoothlyTableDemoFilteredStyle0 = styleCss$i;
-const TableDemoFiltered = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.criteria = {};
-        this.cats = undefined;
-        this.selector = Selector.create("breed");
-    }
-    onFilterUpdate(event) {
-        event.stopPropagation();
-        this.criteria = event.detail;
-    }
-    smoothlyInputHandler(event) {
-        event.stopPropagation();
-        this.selector = this.selector.handle(event.detail);
-    }
-    async componentWillLoad() {
-        const response = await fetch("https://catfact.ninja/breeds?limit=15");
-        this.cats =
-            response.status == 200 &&
-                (await response.body).data.map((cat) => {
-                    var _a, _b;
-                    return (Object.assign(Object.assign({}, cat), { price: [...cat.breed].reduce((r, c) => r + c.charCodeAt(0), 0), nested: Object.assign(Object.assign({}, cat), { names: (_a = names[cat.country]) !== null && _a !== void 0 ? _a : [] }), names: (_b = names[cat.country]) !== null && _b !== void 0 ? _b : [] }));
-                });
-    }
-    render() {
-        const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: 'd7e233c053fba323a74a573623a6bf141d6f8ab1' }, index.h("smoothly-filter", { key: 'c246ea99ae3427350e8e1687cd53a3cd6058fe08' }, index.h("smoothly-filter-toggle", { key: '029e46bfb50aa37caa536d8ca9daf64bdb855a38', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '8288a44e699236f0694329ecb1d7017b9524ff9f', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '2589be0e3ae5c8a4883580570b1df34ab99245e1', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '9b2cb2fbf15b34cfb246e2bacb5520df18bd1893', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '71c2925f794a486d0ca442ca202ff53cb94ec02f', label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
-                var _a;
-                return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("div", { key: '3ef0a91d058fd3baa540573ae9a7455994a2864e', slot: "detail" }, index.h("smoothly-form", { key: 'e204f91a3fed50535f1ce501354c549726ec7e6b', looks: "border" }, index.h("smoothly-filter-select", { key: 'c9192a202234e985c3c731d85cb3dd8b430e1b6b', label: "coat", property: "nested.coat", multiple: true }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
-                var _a;
-                return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("smoothly-filter-select", { key: '66da328498d889b2a87c3b93c66c185c6ecd987f', label: "breed", property: "breed", multiple: false }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (index.h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), index.h("smoothly-filter-select", { key: 'de26f6af10598652eafe5805125754800cf509c8', label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
-            .flat()
-            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (index.h("smoothly-item", { slot: "items", value: name }, name)))), index.h("smoothly-filter-input", { key: 'd76165d44907e57898cbbdfb426630a59bc6c4fb', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'e34e1f06642bf8a1e5d2f135a77386f3522cdd69', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, this.selector.render(cats)), index.h("smoothly-table-header", null, "Breed"), index.h("smoothly-table-header", null, "Coat"), index.h("smoothly-table-header", null, "Price")), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-footer", null, index.h("td", { colSpan: 5 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` })))))));
-    }
-};
-const names = {
-    "United States": ["bill", "bob", "brad", "joe", "molly"],
-    Australia: ["nigel", "bruce", "sheila", "brad", "shane"],
-    "United Kingdom": ["nigel", "james", "molly", "shane", "bob"],
-    Greece: ["dionysius", "demetrius", "polikarpos"],
-};
-TableDemoFiltered.style = SmoothlyTableDemoFilteredStyle0;
-const styleCss$h = ".sc-smoothly-table-expandable-cell-h{display:table-cell;padding:0.3rem 0.5rem 0.3rem 0.2rem;cursor:pointer;line-height:1.5rem}.sc-smoothly-table-expandable-cell-h:not([open]){box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade)), 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset}[open].sc-smoothly-table-expandable-cell-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-color));box-shadow:1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, -1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell>smoothly-icon.sc-smoothly-table-expandable-cell{width:1em;padding-right:0.3rem;transition:transform 0.2s, opacity 0.1s;display:flex;height:auto;aspect-ratio:1 / 1;align-self:center;opacity:0.3}.sc-smoothly-table-expandable-cell-h:hover>div.sc-smoothly-table-expandable-cell>smoothly-icon.sc-smoothly-table-expandable-cell{opacity:1}[open].sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell>smoothly-icon.sc-smoothly-table-expandable-cell{transform:rotate(90deg) translateX(3px)}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell{display:grid;grid-template-columns:auto 1fr;align-items:center}.sc-smoothly-table-expandable-cell-h:not([open])>tr.sc-smoothly-table-expandable-cell>td.sc-smoothly-table-expandable-cell{display:none}smoothly-table-row>tr>td.sc-smoothly-table-expandable-cell-s>*{--expansion-width:1.5rem;--expansion-border-width:3px;position:relative;background-color:rgb(var(--smoothly-color));width:calc(100% + 3rem - 1px);top:1px;left:calc(-1 * var(--expansion-width) + 1px);box-sizing:border-box;padding:0.5rem calc(var(--expansion-width) - 1px);border-bottom:1px solid rgb(var(--smoothly-color-shade))}smoothly-table-row>tr.spotlight>td.sc-smoothly-table-expandable-cell-s>*{box-shadow:calc(var(--expansion-border-width)) 0 0 0 rgb(var(--smoothly-tertiary-color)) inset}smoothly-table-row>tr:not(.spotlight)>td.sc-smoothly-table-expandable-cell-s>*{box-shadow:-1px 0 0 0 rgb(var(--smoothly-tertiary-color)), 1px 0 0 0 rgb(var(--smoothly-tertiary-color))}smoothly-table-row>tr>td.sc-smoothly-table-expandable-cell-s>*::before{content:\"\";position:absolute;display:flex;top:-1px;bottom:0;left:-1px;width:calc(var(--expansion-width) + 1px);border-top:1px solid rgb(var(--smoothly-color-shade))}smoothly-table-row>tr>td.sc-smoothly-table-expandable-cell-s>*::after{content:\"\";position:absolute;display:flex;top:-1px;bottom:0;right:0;width:calc(var(--expansion-width) - 1px);border-top:1px solid rgb(var(--smoothly-color-shade));border-right:1px solid rgb(var(--smoothly-color-shade))}smoothly-table[align=bottom] .sc-smoothly-table-expandable-cell-h{vertical-align:bottom}smoothly-table[align=middle] .sc-smoothly-table-expandable-cell-h{vertical-align:middle}smoothly-table[align=top] .sc-smoothly-table-expandable-cell-h{vertical-align:top}";
-const SmoothlyTableExpandableCellStyle0 = styleCss$h;
-const TableExpandableCell = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.smoothlyExpansionOpen = index.createEvent(this, "smoothlyExpansionOpen", 7);
-        this.smoothlyExpansionLoad = index.createEvent(this, "smoothlyExpansionLoad", 7);
-        this.smoothlyExpandableChange = index.createEvent(this, "smoothlyExpandableChange", 7);
-        this.smoothlyExpandableLoad = index.createEvent(this, "smoothlyExpandableLoad", 7);
-        this.allowSpotlight = true;
-        this.spotlight = true;
-        this.open = undefined;
-    }
-    openChanged(value) {
-        if (this.expansionElement)
-            if (value)
-                this.beginOpen = true;
-            else
-                this.element.append(this.expansionElement);
-        this.smoothlyExpandableChange.emit(this.open);
-    }
-    handleSpotlight() {
-        this.spotlight = this.open && this.allowSpotlight;
-    }
-    componentWillLoad() {
-        this.smoothlyExpansionLoad.emit();
-        this.smoothlyExpandableLoad.emit({
-            allowSpotlight: (allowed) => (this.allowSpotlight = allowed),
-        });
-    }
-    componentDidRender() {
-        if (this.beginOpen) {
-            this.beginOpen = false;
-            this.smoothlyExpansionOpen.emit(this.expansionElement);
-        }
-    }
-    onClick() {
-        this.open = !this.open;
-    }
-    handleTableLoaded(event) {
-        event.stopPropagation();
-        event.detail(this.element);
-    }
-    render() {
-        return (index.h(index.Host, { key: '7f99296c8b258bcac935f91bf61766ab55b7cb7f' }, index.h("div", { key: 'c4177f1f85595d7618dabe68bd3a4ac52528d2ad' }, index.h("smoothly-icon", { key: 'e68d816b11f7f5948be9b28f6e3f8ad1a1deba63', name: "caret-forward-outline" }), index.h("slot", { key: 'f494db81c816da589b12de1ed1d1562cf30ee36a' })), index.h("tr", { key: 'd974329b89730630cca0873471796493b19a4b12', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: '88b9d0602373ee07c224dc179480cf359d4ffdb7', colSpan: 999 }, index.h("slot", { key: 'c304e44346c82d9b6743f71403262937f3c76d3a', name: "detail" })))));
-    }
-    get element() { return index.getElement(this); }
-    static get watchers() { return {
-        "open": ["openChanged", "handleSpotlight"],
-        "allowSpotlight": ["handleSpotlight"]
-    }; }
-};
-TableExpandableCell.style = SmoothlyTableExpandableCellStyle0;
-const styleCss$g = ".sc-smoothly-table-expandable-row-h{display:contents}.sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row{display:table-row;cursor:pointer;line-height:1.5rem}[open].sc-smoothly-table-expandable-row-h>div.sc-smoothly-table-expandable-row{position:relative;z-index:3;background-color:rgb(var(--smoothly-color))}.sc-smoothly-table-expandable-row-h[open]>div.sc-smoothly-table-expandable-row-s smoothly-table-cell,.sc-smoothly-table-expandable-row-h[open]>div.sc-smoothly-table-expandable-row-s>smoothly-table-cell{box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade)) inset}.sc-smoothly-table-expandable-row-h[open]>div.sc-smoothly-table-expandable-row-s smoothly-table-cell:first-child{box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade)) inset, 1px 0 0 0 rgb(var(--smoothly-color-shade)) inset}.sc-smoothly-table-expandable-row-h[open]>div.sc-smoothly-table-expandable-row-s smoothly-table-cell:last-child{box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade)) inset, -1px 0 0 0 rgb(var(--smoothly-color-shade)) inset}.sc-smoothly-table-expandable-row-h[open]>div.sc-smoothly-table-expandable-row-s smoothly-table-cell:last-child:first-child{box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade)) inset, 1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, -1px 0 0 0 rgb(var(--smoothly-color-shade)) inset}.sc-smoothly-table-expandable-row-h:not([open])>tr.sc-smoothly-table-expandable-row>td.sc-smoothly-table-expandable-row{display:none}.sc-smoothly-table-expandable-row-h>tr.sc-smoothly-table-expandable-row>td.sc-smoothly-table-expandable-row{position:relative}.sc-smoothly-table-expandable-row-h>tr>td.sc-smoothly-table-expandable-row-s>*{--expansion-width:1.5rem;--expansion-border-width:3px;position:relative;background-color:rgb(var(--smoothly-color));width:calc(100% + 3rem - 2px);left:calc(-1 * var(--expansion-width) + 1px);box-sizing:border-box;padding:0.5rem calc(var(--expansion-width) - 1px);border-bottom:1px solid rgb(var(--smoothly-color-shade))}.sc-smoothly-table-expandable-row-h>tr.spotlight>td.sc-smoothly-table-expandable-row-s>*{box-shadow:calc(var(--expansion-border-width)) 0px 0px 0px rgb(var(--smoothly-tertiary-color)) inset}.sc-smoothly-table-expandable-row-h>tr:not(.spotlight)>td.sc-smoothly-table-expandable-row-s>*{box-shadow:-1px 0 0 0 rgb(var(--smoothly-tertiary-color)), 1px 0 0 0 rgb(var(--smoothly-tertiary-color))}.sc-smoothly-table-expandable-row-h>tr>td.sc-smoothly-table-expandable-row-s>*::before{content:\"\";position:absolute;display:flex;top:0;bottom:0;left:-1px;width:calc(var(--expansion-width) + 1px);border-top:1px solid rgb(var(--smoothly-color-shade))}.sc-smoothly-table-expandable-row-h>tr>td.sc-smoothly-table-expandable-row-s>*::after{content:\"\";position:absolute;display:flex;top:0;bottom:0;right:0;width:calc(var(--expansion-width) - 1px);border-top:1px solid rgb(var(--smoothly-color-shade));border-right:1px solid rgb(var(--smoothly-color-shade))}";
-const SmoothlyTableExpandableRowStyle0 = styleCss$g;
-const TableExpandableRow = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.smoothlyExpansionOpen = index.createEvent(this, "smoothlyExpansionOpen", 7);
-        this.smoothlyExpandableChange = index.createEvent(this, "smoothlyExpandableChange", 7);
-        this.smoothlyExpandableLoad = index.createEvent(this, "smoothlyExpandableLoad", 7);
-        this.allowSpotlight = true;
-        this.spotlight = true;
-        this.open = undefined;
-    }
-    handleSpotlight() {
-        this.spotlight = this.open && this.allowSpotlight;
-    }
-    componentWillLoad() {
-        this.smoothlyExpandableLoad.emit({
-            allowSpotlight: (allowed) => (this.allowSpotlight = allowed),
-        });
-    }
-    handleTableLoaded(event) {
-        event.stopPropagation();
-        event.detail(this.element);
-    }
-    render() {
-        return (index.h(index.Host, { key: '784a683f40536548d1542c5dae42a58c93cc80d7' }, index.h("div", { key: 'bdbd93a9b79b97e6ef11a3de7c864a3f5f520dc8', onClick: () => (this.open = !this.open) }, index.h("slot", { key: 'eac3be2e5a17eae0171d69659a84f6a1ca012abb' })), index.h("tr", { key: 'd5d553074bc8663cb820de9c1db912c67731d749', class: { spotlight: this.spotlight } }, index.h("td", { key: 'f74d6d53ad0ec47c5da68796a9a96572710a2553', colSpan: 999 }, index.h("slot", { key: '4b2b30c415b95564673bc6bd97dc192575592078', name: "detail" })))));
-    }
-    get element() { return index.getElement(this); }
-    static get watchers() { return {
-        "open": ["handleSpotlight"],
-        "allowSpotlight": ["handleSpotlight"]
-    }; }
-};
-TableExpandableRow.style = SmoothlyTableExpandableRowStyle0;
-const styleCss$f = ".sc-smoothly-table-footer-h{display:table-footer-group;position:sticky;bottom:0;background-color:rgb(var(--smoothly-color));box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade)),\n\t\tinset 0 1px 0 rgb(var(--smoothly-color-shade));line-height:2.5rem;font-weight:bold}";
-const SmoothlyTableFooterStyle0 = styleCss$f;
-const TableFooter = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return index.h("slot", { key: '8caee25c663413b4d07322ebaa29e4c4b81e6d5e' });
-    }
-};
-TableFooter.style = SmoothlyTableFooterStyle0;
-const styleCss$e = ".sc-smoothly-table-header-h{display:table-cell;line-height:2.5rem;border-top:1px solid rgb(var(--smoothly-color-shade));box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade));padding:0 .5rem;font-weight:bold}smoothly-table[align=bottom] .sc-smoothly-table-header-h{vertical-align:bottom}smoothly-table[align=middle] .sc-smoothly-table-header-h{vertical-align:middle}smoothly-table[align=top] .sc-smoothly-table-header-h{vertical-align:top}";
-const SmoothlyTableHeaderStyle0 = styleCss$e;
-const TableHeader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.name = undefined;
-    }
-    render() {
-        return (index.h(index.Host, { key: '9c50912894be88d8ad12e05455997404e0a6dcff' }, index.h("slot", { key: 'c7db69ee0fd006b5f4afe86e41cfae29861e2915' })));
-    }
-};
-TableHeader.style = SmoothlyTableHeaderStyle0;
-const styleCss$d = ".sc-smoothly-table-row-h{display:table-row-group;cursor:default;line-height:1.5rem}.hide.sc-smoothly-table-row{display:none}.sc-smoothly-table-row-h>div.sc-smoothly-table-row{display:contents}";
-const SmoothlyTableRowStyle0 = styleCss$d;
-const TableRow = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.expansions = [];
-        this.open = false;
-    }
-    onExpansionLoad(event) {
-        this.expansions.push(event.target);
-    }
-    onExpansionChange() {
-        this.open = this.expansions.some(expansion => expansion.open);
-    }
-    onExpansionOpen(event) {
-        var _a;
-        this.expansions.forEach(cell => {
-            if (cell != event.target)
-                cell.open = false;
-        });
-        if (event.detail)
-            (_a = this.element) === null || _a === void 0 ? void 0 : _a.after(event.detail);
-    }
-    render() {
-        return (index.h("div", { key: '7a3b1f9bf7edcfc68a3c130c0bc1f54dd079a8e5', ref: e => (this.element = e) }, index.h("slot", { key: '3f8f3c027aa32505d2748ee2f3252e27e2d2c5ac' })));
-    }
-};
-TableRow.style = SmoothlyTableRowStyle0;
-const data = [
-    {
-        type: "cat",
-        name: "Lazie",
-        age: 3,
-    },
-    {
-        type: "dog",
-        name: "Jessie",
-        age: 8,
-    },
-    {
-        type: "cat",
-        name: "Snooz",
-        age: 5,
-    },
-    {
-        type: "bird",
-        name: "Squeak",
-        age: 1,
-    },
-    {
-        type: "bird",
-        name: "Quirk",
-        age: 2,
-    },
-];
-const styleCss$c = ".sc-smoothly-table-testing-h{width:100%;display:flex;justify-content:center}smoothly-table.sc-smoothly-table-testing{width:80%}.tableCell.sc-smoothly-table-testing{height:3rem;display:flex;align-items:center}.tableCell.sc-smoothly-table-testing>div.sc-smoothly-table-testing{margin-left:3rem;margin-right:3rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}td.sc-smoothly-table-testing>div.footer.sc-smoothly-table-testing{display:flex;padding-left:1.5em;flex-direction:row;gap:1em}";
-const SmoothlyTableTestingStyle0 = styleCss$c;
-const SmoothlyTableTesting = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.counter = 0;
+        this.smoothlyTableRowGroupChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '3aa3e45e3b498bd83810d5175914264902e12ed3' }, index.h("smoothly-table", { key: '972ea10b0c8d61c3635ee82aff40cd97b195f924', color: "dark" }, index.h("smoothly-table-row", { key: '3d1c5e266bea1efed0218b55e2f3d51585adf554' }, index.h("smoothly-table-header", { key: 'f5a5b9c6b6d3b981f37a885161c1b4ccee95d984' }, "Type"), index.h("smoothly-table-header", { key: '954ea4f900d2b6da85721ff157475376153ded84' }, "Name"), index.h("smoothly-table-header", { key: '795796b0e2832e308e054077241ec5e7927cc4ca' }, "Age")), data.map(animal => (index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, animal.type), index.h("smoothly-table-cell", null, animal.name), index.h("smoothly-table-cell", null, animal.age), index.h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, index.h("smoothly-input", { value: animal.type }, "Type"), index.h("smoothly-input", { value: animal.name }, "Name"), index.h("smoothly-input", null, animal.age), index.h("smoothly-submit", { slot: "submit" }, "Submit!"))))), data.map(animal => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, animal.type), index.h("smoothly-table-expandable-cell", null, animal.name, index.h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, index.h("smoothly-input", { value: animal.name }, "Name"), index.h("smoothly-submit", { slot: "submit" }, "Submit!"))), index.h("smoothly-table-expandable-cell", null, animal.age, index.h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, index.h("smoothly-input", { value: animal.type }, "Type"), index.h("smoothly-input", { value: animal.name }, "Name"), index.h("smoothly-input", null, animal.age), index.h("smoothly-submit", { slot: "submit" }, "Submit!")))))), index.h("smoothly-table-footer", { key: 'ac52f912c309fd8ff4966f88112e1734f1dca260' }, index.h("td", { key: '28882429e3af78f158c3de362cad4a5d7dc041bc', colSpan: 2 }, index.h("div", { key: '8264ea4c5ada70d8da21d37d973cb19482e87c20', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: '17bef8c3ed5e3a7d24d0ab58ecd88857d345ea02', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: 'b09e77a40ec3825d266ba203ffd66bff584f9d86' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
+        return (index.h(index.Host, { key: 'd39263848ea2642912f8f7944b4af31bbeb7bedb' }, index.h("div", { key: 'c646cbc32e7a6d1dab115ad61e34e1d23df1b5c2', onClick: () => this.clickHandler() }, index.h("div", { key: '8625237beff7d80edd3d4b48ab97dafc688ebdad' }, index.h("slot", { key: '19eb66f64c2f9d836ac74c11565cc3cf1573f9c4', name: "start" })), index.h("div", { key: '7a0605223df89b3f0edafa723244b495c0466608' }, index.h("slot", { key: '5e781edb2a74e94b80bed6732abe028d5ddb0fa6', name: "end" }))), index.h("div", { key: '530f66f946ca11615f058bd0a8b061a858ec7751' }, index.h("slot", { key: '7a9dccab9430529f5779424940073fcd19187775' }))));
     }
 };
-SmoothlyTableTesting.style = SmoothlyTableTestingStyle0;
+SmoothlyTableRowGroup.style = SmoothlyTableRowGroupStyle0;
 const styleCss$b = ".sc-smoothly-tabs-h{display:grid;grid-template-columns:repeat(var(--tabs), auto);grid-template-rows:auto auto}";
 const SmoothlyTabsStyle0 = styleCss$b;
@@ -12827,7 +12439,7 @@ const SmoothlyTabs = class {
             old.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: '4723171c49acfc54de0dd366c86dc4ae36a748c0', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '4da89c3ff15e778573f76dce6cf51801d16f56c1' })));
+        return (index.h(index.Host, { key: 'f17ec6be41e37bd9f3c4c13034bdcd6de9a7b9b4', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '5f4a4446566dc5120b8728bcbd854dc834f10a2d' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12844,7 +12456,7 @@ const SmoothlyTabsDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-tabs", { key: '79909b0d6b9863f1f35726c9742424d09eceea67' }, index.h("smoothly-tab", { key: '6ba9e1b36f71e562b935c7ffe106743a57cfe843', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '2e98a96cabaa91794571cf01e212034cf7e528da', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: '6f82adb60adf95b201785ed8c8616337468e6e44', label: "test3" }, "this is a test message again!")));
+        return (index.h("smoothly-tabs", { key: '4a00dd7c436dbf3d9abe9433b99638af102cf7ec' }, index.h("smoothly-tab", { key: '7c12f03057817a6bb970ae5b6f94d6d0e3fbdf01', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '2a6045a36eb91238215cfea7d02ce7e57663412d', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: '6fa4537914d989e47aad7eac348435ea97746e82', label: "test3" }, "this is a test message again!")));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
@@ -12858,7 +12470,7 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'f9885148a3e90c5211fd5cb50d4612b5c2c80cd5' }, this.color, ["tint", "color", "shade"].map(variant => (index.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
+        return (index.h(index.Host, { key: 'c4d5fc173ffb6f2eabf51c7857cf058ed1d1fe2c' }, this.color, ["tint", "color", "shade"].map(variant => (index.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
     }
 };
 SmoothlyThemeColor.style = SmoothlyThemeColorStyle0;
@@ -12910,7 +12522,7 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '59cc052519c330103c1ee7af8841c87d5834beab' }, index.h("h2", { key: '38d434f987900cb30ee0067861a40f0531c9b9e0' }, "Theme"), index.h("smoothly-theme-picker", { key: 'd53c94c8166e671ec18eb92823037ca4aa519ef2' }, index.h("smoothly-item", { key: '4525c1f1c28807319252c5ce1a2cf959c2d4602d', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '54d67c1a54318b3fdc789ad299f6cb1eb174fd5b', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '92c34281b810fa2e12cf3ba2c43fd283a1a828ff', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '19e3e20be1923bed0c35fb77c41049131f9e5acf', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: 'b5aab0bd881c9747ce44968f9fe56473b9f2619d', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: 'eab343b90f723397cf0dab1d0fddc9f58b4c877d', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: 'e1700ecefee65dd925a08b7ebbb3695762191163', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'ceb97c7061fc1089710f32e559dffbb96e6ea8bc', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: 'ddbc893e8dc443656fbdbcd589e2835095807751', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '88549ee7826c8acca0f8483e43d22c5ac305beca' }, index.h("smoothly-theme-colors", { key: '892b29c01a5612f924c797d057e6ac646a106499' }), index.h("smoothly-theme-guide", { key: '7b43bc2d185856c5079aa314f618fff3cad7cb5c' })), index.h("smoothly-button", { key: '8afd9ff1ec59e21ff50768b5c5ec691f18b83410', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: 'fdc0eff0412161470e9e82e0c8967b5fdf069338', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: '509e5cd8fe45ea78a244af67f06130f9900aefb4', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: 'ca22e79d75a602dbbaa028707f35648bb404b8e5', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: '4463a636e45a126ba2fb062048ebd0b9fb3f687d' }, index.h("h2", { key: 'c2a7009ee3887c027ae7b7bf005d913036685e64' }, "Theme"), index.h("smoothly-theme-picker", { key: '0a446c485965bef46174bbc3c43fbc80abbeb29f' }, index.h("smoothly-item", { key: '1cd98a7c5a46aec65ffb22d125f788a0d84524f3', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '420c81c9b4fdde7d753d17dd89ea766b63cac4b7', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: 'be405af1795f5a5f5880c43176d927eae4e7ed8c', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '2873d44164cb6e8684096edb6f0cb48dddc00499', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: 'f4074f3ff99ae23d74f9afd182f50bdca5975189', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: 'e29a9eabce4fe47d563cd332f6ac1f9694255e0e', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '605c81cabec58d8bf0effbba978124cc2edc18dc', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '89cd4a4fde0377438f9b0774ef5cde8d12ad3de6', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '80a0348fd0d5d123ae21e3553402cbd45cfc354f', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '8984c5ecbab2d30da873861d05dde2e33d9e91b5' }, index.h("smoothly-theme-colors", { key: 'b5cb68f62cdd11e8a5b5487c62680f5a1b955593' }), index.h("smoothly-theme-guide", { key: 'caae0dccd337a1f7f3f59dac6cf616fe2058d3b9' })), index.h("smoothly-button", { key: '68ca23965a74ba537d3b3c011d70b8039990fe30', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '71ba1deab1a40617e628c555f81b8414d7900542', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: '8e4aff63e4a8b24aa875d277e6f0ad2c6b8c4960', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '24bb491c61fd7b4321936a31d3936067155d284c', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -12924,14 +12536,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index.h("smoothly-display", { key: 'eccf9cb726e22d4487cb6ace27703e7dfbe04134' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index.h("br", { key: '0aed5ffa747946fd7cd6902115c1e37e26be7d48' }),
-            index.h("smoothly-display", { key: '05d7b06bb92058cb0979e6c05e4f250b93b2daa9' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
-            index.h("br", { key: '00ea5bbf23e0810f03aaed53dddd9047a34bbab7' }),
-            index.h("smoothly-display", { key: 'cb5d6c1b34213ef8910bddea90407fa616d7cdad' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
-            index.h("br", { key: 'ed757e80775b76dd7dd5f23b770611f58d61729d' }),
-            index.h("smoothly-display", { key: '522fa6897643a768040295d1dcaf57e8a1be5435' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index.h("br", { key: 'a640d0e6529ce9213b45eb11204d088bd32fea72' }),
+            index.h("smoothly-display", { key: 'e02cf3d9a55c0f8bf5027f808870e1b3050be8b5' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: '817c11793839a6ae6ba3c95d17bf4d259e3ba0f2' }),
+            index.h("smoothly-display", { key: '2e94e10374c983af3d5e182fafa79a23297a1963' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
+            index.h("br", { key: 'e66a23032469185cfbb4ff72e9269503e0dfe208' }),
+            index.h("smoothly-display", { key: 'd439e1e3c0376c104497ced7089fbe5353b95cf7' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
+            index.h("br", { key: 'da226714d31e8bb16901982c3d76760479556603' }),
+            index.h("smoothly-display", { key: 'dea4cf61a7aea11560d67ac2edef565c981958e7' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: '5ac250dadb2c47de1399c1c5f5d7aacf9cb05c3d' }),
         ];
     }
 };
@@ -12946,11 +12558,11 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: 'b04d09142b7fc625ed15fc1fddf9ef1fe152a95e' }, index.h("smoothly-input-select", { key: '7f0252291789ce32deb059120398a51f9e04bcbd', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'd689a1c952e70cce86dc2aa27e794b087bf49b69' }, index.h("smoothly-input-select", { key: '04a1ef8bf253bd7bc3799d219de7ebe7dd220e1b', name: "theme", looks: "border", onSmoothlyInput: e => {
                 const element = document.querySelector(`#${this.element}`);
                 if (element instanceof HTMLLinkElement && typeof e.detail.theme == "string")
                     element.href = e.detail.theme;
-            } }, index.h("label", { key: 'faa6bf731ea355b0e6dcab3762b89a6fadcb7c7a', slot: "label" }, "Select theme"), index.h("slot", { key: 'ff72c60cea8adeeda53827354a43158af8fa3c75' }))));
+            } }, index.h("label", { key: '0b294f2161e7862a2aaaf47b806a057aa1d1bdf5', slot: "label" }, "Select theme"), index.h("slot", { key: 'b21b9ee4e9f7b7326f3b979c415363f6d93bb546' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -12971,7 +12583,7 @@ const SmoothlyToggle = class {
         this.selected = !this.selected;
     }
     render() {
-        return (index.h("button", { key: '644987b51fbf33c412d226db07f8b8f1cc2f9d6a', type: "button" }, index.h("slot", { key: '250550a1656bf524bfa26876a0f84186b71fe30d', name: "icon-slot" }), index.h("slot", { key: '70e62636f0f3248cdf9f65085f451003118b65e4' }, this.name)));
+        return (index.h("button", { key: 'f0e5138156ac79c5643426f72620393dfb8c27e8', type: "button" }, index.h("slot", { key: '79e984f1882f605bc011bcf6150e4dd1a3ee8c73', name: "icon-slot" }), index.h("slot", { key: '65d09c198954ac88ce636f0c8b74a2878b16c68c' }, this.name)));
     }
 };
 SmoothlyToggle.style = SmoothlyToggleStyle0;
@@ -12995,7 +12607,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index.h(index.Host, { key: 'd033fcac30226c928b480e2bc0f92c488ce68c69' }, index.h("button", { key: '1689f4e4211089535dbfc5183a7d5004cd89c008', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'e196b57b5fd5251695d289ea4249e32297954958', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
+        return (index.h(index.Host, { key: 'baeb9a35d3a913f1648685c7d241c7af1c7c2ec4' }, index.h("button", { key: '938b362d38ec57efd22bb659781085f49e69bff9', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'c60d94f545a9bf0a31ea2fdc283e0e71fef6047c', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -13008,7 +12620,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7e2ff9133320bf46ed21b80e411f8581c6ec757d' }, index.h("h4", { key: '9f22c89fb1d4c5e877b177a7c16badfa9088f2f4' }, "Toggle switches"), index.h("div", { key: '9099b945cd068c2b2e249b32cd8da32bbd147233' }, index.h("p", { key: '689b438c4bbaf0ee4f1a8dd22f65d59c7a131a18' }, "Checkmark"), index.h("span", { key: '2d38884ff8cf48f5f36b352c4e16887491eef7d4' }, index.h("p", { key: '327cda20b0a05941339d6d389bcdc5e8097d2716' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '636f256204747ee42744e09b66360b5841541520', disabled: false, size: "tiny" })), index.h("span", { key: '6c86ebfb8d47205f73d7bacf3bbca08f24e53a2f' }, index.h("p", { key: 'df4225909b433e645f8e3019aaf537dac49c402b' }, "Small"), index.h("smoothly-toggle-switch", { key: '0c662f0416479ed68702ba9a1a73b37690245868', disabled: false, size: "small" })), index.h("span", { key: 'de477be9882509062c463383ace02c4d332752c3' }, index.h("p", { key: '8a20b8b1066f68a35e3c292aee02e4295d24f47e' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'ea18a16d7b2606f34c6c7e231d763d7769c307a5', disabled: false })), index.h("span", { key: '269699331f23db6209e5b17f6936a0729c7ceb87' }, index.h("p", { key: '2e9493b944415c1e4b12c59760eb71bc30875b5d' }, "Large"), index.h("smoothly-toggle-switch", { key: '1f84a5491cc25112633009e7c3b4a27dd74cf506', disabled: false, size: "large" })), index.h("p", { key: '56cb36e8507fdc1835820b76df4a1dbd89d8703a' }, "Colors checkmark"), index.h("span", { key: 'c3eeb5c1f8170e1aae021648364cab5b3315fc63' }, index.h("p", { key: '5d134f7e3f2476d1c37a21db94f490fa4fe43c00' }, "Danger"), index.h("smoothly-toggle-switch", { key: '43c56d79de55bebed1430629dbace401e5f42695', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '839c98a783ad5216e16a71e7bb77e5f81bb1dfd5' }, index.h("p", { key: 'b07bc350ec742cb530fcf52868a236bb55b7d775' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '0fdaccb0ab55dbcb643d27853cc1c788c9ca2a3c', color: "primary", disabled: false, size: "small" })), index.h("span", { key: '65b04b502eb9f1e514738697661cd719bcc3b4b1' }, index.h("p", { key: '4908170cecf35cdc9764d7b00564b56f503ce89e' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '529f8152c6b55d43f7f21ac5c8cd7457322baa5a', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: '5fdde40e44e99d39a667dd72ec00eb4fc39944cd' }), index.h("p", { key: '23fe45d95d7ede42486b6bd8fc0408f2d90c269a' }, "Colors no checkmark"), index.h("span", { key: '2f551618300d7b451738c75acfb7c5d0b8a4519f' }, index.h("p", { key: '4f11c6cf7191a6720023e6e0a9240b55c85ee48d' }, "Danger"), index.h("smoothly-toggle-switch", { key: '903a863c56b8626c53a76c34af27c0420d3fcdf7', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '22a10ff174a4882b3197cd7efbdedbe5a2afa69c' }, index.h("p", { key: '96df0c1c662d450691144ed1ce4f43742d619d06' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '6950a09e8408d8afb9a9b551fd3de877e5f1e0e9', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '9cd32feede5db2e9c2ff22b8e966e704c5365fbb' }, index.h("p", { key: 'bd8dc83aea679f56bba1906cb4e0cce77fe08a15' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'd2473f0e064ae79f4d071c3e274a0e251f529643', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index.h(index.Host, { key: '2c6c37d956082033ddb99bd74deb4d25fde1f1c6' }, index.h("h4", { key: '41c99e51acaeddbddf3ca1ea59b9f44a52c52625' }, "Toggle switches"), index.h("div", { key: 'a4bc0fa9b881cad6d406501cf290a19f1c2469f8' }, index.h("p", { key: '43fd060188ed4c91e230e348d7741ef275fe6021' }, "Checkmark"), index.h("span", { key: 'd685bd4d89fecdef7c685033691bb1ea0cad3271' }, index.h("p", { key: '82bfdf0135a5b813cbab71976a134370ae95785d' }, "Tiny"), index.h("smoothly-toggle-switch", { key: 'cced57bd9925fc8cf7ba2a3d5f82279d035de8af', disabled: false, size: "tiny" })), index.h("span", { key: '4da25839c16ffafabb2f3a970502b6e41b3f3a6e' }, index.h("p", { key: '271cbba840216f1a9065885e4dd5755c51633903' }, "Small"), index.h("smoothly-toggle-switch", { key: '237a0ad32b1d252251ce725c97783928efd5bacc', disabled: false, size: "small" })), index.h("span", { key: '3671a60eb9f6ddb796ed792b0b1636771c3fe540' }, index.h("p", { key: '5adad63ea009dd09944a205f664424c8c64da472' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'bdb1c9d5b6a0317e1918673c420f0d0d060737d7', disabled: false })), index.h("span", { key: 'afca47ba5a5772022b7538292019fcfa069819dd' }, index.h("p", { key: '8f03372febc98e6e1f0dc2954b3bd66aebe21b9b' }, "Large"), index.h("smoothly-toggle-switch", { key: 'da43f9bf46afe3e2f5792424bd30505470c99ca1', disabled: false, size: "large" })), index.h("p", { key: 'd652266a7dba414874fbdd099ae29683e1f451b3' }, "Colors checkmark"), index.h("span", { key: '1c5aadb9c4952526ee3953dcfe9f7cca065ddbbe' }, index.h("p", { key: 'fbe4b7ddf6d95256e3fc96ff53b74efbb48cf42e' }, "Danger"), index.h("smoothly-toggle-switch", { key: '29b4ec5c214d4682879142bc4ec65b54e92a73b4', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '7b2dcfb85ab7fd235c2ad93780d34f3e5c53ae8c' }, index.h("p", { key: 'b0a4490e56c6512335e78e926deb2726fc8f3f4c' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '5aba5665d5fed616c435c92ef13d9739e57e3c20', color: "primary", disabled: false, size: "small" })), index.h("span", { key: '1607f406e24d531250dda44ba558bd6597a8079a' }, index.h("p", { key: '129adbadea7735cf4926964fc6a6ba22064ea17e' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '467139b1327e42eb38c85f2ed601277a5ca73efd', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'fe3ef94ebe4aa8d63a50881f8f7a6c96e23fdfdd' }), index.h("p", { key: '4e126ab6df0429dfe421c4bbe541595de0a59468' }, "Colors no checkmark"), index.h("span", { key: '251fd2ff788c3a350d81cbda863511f1d88d3f55' }, index.h("p", { key: 'b3ada7343ebccb4a96bbdc79ce5f7177b3c3a813' }, "Danger"), index.h("smoothly-toggle-switch", { key: '2a1020a88e6b43f117efa283d553b5595b05318e', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '7e7189b035745512f51567f77f2732a767ade2cb' }, index.h("p", { key: '932597e702b68b36014abf476beaecef867d92b4' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'c4cb5d5cfe233dea1cf582ef0e1d29b7438d84cd', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '69f3f234f6785468dbfde214ef9acb9f1b9fd0af' }, index.h("p", { key: 'eedd5f46b1278a420ecbd239d2b3b6e401a9f6a5' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'c29aa13a118b8cad29eb52212929c701d63e876c', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -13039,7 +12651,7 @@ const SmoothlyTrigger = class {
                 result = this.disabled ? (index.h("slot", null)) : (index.h("a", { onClick: e => this.onClick(e) }, index.h("slot", null)));
                 break;
             case "button":
-                result = (index.h("button", { key: '2241059488fc44870d9c81d04b0a6ee3cd07292a', disabled: this.disabled, name: this.name }, index.h("slot", { key: '7fb2335d9f3cebfc867384122f62c1ab1f45679c' })));
+                result = (index.h("button", { key: '357f0adffcd20954e290da3c732552aeb9869dff', disabled: this.disabled, name: this.name }, index.h("slot", { key: '8d3e7c45806f45acf5d9c591e77bee60e96079c0' })));
                 break;
         }
         return result;
@@ -13111,40 +12723,29 @@ exports.smoothly_label = SmoothlyLabel;
 exports.smoothly_lazy = SmoothlyLazy;
 exports.smoothly_load_more = LoadMore;
 exports.smoothly_modal = SmoothlyModal;
-exports.smoothly_next_demo = SmoothlyNextDemo;
-exports.smoothly_next_demo_colspan = SmoothlyNextDemoColspan;
-exports.smoothly_next_demo_filler_row_demo = SmoothlyNextDemoFillerRowDemo;
-exports.smoothly_next_demo_group = SmoothlyNextDemoGroup;
-exports.smoothly_next_demo_nested = SmoothlyNextDemoNested;
-exports.smoothly_next_demo_nested_inner = SmoothlyNextDemoNestedInner;
-exports.smoothly_next_demo_simple = SmoothlyNextDemoSimple;
-exports.smoothly_next_table = SmoothlyNextTable;
-exports.smoothly_next_table_body = SmoothlyNextTableBody;
-exports.smoothly_next_table_cell = SmoothlyNextTableCell;
-exports.smoothly_next_table_demo_filtered = TableDemoFiltered$1;
-exports.smoothly_next_table_expandable_cell = SmoothlyNextTableExpandableCell;
-exports.smoothly_next_table_expandable_row = SmoothlyNextTableExpandableRow;
-exports.smoothly_next_table_filler_row = SmoothlyNextTableFillerRow;
-exports.smoothly_next_table_foot = SmoothlyNextTableFoot;
-exports.smoothly_next_table_head = SmoothlyNextTableHead;
-exports.smoothly_next_table_row = SmoothlyNextTableRow;
-exports.smoothly_next_table_row_group = SmoothlyNextTableRowGroup;
 exports.smoothly_notification = Notification;
 exports.smoothly_notifier = Notifier;
 exports.smoothly_spinner = SmoothlySpinner;
-exports.smoothly_submit = SmoothlySubmit;
 exports.smoothly_summary = SmoothlySummary;
 exports.smoothly_tab = SmoothlyTab;
-exports.smoothly_table = Table;
-exports.smoothly_table_cell = TableCell;
-exports.smoothly_table_demo = TableDemo;
+exports.smoothly_table = SmoothlyTable;
+exports.smoothly_table_body = SmoothlyTableBody;
+exports.smoothly_table_cell = SmoothlyTableCell;
+exports.smoothly_table_demo = SmoothlyTableDemo;
+exports.smoothly_table_demo_colspan = SmoothlyTableDemoColspan;
+exports.smoothly_table_demo_filler_row = SmoothlyTableDemoFillerRow;
 exports.smoothly_table_demo_filtered = TableDemoFiltered;
-exports.smoothly_table_expandable_cell = TableExpandableCell;
-exports.smoothly_table_expandable_row = TableExpandableRow;
-exports.smoothly_table_footer = TableFooter;
-exports.smoothly_table_header = TableHeader;
-exports.smoothly_table_row = TableRow;
-exports.smoothly_table_testing = SmoothlyTableTesting;
+exports.smoothly_table_demo_group = SmoothlyTableDemoGroup;
+exports.smoothly_table_demo_nested = SmoothlyTableDemoNested;
+exports.smoothly_table_demo_nested_inner = SmoothlyTableDemoNestedInner;
+exports.smoothly_table_demo_simple = SmoothlyTableDemoSimple;
+exports.smoothly_table_expandable_cell = SmoothlyTableExpandableCell;
+exports.smoothly_table_expandable_row = SmoothlyTableExpandableRow;
+exports.smoothly_table_filler_row = SmoothlyTableFillerRow;
+exports.smoothly_table_foot = SmoothlyTableFoot;
+exports.smoothly_table_head = SmoothlyTableHead;
+exports.smoothly_table_row = SmoothlyTableRow;
+exports.smoothly_table_row_group = SmoothlyTableRowGroup;
 exports.smoothly_tabs = SmoothlyTabs;
 exports.smoothly_tabs_demo = SmoothlyTabsDemo;
 exports.smoothly_theme_color = SmoothlyThemeColor;
@@ -13158,4 +12759,4 @@ exports.smoothly_toggle_switch = SmoothlyToggleSwitch;
 exports.smoothly_toggle_switch_demo = SmoothlyToggleSwitchDemo;
 exports.smoothly_trigger = SmoothlyTrigger;
-//# sourceMappingURL=smoothly-app_110.cjs.entry.js.map
+//# sourceMappingURL=smoothly-app_99.cjs.entry.js.map