smoothly 1.2.1-alpha.24 → 1.2.1-alpha.25

package/dist/cjs/smoothly-app_107.cjs.entry.js

@@ -8174,6 +8174,13 @@ var Input;
         self.smoothlyInputLoad.emit(parent => (self.parent = parent));
     }
     Input.formAdd = formAdd;
+    function registerSubAction(self, event) {
+        if (!(event.target && "name" in event.target && event.target.name === self.name)) {
+            event.stopPropagation();
+            event.detail(self);
+        }
+    }
+    Input.registerSubAction = registerSubAction;
 })(Input || (Input = {}));
 
 const styleCss$1a = "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}";
@@ -8968,13 +8975,13 @@ const SmoothlyInput = class {
         Input.formRemove(this);
     }
     async clear() {
-        !this.uneditable && (this.value = undefined);
+        !this.uneditable && (this.state = this.stateHandler.initialState(undefined));
     }
     async edit(editable) {
         !this.uneditable && (this.readonly = !editable);
     }
     async reset() {
-        !this.uneditable && (this.value = this.initialValue);
+        !this.uneditable && (this.state = this.stateHandler.initialState(this.initialValue));
     }
     async setInitialValue() {
         this.changed = false;
@@ -8982,10 +8989,7 @@ const SmoothlyInput = class {
         this.smoothlyInput.emit({ [this.name]: await this.getValue() });
     }
     async smoothlyInputLoadHandler(event) {
-        if (!(event.target && "name" in event.target && event.target.name == this.name)) {
-            event.stopPropagation();
-            event.detail(this);
-        }
+        Input.registerSubAction(this, event);
     }
     typeChange() {
         var _a, _b;
@@ -9038,7 +9042,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: 'a2d80b132fb6df878a0c7d4578f898688e5477d4', 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: '7521275d115175bfaae814952ced002bba874ae9', name: "start" }), index.h("div", { key: '41940054f9c11b4fd7954d3d3fde7a255cb762da' }, index.h("div", { key: 'fe690096bd6c92000c27aa2b9acd8eaf0a295bd3', class: "ghost" }, index.h("div", { key: 'a858961bc91c214618c637fd9c5deee33a841666', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '02705773d3af87f2d7a528ac20175cb5f7d36474', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'd195fea65f240194ecee4764c390d7cf001a5348', 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: 'c4ae4c3a9d9d220d06cfc95aea8454c23844ff7b', 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: '71aeca0fecb814952f435e8f23461b43fdcd90b6', name: "start" }), index.h("div", { key: '4578b45948952100222fa0a49d11b353036d08c1' }, index.h("div", { key: 'f9c244873d2fcb919d2bcd16dd643f4868279981', class: "ghost" }, index.h("div", { key: '9b966f279a640ed0db5d0bb8d12748f5a6c57bbe', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'f6545caf5babd33337f1db3e8d0db885027e0232', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '02ba909f7be554d0d5db5d25c16a5f619eb4f120', 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 (event.key == "Enter")
                     this.smoothlyBlur.emit();
@@ -9051,7 +9055,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: '891e34f1f52c83dff8ac57b3fb180bdcc5e3472c', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '24dd7892e3d0ee65ebf6d9630b256b94f472355d' })), index.h("smoothly-icon", { key: '0f5da90409392952b971b1d4807263dc003fe8d5', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: 'efe0c88e562e4effa7691134d3723abd5b0845a2', name: "end" })));
+            } }), index.h("label", { key: '3b41a248ac94754bced2b175e4c61c040a7c1d77', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'bb5636283aeba6af0f7905dedb215e42e4633097' })), index.h("smoothly-icon", { key: '93d2cadee3ee417aa2df5050b0c7b10cb616f2f4', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: '21a50a843180b7de005e1397cb9187f5fe42c293', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9224,8 +9228,7 @@ const SmoothlyInputColor = class {
             event.stopPropagation();
     }
     smoothlyInputLoadHandler(event) {
-        if (event.target != this.element)
-            event.stopPropagation();
+        Input.registerSubAction(this, event);
     }
     onWindowClick(event) {
         !event.composedPath().includes(this.element) && this.open && (this.open = !this.open);
@@ -9333,7 +9336,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: '466b4cea7cfcb6d6466842e21de641291237bc59', style: {
+        return (index.h(index.Host, { key: '2829cabcd58d547f3a7f12a11dc2e0f2f891bd4e', 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)}`,
@@ -9342,7 +9345,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: '9425ebd85ac1b88b6a068ead8c0c6e5dcdffc20b', 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: 'cb7c28f919f99ea8972da528f06b6784772ec65d' })), index.h("div", { key: '21a253aa34394b7778dd37f8ccee2b34c7f12656', class: "color-sample" }), index.h("smoothly-icon", { key: 'cfae43c70c83076663323af117eac04df5712c40', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), this.open && !this.readonly && (index.h("div", { key: '569cfca78b025b12dfe8d5275f4a273fe3894567', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '72a8ddc92ff19fb4e0b2020bf2387c3ede8831b3', 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: 'dd518ecf0b40fa93a1c344e8b31c96caf8473f1d', 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: '985820f88a467ef14173c8010a25e845f3dcd747' })), index.h("div", { key: '0357ea8a395d0e1bdd76b40973686a4a31dcc90a', class: "color-sample" }), index.h("smoothly-icon", { key: '50f7fb90097ae462d0d43876e13994d0d8bb4cce', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), index.h("div", { key: '7d43ae3adde873f25455a5d5390e094fabdc46da' }, index.h("slot", { key: '746a7233a3a6dd4a6e6fa45dcebd36d858c7e385', name: "end" })), this.open && !this.readonly && (index.h("div", { key: '5285729be38f653beb781d06db7dd7d88928ae2a', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: 'bab7555b1bc8eab63dc6b26c9bcdab3e2efb4418', 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 {
@@ -9356,7 +9359,7 @@ const SmoothlyInputColorDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5dd338ba5962a799023edc2ee9b78da7aae650fe' }, index.h("h2", { key: 'dd37cbc43c310e3f7437350180eb181bdfde9501' }, "Color"), index.h("smoothly-input-color", { key: '11182984e7bf765803274574e151a9f98d1d17e8', name: "color" }, "Choose color")));
+        return (index.h(index.Host, { key: '47cc0134b930c487aaadce0fe042e247c709a70f' }, index.h("h2", { key: 'f0febd2445b43d8b710f82ee76a8759df789208b' }, "Color"), index.h("smoothly-input-color", { key: '002035b01879e8adda762c9ac8a6f0be1a5d33ac', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = "style.css";
@@ -9427,11 +9430,8 @@ const SmoothlyInputDate = class {
         if (event.target != this.element)
             event.stopPropagation();
     }
-    SmoothlyInputLoadHandler(event) {
-        if (!(event.target && "name" in event.target && event.target.name === this.name)) {
-            event.stopPropagation();
-            event.detail(this);
-        }
+    smoothlyInputLoadHandler(event) {
+        Input.registerSubAction(this, event);
     }
     onWindowClick(event) {
         !event.composedPath().includes(this.element) && this.open && (this.open = !this.open);
@@ -9451,13 +9451,13 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '371d5ba6f4bdd604cb0b2b3d1819d4e4a642c874' }, index.h("smoothly-input", { key: '5d21aba59d8614f8dc52a3ee1e6bb52a95cd2d2e', 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: '39babd217d35efbeaa9e796d17c5892094a05b47' }, index.h("smoothly-input", { key: 'cfd8e80200cb1f5c51ddf72ad015708b338d544b', 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: 'f9eb1423c3e05775cb58785c805782a6166f0f3d' })), index.h("span", { key: 'e16e5e0a6386bd3fee1b9f90a0fe0ae2489107cb', class: "icons" }, index.h("slot", { key: 'e6961da77738c36c6335e1e3c4cc1bf316544600', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: 'cdf8d7ea4e52fa79a13d6c387679d3613724cbb1' }, index.h("smoothly-calendar", { key: 'e274c7cb120fd6bea7fddf90a7fc0730a72e1a5c', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, index.h("slot", { key: 'f13db9e036601cbc5fdd00f48563ec0d34039559' })), index.h("span", { key: '80cf6aa699be5bbe3fe846576400902ca4f43713', class: "icons" }, index.h("slot", { key: 'ea71f775aa6332b6be13268a05bc6658c14e9fdd', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '2954f02b0c357e9e029d9afca0dd4f20b5b38af4' }, index.h("smoothly-calendar", { key: '62d9bd9c4dce3cce1cd46bcc89772c5d97684229', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, index.h("div", { key: 'dc4edbb36de0561921a48b0d6ffeaf1085323a68', slot: "year-label" }, index.h("slot", { key: '234cc72574deffde1c5ce018813a104d3b32e693', name: "year-label" })), index.h("div", { key: 'c3ce218f82ca9a656e79e679f2b8ac91ef3d08af', slot: "month-label" }, index.h("slot", { key: '180e56816f543a140e40cfb94fd59d802ee8e539', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: '26344960dc0df691b36dea88cdc54e7c51f5f20e', slot: "year-label" }, index.h("slot", { key: 'd329bf63afee5f807cd13fa81dc7697b39876ca0', name: "year-label" })), index.h("div", { key: '89c5b3a2207e510447e88d358d7ebca1cd78ff42', slot: "month-label" }, index.h("slot", { key: '494bd7fe0d78b568ec57948b611b1acdb285731d', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9517,11 +9517,8 @@ const SmoothlyInputDateRange = class {
         this.changed = this.initialStart != this.start || this.initialEnd != this.end;
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
-    SmoothlyInputLoadHandler(event) {
-        if (!(event.target && "name" in event.target && event.target.name === this.name)) {
-            event.stopPropagation();
-            event.detail(this);
-        }
+    smoothlyInputLoadHandler(event) {
+        Input.registerSubAction(this, event);
     }
     smoothlyInputLooksHandler(event) {
         if (event.target != this.element)
@@ -9566,12 +9563,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: '17965c35233c194ac804a0e31eee8ab770ea0e7d', tabindex: 0 }, index.h("section", { key: '15bf32607818890cbe158c5e795565c8372895ad', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: 'f331b1793d83ce0c8291488c28b958b4b61e71d8', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (index.h(index.Host, { key: '9a0c5b378e27739b3ce38d5fa804c6cd822fad7b', tabindex: 0 }, index.h("section", { key: 'c6a0b567417a872c358cfaa477eb3fbb8c824909', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: 'dc8ac2f22414707707d9cf116f656742ae8f304a', 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: '8f797dba165e1494b4423b7a224f16d9b9be6500' }))), index.h("span", { key: '47fedb6c916d925d7b291250ddc952225d2fffd1', class: "icons" }, index.h("slot", { key: 'c697792dc6bb1a4260ba1fa01c0b143fb597b77b', name: "end" })), this.open && (index.h("nav", { key: '8c3ea513275174cace04131d56849c8089dcc2e0' }, index.h("smoothly-calendar", { key: 'f95965cec7ec58fcefe0f14c25ec8be5dc9c2edf', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: '83342fd90bb95d264b466481f97615532c101992' }))), index.h("span", { key: '7837ba4a48e449bb40f5568168116468c2d4523c', class: "icons" }, index.h("slot", { key: 'eda2352a651fcd44577931382c1c35cf2cda0be2', name: "end" })), this.open && (index.h("nav", { key: '9c3f5a766390e67b1f1a8b1dce952276a718b488' }, index.h("smoothly-calendar", { key: '57379aa832f9a1f7d30514ad21ee1599194eb238', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9602,17 +9599,17 @@ const SmoothlyInputDemo = class {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (index.h(index.Host, { key: 'a3759e16fd8a2ba0c8cd2239b413e788c09ae119' }, index.h("smoothly-input-demo-standard", { key: '5576bbe54f9e14a97201346366fadcd74e136a17' }), index.h("div", { key: 'c56de93cd9540f2ad19a97349d7b4cdca2a995ac', class: "inputs" }, index.h("h2", { key: '964e3da1d54802f6e02314ad7b43f19870a3fda5' }, "Calendar"), index.h("smoothly-input-date", { key: 'd358efc50689190534b3f8ef6e69ef94f882b452', name: "some-date" }, "Calendar"), index.h("h2", { key: '60894ffa222578039b6483724cf9c7658ff9f047' }, "Date Range"), index.h("smoothly-input-date-range", { key: '091fc511140a3e484699caa2e35d1f6ff4babce0', 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: 'd8873b16214ba7caf779c870184dfde8f99a69f3', 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: '9d115c8fe8e6d0c6529ac8b6ab779525accc44ae', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: 'f0f18e57a75f0a874b1f829de32e1559b2cf2ec9', 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: '53620b6898e6232b38482e885cb94f92ad7cdd69' }, index.h("smoothly-input-demo-standard", { key: 'd37514f643bd6b41890f0ab112470ebce81e4c16' }), index.h("div", { key: 'b0ef5286c2533e827d88103c0878d3144f512ce6', class: "inputs" }, index.h("h2", { key: 'e566d66b3469727d2eaa24695c196df03470e3ae' }, "Calendar"), index.h("smoothly-input-date", { key: 'a282ab72356ff6df4a43c53f4d4ba91c87478423', name: "some-date" }, "Calendar"), index.h("h2", { key: '6b75b36ba257dbc5dba51cd70b783c1b5925951a' }, "Date Range"), index.h("smoothly-input-date-range", { key: '55c3b3e8bd5885d98321b3f04b5ddb72e821b0f2', 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: '63fb92e725ec294eadc4df35a95242d1b9606cfe', 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: 'f5f115e0fd39d2316d40030609590a6253a9e6c7', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '1de4927bad02549aae6617a1c05f890f8567c05f', 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: '5ee91abb156cef71bc8b030af73f6094d416f9c9', slot: "end", size: "icon" })), index.h("h2", { key: '5eb334531bec7eba0ee2e9a3dbfd6c6afda29bf9' }, "Date"), index.h("smoothly-input-date", { key: '3ee82cf9411ee0495d284e5a01a8df3d95836918' }, "Date"), index.h("smoothly-input-date", { key: '5e571c0bbf5465b30bd6f3c4d1958579f64c95ff', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '6c28ccfb6b4a768de70bf28230f3f52d1cd7bcfc', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'ffece9de256e29026cc14ff69c8635ce25dea36f', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '95dc888d14a9adc517a833f2ab411a801cd91619', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '0296879775dbff3c722103c08d978a5ddcdb64a8', slot: "end", size: "icon" })), index.h("h2", { key: '6f64f32a83f7c41861f130b6a4f74e69203374c4' }, "Select"), index.h("div", { key: '953e7676a497b9bd2968ea5fb85d336dfcfcd5ac', class: "select-div" }, index.h("smoothly-input-select", { key: '7f4b2bfe74ac04277e9d8300cf006ede53d473b1', name: "select-dessert", looks: "border" }, index.h("label", { key: 'b8459bc08dd7ea114135f4d365670ac09b43d9d8', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: 'c42c0682c742fc184b55090392d8da06856e3e2c', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '20b8e3a23bca148f21f2de1ec5cfa7bce97f0e62', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '0aa7384ed709def5d82895c72dbfd19df46b08f4', value: "3" }, "Cookie"), index.h("smoothly-item", { key: '8f964ebfc388d2db39c88c9ff4256a39ea52b669', value: "4" }, "Croissant"), index.h("smoothly-item", { key: '32b5f47609c8c0c6a24be01534facab3d395e54a', value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '8b92771e975ed99d5b4d2841df6cbc4ef4f49bd8', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '8895f2855d805d425f0a98c7788a2a345aac38b2', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '28e337ce2eb1fcd1519e6a8065a4c431c00353e0', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '6ca9d6809c18c2742fc139fdfa5b5605cef00b4e', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '966956b86328f33bc191f44cf880cf8fd1546885', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '72dea6e761ece3f2a8277a3a6f5baf28ceec3672', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '17e8b8bf6f508464993428a496e98085e8b9a1e1', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '5e089913258e6a8250202a00fc6bed66b59813e8', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '269464d07997c396d06db1264a78d9f120c8f103', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '46b80baeefb3adde62f762fa1725ffdd8b07c2ef', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '91cb5241885cd670fb09992ede0244832d433356', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '27e33ce37d5a9bc9189486d19b9ba80b36cb3a21', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: 'b0dbcd505735921e550817ff6914eb9cc92d6bbb', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '5b79531f257e14eec2805f641cb009bacd19635a', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '00dc8b052ee83f2d221b2db40b12268670071f62', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'd94ceec2258b71c9e2670d54a5e14c706e6b5a8e', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'b76ad7e9baaf609baced0e2cc9a8c852acbf433f', value: "camera" }, index.h("smoothly-icon", { key: 'b55fb5fbc72c7a026945b56707c715d7d9a858e5', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: '7554e0bc5763853f86a86ae0229d214ee9408cc5', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '165dcad609ba1b42df404e1e3c5f110218372ed9', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, index.h("smoothly-input-clear", { key: 'c252da2c3e78805b3f89a2eb71a00fc17127b11e', slot: "end", size: "icon" })), index.h("h2", { key: '034b8034a010eec00ed2e7e2f767d9b3194e48cb' }, "Date"), index.h("smoothly-input-date", { key: 'e35767873fd2fd894c69ece286cb5dd700e68e1c' }, "Date"), index.h("smoothly-input-date", { key: 'e3c7ae934af888dc83bcc6f4adcf2c564685e8a1', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '0945e4cc37f70203e4b9dde72e8bdfc3156ba216', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'e7af144b79608f65dacbe6332e23fe086725a093', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '263d6a5d4d2df9d76317a9832f05151a6fe3a28a', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: 'e641810ccdf6a2e0718425391ee713d08037b4cd', slot: "end", size: "icon" })), index.h("h2", { key: '243fe62af059710de96839d957c54772ef3929de' }, "Select"), index.h("div", { key: '651d5168ce740279ee9603874d1f6f310245de7f', class: "select-div" }, index.h("smoothly-input-select", { key: 'abde779ca7e1cc9e76a850d11713d4a7db2b5012', name: "select-dessert", looks: "border" }, index.h("label", { key: '411cf5ef2472a9b4a75873af4126d04e9b92cba5', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '792e6a8cf78d4b5c192970e0c977946624ece990', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '5f0499a0e8746ffbc5a702ed9d4141382c271c27', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '67c10704aa3b581d604161d04c6acef9b852ff38', value: "3" }, "Cookie"), index.h("smoothly-item", { key: 'bb4a932bdabc075479a6c66980dfbdc5b23ba22d', value: "4" }, "Croissant"), index.h("smoothly-item", { key: 'd8df4696e2e247a3c7232e087b50bfdbe472af5f', value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: 'f9482ccdf526b32bb777ad610702677609d51a2d', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'd01fe18ac6f910689ec3afa06d5b2b26d2b387e7', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: 'ea0f8e9a9ff36fd07ec8c0d2cea804a2264ae0dd', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: 'bd758e0bde57d5a45b03bda9452e2115a1e01f49', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: 'c0ddf61cc4531ceeeefc95cfae0fcc332c558dbc', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '9726789571c7fabdebc881e1ce795d5b4a676319', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: '27aa8a425075b603adb69d22af9eeea91652df92', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '74ae63190271d73d4cb066ea33f2eec339555444', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '733594f11581ea601ab93210820fd10b715d8f65', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '822ad1dfde346107af036c1085b3ada0da155350', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '8902c0aa2a6ed38ef650865bc3a82a2fa82c4b4e', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: 'a22d13c2c57fbdbc8d09130e394185fd5e32b99b', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '1d86e3bf857735922fb6fd415b397a9e9bf57e04', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '40338669ca74fe1633c1ae244f6b5b62627347b3', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'be05c621453614ec0c0e21cfc8dd6621ecd32459', value: "folder", selected: true }, index.h("smoothly-icon", { key: '29429e99ebac97412d34ac75d3a9baf58d200272', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '7cb2699d7bd6d244fed3125d61f86dce2e9dbc0f', value: "camera" }, index.h("smoothly-icon", { key: '33163924e2bec71c1b3576eff7f49b44faeb6bb9', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'e5447fb645e04fe2229b5e63ec430b60b7805f88', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '6e67385312c2268b5c98eb8a081bf4f383a43c36', 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: 'c105b5955731a2d2797fbebda5e91fbbbdb29f04', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'e8144f15440543b193ec287d72d1934893ecbdff', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'e27d43ca516960222d8f8e1d4de376d5fa7742a5', value: "1" }, "January"), index.h("smoothly-item", { key: '675b95ed2a76a69247244a9e21656d0a3fd905e6', value: "2" }, "February"), index.h("smoothly-item", { key: '8f8e1efdc4ea91001a12801e6b43f775c94be67e', value: "3" }, "March"), index.h("smoothly-item", { key: '6066be8411b7bbc98e61baf8e543d8d423d25b32', value: "4" }, "April"), index.h("smoothly-item", { key: 'c775756977711338fccfcdae8aa98ea66fb1dcc4', value: "5" }, "May"), index.h("smoothly-item", { key: '9279da1d6f02092a7dd02f08b6a80aab1bb81865', value: "6" }, "June"), index.h("smoothly-item", { key: 'de52af29af4209871d6000fc22419e62a2a26552', value: "7" }, "July"), index.h("smoothly-item", { key: '672feea83b808052bac70d574368b9a2b175da18', value: "8" }, "August"), index.h("smoothly-item", { key: '7641231e0fc93ea973a29d6d1fcedee513f34637', value: "9" }, "September"), index.h("smoothly-item", { key: '53275ef569b772a9ee14f7039b31eb65d2f2c13b', value: "10" }, "October"), index.h("smoothly-item", { key: '1effa9d783d911bd0efdc4d297fe5bbea5273eb7', value: "11" }, "November"), index.h("smoothly-item", { key: 'd8235388cf746f521e233592f137ca7aea25db7a', value: "12" }, "December"))), index.h("h2", { key: 'f0c3cee9124d36368d78b9188eed2157330ff80e' }, "Duration"), index.h("smoothly-input", { key: 'bc808a99f0e3e1b28e90207d6cf04eafa7a968ef', 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: '1bf0b84705cfe28fa01f615637a3f365bc34c7f0', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '0e9b3a715b7553a6ca9ab6a0152fcdc2b41ce42b', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'cff610f88141ac062cf05e4d912772a8c537f207', value: "1" }, "January"), index.h("smoothly-item", { key: '03bf4a76b5634b86869fefeb21b139baa4c8824d', value: "2" }, "February"), index.h("smoothly-item", { key: '5fdc36fd493c77f98551f6491a8364c79cb2eb9e', value: "3" }, "March"), index.h("smoothly-item", { key: '87ff5de630592922afc529731e11effaf9523417', value: "4" }, "April"), index.h("smoothly-item", { key: '5ea92a461996e01d982865211975bee3e9ccb97f', value: "5" }, "May"), index.h("smoothly-item", { key: 'c815b09397e06521bd405f94604df2460772c169', value: "6" }, "June"), index.h("smoothly-item", { key: '141669aca38bd1717cc7e19f5ff652b52dcda754', value: "7" }, "July"), index.h("smoothly-item", { key: '5912aacaec7e6e975e2f277ea23f91fb8e66f084', value: "8" }, "August"), index.h("smoothly-item", { key: '61f304b902db8a53bc995f330af60a6748fa9ef4', value: "9" }, "September"), index.h("smoothly-item", { key: 'ced2bdd32a844588f334ff85adea658a5402aa92', value: "10" }, "October"), index.h("smoothly-item", { key: '0d7e4302efeb711d95823cdd90ced4dcc3e09dbe', value: "11" }, "November"), index.h("smoothly-item", { key: '70a7e6c6bac38bd0728744bdc3589c72b62cdcb8', value: "12" }, "December"))), index.h("h2", { key: 'c776acfa8c5f350795db9a90fc2a6683fb1f976f' }, "Duration"), index.h("smoothly-input", { key: 'c2c8086138d81d5bbc002a2cce25e577003d5ef3', 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: '5c286bddbc3201c5f8ee85c2050d59eb9844e75b', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), index.h("smoothly-input", { key: 'a4461fcc37ea87ac36ed2e7bae754a0ebe6a4de6', 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: '4017f3c95eba0ee876c848109df51f813d4aac8f' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: 'c73f534f9e633406a75b1c5fbdd0b21b78bc917d', 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: '486a889d31d932e71b18bec5fd07e3c549efdb31' }, "Identifiers"), index.h("smoothly-input", { key: '539335f657d72e3c7cddb2b503d2949256d2914f', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '02dd45100a15016525826b5be17b797bc8b04752', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: 'aceb9820fd73e225639fcc2e776893fcf90b26af', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'f03264c9e62fb28fed66a49368d89e96c34aa560', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '2da7c5e2ecf35518b51266a7461fcb4faef38bf4', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '226d67a20538b2522646858c9ad8fbfdd8cfb926' }, "Input Alternatives"), index.h("smoothly-input", { key: '8e1867ba1ac45dc87491cea2a49ba4004bf9c1dc', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '35afbfd53cb6637457e826f60a3e6e379d28dc5f', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '6994934c54c24cff2eaba102f67c74a76b1393f8', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '62d7f2a8eefd4da22491a281de38d66a7138fddd', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '4366b0291a3f74026dea5856c0bf60b2d4ea4d93', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '6d94234d166d77b23ba805db6c0b39e19a5d4a65', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '38283621fea72da77bb7d87fa3d56ec6453d8e0d', placeholder: "test" }), index.h("smoothly-input-submit", { key: 'b3a7e49422a3c13bb58fbced399bee7e2fd09cfb', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '62ea4451d74acf394eaaae53a77b129004c61ac9' }, "Smoothly checkboxes"), index.h("div", { key: '9945daf0fa09dcccce897f781d3642fc8281414b', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'b9eb11a38cba92a0c133cc2afe979fd1139c01fa', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: 'bdb4d3e62f40d5b8085bebf0aef863284c355e38', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: 'e9ee627f9be6a1fc0072b89e2169df40dbe0c697', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '77994dd6460da98f4823bb5f21af2ef222c6d9d0', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '11e53da5cce7f5e2bf8df0417972c0da24a6e99e', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: '3d2aedf1f11e4ab73e8ed2707e71aa05e3a75fea', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'e12cc690b73be889e9a108d28798deaebda7c019' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '44bd8a972f109a62dcea7d24e264fd438d7c359b', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '0df4843fc0c1edc6f8671ac050e46c30d04feed1', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '9d8eb7aedd198a6d9ff554f16110d00cac0bf50d', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '4aa9dd05057526619ba26165064096460400db36', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '825aac6d7fcd31831658a6ba144318b508e6f393', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'e2108d334f1da1a5927508fe171c6bd007ae97b4', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '72a9668cfb1ec37b7b8c0c414215d9b287d5da90', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '620de291dc950ddba04e52d6f33e9ba6f4833756', name: "radioSecondInput" }, index.h("label", { key: 'c730321dd39f9a216db32ac91a71f4d5d2e21251', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'd0ba2eabf228eaee8927dc6b5903729fccf40039', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'cfe057b7cbdca1f1649b0929107dfa6c2e6edbcd', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'ee6c80f9f636c347f6c230ea189078544695362d', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '778d24581b0618a5735fdb40be3989f6e61ac247', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'ebd353d82992a072f9163a3121039faa0e8807bf', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '42db90b5fc75cef8111cc2cbf65254ae5e101cf8', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: 'd0ba6dc792c5043c346e79994ae87d2aeff675bc' }), index.h("smoothly-input-color-demo", { key: '566c1b0a557045173d3a2d5e45bd12f86069e496' }), index.h("smoothly-input-price-demo", { key: '81572554d1a58e9d0e01a8fe620ebb9375924a6d' }), index.h("smoothly-back-to-top", { key: '6e13b4107fcaf456de94b95c39d3cf59eb5b67a0' }))));
+            } }, "Duration"), index.h("h2", { key: '7a7eb1ad7a4cdd511ed1d1e6e6121bfd8e38a9c4' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: 'e472f6bf7ee9af20eea4d3eaa9ae661114569b47', 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: 'a777cb187fac54e64882095cf11b234dd4d09fc6' }, "Identifiers"), index.h("smoothly-input", { key: '821ba1a7eae8c9f22b350e892a0552b1fa549976', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '073a2e71552dfdee3dfb8739b30620cca6133293', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: 'cf848064b7a3725f8930a34858de95f5b3c6579c', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '724a0e07f0c58156ed5e433adcfaed00ae279695', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '249497d8a6d616927c39364459ea554104950dac', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '28d3546d0e6e657604f404b8eeb2fd3ab80a7f22' }, "Input Alternatives"), index.h("smoothly-input", { key: '5addb980deedb3fae2f3b798130630e08a470a25', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: '40a34d410c688476da365ce73426a30ad035ea7b', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '8cf63e8644111117aed0d7db62cc3a339624e0e9', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '2367ffa22848c566460dd09b6624493efed35a99', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '47c23aaaa84553328a3a46c8c4c666bfff9a211c', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '8cb371794535f88ab3e45fcee4a1db4ce79456a4', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'a38f0251a484c186a785fae521c7239e63452744', placeholder: "test" }), index.h("smoothly-input-submit", { key: '3ea8d5a59d8c61275d94468c79a191d9e9b6f9be', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '670f911f1c0ff9b64daacb6afc55f6570243c08f' }, "Smoothly checkboxes"), index.h("div", { key: 'c298a732d42f8348dd4b60d2155cb62f9086a647', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'febe3d83a3532151e20098bc46bf9f7ce7068880', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '1f676d08f501670767c1fc5415d598829e8b9aa9', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '13418af8c114f6654c7aaf0781ba0b0d4fff8b32', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '506a1599eb2ca3c7180b77805f09594a3ca72686', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '4c088fe6622ffda5a2e032b028e6ed841b2a2eef', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: 'f41c272ef56a449a511a1eea134ea01f9112604b', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'c113d44cc25740eac8810b9b9cde44848ac37528' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '86d54d00a06727f452343c6f2dc81cb7145f05aa', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '9594f4e3dafaf4f834eea695b0242759396618fa', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '05d0a5e6e9ae9e9df966dbee4e3e1ff437c6634b', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '3674ae58bf3443bfd91277f61e1821ec9c9a4dd4', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'a316c3cfa518122c8f90cd7f7eb7a2aaa76a5515', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '34ab3b117d484f129e9d82702a034742109edb5a', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '2f6525494d71d84751d3d38ddc47108fa6341042', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '08e3b427a333c0cef133a326b03b152da5b091cb', name: "radioSecondInput" }, index.h("label", { key: '283fb78123331cfa3c7a42227c712a3eb1f6956a', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: 'a3833e941f4a5147120c3d889fa8b9148876af0c', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'd3315a20dd2d435f58c0050c8de48a84e37ecbcf', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '1a231837db37cf31eba81c06807c74d7036c40b2', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: 'c46cb2501368311c9d406e9b5f87418db4f0d0c4', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '354a6bdb4fab12e7b285c974a63567a1e2b5d577', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '67fed4416f273a3d5eb3b7c3444d6f7021631da0', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '2967756bba3607c5b3b48d4a92c53ff1a6735307' }), index.h("smoothly-input-color-demo", { key: '1c117bd03e4613223cf75c378b96119aba840279' }), index.h("smoothly-input-price-demo", { key: 'cabbde6829e29cccb421bd4d55ee087a120f3dfa' }), index.h("smoothly-back-to-top", { key: '3319746bab7c5a3b5891059494e55e28749b2a9a' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -9641,7 +9638,7 @@ const SmoothlyInputDemoStandard = class {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (index.h(index.Host, { key: '87ded360e0757684c36df766dc4a98995d91f410', class: { vertical: !!this.options.vertical } }, index.h("div", { key: '0f3abd6202fdab215411d4441b276db6f41e8f62', class: "description" }, index.h("h2", { key: '07d167c5337764bea7c6837acd61bbdf0fbc27c9' }, "Input Standard"), index.h("p", { key: '13d087b3c165ae403bc7df9f8ca46268709df005' }, "Height of input should be ", index.h("code", { key: 'ee27c4071f8edea1080432f2a9e952fe6b2e52be' }, "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: '962a004e4d6789fb6b39591a8c05e2531557890a', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '4497bcc9662109d26da0db727364b53b85ec0ba9', name: "looks" }, index.h("span", { key: '956d761688fd69e70872d445b4e67bfc3ccac809', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: 'eb6586edfc70a7bed7413886c3aa76418b46793d', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: 'b74383882c4648a96ff474f5b12d87603544fdaa', name: "color" }, index.h("span", { key: '5baefdeee8857e5c12f90653a563daf6336031f1', 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: '572e44dfdd2d9d4664cbd2c3fd1b89fe89cc72fe', slot: "end" })), index.h("smoothly-input-checkbox", { key: 'a7a213ce6fccda1ec23fc48de6d9fe050a27e245', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: 'a3edb07aebdcb380cb885a2136b738ecfd44ace8', name: "showLabel", checked: this.options.showLabel }, "Show Label"), index.h("smoothly-input-checkbox", { key: '5acb329383072197e54b96668f44d08ec26bf210', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), index.h("smoothly-input-range", { key: '821bd6134b7b448f586f0de49d1e30351c151b4c', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '769871d848dcfa8cbb40b1b46d1c6902a309890e', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '79a45e35b9469ae3284ed876e18f1438626b6042', class: "width" }, "100%"), index.h("div", { key: '6ef396bb81530ed27aacc5220adc0a8ea8abfeab', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '004bbd25ff3845c8ab32a3788a5243fff573205b', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '7e345ca5e9236021ce7bf4c67d765aa35d809ae4' }, "Text"), index.h("smoothly-input-clear", { key: 'd62132dc410d2df6adbd7eb02edfdde21d67b3df', slot: "end" })), index.h("div", { key: '838c3bf4e54ef029cb2ccc63afba6112874f2911', class: "height" }), index.h("smoothly-input-select", { key: '5fce85e7f25fdce59b258213b1c79f0aafdf03cb', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: 'def0597cf4bc08d81760136b8357e57cd63d32cf', slot: "label" }, "Select"), index.h("smoothly-item", { key: '7cc0334ed97ae321dc23e6938838b12fbf2bc256', value: "1" }, "January"), index.h("smoothly-item", { key: 'a0d500eeec8c40ab1fdd0e6b565d57b1a947eb98', value: "2" }, "February"), index.h("smoothly-item", { key: '27b8ebd25aaa0ca49ffbab867918bc2becefad70', value: "3" }, "March"), index.h("smoothly-item", { key: '6f41fb81857c718ad9c809751a594d0a6dcd5a1e', value: "4" }, "April"), index.h("smoothly-item", { key: 'e46454b401e762532cef546505cee6efaca7b6cb', value: "5" }, "May"), index.h("smoothly-item", { key: '8fe4ca56569fccc0447c1fa3abc2edcca5e37ce4', value: "6" }, "June"), index.h("smoothly-item", { key: 'c8e098d40a8a81319da798e62c43dbfe4ffd33dd', value: "7" }, "July"), index.h("smoothly-item", { key: 'c5a80322dce8c851a427fd023b8b1595d09bab61', value: "8" }, "August"), index.h("smoothly-item", { key: 'a2e77fb96cfe8aac7ab9bdb4e39701ec65611336', value: "9" }, "September"), index.h("smoothly-item", { key: '4a379f2189232123b0815b3e7dc4617238021ff4', value: "10" }, "October"), index.h("smoothly-item", { key: 'dd168a5b940f08de68fc5b31f3974916fd992da0', value: "11" }, "November"), index.h("smoothly-item", { key: '20c131780c62ca906539114d133d36f475ec4bbc', value: "12" }, "December"), index.h("smoothly-input-clear", { key: 'a1807d2003af2bc895501582a17872794156cc21', slot: "end" })), index.h("div", { key: 'afe03c77f5fdd9adcd0123601b38283e40f9e7dd', class: "height" }), index.h("smoothly-input-checkbox", { key: 'd0c23ca3d88815428a75acf1b19352a8124e5362', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: 'e8378566e091ddcf5986137c61b5c88caa6fa63a', class: "height" }), index.h("smoothly-input-radio", { key: '2137468d8f961aee10d3689fe04d7d6f3cabff8a', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: 'e43d08e89d58a3064c1415b4b7486315edf1bbc4', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '433829f46056ecca05339edabd55dfd0c43b055f', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'fab7a9065eb0d63f0d3314d5af0ddee96a0b2e96', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'b13ff5501e43d776d6cba7cf2abee1d892f8f3e5', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '845649da3365ddf6bc95337e50ebded1216dab68', slot: "end" })), index.h("div", { key: 'b4d503fe5b25fa31102e64f38f8dcbe698b2d6bd', class: "height" }), index.h("smoothly-input-file", { key: '5d58ee600f2f518707f9cd5c90f47a7f04734614', 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: '48d2911f19b85977b6ba2176f711b4ed544c6142', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: 'd1c30f69f7bcbd3c4eb0bbb247b975d345d4d6ff', slot: "end" })), index.h("div", { key: 'fc7424c55114d84af6f0057597ae2a8298279c63', class: "height" }), index.h("smoothly-input-range", { key: '6d902bef05a0dbc617914e5e717af30a80feda9b', label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: 'd04b58cd2c8fce340d1c07b7c43368eb4740ebe5', slot: "end" })), index.h("div", { key: '078f6869c2eb76bc359bb32e1f301ef6149b9fce', class: "height" }), index.h("smoothly-input-color", { key: '7cc1a5eef8d6d21149f3c633d092b141fd975e7d', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '4fefa1d335c3c9719d23068ac1b095e419ce3888' }, "Color"), index.h("smoothly-input-clear", { key: 'dec6684b14c4ff081e666efc9531f3b658dabfdb', slot: "end" })), index.h("div", { key: 'e1e5487933bf548b3b781b854f82c984f9e19f2d', class: "height" }), index.h("smoothly-input-date", { key: '361e15f4bb8fa46ca32db1d91d47f2314f29b29d', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'd232de93bb672f616944cdd2486be57d47cd634b' }, "Date"), index.h("smoothly-input-clear", { key: 'c0974361753ed3fdb458f5873e5a867fa48f7394', slot: "end" })), index.h("div", { key: '43263b84a5001972df19490dbb97035a01d52e69', class: "height" }), index.h("smoothly-input-date-range", { key: 'b609effabab1e33dc77fdba4c9a018c71338a526', 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: '8e06dd462bb6ad2c67e91b6d3343ec9cbc682ff4' }, "Date Range"), index.h("smoothly-input-clear", { key: 'fc8a521bfcd33277c0ab7c753e1fd727c5939427', slot: "end" })), index.h("div", { key: '06b1ee403c5ae251a0d49f275fec06807d427807', class: "height" }), index.h("div", { key: '1070a5c4bb8db9fa0d9f50a270630dc1466d6c65', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (index.h(index.Host, { key: '4719fdbb2328badf8f020fb6b0efa634bb3852c1', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'dd3ea15780cbb44dd4230404b9d76ab76222bc4a', class: "description" }, index.h("h2", { key: '201180d47584d7a37d3a6e2637c51306c84f1f2a' }, "Input Standard"), index.h("p", { key: 'a63a5ee74970647f25a468b74660a582c3103dc4' }, "Height of input should be ", index.h("code", { key: '972fbd77c1efadbf176e69f1db14c5d9462394a5' }, "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: '5c801aa407bc7a35ae23531603497e74edc356f8', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '1a48cc1afaefcac85d94004e7fe2155a34cfdee2', name: "looks" }, index.h("span", { key: '992d54cdac53aceaf9c2831cdfc5af70044af196', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '63b7d971224f64e0b1808866b516fd26448a1275', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: 'ddf2534c6ca5d761052ee42fe9214de7e702c0bf', name: "color" }, index.h("span", { key: '7fefb42a32f3440b5c36f897a8faa5ac8a6de602', 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: '7c05aa6b3d22cc5c58478281fa1d27312987dfc2', slot: "end" })), index.h("smoothly-input-checkbox", { key: '09fdf07734f0c1475c812242133bc20c12cff029', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '0e7f5a06add851c0bdc35cf918020573bbf55cc2', name: "showLabel", checked: this.options.showLabel }, "Show Label"), index.h("smoothly-input-checkbox", { key: 'a90802f03b3fc0ad71506a8cf70b909061da7258', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), index.h("smoothly-input-range", { key: '28b69b453b3759c81e96fc858535a83c1ec33047', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '39d3d462f1daa47ba8c401ca9d88fdde91223675', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '87d5bca2ef878a79ddca03fada7969da305b55b2', class: "width" }, "100%"), index.h("div", { key: '6e357e9a3c0614d90169132187a71be5574705f9', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '49739b4eac9e5915ca9df59949c70cbb5b4e6e6d', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'aa1eef8fedf8ce4efd226d7de7ab72b4d4d46e37' }, "Text"), index.h("smoothly-input-clear", { key: '3f33759a6afd6a2d6d6d8c1da9c001332ae7137d', slot: "end" })), index.h("div", { key: '93e02b23909be172432f9942b03de09a578c30f0', class: "height" }), index.h("smoothly-input-select", { key: '999f786805780537e683ce89b1c674d596e69ebb', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '63d4a3e37ebb68442bcdaa40d66debab489ba3df', slot: "label" }, "Select"), index.h("smoothly-item", { key: '72d2eed6c3403910f8906924f0bd9f62da609b27', value: "1" }, "January"), index.h("smoothly-item", { key: '16834bfa537737854dc7ed042c188aec22c0d47d', value: "2" }, "February"), index.h("smoothly-item", { key: '5241bb5951cced61e5eec6e32e2de79fb08f0a4e', value: "3" }, "March"), index.h("smoothly-item", { key: 'bcf3b5d9c1595e76d10fc21204042602c61d9c3b', value: "4" }, "April"), index.h("smoothly-item", { key: 'ef13dcbbe10a90b86d9b90e5f47aefba0128577c', value: "5" }, "May"), index.h("smoothly-item", { key: 'af3da8c0909d13417835e6dafc302bef70821199', value: "6" }, "June"), index.h("smoothly-item", { key: '8974c5f449e9807d2ecd5699eeb4418ecb619a16', value: "7" }, "July"), index.h("smoothly-item", { key: '1fe441ffd10bbc20dbb86cd8e5ebf4b41e17a813', value: "8" }, "August"), index.h("smoothly-item", { key: '6b8f1f7d1d300b659ea33fcd93ff70048c51ca2a', value: "9" }, "September"), index.h("smoothly-item", { key: 'c9270e8a74d20e51e7752854d84591bc48ed3337', value: "10" }, "October"), index.h("smoothly-item", { key: 'd27392d73235db46f1dad164b1e7f105a30ad550', value: "11" }, "November"), index.h("smoothly-item", { key: 'c6384e32911143860f619f5c64169155782c5c09', value: "12" }, "December"), index.h("smoothly-input-clear", { key: 'ac566355d23456c3c2763256e32dad7e31d9fcc6', slot: "end" })), index.h("div", { key: '3dada69303d1e58aa79b986eeca821c02fcf09cd', class: "height" }), index.h("smoothly-input-checkbox", { key: 'f84c1253de429dcf4bae20f897b0f3345f312034', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '3b5b54c42663986b9b776fd1a7eb8f345c87b17c', class: "height" }), index.h("smoothly-input-radio", { key: 'f91581d99517c537ad37742334e81fee60667b66', 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: '3b9cd65dc7898304a468f4d9868b51f6948be746', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '985cfe9ea20ba640110dea9fd489b045eb5518c4', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '8d1db72d9737c384fad3a9e234449cdf5919c1ee', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '0d062c78a15c2477892604a3df64eb1b63595b42', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'a4c2e8e84f7f582cf33b6330b322cee7d9ecf7c6', slot: "end" })), index.h("div", { key: '6240cbbc5f6219f6a2a04ac5f19236a02df6ce96', class: "height" }), index.h("smoothly-input-file", { key: '316475974c81711b670d3f25c224d350df502091', 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: '9bd629ef27e7dc2a797b313b62f2a69a5dd3d445', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '883607ff5f3be75e109c635e8620ebccbcbfff14', slot: "end" })), index.h("div", { key: '923a93813b3a28992c966bc1b75a4d8aea0a9390', class: "height" }), index.h("smoothly-input-range", { key: '7848094bc9e9f18a10199a890c4eb81ff5f2ece0', label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: '09a5fcee0abf8f4c3fb3e298c3b7bc669aa2213f', slot: "end" })), index.h("div", { key: 'bcf0bdea85e48891d76163e2095cea1380eca0c2', class: "height" }), index.h("smoothly-input-color", { key: '88753464871d76ee53d5cb9bd7551bc79a6a8daf', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '3e6d5fc474652d05000353aba7eac67de9dae495' }, "Color"), index.h("smoothly-input-clear", { key: 'a20ee52948e70983c7e5ff9a312b1dcdcbd20a5f', slot: "end" })), index.h("div", { key: '1b858fedf1d7d17455248c6752dc5835c5015d47', class: "height" }), index.h("smoothly-input-date", { key: '69bd6abda9a5452fe585a9ff6bd3c3a4b2d240f3', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'cf6776345185d11d1b36fc7f1e3926ccf6610f78' }, "Date"), index.h("smoothly-input-clear", { key: '870cca26a43bfdc30a2d69669bfb4cd245dcec9f', slot: "end" })), index.h("div", { key: '871b1fc789dd2348df5cf7ec96449ea1cb37cfcd', class: "height" }), index.h("smoothly-input-date-range", { key: '26573c69d62f0035006002be2c97da8fab1c4763', 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: 'c62cd91d6caacd7f7808e284a83d6de5ea68cec3' }, "Date Range"), index.h("smoothly-input-clear", { key: '1c48d9b517a6fde72b6852b17f60ad13fee8b72c', slot: "end" })), index.h("div", { key: '6b563e48b361cab8fb294ec9dadc285a89398bec', class: "height" }), index.h("div", { key: 'b1eb602fb2b71c054411bd0853ef4cf079fd28dc', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     get element() { return index.getElement(this); }
 };
@@ -9680,7 +9677,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'c4ad85d772797177e47e567e33732a44f732c882', title: this.toolTip }, index.h("smoothly-button", { key: '22653fadf71dc4a22fbbe9991a0797fbf40a3a91', 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: '3e43434ff280a243a040edd88d02172c599351af' }), index.h("smoothly-icon", { key: '46a7632c22ee809e81a8097ee24bfebb34d221a9', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '18c7155b548d7297c75fbcdcd67bb5ccd774f57f', title: this.toolTip }, index.h("smoothly-button", { key: 'e4d1a4839d096e4d38837165120f2aa52e3e7fd4', 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: 'b3a782cc4e31e0ed591469e0de3652d45c582758' }), index.h("smoothly-icon", { key: 'c4a290afa92476402fd6d90c64b5e8a0ba6ade9f', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
@@ -9790,7 +9787,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '080d404570c5b5b1dd5058a9e9e34c174a862b2e', 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: '5bae5144a3110a8e1b753756d0486acffd2f446d' }, index.h("slot", { key: 'f458d7dde342570df9bea06f6948086978eb0dbe', name: "label" })), index.h("div", { key: 'eb162a004a196e6b5a6bc5ff27a38ea7e5652bde', class: "input" }, index.h("smoothly-button", { key: '85df1422b232bd96b29044b30d7330584a5d1424', color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: 'c0163b9da0bf0880832b9c0893593690172f5c1a', name: "button" })), index.h("span", { key: 'f649fcc391bd60d5623d57563239bf514019d41e' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '732ef24078b7333ecfe249e72823ba093183848e', class: "mask", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }), index.h("input", { key: '96b7eff1b52a7e234c97353c204c2ce5a24d2894', 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("slot", { key: '2d7ed2ef57653c07b98b182397416de182630059' })));
+        return (index.h(index.Host, { key: '714c5a4a31f3b574195e02243ce31134ff7672be', 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: '5f5ca6e76aa70fee6ace250e3a6ef3b4315ee50e' }, index.h("slot", { key: 'bcbb91be5f045272cdd3ed6f13ed7417973f34f3', name: "label" })), index.h("div", { key: '0aa436372006f4d87433ebf80391224a5fad6d16', class: "input" }, index.h("smoothly-button", { key: 'e75d860c97a49cf28eafed39d1ae28cce89e5418', color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '668b9c123e1fb398aa6fb097bdc1d68178f0f0f0', name: "button" })), index.h("span", { key: 'c078a935b7f070a705e112d5670aea91aa8a8eab' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '432e2eebbdc9ee15d4cf12eaa5ccddc19fe48b1f', class: "mask", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }), index.h("input", { key: '1f3e12ce8b7299756f449842965a3d291994edf2', 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("slot", { key: '91bc078618400279810c477f942241c5b8a1ce08' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9911,9 +9908,9 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'bb8be12ae4ff58f2cc72dfdedf5c2fe562c6e338' }, index.h("smoothly-icon", { key: '97456be9a5ac89ec1374a65439d5cbf11d248e5f', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index.h(index.Host, { key: '2291a2be2e98b43576f078fa1ad326dd106addc6' }, index.h("smoothly-icon", { key: '1dbb7733b282239376ab39e931d83306867bf117', 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: '3f4365988c13f2a334447e5a264af6bfcd6a4962', 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: 'e682c9e17657e1bdad4e06826ca2d307c0539d7a', slot: "label" }, index.h("slot", { key: '27697f030d045f8456e03b719050b29a53a1d002', 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: 'a2b409677361046f344919570db7cb34fc10296d', 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: 'e2ce7bc2c644548cc61a917519208ef96ab8b439', slot: "label" }, index.h("slot", { key: 'e4f77dbedccd604256eaf8f838aab9dad649c300', 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: '7d0397024fdf9a253d00a829e85b696d476c45ed', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '475d07633e2469c4d484258e20520655001724c7', 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: 'f2f502c693289781af75ba605b1c26dbe1144d6f', slot: "label" }, index.h("slot", { key: '2a7ac6b85c1b51a23534722b0e432e3a0a79dd43', 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: 'c89c4ec94113fcc651ed893162e0c0b270c170eb', 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: 'a72ddd24c9bbe0634dfec91629fa9babb74d4a60', slot: "label" }, index.h("slot", { key: '8de073bf2b6057dce600e8bde3607d2c376e77fe', 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: '406067977c309b9ecd89c4af047c571dba2dea85', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
@@ -9936,7 +9933,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index.h(index.Host, { key: 'ab14f46624e9d7bfcef3d143700138e0d9220948' }, index.h("h2", { key: 'e357df508351176067791a33f2939611c12cf5e3' }, "State demo on smoothly-input"), index.h("p", { key: '3d210b4211b96b5868c0276addb714315ba3d141' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '2a72bcfaaa7ec0ba096ea4869010d02330e0f080' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: 'a2181563d8ce20ff72f67fc523d3b434a85a09cb', 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: 'ffb01069a5a882380d83becc72a4c31c7c75df1a', type: "price", currency: this.currency }, "price")));
+        return (index.h(index.Host, { key: 'c8116e3afeba258c9a0c0c262aa7b4bb3eb6cb33' }, index.h("h2", { key: '207569884a6a4d72ce2e7a0c94313bb2a4f3361c' }, "State demo on smoothly-input"), index.h("p", { key: 'f9bf647ef66f514f17b3dc352cf7665d97b5a914' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '09bd92a3f2d042a07ebd9414c007012cd2e4182e' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: 'd5d307c61b0bd7c1295a77c792cc6defaf75b896', 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: '30a6f72abad7d7b1ae38e350d6b5efb0c5ada637', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = SmoothlyInputPriceDemoStyle0;
@@ -9977,11 +9974,8 @@ const SmoothlyInputRadio = class {
         event.stopPropagation();
         event.detail(this.name);
     }
-    SmoothlyInputLoadHandler(event) {
-        if (!(event.target && "name" in event.target && event.target.name === this.name)) {
-            event.stopPropagation();
-            event.detail(this);
-        }
+    smoothlyInputLoadHandler(event) {
+        Input.registerSubAction(this, event);
     }
     smoothlyRadioInputHandler(event) {
         var _a, _b, _c;
@@ -10048,7 +10042,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: '156cf678b0cf1bbce78e2abb384d8a8f247584ac', class: "floating-label" }, index.h("slot", { key: '8ff9f95eed38a9056cbb7c53dc89071ad39564dd', name: "start" }), index.h("div", { key: '91da0baf3757d9b6822611cf9129ef65956fb6d5' }, index.h("slot", { key: 'ec8ae5aebca5b7f2ef7e4925a1d17b6e2be2c288', name: "label" }), index.h("div", { key: '3c9afd82bacc723c67bad00beca11397383149cb', class: "options" }, index.h("slot", { key: 'b2efd49b65335d8b369a371d30f64ea231edc725' }))), index.h("slot", { key: '29bccd7057400dabcaf8a9bcf60ddb6d693c2dc2', name: "end" })));
+        return (index.h(index.Host, { key: 'ab0bf4695c54bf7cd2e2f91248ffd39f157df469', class: "floating-label" }, index.h("slot", { key: '366f49a1aba71e66e9dce0acca4e1ee9791a9b9b', name: "start" }), index.h("div", { key: '23813ce7cf98c6b7caf055c4be28bb9ec962aa79' }, index.h("slot", { key: '861aeb223207384b1ed1211bd191d3dbf77af40d', name: "label" }), index.h("div", { key: '50643fa252ad3fd2a09386ce14c2101c94b578ff', class: "options" }, index.h("slot", { key: 'e8756ab35a54650957f5b66ebc060a5b734e75f3' }))), index.h("slot", { key: '963162b6c408932df5d2e72325028cb6ce511754', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10079,7 +10073,7 @@ const SmoothlyInputRadioItem = class {
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (index.h(index.Host, { key: '7c48c949fdbce137b24f9a3e1ec6192be05ca97f', onClick: () => this.inputHandler() }, index.h("input", { key: '9877ecbfd2f4ac2f61b7d3d32c6a8c085e2203ee', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: 'ec4d5b9b68951216669a38391c36584c4335e22f', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '044b40a81e3c53fdac6a43e6265c22f60156249c' }, index.h("slot", { key: '9b325abcc530336647663c90484b403e6ab8d82b' }))));
+        return (index.h(index.Host, { key: 'ebfd8980b6aa1ebbff0ca2c4febf8dd6f550de9d', onClick: () => this.inputHandler() }, index.h("input", { key: '2b5ac268dc9a3740570bca2224162490cb5252d9', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: 'e6b9de03c279586a55702214df2139fc4396dbf8', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '5ca2f452f461f563fac50b39220a7a6e8fdbad62' }, index.h("slot", { key: 'd78f41e42d88b28e7b127a429676b50811ec1b53' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10101,6 +10095,7 @@ const SmoothlyInputRange = class {
         this.looks = undefined;
         this.color = undefined;
         this.changed = false;
+        this.defined = false;
         this.readonly = false;
         this.type = "text";
         this.min = 0;
@@ -10164,6 +10159,7 @@ const SmoothlyInputRange = class {
         const decimals = !this.step ? undefined : (_b = (_a = this.step.toString().split(".")[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
         this.value = Number.isNaN(this.value) || this.value == undefined ? undefined : +this.value.toFixed(decimals);
         this.changed = this.initialValue !== this.value;
+        this.defined = typeof this.value === "number";
         (_d = (_c = this.listener).changed) === null || _d === void 0 ? void 0 : _d.call(_c, this);
         this.smoothlyInput.emit({ [this.name]: this.value });
     }
@@ -10183,10 +10179,10 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '217e854b0aaba05fc17bcb5836bec4476091b8e0', class: {
+        return (index.h(index.Host, { key: 'f410fced011fc300f12212c4c4b7dcd7517e24eb', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: 'abcad7f036f41e5c8afd7a5ad1352d5edbaa6105', name: "start" }), index.h("div", { key: '3098b807e53e5aea94137616dc039c19e3ff42d5' }, index.h("label", { key: '63429452ac71f1cb2ca5b712521fae46d755fe15', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '3308b0d304f47e0daf57954b38dedf7140f4c366', ref: e => (this.input = e), looks: undefined, color: this.color, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: e => (e.stopPropagation(), this.inputHandler(e)), onSmoothlyBlur: e => this.inputHandler(e), onSmoothlyInput: e => e.stopPropagation(), 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: '3b6e02d138b33bb3e1b56323b809af2986adfc14', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '32ed12cfe8051885e52928e3824d82ed58217a0d', 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 => this.inputHandler(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '715c9942ba15a7bf1d7275a8d892b6d9bf950362', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '907dd4ed8bf117a9c6097602015cafe65f5113f8', name: "end" })));
+            } }, index.h("slot", { key: '4d0f4f8d38f4dbc0f143b9ea9de8f38a1f5fb3a4', name: "start" }), index.h("div", { key: '89b0b922105703aaecf8feb62b560f43ec5d1fa3' }, index.h("label", { key: '9aee3d6086033e708f452882849fb17e079a8a77', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '974d819684f5c63fbf21f34d3ad528cf20a91c06', ref: e => (this.input = e), looks: undefined, color: this.color, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: e => (e.stopPropagation(), this.inputHandler(e)), onSmoothlyBlur: e => this.inputHandler(e), onSmoothlyInput: e => e.stopPropagation(), 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: '9e21ccfbfad6cbb046fd8d69344540cb4a5e961b', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '4616cb768b35036d6cee8ea41983e88db62c106a', 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 => this.inputHandler(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '180657561bb52bbcac545ec50be74ebba2c97d89', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '63d58366e132efe9f7dbfcee25766a4993bc815f', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10200,7 +10196,7 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '66bd4b62cb51f2f5cc68921bcb3baf360abe9f4a' }, index.h("h2", { key: 'b413570feb6f48e1bec5fa86f9cec85fe77f4c36' }, "Range"), index.h("h3", { key: 'b939256cc23178592e830d301185b30ebbe96a9e' }, "Phone Number"), index.h("smoothly-input-range", { key: '4f57681060c1759ab127b638ab839e9c85315580', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '2a1f6ae29389117ab738e700cb0ac36dcbd02d21' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '3124b06f533a733220710e10862ff36db2db88a7', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '1c28dc9e3385b1fdbfa9dd7fc27b387b7db87c86' }, "Percent"), index.h("smoothly-input-range", { key: '8606937ac9f195a76bcdcc97cfd32c49a7438663', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: 'e33e94cbdedf240d9f32ad3b61c00d0d2ae7de5d' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: 'e81e920156dedf852d1450ae3fbdaa8f3747b5e9', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '766f06b5182fbfe0e1e5bf3d87bb9a3caaad9588', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '7f43e976c428e47ae228433ce2fedffe21128bff', size: "icon", slot: "end" }))));
+        return (index.h(index.Host, { key: 'af3a5af2d8de596b80255e320a131e38523c856c' }, index.h("h2", { key: '9f251a12036a045eabe01af5da4d3fabdf005643' }, "Range"), index.h("h3", { key: 'af7b349719dd3ea8809ad9a78f9de05b24f7180d' }, "Phone Number"), index.h("smoothly-input-range", { key: 'b1895d85af6f19359d4246d83af393e1146f17dc', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '34e2e4e251680b2ecc364aa1042536b4c5c2523a' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '9a9050fc3cf5ce05cd101e2fd79a59611192776f', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '9195d0e2d8715f257105372db80be85d70251f61' }, "Percent"), index.h("smoothly-input-range", { key: 'b79a25213abd5c47e2feb7bd69d8f1814f947d39', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: 'd68728ec7d00fa1e35b556ac5c5d79f9d1c3a7a3' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: 'fa8902a842d2d62a35b6aa6aa806f27b3fcc5998', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '58d665457ca8749b59d465934046670fc4956ae3', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '30b9a8a62084b7310871dcf0ba836e6a1e9a3538', size: "icon", slot: "end" }))));
     }
 };
 
@@ -10246,7 +10242,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '7e244bbb6694869845c2cfc5904f25d1998f0147', title: this.tooltip }, index.h("smoothly-button", { key: 'a76ceacb18572fd7c5b43bc9cdcb7a174c39645d', 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: 'a7686c6a178443f3d2be496bafbb67d7f317fa63' }), index.h("smoothly-icon", { key: '020db640096a5e1b4dbac7ca85deb428c3da8a46', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '7c89c484868652e054067f4c9e9bd276acb1ad75', title: this.tooltip }, index.h("smoothly-button", { key: '50218493e7a9163d4b81eac6a70075610d4709fd', 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: '35a92c6e08c01dd688968178524c223e3c18fe8d' }), index.h("smoothly-icon", { key: '7f793fd820373044f83c1434187cf6e5f3779c98', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10409,7 +10405,7 @@ const SmoothlyInputSelect = class {
             event.target.deselectable = !this.required;
             this.items.push(event.target);
         }
-        event.detail(this);
+        Input.registerSubAction(this, event);
     }
     onWindowClick(event) {
         !event.composedPath().includes(this.element) && this.open && this.handleShowOptions();
@@ -10555,14 +10551,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: 'c4cabb65c384a6183e5710b590985814c72e9cc5', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '48b695c468e1f47588014c3ba00c8173a1fec543', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'e2e787a20278b2374dc305a5bca2ee9c54a77aaf', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: 'c4e8d15da88a3a070e8c92bafbc05ec1366dd520', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: 'afa45686839ba1327fe83cb6d947902dbed33ef7', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: 'febbc0f340ce3e10d3fab529bcd2b3a6ce0acccc', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: 'ab6ef93bfbe10588d6e0365defe3b7b5e8b0f60b', name: "label" }), index.h("div", { key: 'f7c2e8d753c6ea6f9a42b61719ae29b24ac71612', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("smoothly-item", { key: '4d012f828bc08cfa8b21206562b32665a733202e', selectable: false }, index.h("smoothly-icon", { key: '1530e7662e94201e64ad0f993cb2914117b493a6', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '7392ff1ad0f367383fd5004d331c6ca43007512c', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: '730d9ca83f1ad086579c05d4985b66672def87a7', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: 'cf44a6169578b97fb29e07abd8a5fab14db081d9', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '8cd7a4caa21ace7372fc88c7dce592ecf0bb7015', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: '47acdd369de9cd5ebd1245c79ef20496906e05b4', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: 'f8fc1d95a3238e355b22acb728ad99bdd45c3029', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: '35b44fadf8da46babe7a916388e0a5cbb48ee419', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: 'fd76014f2683035554e6e194300e55e153514c1d', name: "label" }), index.h("div", { key: '39ebc2121860b0e76d92e28c9fca692c9ace0ae1', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("smoothly-item", { key: 'fd396120ef2bd68241e9b0d2cabf6d77c68a64a9', selectable: false }, index.h("smoothly-icon", { key: 'a415b6b8cb2adb54fd9091b66323b6ef8f8aec45', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'e5ed047ff902f0b3031f17795b41031a9329203c', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '4f0cdfc025a27dfd5ed6c9a4a2223503e4a58283', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: '7d89e939b8d549d1e48aa51060990cbaaaa0a519', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '5830efb81b23701c751665d095031e679b649af8' }), this.addedItems)));
+            } })))), index.h("slot", { key: 'df75f74eef2755fd027c3c5cf475511bd9d7a44e' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10623,7 +10619,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '9c0181cf2a8b2fc3273e9ba16c3827f636824bf1', 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: 'cb159799aea3dec67a0a39d6f7374d4614d69ed9', 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;
@@ -10665,7 +10661,7 @@ const SmoothlyItem = class {
                 : false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b2aceaea145db0046ac8e87b495dc8deab785f60', tabIndex: -1 }, index.h("slot", { key: '18974097498a2f542e7ae723ad11a9a88e1bffb7' })));
+        return (index.h(index.Host, { key: '923664d3a836a90def37e32e15f0f371c415d0d5', tabIndex: -1 }, index.h("slot", { key: 'f91ef22309a011d08e02c8e5034fa1c91db14e01' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10686,9 +10682,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'd922aac105f734223802e577908de0b8e9ca0c39', title: this.description, style: {
+        return (index.h(index.Host, { key: '6f318ae18399fdaef564afc45a8139e925be202a', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index.h("slot", { key: 'ca5761e5d1b281771f04820fcd82ae40ca54b64a' })));
+            } }, index.h("slot", { key: '02b41889fab175f0c80f0d5a4deb0e117a8837a4' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
@@ -10707,7 +10703,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index.h(index.Host, { key: '3c967227a83500f95674271b312a1841afc40067' }, index.h("slot", { key: '293988b47130197ca487a7671a5157ee2390984a', name: "before" }), index.h("smoothly-load-more", { key: '08d8e0065a326a9dd238247066da528c91c5e14e', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '703f9673a656f95818c67f1c4a98decf88d1a162' })));
+        return (index.h(index.Host, { key: 'c1c17f2fb270f07c0bcd0e189a6c6ef31b8f0bbb' }, index.h("slot", { key: '6ee5562a9667b98c386aef61fc684d7ad2c4a6e5', name: "before" }), index.h("smoothly-load-more", { key: 'b946101e1e2ef49b29ebc040accbdb45f5695f96', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: 'fc8ef30a2d8cbe33ac891ec6ff6f2a9cdcb3240f' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -10751,7 +10747,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: 'e8d5e19dec6d562b79f27112012e62b9580f658c' });
+        return index.h(index.Host, { key: 'df435742ab57fdb158ca24e74071d743113f8bf6' });
     }
     get element() { return index.getElement(this); }
 };
@@ -10771,9 +10767,9 @@ const SmoothlyModal = class {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: '8a8d5bb61579367a4c241efe43f110ab07f74c83', role: "alertdialog" }, index.h("div", { key: '181d4155af04dac2e7640ed29f856d21f52a5724', class: "modal" }, index.h("div", { key: '81f86d5ea0a2dd2b1acf79e848fabec70109f7a8', class: "header" }, index.h("slot", { key: '9d5d80e04631abc007c92373303f9fdec2b6feb2', name: "header" }), this.closable && (index.h("smoothly-icon", { key: '422972e7776068483ebc14cfdf1acd13ef90bd96', name: "close-outline", fill: "solid", color: this.color, onClick: () => {
+        return (index.h(index.Host, { key: '93eafa5919500ec64118186d3e41d29f2596430c', role: "alertdialog" }, index.h("div", { key: 'fbe10ec8b7827bf2e144487647752972b773222c', class: "modal" }, index.h("div", { key: '29b0f3c32cadb23a04dd4f7e1ae0660efd61874c', class: "header" }, index.h("slot", { key: '52358c6a28ba23a23b548be55f439bd8c09c45e3', name: "header" }), this.closable && (index.h("smoothly-icon", { key: 'de989fadd93b81897a48dcc8b3b48fc99de0194f', name: "close-outline", fill: "solid", color: this.color, onClick: () => {
                 this.open = false;
-            } }))), index.h("slot", { key: 'ef627686438cdfbad2ec530c409326c32105f610' }), index.h("div", { key: 'c2130b674a9cfa8fdc861bff0816ea70ddf08a4d', class: "actions" }, index.h("slot", { key: 'bb98047a826107df942e9d5b888cf173ac8c4d3e', name: "actions" })))));
+            } }))), index.h("slot", { key: '0b298371c381b6e5008cb20e572621b2bc8d1540' }), index.h("div", { key: 'adc7d0878ca61bcceef86a171b232d8e7259e9e7', class: "actions" }, index.h("slot", { key: '9b989cd3f114f32c67578066748f00ce8c76a149', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -10789,7 +10785,7 @@ const SmoothlyNextDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '13017520ca4623b617a3d255b1933d63742a4065' }, index.h("smoothly-next-demo-group", { key: '3008ea50bb9c15bfa50543b6e2e46c5f5974b54c' }), index.h("smoothly-next-demo-colspan", { key: '8f0fbd33f719c97c8a4a320fe6721a0b47bbf274' }), index.h("smoothly-next-demo-simple", { key: 'c50c5e1a7fb167ef8571feec80263d0cf8ccf8f0' }), index.h("smoothly-next-demo-nested", { key: '548df80dc2baa857c4b037df77b7fb30cb00520d' }), index.h("smoothly-next-table-demo-filtered", { key: '862288f93789bd5fd0e479882b0663ffa1a4bdca' })));
+        return (index.h(index.Host, { key: 'ca678b2bf078526ad2669a31e35e9644681454ba' }, index.h("smoothly-next-demo-group", { key: 'a81fd297ceeb1e99445fd90a4e2a64c379894549' }), index.h("smoothly-next-demo-colspan", { key: '6bbc0a5e90779583ff1c26dbe3e2dc403ac66494' }), index.h("smoothly-next-demo-simple", { key: '439d1e5eb92c3f153cc46c9d371a9808a6c4c729' }), index.h("smoothly-next-demo-nested", { key: '8cd82bf459a6aaeac79d5710e8a1f281aff813c3' }), index.h("smoothly-next-table-demo-filtered", { key: 'd4ed47f924dbd0e8c97edd7b6394d7df5968f113' })));
     }
 };
 SmoothlyNextDemo.style = SmoothlyNextDemoStyle0;
@@ -10802,7 +10798,7 @@ const SmoothlyNextDemoColspan = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '27796ac28a50da50db0be40b5e04ad08bebf0bcd' }, index.h("smoothly-next-table", { key: 'c0e5aef2a19b61d3c6ea07259bb43b9fe1818835', columns: 3 }, index.h("smoothly-next-table-head", { key: '20a436643f93c8dfeacf04535d1f55611ed61313' }, index.h("smoothly-next-table-row", { key: '1a7f3a761336dbb535a1e44a4bab91b95faa16df' }, index.h("smoothly-next-table-cell", { key: '13eb0504001f52b4283b8c90e125386b62972507' }, "Date"), index.h("smoothly-next-table-cell", { key: '6bd313a500e6418c704f0eae341bb1b96c5cf491' }, "Skip"), index.h("smoothly-next-table-cell", { key: 'f3f0d7884416f3c2a1bd0f746eacb0419f9f7ce4' }, "Total"))), index.h("smoothly-next-table-body", { key: 'bb7d0b955556ec8ffa9f00bbe361ef8a84543c5d' }, index.h("smoothly-next-table-row", { key: 'c2de161dc2ca24a502d3d4816dcd5db9c5e05867' }, index.h("smoothly-next-table-cell", { key: '27873cd6358bbc7887d91808e8f5fe4e749f759b', span: 2 }, index.h("smoothly-display", { key: 'ccd87a72c2fae763ce85181edb7c899252ff23e4', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: '497797dd92669d364f27de00ce2043365910f101' }, index.h("smoothly-display", { key: '636950b07dd7017eee652ec4667a04574ed226f3', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: 'e37e3d4a52be4c0b8a32411cd40475b4a55c3997' }, index.h("smoothly-next-table-expandable-cell", { key: 'a7b0555c14b206c2824c5c8e38eab92f42b8e6ae', span: 2 }, index.h("smoothly-display", { key: '6ce82c3420b19d5064fc51dd099ad6acf6ab69bf', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '50dbda1b2f1f172a3bd11ad48fe406edc86f8172', 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: '6a15946de6a9495fbc1c35d8615b55318422dfd2' }, index.h("smoothly-display", { key: '1ffee1d92e3a2fe8542a28dd85cfacf6352ca21c', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: 'eccf8621336a3376aab0306c23df183deccfc82c', 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: '2f628dbb945d4b61ec282d42123a029e726a9f83' }, index.h("smoothly-next-table-cell", { key: '9b14c45642c90268ec817e8ac5eeb7592e7a2639' }, index.h("smoothly-display", { key: 'fd5bd4aaad2e58a8748122d436e146bf85cdc67b', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: '665ed679e942960c4e3c9eed2c36f3a87f510ed6' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '8480c4f7728dbbe5adb32d656b7c65d3b57c33b0' }, index.h("smoothly-display", { key: '5aec36dd039aff21e298e685451b38ae84cbb287', type: "price", value: 320, currency: "EUR" })))))));
+        return (index.h(index.Host, { key: '286c9e4d130b2a9fdf7fbfaba2501778008571f9' }, index.h("smoothly-next-table", { key: '9a2635bb8c2c1d8ab66ddddd7b3654eac44545a2', columns: 3 }, index.h("smoothly-next-table-head", { key: 'c2c2e4d7d228b06d06f3de81d54cf1f5488754c2' }, index.h("smoothly-next-table-row", { key: '481b07ad3adfc743e860d08bbf3fa2066e7fc9e5' }, index.h("smoothly-next-table-cell", { key: '371343f537f4e4fba5c21136882a2dd7c824e3d7' }, "Date"), index.h("smoothly-next-table-cell", { key: 'cc5b66f49b92e02cff77dfbe055bca05dc5d39bb' }, "Skip"), index.h("smoothly-next-table-cell", { key: '60ec7e25b92b84a66c92007257869dfb0303f98e' }, "Total"))), index.h("smoothly-next-table-body", { key: 'e232591d592ac15222c51af89eccd9077855a2c6' }, index.h("smoothly-next-table-row", { key: '52f1dd5e37d35b6001aba097e29e9c2b44e1cfb4' }, index.h("smoothly-next-table-cell", { key: '5dba5b95e5f76f93e76b1021ba0979f322012b82', span: 2 }, index.h("smoothly-display", { key: 'e30bb1aac9f024c2bf2eae6918b0ef4ad6221594', type: "date", value: "2024-01-01" })), index.h("smoothly-next-table-cell", { key: 'fbee8007a62c7c63dc46c62799446c10d459a2e6' }, index.h("smoothly-display", { key: '0923da8b4a16569aeccb6dbdf74986abf80de103', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-next-table-row", { key: '9bfbcc72ec13e74aa92af5f39aac0b4198b2605e' }, index.h("smoothly-next-table-expandable-cell", { key: 'f432fd2009eb3ff9d153f44b9ee4569f76194033', span: 2 }, index.h("smoothly-display", { key: '03f1775e95cb31ddb19658d7176392c942196cbf', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '242558d4d9f4a66ee03b54201e8430f26ea1dbea', 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: 'b1e8e9fe62ea94f9d84e3842c57a06f1101b43e7' }, index.h("smoothly-display", { key: 'cfd49a2c395e7a49b16d2235d2670c6a73073d56', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: 'cb64bd62592cd9a975bca04cfd34c4241ab4fcf9', 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: '8fb4feda41f64fef31c481560b1f1b2d8b284265' }, index.h("smoothly-next-table-cell", { key: 'd0dee65308e20a400fa50d4e11941aefec5cccbe' }, index.h("smoothly-display", { key: '3dd886daec3f95c1f9e33315ee7962f7b93ff891', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: 'cb67fd161e3fc1eac3c0616d5c3579ebe2e4e8cc' }, "Not Skipped"), index.h("smoothly-next-table-cell", { key: '96e33c9ad154e03d9c2b010d4a7f75465507c9f1' }, index.h("smoothly-display", { key: '93e815bb78e784b1b383d280f9727f6fe0e5aaa4', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyNextDemoColspan.style = SmoothlyNextDemoColspanStyle0;
@@ -10815,7 +10811,7 @@ const SmoothlyNextDemoGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '00107720391b349441ae772cf773fd2ec0dcf3e8' }, index.h("smoothly-display", { key: '5f8a60bfcfbc7cc11344a67c3aae53491ef8d568', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: '0f0eba34507f364c3ddd3fc96619e21153b5b15e', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: 'dc39e9cc58b74383b1650580d0957193afeb4bdf' }, index.h("smoothly-next-table-row", { key: 'ea000e7af4f3bf7449f2eb31596fa15d335beef2' }, index.h("smoothly-next-table-cell", { key: '73a01b2d248b15eddc1335241284a12174575782' }, "Date"), index.h("smoothly-next-table-cell", { key: '2ffb521c06f044a022264693b64b1cc37333e579' }, "Total"))), index.h("smoothly-next-table-body", { key: '97312f4c2ff7dd6e10230dafa2031ad9327cd21d' }, index.h("smoothly-next-table-row-group", { key: 'fda16f4e638bf0fdab68bd52d988050721847d7c', align: true }, index.h("smoothly-display", { key: 'b9675d21ca891e31e46de714210851bb2a8c85d7', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '1437979831f6bd2986adc484d36c63661fa1f0bd', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: '78dc25f457719b3a81324a72f6f3208027f4f334' }, index.h("smoothly-next-table-cell", { key: 'ddeebcb112ed6d7d1389ca1991b6656176374ea7' }, index.h("smoothly-display", { key: 'a5f874fcf3dfe3f568cf5d0323300b343f2ac708', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'e9abcd0f1760eeb21c1933a1c56fc7195f60c3da' }, index.h("smoothly-display", { key: '572afb037cf27ccd1b4181935814b3e6817ce876', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '0c0190e41c95d39fd03487865240f43daf97b069', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'c8bace32550e65b08b8fd29ad514936095af7c1f' }, index.h("smoothly-next-table-cell", { key: 'f854682c202244f2d7784ec334a6baf866bf3314' }, index.h("smoothly-display", { key: '61015ffd8e2bcf27f830c44ab3c86939bcac218f', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '10412d33ab10229a125267ee0e6011f884def956' }, index.h("smoothly-display", { key: '1cb496ed5169ef9be0d41aa9127b1394bb095d8f', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: 'ecb67fe11e3df463d6a46d31c2edd075bdb58f29', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: '5f5699d9e6a11c6ece66287b2cbab9984b10b4ce' }, index.h("smoothly-next-table-cell", { key: '9c2fa987acc14fc768614f32ad6a633e3d778db1' }, index.h("smoothly-display", { key: 'c8072ef83ee06ec43dd7e5e257dede50f961d99f', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: 'cbc9b054938892c5fc4a1502960a28a03736dc5c' }, index.h("smoothly-display", { key: '2c8225a6340fbd39dc1d54bc8991021375c7742b', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: 'd4c0fa91a9c5c008a32931f16a736989d23d4bb2' }, index.h("smoothly-display", { key: '0d6ef4e96b3d601f2d738477d9094210b7803691', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '84e25d2da669d0d4afbe23dfb114ffcf21c82b5e', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '3ffdf7473ff6b9c40d81cbe4b2aaf3a825c86125' }, index.h("smoothly-next-table-cell", { key: 'ab985e9e6caaa743e77d4ca6e33a8e0a54a9dc6a' }, index.h("smoothly-display", { key: '8f570dde80bc617e5cb137acebc44e5dc742c06b', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '5e269a1370993eda41e2d466b35077f1dab9d08a' }, index.h("smoothly-display", { key: '0563c3b3f467b71087e1d28bb1cff706667fad8e', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'e6584a4a3bf627b53d16e89c2cce7616876e5c6d', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '5a054025d70b831d91d6d2e862b741772207eb60' }, index.h("smoothly-next-table-cell", { key: '2543c240ced21320a82b87006aab704c2d10b8e0' }, index.h("smoothly-display", { key: '73277a03ce5942a4d1c04d7f1155410054b12404', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '66f3ba0940cb1537212b16e28712f8bf7178da91' }, index.h("smoothly-display", { key: '7991e7325ae9179051ab238e0423cb50afe754aa', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '31e2406e1243c99efe0e03f305f6035daa18aa7d', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '178a34a2d08caf9d102f7bdd37b3c1ba5b760cfe' }, index.h("smoothly-display", { key: '684716cf86d232663a7a7238340bae887a96699f', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: '5a187e5f912989f9dcc08009e05cb5aa32d25fac' }, index.h("smoothly-next-table-cell", { key: '861f3672a68c477aa7492a9b1d36ef85c857e0bd' }, index.h("smoothly-display", { key: '879482bee27d7b2c575e348271488c41fd86fc6a', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '8a3c4ec1c7257f656f7863ee03366e542a3ceb9b' }, index.h("smoothly-display", { key: 'ef28ce80ead9d0d51ad63e17f285bb1d576c65e4', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'f9ea724f32a0fb5fea0fd5c6be709e61cd430d5b', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '4086636035f573e04b4c3b29d9f71e1e3db6bbae' }, index.h("smoothly-next-table-cell", { key: 'f22210aa14ea0e4185ab2f3a8f85a9bbf4a5fe4a' }, index.h("smoothly-display", { key: '3cb01fa16079e0cf36a8add8437fbd0aef6371b3', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '909c0b0d7c6618bd9a3b640f4ceaebd84826faaa' }, index.h("smoothly-display", { key: 'ddbedf3e8973aaa6ca07a34cca7b9a84248a27c0', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '8d7d4bab3a9ce599865f1f96e0da1f60a880f81d', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '957c290c4adf503c083c2a77cf035a74d0fb903c' }, index.h("smoothly-display", { key: '5c9e031ede14a47d422b3b469644209be9b38d95', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: 'b6985fd3b5ae4724ae9cea30a956f2e75d6e49ab' }, index.h("smoothly-next-table-cell", { key: 'c05bbb34ba90eff403f484838d89262ea92fb87c' }, index.h("smoothly-display", { key: '2c745983fba7058ce583a6fb485060dcb189dbbc', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'f331a9b877aef07f728febf8442683cc59454ab5' }, index.h("smoothly-display", { key: '9e1741958a961e81ddbafd510e557491af7ad0d4', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '5ab1426aec39166bc57a66eb877f6f7c83391aa9', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '338758ee1753b4d3f3ab6b3113ea217320e629da' }, index.h("smoothly-next-table-cell", { key: 'c953d80047cec4a1720a398f371c63cefb0b8bef' }, index.h("smoothly-display", { key: 'da963d282663c10a3740121fa7e4b0945c4732fc', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '275b2049fa2b844b899b004b983e3b7ae28d0535' }, index.h("smoothly-display", { key: '4d57a467d26b783679b15df8ba589ba751a5146c', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'a5b658a5a2c3fd00c430bd316a4d9d921269be52', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: 'bd3a067117480c0b3177a4b86a426d4516dedaf3' }, index.h("smoothly-next-table-row-group", { key: '799c938feee7a42ed5882837207b841929178428' }, index.h("smoothly-display", { key: 'acd827c42f10f5fe867391d03b47bb5e3f42d8d0', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '94a58e94464bad591bb249762d6ade36c33510b7', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '66cf6bcd02eeb7cafbb5a8bd96007fafb4350499' }, index.h("smoothly-next-table-row", { key: '6bcafa2e926993be57ba07bd42f06beff61cb0c6' }, index.h("fake-cell-wrapper", { key: 'ed9d8126bcbf8cee01fa542c3336a9d14212f61c' }, index.h("smoothly-next-table-cell", { key: 'f84f32fe9fa0b9e38fd7531ef3ef3aa81f833ac5' }, index.h("smoothly-display", { key: '02a7fcf7773a3f522b0ad455fb771a5dd7c376d7', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: '241ad856e54ed5c4972f03955416a15c36a143d0' }, index.h("smoothly-next-table-expandable-cell", { key: 'bdd971c56910fbc8359ab6021856901cb3afc8bd' }, index.h("smoothly-display", { key: '3fd55705e77de16b28c20809cd6a6a57c58324d6', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: 'cc27159540768cd765832124f53a487f78ecea04', 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: '95accdf2c8bb515abf253082f734e7dfa8fe3c0e' }, index.h("smoothly-next-table-expandable-row", { key: 'dc31702d1bb3c8fcd8dba383515abd05699f8a5e' }, index.h("fake-cell-wrapper", { key: '9a905ab96104b082b114b17f466b9823c130c30a', class: "span-2" }, index.h("smoothly-next-table-cell", { key: 'ceb47f64f86d5cf2b2ee176598011ec4e9d4f557', span: 2 }, index.h("smoothly-display", { key: 'b2081dec56b27f3e95cdd97ba3cc41106a077b79', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '35f165d6d71929a879580ba56330c2823f33ae0b', 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: 'a0fb9d098fb4d391a31baa3269fd6e550ad3534d' }, index.h("smoothly-display", { key: '966c7d9d5e4f241bfdceb51c509cb41089bca009', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '5f52da2331bc0a99d40b735294ffe664f94bdd89', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index.h(index.Host, { key: '9d318e604b16beb223d62946dc47dee725773671' }, index.h("smoothly-display", { key: 'fd5a18641a4b9baa18458b67beff1ff9cfce6802', type: "text", value: "Group" }), index.h("smoothly-next-table", { key: '0c0050143bdd2be1a04d8a03a41b37e93652b257', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: 'e4bcddcfde3913b9ff0a0e135d3c252aff1f86ba' }, index.h("smoothly-next-table-row", { key: '6bfed3199d55e7eeed36a53434dacf25248ba3c3' }, index.h("smoothly-next-table-cell", { key: '791a22db07861618aa0a64415c9c122b0dac6f74' }, "Date"), index.h("smoothly-next-table-cell", { key: 'fd6a8b3c613bebd48aa18c7d04cd0b3d88d4d1dc' }, "Total"))), index.h("smoothly-next-table-body", { key: 'b3d7d1b5477f14a51c3c5825dab71e2bf086fdda' }, index.h("smoothly-next-table-row-group", { key: '94c7686be44666b0630d14796c76533d5345b3da', align: true }, index.h("smoothly-display", { key: '187f2bab16b6f08e99cddad51a7d2792f74158a5', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'b3292fc8239935c80a9a79a40fb0ba9b35d9b1a8', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-next-table-expandable-row", { key: '4da1185ed6d6aeeb1ad244740ae114e4bff3b0c2' }, index.h("smoothly-next-table-cell", { key: '8528322300a26a62b1381e95d614b7c617d949c1' }, index.h("smoothly-display", { key: '94bd607ca4c4aec800635333396b39b950e6a1b6', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '6807df44be3d6e83ebb5c928eb5db4da030e3a46' }, index.h("smoothly-display", { key: '970f1b68b2ef381574b33a06c178cac4533b3207', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '31d9d9d6834575933e687321843d4b22678242c1', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'e045e9bf51456430913870368508a8a70f29d1c6' }, index.h("smoothly-next-table-cell", { key: '4983b58520683ab549cccc0470408c7ee8dfdac4' }, index.h("smoothly-display", { key: '77ddcdbe96427cdeb5cfb431677098996286fc66', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '66d7a8e78681c13c4a432b5c179d21eb805fcfa5' }, index.h("smoothly-display", { key: '9681b0155630c20699e8f60cab14590995ecbf85', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: 'dcebc1eae26a1df431c37888c1b178a8b5835171', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-next-table-row", { key: '8ab6d77de7ba4c370b613cd37973cf32c63a2fe1' }, index.h("smoothly-next-table-cell", { key: 'f7f97fdb8575c6c228ff7b69b25eb04804419aaf' }, index.h("smoothly-display", { key: '05b64870e9627282ad70a4468e9beb6c801c5e00', type: "date", value: "2024-01-02" })), index.h("smoothly-next-table-cell", { key: 'd250135f24aef08c3e47faa91b689aaa2366ab52' }, index.h("smoothly-display", { key: 'f33157d2baa055d7743056aff9317513ccdc8220', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-next-table-row-group", { key: 'f910a84a56f9bbe37b3c0f60c6c43d975264a94b' }, index.h("smoothly-display", { key: 'f0c48bfdc43b9110709873bbcb26f51a624dde69', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: 'a5c0ef46eaf2a43036f76fd760771d9fd1cd017b', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '7f395cace31de1b724343fe844671d39bcfe7100' }, index.h("smoothly-next-table-cell", { key: '031dad75837fea9eadb6f55c04ee7a8427b729e4' }, index.h("smoothly-display", { key: '997597ca90158928d9ba083df820de615e6caaa1', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '77ba67fee0722f0269a9a4d9df446d848fa80612' }, index.h("smoothly-display", { key: '428e4c872fcef45b5be7c7f8b21a8a0cdfc7332d', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '6acfa153963808dc423420a79e0b8662f32f8e76', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '9de5150850e3959d3d1eccfb45dec6d9dafab67f' }, index.h("smoothly-next-table-cell", { key: '88b2117ca1757b7536f4fd6b2f300818a532f280' }, index.h("smoothly-display", { key: '10378122a94db398876c567eca9c3756d0e9f2f8', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'c35393619db55ef449f5dbac6cd0b79c34830c8f' }, index.h("smoothly-display", { key: '375607ab0150e5ca90729a8de1cecc2a3ba76940', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '87e99779c48eb2c79dd1d96970503a786cbbfe02', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '55a7acb478c7f913a095c378bfa028efc97c7ba6' }, index.h("smoothly-display", { key: '7bc624a662c22963cf05c8ebe63f5b73bc00e0d9', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-next-table-expandable-row", { key: '4bfcc227053fcace5b2be9e56cd0ca15b2be7e4b' }, index.h("smoothly-next-table-cell", { key: '252f60c3499637c752efd2a757fa92383d6275a7' }, index.h("smoothly-display", { key: '02b3711b8657784db8e0adad430bdf651cfaf7d4', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'fb762e2e9773b4849473f3272a18aa3f1b050928' }, index.h("smoothly-display", { key: '5a24224bc0266407dbf638be179982b3e7277924', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '473ac7b3580a2c9f9f4f472c0a501ea6fbd1da08', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: 'ff28c90c72b1886137c33c1add32d1b9acba5f83' }, index.h("smoothly-next-table-cell", { key: '2383aacd8aeb2b605ec745afd88cf7deeafe2d00' }, index.h("smoothly-display", { key: 'cb00e1ffe58a891d3dc712ab0435139a8d68a34e', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: 'e47f9b2dd571560a01d6091cd79094ba667c7a2a' }, index.h("smoothly-display", { key: '8e3db6f1188e36929c2802870b070841dee5e23a', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'ab8c19cb12f8900bea0a9c46b87b864ede936899', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-next-table-row-group", { key: '6cd00dd812d0f82699f8bcda7dee3d0fa080004a' }, index.h("smoothly-display", { key: '727543f354ee7a21e9defda1a504e6b343480c9c', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-next-table-expandable-row", { key: '425330ca6f675fee34e211df5c4b24e7c39e7447' }, index.h("smoothly-next-table-cell", { key: 'f55d9c74a5e680954161a8e633c6160a60e553ba' }, index.h("smoothly-display", { key: '28771e24150aeb11dc307335659006c526d85883', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '90664074835a3145b5699d523394405bf8ceca63' }, index.h("smoothly-display", { key: '7e58413cc7a888d80b5fb60f16ba72012944cd1d', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'f4d0acd1e334dff5d198988b98bf56366b31e3c8', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-next-table-expandable-row", { key: '2a8a33ca1041f7ea59e8cea9f3381203cd6c649a' }, index.h("smoothly-next-table-cell", { key: '7def851268de34727cbf1050eb29022fa9831596' }, index.h("smoothly-display", { key: '386810deff7533dbdc6173360447bd4cdd49cf65', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-next-table-cell", { key: '0b17f0357aac361ca84e5fc78e77791af8b21477' }, index.h("smoothly-display", { key: '92b2789b15e53c2fbbe6b9550ba95ff09d9f50fc', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '22ce6ebdabcea8930ccecc5b7e8bd8e1eaa47330', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '0d3f2ac1c2d3eefcf399c6c7e3d1be65cf317525' }, index.h("smoothly-next-table-row-group", { key: 'a6ef9378a516f6c9f8662e4c3fd539d90225586d' }, index.h("smoothly-display", { key: '27b04293285e3bdd9e7bec4ce7006ff0fe5e90d4', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: 'feff39102a068b6c209947f46827b7464cd9558c', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '00fdf54831bcd510a7dd7e5742e87127abfd87d7' }, index.h("smoothly-next-table-row", { key: 'd236c164ad40ab711c434f45d430bfcd17910422' }, index.h("fake-cell-wrapper", { key: 'ebd97777756a84ba2dbb8c02e148dbf271b76f8d' }, index.h("smoothly-next-table-cell", { key: 'dc1eeea0e74738e9895553412591a9868c32d984' }, index.h("smoothly-display", { key: '150242e600bfaf439d5a0d57c859775b80c72b9a', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: '5bfef93882e46e0806337d708ba40c70e7f3e31e' }, index.h("smoothly-next-table-expandable-cell", { key: '134e1896615ba14788dcad290e33e10ffc2cc84f' }, index.h("smoothly-display", { key: 'f2cb03e7e090e40d1993c933478e80947704de40', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '3e73fe40dcfaa66a748f06909f8368bd3369f64a', 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: 'ca07ee03727ad559b85221a0764f42a0418702dd' }, index.h("smoothly-next-table-expandable-row", { key: '9f0b352a39eed47605ec7220f12bb8c036b8c1d2' }, index.h("fake-cell-wrapper", { key: '8eef72fbfd43479615dc2184004f60966a6a616c', class: "span-2" }, index.h("smoothly-next-table-cell", { key: '7c05580575581ee6731dc97d7b350393b365902f', span: 2 }, index.h("smoothly-display", { key: 'fe07967733c56797138478053c681de16a8496ba', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: 'c0aba3f36157086048d07caba2c3803d3b965fbd', 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: '6e42af1cb65b57a7a12ecc9a4a924367caa08292' }, index.h("smoothly-display", { key: 'd8aa5f5d85a26e86edf039493ec3ca9e773334b4', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '21bb517454dd43739e682f00fe4728bc8ebe493e', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyNextDemoGroup.style = SmoothlyNextDemoGroupStyle0;
@@ -11761,7 +11757,7 @@ const SmoothlyNextDemoNested = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '8f37f27812cb85a6ecf9f4d7ed9ba50b239148c5' }, index.h("smoothly-display", { key: '68937abfc9bf9b22a85fd9f51239eeaf21a12ca0', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: '3242706eaf0211a0c5fadf690b78b9e790f59a68', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: '29022d74a2afaf919b87619d041e79b06f49a230' }, index.h("smoothly-next-table-row", { key: 'b0e5131b451861c7b1d1f2cddddf0e00c70bf305' }, index.h("smoothly-next-table-cell", { key: 'cf07517ba2e94d5a85e8bdd828387fa28701f8a4' }, "Id"), index.h("smoothly-next-table-cell", { key: '65546bca0dc6a27793c1fb8f2c3d327cbd3023f9' }, "Registered"), index.h("smoothly-next-table-cell", { key: '5cbe9bdaa27b51f9c37d66e88860acd4e89b5574' }, "Name"), index.h("smoothly-next-table-cell", { key: '9a324e4a363bb2494f178aac4de5c4f2b34cc081' }, "Age"), index.h("smoothly-next-table-cell", { key: 'f484b7f22660f6e4c30d11b6e363f474b6e52814' }, "Balance"), index.h("smoothly-next-table-cell", { key: '31537ecf8802ba4accaefcd3eeb5fbbe951f9efb' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: '53b71f0c209bc5f2b6eb33684f4e5992cdd68795' }, "Gender"), index.h("smoothly-next-table-cell", { key: '3f9c00e7618772f120d8e0bb2186171c5684b863' }, "Company"))), index.h("smoothly-next-table-body", { key: 'ad27fa7372647b96dc52dc8230d7fb9e4971fdf2' }, 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: '1f61dea24f10b2c10689f23bccdda0a29c3561bc' }, index.h("smoothly-next-table-row", { key: 'bc025e98f221343b77746309d7b4d7212e7bcce0' }, index.h("smoothly-next-table-cell", { key: '2f439da41d155b44c576516d139c59c15ddc66c3' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'bef37be02cd579395a25dcc31a04d2c04a5691f3' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '6c1222c532752e787cd37262f5e2a3104736f3f6' }, index.h("smoothly-display", { key: '99db4a77045305809c42acbda3518d6f9fcf29ac', type: "text", value: "Nested" }), index.h("smoothly-next-table", { key: 'f8221579dea4fc16f7c237f8e6df49d80c5b9080', color: "primary", columns: 8 }, index.h("smoothly-next-table-head", { key: '5e84c94ed2cef94cf823fa26290b696f5ce7b9f5' }, index.h("smoothly-next-table-row", { key: '7898fbcc36629738a6b9be5dfe7fd41bb041cbea' }, index.h("smoothly-next-table-cell", { key: '1f54bde1b99783652f91a0e9858ca71ed8476d7e' }, "Id"), index.h("smoothly-next-table-cell", { key: '2de42f3b99e2a150f1816dc393f83484aa56eead' }, "Registered"), index.h("smoothly-next-table-cell", { key: 'f3c1ba49ec8b9faca13f99c6125b0f10d602b48c' }, "Name"), index.h("smoothly-next-table-cell", { key: '79d1963ea0c335b2472bd0a823012fac8c3a2350' }, "Age"), index.h("smoothly-next-table-cell", { key: 'b71a2bd651d3ea73622c1a82ef5a9d237e491d35' }, "Balance"), index.h("smoothly-next-table-cell", { key: '026529065c4235a92162d6c397a96a3859dfdf85' }, "EyeColor"), index.h("smoothly-next-table-cell", { key: '5500c05e0bdea447c8c2e1b5b4e667636ccb75f2' }, "Gender"), index.h("smoothly-next-table-cell", { key: '398d770ac9ecc0e3721a08cc71556f2e5053ed3e' }, "Company"))), index.h("smoothly-next-table-body", { key: '21c834388c4e2bfa2b5dba008c827090654f3b8a' }, 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: '1d8b161dcbcc857d56fdd15314765b7c15125006' }, index.h("smoothly-next-table-row", { key: '987d5cbe2607ab9552a04d4188559aca7f2dad63' }, index.h("smoothly-next-table-cell", { key: '7a091d951cb4d83c069438fe3698bb884ff04d63' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'c202d01be30a7c40bd66c970531b407145e987b9' }, "Footer Cell"))))));
     }
 };
 SmoothlyNextDemoNested.style = SmoothlyNextDemoNestedStyle0;
@@ -11776,7 +11772,7 @@ const SmoothlyNextDemoNestedInner = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'b96533afe403464afe1eed879646a05954aaf292' }, index.h("smoothly-next-table", { key: '74cb50c9cf59ddd35996c830d3398bb224590971', columns: 4 }, index.h("smoothly-next-table-head", { key: '61c20b2b8359465e5036db5a815268f99282c32d' }, index.h("smoothly-next-table-row", { key: '3a3fc573c3d87ad67fdebfa586e037ebd9373167' }, index.h("smoothly-next-table-cell", { key: 'ea3fc32addd0cf37a51648c350e5012d8648b898' }, "Id"), index.h("smoothly-next-table-cell", { key: 'ef6e3a42cb3c380a6dc4540ad7b369821f476cbd' }, "Name"), index.h("smoothly-next-table-cell", { key: '45cf5bc5a85c081bd1952acafff5bf8289556355' }, "Age"), index.h("smoothly-next-table-cell", { key: '9e57058db0cf95f0d3feb54cf73d9c93fc460ad2' }, "Balance"))), index.h("smoothly-next-table-body", { key: '9f8415905b5eadf8806ef503b4a9f9d54928411f' }, (_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: '7bdbe0cca1ca5e3bc02c428cf321293fb80c56da' }, index.h("smoothly-next-table", { key: '84af30b3b2962c7e5e6089483127f5091abd571b', columns: 4 }, index.h("smoothly-next-table-head", { key: '947db2198e62e3b7aaa910a69a4b30ea93aa02e3' }, index.h("smoothly-next-table-row", { key: 'dcc1094650ea6c5d7dd255cc683d9291cb7caade' }, index.h("smoothly-next-table-cell", { key: 'eccf443f03590455dbbc39d8d7a28cd888e6f5db' }, "Id"), index.h("smoothly-next-table-cell", { key: '4642970e8221f135966ca358d13adcdf973752be' }, "Name"), index.h("smoothly-next-table-cell", { key: 'fe4d34b15cf4330dcbe8af0cbd9a1c1848ec4264' }, "Age"), index.h("smoothly-next-table-cell", { key: '5577e7e729c955e8e7ea6f33cc062104e0a396be' }, "Balance"))), index.h("smoothly-next-table-body", { key: 'd8fa4f3533483a13c79cd8a9ee49a12fe4927339' }, (_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))))))));
     }
 };
 SmoothlyNextDemoNestedInner.style = SmoothlyNextDemoNestedInnerStyle0;
@@ -11789,7 +11785,7 @@ const SmoothlyNextDemoSimple = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b208684b3e42afd9e7c33733c5ada19bb823f2d6' }, index.h("smoothly-display", { key: '1c506825525ab9058797c4d43f83ddbb3707ea83', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: '1ac990600294a5af42e85a7c5015cf187250f046', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '1551dbee3b8b36d7d960d7bdd04ca49a1eb4ae6c' }, index.h("smoothly-next-table-row", { key: '783292c349b6cb3446ca75ad98025451085d5bd6' }, index.h("smoothly-next-table-cell", { key: 'e6c38954adcadbc92cc0d8f7a8afdc0279ec7c93' }, "Breed"), index.h("smoothly-next-table-cell", { key: 'ae4dbe133ad85732b3367cf87ce8f483eecec94d' }, "Coat"))), index.h("smoothly-next-table-body", { key: '855910c63834dd6de4c41150998785a00c6e51a6' }, 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: '217ef2db0f9efb597003e2b0b15cb7bf9b79acee' }, index.h("div", { key: '08070e42588aaed1c9f6547b6c3d0f7f8c1e899e', slot: "detail" }, "Content", index.h("br", { key: 'c546c3b04c14ee02374f6efd571becf0d5852fcc' }), "of", index.h("br", { key: '3c1c2efb30c664c95906795f9c29e9fab85403c8' }), "the", index.h("br", { key: 'fe62197087a9deaf6e9a83800948e25556272fb4' }), "expandable", index.h("br", { key: 'c40015fc86a7d6b446ddca64773198c94e6a6cab' }), "row"), index.h("smoothly-next-table-cell", { key: '86a378b93d1b9f5ef2efff15f9c8222c991195a0' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: 'abcd906ebf252d2818fc61ecabc5c96f33d93c63' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: 'dae677b0e06b5d3afb1cbf8f1edb51b29bad5101' }, index.h("smoothly-next-table-cell", { key: '83e8a54254ddf60164ae9146ff17c9e931742a24' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: 'ed6ea305ff0a88e56c26c46b2e3e5e30c6de07f5' }, "Expandable Cell", index.h("div", { key: '037d10cd323819b325e0b1cc15dc44b5c10a6cfb', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: '3b79ae045968ca70695b241d0e0c75e646be341b' }, index.h("smoothly-next-table-expandable-cell", { key: '939fb4cf1b114ddb60cf7c0ff6b0bd2460a0fef1' }, "Expandable Cell 1", index.h("div", { key: '53384ff42394ce9fd36015797ff62c99ab690253', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: '2326c51f5e7077ee4fe8a8ee28eead996a3c8ff5' }, "Expandable Cell 2", index.h("div", { key: '849d9fb31ca27cd92a9ebe025f1b8dd02588806e', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: '96341e258d79b1bdffc61ec3ef23843cd620bbd3' }, index.h("smoothly-next-table-row", { key: '0e25ff8e24f495b9e9f09bfff2f83cdac4a75cc4' }, index.h("smoothly-next-table-cell", { key: 'bd1402ad5b7eb7b72435ef0953b83c86d549a626' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: '79f46f1066befd87b9621ee60d37373a6021111d' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '59015a7d8f31b47fdc9e54c3d41a159e15050ff4' }, index.h("smoothly-display", { key: '356ff9628989b5a9db02fcabdc7627c05e7c0cc9', type: "text", value: "Simple" }), index.h("smoothly-next-table", { key: 'cce03a1804b87c9d3bca09b67dc733d3d7106b15', color: "primary", columns: 2 }, index.h("smoothly-next-table-head", { key: '218c5f1840f70c925598042e2ffa84915b659081' }, index.h("smoothly-next-table-row", { key: '6a5de8ed9929fa3e5acfd8e3593157f428ff9168' }, index.h("smoothly-next-table-cell", { key: '2d5d08afe81d55ecb77452517f1c508c8e3b35ae' }, "Breed"), index.h("smoothly-next-table-cell", { key: 'c88d3218e43fd87d9000d11b392179dfb2b1a4d5' }, "Coat"))), index.h("smoothly-next-table-body", { key: 'd0720583d042a7a5cc90e3a2e3b678698525465b' }, 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: '040d2d963a123a6629a1f199c36fa65049a4cde0' }, index.h("div", { key: '74cdf556a394fe8b02de80a1b1471cdb9e81a139', slot: "detail" }, "Content", index.h("br", { key: 'fe8260d11dcf91d87d95926c756f865187492de3' }), "of", index.h("br", { key: 'd23940cb8a1307804b4b9e99da6574a53bcd62de' }), "the", index.h("br", { key: 'f786bae91e426aade013334a9c18ddc15be8ffef' }), "expandable", index.h("br", { key: 'dec8f6de1a5d9b71187a29131825aedd81ffec9f' }), "row"), index.h("smoothly-next-table-cell", { key: 'e83c7094afaca4202aee0171606376ebbd90ddfe' }, "Cell1 in expandable row"), index.h("smoothly-next-table-cell", { key: '6e5cc8b1448f9c94edf290cd0e11067913a8a954' }, "Cell2 in expandable row")), index.h("smoothly-next-table-row", { key: 'dffeed613a144726a85414e155aede48fb9dee4b' }, index.h("smoothly-next-table-cell", { key: '39e5871308ec66b3fe0f5582e17667f8588c9bab' }, "Cell5"), index.h("smoothly-next-table-expandable-cell", { key: '9a827243c22d79b2ccc3f9c991ffb1a4f2c1cef7' }, "Expandable Cell", index.h("div", { key: 'a50b192489b8b95f1b3abb2527504bddcd092644', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-next-table-row", { key: 'd4578dd07bcbb1e8be7b70c16b335c7529d0717c' }, index.h("smoothly-next-table-expandable-cell", { key: 'de121b6ca32417b9684a2a029432e694e40c297c' }, "Expandable Cell 1", index.h("div", { key: '9ee0a0cf837897f105aee5a567770db350d8c5b4', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-next-table-expandable-cell", { key: '0c703c8644a6507fd3a920762135ae27faaf8b32' }, "Expandable Cell 2", index.h("div", { key: '1a8e339334ea5232ab93e052915f4fcd7aa1cbb1', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-next-table-foot", { key: '99047da3ea93cc79f146c5de7c8739737041886c' }, index.h("smoothly-next-table-row", { key: '267cec599982bc2e8b29d3146f8606a235b2f76e' }, index.h("smoothly-next-table-cell", { key: 'b976d2b65e40beab63bf1b384cba726f50c72431' }, "Footer Cell"), index.h("smoothly-next-table-cell", { key: 'ebf45a1ff9a7808a10c02c2757e70784080cc52c' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -11878,7 +11874,7 @@ const SmoothlyNextTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: 'a5f6a264ccd04fd97ca3e6e741470940edf93e70', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '8b2ed2b53c7783f45ae0a20f1fbc09960d6a0a8b' })));
+        return (index.h(index.Host, { key: '6804dbace6376e8c54b713a5fec8c5d56992f775', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '4841f6c01636a504f75000475e74755eefda9000' })));
     }
 };
 SmoothlyNextTable.style = SmoothlyNextTableStyle0;
@@ -11891,7 +11887,7 @@ const SmoothlyNextTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a00a51d1361e9156066c4edc40f549a90e29c1a9' }, index.h("slot", { key: '576a3efee9e369842cca6742b5d3278e6e90e82a' })));
+        return (index.h(index.Host, { key: '5d0983155cbff68854670d5bd8fa1848bbcb6259' }, index.h("slot", { key: 'f6911755301325986613180423d9e4033cde1e30' })));
     }
 };
 SmoothlyNextTableBody.style = SmoothlyNextTableBodyStyle0;
@@ -11906,7 +11902,7 @@ const SmoothlyNextTableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '44302155e3e30ec4d8661d548fe6747a42091cb5', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '968dbfd72741e01a07761901f43a5b4bb69c31bf' })));
+        return (index.h(index.Host, { key: 'dee99fbdbbdf1645ff4bbb973530cef4d37ac172', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '4a298f6d7707982e572e1e997cee76123b297738' })));
     }
 };
 SmoothlyNextTableCell.style = SmoothlyNextTableCellStyle0;
@@ -11978,18 +11974,18 @@ const TableDemoFiltered$1 = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: '093286a7f844e0e795e261cd55e394296da37cdc' }, index.h("smoothly-display", { key: 'fb2b537a9a45c00591f3b45e99481e390616423f', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '5415e17f1b89938cd8305e1bfe610e2b97b03de0' }, index.h("smoothly-filter-toggle", { key: '04b6714e0fd3f3d2a5a01c457e51a324da089af7', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'e0b1d37883eb62fbd406aebbb3d64b37d0370499', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '4a8bd053e4003bcae50230f6584c090c06ca9d2e', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '7bacf494c6aee34515dea81b1b5dfd57d8bf2a17', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'cda9abcdd8adf77d79364632bc6aaac33062d980', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '4caa8a680f0e80d982ce5d3cd7c1455c14d7cdd0' }, index.h("smoothly-display", { key: '04990c9f111ce14eb58d34f1970f28a5812a3158', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '592475cbddd1b25ae03992d3f5456d81286872cb' }, index.h("smoothly-filter-toggle", { key: '913b3980eeebbcaed87afaa1b3c833e62bdc1ba4', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '7a15e6a0b61269a4d88a834c6ce3ca8dbf957bfc', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'e22c428860e4209809ed32c6f0654051940cbbe4', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'c1e437d8d761234ffca6d129f8d35ebfc6c78403', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '5009681434e452ab2d04a65305e2a89cc2333c08', 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: 'b438d2f67bc46a2f1aeb11cfe8caaa9206a73804', slot: "detail" }, index.h("smoothly-form", { key: '007d780885e1421e9902969fdcf3271fb0167432', looks: "border" }, index.h("smoothly-filter-select", { key: 'd9f1c8e400ec8c1299c78afa1d26cbd462895a64', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '4197f4917f6631ab8c4ba95125d15bf4a693a14c', slot: "detail" }, index.h("smoothly-form", { key: 'ff0fbf3151867a27e4f0ad3e4d7590dbd55d7c07', looks: "border" }, index.h("smoothly-filter-select", { key: '104489be5d7c20a052c0e3606e7c0206f7eca51e', 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: '6d60d144cb44633fd913bb56eaa5fc15ebd8d12e', 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: '84d021709e5d55ca7d00bb81b487a02c09068797', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names$1)
+            })), index.h("smoothly-filter-select", { key: 'b43045e1ead447970dbee1d624d2fa9dfa7f0802', 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: '36635c2b16f5fc746f0ecf8eba451961d2ed8c4e', 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: '85bb47145d4a312eff7966be03c3752c9e83116d', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '66d9861b1b514a7b56bb9e804f120d0ab2c1c0cb', 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 : "?"}` }))))))));
+            .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: '129e906f704b829c31e0b27d6c448e7d7c7b51ef', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'bb9a705e15a9e87426c76e762a253ec87988891b', 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 : "?"}` }))))))));
     }
 };
 const names$1 = {
@@ -12025,7 +12021,7 @@ const SmoothlyNextTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '119289a907bb003ceb4f46fc874373f8b7f4942e', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: '515257705785b023ca4a41bbc74797747d508c0c', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: 'e46be80340a4c68b082866d02ece4eafc4a78ea1' })), index.h("div", { key: '6475b16fd7cc13ab39596b49110a2caa821d7a91', class: "detail" }, index.h("slot", { key: 'bdfd0bc8b7219f931ae913a279a529fcad11e96f', name: "detail" }))));
+        return (index.h(index.Host, { key: '15852d3a176598468ef2c6c0dccaa165e5e88fde', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("div", { key: 'c43083d50752290cd162ce62f80959be1cbdc794', onClick: () => this.clickHandler(), class: "content" }, index.h("slot", { key: '011689646169da8430d7c9823f0ff5d3fcbae938' })), index.h("div", { key: '4e2e3aa1e0c2e5b00bf484a273e07a3500f59062', class: "detail" }, index.h("slot", { key: 'b711aee82b0b9f46095320fdb7dd6cb287237e48', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12049,7 +12045,7 @@ const SmoothlyNextTableExpandableRow = class {
         this.smoothlyNextTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: 'afccc86c98a2d7e821d5728d290f7bb12e82e139', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '8ff3d3cede9388122b98aa8b814fcd9feceb3a20' }), index.h("div", { key: '1749fe7e69ce1af4035663a4967700705e4b813a', ref: e => (this.div = e) }, index.h("slot", { key: '1eb4e0197d61e292b6a64906c3ed06fc24c56d28', name: "detail" }))));
+        return (index.h(index.Host, { key: 'eaa01abedb8fc3a464646dc35eab0b32c138b95d', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '52c99d47bf141b049e1fe13745f5cdbb012babb0' }), index.h("div", { key: 'c31828a2c84e9cd0c02ff8279349805490e14d10', ref: e => (this.div = e) }, index.h("slot", { key: 'c9d8c7486da475a0155dba7c177c7ec0d15e31c8', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12065,7 +12061,7 @@ const SmoothlyNextTableFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e406505551c283675e8d66a9926a05c72425e9c2' }, index.h("slot", { key: '07592151cec5a40a1865cac7a43df4af97d3f2f3' })));
+        return (index.h(index.Host, { key: '9ecc131c68b9365e2b5f156e734a51b6b936753c' }, index.h("slot", { key: 'afb9f1c59bb8c9a95f870bc8f3b78637587a34c2' })));
     }
 };
 SmoothlyNextTableFoot.style = SmoothlyNextTableFootStyle0;
@@ -12096,7 +12092,7 @@ const SmoothlyNextTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (index.h(index.Host, { key: '0033553e2d592dec3e088ceac1c840dca4f67671', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '4907255ee9e86e93f5fb064edad72811efeada95' })));
+        return (index.h(index.Host, { key: 'e3274eee4c77d1df9b5571e84acd9bfcaaef4521', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '6f14748501de2c7508dc6820f4732986871b83d5' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -12120,7 +12116,7 @@ const SmoothlyNextTableRow = class {
                 event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: '3322e029e371bfaeca10ed2c2801741019148106' }, index.h("slot", { key: '68697027cfe344b18e613c5bb9603a06c6bf94eb' })));
+        return (index.h(index.Host, { key: 'aa9d04e6fbf7f3cfa4c19cdb99de6b5bf11f33cd' }, index.h("slot", { key: 'c128bf893c44a6f9e5c37d89549fd46e1e878939' })));
     }
 };
 SmoothlyNextTableRow.style = SmoothlyNextTableRowStyle0;
@@ -12140,7 +12136,7 @@ const SmoothlyNextTableRowGroup = class {
         this.smoothlyNextTableRowGroupChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: 'f01b3bb5d0726aeb6c70a2f8cb0f9c2a2d7e9215' }, index.h("div", { key: 'b598b867ea4a628de3c160a34ddb5f2487dec4a4', onClick: () => this.clickHandler() }, index.h("div", { key: 'b3da70637c310ec6164d9175e1f29a1f9eb96f46' }, index.h("slot", { key: 'b68fcbe98438160ce8cc6df33191f59e2f4559c9', name: "start" })), index.h("div", { key: '2a0788acc0b371b9b1405abaf5268483cab6fa98' }, index.h("slot", { key: 'efea8ad87c0a6121ae7f0c68ca11be5d590cdb3a', name: "end" }))), index.h("div", { key: '9756f7ef4c370782243dae3588a62086d4cb2a3b' }, index.h("slot", { key: '0a940bae1a64c65b8de743de2ee129648f9e2b3a' }))));
+        return (index.h(index.Host, { key: 'ea9a77b41bbe77c69bab7c6549147e66a6299ad7' }, index.h("div", { key: '994fd56ae6a24b9efb2411ae63c3cc83a748e545', onClick: () => this.clickHandler() }, index.h("div", { key: '3088403d02d58569095097ae6fd4ab05f1d3f864' }, index.h("slot", { key: 'e498a86313fdeaecfff044dad8fe2ae5ee52bba0', name: "start" })), index.h("div", { key: 'd33dfe21b41ec7ad5a9ee932a0d48ea6450c6f1a' }, index.h("slot", { key: '6fea222cee6095820e2810037312ab9cbab16ed2', name: "end" }))), index.h("div", { key: 'bbdd744d6eec83f26ec49dc216e8513f525326af' }, index.h("slot", { key: '8ae8d5603ada93c11e0bcbc2248d3ea1b6af6dbe' }))));
     }
 };
 SmoothlyNextTableRowGroup.style = SmoothlyNextTableRowGroupStyle0;
@@ -12200,7 +12196,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index.h(index.Host, { key: 'ef7444aeed0fb27214092c86d9eb4ee70bd9c056', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '6a0520c327adbca9f8248af010e69ad5e01b27db', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'c40f4c8e7664bd4686e846ff49ed1a5b33e42f4a', name: "close-circle-outline" }))), index.h("span", { key: '633dac15017f6f5ae1b6ff7712f084d94a4fc9ca', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: 'bc315885ce88801035ce3c98a601154c76e546fe', name: this.properties[1] }), index.h("p", { key: 'e0b831cac3419fe66aff5604735d59a3f9cadeec' }, this.notice.message))));
+        return (index.h(index.Host, { key: '46c1dad38c0ca382bde65ec5fcee0bdea0acc7c0', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '3261e54288a7fa48609fe3a9749488dd394ecfbd', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '1d86d2da4cf00285162c46dc14dbd7d343c95a66', name: "close-circle-outline" }))), index.h("span", { key: '012526a4ef0b30903c2f94ce7efc8af84e796325', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: 'c2850f12703931a875a89ec5b836f24107ce7236', name: this.properties[1] }), index.h("p", { key: 'e224c645d1ed9369cd3bfd83040694477dfa97dc' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -12225,8 +12221,8 @@ const Notifier = class {
     }
     render() {
         return [
-            index.h("slot", { key: '0c886bce3ce16e3c46cdea40a61c93b9a46871c7' }),
-            index.h("aside", { key: '9899942e988bc7588903ce92766e73f3b109e226' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
+            index.h("slot", { key: '2b7a3567c8c83551b88a806a4ae3679cb23d8e66' }),
+            index.h("aside", { key: '538be034d30c719df675f7e48ca83d78d5517697' }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon })))),
         ];
     }
 };
@@ -12243,9 +12239,9 @@ const SmoothlySpinner = class {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (index.h(index.Host, { key: '81ac798799ccbac9050d9cde6e2f6f40b711e19c', style: {
+        return (index.h(index.Host, { key: 'cdd6a5a7f32966d4a5dec1d28523a92aa418ae62', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index.h("svg", { key: '8342d4dd9c475ff67613a004deb112277cb75ab9', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'aeeb3244f7684524f15e9f300cfd1eaae0a3a704', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, index.h("svg", { key: '24845a030a852541482e632ce4512518b95e059e', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '74f68ac4ea13de901db5b2560f6d12fae14e1829', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = SmoothlySpinnerStyle0;
@@ -12278,7 +12274,7 @@ const SmoothlySubmit = class {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (index.h(Button, { key: '56f3a0f92fe9111ee513d7c1f2c30c1268f0b71d', disabled: this.disabled, type: this.type }, index.h("slot", { key: '5b90cb32ef640707f4c3354bbff7d3634ce3e4b1' })));
+        return (index.h(Button, { key: '7385202d1343f06c46271127857dc3abc869d155', disabled: this.disabled, type: this.type }, index.h("slot", { key: 'aa5e4eb43e752d9b68ee24246d449f6793241969' })));
     }
 };
 SmoothlySubmit.style = SmoothlySubmitStyle0;
@@ -12313,7 +12309,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (index.h("details", { key: '03423089bf7ee4b014c1fd3d99ad03416605834f', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'ba0c2d9f264a86aa51e733403d5c28ef2249e5b0' }, index.h("smoothly-icon", { key: '6e3806216cb99e05db15ab9c5228764e0b249c88', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '4ebdb4f665e4004806bcaafccb7dad453b502cb2', name: "summary" })), index.h("slot", { key: 'b4c7202fb177b351f4e2a4b2c2a0493a1929a98c', name: "content" })));
+        return (index.h("details", { key: '31afe4ad1883102e9a33c9887621d60457f84648', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'a0d4c0826dc9802c8cbf4fdde83e54dfd00356b8' }, index.h("smoothly-icon", { key: '7bc48d6671b5e4a45295f3f7f024803511eb824b', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '6103fc1ce41709d95ab39a4b8c248504680452e8', name: "summary" })), index.h("slot", { key: 'a4030c82d20ef785867456fdb219ea6279989f75', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
@@ -12355,7 +12351,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7332b276d0d33c8bf9af559d1445960ab4d19fb4' }, index.h("div", { key: '9c6d23ce48245e5205655d38e3f4e4935cb654ba' }, index.h("label", { key: '6ebc7f648d62a1a376c9db4f572b86166d8eb58a' }, this.label)), index.h("div", { key: '208a58f7334fd3d7084d218ae655fa7188895b44', hidden: !this.open }, index.h("slot", { key: 'bfd4cca2db0b802c604055c29b7a2f242e9c35d7' }))));
+        return (index.h(index.Host, { key: 'fb5fad2c8b54e4910a20c8464345cf5197927442' }, index.h("div", { key: '2bc025d58b544b5fc44336faa6c2cf8ce88586fc' }, index.h("label", { key: '886e2e89141e2a3fb0def77df64a94c7b4f1ad1e' }, this.label)), index.h("div", { key: '7e06df9aa1f628c8d154719c9c5f6fd287792254', hidden: !this.open }, index.h("slot", { key: 'f2d02a7e66f0e964979632eb39f6e3af831471b0' }))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -12406,7 +12402,7 @@ const Table = class {
         event.stopPropagation();
     }
     render() {
-        return [index.h("slot", { key: '789d1cca2e2e00a20f5d6b2ae79146b7b77e709d' })];
+        return [index.h("slot", { key: '48c6cd161d4cfc2210d795fc0a9eac3fd191bed5' })];
     }
     get element() { return index.getElement(this); }
 };
@@ -12420,7 +12416,7 @@ const TableCell = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ddbd2b60f52a554b80eb9731c3306862b9ea2caf' }, index.h("div", { key: '7c85f274db55e65d80fd8339885a514802414c96' }, index.h("div", { key: '9ba372931ea1b84c09d10eaf63ee388de1e93dce' }, index.h("slot", { key: '4ca7ea3f9c997261ed11eae003ba74d2e60b10de' })), index.h("smoothly-icon", { key: '9f960f2478bfc9698673fc66e07d5ed4265199d7', name: "caret-forward-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '6db54e2931b7274b42aa71c7ead9f06dfa7d84ba' }, index.h("div", { key: '01cb833fbf3ccbddad41080e3081a12fe3927732' }, index.h("div", { key: '9b052702295148fb99843df899634c2744b6fd54' }, index.h("slot", { key: 'd792d87f8310d874244a769823cb49c6fba69195' })), index.h("smoothly-icon", { key: '95ea28456dcd3c72ee9d8071fd8da7520b0c2632', name: "caret-forward-outline", size: "tiny" }))));
     }
 };
 TableCell.style = SmoothlyTableCellStyle0;
@@ -12433,7 +12429,7 @@ const TableDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4d75a6bbda2339457dcccfdb3e5359ac811fd8fd' }, index.h("h4", { key: '565706c04d24d783034c63f28e54c8218df4f3a9' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: '60822910e875796372b43352d9feff22bea153a0', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: '9df98423ebb70849e60266ef9848de29c34a97cf' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: 'ad72f0c9c28183f7c73b60fa3ea48c032fb359ef' }), " ", index.h("h4", { key: '2fd86e82d10d9c699cc7bae5f7df6f821c4e9c25' }, "Demo table 3"), index.h("smoothly-table", { key: 'ead1eb8dbe9841b274f1cfefc784f26f5415e701' }, index.h("smoothly-table-row", { key: '567dc7014c17e15b943254f0eaa3fc0f93588615' }, index.h("smoothly-table-header", { key: '849a1bc10f5a16495def8917374bc627de78af22' }, "Header A"), index.h("smoothly-table-header", { key: '85fd2363c202975cbb30219c9fa8b3d741e61cd0' }, "Header B"), index.h("smoothly-table-header", { key: '4ee53183f4b1a77b9c3bb2a5068958f3df27a13a' }, "Header C"), index.h("smoothly-table-header", { key: '9a9cb1d1b2cb8252183ad7c1c113e0cb2a20310f' }, "Header D")), index.h("smoothly-table-row", { key: 'a0cdab27e7ff0a686601f5b8c581deeaa443062f' }, index.h("smoothly-table-expandable-cell", { key: '2cfa5ebc1522d3916ba3c73d09846c4957b99757' }, "normal row (exp.cell)", index.h("div", { key: 'b17bdace713635e508ae5654a4e208ebe1a55852', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: '4937605b3367b71b402b2fea4b88a867758eb2ba' }, "expandable cell", index.h("div", { key: '139e10e87077f131e4f49afeece05464c566ab89', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: 'e3df2d67065cc7f2ac9d2e42f4b7e623bf656843' }, "expandable cell", index.h("div", { key: 'df6307b76691f3ca87db71413c4b39fd90ab619c', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: '1c7efc477a22cb66a4ffeb55cb514d74a17e34b8' }, "expandable cell", index.h("div", { key: '09fb1975534d5f00ddbc00404182fffcc487ff8e', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: '847fc395a1216c6d6239a5c6e31788378e41a06b' }, index.h("smoothly-table-cell", { key: '282f7cb4e3555c593d37df0af4835bf29d77b543' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: '0dec2f1ca7025caa7811b94e23504f366a915f25' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: '09425fc3be52c6a56e5dd5ecab75ec0a1c6563e4' }, "expandable cell", index.h("div", { key: 'ceae9f3be29b9f77e0980df2920ef46af49f9423', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: 'fa30c7d7323ce88e54ebeb36c2b7db498c5bfc91' }, "expandable cell", index.h("div", { key: '4fbb7089b92e9b6355a55d22256d4f26a7d26b1c', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: 'cf37d3d0ddde0774a036faab21bb2a1b161fd2cf' }, index.h("smoothly-table-cell", { key: 'd50d52a23419aae1e18decdd556ff01698798d9a' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: '68ec6b4925c74bccea4a300023adfad92b9ccc39' }, "Normal cell"), index.h("smoothly-table-cell", { key: 'c9fa755098e2f8866779b2173d35db01b91f081b' }, "normal cell"), index.h("smoothly-table-cell", { key: 'dc968923326834da3fdb84a4683b2aa83a7d14b9' }, "Normal cell"), index.h("div", { key: 'a4231e4f2a311ac13dfa1f0751153b0749fd768b', slot: "detail" }, "expandable row content"))), index.h("h4", { key: '6b9413fd4cfd0232722dab8c0086220d7de4f880' }, "Demo table 4"), index.h("smoothly-table", { key: 'b72c61724bf681b99b47cf47a7d518970bf29a3b' }, index.h("smoothly-table-row", { key: '48a4910318aa017c2e87e9251463966f31123d87' }, index.h("smoothly-table-header", { key: '74a418fd72e9ee42fed4037e9a1073fe9b994948' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: 'eb43429edca1e385aa9bf3d2beaf86468b9040a5' }, "Header expansion", index.h("div", { key: 'e145061d6954d44e117513b0e275188d567c06f9', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: '174e0e8eb8540f0b9eba2b951df65d106facf604' }, index.h("smoothly-table-cell", { key: 'e5a71ca565e5f44ac5ecedd633158b735f0fe7e1' }, "A Content"), index.h("smoothly-table-cell", { key: '2799cdc6d78c24d5008f21336113ff7f51712a13' }, "Expansion cell"), index.h("div", { key: '4b1187ba13c0c7c1dc9e80118408c998fa552ae0', slot: "detail" }, index.h("smoothly-tab-switch", { key: 'f24ccfc3d7dee3449bc7c6db18bf67e51cd6ff1c' }, index.h("smoothly-tab", { key: 'f2840215bb198bb199b6fdf360c4a099e224fce3', label: "innertable 1", open: true }, index.h("smoothly-table", { key: 'ea50a861ae9d3c4c72643b405a6ead37ba99d8dc' }, index.h("smoothly-table-row", { key: 'a59d3e923e070aeb4478a0702ca8a668fef93a9a' }, index.h("smoothly-table-header", { key: '647f389fa707c5473ec9ab0399349c097da9fd1d' }, "Header B")), index.h("smoothly-table-expandable-row", { key: 'f6b1043b654059073ff426e325136ffca64d4956' }, "B Content"))), index.h("smoothly-tab", { key: '340f0879addcfb073e3db13e5dd7bd0e3aaa4075', label: "innertable 2" }, index.h("smoothly-table", { key: '6dcfe34730e9fcdea008f146e7d5756e1a61f686' }, index.h("smoothly-table-row", { key: '8602b8b672ff2f8419e48f5342e3a34a28e51baf' }, index.h("smoothly-table-header", { key: '30dfdd6045bff2ca268bf18f6776c0b1902f5b5e' }, "Header C")), index.h("smoothly-table-expandable-row", { key: '1deef22f36a9453767ba0abf71b956ad04696c29' }, index.h("smoothly-table-cell", { key: 'f662c003f4d67288aeb388ab927182ba6c7864e6' }, "C Content"))))))), index.h("smoothly-table-row", { key: '16b38e84a416929a4f88ca071d544b0fe10b1a0d' }, index.h("smoothly-table-cell", { key: '387b2ef88275ed0c44b84858a01f97f3b0ccc8cb' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: '027279acb6ba0a6f5b80c4db72cab97dec09bc59' }, "Expandable cell", index.h("div", { key: '4e28f419d87501079e5934ddadf044a91db26c0c', slot: "detail" }, "Expansion content")))), index.h("h4", { key: 'b157a262703045efbabbf18d45a2ab865d5d117d' }, "Demo table 5"), index.h("smoothly-table", { key: 'b91df5c00f1096b79348a474804809556005b668' }, index.h("smoothly-table-row", { key: '9f44a30ab6fb6ac06650ac22a8763708f28cb95f' }, index.h("smoothly-table-header", { key: '088e7b725a4f35d405ba029c461e367b9dacabca' }, "A"), index.h("smoothly-table-header", { key: '02ba317d2ad1fce6f183d6706ce32a2169d1c2c9' }, "B")), index.h("smoothly-table-expandable-row", { key: '879ffd71485ba21e82b645daeb4788cbcc76c028' }, index.h("smoothly-table-cell", { key: 'e36ff9152ae876ec40d16cdc269b7a5f49ef09c1' }, "nested expandable row"), index.h("smoothly-table-cell", { key: 'f7a8822b65317d7f8e985338f38f47fbd3d2742f' }, "b row"), index.h("div", { key: '19c472d1663626ca4bf49ad73d2f81d574f5e13e', slot: "detail" }, index.h("smoothly-table", { key: '79ab194e1bef69e04621b77689951b8f1374b876' }, index.h("smoothly-table-row", { key: 'd4e4df6cd8d94f9c17ff6b4989726f0781132df0' }, index.h("smoothly-table-header", { key: '3e5358f360904a5300eef1dbdef304c5859824aa' }, "C"), index.h("smoothly-table-header", { key: '01a4187fc804759b43c1661484db0c34b1316f5f' }, "D")), index.h("smoothly-table-expandable-row", { key: 'ace0c19ee9ef7802efca61cbdce30e82d1b37741' }, index.h("smoothly-table-cell", { key: '02452b6171949863dcc262d6e3bcc33b17d8cc72' }, "c"), index.h("smoothly-table-cell", { key: '372f4f353b5afe4cc2fc16bc643b8a16e38fb8c5' }, "d"), index.h("div", { key: 'e32095b17716a819db416646e3f9c85b325a161e', slot: "detail" }, index.h("smoothly-table", { key: '80bf5968b5b6700067be7f9b31e5a8460fc068d9' }, index.h("smoothly-table-row", { key: '89afc84de5ebbcdf2f8a0cc396d3afc37ff79f61' }, index.h("smoothly-table-header", { key: '7681a5d6e758eec38a8afbf861d853f58641ca4e' }, "E"), index.h("smoothly-table-header", { key: '3fa1c073cace44d4a904a2355fc257f0eb3d636b' }, "F")), index.h("smoothly-table-expandable-row", { key: '4b6375d689b06ca9128f649885de0654f7982a7f' }, index.h("smoothly-table-cell", { key: '5b9a61dc4246954d460f53f051c0c2a0fdba0cb0' }, "e row"), index.h("smoothly-table-cell", { key: '05a02b0d9059bc4823e1b78fa96f790fbb083c15' }, "f row"), index.h("div", { key: '816b6a1e704b564c41644c6acbfef8b472a515a8', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: '5193e67450ab2ae63c87a149301a0dc66665e274' }, index.h("smoothly-table-cell", { key: 'cd68edfefe486b1a5ac65d6dfadc38768c4561d6' }, index.h("span", { key: '46b04030612537f57ddd6120b6fa29602971332b' }, "one"), index.h("span", { key: '1fc6d4c7cc7987396dc2b8783524cf735ff417e8' }, "two"), index.h("span", { key: 'e48250123ee9f5cafd954e29a6852ca366bcc786' }, "three")), index.h("smoothly-table-cell", { key: 'b078bbaeb5bc162b5bd239bd97768a2481b5d4d9' }, "five", index.h("smoothly-icon", { key: '8bdd45617561bc52f990d157904c2dbb2545fb6e', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: 'a9965cf11e02fcf743987f4c29e7b87df48d70ac', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: 'e3f52483f58e0b50b55504a65ceaaab887f595fc' }, index.h("smoothly-table-expandable-cell", { key: 'f6c1bb6602b8e52f960f2455e11fec00a53f48a3' }, index.h("span", { key: '57d652d10c30e8e2e2476a71d56f1fa845d7b8b3' }, "nested expandable cells"), index.h("div", { key: '55b4a2e151213f197c24ccd86336ad805839c89a', slot: "detail" }, index.h("smoothly-table", { key: 'cb9c535103f77df6ac615b6bfad7ba3a22ac7a13' }, index.h("smoothly-table-row", { key: 'ad81ccfcea8e06348e87fd804910c41f977341da' }, index.h("smoothly-table-header", { key: '5926bfeb6c1168450e99e373942cc4a96b8c2b06' }, "E"), index.h("smoothly-table-header", { key: '7bcf13500a7870fb343f1b2b2d2477a1bf60fe26' }, "F")), index.h("smoothly-table-row", { key: '2cf863787a43fe522cbeaaeac679fd37abd42f22' }, index.h("smoothly-table-expandable-cell", { key: '86efe2a1258e04deba4e5b88acba8fdb9e272a70' }, "e cell", index.h("div", { key: '64e96d3792939ec4d86269e6873c0825083523c6', slot: "detail" }, index.h("smoothly-table", { key: 'b972ea1324f4508d7a6882ccf9780bd9a1d943b6' }, index.h("smoothly-table-row", { key: '74735f09f56384da5a74b2434bf28a47d8183be5' }, index.h("smoothly-table-header", { key: 'bdb5b8d7fca758b570a4530c73ce2120559ea02f' }, "G"), index.h("smoothly-table-header", { key: '9330353a33d4106428243daca956d8d801264259' }, "H")), index.h("smoothly-table-row", { key: '106dd11ed14b739565dcf0f12b11b955d82f8f87' }, index.h("smoothly-table-expandable-cell", { key: '7607860201c9036188d69813b2e5ca7b286b95e9' }, "g cell", index.h("div", { key: 'c5a9fa9dd96f0e5b83035e49aed09493264c4a57', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: '795c298d223a63012486edfffcad1e62cf92fc1d' }, "h cell", index.h("div", { key: '7c66648d032ba2bc9385a67d6e18b81387fa1f6b', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: '4ebb724a71c53e83f5f524169194de7120e6693e' }, "f cell", index.h("div", { key: '14438cef2d3a28ea25f84175b7ff2c48b364a252', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: 'd6148997d2dddbef5fe0089767d865f8b46d2c32' }, "b cell", index.h("div", { key: '08ff0f926febf4df68b8fbaafb9a03a4065f40ec', slot: "detail" }, index.h("smoothly-table", { key: 'f5c9200e21a38a8f4260845d2e5ff5839d394885' }, index.h("smoothly-table-row", { key: '243fdc3cafe492df63fac1e75ed8e94e280a4273' }, index.h("smoothly-table-header", { key: 'fc149cdadf6ea763bd57dfdf73eae0fb0c04ff60' }, "C"), index.h("smoothly-table-header", { key: '4a84549ed920f1edd97308deaccaaca4e0bd4858' }, "D")), index.h("smoothly-table-row", { key: 'db4c5364ff1bbacde700ca35b96c658851462bac' }, index.h("smoothly-table-expandable-cell", { key: '1fd4f8987f70b6802a5df708d1d53a149739f240' }, "c cell", index.h("div", { key: '4655d25f2d3e5d26ddf7133ba0f6858d441453c4', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: 'df0733668bd098af635888a62a08eccfd4864554' }, "d cell", index.h("div", { key: 'd5ce1ae1235118767cd88c18342c74bd50d2e563', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: '78955bf3f6aa98b689849d2f8f986b119e5a0813' }, "Demo table 6"), index.h("smoothly-table", { key: 'b2e59918d985365b87dff9f00241af2279f27f41' }, index.h("smoothly-table-row", { key: 'c9225ee001bfb36906ea6d076b76ecefb3ce580f' }, index.h("smoothly-table-header", { key: '7d7c60855e8afc22607d32abd1778e99437a8069' }, "display"), index.h("smoothly-table-header", { key: '0a56ea94a5db7071038c0ac61175ed24e6cb7962' }, "contents")), index.h("smoothly-table-expandable-row", { key: '9a8332b23170188708c7a8546a0776bcf17c68f9' }, index.h("div", { key: '3a62af807ad1d34bd80b1d8c82013f869bda17fb', class: "content" }, index.h("smoothly-table-cell", { key: '41aa0fed8911f34f08e4b1f5126616eddb0efb5c' }, "A"), index.h("smoothly-table-cell", { key: '8b1454d6e64b2f34088deec5bfc76bdc1f81dc14' }, "B")), index.h("div", { key: '8523ca12289bbd501a269f7693715e3b33ce7c1d', slot: "detail" }, "expansion"))), index.h("h4", { key: '65baf660733eb3273aa1fc45c8400e7a9fe8a055' }, "Demo table 7"), " ", index.h("span", { key: '055a8441595bac3d7aed30efb7db55d0f749822b' }, "nested 1 then normal"), index.h("smoothly-table", { key: '7874ca1d5010352be7f8f10ea68016a541b5976f' }, index.h("smoothly-table-row", { key: '375ab7dbe17805ab0d8b448951ece6e4ab50eff1' }, index.h("smoothly-table-header", { key: '8914c7a64ef476075e75a616d917d123b552ba11' }, "A"), index.h("smoothly-table-header", { key: '0826d6e33e00e8a02523a39dda6c3d97a53acd01' }, "B")), index.h("smoothly-table-expandable-row", { key: '17bd4571f1dd0493ecb66dd644cd17cacca04b2a' }, index.h("smoothly-table-cell", { key: '8ffbb19e69b87e738e394d2a69e94d5864c978ab' }, "a"), index.h("smoothly-table-cell", { key: '111baa59e84b8ad619b9b097bddecadaa221bdb8' }, "b"), index.h("div", { key: '60ef6c239a698e2564ddc253911881a387eea519', slot: "detail" }, index.h("smoothly-table", { key: 'fe098287c9800264ecb789607ef38edfc4918c84' }, index.h("smoothly-table-row", { key: 'cf503bc0464f7f2ac3583a75ebcc0c638f5aa86d' }, index.h("smoothly-table-header", { key: '38217c3c06fc803dda2a32e9b558bf25791aa568' }, "C"), index.h("smoothly-table-header", { key: 'e6db1eca207221b55aed373c68d9d4f35c1b555a' }, "D")), index.h("smoothly-table-row", { key: '46d4575bcb85e32f6992edf44f8718573d2e62c2' }, index.h("smoothly-table-cell", { key: '4d00d9ae3e0e15147ce3b697e82f39cf06688e3d' }, "c"), index.h("smoothly-table-cell", { key: 'efd070f1822b059cb0284eb40ae09fa85ce02b5c' }, "d")), index.h("smoothly-table-row", { key: '0df1266570321720b48cc136d3471880dd483968' }, index.h("smoothly-table-cell", { key: 'baf6166809e44f708b7452ff0939cce4db0f998e' }, "ccc"), index.h("smoothly-table-cell", { key: '800f5c0f8d13c89d8cfa1d867f49e0ddb7f45603' }, "ddd")), index.h("smoothly-table-expandable-row", { key: 'ac83767933ef61081b3c28abacf30cd7346e0917' }, index.h("smoothly-table-cell", { key: 'f54da1c32cec055852402ce50e5507f63901a63f' }, "cccc"), index.h("smoothly-table-cell", { key: 'e9598a3d6e95c2489684a1e0aaf753bd8b320894' }, "dddd"), index.h("div", { key: 'd09cc1d8f0785d86c2ff17679ef9fc370762ba89', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: 'd50df933a3a1a6a5b10be2191578ed5d879acee8' }, index.h("smoothly-table-cell", { key: '169f3e4a94bbae4f9b575af802d602b854389032' }, "ccccc"), index.h("smoothly-table-cell", { key: '713b6741813970dfa9f36ac6b61e01f3daed0a24' }, "ddd")), index.h("smoothly-table-expandable-row", { key: 'e9c26b2d16666ec6fbde1cf50c248ffa6d7fa418' }, index.h("smoothly-table-cell", { key: 'e335e1560b40f7085edf255b9c636a17a4a034c9' }, "cccc"), index.h("smoothly-table-cell", { key: 'b8426a925ddbfb192ff3df0c3659e9a3b50f0bf6' }, "dddd"), index.h("div", { key: 'e181097e31f64856395c61c9499e605444d0e034', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: 'a28acb2c3a30dfd4d469557ab5ae325b7198a607' }, "Demo table 8"), " ", index.h("span", { key: '56bfbd9cb3a897ccf6cfd42a614c3e937223b43f' }, "not nested"), index.h("smoothly-table", { key: 'fda13210a7e5ea36a33e0f44b12b25905e302808' }, index.h("smoothly-table-row", { key: '63e9610a78dfbc329c9bc26d4e416998d7e6237a' }, index.h("smoothly-table-header", { key: '20600d28fcaa6ba3a6a275008a863ca8148ac0fb' }, "C"), index.h("smoothly-table-header", { key: '3d7fa4c1729eaca33fffadedec9914f6da271017' }, "D")), index.h("smoothly-table-row", { key: '6236fcfe58f09309a7fd522d177d2bd33e7a0ab9' }, index.h("smoothly-table-cell", { key: '67a7d31d6aa3d116ebe0a88a5e8f584c2285333a' }, "c"), index.h("smoothly-table-cell", { key: '2f5a1d93eadc9b96dfd3aad8ba91d2696c3055e1' }, "d")), index.h("smoothly-table-row", { key: 'fb2736306cf978aa89dde85bf792e21c746765f8' }, index.h("smoothly-table-cell", { key: 'c069426cda86081182906813b121a84039f9a04a' }, "cc"), index.h("smoothly-table-cell", { key: '01fc6c252bdc06c012cdb0537c65eb706a10212f' }, "dd")), index.h("smoothly-table-row", { key: '165d917a082ec87033b3ed9d28b6aa6acb5c6417' }, index.h("smoothly-table-cell", { key: 'f820c8c1492086af2dc1083a3904d75cbbd83169' }, "ccc"), index.h("smoothly-table-cell", { key: '9d04ce5f411f1dfc84a1243c7f310a99921c121d' }, "ddd"))), index.h("h4", { key: '78613924411ff0be89ce90aed26dc136852a1e64' }, "Demo table 9"), index.h("smoothly-table", { key: '5aeb337045c88746c907f410ee575b9bcaa9ea27' }, index.h("smoothly-table-row", { key: 'e98d4dcf9c6116837a17a9f38d4d0e435c463d84' }, index.h("smoothly-table-header", { key: '70f4c22617686211b39084f2996a910ab8eee19c' }, "First name"), index.h("smoothly-table-header", { key: 'e48b12ba18d328d2742864f7fca90cf8e8df646b' }, "Last name"), index.h("smoothly-table-header", { key: 'efec65c1f52cc5e98a316154c604d0aa15106542', style: { width: "1px" } }, index.h("smoothly-icon", { key: 'c44853f1aae338b249624251ac7fd836c93b838b', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: 'c6930ebe7f156d515a701e3a8155d8cb9d360766' }, index.h("smoothly-table-cell", { key: 'fd63067bbe70e5458b9a2ddaa357d3486563026d' }, "Jessie"), index.h("smoothly-table-cell", { key: '7fdd0e7dfbf930d84374fb7151c75fe28343b5c4' }, "Doe"), index.h("smoothly-table-cell", { key: 'c61fc89306ac778353f43bfd49a75087f15a4495' }), index.h("div", { key: '280796257c2e5f2a063939da3bab4b5a77542d70', slot: "detail" }, index.h("p", { key: 'e4140e8363996bc92a84d498baad2ebdaa001e81' }, "This is Jessie")))), index.h("h4", { key: 'a308341362afb08052af53bfe0eeda963671f2d7' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: '3f9d7af3e1778e091d31c2c9fefc9d616a6c60a6' }, index.h("smoothly-table-row", { key: '60ad913bd394abcd83a2000d779c76222def9e1c' }, index.h("smoothly-table-header", { key: '4f0710e9724526ec1123e96d5feed564878b3762' }, "Company")), index.h("smoothly-table-expandable-row", { key: 'd0f39b09c7fbcbe67423799836fa0f45c13efa17' }, index.h("smoothly-table-cell", { key: '18dc6162fb8b0917b30c1ca32e8628700536669d' }, "Proquse"), index.h("smoothly-lazy", { key: '44780a800166f2288e1ccbd781305c5d1acd6256', 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: '60161028cb03261e40922dcdadbc6c76d8c8b4ec' }, index.h("smoothly-table-cell", { key: '804f920e49c7bb7588b3e3914a1baf39538338a7' }, "Pax2Pay"), index.h("smoothly-lazy", { key: '9e88e2f562dc88f4a0f2c206b31575deaafe7c7b', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: '05e29e47065dfe1f6fc03c7f62e6d851ca599793' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: '3ee0be5c6663458bf8f6bdd6dec1ebf876c85567' }, index.h("smoothly-table-row", { key: '9d2a06dd1d27e2cd69ec74353a0855d1fde6ab97' }, index.h("smoothly-table-header", { key: '24bcfb658bbd342881cabab291247695484a1f62' }, "Company")), index.h("smoothly-table-row", { key: 'e2fb2d3aad701e89e4e1f1f11f6288103cddca46' }, index.h("smoothly-table-expandable-cell", { key: '698d75cc90b0ecaf056fb165fc6482c7d72d1636' }, "Proquse", index.h("smoothly-lazy", { key: 'f74d1d00c8842fb89a6fe0867d0c134da50c22fb', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: '3c1545ccf09e0bda5ba27f07341cebaf44d51b1e' }, index.h("smoothly-table-expandable-cell", { key: 'dd0736cffce96cce69bbaf3bcba1e278d6c9ffd6' }, "Pax2Pay", index.h("smoothly-lazy", { key: '026f7c8d2a40a8c3c0b089e1c57e7571abfca4e9', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: '6642d61a7ed37ae26c7eb6d63f0ac820a8d8462b' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: 'ed81c44f6a494c3c223433c76fba88635d400c47' }, index.h("smoothly-table-row", { key: '3c3c6287d0d82d733bec8a85095229c1b84ab902' }, index.h("smoothly-table-header", { key: '54434837620161815440c1d1d8050c5b350d4399' }, "Name"), index.h("smoothly-table-header", { key: '3cb0ed2cd8c0938f4b22474eeb7140a386ec60b1' }, "Age"), index.h("smoothly-table-header", { key: '7c28485362b0e7c7de97dc1e1dd534a1f5f47ade' }, "Location")), index.h("smoothly-table-row", { key: '433324a6fe43ff2536d820e6b628a8ab7de1b67a' }, index.h("smoothly-table-expandable-cell", { key: 'edfcf4adc703947972fc9ee7ff5869a7d69190f6' }, "Jessie", index.h("div", { key: '33279c406692ee816e52c1a35cd40ebfbf8e53f9', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: 'a742c3624ca05d00dc5e71cbe00840ad9cbd5108' }, new Date().getFullYear() - 2000, index.h("div", { key: '50d84db55d267b7a7be5fe2d1999fe018b73a0c4', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: 'fc91ae7f97ddf88ba658f54821be8af1f99008db' }, "UK", index.h("div", { key: 'ab0596814c4524a8b64c091ddbb9120c25b49bd4', slot: "detail" }, "London"))))));
+        return (index.h(index.Host, { key: '92f513d55227dba228e26e494406f6bb9d9ad429' }, index.h("h4", { key: 'abc1315b9edea212668f88155b8d1c213f37abe8' }, "Demo table 1: Filtered & Checked Table"), " ", index.h("smoothly-lazy", { key: 'f904a00c90bb8c921f3e4ccfcac2cc96197275d1', content: index.h("smoothly-table-demo-filtered", null) }), index.h("h4", { key: 'd803672bd5fcb32562f9c62d0c974bf431228f1e' }, "Demo table 2"), " ", index.h("smoothly-table-testing", { key: '0809e1c7a09f84280027b30718960bf2dd318ec9' }), " ", index.h("h4", { key: '6237b7cb08a7f2f7a88cb2907825be7220f84ee7' }, "Demo table 3"), index.h("smoothly-table", { key: 'c0c166d0f0678837eb21d143d2145aca89b5da5d' }, index.h("smoothly-table-row", { key: 'a68d8ed2e13f323def5844ae7ad9f0d5fd0c4cfe' }, index.h("smoothly-table-header", { key: '238de73bec46cfc727631f75301ea21ddb24ad2c' }, "Header A"), index.h("smoothly-table-header", { key: 'fb4a501c1c18e38394bccc80810df03bb4406f53' }, "Header B"), index.h("smoothly-table-header", { key: 'f91f15e38af7bcc9b17f1131df06f198cd44740c' }, "Header C"), index.h("smoothly-table-header", { key: '2c42c7264d9a2ecaa9730a9c5147374ac2e57812' }, "Header D")), index.h("smoothly-table-row", { key: 'd5826ec87939f46fdf5b30e729a0e26ebfddf5ff' }, index.h("smoothly-table-expandable-cell", { key: '679a116c9ecd188f55fb45fee071d9551c19fe9f' }, "normal row (exp.cell)", index.h("div", { key: '0c963febfc2dd18c47b628e0fbf884aab2413020', slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", { key: '7a89811787a703d1367f4a80f5223ad2c5d76638' }, "expandable cell", index.h("div", { key: '80a98eedad313c107ed523ab876cd5fd04d9b566', slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", { key: '38d30f1089f07a3f34bb05a0b7f1ba6c3e4b0187' }, "expandable cell", index.h("div", { key: '241d2b0bed2b36afa8139526a9e6b9ca9257a265', slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", { key: '0f886b844535df7af6aa92e1b7277dafc4b7cb41' }, "expandable cell", index.h("div", { key: '973ea5c201ba68d934c0a69de33bdd4ad88ce5c6', slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", { key: '4c2ebd9796cbdc87be116661409497cac5e8812f' }, index.h("smoothly-table-cell", { key: 'a1c3656a8c0e29d7ffe77207cbec5553b8ee1a75' }, "normal row (nor.cell)\""), index.h("smoothly-table-cell", { key: 'bcf4078fac7e16da37be32fe26ebf81b485a61a2' }, "normal cell"), index.h("smoothly-table-expandable-cell", { key: '614bfed4620c5c1aa987d99466260b1303ed650a' }, "expandable cell", index.h("div", { key: '6e9f3c38acd04facea39c77519e9badf94da296b', slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", { key: '3e31629d1b7c03eca92fa836f985178a05eb47e8' }, "expandable cell", index.h("div", { key: '2bd3b882a0bf7aa5beda30361972080443bd0f63', slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", { key: '24bace1d70f5b668b32e92b57f471f2b165f54e1' }, index.h("smoothly-table-cell", { key: '00d7830c11bad043c9104b06321578bbe6e66b3f' }, "expandable row (nor.cell)"), index.h("smoothly-table-cell", { key: '472de2351e7302c32b5c08d8dfc8e55e12a9cebd' }, "Normal cell"), index.h("smoothly-table-cell", { key: 'ea89bf1cd6a8a3cecf49fd1a9f99e700e3b0591b' }, "normal cell"), index.h("smoothly-table-cell", { key: '38290e8aaba337cde1b723b10ecb10ddf863ca61' }, "Normal cell"), index.h("div", { key: '8cce4827a1fd11216dd3f805c82e1e949148effc', slot: "detail" }, "expandable row content"))), index.h("h4", { key: '68518686b0182d1514ef7cbeff95b9bc24b74271' }, "Demo table 4"), index.h("smoothly-table", { key: 'eac5df37d0f23b58df257e45bfe5053ce2528c31' }, index.h("smoothly-table-row", { key: 'a293380c9513fb04dca9e1ead25d2724bdb1f0d2' }, index.h("smoothly-table-header", { key: '778d3ad63b1f14dacbd2694ac6f5139b49088e7d' }, "Header A"), index.h("smoothly-table-expandable-cell", { key: '87d5bb118e6094a4db27ad64a93b8e61c11d9002' }, "Header expansion", index.h("div", { key: '4abe10bfb3dff27ece7a68c945bc5da9e8430d9a', slot: "detail" }, "Expansion content"))), index.h("smoothly-table-expandable-row", { key: 'fadaaad5867c81e2cf695150c4c76f870ecf3c33' }, index.h("smoothly-table-cell", { key: '882ec61c1ddce70ebefff560da78ba6e8f7e4315' }, "A Content"), index.h("smoothly-table-cell", { key: '561070b787072233db76082c39a7a15e1f5557a2' }, "Expansion cell"), index.h("div", { key: 'e9bb8faf1c9d48245ea6f070e6db1699e4ab7c14', slot: "detail" }, index.h("smoothly-tab-switch", { key: '06ada5099231fd695db8d49d349e7375ea26a62d' }, index.h("smoothly-tab", { key: '48bce3ce64782c6c4f53c83c35fe6df3be6e1645', label: "innertable 1", open: true }, index.h("smoothly-table", { key: '471ace064438c2d2cee67054b8b0ee490d2e6285' }, index.h("smoothly-table-row", { key: '64683dd83627d6fc388d4be7ac6c5510583b2d91' }, index.h("smoothly-table-header", { key: '189665dbf7bc2ed9e48f7a59fbb39b57f706733d' }, "Header B")), index.h("smoothly-table-expandable-row", { key: '1eb9b2a8235f87f5951c390fabc4e91f8cc4ec1d' }, "B Content"))), index.h("smoothly-tab", { key: 'c5fac85e652570bf165450122702c3685859e395', label: "innertable 2" }, index.h("smoothly-table", { key: '84583ab1af0ceebe0b7a16684829ef83229cbb2c' }, index.h("smoothly-table-row", { key: 'ca16e0eb345a93d3994931171dde89a8d55d871f' }, index.h("smoothly-table-header", { key: 'da222edb5d2caf51646e6dc2c592c6c782b67042' }, "Header C")), index.h("smoothly-table-expandable-row", { key: '83535279796e2ca9c343fbabbf15338118335ddd' }, index.h("smoothly-table-cell", { key: '4e6e3852bcab06a3a2984cf083ff6de8ad5fae39' }, "C Content"))))))), index.h("smoothly-table-row", { key: 'dd63e3ebb3f5df4c5a6180307ac882eebf96d20b' }, index.h("smoothly-table-cell", { key: '49fb10e90814d69dfd5cd8fc1810c7a789e29df7' }, "A Content"), index.h("smoothly-table-expandable-cell", { key: '7f97b2f62924b4e20514089aec2b9d3fd1b1d1d2' }, "Expandable cell", index.h("div", { key: 'af0d900eb7ab2e182ece231aa04a903a2413787c', slot: "detail" }, "Expansion content")))), index.h("h4", { key: '96ca0dd5b1900a579a2e7cd6fc2a2137654e141b' }, "Demo table 5"), index.h("smoothly-table", { key: '18a0befe39245234b0f41523281118bb64a60861' }, index.h("smoothly-table-row", { key: 'a26c4c901f88cda5db2e5db2855de2ff47d184ce' }, index.h("smoothly-table-header", { key: 'f82d23dc4cf4a0ae3c21805a4b0af5d30568b237' }, "A"), index.h("smoothly-table-header", { key: '895ea7304a8f9011ce163bf2a3d32672a257ff31' }, "B")), index.h("smoothly-table-expandable-row", { key: 'f85932a94e2e41bc1f1a9409a6602d2b31dba846' }, index.h("smoothly-table-cell", { key: '945dec300b9c931e64d97fadb3f79ade01506753' }, "nested expandable row"), index.h("smoothly-table-cell", { key: '77096641712735c81db99d5c6c4df763a64c3de0' }, "b row"), index.h("div", { key: '98e1219afd7ac37f01a5fe0ce4e25248c8ca0ebc', slot: "detail" }, index.h("smoothly-table", { key: '3f52747a3c18f7bf4918d3c60bb50a09d0fa67fa' }, index.h("smoothly-table-row", { key: 'e6c5dc79f8ba20f568f5194800ed8915644fdbd5' }, index.h("smoothly-table-header", { key: '5baa9f42e473fee16830daad45d7649c1260941e' }, "C"), index.h("smoothly-table-header", { key: '5e0514012ea5bb0a17cb8d1e117cb8d06587cb42' }, "D")), index.h("smoothly-table-expandable-row", { key: '46a34e53adc1f874bd8e586ab7848d3ced7c812d' }, index.h("smoothly-table-cell", { key: '81bdd9d99030044b72036cf861f1178854d5431b' }, "c"), index.h("smoothly-table-cell", { key: '82b8d6cc31613b107b2d890082c4ed1c4d37d986' }, "d"), index.h("div", { key: '06f895d065d0feb8dbec51bc9ccda0fe7e99226d', slot: "detail" }, index.h("smoothly-table", { key: 'b2cd52043f5e6d99e0aa192935e208b5fa022f41' }, index.h("smoothly-table-row", { key: '0e3d379389aeaa8513e8d2280b3fbcae441d49e2' }, index.h("smoothly-table-header", { key: 'ec7bd5c96a31f935a55f0a82e54ad16e63d3ae12' }, "E"), index.h("smoothly-table-header", { key: '4e49a439dfee969d87bb76a5e27606b1959384de' }, "F")), index.h("smoothly-table-expandable-row", { key: 'f50c6f85fb3edff6141cb7cf5c4628f45078b290' }, index.h("smoothly-table-cell", { key: '9dfa9d7ad4d33c9b8ef6b93528d8fdb141afe686' }, "e row"), index.h("smoothly-table-cell", { key: 'd452bd4fd696b0f83ca6ec09e4f9ccc43308d795' }, "f row"), index.h("div", { key: '013ef03d962936e9e60a5b1d493570fb9239b11f', slot: "detail" }, "nested expandable row expansion e f")))))))), index.h("smoothly-table-expandable-row", { key: '8f5c879b1af647c8f85929e6e1f7d2fe0c019c25' }, index.h("smoothly-table-cell", { key: '18a66b17f682c1b4c3680bbb05663f1f4dc5e613' }, index.h("span", { key: 'fe7e0b98649def95222a40a394be54c4870bd420' }, "one"), index.h("span", { key: 'dae691330a8a6bfd6318dd2f65320ec12a67a893' }, "two"), index.h("span", { key: 'a8e5fdb6c136e0c0c6711f87c398594787b91869' }, "three")), index.h("smoothly-table-cell", { key: 'ddb09a805e30f143628ba7567c595fc51ef91845' }, "five", index.h("smoothly-icon", { key: '7bf7fc8565a14b3ad2cf846a2b2e4511bdd7224c', name: "paper-plane-sharp", size: "small" })), index.h("div", { key: '95104e018f31db26e452a95da47a91f494fbb9ea', slot: "detail" }, "four")), index.h("smoothly-table-row", { key: '8acc8ed9bb2a62292d05c1b25e1460037ad07559' }, index.h("smoothly-table-expandable-cell", { key: '85d656d74971a530eb223733623b9e8676927269' }, index.h("span", { key: 'bbdd4168cc99cc6f93385e6ffc6f9353359daca1' }, "nested expandable cells"), index.h("div", { key: 'ab8485bfa2748bc529461a208d13f352198799b0', slot: "detail" }, index.h("smoothly-table", { key: '5896a31a6252734b936ffb248337ae3024b5eb39' }, index.h("smoothly-table-row", { key: 'bc9ac8e9a4a8ad2099dbb034c976fc42f74f9c6a' }, index.h("smoothly-table-header", { key: 'a78ac4c685ac1ca605b3d5dcc4a06a2d7c64d7c2' }, "E"), index.h("smoothly-table-header", { key: 'e87b9e033d6e43782032f4efe23cbd8147fc44b5' }, "F")), index.h("smoothly-table-row", { key: 'd3b571f79298e2be00f7759afce4475155e39382' }, index.h("smoothly-table-expandable-cell", { key: '225c0db4a88a5b44912383233956bdffc190222c' }, "e cell", index.h("div", { key: '4861b493306a793c4814a216eddf9c752c63e8ca', slot: "detail" }, index.h("smoothly-table", { key: '539561d4f24a417661bb94a017ac22634b5cd9b4' }, index.h("smoothly-table-row", { key: 'e1a13304421896669ef5f076cfe52213a3acea2b' }, index.h("smoothly-table-header", { key: 'b1fa8dba9dbbda98f646db56d0aded684198a24f' }, "G"), index.h("smoothly-table-header", { key: '34c35f86c2aa241cd08872473805aafebcc6d59d' }, "H")), index.h("smoothly-table-row", { key: '794f7b9acd9e2257a5c7bdb5f95957678f1ae0aa' }, index.h("smoothly-table-expandable-cell", { key: '257c8e7a7bca28c32bf1c611bfd07274c851bc71' }, "g cell", index.h("div", { key: '21e9bbfecad8f8dbfd82759096a12d6ead16d0da', slot: "detail" }, "nested expandable cell expansion g")), index.h("smoothly-table-expandable-cell", { key: '6a6b1c514400f6333f70e8945d8dee89a0ff61a9' }, "h cell", index.h("div", { key: '49e59a495d3ebe2984dc22efecd66f9346684cf2', slot: "detail" }, "nested expandable cell expansion h")))))), index.h("smoothly-table-expandable-cell", { key: 'fe08dd288ac453f4d4b35fb66cdf5554d0730f56' }, "f cell", index.h("div", { key: '23ff6e03766ac523407c08768cd062d1e0543531', slot: "detail" }, "nested expandable cell expansion f")))))), index.h("smoothly-table-expandable-cell", { key: '3b5c8df8466fb3cd0c418f8f7627b7a4875782b4' }, "b cell", index.h("div", { key: 'b89b7f19dd2bd7f1bc95b45703f19964b35c377a', slot: "detail" }, index.h("smoothly-table", { key: '632d6e96645c05971bb6f0f0fa30769736a989dd' }, index.h("smoothly-table-row", { key: '59adbb355f900853f02371b7b4a093df375f903d' }, index.h("smoothly-table-header", { key: '0369b526c6dc781c0c0ea06eebd5f014bb362eff' }, "C"), index.h("smoothly-table-header", { key: 'e45efd3511204b0dc2a54d2c4bca586d3c2518e5' }, "D")), index.h("smoothly-table-row", { key: 'b88788cca67a0fbcc0700d55e7ecd5c16bd66342' }, index.h("smoothly-table-expandable-cell", { key: 'f93640c17f8886b92ad34aeefdd6c736a51d438b' }, "c cell", index.h("div", { key: '83efa6ab4f856a955bff94cc6ada5f890f463866', slot: "detail" }, "nested expandable cell expansion c")), index.h("smoothly-table-expandable-cell", { key: '6d39111c0699afda6400e729a32ea101a94abd97' }, "d cell", index.h("div", { key: '591db81554b54b5b7aa9cb045990d84d5a5f9c37', slot: "detail" }, "nested expandable cell expansion d")))))))), index.h("h4", { key: '51d144c15c36a0fecb0056d53c4e8472c9d49298' }, "Demo table 6"), index.h("smoothly-table", { key: 'faec39526381a87a7a8dbd5fdff087dc501eef55' }, index.h("smoothly-table-row", { key: '46a065067d021c219b5c874319d9744eb6a1812f' }, index.h("smoothly-table-header", { key: '09941772a69bff08c6681c9d85ccd75c85ef541d' }, "display"), index.h("smoothly-table-header", { key: 'ce625cd535f27f024b50c4e6d7c95d6f161e9342' }, "contents")), index.h("smoothly-table-expandable-row", { key: '4675312372a6ea3dbe154d33c9848ec909affca9' }, index.h("div", { key: '6cbeabc6112c899a1c94a4875a1256acce203f6c', class: "content" }, index.h("smoothly-table-cell", { key: '0ecf7e42fc25bc05454b5ba26f145db33b991f26' }, "A"), index.h("smoothly-table-cell", { key: 'c2656b3527955fbf3cef6016effe7862d06e1c32' }, "B")), index.h("div", { key: '31db0d8320aa107d139d809225b257dc16975e4b', slot: "detail" }, "expansion"))), index.h("h4", { key: '827c517f02de1a18a2eb0856e0940c2065093da3' }, "Demo table 7"), " ", index.h("span", { key: 'e904bddba69326ada411b8ef85ab48d5153aedc4' }, "nested 1 then normal"), index.h("smoothly-table", { key: '11eab87842c42037ef1d99d7c48b17f17fc0d766' }, index.h("smoothly-table-row", { key: 'f7a78af9cd4309e473ddc4f9a87d523ef32cef75' }, index.h("smoothly-table-header", { key: '4385b91ddbc1e6fb1614bd684cdb66deaea9df99' }, "A"), index.h("smoothly-table-header", { key: '46c7d7e054adf946c9f7b1def325c4ba70f89a24' }, "B")), index.h("smoothly-table-expandable-row", { key: 'f294015adc36b31e573bf8c434947298f6adbbc9' }, index.h("smoothly-table-cell", { key: 'd32cbc547fec7a3aed236582b558d577e3bf0307' }, "a"), index.h("smoothly-table-cell", { key: '2d2c45c966b7545face1af153e7aed1f2f6fa49b' }, "b"), index.h("div", { key: '99616cbded68c3f2b441e51fa6107a78339da28c', slot: "detail" }, index.h("smoothly-table", { key: 'e40acdf5959217b93993eb10f377b50b12c48963' }, index.h("smoothly-table-row", { key: '848ff4b574eeaba4e75bf717ffc3416d1a9b300a' }, index.h("smoothly-table-header", { key: 'afa4fe911e0b6a8470fb5dd30ca2f1b87b9ef989' }, "C"), index.h("smoothly-table-header", { key: '19f006c2e75354c588f97ec84c503d2eb1eb3608' }, "D")), index.h("smoothly-table-row", { key: '87890946c8960441657632b985d372778b5bb44f' }, index.h("smoothly-table-cell", { key: '4143f46756ceb53f616746b28a015c7c4232ed39' }, "c"), index.h("smoothly-table-cell", { key: 'd4a1bc9c58b2f32ec4f38c9ad1996406132ed271' }, "d")), index.h("smoothly-table-row", { key: '6f34b2af0893d5c0cfed662bddd40716e7072ae9' }, index.h("smoothly-table-cell", { key: 'ea7d288c161754a1b40b8597889f222cc8f566ae' }, "ccc"), index.h("smoothly-table-cell", { key: 'a01b1038521ed24381c4efc79088a68f5d9bea9d' }, "ddd")), index.h("smoothly-table-expandable-row", { key: 'd2a80adb1d8850d95250206d08cd1f34bf2629e5' }, index.h("smoothly-table-cell", { key: 'd83b23188ca452988fe24c700a748fb4204a75b2' }, "cccc"), index.h("smoothly-table-cell", { key: 'ad4f31606ec5f8b155ac8b14ca13251224b6f4da' }, "dddd"), index.h("div", { key: 'bd03fdee8a42a49201559901ea93242e7debf932', slot: "detail" }, "CONTENT")), index.h("smoothly-table-row", { key: 'c4b1c77f4675b3fb2d90bdff16e33decff1adae6' }, index.h("smoothly-table-cell", { key: '18c6a3e79a523e6bbc9471cf44fa6582061b70a2' }, "ccccc"), index.h("smoothly-table-cell", { key: 'c80c3ad954a1b23853095c37812ec0113e18ceba' }, "ddd")), index.h("smoothly-table-expandable-row", { key: '28c10740b070508b97e1a3c482923b6fb47c2515' }, index.h("smoothly-table-cell", { key: '68e3d6fc2a55ef57270965076f02491527bd7470' }, "cccc"), index.h("smoothly-table-cell", { key: '61c9e1e74b2cfbb96ddd913b4c8e4b4bef60579b' }, "dddd"), index.h("div", { key: 'f2b14582a16ddc951c6025026e12b7de98532344', slot: "detail" }, "CONTENT")))))), index.h("h4", { key: 'b9256802ba84836c4a25f65cb2984177b91afc11' }, "Demo table 8"), " ", index.h("span", { key: 'b91fc7e31ebe2af5f1fba55ede282f67485c6ce3' }, "not nested"), index.h("smoothly-table", { key: '7819e1f783ac6902ca55521e51ed8e072ac44ca1' }, index.h("smoothly-table-row", { key: 'f2756c02a681b71043c78a5fcd036d0974e9852f' }, index.h("smoothly-table-header", { key: 'd606c8299f43051f7e71d0b166da5dff6b31bd6e' }, "C"), index.h("smoothly-table-header", { key: 'b22eb7b4931133bdb97163994be9ba92ab029441' }, "D")), index.h("smoothly-table-row", { key: 'bc6f4af86e42fb9cce579c9110139e10520cc2bc' }, index.h("smoothly-table-cell", { key: '836e797be6961ab57281bafeba7e47321787edae' }, "c"), index.h("smoothly-table-cell", { key: '089f75a75991a08cbbf839d3b5036b244b484fe2' }, "d")), index.h("smoothly-table-row", { key: '5a7cb0bed54847b3c1c4f0f499df18164308fbee' }, index.h("smoothly-table-cell", { key: '5324c437e3b88c9cbc763aa2983f9411d9fdd0ed' }, "cc"), index.h("smoothly-table-cell", { key: '7a1f1a5ad98014d37110fc5a1ed6933b56166a33' }, "dd")), index.h("smoothly-table-row", { key: '56beb16541bd9df1943f54a3c0a74371e11a1ddb' }, index.h("smoothly-table-cell", { key: 'c0f7c36476ff3904d4539f4ee2be1c82044ad760' }, "ccc"), index.h("smoothly-table-cell", { key: 'd9603fdaa2b8f1b81e979a77d587e7ceca31fe96' }, "ddd"))), index.h("h4", { key: '8844ff2ded7a7f6a9ecff76a48ee6ad4f1b32cd7' }, "Demo table 9"), index.h("smoothly-table", { key: '14c3305cf3e4cb13a24f1d4dcdcf96d0e2f0a5c2' }, index.h("smoothly-table-row", { key: 'a2ea6a75f6417f24d438aca91498fa1a9f59cb41' }, index.h("smoothly-table-header", { key: 'c5118528d8b1c367454e87d6c425e5effbc27126' }, "First name"), index.h("smoothly-table-header", { key: 'a52c61f4af76236ca1eef03192493300ab8b861d' }, "Last name"), index.h("smoothly-table-header", { key: '6b5b6cd09ff75074c469f3c5927a072c972aecb0', style: { width: "1px" } }, index.h("smoothly-icon", { key: 'a726200f85881671933e330f3b74481fe49f08d3', name: "alert-outline" }))), index.h("smoothly-table-expandable-row", { key: '31d0666b373101603a32c5712873fb3e0425687e' }, index.h("smoothly-table-cell", { key: 'e608c00df92fdd50a127403786960deb9af9dacd' }, "Jessie"), index.h("smoothly-table-cell", { key: '339fd80bbad8919bca08bbb2d162eee2882422eb' }, "Doe"), index.h("smoothly-table-cell", { key: 'f79c6f6a77974ba6e3a16e37e0f2dda416ab425c' }), index.h("div", { key: '579f14bc2a822ef5323ffb20f82c49ad03dadd90', slot: "detail" }, index.h("p", { key: 'a63b51f46aacf40910329967802a8670767affde' }, "This is Jessie")))), index.h("h4", { key: '8964e72562787540716acdb5180889656e392afc' }, "Demo table 9 - Lazy expansion rows"), index.h("smoothly-table", { key: '978be8d29b056ef35b182353f1a1579836f0f133' }, index.h("smoothly-table-row", { key: '785113cacb57b9e2dfa226b6bfc5aab3a5807296' }, index.h("smoothly-table-header", { key: '04b6ff1b35b2909058ead2f8e1ebefc1eaf6e89a' }, "Company")), index.h("smoothly-table-expandable-row", { key: '470ad01c9bff5de234cea9145066a2f6eca6cd96' }, index.h("smoothly-table-cell", { key: '071fba0c86ac6a05f77c781d0a60c646bb3af0ed' }, "Proquse"), index.h("smoothly-lazy", { key: 'd4333d54ed14686191ead1ee48db4c0fc822cdda', 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: 'fe3f70c5efe4610e53a465d6d5fdc0272137af9f' }, index.h("smoothly-table-cell", { key: '40bf0f853655a90ae0d54e73979cca79e1e2717b' }, "Pax2Pay"), index.h("smoothly-lazy", { key: 'deaea0307ba6ec14cccd4837c859cd88367f7358', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), index.h("h4", { key: '911cd90cb28e02227d062dd8c6c6c7f657f323e7' }, "Demo table 10 - Lazy expansion cells"), index.h("smoothly-table", { key: '2977807bf0a7e7f6bb8a634e57f44c390755e3a6' }, index.h("smoothly-table-row", { key: '556ba829c90bd2f8cb30bfcaaed7da5ef40832c5' }, index.h("smoothly-table-header", { key: 'c6eb2b50aca6489eeb61a9166b860790648e4832' }, "Company")), index.h("smoothly-table-row", { key: 'ee52b727dd98e67ad5112918059e55e393158eb8' }, index.h("smoothly-table-expandable-cell", { key: '763087ef0870ada3ebc6deb9b191ddbb19f34c6c' }, "Proquse", index.h("smoothly-lazy", { key: 'c24ec2b1462deecae6ab8f17fb21c459a441030b', slot: "detail", content: index.h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), index.h("smoothly-table-row", { key: '86154b9e18ac127dffc017dc914622a3050a7376' }, index.h("smoothly-table-expandable-cell", { key: 'feec7baec3968a09c993be77f875843be15ed9c3' }, "Pax2Pay", index.h("smoothly-lazy", { key: '23232b27cf6d7c561cadde4441fdce2550885c29', slot: "detail", content: () => (index.h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) })))), index.h("h4", { key: '51343618cced71aafc8e15d5dac2e69c1d13cd71' }, "Demo table 11 - expandable cells"), index.h("smoothly-table", { key: '2bc496e41e9e31c90adb59958bc736845fed36ac' }, index.h("smoothly-table-row", { key: 'd5ba81ce7513e04af03c316bf63f26a64c823604' }, index.h("smoothly-table-header", { key: '502605f5dc8433f6e69682cabd950055396a58fa' }, "Name"), index.h("smoothly-table-header", { key: '781c32dd031bbb659f317c35235f0560ffe191d8' }, "Age"), index.h("smoothly-table-header", { key: 'a21cfd212a4215102e2ef02005e7057eb37f49f3' }, "Location")), index.h("smoothly-table-row", { key: 'fc61edc0b97454696dcf50bbcc8769227580de48' }, index.h("smoothly-table-expandable-cell", { key: '762adb2e955c12596cadc8f3234494d6744776de' }, "Jessie", index.h("div", { key: '29414852e8691ce3dcbcb41d6ef815dffcb1493e', slot: "detail" }, "Doe")), index.h("smoothly-table-expandable-cell", { key: 'e602cccf45ff250382f92b9ad113c7bf529b87f8' }, new Date().getFullYear() - 2000, index.h("div", { key: '211cf61b4c97b6913e092fc4d52ea0eac21832da', slot: "detail" }, "2000-01-01")), index.h("smoothly-table-expandable-cell", { key: 'e3f27365828542a4ac324c28a3b31792830750d3' }, "UK", index.h("div", { key: '6cb18c8dfee6aede94ce55df9f7a03f0ef627791', slot: "detail" }, "London"))))));
     }
 };
 TableDemo.style = SmoothlyTableDemoStyle0;
@@ -12467,18 +12463,18 @@ const TableDemoFiltered = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: '1632fc896a3c14cc68145cd77166797806651f60' }, index.h("smoothly-filter", { key: '71928ac255e71c6f035830270e202c47cabc8f3a' }, index.h("smoothly-filter-toggle", { key: '61062e4add68ba020b9244af36e8736d9e78a4f9', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '9e6f2d11d6f86352ec1476185d68e961db6914ac', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '6847c4f187c08912bebbd1fcb690d1f7a9f2ab31', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '836571ad9e00e96e3c97b1b615ff3e1fc08ccd27', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '6b04421955de238e2263323fca0867a7e12a42e2', label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '83dcd49e8f7b163772ef51498d8318b4c598b8a0' }, index.h("smoothly-filter", { key: '2bbdb7566b2a9ceaab59bfc51a6515227f033d41' }, index.h("smoothly-filter-toggle", { key: 'f0567d1bfc8af47b2050093cb086de7be5d209d2', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'adccbbd2383f1f44a233b2a0f734483ff7e460a7', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '9e3c9955a9467f50cad8c9e7516d9a1722c9e6f4', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '63d0328e00a3f264aeac0205b886493fa83fe8c6', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '17719758dba9e81d1540a7caf2c645040004982e', 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: '63609e5156d7a3761ed7fd421ed863681c4d7b5d', slot: "detail" }, index.h("smoothly-form", { key: '44b78b0d4e2781ac620f66b03ca4032440caed48', looks: "border" }, index.h("smoothly-filter-select", { key: 'f401a2d1bfb0484a726a4e25dc17be7c88a5c51e', label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: 'e7d9a221f045158a108be6979dc4a5b63c5740ac', slot: "detail" }, index.h("smoothly-form", { key: 'f4a6bce250ee6e45d4e54c145aab591b81fbc9f1', looks: "border" }, index.h("smoothly-filter-select", { key: 'c4a25b8374050e5cba2698331c0b1a563879b985', 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: '786a00cd3d90c73583c65602d0ae92561fa0412a', 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: '93c389248f5b02b23e08ec7009e341247bb0d975', label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), index.h("smoothly-filter-select", { key: 'cb974f6a3e02a88c45eda1871cb2ff5016524158', 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: 'b5634cddd623535bd3bb7399f3329484e20a2d18', 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: '0046e17476642a0cd4fecdc1030e9eb2aba04bfe', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '801fa97acd8ec50530304b1cd0a964d2a01d46eb', 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 : "?"}` })))))));
+            .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: '49d648769abd6651454084768bc30555ec524b58', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: 'd9a75b80bc567fb349f451aaeb47456beffd2c33', 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 = {
@@ -12534,7 +12530,7 @@ const TableExpandableCell = class {
         event.detail(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: 'b0722ac2b5894d6a08ff86f9ae8cb6ab6e573320' }, index.h("div", { key: 'a9472d042e9bdac9c0bb0c841023bd19c2d6f283' }, index.h("smoothly-icon", { key: '953239cf1296bbe7e0bf3ff2fd2b2876bbf45fc4', name: "caret-forward-outline" }), index.h("slot", { key: '684f2f1e4d9a670ffe43a99a5f2f7453df0f0563' })), index.h("tr", { key: 'c3237dd2b3c948468f5431e376112c9c7567ab8b', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: '8575d321597bef075866fd0aa0f7eb412935612d', colSpan: 999 }, index.h("slot", { key: '55b5610313b8f6363c03ce8de3d46e8dad35ca8b', name: "detail" })))));
