smoothly 1.115.0 → 1.117.0

package/dist/collection/components/input/edit/index.js

@@ -24,7 +24,7 @@ export class SmoothlyInputEdit {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3fa8bd92acf77d574acfe3bd36d305e043376237', title: this.tooltip }, h("smoothly-button", { key: '758777db051b7ed16e62e11c01c74d718cfefea7', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '15d7fef684aa41d04a1a5e11ffa18480ae6aeee8' }), h("smoothly-icon", { key: 'd47e6290709546c917d2b15ad60e30fa1df11410', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: '9a5ec7132b415604c425c43a2ac7c460c6ca784b', title: this.tooltip }, h("smoothly-button", { key: '68711cee29eb01755e85b9acb21bd153ef88f2df', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '73063df194c9194a5d06dc2c1d0fee8d03d0cdfa' }), h("smoothly-icon", { key: '39b4f6d6a588feeedfd6610777e323dc0da34f32', class: "default", name: "create-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-edit"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/file/index.js

@@ -104,7 +104,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '92ab54c45c171373ca1202527ac452358b1c8de8', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'e7865d1f743acdb3f262f812e47a7aa33e7f455b' }, h("slot", { key: 'ea009dfb71d55f4de0214c0188abdeca97cfb126', name: "label" })), h("div", { key: '9875aef8a3075c1c93450da31789c263279d2104', class: "input" }, h("smoothly-button", { key: '70c1985a28a92b0df083fcf89caa8bc6798f94ee', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '4b3eb404ef91e9ed042e2fd99b22e012a7f07780', name: "button" })), h("span", { key: 'e41716ae95c78739678c28d50d9ba65f830384fd' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '89f1c26d6d4d7bb4cc52b8897ee30bd1b36717d8', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: 'b88edd52dcbe45bc147a152cb8550de5487dfd70', name: "document-attach-outline" })), h("input", { key: '44aed5773dc5425b492ef090685df3575a1358e6', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '4a24ad4127a02b97b04369952822aa354509ca0d', onClick: (e) => e.stopPropagation() }, h("slot", { key: '70189241ca504152198d2c20c68bdfc0f31eb71b', name: "end" }))));
+        return (h(Host, { key: '2e050fb7cb01d7ca5883d61d758ac5977e4dc924', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'f86995572138b5b55929705c4aa61bb3b3c8a1d1' }, h("slot", { key: '52a4f69b13363d0a1fce31f90606ff4d21208121', name: "label" })), h("div", { key: 'c54b40386b0d0efba68b056be954938879ed7df9', class: "input" }, h("smoothly-button", { key: '9e410cfb7cb0fc2b978f4f74256a753c43491f17', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '41b301b936471d3c57001a1dbd44ca8372624c3a', name: "button" })), h("span", { key: '619c56a1f7e01df014208f2b4372db8a3da3daeb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '22bc6bb85102cb5863ed88a7d6cbd51fd931c646', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '6614887b4520638121de556ee1b22cbb7da6ed7f', name: "document-attach-outline" })), h("input", { key: 'f93e131c684891ac1b7f956a699db014dde8108c', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '0d1d1835e479070204bc72f083a6747d05387c82', onClick: (e) => e.stopPropagation() }, h("slot", { key: '7df7be0bc7f23c18e349bf5bba640a6cfa83813d', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/index.js

@@ -134,7 +134,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: 'c5d524d1f3afd855836d16272830f435bbea828a', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: '99bf0a11a07a3aa1622cacb8b16979a08f0ab4ec', name: "start" }), h("div", { key: '230008efd3abd69c42442777c0b2091b8499f42e', class: "smoothly-input-container" }, h("div", { key: '37fbfc2747d5c22d1345df109fa74438261f97d7', class: "guide" }, h("div", { key: 'ae7ef0e2563c7058305457d3b45ee54ad0d8f575', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '3149dc1dc1104e1f7958d71660c634bc9d1532d0', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'c4205c491d6482072762c8cac4f8b9eb06e8c09b', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
+        return (h(Host, { key: 'fab11232a335374619f88d481c37d4e5b3d11f8e', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: 'a0c8cae6adbad3694a28ec8e1e043fa7a8ceb98a', name: "start" }), h("div", { key: 'a2d20222eaa4b3edbc42360bc290f7216d17cca1', class: "smoothly-input-container" }, h("div", { key: '7f076aae537f15217e7bc960c495438729e06c8a', class: "guide" }, h("div", { key: '3b0078359bcc30eb6932c8f667abff7d4f0fe38b', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '2e5bc6a765e9249235b34ec25b6d3e67ee0a475e', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '6062569e9a2fbb73e9785005061a204784cef36f', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled) {
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -150,7 +150,7 @@ export class SmoothlyInput {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), h("label", { key: '009823ce38acac92179f491d72cb504d70f09280', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'b1a6fee2719d4cf37fa73460a3ce42ca40e7ba4b' }))), this.copyable && this.value && (h("span", { key: '575ba5bf3d4fd4bfcc1766e8bed17fb918c15db1', class: "copyable" }, h("small", { key: 'cfcca12301172ebf57db536e4b82faa1f7d430c4' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: 'bc941fd7e23670f3232eb29f00124ce94ef201eb', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: '87bceaa7c79365c97b4757637dee596a3757e8b7', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '39251aaac3bdd727fbfaf16eb79048d2a29231e6', name: "end" })));
+            } }), h("label", { key: '43e8d3ad1afdaa8a8b6fa55583c0d40a3bf24acd', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '3614b3dc27033e9c7b382cfe839adab598f35447' }))), this.copyable && this.value && (h("span", { key: '5e2cb462b6cdde196955d26bf481f9bbcad7e331', class: "copyable" }, h("small", { key: 'c3730452979b2edd6b675990ac627a4e5dd839e4' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: '9d18b939ea4e9b83e5d114b6cea73c66dad07503', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: 'c730f983b4a58c59ac60eb8539a199811655e4f0', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '00a182be5038019d825ec5b6fa8a87026c50cfa3', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/month/index.js

@@ -107,21 +107,21 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '28204b265ebea6c0cbb757b8cc4a6a1e01e3b74c' }, h("smoothly-icon", { key: 'f4c14f7bf0825b0baede2c01ff097482ec9d75f5', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: '0916e28b908af47e518baff4c2953a15c4e5b93e' }, h("smoothly-icon", { key: 'fd4d9e582a0feb692b8fc4455e0fef445326d929', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: '08a0e79d5558899bbc60d20b9a3e8b13bd736bed', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: 'b09547849f9f3e7f3780ea4e6231bcd47c4ae175', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const month = e.detail.value;
                 if (month && isoly.Date.is(month)) {
                     const value = isoly.Date.firstOfMonth(month);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: 'fe85ea22cbf1dda9cbae9ba96b2d6e45343c9a31', slot: "label" }, h("slot", { key: '1f0e5aef19949285791558528dac50ada4cb1f32', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: 'a5718197e3389df6c5d175ecf362826e5a6dafad', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, searchDisabled: true }, h("div", { key: 'e1f4f143cfef863419a68b24e887579ecf3fe9d9', slot: "label" }, h("slot", { key: '01b386aa3ec76ba077158774c26256b1c25c97ca', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: 'c7193a5c1430db7fbb14766b5e1985e1258cdb77', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const year = e.detail.value;
                 if (year && isoly.Date.is(year)) {
                     const value = isoly.Date.firstOfMonth(year);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: 'd4d00cd1968bf5766fee52de789f9fe983730210', slot: "label" }, h("slot", { key: '1b0a796b6cb66e6c549cd6eaef2f281ef519816a', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: 'dc499bc33e59e0f918194a7a4b3a61bcdd270600', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
+            }, searchDisabled: true }, h("div", { key: '0d5bc697879c2c018331583326029b20fc7a442c', slot: "label" }, h("slot", { key: '3909a5c34b455c6ed65f6bebf7a2174e0577de2b', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: '441a3228fcb722ab8ebbcb1138aba71e0306625a', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
     static get is() { return "smoothly-input-month"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/radio/item/index.js

@@ -24,7 +24,7 @@ export class SmoothlyInputRadioItem {
         });
     }
     render() {
-        return (h(Host, { key: '548451e8afccb134004214398c0b040031bc9592', onClick: () => this.inputHandler(true) }, h("input", { key: '75518c6651b452bce6ec4f805555871bb503d032', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '0edda6108f36a759d2bab5e188c4c336daaa1756', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: '0e909f5c587e643e61fb99c3b5458009591ac813' }, h("slot", { key: '026b2f86ba15cbff2b7fc4e2514b82cdf0d7941a' })), h("slot", { key: 'cc688d36199d3de40150f38763035593d96a1799', name: "detail" })));
+        return (h(Host, { key: '6cda60049d14ae191ab196ba44e1b865b337638c', onClick: () => this.inputHandler(true) }, h("input", { key: '5e312eb0fef6fde4eeaa6f450447b0d2cd0536fe', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: 'ac4eed680c8cb314f1b5f4a9857e6646aac6cb82', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: 'c96f7fcd07b7687db703519960ae88101abb17c6' }, h("slot", { key: 'a3628941ed9b7a933c3a92908b0b5fd03d20d98e' })), h("slot", { key: 'f689489ccc1616f2715c1336979f674d64f56a9c', name: "detail" })));
     }
     static get is() { return "smoothly-input-radio-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/range/demo/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputRangeDemo {
     render() {
-        return (h(Host, { key: '93085adc52dbed67cd824108eaaf64b3bda0fb6e' }, h("h2", { key: 'a91437c641e21986ad592c73f92a14234eddb9b9' }, "Range"), h("h3", { key: '5003225e9af30f278a7f37ccc1daab93df370e80' }, "Phone Number"), h("smoothly-input-range", { key: '5c790737cea0d76367f27072088ee92dec80a662', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '6bff0c3ac7f529787a042a7b02256eae19ad5b4b' }, "Stars out of ten"), h("smoothly-input-range", { key: 'eaee03d21dc424fc65158b29a4a7d3b255209fd3', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'f2124aaca6dccfa59cf65efbb9dfbecebf575740' }, "Percent"), h("smoothly-input-range", { key: 'ce14e10e75cf3320b2699021f99c5757b6598bbe', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: 'a12635fed326ae754cef8e15aa8f728c0bea9639' }, "With icon at start and clear button"), h("smoothly-input-range", { key: 'f8050fdae3ff4e0be8f00914e6580d69df51c18b', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '438d15ceb8cd3360ebc6394ee7aee2b0131ac808', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '98dd0d35d727339290b76dfcf4348a846db22396', size: "icon", slot: "end" }))));
+        return (h(Host, { key: 'fd572625434e3a3a511d2fdc4e39a11734eee8fb' }, h("h2", { key: '0bf7d54f8cf11e3e870d6c1152fdad2665baf305' }, "Range"), h("h3", { key: '37f05494fea8a36a05684fb0ad0aede0d27630aa' }, "Phone Number"), h("smoothly-input-range", { key: '68d94bdeb4db077a49a011c4849e99a1b33db40b', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'd1b81f1dae6424d685997bd8dfe02a10832a1b2a' }, "Stars out of ten"), h("smoothly-input-range", { key: 'dca3283520395117ed946a844bb46f7fc52c0212', max: 10, step: 1, label: "Stars" }), h("h3", { key: '8670432a44d93f9f7dbc315c1f0a51d9aa79100a' }, "Percent"), h("smoothly-input-range", { key: '78863ada16280bb963e15f1682aa8131667a1bd3', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '1b4a9ba5d75f92f1f90dc46a4710a35edd2fe2e9' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '95c8798a86fc50de7ad65b67f837a71e2743c2ae', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: 'f44529bf690bcf4ceff1dfa1520d2cf92a456f2f', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '27ef758b1ba28f93ae5a19cc14fb1bdbf1415c70', size: "icon", slot: "end" }))));
     }
     static get is() { return "smoothly-input-range-demo"; }
 }

package/dist/collection/components/input/range/index.js

@@ -96,18 +96,18 @@ export class SmoothlyInputRange {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'db02e0bee4842a0dcce6ee6856758372481f2fb4', class: {
+        return (h(Host, { key: '5156fee6f8e0d7a3a14c11bc6476424935972d46', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '5bcbb8d839800fef403fc14fc981182f6ed9ae30', name: "start" }), h("div", { key: '26827d93b47f12eef2709aea32588c1ec6786337' }, h("label", { key: '20c1213e52d592773db4c68b2bfcfb721d62d364', htmlFor: this.name }, this.label), h("smoothly-input", { key: '5e0bdd6c0467690f2d91cc33f24e7f3710f4b063', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, h("slot", { key: '85ba263c778cec6970979f819a815a98088a8dae', name: "start" }), h("div", { key: 'd1e281cc39cfd5b442c298659ddad32927f83a7e' }, h("label", { key: 'fbe971c908c237c3f2497e8c5c4d858abf031be6', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'a123e5a35b4524d8d3f200f31dea6586947e2a3e', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: 'a5502d4adaff32f798bc8e8b198d8f5258ab27e3', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'e2afaea01a569f8cafcbfa09dab6ad6551e76f07', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: '8d3df2b1b5899cfe814bb70754ca586af4a5de25', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '819a42fa4da5e95b804260f99197524fa2aaf90d', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
                 this.smoothlyUserInput.emit({ name: this.name, value: this.value });
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '92c309c4224fe86c16b22445f2ef1ba4168306e8', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'f9373a748b2d160781543f267373f12c43dfd46b', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: 'f0d1d8872a42854cf442f996de63ffcf584995cf', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'e3e904b4883dbceda975cd4d74cd526b77c5d471', name: "end" })));
     }
     static get is() { return "smoothly-input-range"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/reset/index.js

@@ -41,7 +41,7 @@ export class SmoothlyInputReset {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8be31b0878733c9af02d47f85fb2ce160d66f064', title: this.tooltip }, h("smoothly-button", { key: 'ffacca4558cfe1b94c3399ecbb4384ca6730c208', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, h("slot", { key: 'a0b3a925b4062d14975cb3479f4cee3f40de7af7' }), h("smoothly-icon", { key: '8ca0aa0f3a534558de7fcefafe9267a1992d9594', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: 'f69a407428454170f461cee5d8e6b8ece33f682f', title: this.tooltip }, h("smoothly-button", { key: '21fed26fa5cb6c8dc32af427f492cb5879682d3c', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, h("slot", { key: 'ed9f01c4274c9b5b59c6cd27c2cdd62e3a7bb259' }), h("smoothly-icon", { key: '0ddd9963d333449a5d029b6c29f532ca8d2b3423', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-reset"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/select/index.js

@@ -283,11 +283,11 @@ export class SmoothlyInputSelect {
         }
     }
     render() {
-        return (h(Host, { key: '3eb062d5cc34ecef9c9341630243d549aad808c3', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, h("div", { key: 'e605a24480a0b3dafbd1b596fac1725d5e25be84', class: "select-display", ref: element => (this.displayElement = element) }, this.placeholder), h("div", { key: '3366fc93ccab479a0d9d67e206617941ad091340', class: "icons", ref: element => (this.iconsElement = element) }, h("smoothly-icon", { key: '3f64b7dc283062976a7292160917ab7a8c281521', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'be63eaedc949912f5717ecceabb64ac93910dc98', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: 'e41773f5b431e916f8177e76b877290c5cad7db6', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: 'd2c2d0d9a983dfe2609b18eedda29244a339bbd8', name: "label" }), h("div", { key: '5e51033c06fa134e945ff2c27245340bcaed2069', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, h("div", { key: 'f4237bc5b2001f68aa5fc0b30a0df08f4bf2bc4e', class: "search" }, h("smoothly-icon", { key: 'b23bba84f76f4da515ddeffa9a2ae7f62277915b', name: "search-outline", size: "small" }), h("input", { key: '86e28d85b9fd95a039d084db092b098342244813', class: "search-input", ref: el => (this.searchElement = el), disabled: this.searchDisabled, onKeyDown: e => this.onKeyDown(e), onInput: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); }, onPaste: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); } }), h("smoothly-icon", { key: 'e585529e50786c3ffc2dab72245230debd60558f', name: "backspace-outline", size: "small", onClick: () => {
+        return (h(Host, { key: '6d9239e0bb319a543a99a7c1d5876ab8956834af', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, h("div", { key: '1bbd7412577695182436ea90d1e9034e541ddc2a', class: "select-display", ref: element => (this.displayElement = element) }, this.placeholder), h("div", { key: '20ae505d620469c1c9c1844891b17001833583c9', class: "icons", ref: element => (this.iconsElement = element) }, h("smoothly-icon", { key: '281acc334850d4f32a2a73c289181b5aba66c955', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'c571161f39c874c66656f81a7aa3fcf2f3526cdb', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '555d40a6a768e0f28e427f8eade8afd35d127f00', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '009fd9d19911fb0790d2850f9d10b867da144ed1', name: "label" }), h("div", { key: '5b7eeb9d3aefeabdf47193a367d47f314696ea2f', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, h("div", { key: '8f6e8ddc7f8b5505ee806d0a1fbf081d25feba28', class: "search" }, h("smoothly-icon", { key: 'e49ae095f2dc52ed27f8b8006cf41fa65e880d76', name: "search-outline", size: "small" }), h("input", { key: '2c8c17873271a717f6ee14455ecb717280a45b99', class: "search-input", ref: el => (this.searchElement = el), disabled: this.searchDisabled, onKeyDown: e => this.onKeyDown(e), onInput: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); }, onPaste: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); } }), h("smoothly-icon", { key: '7b008955b46e1c60e5fff82faf06f2899e6cabd1', name: "backspace-outline", size: "small", onClick: () => {
                 var _a;
                 this.resetFilter();
                 (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus();
-            } }), this.mutable && h("smoothly-icon", { key: '49866182fe80ba3ad18e1b821e7c2a55852f4bb2', name: "add", size: "small", onClick: () => this.addItem() })), h("div", { key: 'f635f6143d0eeff2e01fa0283f7f7d1c337ef8d8', class: "menu", hidden: !this.open }, h("slot", { key: '7f483cf3b64fb231c724ef4004073cf232d1a7ad' }), this.addedItems))));
+            } }), this.mutable && h("smoothly-icon", { key: 'c8ad6a47483f41b314cd432a55820df927feb326', name: "add", size: "small", onClick: () => this.addItem() })), h("div", { key: '7d6c90136e1d0ff45b1639d3366c312c94ffde33', class: "menu", hidden: !this.open }, h("slot", { key: 'aca107a78851a9af53747d7ee022255ceac9dc9c' }), this.addedItems))));
     }
     static get is() { return "smoothly-input-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/submit/index.js

@@ -40,7 +40,7 @@ export class SmoothlyInputSubmit {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '771dbd864209f2f419212813858c654de9352797', title: this.tooltip }, this.delete == true ? (h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (h(Host, { key: '70b53b4424d3bb5c5daf2d8cedbc0ef488a35e38', title: this.tooltip }, this.delete == true ? (h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
     static get is() { return "smoothly-input-submit"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/item/index.js

@@ -34,7 +34,7 @@ export class SmoothlyItem {
             : false;
     }
     render() {
-        return (h(Host, { key: 'a7ee995ec37b480a02715fb95c885152560cc0c1', tabIndex: -1 }, h("slot", { key: 'dcc2403a2253a7059dc88b4658c17c6533876a9f' })));
+        return (h(Host, { key: 'f86c77b9ed66eeca4f9521883517fea9a8ce3292', tabIndex: -1 }, h("slot", { key: '9a72363e41c726d78c213179afcebafcafa48abc' })));
     }
     static get is() { return "smoothly-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/label/index.js

@@ -2,9 +2,9 @@ import { h, Host } from "@stencil/core";
 export class SmoothlyLabel {
     render() {
         var _a;
-        return (h(Host, { key: '2ae229f53b855fbc470064e7ded803a990d98711', title: this.description, style: {
+        return (h(Host, { key: 'ce3bb78edc46a6edd6ceeb2d8d799835e74e889e', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '52d6798bf0fbea2948297aad2fe3a71a000b4f76' })));
+            } }, h("slot", { key: 'e2d3e99a943fe1a2e862e0102d87c327c9c3f1b8' })));
     }
     static get is() { return "smoothly-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/lazy/index.js

@@ -8,7 +8,7 @@ export class SmoothlyLazy {
         this.show = true;
     }
     render() {
-        return (h(Host, { key: 'ecab373df940835270db5097a80b0214fc97907f' }, h("slot", { key: 'ac37f8070fab8c51b229f6dc81c9f2e65e64f251', name: "before" }), h("smoothly-load-more", { key: '3e43d4fd0c5f37d7826b7cc7da796fec07c7f7be', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '815b33c3657c84b81f0dd12768f2f2e983df48a9' })));
+        return (h(Host, { key: 'ba06250ac8a325c3b51801b09999efdbd0c552f6' }, h("slot", { key: '89e3aa0b677038bac4a999c3aba63e8f86f3e9ea', name: "before" }), h("smoothly-load-more", { key: '4d817981ffa9f3231972a3eb153339ca805c05e3', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '55ab66fb5706d1bb40350a5b545b97ddb5787eab' })));
     }
     static get is() { return "smoothly-lazy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/load-more/index.js

@@ -37,7 +37,7 @@ export class LoadMore {
         }
     }
     render() {
-        return h(Host, { key: '88150a06ccdec5a72446a3f8dac86339b3007b72' });
+        return h(Host, { key: 'c53981c4ea71c41217b4a4262c971dab45a84fe9' });
     }
     static get is() { return "smoothly-load-more"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/modal/index.js

@@ -15,9 +15,9 @@ export class SmoothlyModal {
         this.open = true;
     }
     render() {
-        return (h(Host, { key: '12ffaa744cfce7d329f9e335be7b63827eb40644', role: "alertdialog", onClick: (e) => {
+        return (h(Host, { key: 'c8517f814256addf886be09be0058a8c15b73c14', role: "alertdialog", onClick: (e) => {
                 this.closable && !e.composedPath().some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("modal"); }) && this.closeModal();
-            } }, h("div", { key: '264ba4a63559188eb2fdc52d0b15014ff8991622', class: "modal" }, h("div", { key: 'c99296b4e6b05e4669ffb56b4ae93bf815e2e449', class: "header" }, h("slot", { key: 'cf25306f526a89e8daea125faaecb33d72fa9e4d', name: "header" }), this.closable && h("smoothly-icon", { key: 'd676f4f20a6ee187295a7f7ebc573e3a06a98ed6', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '22955703aec9be9e882bb77cfd0fd327f2436903' }), h("div", { key: 'd8dd03aa8538e9cb373282aab2f55a6793e76c83', class: "actions" }, h("slot", { key: '45b9e1bf4300ea44dbf13b50839ca9689576121e', name: "actions" })))));
+            } }, h("div", { key: '665feff20545ab424191b52e7cba17414d6d79c9', class: "modal" }, h("div", { key: '1a459e840e395cc03825883b8305c070929dfc34', class: "header" }, h("slot", { key: 'b89490cc7029d45456126502db3985fcfdd99fd9', name: "header" }), this.closable && h("smoothly-icon", { key: '83559c6915c83f2f2fdc0ac3e173e55845b7b4f3', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '4f069fcb1506d9fbdcaba2c657c7af533dec9bae' }), h("div", { key: 'df07bf9b97164aa24c8a7c41440494372f2ae9e0', class: "actions" }, h("slot", { key: '78a5774d274306aef00dc5a6cb91bf0027b84543', name: "actions" })))));
     }
     static get is() { return "smoothly-modal"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/notification/index.js

@@ -50,7 +50,7 @@ export class Notification {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: '6c91fd348be22152c98396a00e0f333901e7edb3', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'dfb962471e36cd4b2b063d81470dd2500c5f52ab', fill: "clear", name: "close" }, h("smoothly-icon", { key: '0552e3732cdc2371b430c565b7bc243a6b855446', name: "close-circle-outline" }))), h("span", { key: 'c7df2fc46e03a56f937d3fcddce3ee9a9a199b88', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '8662182866050fc3aaeeb51b0d79529c0a57e10b', name: this.properties[1] }), h("p", { key: '0f539660c5267a748ba9fc514abdd33429b9042d' }, this.notice.message))));
+        return (h(Host, { key: '73f1ac93fe920e40d0045cf9ae2c756ffe451d66', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'c044dec06d857487dbdb8a17d20c6d07c6b7e370', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'd33fb56efc3ff17f1ba41c16ffd4ed214b98bc57', name: "close-circle-outline" }))), h("span", { key: 'd2554c0a86856c3f8f760d8e71f9761b619ddf41', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: 'f4466028e87356a50f0cdb08ba23dbd1d65d5689', name: this.properties[1] }), h("p", { key: '6de62c145781c1127b7ea762a371f7a142bc324f' }, this.notice.message))));
     }
     static get is() { return "smoothly-notification"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/notifier/demo/index.js

@@ -0,0 +1,37 @@
+import { h } from "@stencil/core";
+import { Notice } from "../../../model";
+export class SmoothlyNotifierDemo {
+    task(succeed, ms = 2000) {
+        return () => new Promise(resolve => window.setTimeout(() => resolve(succeed ? [true, "Task completed."] : [false, "Task failed."]), ms));
+    }
+    render() {
+        return (h("main", { key: 'e3d338d08a8155c994f121e190583b1492631049' }, h("fieldset", { key: '3d775b4ed5229982b2dbe2175a80223ccda92106' }, h("h2", { key: '0a351b1923d27a7bf576c2fbb43cd5368ce6442d' }, "Immediate"), h("p", { key: 'bff747d88b7d561ec2a60a65b76ee0c1bc49ad39' }, "Fires right away and closes after the default 15 seconds."), h("smoothly-button", { key: '1b8830e040cd6530425d3d66b5c78a7ed4e80357', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.succeeded("Payment processed successfully.")) }, "Success"), h("smoothly-button", { key: '3ad3baf9b33d67c27fdd0cff8585f7b6eeed8807', color: "danger", fill: "solid", onClick: () => this.notice.emit(Notice.failed("Payment could not be processed.")) }, "Failed"), h("smoothly-button", { key: '2c90a3b3742edac4c4afcee809048e65375ec705', color: "warning", fill: "solid", onClick: () => this.notice.emit(Notice.warn("Balance is running low.")) }, "Warning")), h("fieldset", { key: 'e9740e78990b6beefb77c16663e96d627b619b7b' }, h("h2", { key: '9668a13f88db3b43b20e84d64339e46c0b876f9a' }, "Task"), h("p", { key: '9625eaf81bd2a90ca74094f5a6ba4a23e8605853' }, "Shows an executing spinner while the task runs, then transitions to success or failure."), h("smoothly-button", { key: 'e99ab12076adc90e2097c7586e4f6d2377ba592c', color: "success", fill: "outline", onClick: () => this.notice.emit(Notice.execute("Processing payment…", this.task(true))) }, "Execute (succeeds after 2s)"), h("smoothly-button", { key: 'c37c6803dcc33ebb1789e981ec9bbd4453df2944', color: "danger", fill: "outline", onClick: () => this.notice.emit(Notice.execute("Processing payment…", this.task(false))) }, "Execute (fails after 2s)"), h("smoothly-button", { key: 'e37ff795ca11e50e80bac180c0b9fae40e8ec587', color: "medium", fill: "solid", onClick: () => this.notice.emit(Notice.delay("Payment scheduled…", this.task(true))) }, "Delay (waits 5s, then executes)")), h("fieldset", { key: 'af63d14a88d1cd79fb022d5efbd9f5a42adf191b' }, h("h2", { key: '2fe03dc548758db94a03948f0595a296e145a0e5' }, "Custom lifetime"), h("p", { key: '6aead78b7f995d63d29f75d8a164aaf2188111bd' }, "Controls how long the notice stays visible after resolving."), h("smoothly-button", { key: 'f480806e042ba24075c030c7a767a1fb4a65de22', color: "success", fill: "solid", onClick: () => this.notice.emit(Notice.succeeded("Gone in 3 seconds.", 3000)) }, "Success (3s)"), h("smoothly-button", { key: 'bd377ef80546a629a08919899fff0e4c57ad24b3', color: "warning", fill: "solid", onClick: () => this.notice.emit(Notice.warn("Sticks around for 30 seconds.", 30000)) }, "Warning (30s)"))));
+    }
+    static get is() { return "smoothly-notifier-demo"; }
+    static get events() {
+        return [{
+                "method": "notice",
+                "name": "notice",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Notice",
+                    "resolved": "Notice",
+                    "references": {
+                        "Notice": {
+                            "location": "import",
+                            "path": "../../../model",
+                            "id": "src/model/index.ts::Notice",
+                            "referenceLocation": "Notice"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/notifier/demo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/notifier/demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAKvC,MAAM,OAAO,oBAAoB;IAGxB,IAAI,CAAC,OAAgB,EAAE,EAAE,GAAG,IAAI;QACvC,OAAO,GAAG,EAAE,CACX,IAAI,OAAO,CAAoB,OAAO,CAAC,EAAE,CACxC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,EAAE,CAAC,CACnG,CAAA;IACH,CAAC;IAED,MAAM;QACL,OAAO,CACN;YACC;gBACC,yEAAkB;gBAClB,wHAAgE;gBAChE,wEACC,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC,cAEnE;gBAClB,wEACC,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,aAEhE;gBAClB,wEACC,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,cAEtD,CACR;YACX;gBACC,oEAAa;gBACb,sJAA8F;gBAC9F,wEACC,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,qBAAqB,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,kCAEtE;gBAClB,wEACC,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,qBAAqB,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,+BAEvE;gBAClB,wEACC,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,oBAAoB,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sCAEnE,CACR;YACX;gBACC,+EAAwB;gBACxB,0HAAkE;gBAClE,wEACC,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC,mBAE5D;gBAClB,wEACC,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,+BAA+B,EAAE,KAAK,CAAC,CAAC,oBAEnE,CACR,CACL,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h } from \"@stencil/core\"\nimport { Notice } from \"../../../model\"\n\n@Component({\n\ttag: \"smoothly-notifier-demo\",\n})\nexport class SmoothlyNotifierDemo {\n\t@Event() notice: EventEmitter<Notice>\n\n\tprivate task(succeed: boolean, ms = 2000): Notice.Task {\n\t\treturn () =>\n\t\t\tnew Promise<[boolean, string]>(resolve =>\n\t\t\t\twindow.setTimeout(() => resolve(succeed ? [true, \"Task completed.\"] : [false, \"Task failed.\"]), ms)\n\t\t\t)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<main>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Immediate</h2>\n\t\t\t\t\t<p>Fires right away and closes after the default 15 seconds.</p>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tcolor=\"success\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonClick={() => this.notice.emit(Notice.succeeded(\"Payment processed successfully.\"))}>\n\t\t\t\t\t\tSuccess\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tcolor=\"danger\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonClick={() => this.notice.emit(Notice.failed(\"Payment could not be processed.\"))}>\n\t\t\t\t\t\tFailed\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tcolor=\"warning\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonClick={() => this.notice.emit(Notice.warn(\"Balance is running low.\"))}>\n\t\t\t\t\t\tWarning\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Task</h2>\n\t\t\t\t\t<p>Shows an executing spinner while the task runs, then transitions to success or failure.</p>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tcolor=\"success\"\n\t\t\t\t\t\tfill=\"outline\"\n\t\t\t\t\t\tonClick={() => this.notice.emit(Notice.execute(\"Processing payment…\", this.task(true)))}>\n\t\t\t\t\t\tExecute (succeeds after 2s)\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tcolor=\"danger\"\n\t\t\t\t\t\tfill=\"outline\"\n\t\t\t\t\t\tonClick={() => this.notice.emit(Notice.execute(\"Processing payment…\", this.task(false)))}>\n\t\t\t\t\t\tExecute (fails after 2s)\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tcolor=\"medium\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonClick={() => this.notice.emit(Notice.delay(\"Payment scheduled…\", this.task(true)))}>\n\t\t\t\t\t\tDelay (waits 5s, then executes)\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Custom lifetime</h2>\n\t\t\t\t\t<p>Controls how long the notice stays visible after resolving.</p>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tcolor=\"success\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonClick={() => this.notice.emit(Notice.succeeded(\"Gone in 3 seconds.\", 3000))}>\n\t\t\t\t\t\tSuccess (3s)\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tcolor=\"warning\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonClick={() => this.notice.emit(Notice.warn(\"Sticks around for 30 seconds.\", 30000))}>\n\t\t\t\t\t\tWarning (30s)\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</fieldset>\n\t\t\t</main>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/notifier/index.js

@@ -11,7 +11,7 @@ export class Notifier {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (h(Host, { key: '00187e7d82c05944c3e4ed5ce6ae2367b113e2fb' }, h("slot", { key: 'ce3b80b8e40d1a745cf910126cde0fa97a16cdc4' }), h("div", { key: '2b8faa5193ebf47c4cb7a8602c3821d44c46dbcb', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (h(Host, { key: '4e003f931f925f8b9b7bf025a30ed5637d1883f6' }, h("slot", { key: '24474dce23d51652d402faf096be33cbd2356a53' }), h("div", { key: '23d8511a4e84d13e2e19a623ebadcc7957881221', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
     static get is() { return "smoothly-notifier"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/spinner/index.js

@@ -5,9 +5,9 @@ export class SmoothlySpinner {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (h(Host, { key: '458303df1f0703dad9d88e9a6c1dfbd063de34e7', style: {
+        return (h(Host, { key: 'ecb6e441b9ff2e197c2b600e2c5b2d51cd95ee89', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, h("svg", { key: '8065db9227fb249027fe4b7dbc79152de2627ec2', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '8da0fa969c76d3930a14005f951f79f20dc6bf57', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, h("svg", { key: '5e6288163ac9a0fe615a91e8431fb78a966630ea', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '7ad5566138f4d87e15be7bc0d4777e80cc6c1f83', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
     static get is() { return "smoothly-spinner"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/submit/index.js

@@ -20,7 +20,7 @@ export class SmoothlySubmit {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (h(Button, { key: 'b56bb200c5af6dd9a949ed1989ef150cf5902f33', disabled: this.disabled, type: this.type }, h("slot", { key: 'c3795191df1b9e6c5a696e7821d0fbc865814cfd' })));
+        return (h(Button, { key: 'acc877b650fa22b82f50c4fd3a5069b2e668c94d', disabled: this.disabled, type: this.type }, h("slot", { key: '9b5dbe03ca023d879223239e24c84208c36c0bb7' })));
     }
     static get is() { return "smoothly-submit"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/summary/index.js

@@ -10,7 +10,7 @@ export class SmoothlySummary {
         }
     }
     render() {
-        return (h("details", { key: 'eff4cfcc4681f7ae8a50dffb024ed2a2c7f34a82', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '579a019b8ae584f018c1a039ad2f637eb136db88' }, h("smoothly-icon", { key: '5b13ecddb1ee8805bba66d60aff9f1cfe8cd10b3', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: 'b01c31deaf1bb7574eaa5a383a5385555444845d', name: "summary" })), h("slot", { key: '04fe3aca685b1108f7227f2c45d28d6ef38e9292', name: "content" })));
+        return (h("details", { key: 'e033a7d2dadc508342c0e35b8b50502452c285f5', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '2081c1c5e3c154fa26e4333f519f56232895ee74' }, h("smoothly-icon", { key: 'e8c587d8d364e72e1dd1e2958db8f784343a8508', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '158befa55709d084049bec16c29d2bef2a2884e0', name: "summary" })), h("slot", { key: 'fff93c13da720ef9e0905ac698bba0baf9dd9c20', name: "content" })));
     }
     static get is() { return "smoothly-summary"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/body/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyTableBody {
     render() {
-        return (h(Host, { key: '35794212738d56a6ee77383f2cdee89a57db82f1' }, h("slot", { key: '34c2c0ce45bc87a5ce11c7ded126b1bdb89af320' })));
+        return (h(Host, { key: '1f19a1c0da7b296ea394daa0bc91ac499424ad0e' }, h("slot", { key: 'acd72cd22a3d49c02de514f5f9818d16ff913897' })));
     }
     static get is() { return "smoothly-table-body"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/cell/index.js

@@ -5,7 +5,7 @@ export class SmoothlyTableCell {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c135688a83c65d795da7cbc7e946df1842b7eee1', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '06ae1f08e462da16c0a010a99facdbd2bd41f71f' })));
+        return (h(Host, { key: '71cd9be174ec7961ae0b338fd5775a0f8b41264c', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '9cbca72183db11968f3a6630bd1a226830754bd7' })));
     }
     static get is() { return "smoothly-table-cell"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/demo/colspan/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyTableDemoColspan {
     render() {
-        return (h(Host, { key: '591888818b4300109779447443c6e5aab1b14da8' }, h("smoothly-table", { key: 'c938d62de711c1ccf5f4688757b3513df44e8af8', columns: 3 }, h("smoothly-table-head", { key: '479a91f092d7ab61f5e023187b3962cbcfa752ea' }, h("smoothly-table-row", { key: '09acaf59f4ab8afc3af9931911547c6c9160e96c' }, h("smoothly-table-cell", { key: '7d8343c2153cc0dad70a3b93f713297911b6a999' }, "Date"), h("smoothly-table-cell", { key: 'e383250690b45d63ca6932488089448063a00b59' }, "Skip"), h("smoothly-table-cell", { key: '9249209f1c691bf8b599c19a7c69241b4c375bfc' }, "Total"))), h("smoothly-table-body", { key: '08ae40864961b80b1522166a429f53962f0248c5' }, h("smoothly-table-row", { key: 'ea7dd286a24979f8d193c215fcf97728a165fa16' }, h("smoothly-table-cell", { key: '441dee1ea77f41f61fc110987a62e404a05aa297', span: 2 }, h("smoothly-display", { key: 'b6f97a5c900d27d4cd5c8a3193c08d379c73da0a', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'a3c7b056c9b0af04ec00c95d01422d2f56c3c806' }, h("smoothly-display", { key: 'dc812c579111236c03c21edaafb7906297cb2625', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: '004a397622e3facc508a92e645a3ac4fa9532e0a' }, h("smoothly-table-expandable-cell", { key: 'a4b75ba00befe6a8a34fc5c99690cb03c3ade7d7', span: 2 }, h("smoothly-display", { key: 'bb91f39b2d8833ad116268618a9be82aa96a2fc4', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '51e9b4cf9d9a9ef15c04996aef32d7ec916ae79b', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: 'cbce7604964ca0c217d549bc1b1e50758b0217b8' }, h("smoothly-display", { key: '3cabab2c49146b2ac49882b592ce38cae1dd17ce', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '84d7a668b2f59da0df7a95eb1fa3d8221365f2f8', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-table-row", { key: '8c8cabd1f86d8c435925a3e2386bfe91f9d604da' }, h("smoothly-table-cell", { key: '36d5b65550ad5c09fed7441e9c0892bdf595d979' }, h("smoothly-display", { key: '3580d0ec9bcabc49ba7e3247786c3626760dd405', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'cf38589846b2f9925a79f79d64c298e96a3174b8' }, "Not Skipped"), h("smoothly-table-cell", { key: '2ae25896d0fcfaa3884da36a63bda5bd730797bd' }, h("smoothly-display", { key: '88fed0a43e38e936abc981beac382b83e86263e6', type: "price", value: 320, currency: "EUR" })))))));
+        return (h(Host, { key: '0c48cda90a42886342351b0a4f4b0ddcdbba84e1' }, h("smoothly-table", { key: '6ddf793f667d275b6e3969331d06c1d2f5e4c491', columns: 3 }, h("smoothly-table-head", { key: '425732dcb06bbc7dd1c5b46689fcb9a5d1f8aae0' }, h("smoothly-table-row", { key: '698dbdfbabfb904df19d92aaef652fc57b4371ad' }, h("smoothly-table-cell", { key: '162b14024e5d5c1993c2c5120f014bd65dc452b8' }, "Date"), h("smoothly-table-cell", { key: '7c8dfddd08a7a241ba4921d48c231e154e8ce2f7' }, "Skip"), h("smoothly-table-cell", { key: '90c02f35f7233314a0478fdef7fe7e8d59ee6307' }, "Total"))), h("smoothly-table-body", { key: 'ee7c05917d77a73653f262da586d358a6c2d8c5f' }, h("smoothly-table-row", { key: 'fb8ea7dbe4c82f92258d4c531f88bf9192a121a7' }, h("smoothly-table-cell", { key: '8c4f6a68055a38eafbbedde78acdec47610c3a45', span: 2 }, h("smoothly-display", { key: '914cbd4c7716cb44df1fb2c9f30e864733398627', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: '28379684e4c04c36261cece4276bd0599bca8201' }, h("smoothly-display", { key: '454f88e0c8f6236864d5507677e87c4129940fd6', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: '484339508d40ad812eb7edd24efa06ed18739b39' }, h("smoothly-table-expandable-cell", { key: '885b10db54f9fb0051f0ac8d878dbd4a5413d698', span: 2 }, h("smoothly-display", { key: '27a9840c4c283269809fef636b95e7dc46d18586', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '031f1ee60536b3b633c7638aed6e0d1d6a013ba8', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: 'c1e0fc733a48eb0e5bf50d0ff70494e0f293b34e' }, h("smoothly-display", { key: 'fe0202769ab5932ed8257867802e297707efdb78', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: 'e170de6a7c33e6ce938e2a5240a33397a9d15d21', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-table-row", { key: 'e06c96d7d22adc11c20140b67b877b69c0b95737' }, h("smoothly-table-cell", { key: '6a6a0d756b16ccc002934e7aea89165959748518' }, h("smoothly-display", { key: '9cabf2591bbfe35af7e58f649a185b872843b365', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'bc20c5059843db6e9a61b5f600ddcbb959c544cd' }, "Not Skipped"), h("smoothly-table-cell", { key: '306e585f47e9eb496ef5a1ddbecfcc9c823adde2' }, h("smoothly-display", { key: 'b1623473097b41ebc6bf1a03eeafd4a650371b98', type: "price", value: 320, currency: "EUR" })))))));
     }
     static get is() { return "smoothly-table-demo-colspan"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/demo/filler-row/index.js

@@ -9,7 +9,7 @@ export class SmoothlyTableDemoFillerRow {
         }, 3000);
     }
     render() {
-        return (h(Host, { key: '38d70dda60dda3debcf93c39712447b147f1f8aa' }, h("smoothly-display", { key: '184a415c969fe7f8067d39b8bca1c60e2cdc525c', type: "text", value: "Filler row" }), h("smoothly-table", { key: 'c25e191ff3a0d83771c8c4057a391af7d29f3aeb', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '6a0abb3c6732c84bbf349fa5564d27d3b0189f36' }, h("smoothly-table-row", { key: '2f91fa838939f85bee7d2fc07bbcf66f19e31af0' }, h("smoothly-table-cell", { key: 'b50f41f05faeb8105905c2d2bc694ceba0291b11' }, "Breed"), h("smoothly-table-cell", { key: '1165986b307056c5356dad70b6ce04059aaebdd1' }, "Country"), h("smoothly-table-cell", { key: '348327ae0225c33862c65c536b31bbab5bd706d9' }, "Coat"), h("smoothly-table-cell", { key: '449b076a7ccb0922362af57fa66bbf081fe73c1d' }, "Origin"))), h("smoothly-table-body", { key: '7b4d12422054f92287036881aaba5156de8adc87' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
+        return (h(Host, { key: '557f61c2ccd69af2aefa39306df1aad555ff0744' }, h("smoothly-display", { key: '7ab6ad735601adb00416b7e36c0cd8815ad61ef8', type: "text", value: "Filler row" }), h("smoothly-table", { key: '5a4a96a7e7eefb555c293a59fa4549566c4e3d37', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '6552d25cd1b2655207fd58a8b193125c5489e44a' }, h("smoothly-table-row", { key: '713cc7a78a8375c1559e6dd612e91012d95d94e9' }, h("smoothly-table-cell", { key: '6916664b0ccc30759af2b01eecbb0720a293e5e1' }, "Breed"), h("smoothly-table-cell", { key: '23ebe72dbbfbb68993ce024cd574a80c78fedf97' }, "Country"), h("smoothly-table-cell", { key: '56dc58c22a7fbc62a5a33d88e11e3198d76cce8b' }, "Coat"), h("smoothly-table-cell", { key: '1b17e1b9e961951228b9134a979e154650a5692f' }, "Origin"))), h("smoothly-table-body", { key: 'e9cabfd3b379487e2f47c4e292f61f219dd1a170' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
     }
     static get is() { return "smoothly-table-demo-filler-row"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/demo/group/index.js

@@ -1,7 +1,7 @@
 import { Fragment, h, Host } from "@stencil/core";
 export class SmoothlyTableDemoGroup {
     render() {
-        return (h(Host, { key: '13ca441187f66529344769d886b77d0c01cf0ec7' }, h("smoothly-display", { key: 'b2dbf9deacd800eb2bbcc303418a5f2ce6344399', type: "text", value: "Group" }), h("smoothly-table", { key: '8e80f2e26eda2a33c65d665d2d369b11a03f39b3', color: "primary", columns: 2 }, h("smoothly-table-head", { key: 'a80ad7e011c9432b00488a3dad6cc48d4cf56ffa' }, h("smoothly-table-row", { key: '9d15a2c5ec712913ef7195f40eae2d7cc4328b43' }, h("smoothly-table-cell", { key: '4658db6a627442459d39caf71d3053c0b0373153' }, "Date"), h("smoothly-table-cell", { key: '62640f3c5426d8b1cbb7e5309b9a5eb8ae1fd244' }, "Total"))), h("smoothly-table-body", { key: '30185fa157aeed1482eb4ed13e227e735450204f' }, h("smoothly-table-row-group", { key: '2f88c12ff6aa6b59f6545f1939c0b390ff04fb9b', align: true }, h("smoothly-display", { key: '504c5fd4776cf580054b1643d3cdf25746b0ef4d', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: 'abb7c187f97506286cce8fdb7cf9e44024cb1eee', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: '4c4ee8e36cdef0fa1c7dd5e088ba27b0470b94a0' }, h("smoothly-table-cell", { key: 'e78d6d08b6b141e5d37e309697ae71a5158aa83e' }, h("smoothly-display", { key: 'd4545cbccf585edd9a753216cd7eb065794cc61d', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: '2bfa64247f7bf2ccf879859f66de74904dd7438f' }, h("smoothly-display", { key: '45bc665caae3e04dd8f4a94ab96d0e5f974c1b66', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: '60b37654b01d3c248d2c7339593990e5a04fb188', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'e18d58866e7e132073ccd951f114780566bc19d8' }, h("smoothly-table-cell", { key: '9bce755fdb66c5a53be2a1a30b897c56cfd292e2' }, h("smoothly-display", { key: 'e93ddd23a90132c87a717651c39cd9b3e0ec76be', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: '25760dc3dc0c4db717a663849b0a5b4855d0fa49' }, h("smoothly-display", { key: '6bddb16177d1b3aaba00f690e15830b4de4c560f', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: 'b270f93a5b22cc963761b4ba3fac9831948eb229', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '13eeb89739730d945227aff29d6ffb02405a7162' }, h("smoothly-table-cell", { key: 'f6ee0efe4aafe2b3bc46d1391addd0cdd0372643' }, h("smoothly-display", { key: 'fefcd6b25329f0acac11ce9b5f62936c250e4e13', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'ef2d0fc611d84b2380f4cb3342e9a747ca7b0571' }, h("smoothly-display", { key: '049dfb4f85369daf945b216256ced74597135572', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: '0818d5289ddf639e1f41b8377eefda9a42e8a660' }, h("smoothly-display", { key: 'c313d4b6c8e1658c6a2bb9bda1b7aee77b5c4708', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: '6e57124ffd9cb7a0737b49144fdae07c04e7ce54', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '075bcd04dbac92bb2733eae3983e205c604c0897' }, h("smoothly-table-cell", { key: '2da65d488c647c5952fd2f7b496ad477c78e43a0' }, h("smoothly-display", { key: '268b41c5942180ff8cbf781c225569a464a98048', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'bf8c3e7a40c471fc22de92ff894ab5145407949c' }, h("smoothly-display", { key: 'ee271b788d3bccfec5354a4e96b0a16a9faa224d', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '684a6831e691a9dc67f81977c39f32cb74ca4796', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '82ca4163f480bb0f87f51d40680ee079dd615b11' }, h("smoothly-table-cell", { key: 'c7022929f9eee697165dabdf09f209f62cec9e20' }, h("smoothly-display", { key: 'f85ecb5f99a2f5f00b1d8946a33057b87691ebf2', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: '71a2d8a0b8426614bc5842b27e80957bc560066b' }, h("smoothly-display", { key: '6e1fa476d41664ccd4f4475e3d78e6811181dc83', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '3c21237b9ab3bcbad4ce8f71d590b62e92f425e4', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '89f7bd195d9558793f2806d9331a4f60127a2288' }, h("smoothly-display", { key: '9af59f5175f04af6c3c661efea33c884ef2443a4', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: 'cf98a3d3738cc247ddb748eb5d62103b5f4cb898' }, h("smoothly-table-cell", { key: 'fed5bcbfedb84593f7372d686ec367176e09f203' }, h("smoothly-display", { key: 'cbaf8f631003338f43637aca9af85e05ee61acb9', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: '01ca45bac88026b162678192a11a4f5dd3c068be' }, h("smoothly-display", { key: '80a57b43c7a010aab88b2d16c7fbedaeb29568ce', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '70d2c87d6db5d93807832babed5234fb464f74f4', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '20cb4d49bb58652118d26a85e3700303493c68c5' }, h("smoothly-table-cell", { key: '825986c6db5f37ccc73569f6f1c2228a5974165a' }, h("smoothly-display", { key: '21e131ad762de83ceb50ba3c73438b19726c38e2', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'c5ee086388bcba90b3f2f8b8e87de8b640af19ae' }, h("smoothly-display", { key: '0451e5542008991f62d5aed3be962be7ede89e92', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: 'eff29a26691c08d70aa7cacad2a199dabc06f76c', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '16aa704a00da4ee503ef5c8a66ce41cd2768d704' }, h("smoothly-display", { key: 'ebda8de8516871eaf501d00fe3c334dc229b8105', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: 'dc912bef3657af1eadb481ecbaa1f71e061fd3ae' }, h("smoothly-table-cell", { key: '7f3451e00998d997440f16b85fb53598778128c8' }, h("smoothly-display", { key: 'def111369e6fae7bcb7e5c6bdc3bfaaa9700b6fe', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'cf70102ed28029c2eafbfa3c14f5f42bf185b4cf' }, h("smoothly-display", { key: '567fe6aa345e74223a8332b93cc1b1b9cb288eba', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '3ad490689fcafce374b5b02550d5e03962da7a75', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '0cfffb40fd9119c737384bdfcf4196252e2680ed' }, h("smoothly-table-cell", { key: '17017970a2de014c63dc0c2f942e83a4ef9b322d' }, h("smoothly-display", { key: '9f6d27350e38a66bab11ce29a331ccecee9335d0', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'f1d2cc0caf106aaabb4d9262fb6f589924ded4cf' }, h("smoothly-display", { key: '1ae2025a7b69811c991c4e50acd45be7f2af4820', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: 'fd8db8bbca191d29614972042d49aabf04b00325', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: '7ed94c5850dca92de109a72d543e7892a4ad1f27' }, h("smoothly-table-row-group", { key: 'fd411b94eb083f25414f29ee5f0c82fe10e336b2' }, h("smoothly-display", { key: 'c1eec946da5403fe5fb367f864de25a07d37bb45', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: 'b69b22be0181ebd04b4fb6c9934b76d41a8c92f6', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: '39f7a1f520615967cc4972f7c2f2ffd6824c3fcc' }, h("smoothly-table-row", { key: 'a0edb450a28de03759ae4c2240a979f27704718b' }, h("fake-cell-wrapper", { key: '9c2c3823f9e8771e15625a0353e7031be7ab862c' }, h("smoothly-table-cell", { key: 'b47064b530ce8ee1bb66350cc2bb4ac172bfbe99' }, h("smoothly-display", { key: '23245c1af652033586ff8b001f406da931221ff7', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: 'cecaf2863e686ddd4b7b6db5bf0ba39a6f77b70b' }, h("smoothly-table-expandable-cell", { key: 'b715899e9cc80dfded13610df5224069c9eebabe' }, h("smoothly-display", { key: '3e261554b8e11c7388c5cf4057228575b87acd0e', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: '5844d701bc675abd246d2d18f7387edd9c9f7e7b', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), h("fake-expandable-row-wrapper", { key: '32bce4a1c74db7b752671e090eca7216dfeda5e4' }, h("smoothly-table-expandable-row", { key: '76397c42828314da38f36ba8046227bce793f3b0' }, h("fake-cell-wrapper", { key: '4707a608abe80f2fa745d0a669dd26d327ce3fa7', class: "span-2" }, h("smoothly-table-cell", { key: 'a4b2b9dba3fe2d95439f995c04d218729f6f7c05', span: 2 }, h("smoothly-display", { key: 'd3ab93ede3071809115eb9a392b29c97ada02788', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: 'ab3787df579b0c266b5cc521e6c88b8976d7eeb4', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: '31e0f780af3568f236e185c33beffd1fe131f15c' }, h("smoothly-display", { key: '71f3de541c67562eed2c4138b3c487e13f45891a', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '56b9d221c55a67b758a529d3542819b8cc73a9d1', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (h(Host, { key: 'c2349ac60d42721e7efdd0145bda64bf634665f9' }, h("smoothly-display", { key: '3fa0ccdbb80609b7d1213e4607a8417d654ba61e', type: "text", value: "Group" }), h("smoothly-table", { key: '031831fab9aad960876d3652e0f061bc11c6b641', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '8962746018f32803f9194677e85b1cac061cbc8a' }, h("smoothly-table-row", { key: 'ce3b222b7bf572395130029a242349f1f23e3efa' }, h("smoothly-table-cell", { key: '9b487a8dd643eeb32b8636a393a21825af9e15f0' }, "Date"), h("smoothly-table-cell", { key: '9445abb441db3d0474aa0925da39f9f8cd841e96' }, "Total"))), h("smoothly-table-body", { key: 'e05046be6bcd868fedd3a998e33243d350a24fac' }, h("smoothly-table-row-group", { key: '9f9f39b99ee48b80079e4f0c7b8b5933841bc8db', align: true }, h("smoothly-display", { key: 'f5c8b076b84674dca4082025540f37fed2c1fdfb', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: '8684e46b76affeace45688d66ce925053e8487cb', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: 'eafc06e33f099744334b1ab4633c4065e5c7bafb' }, h("smoothly-table-cell", { key: '163413e33f1fc87f3ee8d913b7f67aadaef23527' }, h("smoothly-display", { key: '7906a8a2a7cdbc094ea377dbbf46f46ea1aa2773', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'b7c3d34d0872a3b925cd59648818ac4f970f7665' }, h("smoothly-display", { key: '1755af70c7682d88f2a8053249f618e21ccd8dcd', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: '972b58445087486e16aa9ef60ceca24b0cdb878a', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'f4167f1f151a4b6a11e55c3b44b44a174e7e460a' }, h("smoothly-table-cell", { key: 'd42b86d4bbbfa2687ccb9ef5426199cfcb970454' }, h("smoothly-display", { key: '691ce08e0f570a2fe95f6274c5e5a2c594ca0e81', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'ca5ba776a4c026015fe14ffd6c0f61682fb50a0e' }, h("smoothly-display", { key: '314ca518de45211edf1b423fe2fd5e6e852e0abf', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: '3ab4074da42478f0275ad173efbbcb4ae7892132', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '15c7c4c80763efe785d46350dbcb9458787fa7de' }, h("smoothly-table-cell", { key: 'dc40672665de18746244848faf04db3ad9f5aeef' }, h("smoothly-display", { key: '49eb95b7c7cddc7b31919e63052773b561ec73e4', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'a06c95ad5472971a1e65334780f236ec9661730d' }, h("smoothly-display", { key: 'c7e5e70b5711a0921bc9b31a783a6c74d5052115', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: '4d369fc1b9f725c6c87119f74ceacc791e7ecedd' }, h("smoothly-display", { key: '7476433911fe24ae672a06fbcd1903b30d9d4dcd', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: '66757326ae2f2533781187b3cc539ecc630e18da', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '074ed70eee56b560206f6af3c3653f866eb19b1f' }, h("smoothly-table-cell", { key: 'd42fa537b638422f059064fc81f3eca4b508adb1' }, h("smoothly-display", { key: '53555e64e4a188b56312547d00e051400db9109b', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: '9a87625f1792a602a8f261b09639a2f3437e4a00' }, h("smoothly-display", { key: '48f68e9b82035798b802914d1e3676baeb45b1c6', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'fda86f80536a88dfc1b37122353d7728d59c3145', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '79f5e690018349b7bbf387f42459fd0cf7bf41c9' }, h("smoothly-table-cell", { key: 'b90737c98969bac197c075f618074d0de7e49ba4' }, h("smoothly-display", { key: 'e8f3430fe190bd51b2f16613545502e080e881ec', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'b6d3f7d14324859ba247b4936b21a8730b3d48f5' }, h("smoothly-display", { key: '2a31cd875eb7275138ff31018fa00445d98636f9', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '4fead269f59feb74e3182c5f45ceb27f75b06815', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: 'f934924e769318b0cbf620e8b36dd5beb5b9289b' }, h("smoothly-display", { key: '19cd9b2be6022ee7ca06d65ea8ed7233cfc09282', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: 'da7f61e549d633fcfeb11d0b6340db1ed25b2203' }, h("smoothly-table-cell", { key: 'b317a6ff13c60a5e788285295131c314dfdc5451' }, h("smoothly-display", { key: 'fdc2c7b05beb0d0a85cb132ecda0250dec82437b', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: '00332f1d86bee165bfcb258a7e0a977630391c3f' }, h("smoothly-display", { key: '482fb06ef577eebb00020dc96c1f38be4a9c06f4', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'e0be1bdf78a509739ba6200b84eb09b1fdceafa5', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '33394ca7530c500982772ad00fa167a28945dac7' }, h("smoothly-table-cell", { key: '9d0342b72e2e1c5c4fe165f5dd82e2bd2aea486e' }, h("smoothly-display", { key: '7067dcfee78ed06a503fda1daba6d2290e542749', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: '0dc3ff01ee8aa112baadd9d9b86950be1e206863' }, h("smoothly-display", { key: 'ff66908b6e8fae1880aeb7c2e3afb2fa0459055b', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: 'd4c0cbfd9ea8e4325b8ae831e4c39e4c454a78df', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '094dcd75d983e523eec8cb86ef99dcf162e38ea9' }, h("smoothly-display", { key: '69f640137011b2a87f19869a37d4838472a0e85c', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '5813f668878b19bda0ec525192f8bd114b8eea10' }, h("smoothly-table-cell", { key: 'a17328b2f0e29e25462129c21a4f7285a570d55b' }, h("smoothly-display", { key: 'a0d200bab62d2d1cd9c79d671dac3a01aa49d596', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'e1d33ee6f5562a526343a7b8a8a4eedd74536faa' }, h("smoothly-display", { key: 'fbee48d8fa8d7360f35e81f52953a1e50d059f66', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '4b35e8e6b67c474be6f1921df8c035ca75e6d65e', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '73b7b56a1374a050d4c060481691a765993d7aa0' }, h("smoothly-table-cell", { key: 'ef757fee21011b6217509b8df104bbd551a8f083' }, h("smoothly-display", { key: 'ce28e49e2b34609b9b118c1d959b40e92da999ea', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: '9ab4fffdd44c403204a950bf6988c85cec2b566d' }, h("smoothly-display", { key: 'f031bf8fedf553a4a35941682c52c20a5d35945c', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '6be1eed0b8757a4ef23b2f89d207de78a691fb2a', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: '217e2c3da76ee12debcfdd72e8dc1a5ce366e677' }, h("smoothly-table-row-group", { key: '6b6a75487b0649e29aaa80f09ae1525fb89d0a4a' }, h("smoothly-display", { key: '595d74d25315145d10c0f90cb425080f26327171', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: '0960bdd999050e2ef1f54affd7d9c7e37b7a105f', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: '99957e7a704294b44a16785076c8039fabafe467' }, h("smoothly-table-row", { key: '094abc7dde56b47077b83d4aeee91d935673dbca' }, h("fake-cell-wrapper", { key: 'c3046f3eb7072139a86ec4c777a83e3b31342a5f' }, h("smoothly-table-cell", { key: '65e3f33d4e058906c1e705c138f64eb875372f8b' }, h("smoothly-display", { key: 'dae18d82f496305e108996e52fb4f08df46c0b4d', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: '1f797ef11066becab0585c2d707795752cc1919a' }, h("smoothly-table-expandable-cell", { key: '7162dfb6b14b854eb20ade26aa14c41ada84ee88' }, h("smoothly-display", { key: 'a0caf476fcef38d8f0f0aac87f1a8939edf8251b', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: '96639f825747c82e48a6df2f5ffcd0aa541af947', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), h("fake-expandable-row-wrapper", { key: '96e1217758b98bb236eaf1e9fbf0cdbc7c97961b' }, h("smoothly-table-expandable-row", { key: 'b463b6ace09039c949856a47cae1646722de7515' }, h("fake-cell-wrapper", { key: '908e37e012b4e7264faafa8778161b0d23e65bbf', class: "span-2" }, h("smoothly-table-cell", { key: 'd08c1503351a035e6f8ef9052cc80c8bc9d002fa', span: 2 }, h("smoothly-display", { key: '391e427d5ddf9f1d2e82678ff66d9ffcc41c8a77', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '0a8773a5d33603c6a42d84487c730eaf950a2540', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: 'f22475f2b9aca2131c4ff305aa4ba2e7c6e600ba' }, h("smoothly-display", { key: '956d8be67c99b3673d815101a05e91c9c6131439', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '0daba64dde819e327b688619e584b43bb042ef0d', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
     static get is() { return "smoothly-table-demo-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/demo/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyTableDemo {
     render() {
-        return (h(Host, { key: '94e95e0d83a8ff1f6b0175d81f6a4d0f573b3387' }, h("smoothly-table-demo-filler-row", { key: '0517b70eb65ed6a34faaa1c7805907f304654951' }), h("smoothly-table-demo-group", { key: 'e92405b3fa081cfa94f0311970db780f44782bd5' }), h("smoothly-table-demo-colspan", { key: 'd9f10e07549f56da20d1dcbca45f3a497db3e072' }), h("smoothly-table-demo-simple", { key: '0ae3ade94e2cc900e0a5362f65778163868f3ef0' }), h("smoothly-table-demo-nested-no-cell", { key: '9d0f1784998f8f7607f93b914cd2d5c53a986f8a' })));
+        return (h(Host, { key: 'ce870c3cb75e3021ae6df094be0beb4e15a4fa96' }, h("smoothly-table-demo-filler-row", { key: '8454629cbaca209d691c20e2cadb2084fb813d0c' }), h("smoothly-table-demo-group", { key: '4a39a52dd85a7820ff9144684ced5a9c39e68b9a' }), h("smoothly-table-demo-colspan", { key: '69466e2c64c235167f3f48ce792a883ccb0c4304' }), h("smoothly-table-demo-simple", { key: '7185d7dfafc506488c5d8de8eeb2d1f0771712af' }), h("smoothly-table-demo-nested-no-cell", { key: '30e67b1983df629081c1c4e7cbf4787817ce2bbb' })));
     }
     static get is() { return "smoothly-table-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/demo/nested-no-cell/index.js

@@ -5,7 +5,7 @@ export class SmoothlyTableDemoNestedNoCell {
         this.loadedRows = [];
     }
     render() {
-        return (h(Host, { key: '58aa208d70e2da93e893ef08cb5967664bd0c051' }, h("smoothly-display", { key: '2deea15d1b6e1df7377c7d7a75f1bf3bdc0e23e6', type: "text", value: "Nested" }), h("smoothly-table", { key: '86c9c4de9e86faddf03910093dc8046534198a6e', color: "primary", columns: 8 }, h("smoothly-table-head", { key: 'e68242f5576ac5903448bc958706512b6fdde4a2' }, h("smoothly-table-row", { key: 'db1d09f006f8e6d7ce18ae91caf34d6f5a14bf83' }, h("div", { key: '3e3e11e86247d24322182392410b18b1f77be2d9', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'd9e4adcfa2c4f241f0351c78cb21a968663a6c44', class: "smoothly-table-cell" }, "Registered"), h("div", { key: 'fe70738e34cad44a2334118b1390c3a4fc55a78c', class: "smoothly-table-cell" }, "Name"), h("div", { key: '8d289629063da16589bb44c438577ece4eff5703', class: "smoothly-table-cell" }, "Age"), h("div", { key: '41d4a8187b8a431cea1ab7c0d5dd94fc5e3d7c14', class: "smoothly-table-cell" }, "Balance"), h("div", { key: '1394c75f60c62a437f8e45bd331e102a84b3357e', class: "smoothly-table-cell" }, "EyeColor"), h("div", { key: '675a742c81647d180c327a3b033a7dd90bda7411', class: "smoothly-table-cell" }, "Gender"), h("div", { key: '16c97f1027ac5d65ebfaa303a56bb80ea37c7c40', class: "smoothly-table-cell" }, "Company"))), h("smoothly-table-body", { key: '8839563b64e8c05cdfbf0be64fd78e901490dcf3' }, data.map((entry, index) => (h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
+        return (h(Host, { key: '04d9aea1741a42783f48d2f496507f026e7ec592' }, h("smoothly-display", { key: 'b1ca21dc02166b03949f1e5733d199dfc98abe57', type: "text", value: "Nested" }), h("smoothly-table", { key: '8822eb9d9038e1475460993e8408a34e2c278fc5', color: "primary", columns: 8 }, h("smoothly-table-head", { key: 'fe36a6cf11d90f4a6d61b8f52b6c32725f9446bf' }, h("smoothly-table-row", { key: '480555a61bc7ab26c44b6ed481c5002e76f3d8fb' }, h("div", { key: '4a916151819146c8dfb3bde56af42cd9177404f3', class: "smoothly-table-cell" }, "Id"), h("div", { key: '4c5f4888480ac4afdc2a7ea0ea1223f019ac342f', class: "smoothly-table-cell" }, "Registered"), h("div", { key: 'fcbbba0e6600648b61a64f1c79021d8a3b6ff7a7', class: "smoothly-table-cell" }, "Name"), h("div", { key: 'b1ae7b7361472a8bc480eda7f578c2ef2ee31d01', class: "smoothly-table-cell" }, "Age"), h("div", { key: '5abc8febf53d4a1c88bf4d48c9f775854f79c9c0', class: "smoothly-table-cell" }, "Balance"), h("div", { key: '556a2cc1c4edadce3207d5d5f0669945aac0e549', class: "smoothly-table-cell" }, "EyeColor"), h("div", { key: 'c73289aaf060e3c633105d35ce31864109e6b0fb', class: "smoothly-table-cell" }, "Gender"), h("div", { key: '768db739d85a8a20408ea8d866af0006051d35f1', class: "smoothly-table-cell" }, "Company"))), h("smoothly-table-body", { key: 'cdb13c9d2feb7505eb856a172848a9e0a7c8eec5' }, data.map((entry, index) => (h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
                 if (event.detail) {
                     this.loadingIndex = index;
                     setTimeout(() => {
@@ -13,7 +13,7 @@ export class SmoothlyTableDemoNestedNoCell {
                         this.loadedRows = [...this.loadedRows, index];
                     }, 1500);
                 }
-            } }, this.loadingIndex === index && h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.registered), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance), h("div", { class: "smoothly-table-cell" }, entry.eyeColor), h("div", { class: "smoothly-table-cell" }, entry.gender), h("div", { class: "smoothly-table-cell" }, entry.company))))), h("smoothly-table-foot", { key: '6b4ad314b547876f79a192885d8f6c396b5289a4' }, h("smoothly-table-row", { key: 'd0b756f7d918e94ef014702eae9f6b60de81feec' }, h("div", { key: '06107bc944f6e1304054e68b91622ea30e0a833e', class: "smoothly-table-cell" }, "Footer Cell"), h("div", { key: '0150811226ddc55197a6ef7933f024a54ab2c853', class: "smoothly-table-cell" }, "Footer Cell"))))));
+            } }, this.loadingIndex === index && h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.registered), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance), h("div", { class: "smoothly-table-cell" }, entry.eyeColor), h("div", { class: "smoothly-table-cell" }, entry.gender), h("div", { class: "smoothly-table-cell" }, entry.company))))), h("smoothly-table-foot", { key: 'd220bcbd57cd66ba23f5f0a95f91ea76815abfb5' }, h("smoothly-table-row", { key: '667777310b2345e3d3a168ce2e740bf7bb3065c2' }, h("div", { key: 'b3e7fec6bcea4b27ae2ddf5e8b23438affc74185', class: "smoothly-table-cell" }, "Footer Cell"), h("div", { key: 'ee6456fc221e5cc95ebf4ca4615f24df1a4da926', class: "smoothly-table-cell" }, "Footer Cell"))))));
     }
     static get is() { return "smoothly-table-demo-nested-no-cell"; }
     static get encapsulation() { return "scoped"; }