smoothly 1.102.0 → 1.104.0

package/dist/collection/components/input/demo/user-input/index.js

@@ -19,11 +19,11 @@ export class SmoothlyInputDemoUserInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '93ac8ff24d005bece5c380c5fa1e0e460b7c2310' }, h("div", { key: '0ba15264f8f6fb95f48278cee3820a031cfb977f' }, h("h2", { key: '4261f82d2dc941553a6cf0549169f0c2c9a2e2c6' }, "User Input Event"), h("p", { key: 'eeca3c1b24c324e53ca52b23dbd9df821b30e6c1' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: 'b7e43b4a632c958c17a9967440b696f95846dc7c' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '20323a0fffe89110ff3373867dfd8a029904e6b9' }), "Check the console to see the details of each ", h("code", { key: '07ff89fb5e17565794500a28ac48a70718e90cdd' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '21e0a9fb254fd031300e723f6701355b8380625f', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '740cf48fc2cdaec9a3bc65e16f37b1484c004291', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: 'd5e47e8255f17e086949082e1d203fdaf96d239c', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '987ba8692821080005e0fdcefa4284ca43e98b47', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '791e894a717db40227dfaacb23be2c81e465c06d', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: 'a389b777d3a0fb141d5570dbb82d5011d1a53d7e', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '278136f9e02298f34940d702e9d8f358f2b80270', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '6c4e2d24b532826987253a56ac23a30f5f3dc60a', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: 'fa59ba1fade7ae69fdf2acaa1b18b05b664e018e', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '26f7ad2608e6db8ba693fbee9e2eed6c64059b29', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: '9d78136a67f26faafa61e1abca4e1e1f47cba517', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: '10e6e5e417e847609935b78b5ddc4400e9533ce9', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: 'd3ae741244d8a8c791386d8bbf2353cad652c0b5', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '3c6552b159e6f02dd19ceba1abb854e34f3a13ed', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '3b559b505ff8dca9ebb38e42f40f2fbecbc62910', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: '0bd408ca9eab5aac19afc12769ad79249f50ac70', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '0c12e56f8364e92514b8b12f9e30bbf8df97859d', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (h(Host, { key: '3f8731e8b4010dbac473fad42f40b127c56e5d44' }, h("div", { key: 'b1cc52a81b0488bc82506c922c5e378fd9de3189' }, h("h2", { key: 'caa040ebf00d2211f367089297fc43bb784e67fd' }, "User Input Event"), h("p", { key: '778dfcd11303537d6d362ffe13bf03b4172cbc41' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: '133a7f12ea31478e1848679b6a9492d91adb8a1d' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '144eb13a56ef541e5a7828973d698cb6fb672e56' }), "Check the console to see the details of each ", h("code", { key: '6142d5f8f0844caaa2d1e428278413807a3ef094' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: 'cbff417434271517e66c04336978429ed5f4b9e8', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '7cf13015c86c9e14a34ee05165b60e4baf0fa06d', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: 'd4e4e5b7230d45583ca98c98929b0bd88514ec28', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '84489f8685c6dc0bfbef5b152290be3492a99a64', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '1d1a87b139324bf4f8b00c4e5e7ff72121e8e92e', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '62518b7e958e1294175486fe4998a66b16e23bcd', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: 'ca75c33baaee28ac2968364736916992fe407362', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: 'ca93b9ff77ac4cbd540802018be52967ce4b6d78', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: 'e5d2e4df79ba24dff605df4ea057394ba0bd9f4f', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '59780a80a26274e7c4f07a84a4a735a1e68f9caf', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: 'e9477a5b9552070aa6c5fbb65d70a3a6fcfb2bb3', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'f78233fd072f673debc5ef2794ccfd92470d2644', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: 'b9ab61db3f0ef25b29589720ae32fbaf4fc292ce', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '110b00b1faf7392ae35af47a8363c3eb6f9ab3b1', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '48f402cba290ca60d5ee22a83a11bb4d87345a8a', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: '143dc7440c89598bc6825bbc001afdcf926b32fb', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '208eeaf0da242239958917cb60938ff14240d62f', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? isoly.DateTime.nextDay(this.datetimeValue)
-                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: 'f3301a005ae8d06aecc76aee13ec6b2643d79db7', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: 'bd2bd181f98f10188327a854e99e8fb3cfab4483', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: 'd8ee43e0e07aed4c7bb748b7a8465b80e23715aa', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '50a1a84990b8749ca6cad6ce954af64c8a2035c4', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: isoly.Date.next(this.dateRangeValue.start), end: isoly.Date.next(this.dateRangeValue.end) }
-                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '39ebe21d975120354be6744701a6e0db924946ce', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
+                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: 'ee2818fd24043bc7b96209414e9c56b68fa18493', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
     static get is() { return "smoothly-input-demo-user-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,7 +28,7 @@ export class SmoothlyInputEdit {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3f7558d11b2d44dd408af97a340257484382eb06', title: this.tooltip }, h("smoothly-button", { key: 'f6247d9959f0d3015c2620b1e11073bbcb48e046', 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: '71b5a8210aa6f4ca12cdc4fdabaabc495b4024f1' }), h("smoothly-icon", { key: 'dcdd203ebb727b94f54cb2f190647be3461d7808', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: 'f3bc55a7a59a13b8b9359d62e91e3af8d44a50dc', title: this.tooltip }, h("smoothly-button", { key: 'cf4df9b7490783a451ef8b27efe8da46956a51fd', 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: '4dfbe9901f613a32e125d3dc4568ae43374144b0' }), h("smoothly-icon", { key: 'd45e03a9d3a47032d17f1791ad91fb13529a775f', 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

@@ -111,7 +111,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '23b78025aa87033e4d55e1a3075fbf54f7f17911', 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: 'c351bd728e22f7735cc40c383370aa34767608e2' }, h("slot", { key: '18424e4ccfb9ddfe1535f65828fde006a00cca23', name: "label" })), h("div", { key: 'b7dc0bb86062b950d8eced795aaee41254ab33f5', class: "input" }, h("smoothly-button", { key: '29aca13db6b86cf9cc52069ba63e460dc474d937', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '15e1c28e93edeae1676734d939a209fb14022d83', name: "button" })), h("span", { key: '67b391a462c61f3d7f27b42b5af01bc6e9ec646c' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '6dfcfce7fda9969f1b17c5af1fab7a34303cc314', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '2c2aaa95ef454ea0f49474f84d7dbde3162e7102', name: "document-attach-outline" })), h("input", { key: 'ce82c258c22617d2daed517b710de1585799399e', 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: 'bf34d806278cb594b720619b650f7510e7a6eaf4', onClick: (e) => e.stopPropagation() }, h("slot", { key: 'b08506d4c99d5cc988a4402f43edc4dad7ead875', name: "end" }))));
+        return (h(Host, { key: 'f4df7ddb44c408650f4b204f6e82ae75a801d126', 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: 'c5ee90970f4e3354d561f8cbde49f116f0d641a3' }, h("slot", { key: '54c60e9d796be6153f7afcfa7f959558e12241f0', name: "label" })), h("div", { key: '669a4853db689f4b9cb14c6123baf8586dca6230', class: "input" }, h("smoothly-button", { key: 'bcfdb6eae7a7ba03a911651f1d0af9bb1ed6b407', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '7855f3bbd0b7f3bb5f4ba2345143dc17779a8502', name: "button" })), h("span", { key: '017b26231a838eb4d8dcda32e8e3363af6511113' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '5354848242f9a021ef51a94f7db6dc7e1caa35fe', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: 'ab8b59f29dc1377f4e3b507e99e291333f332a86', name: "document-attach-outline" })), h("input", { key: '379b0c489e893122c68cf4a9c796b172b656763d', 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: '1bc9a2d979e0975dd01cd320acb5dc34b2029472', onClick: (e) => e.stopPropagation() }, h("slot", { key: '98aa0198ff2cd3b3d522e1350516fec31f6788fe', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

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

@@ -109,21 +109,21 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '18f61ae51348d5bd0c622337b28b45174ff18076' }, h("smoothly-icon", { key: '3353daed3b1accb80fa5aab42304e2d82bf51126', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: 'eefcb23c84911b8334155d4035450161bacab335' }, h("smoothly-icon", { key: '54c89c0a776e5cca1d738ff3c2c75bf792e9fec7', 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: 'a41333ccdf3a8595cadabdf096706a71bfcf6d1d', 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: 'a8ada0ee9d10be566cce98fb7fd8e98fcae2eb2f', 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: 'ea87369124256ce2911ec603ce7bf6f5aa653819', slot: "label" }, h("slot", { key: '64aa8263cd0146723944f0226407a88fb24419dc', 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: '318f72ddd1a44ec40b8459ad59e20afc0ce4c0c7', 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: '057bd0d86cba43f640185418aa3f8268364b5a5c', slot: "label" }, h("slot", { key: '379a30d1f4915ba7fc421dac3c6ed13ce8c6f16f', 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: '91fb8b714da6207dc44aac51db1d4f4df5832e85', 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: 'eab69d4faf59b5d3acbd0db9a53912a65b31f210', slot: "label" }, h("slot", { key: '8e9aca70172019bf7c8b41f3f7534a38e231a486', 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: '3e434c79f9ff72f4bce6f2ba3d87803b332b5d83', 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: 'f51ace81a7ac85957ead3532b1a228c95acc5f5f', slot: "label" }, h("slot", { key: '27e4c3e1da0dfb4fee70749236ab1372807dc82b', 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: '026c0c398ebce39044581231dc601c6248a6d7eb', 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

@@ -27,7 +27,7 @@ export class SmoothlyInputRadioItem {
         });
     }
     render() {
-        return (h(Host, { key: '00ca9a738cac0a793961eba3dc326a1f6c1f6b79', onClick: () => this.inputHandler(true) }, h("input", { key: 'ad82ad9e78fff1a6803dc5153cac506ee63a6f5b', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '068db330a5f5eef568a6ed0f77f18aa9e7e27eed', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: '69dced566cdacaa920a78600d9da3d7a88247193' }, h("slot", { key: '70b9d058904331675a062f3df130aae8bd3dd27b' }))));
+        return (h(Host, { key: '070130be28fb079d283c44fd4e1d953fa6ecca57', onClick: () => this.inputHandler(true) }, h("input", { key: '2659b61bb76a9196c82db8ebb07246ace707402a', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '9c3ac6911f3c8d335728aac0c48382a927fde8d4', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: 'b6e3506b8814d170c43227c8291f8324a07e5547' }, h("slot", { key: '9282d307ffa40211b40bcd9ee0bfff4891620a85' })), h("slot", { key: 'a1537eebdf4ae3bef11bb4ab02cdaf1849b9917f', name: "detail" })));
     }
     static get is() { return "smoothly-input-radio-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/radio/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAS,MAAM,eAAe,CAAA;AACpG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAUnC,MAAM,OAAO,sBAAsB;;;wBAGiB,KAAK;;;;;IAMxD,iBAAiB;QAChB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAC5C,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;YACvB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAC,CAAC,EAAC,EAAE;gBACvB,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;oBACd,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAA;YAC5B,CAAC,CAAC,CAAA;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAC1C,CAAC;IACD,YAAY,CAAC,aAAsB;QAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YACjC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YAChC,aAAa;SACb,CAAC,CAAA;IACH,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YAC3C,8DAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YACxF,sEAAe,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,GAAG;YAC7G;gBACC,8DAAQ,CACD,CACF,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { SmoothlyInputRadio } from \"../index\"\nimport { RadioItemSelect } from \"../RadioItemSelect\"\n\n@Component({\n\ttag: \"smoothly-input-radio-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRadioItem {\n\t@Element() element: HTMLInputElement\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) looks?: Looks\n\t@Prop({ mutable: true }) name: string\n\t@State() disabled?: boolean\n\t@Event() smoothlyRadioItemSelect: EventEmitter<RadioItemSelect>\n\t@Event() smoothlyRadioItemRegister: EventEmitter<(parent: SmoothlyInputRadio) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyRadioItemRegister.emit(parent => {\n\t\t\tthis.name = parent.name\n\t\t\tparent.listen(async p => {\n\t\t\t\tif (Input.is(p))\n\t\t\t\t\tthis.disabled = p.disabled\n\t\t\t})\n\t\t})\n\t\tthis.selected && this.inputHandler(false)\n\t}\n\tinputHandler(userInitiated: boolean): void {\n\t\tthis.smoothlyRadioItemSelect.emit({\n\t\t\tvalue: this.value,\n\t\t\tselected: this.selected,\n\t\t\tselect: s => (this.selected = s),\n\t\t\tuserInitiated,\n\t\t})\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host onClick={() => this.inputHandler(true)}>\n\t\t\t\t<input name={this.name} type=\"radio\" checked={this.selected} disabled={this.disabled} />\n\t\t\t\t<smoothly-icon name={this.selected ? \"checkmark-circle\" : \"ellipse-outline\"} size=\"small\" tooltip=\"Select\" />\n\t\t\t\t<label>\n\t\t\t\t\t<slot />\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/radio/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAS,MAAM,eAAe,CAAA;AACpG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAUnC,MAAM,OAAO,sBAAsB;;;wBAGiB,KAAK;;;;;IAMxD,iBAAiB;QAChB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAC5C,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;YACvB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAC,CAAC,EAAC,EAAE;gBACvB,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;oBACd,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAA;YAC5B,CAAC,CAAC,CAAA;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAC1C,CAAC;IACD,YAAY,CAAC,aAAsB;QAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YACjC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YAChC,aAAa;SACb,CAAC,CAAA;IACH,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YAC3C,8DAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YACxF,sEAAe,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,GAAG;YAC7G;gBACC,8DAAQ,CACD;YACR,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { SmoothlyInputRadio } from \"../index\"\nimport { RadioItemSelect } from \"../RadioItemSelect\"\n\n@Component({\n\ttag: \"smoothly-input-radio-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRadioItem {\n\t@Element() element: HTMLInputElement\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) looks?: Looks\n\t@Prop({ mutable: true }) name: string\n\t@State() disabled?: boolean\n\t@Event() smoothlyRadioItemSelect: EventEmitter<RadioItemSelect>\n\t@Event() smoothlyRadioItemRegister: EventEmitter<(parent: SmoothlyInputRadio) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyRadioItemRegister.emit(parent => {\n\t\t\tthis.name = parent.name\n\t\t\tparent.listen(async p => {\n\t\t\t\tif (Input.is(p))\n\t\t\t\t\tthis.disabled = p.disabled\n\t\t\t})\n\t\t})\n\t\tthis.selected && this.inputHandler(false)\n\t}\n\tinputHandler(userInitiated: boolean): void {\n\t\tthis.smoothlyRadioItemSelect.emit({\n\t\t\tvalue: this.value,\n\t\t\tselected: this.selected,\n\t\t\tselect: s => (this.selected = s),\n\t\t\tuserInitiated,\n\t\t})\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host onClick={() => this.inputHandler(true)}>\n\t\t\t\t<input name={this.name} type=\"radio\" checked={this.selected} disabled={this.disabled} />\n\t\t\t\t<smoothly-icon name={this.selected ? \"checkmark-circle\" : \"ellipse-outline\"} size=\"small\" tooltip=\"Select\" />\n\t\t\t\t<label>\n\t\t\t\t\t<slot />\n\t\t\t\t</label>\n\t\t\t\t<slot name=\"detail\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/radio/item/style.css

@@ -1,5 +1,6 @@
 :host {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	position: relative;
 }
@@ -29,8 +30,16 @@ smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=ch
 	position: absolute;
 	transform: translateX(50%);
 }
-
 :host>label {
 	padding: 0 .3em;
 	white-space: nowrap;
 }
+
+:host[selected] ::slotted([slot="detail"]) { 
+	display: block; 
+	width: 100%; 
+} 
+:host ::slotted([slot="detail"]) { 
+	display: none; 
+}
+

package/dist/collection/components/input/radio/style.css

@@ -125,6 +125,7 @@
 :host>div>div.options {
 	display: flex;
 	gap: 1.5rem;
+	width: 100%;
 }
 :host[direction=column]>div>div.options {
 	flex-direction: column;

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: 'b4550b5f4a8435ff07abbfedf03452fa64993f35' }, h("h2", { key: 'b70efe02b4047e0c56e263d7d604b04f21b3bd9d' }, "Range"), h("h3", { key: 'd1ea3331c8e4ecfa78ebd09706bb9c49ea44de56' }, "Phone Number"), h("smoothly-input-range", { key: '6c2241369a1b03a49a22ab708e2e6cbc2fe2ecbc', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'be655af45ba80bd54a41dc319b316a1ffdfa115f' }, "Stars out of ten"), h("smoothly-input-range", { key: 'e0f8e3e88934ad2fcff9a9d3cac3f14db7ecce8f', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'e21bb7960d11b42414cbf6e8dba4c1d011438947' }, "Percent"), h("smoothly-input-range", { key: 'f2a326739a164b0397c64a742e5a210bca0385f8', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '9ac9fa1800004c7719eab3990c7024dcabeac541' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '15558427596efa234ab6a3ecc89fc039d1156bd9', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '5237da34fc9f10f5eb6a6a01e5f2c9e9ce68ccde', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '3037a54047581eaba241ab6b3b5b4c3586ad93d4', size: "icon", slot: "end" }))));
+        return (h(Host, { key: '517024f5fa43b290588bf6de897eb8604ebb9aec' }, h("h2", { key: '50920a3bb53f5a910ddb094da8afab71b8f57088' }, "Range"), h("h3", { key: '503e792bc7c1d2da6277ac84ea478066e432e3a3' }, "Phone Number"), h("smoothly-input-range", { key: '8ad5509021818af773dcb4b4004aff70b6e9e1d4', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'd0721a56d49839e2d409e2371dd22663ee7c6260' }, "Stars out of ten"), h("smoothly-input-range", { key: 'c0729cb660ac13733d73a33f4c9f8fbab6132919', max: 10, step: 1, label: "Stars" }), h("h3", { key: '037a777b872d2338994cccc94aaf9539566b1d25' }, "Percent"), h("smoothly-input-range", { key: 'b46ef1dca494adf50e7407d280b6261fa5fe98d3', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '49ce896d170de4e93ab1787533eb9ce0830af143' }, "With icon at start and clear button"), h("smoothly-input-range", { key: 'e322080fc04b52b6219d894568759f0a47df81ee', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '54fd4bed32163cf2368192ceaed499dfd4b6d9f6', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '75786b2a1ef4c44537e28dd95a9b6a67a0a7e883', size: "icon", slot: "end" }))));
     }
     static get is() { return "smoothly-input-range-demo"; }
 }

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

@@ -95,18 +95,18 @@ export class SmoothlyInputRange {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '896052a02f5cce23a5ed1a02fd1081f19b16b582', class: {
+        return (h(Host, { key: '0edc962695435c709333bfb4cefb492b31b2d0b7', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '7db794cbda30405f4d2b3b430ffe6bf1130ae804', name: "start" }), h("div", { key: 'd334bdd0df403fde4d5ac3a4f32dfe98efc9d0be' }, h("label", { key: '6511b42785fba191d61fa521baeda6545a86e3f3', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'd2d0dea2140b110461f5738117500d7c5bc08c3a', 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: '63b3652f46e92ec1a3cd331960b5027628e1fa84', name: "start" }), h("div", { key: '412e827085b0b5ff37390d5be4bf6efc6287885c' }, h("label", { key: '1445f01448ecfabe4cd0470a8ba509daac632694', htmlFor: this.name }, this.label), h("smoothly-input", { key: '6bb9b7002eda2ac742f981084093a3cede27a881', 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: 'feb68df52b048e356a6555c7ee996c20a531e705', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'c7a95d0ef8d66e2df34caad6504c45a6f8fb7061', 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: '4f66615300dc91082ee8e0127f96ae463889a498', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'ab200acfa975a10dc52248cc3f159db0fd2b4ba3', 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: 'f72fdf57fc07c3fc9fa4c843525291d8f3bf0da8', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: '03705aaa50dded48ad831412e811d69fde1d6b60', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '48e0763f8d5d656fbf6e886e78dd85bfe00ba493', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'ed8150bb7db19f31a9eaf3b2ad3db82330556653', name: "end" })));
     }
     static get is() { return "smoothly-input-range"; }
     static get encapsulation() { return "scoped"; }

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

@@ -40,7 +40,7 @@ export class SmoothlyInputReset {
     }
     render() {
         var _a;
-        return (h(Host, { key: '39b30b359df4e26ee2ea37795ec3c889307fb899', title: this.tooltip }, h("smoothly-button", { key: '2f17f35ab96330c7ce38bbc606fc06ab604d6a7b', 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: 'de14ee9362b39ca6f25caa687b51333eb523748f' }), h("smoothly-icon", { key: '69b34f2f5ae89379635a245905a7d692726957e6', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: '013126d52ad4e32ce7f5f04b5a54c925a77100a9', title: this.tooltip }, h("smoothly-button", { key: 'b7150136d601bb76bd396c054971fb08e5caa699', 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: '2e762ef063d7872cb2b9294fb5b0096a2a565b7d' }), h("smoothly-icon", { key: '950efe9f8a14f3ef3608238f21a3cc0fde4f4161', 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

@@ -288,14 +288,14 @@ export class SmoothlyInputSelect {
         this.addedItems = this.addedItems.concat(h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (h(Host, { key: '83a3ae061ed14cd4bb9a769e124093e39329a17d', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: 'a5fcfb1612ef033df68a7f03d2e88e5f231ba47b', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: 'cb3f84e88bd3bb5a19f0950c49ef059a0ce7c0e4', class: "icons", ref: element => (this.iconsDiv = element) }, h("smoothly-icon", { key: 'ad38f4e1ed640450832e3b3beea70a9bb346754b', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '5d93d1c33d8d092a2cc2746e5a2f3aeba815a955', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: 'd875a46166ec03e7b7555edb649d2a168f76853d', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '2246b453a4d28ff336264e17091d103da2a3a02f', name: "label" }), h("div", { key: 'c4232de7ac74641289d298a85c3f5ac18789a045', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("div", { key: 'b3f4ad79ee30b0465dc8b4784bcae62e7cef2f5b', class: "search-preview" }, h("smoothly-icon", { key: '3e42af96ff5c01c1228225b989157f5ec864e611', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: '82906d6501c4ab798945fdb7c0324b13c756ac9c', name: "backspace-outline", size: "small", onClick: e => {
+        return (h(Host, { key: 'bd6e502e8bc709fbc22676bc30b849b1af3e1a1d', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '54a6939ae60dfab5a18815b2e7f9f9637980d537', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: 'fb2048686f385e31cf5661d4c0fd11c69f849f51', class: "icons", ref: element => (this.iconsDiv = element) }, h("smoothly-icon", { key: '6019295c5e92dd4992664985e83316cfcb540cbc', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'b9ed43d814b3af4f54b8dc13b68b6bf73a741e67', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: 'cf1b69e51b74b886793a69b06dcbff19d6f2a903', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: 'd1adde543075447fb3dea33f40101ec58228d6e9', name: "label" }), h("div", { key: 'a291b7f240f7b7d0314eb8a44f5057acf5645db8', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("div", { key: 'a431bfad6ce5284641ce0ca6814a947e0f226798', class: "search-preview" }, h("smoothly-icon", { key: '864bb9196328ad3fe04d05bca82214c03033ec86', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: 'f8d468871eeb80771bb645a6e406e4a395250dd2', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (h("smoothly-icon", { key: '06495cf3a9f28877bb4bda2b2b2e3b44db9e7eae', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (h("smoothly-icon", { key: '36dddd2f4a370406d2b814e7c05463f87849b752', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), h("slot", { key: '071c26dd63b03d5fac2701a63346351e600ef641' }), this.addedItems)));
+            } })))), h("slot", { key: '9d2e371acf42bed95f49966f073199934e336325' }), this.addedItems)));
     }
     static get is() { return "smoothly-input-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/style.css

@@ -142,11 +142,10 @@
   box-sizing: border-box;
   align-content: center;
 	height: 100%;
-	padding: 
-		var(--input-value-padding-top) 
-		var(--input-padding-side) 
-		var(--input-value-padding-bottom) 
-		var(--input-padding-side);
+	padding-inline: var(--input-padding-side);
+}
+:host([show-label])>.smoothly-input-container>div.guide {
+	padding-block: var(--input-value-padding-top) var(--input-value-padding-bottom);
 }
 :host>.smoothly-input-container>div.guide>div.value {
 	display: inline;

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

@@ -38,7 +38,7 @@ export class SmoothlyInputSubmit {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '60f5c4352d0fcf3ac72fecfd513b17cf17b4d02e', 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: '3abfb59a2dacc9a15c8577ecf92f9e2b481542a1', 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

@@ -35,7 +35,7 @@ export class SmoothlyItem {
             : false;
     }
     render() {
-        return (h(Host, { key: '5cd344ce7e1ce972dca5793dd987c1729f019482', tabIndex: -1 }, h("slot", { key: '39e17f355706144b6ba90485c1e7bfea97e0c564' })));
+        return (h(Host, { key: '0656f2503f804b45f00f7ce19519b546cf5c029c', tabIndex: -1 }, h("slot", { key: 'dbac1c150ccb8cbc83fbd5c2626d452a77fc6686' })));
     }
     static get is() { return "smoothly-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,9 +7,9 @@ export class SmoothlyLabel {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a13b60d3713cf432f2eae3df6fc1193f705c25cd', title: this.description, style: {
+        return (h(Host, { key: '904b7e2545774f010a04f80dfdebbd0fc1000403', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: 'b1d2792f681dd5274e6eb099e48dea97ea2d3fc1' })));
+            } }, h("slot", { key: '451cf78802889d2e23b85fcc1ed0955640113b68' })));
     }
     static get is() { return "smoothly-label"; }
     static get encapsulation() { return "scoped"; }

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

@@ -9,7 +9,7 @@ export class SmoothlyLazy {
         this.show = true;
     }
     render() {
-        return (h(Host, { key: 'c9ae1c9e802c0cbfc3ec7c37b3a947f834587d02' }, h("slot", { key: '43f2c47074aec85b940e8dd980c1733f90736374', name: "before" }), h("smoothly-load-more", { key: 'e763c71b4a35fff037cd4018c42a8f80b9b89b8c', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '94f9c7b38e2490e202b7dc712b1ffaaa151eb0cc' })));
+        return (h(Host, { key: '63b30b3d20ab6d5b10536e8278ed22b569e6640e' }, h("slot", { key: 'ee0160928eea94b227751da2b962e28ef857dd57', name: "before" }), h("smoothly-load-more", { key: 'aa55a115ceb40540fa03f07600f98cc50b4650b2', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '5e7bb9c0446485537e8491cf595e6c9738d0cfd5' })));
     }
     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: '9028a3a3f21bd4eefe3c39c89a55633db132271a' });
+        return h(Host, { key: '043cf42791f2754f79b4d9be6c07241ae6a5468c' });
     }
     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: '29f08751667eeb89ce06138c991eb355296ab219', role: "alertdialog", onClick: (e) => {
+        return (h(Host, { key: '1976a5aaa3fb1fcefb4ffe61ecdf3e27de571764', 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: '02306121f4d645d62c38af123e8f7fba340a50be', class: "modal" }, h("div", { key: '8d6b1e5bb69fa223a5630d0bd5fc673b02c1f962', class: "header" }, h("slot", { key: '1b3a7fb9d6ff286a694d982f409477c72f62a444', name: "header" }), this.closable && h("smoothly-icon", { key: '50d10a954f022cc3496a38971e3fad5977a3e434', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '0e49d6159f0d9dfccbdeaa06e9a703af5ca76fba' }), h("div", { key: 'c4802c3b9d6c01b06d6c52cb010a3eeb226c6312', class: "actions" }, h("slot", { key: '1623b6fd5e698f11051c1be41eaa6847ecb46b68', name: "actions" })))));
+            } }, h("div", { key: 'c1ba43942ff73044575f4ead220d305cab3d9099', class: "modal" }, h("div", { key: '46f41c03f29231c4f621f8452fba4181a0f9756a', class: "header" }, h("slot", { key: '204fb0ef7d8d9a7d4868d057951e5a32897358f6', name: "header" }), this.closable && h("smoothly-icon", { key: '4a28b30ed78dfc9ed337234b3781e97c442ad666', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '77d039b6997bf5733f8e742f5ccecdf298b0061c' }), h("div", { key: 'd66baf4ebe44edf48af32f3f7fdc978ecc235803', class: "actions" }, h("slot", { key: '6306178ed0936fe1c876da10f4d14f25422e4763', name: "actions" })))));
     }
     static get is() { return "smoothly-modal"; }
     static get encapsulation() { return "scoped"; }

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

@@ -49,7 +49,7 @@ export class Notification {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: 'd73f9641d0d37113ec19891b5c9f59d8019230f8', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'e818ddd9455d8b7aca012be7c6a33f8942cb9a68', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'fe3e9e3f88077e060f333baf9fbddfea07c1e7be', name: "close-circle-outline" }))), h("span", { key: 'f89d90613b740f806201bd2298d40ba2cb994fc8', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: 'e773e024e416c84bec77fb891462b9b7c841824f', name: this.properties[1] }), h("p", { key: '4daa8f0c0e8b9ffc1f1ba786ad233c1264099bdc' }, this.notice.message))));
+        return (h(Host, { key: 'ea4244b7ad04c638e4bca7cd6c9aa550d1128401', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'baa7387b56bda4232d59cbd83fc1477b1f728c10', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'ab42df6a7cbc5a04a781c7a48c9146b137f540dd', name: "close-circle-outline" }))), h("span", { key: '4e9b253ffd09e188816ceabffa08ab8e138e87a6', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '35a676710dc5deeeee38a21a345e297e83fff3b3', name: this.properties[1] }), h("p", { key: '1fae910be7ea1e55253e08f50d0d064e20eaac91' }, this.notice.message))));
     }
     static get is() { return "smoothly-notification"; }
     static get encapsulation() { return "scoped"; }

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: 'bedcd18dde0e5ef17522b8289dee911015708d43' }, h("slot", { key: '3b631d5e334d1a8c698098a7ff21ee8cd40a572e' }), h("div", { key: '7052a9eb6a207f477e7a06fbf2f67e231ccce23e', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (h(Host, { key: '25e53ef1a4d48669cda0a254c63dbc439726a4c4' }, h("slot", { key: '6bed9d295489eedbe95ce62a03cd535059ffcdef' }), h("div", { key: 'dc788339a0295b6ac649c26072638b510165524d', 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

@@ -6,9 +6,9 @@ export class SmoothlySpinner {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (h(Host, { key: '91e0a007802a3083c6a9139b8eac70e5589a6bd8', style: {
+        return (h(Host, { key: 'db702a6ff6bcd18b4fd92240cf2f33fa1a92e773', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, h("svg", { key: '831ec769d03d32917064a7bdcf6c79db27d3ba34', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '27b650bff53888f95016353422c5ae928b758288', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, h("svg", { key: 'e5162cf5e7fc56497f39fec5eb1459fbb5f7feb4', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'ba2b10a9860d03befc818a8f0529456fb06962cb', 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

@@ -25,7 +25,7 @@ export class SmoothlySubmit {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (h(Button, { key: 'fa8802fdba3357d4e2718ba01cdaacb6eb9dc447', disabled: this.disabled, type: this.type }, h("slot", { key: '6089bc597c9ba8a1d8df0ccc3388ca09b9ea4f49' })));
+        return (h(Button, { key: '083174c3923c6f43955fe12bc58679e045572565', disabled: this.disabled, type: this.type }, h("slot", { key: 'a85f6012cab4b0335f5aaf883adf44eaffc61bc5' })));
     }
     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: 'bfc42e899118e3da7e8960d2511182a73a5b2a6a', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: 'e59d4ba68e9f50851536c0870b0322a2af621f2c' }, h("smoothly-icon", { key: 'c2a3da3176bbde4ce4b3f5e68f715dc3896998b1', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '0ba069fa0fd3e10e39257470ba3c145b7104ab3a', name: "summary" })), h("slot", { key: 'c1f1c78609a469b86394fcb62ae8bf97a3e2d4ae', name: "content" })));
+        return (h("details", { key: '656532b655d792c24156ace59836ed5bbbea2fa1', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '72eed454a1a2e915e1fddcc6cca455b39ae7cefe' }, h("smoothly-icon", { key: 'b5b910c2617888ec9cb1c620e5fc6b2ae36ef121', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: 'f899d029a7efc1a36aa3afc8f01ca35819c56e9a', name: "summary" })), h("slot", { key: 'e9b8f59e6c8809f74290194f9f5dd2ac35d2bc29', 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: 'db37d0ab8fc16f55f3e81aa1b4e5b77377c9f95c' }, h("slot", { key: '8e82a1f5998227ad1c3e46ac3e147492f66fb482' })));
+        return (h(Host, { key: 'ea2c8974b36285804e22594f210d0aafed868ab8' }, h("slot", { key: '94a9f2e944cb1844c10e5e4af0063f0998ae6c21' })));
     }
     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: '30943ec45f6e73df71d5ad72bbad350e4f076f34', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '4af540a7486d8616d427159feaa6200c91000e05' })));
+        return (h(Host, { key: 'b349520506057a78b00279d9a7f38473a94a978a', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '960a4a8e7dccab667961506a2f9369a4e0bc470c' })));
     }
     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: '1b9dfde05087d6be2711b86baca19630286b2322' }, h("smoothly-table", { key: '0ba0536e747782d879f6a2cf099388435c881ad5', columns: 3 }, h("smoothly-table-head", { key: 'e14bea187af499007f4173c261526c72f3b89c8e' }, h("smoothly-table-row", { key: '9104850519968b86ba1f48f5ee997a1ccfa49a12' }, h("smoothly-table-cell", { key: '26dd9041355d04f517e3951ce608cc8b60b8caaf' }, "Date"), h("smoothly-table-cell", { key: 'b78eb957ed8ec68b5919362fe0afedc1f6375c5d' }, "Skip"), h("smoothly-table-cell", { key: '1f8ef467f5a9e9ba2157e126fc3adedb2821c9ea' }, "Total"))), h("smoothly-table-body", { key: '6679b94c153ce61b39957e64d453f8f5edd47cf0' }, h("smoothly-table-row", { key: 'd0f0c0b13b0e56b7fc761701897f9304c531c5d9' }, h("smoothly-table-cell", { key: '8e022e2e5befad0983c8d6e0567dc92a8fe1bb0c', span: 2 }, h("smoothly-display", { key: 'efb5e464048093e3855163818b6b38d86f084995', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'c9912c8e499f751cd84323b15b282f58e1a2a052' }, h("smoothly-display", { key: 'f618c45ed3960424e46ef6f40adf2b69c7307a08', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: 'a8605b2eb3eb80ab039f2cc6e257842045e16909' }, h("smoothly-table-expandable-cell", { key: 'cf8436e7d932f4ff0d92a054c74275551961a1ab', span: 2 }, h("smoothly-display", { key: '2013f65b67bf9f03de31fabae41e2fa4cfab338c', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: 'e8d3b46995025d2f3af0f2f587b555bf4d1c0daf', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: '0409b2d3c90ada5737e6bb9069fb1066ff7063af' }, h("smoothly-display", { key: '82bd4a3cde9062604343fd53161a7d86838f4fed', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '4592efa154194347becf15f00275303577d743b7', 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: '0aa33698c9d9de3f41d04298d60a15b62f9294e4' }, h("smoothly-table-cell", { key: '5e7265ba2d08b2aba02decd78ad88319cc407f72' }, h("smoothly-display", { key: '5af078d9ea92c4a6865a3f7545ece78d709c85fd', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '606899c1227efff03793e7108f413ca727b77304' }, "Not Skipped"), h("smoothly-table-cell", { key: '9fcdda1bad4686bf2c8a5a78486a05d25d923402' }, h("smoothly-display", { key: '033cf9f7f2f090738f71320df238d26152acdcd1', type: "price", value: 320, currency: "EUR" })))))));
+        return (h(Host, { key: 'fff7b4cb91b1f9b0e6534666a84a2ea28c269310' }, h("smoothly-table", { key: '4ddff78ef850a69b7e0cc7bcfec6f8174c11c914', columns: 3 }, h("smoothly-table-head", { key: 'ab6863e67f5d10fa589e03f91777bcb14fe8ce4e' }, h("smoothly-table-row", { key: '59f589f45581a84b7a438f183ca8a67c1df140d1' }, h("smoothly-table-cell", { key: '583bf167c1def4d301e8348a5fa50b6fdfdc0e94' }, "Date"), h("smoothly-table-cell", { key: 'e9f01b05874f41d929466292261c3769a5da4446' }, "Skip"), h("smoothly-table-cell", { key: '1d2fa708369e2a48fa44aadf188e24e72519c0f6' }, "Total"))), h("smoothly-table-body", { key: '4480d442f17ab3272473576fd006b516679ba74c' }, h("smoothly-table-row", { key: '1f5761800165248dc09cd748f256f27924bb456f' }, h("smoothly-table-cell", { key: '97224720b11bb6ede655ce803e341fc85baf86bc', span: 2 }, h("smoothly-display", { key: '194f5e0a678d14248c474c1c0ffd7478ed9ffaae', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: '1bdaeb35ee09362fe75f022311e5643e34f52db1' }, h("smoothly-display", { key: 'b582e4561a2eb4f2cbe22be2e083d90e146dc183', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: '837006088b86dd7ef032e0c7a5753e3d64f6a1ba' }, h("smoothly-table-expandable-cell", { key: 'b7b6019430bbdeca619eafef1dd6b9442c87ef5d', span: 2 }, h("smoothly-display", { key: '88b8d3e5a75c3a958e879d23b7f9e413fba47da4', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: 'fcb63742e4d64bd2a38f0337412e045bedbf39ed', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: '240131b49a8b7521004a7a95737366ebb1bdda20' }, h("smoothly-display", { key: '4aad0bf2cbf412e075f766e10d40c5758a048be2', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: 'c53342cf39d624907d06c540afa90fb5646d360f', 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: '7e6f015b0e0794f403e8d5c8895aaae682bf6bb8' }, h("smoothly-table-cell", { key: 'bd245690132ffc224cf1e3bb816dcc5a78203ce6' }, h("smoothly-display", { key: '286f1a6ab76766ba8f572aa332ad95fd20273315', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '81ed56ba532993dbd457df465c3ea37c4c827c31' }, "Not Skipped"), h("smoothly-table-cell", { key: 'abd4bcd79701b87d36266387299db43d88773bf9' }, h("smoothly-display", { key: 'f5a50eeccb0ee32593ba953447fb73ba5900f0ea', 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: 'f857bf2706fea0bc7bef38da1231c17460e9c609' }, h("smoothly-display", { key: '56bb55f00ea43d80e8b94460bb2e951bc741aa72', type: "text", value: "Filler row" }), h("smoothly-table", { key: '3a6c43bc37797672d40417395ffdacca1b52f327', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '09289f8564422ceb0f8b7d33040a561d35dc9a02' }, h("smoothly-table-row", { key: '9675f44ce397953bc4b674bc768299d3a018820e' }, h("smoothly-table-cell", { key: '8fde03da5517c6f75c7c8da3c5bb336d2ed5a4b0' }, "Breed"), h("smoothly-table-cell", { key: '721fc804d59cb6dca7b66b2fd38dd700172322be' }, "Country"), h("smoothly-table-cell", { key: 'e8fbd6258f7167841eef83776e00406cd9ed3690' }, "Coat"), h("smoothly-table-cell", { key: '3e514eab5bb013da0d23cdde06324492bb97632b' }, "Origin"))), h("smoothly-table-body", { key: 'a14df5fcfad26c2d54ef13810e409ed65f72ac39' }, 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: '17a220a0ea37578573d2532ac64e21590839cdd2' }, h("smoothly-display", { key: '7e800297cd73ceed94d928ba259c5a9d4eb70350', type: "text", value: "Filler row" }), h("smoothly-table", { key: '453f06abcfd482c5ffae7cf42fb510503205798e', color: "primary", columns: 4 }, h("smoothly-table-head", { key: 'eca5f7c566ed5fabcd794856b6d4c88f3c1e218c' }, h("smoothly-table-row", { key: '2296af99c98c5aed2c2015f630743c2a06346b2a' }, h("smoothly-table-cell", { key: '3acd97b05e0598adf9b1c168a02c51a71a0901dc' }, "Breed"), h("smoothly-table-cell", { key: 'ecf66c5063fc3b3e51ded23ff0cc95804bbcfd60' }, "Country"), h("smoothly-table-cell", { key: 'ba6db28368d1c7e2a8ca7fc326d64fb05a3d5524' }, "Coat"), h("smoothly-table-cell", { key: '47d711b8b459884b9e319b412f215e8d11673575' }, "Origin"))), h("smoothly-table-body", { key: '2b3e2c185036029fd330adc9272b69f1f1167c2b' }, 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/filtered/index.js

@@ -27,18 +27,18 @@ export class TableDemoFiltered {
     }
     render() {
         const cats = this.cats && selectively.filter(this.criteria, this.cats);
-        return (h(Host, { key: 'd8b3ad77da3b6cb9e815a50d79f84d1c6a811e4e' }, h("smoothly-display", { key: '98af74a79c021d4a2c2745d22efdfda66c8824d4', type: "text", value: "Filtered" }), h("smoothly-filter", { key: 'fb4409524f1fd2d09b4ca245679bbe1d0b8a989e' }, h("smoothly-filter-toggle", { key: '50f1a730744c162ea32eca49f175a618ea182e22', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", tooltip: "Nested Ticked", slot: "bar" }), h("smoothly-filter-toggle", { key: '3ccd46f9bf9d95ea8efc6f4b9904287cacf58774', properties: { pattern: "Ticked", breed: "" }, icon: "paw", tooltip: "Ticked cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '55ac1ae50f0d758a8c4967f90bfb1158b19355ff', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", tooltip: "Solid bombay cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '28c9d499e5d68c81f5ff50b39912b70e85c0951d', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", tooltip: "Colored cats", slot: "bar" }), h("smoothly-filter-select", { key: '6b72624b9ebd4a12b99074597ab3832b7025011c', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (h(Host, { key: 'c17dfa504eb6da9d55ca3faefbb939e205e576dc' }, h("smoothly-display", { key: '0346275c6e0c788318bbeea532d6d0e62f89471b', type: "text", value: "Filtered" }), h("smoothly-filter", { key: '60932eb8b56d569f3deb5aefddacf933f60cec14' }, h("smoothly-filter-toggle", { key: '86067684d7dae87ad332f379b161e2cb5a6d4974', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", tooltip: "Nested Ticked", slot: "bar" }), h("smoothly-filter-toggle", { key: 'c6b53af97218f61df526fba4540f0119560b6bd1', properties: { pattern: "Ticked", breed: "" }, icon: "paw", tooltip: "Ticked cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '9513d102b67ebd2645f3ddcca646bd5a5f74962d', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", tooltip: "Solid bombay cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '7e811e0c5c34d620d906f410396ca3802d70344f', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", tooltip: "Colored cats", slot: "bar" }), h("smoothly-filter-select", { key: '2283fbe2db0238ce81837fd8056ded22f3968016', 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) && (h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), h("div", { key: 'd41ea8b32d00dccaa5387f84d71a5ea4cec7970d', slot: "detail" }, h("smoothly-form", { key: '5654b332a077152ae1438eac095cd3523da770a8', looks: "border" }, h("smoothly-filter-select", { key: 'c1c07dc99c02dbf9043e1f6ad2ad2eea8a49a511', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), h("div", { key: 'df1913243aea481ffd77293833cba7c9898973b7', slot: "detail" }, h("smoothly-form", { key: '69e4574ff214ac51c7adf5411c6eca1d5a1b550a', looks: "border" }, h("smoothly-filter-select", { key: '743a1dde796abb94d5dbfcbb77b9f6a3130af8af', 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) && (h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), h("smoothly-filter-select", { key: '3b5479f13abe40f9da79a68f0db36a4b33660f73', 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 && (h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), h("smoothly-filter-select", { key: 'a84c4c06a961d71bd8605c7e90b960f72c6b10d5', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), h("smoothly-filter-select", { key: '319fb71c26845ef2c37afb42e3634c9a4bc4ad62', 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 && (h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), h("smoothly-filter-select", { key: '0db333307aaac5fe3d8cdfac849389feead95c00', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
             .flat()
-            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (h("smoothly-item", { slot: "items", value: name }, name)))), h("smoothly-filter-input", { key: '12a34eaa89d99be16bb563dbbf32a353e988865a', label: "Coat", property: "coat" }), h("smoothly-filter-input", { key: 'ad77d0b787cc319fc830c9ed699f31baaa071da5', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (h("smoothly-table", { columns: 4 }, h("smoothly-table-head", null, h("smoothly-table-row", null, h("smoothly-table-cell", null, this.selector.render(cats)), h("smoothly-table-cell", null, "Breed"), h("smoothly-table-cell", null, "Coat"), h("smoothly-table-cell", null, "Price"))), cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-cell", null, this.selector.render(cat)), h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country: ", cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), h("smoothly-table-cell", null, h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), h("smoothly-table-foot", null, h("smoothly-table-row", null, h("smoothly-table-cell", { span: 3 }, 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 => (h("smoothly-item", { slot: "items", value: name }, name)))), h("smoothly-filter-input", { key: 'b358bc8a8377058d1404ec6a9201c729e172706c', label: "Coat", property: "coat" }), h("smoothly-filter-input", { key: '15acf410163142d187b6de4d6f4e5e57bce48f18', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (h("smoothly-table", { columns: 4 }, h("smoothly-table-head", null, h("smoothly-table-row", null, h("smoothly-table-cell", null, this.selector.render(cats)), h("smoothly-table-cell", null, "Breed"), h("smoothly-table-cell", null, "Coat"), h("smoothly-table-cell", null, "Price"))), cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-cell", null, this.selector.render(cat)), h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country: ", cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), h("smoothly-table-cell", null, h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), h("smoothly-table-foot", null, h("smoothly-table-row", null, h("smoothly-table-cell", { span: 3 }, h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
     }
     static get is() { return "smoothly-table-demo-filtered"; }
     static get encapsulation() { return "scoped"; }