+        return (index.h(index.Host, { key: '92d07acfac9c753fcb3611913c97cf18893444f2' }, index.h("div", { key: '2c2148701a40c1b9a4677b48a1e868e5d72df56e' }, index.h("smoothly-icon", { key: 'c0023b12e5162a5ff47ede34ac850f1f08f0c2d6', name: "caret-forward-outline" }), index.h("slot", { key: '9d0a317dfae5e9dd387aa2922a5f21fa84e432fc' })), index.h("tr", { key: '8de7645b43a134bb6e5a4fa70cbd0689f6481de7', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, index.h("td", { key: '6cbcb85c04cfe070d8943d2c4510030f63bf7fc1', colSpan: 999 }, index.h("slot", { key: '436e93ca85c5ea9507723e82abdf8fdc3d22f54f', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12570,7 +12566,7 @@ const TableExpandableRow = class {
         event.detail(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: '3bcc97ed6e2791b5d2e499e4778f805afd6c3796' }, index.h("div", { key: '1c0f055d551ee74869a171754f436b466fe5c582', onClick: () => (this.open = !this.open) }, index.h("slot", { key: 'df24e386c9c906b4745bb66aa6b16bcb4059143e' })), index.h("tr", { key: 'c6b08fde5babec71465abb1caef4c06bc5b0f8bc', class: { spotlight: this.spotlight } }, index.h("td", { key: 'db3d0590cb43229ea3ca2000cfdd004f489b8272', colSpan: 999 }, index.h("slot", { key: '9222f690b82eba97520741877948e3f4a7504642', name: "detail" })))));
+        return (index.h(index.Host, { key: '40181795715df0586a7c5d574a14ef9cc035318c' }, index.h("div", { key: '643b951710c56b6cbc92e5d09e4e5232742b2250', onClick: () => (this.open = !this.open) }, index.h("slot", { key: '7e0d7557c6c4c9814abe21425890486946918b96' })), index.h("tr", { key: 'c1a7fd5a972f9e062632c37b637d18a8f6232202', class: { spotlight: this.spotlight } }, index.h("td", { key: '3caa5893880606fc4f931e21633f857c0962f84b', colSpan: 999 }, index.h("slot", { key: '05a9d592965964a072ab6f8959b452cc17fb94a7', name: "detail" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12588,7 +12584,7 @@ const TableFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '92ae107645e77eaaae9d40d06966e5662c83b914' });
+        return index.h("slot", { key: '5ead02dc2a5d1cde2e6b6582abcc5b114f527008' });
     }
 };
 TableFooter.style = SmoothlyTableFooterStyle0;
@@ -12602,7 +12598,7 @@ const TableHeader = class {
         this.name = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '394a454ddc969c87033825a058beac227325dc73' }, index.h("slot", { key: '035d027bb935e244b867ba39b16466cc6a0db7c5' })));
+        return (index.h(index.Host, { key: '87d5055ddf90571262b25133043a09816aa076fd' }, index.h("slot", { key: '9c714b90b1326a39b86147cb2536df4b7d981389' })));
     }
 };
 TableHeader.style = SmoothlyTableHeaderStyle0;
@@ -12632,7 +12628,7 @@ const TableRow = class {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.after(event.detail);
     }
     render() {
-        return (index.h("div", { key: '2a76ac0241c79e325b487e9ca92b62fbec6dc6e1', ref: e => (this.element = e) }, index.h("slot", { key: 'a49794e5574311a4402263818ac177e32ad21fe5' })));
+        return (index.h("div", { key: '423c4727dc600f14f1e378de3eb3753a7d6adb1f', ref: e => (this.element = e) }, index.h("slot", { key: '4392d623d577e856928f71f58ad83d0436a90c99' })));
     }
 };
 TableRow.style = SmoothlyTableRowStyle0;
@@ -12674,7 +12670,7 @@ const SmoothlyTableTesting = class {
         this.counter = 0;
     }
     render() {
-        return (index.h(index.Host, { key: '1085f1696d6d7e66bcaa5c72bf8af0fe9531ac5f' }, index.h("smoothly-table", { key: '7b7f1826e75d45446577204794385c3a15afbca2', color: "dark" }, index.h("smoothly-table-row", { key: '47c1266d3b1b894d1ae987ffb6fdcb4023e5707b' }, index.h("smoothly-table-header", { key: '54076867bbe8ecbbda6bbd883b6f991a35b717c9' }, "Type"), index.h("smoothly-table-header", { key: 'ad2ec2b46aacbaeb6047a269a29ba285b0777e00' }, "Name"), index.h("smoothly-table-header", { key: 'dfa2353121fd65e30d50c14b9a51cccd01082c30' }, "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: '89632321b8eb3e5cc90949ca090c83f66bb92ddc' }, index.h("td", { key: '0487fb4e794ae1869ba4587e771bc762bbe51bee', colSpan: 2 }, index.h("div", { key: '5593a3dbb5be54e071dd853aca3f37d0fec0ccd3', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: 'f91fa74ca1e36c74168ba2191009997935710c5f', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: 'fdd07d8165c4d6b05a96fb37f14da6aa6e00bbde' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
+        return (index.h(index.Host, { key: 'eaccc81d11a2cfbeec688de500ead508bba546ad' }, index.h("smoothly-table", { key: '930b588e1212533d4075664597341807b6796af7', color: "dark" }, index.h("smoothly-table-row", { key: '049d2c23150561aec33021e41470e61fd0dd222c' }, index.h("smoothly-table-header", { key: '555262f828b3d9e9c11eb886db4f063e380e5724' }, "Type"), index.h("smoothly-table-header", { key: 'e50b2d4470f41fa994c924acaa94c3d5ed38d2d9' }, "Name"), index.h("smoothly-table-header", { key: 'e998fa69570f4d2fa33dc076442e6516dc9880a6' }, "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: '61ecadf4ea87ff8248f8aee89f50b1404c73b420' }, index.h("td", { key: '8104650001b0f270deb0beb6506ec69b032d4894', colSpan: 2 }, index.h("div", { key: '9567d52fba5d5b7a8f532dde92958c37bb78ab53', class: "footer" }, "Currently viewing content from:", index.h("smoothly-display", { key: 'b73f7a233fe7a1dc3f0064783e09ff0208540f31', type: "date", value: "2023-10-12" }))), index.h("smoothly-table-header", { key: '1c639ee7fe74e74917e6b8e5549ba40d63c8ad49' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
     }
 };
 SmoothlyTableTesting.style = SmoothlyTableTestingStyle0;
@@ -12706,7 +12702,7 @@ const SmoothlyTabs = class {
             old.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b7546191fa983884fae40908ef9d192801008b24', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: 'b4c48090e63b912607d772044c47af880ca6a09e' })));
+        return (index.h(index.Host, { key: '496172473c6e9f11ecea04a1fc286cb3dd3bf351', style: { "--tabs": `${this.tabs.length}` } }, index.h("slot", { key: '3ae0189b793575caad2dabf84215645fe79e45e3' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -12723,7 +12719,7 @@ const SmoothlyTabsDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-tabs", { key: 'd569728a46c2542bb18675a87b45af852c168502' }, index.h("smoothly-tab", { key: '4b30de3d0e9ad3477fcaba37d043135cbdbaf02b', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: 'fbc279d1279d1f6b6df4e4214a9f80ede3f1cb3f', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: 'f935e14faf487d2d7089fa6ca311454ed5c0e725', label: "test3" }, "this is a test message again!")));
+        return (index.h("smoothly-tabs", { key: '1451ced94ad9268848e6507534d2ee42c89d2bbb' }, index.h("smoothly-tab", { key: '10350d9f713eeefcff8afe7f702ecd33eade70b4', label: "test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: 'd595a6010d4c0df2e7a5e94f1a38d60d805856b4', label: "test2" }, "this is a test message!"), index.h("smoothly-tab", { key: 'ed167f2cbdb1fe91d5e3d461e4e2e233a584ceb6', label: "test3" }, "this is a test message again!")));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
@@ -12737,7 +12733,7 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'd8b102ae04ea052a0dfb6ce574647ae9f036c2b1' }, 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: 'e44ef386353a0aaa0ce8b8342bea09b6378c7af0' }, 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;
@@ -12789,7 +12785,7 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '54d081410164cfe67d684c8bb4c1ec1ebe452806' }, index.h("h2", { key: '1f34789f78794291e430c72839ba8a3c3076e00e' }, "Theme"), index.h("smoothly-theme-picker", { key: 'fe3c84e990cab972ccb2dc86f04d5e939a0b730d' }, index.h("smoothly-item", { key: '11c7a8328ddb902224cc3e99993ce8e425acc868', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '028e8171c1ec84f0c631425e11784bdabb08c885', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: 'b0e7c5a0141424e165e0c5ff1c21bb70726909b6', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: 'ab2095a17d41e7a75153f7f26c8f20f39bbe90d6', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '826a37fbdf3ac1f2b5164ff9d542d2bd60abfa10', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '906abe598591c168e3c453f5e13a8b38dd33deee', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '772d0de279b2f20c40b35e0263f30ea1d8a3f9e7', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'e284556364e9cda627507a2d9068d1543876aec8', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: 'c90cf63880db12aa88849fc5365b98ccdf14906b', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '93cf03d3c0f223162468ad9b365a004fabf65c83' }, index.h("smoothly-theme-colors", { key: 'b2bad8b6c1750281f937646ea57e1580d933a640' }), index.h("smoothly-theme-guide", { key: '2d550662a46eceedcb475b4a9abaf2cac178e2e7' })), index.h("smoothly-button", { key: '7ae3e1a95fa71d430e227e1e585347e36130b413', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '2f3d0ebfeef56c4385538c7bdad673b22795ae03', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'ac89007d285921323cfb0ea1e03d527cdb3ffdc1', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '6424bb2eedc79f9844e03b3012befffac9dd3f58', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: 'e5b3adadf990badafbce91f627eba018c6458bbd' }, index.h("h2", { key: '486a5c0b19b13782c804f1de7d65c42ba064d1bc' }, "Theme"), index.h("smoothly-theme-picker", { key: 'e73266d5919acb0ea592f2b6c3f2d767c7cf7f09' }, index.h("smoothly-item", { key: 'fff810a25c4f106551eed9e1d78f14efa022c19a', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '9142e8e2f65c1e11a011e69c0aa2026dd447a2cc', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '5c4df5edf4b88350fefb4e7d7dacff71c72bd9e3', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '96aed8bb1be8047c49e64f076fb75bc48fb5fedd', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: 'd16afa5cdc7da396a025604329ff4b77edc6b5a3', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '819c8a66a6a6e57fa6880428283ec15abdbe156c', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '8fd782c2ff869a6fa4c97d5b288e22cd2fa7ba23', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: 'a81599aff2048e1892786bb8fe9bac7b2d7b40b1', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '2518dec8fcdb41d90515f87acf9b3e2981b566c5', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'e888e7073def48cffe0ce154e24e1b9fe9135611' }, index.h("smoothly-theme-colors", { key: 'c8c3534552f5323237d85fc7d50af3fc6f533090' }), index.h("smoothly-theme-guide", { key: '869257251d0729234703bd6cb8c68de0db849b43' })), index.h("smoothly-button", { key: 'd3ecb0a5b3d88cb4c63b60cf330c6017f898dab4', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '56a2e47b8b4d36cadfc442391bc95b56ccf311b3', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: '991344bf7d8a88f2fe738b515ef29ba62a8a0d5c', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: 'b94998a705611595cf25226ffc19d570b6dc5464', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -12803,14 +12799,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index.h("smoothly-display", { key: '73aced140e98364ab32b558c8f2957a6eeb7ebc0' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index.h("br", { key: 'f03d94ad53fb3c09f469259175b621b7c7cd50e7' }),
-            index.h("smoothly-display", { key: 'b93d13d77f9c7fb00e5daef73a3c04b1dc3e4682' }, "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: '9e7d54e25677e2d38522a50188088630451e8db5' }),
-            index.h("smoothly-display", { key: '95eb20b5ca9d5e51d500e045ecf9b857366a3835' }, "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: '368566d705df9860fb6ab4c986baebefb7b3c539' }),
-            index.h("smoothly-display", { key: '6b981748e1642f940dca3c4fd56d4298272efb7e' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index.h("br", { key: 'df8636fd9068f981efdddb4fd1f9b33d98acdfe1' }),
+            index.h("smoothly-display", { key: '5f3e82ef898a908dad3df3bb045134ab8ec9807a' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: '8bee8f4e946cdc9cf6e3f80317654c43869e731c' }),
+            index.h("smoothly-display", { key: 'e02e4a3628e4b324a5b86186fab39c588c0e14af' }, "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: '1177655f64e95a71ab171b6de3e3e6a6959013da' }),
+            index.h("smoothly-display", { key: '25b2a9479054ec6444219f283bee9e15213ac625' }, "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: '1fc34addce8b39423e0dad54d079ad9eb9d0c91b' }),
+            index.h("smoothly-display", { key: '2242f781b7215cf26bd949040d2b973668c4b339' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: 'f6e78bb809b328a097dc190cb0af9d6c2e9a551a' }),
         ];
     }
 };
@@ -12825,11 +12821,11 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: '3b06c8bdbf291fc5f577044962f583375660b853' }, index.h("smoothly-input-select", { key: 'f4d9aaeaad1ac395bda8e11bcd10c3f71d9317ec', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '74d4249c1c95bd276711448cb0a2ab23589cd17a' }, index.h("smoothly-input-select", { key: 'd3eb6ca7003a9cb9b2354481b7c8fbd9bbc696c6', 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: '5182e27204a212ac887561d8660e14f072a124d8', slot: "label" }, "Select theme"), index.h("slot", { key: 'bd7fa9a727b640068089b128db1a4de905a49feb' }))));
+            } }, index.h("label", { key: 'bc5cd26f28ddb26320b6cd3735b2eb2f007903f6', slot: "label" }, "Select theme"), index.h("slot", { key: 'd401bb6124c7367621ffbc096d009991da03c788' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -12850,7 +12846,7 @@ const SmoothlyToggle = class {
         this.selected = !this.selected;
     }
     render() {
-        return (index.h("button", { key: '943fdf3c2020e09c03e37110ce01927e31b915bd' }, index.h("slot", { key: 'dcb1b18047edc69ecbd80d883c2e974fe33e6951', name: "icon-slot" }), index.h("slot", { key: '3d8fc1215e43327649d6b8c90e8f6e6ed46ac440' }, this.name)));
+        return (index.h("button", { key: 'dcc4fb1501d1059f1a845a616e4387f4a6ba675f' }, index.h("slot", { key: '6570d25b681e52225d5e31d8a184734eb402a12d', name: "icon-slot" }), index.h("slot", { key: '6c19de7e4e15280fc28487e96baef1aa57d789dd' }, this.name)));
     }
 };
 SmoothlyToggle.style = SmoothlyToggleStyle0;
@@ -12874,7 +12870,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index.h(index.Host, { key: 'ffb27188be61fc8c2ada8a404af42be35ced322d' }, index.h("button", { key: 'd816de8b00238c8758466ae330c6c5db27ee0242', disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: '80a5ca52f10517e4810023a596ef08994ffa3440', 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: '9169a2949e95bb111323cf750b56f907da78bcf7' }, index.h("button", { key: 'c6429fc7967b812d1481c1cba31978b9b74828cb', disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: '49d849d7fc6aa852df2bfca25ef2a7fae5940e83', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -12887,7 +12883,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7cf6fe092063bfcc2a0b5ce00390608c7ceb3e35' }, index.h("h4", { key: '650888efb65135a0af4525a326a3503a9e75bbea' }, "Toggle switches"), index.h("div", { key: '340d00ecd16ca494455452861e0fdfbdd14f9bf4' }, index.h("p", { key: '4b5aa3e5744bf2e80a38b9d51a60a475e9b83f21' }, "Checkmark"), index.h("span", { key: 'dfb0037144b00a27e8a254fa160f32ab1f6157d2' }, index.h("p", { key: 'c8446ba9bbb5f057375466ccc68b2587c021f980' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '0a211ca5f13225f87da1eb532a493c0c73343193', disabled: false, size: "tiny" })), index.h("span", { key: '13bca9557cfa2b4cc415b4abd89fbdea9e55c9d4' }, index.h("p", { key: '8de177d62eeee0051c41096716fa4ca1a36739fc' }, "Small"), index.h("smoothly-toggle-switch", { key: 'ea7aa17918176f5fa1c71e244be978f7eafa5052', disabled: false, size: "small" })), index.h("span", { key: '1dc744e7d8ed1535eb3d507e307fb9f11f3380af' }, index.h("p", { key: 'd49d0be30eba8392635172004f1156540b2293ab' }, "Standard"), index.h("smoothly-toggle-switch", { key: '42f4d36895aa794d5f274f5129dda23ea72398f3', disabled: false })), index.h("span", { key: '652700c32164c5031adaa6f43955901eb1095bb9' }, index.h("p", { key: 'dab8f0b9025a99fb6ca9a3ba6e4e5ce9254dd0f3' }, "Large"), index.h("smoothly-toggle-switch", { key: 'd4473d3d9943e8cf461c712c8f58cb99aaba0013', disabled: false, size: "large" })), index.h("p", { key: 'f3b130b5d488f9f2c1854ac2c9a34a8deef221c1' }, "Colors checkmark"), index.h("span", { key: 'd9158b70cff53031fabbf28424eb3f3f88aa2598' }, index.h("p", { key: '737c97eaf035b4e061c8d9237a61b4ad9aabb32e' }, "Danger"), index.h("smoothly-toggle-switch", { key: '2e675f71873242c3d05abc0432fd2ee5f4a1bc44', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '80cd3de234536333f0bf295d4b8b55aa67d6c593' }, index.h("p", { key: 'cc9b82a775e9d5760ae1114a117d1971ef0dfabb' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '5e4faa94056c423207db5ee56044029b2029cc49', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'd4c08e700f6279d790082a6d8a6cf82bc80593b6' }, index.h("p", { key: 'dc2b2be553c249465279c5d3126f1bce155b217c' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '6ca09980d762d90d61e1b16c61fa3bebcc3fd8ed', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'b99e95bc2fe2d8b1fa56395ff7cd11f5ea504bf2' }), index.h("p", { key: 'f068ce4b6cb5c137c3937ba24f62249f373050e5' }, "Colors no checkmark"), index.h("span", { key: 'a10998da8b515d78c1ecfff6a70dca9b9925ea3d' }, index.h("p", { key: 'e6ad7c694a6f48ed202c9c9750ded94e9fa2d562' }, "Danger"), index.h("smoothly-toggle-switch", { key: '67a6fbfb0a4ce235d6f9a055d8105660964abb71', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'd035077c4acded94ad12659b6468cc30eec8aecd' }, index.h("p", { key: '0b2b5af4e4d6e45d8b116becaaf65854c35d1e9c' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'bf46cdf92b6b1e71ca9f57d284341a6c8c2a62de', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '730d9706d731826fa1f71c4eb68bb02019fa74f2' }, index.h("p", { key: '5d3323546f9e6917cc0a5a99f4e584d56ecb87f4' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '781749106ba74f78cee1874f624ce8e5e1c5c78a', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index.h(index.Host, { key: 'f39c9bd96a09d0e923d1c3224a6a5035b4767cff' }, index.h("h4", { key: 'a685c0f405df706eb35f0e0a6db45a43607b79e3' }, "Toggle switches"), index.h("div", { key: 'e3630439aad613b588ece3e486cf0c118e152660' }, index.h("p", { key: 'd375bbd5a1dc9c0a8947fe48f77f81e84cc38c59' }, "Checkmark"), index.h("span", { key: '7f4b37a2262b0e88771b51e174c89b7003a45096' }, index.h("p", { key: '1e0dc32ee07e2b0f1bb80d0fe18be846153533c3' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '7d70e3cb529a1746d4d5760beb382563ee4cd37c', disabled: false, size: "tiny" })), index.h("span", { key: '369fea518ce84566a6c437d7cf9d51174a3194f9' }, index.h("p", { key: 'a78206bd549fe7ab82e62d52a4c1f0d66a5b6ef3' }, "Small"), index.h("smoothly-toggle-switch", { key: '4f76542dba6e99088aaf9768787707b6a6629f0d', disabled: false, size: "small" })), index.h("span", { key: '3daa27b3b684458f5d3960aba871c64bbcfb266b' }, index.h("p", { key: 'd36cfba0cdf94938a46cfb53e31a10bdb053f788' }, "Standard"), index.h("smoothly-toggle-switch", { key: '171bddf8a2fbeb403ac200471254d6147bad885e', disabled: false })), index.h("span", { key: 'ff29db9889a9df8c80845bdedab507609bb54428' }, index.h("p", { key: '20795a3c0a45899cab621d7142e9435b6a80e8ae' }, "Large"), index.h("smoothly-toggle-switch", { key: '5b68c70b33e58f0f4fd63780de5733061986c7f0', disabled: false, size: "large" })), index.h("p", { key: '965f67b0d14a9dc98a7c8115e9ddbb3733be77dc' }, "Colors checkmark"), index.h("span", { key: '71792ecaefb78247161087a5d62b14d9c10443e6' }, index.h("p", { key: 'd50d14cde3991ff05988cb5c632a2b5c32e7e4b2' }, "Danger"), index.h("smoothly-toggle-switch", { key: '5f73bf6fea5fc81b7d91b82ce0950af559371190', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '9e66d73d65a83b81c1fbd7ec11bb923d50e897e6' }, index.h("p", { key: 'c8033049223aba40a7e00c12cc5762203d053116' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'a6c202c12451d0ce08bba7796b07c1e9bc88bec7', color: "primary", disabled: false, size: "small" })), index.h("span", { key: '4ac63276bd759a9c4e1e64b830b154686f339f16' }, index.h("p", { key: '7268b7bc3de165f687f8d8456ee4b6c568deef73' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '119c5892e7f9898c16a0ddbef6603944900bd1ad', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'cc2bbd9cffc582e142d1e7c397badbd64446670e' }), index.h("p", { key: 'cb5b70edec4f45a624685932dd6c11a55ce2781f' }, "Colors no checkmark"), index.h("span", { key: '7c7cc88cfab6d67e8ab03885110d71534cbfb73d' }, index.h("p", { key: '1f1d2ff9db3e33f2bd0e155cd923be66c117a1f3' }, "Danger"), index.h("smoothly-toggle-switch", { key: '79d9fca1c1588dfefd03386c9fa59dabc53d063a', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '79e0dfaca75de0d237083e5d358f61a8fd01d6c1' }, index.h("p", { key: '1ebaf619c7dbfa34dcbf1f04a4924c399a986240' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '4e300e6628cb3d90a7aa17b51f0b2c7963eb5e4c', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '45f12ad93e943ffe76dfc04bb10bce6b69352eef' }, index.h("p", { key: 'e7fd0c8f688c675ea4db618fe50483983d1b0eba' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '76ca16c9db5362e7bc78cf1c732e0a2f585e9be4', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -12918,7 +12914,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: 'd7b832d4189b926886eee9d1eee0abe4797e4510', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'bfc5c7dfced3f4495d709e538a906a0fcbac636d' })));
+                result = (index.h("button", { key: 'e54d9390e576d5a16a53e1e5ad9db82c270642e9', disabled: this.disabled, name: this.name }, index.h("slot", { key: '979dc421800ca3678880d890e350e5301623f655' })));
                 break;
         }
         return result;