smoothly 1.112.0 → 1.114.0

package/dist/esm/smoothly-app_98.entry.js

@@ -2283,7 +2283,7 @@ const SmoothlyInputDateRangeText = class {
         }
     }
     render() {
-        return (h(Host, { key: '5a1a4cfeb67c96be31473ab847d84c93ff2b5459', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat$1.Order.toArray(this.order).map((part, index) => {
+        return (h(Host, { key: '29343df478fdb9a5805aef00432be4456d8e4d12', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat$1.Order.toArray(this.order).map((part, index) => {
             var _a;
             return (h("span", { onClick: () => !this.readonly && !this.disabled && this.setFocus(index) }, h("span", { class: {
                     "smoothly-date-text-part": true,
@@ -5792,12 +5792,34 @@ const SmoothlyIconDemo = class {
         this.props = {};
     }
     render() {
-        return (h(Host, { key: '18c352e6e8cbf5c6207f06724fc4f150c3f35c62' }, h("h2", { key: 'ffa9a93a76b1e55ff2a02520271d00018f21c8ef' }, "Filter and Variants"), h("smoothly-form", { key: 'baa8442f242902404ad315ebc4898c03ce305e84', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: 'faa53d6709688e9bddfab452fc87f4747673c93f', name: "filter" }, "Filter"), h("smoothly-input-select", { key: 'd48cbfae334db2bc93781ccfe7707a7158a64d64', name: "variant" }, h("span", { key: 'e6599d7081c25eddb56c0e507610a933540fee2a', slot: "label" }, "Variant"), h("smoothly-item", { key: '79caa2a8f42d9ec8fa99aab43f4e94086a9ca0a9', value: "outline" }, "outline"), h("smoothly-item", { key: 'e31fe80073050b010f809d9b0cb24ace35b23f06', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: 'e25bedaf8423625fc2519a9f58071678609efd2c', slot: "end" }))), h("h2", { key: '512c66c201567f14abc10e60ee9fc50950792dd7' }, "Props"), h("smoothly-form", { key: '46b821b5871a14d2075a38893d7c072f1ddba8be', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: '1b14ebb3490198a4ebcb11a05a543853f48acae2', name: "color" }, h("span", { key: '887bba78b3f7ac5ac31d752be0fc8d64bdccbd31', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: 'ec1a9f35b7d2efe688a42ac17a745af586ba65d5', slot: "end" })), h("smoothly-input-select", { key: '8eeb32f412b3eb98069382b1fc8146275152de4e', name: "fill" }, h("span", { key: 'b5095c6c37feffc383e411704a35c92d7f1f16d0', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: 'c4c9096e4d4f6a0e768a26cd6e291abd03ce8a1d', slot: "end" })), h("smoothly-input-select", { key: '82f39197d5b222078feb0db6c1caaea43cc2ff4c', name: "flip" }, h("span", { key: '28941724eba176612385fd568ae1ac2f70700668', slot: "label" }, "Flip"), h("smoothly-item", { key: 'eb246197acd42723a1024dee8abe0345603272e7', value: "x" }, "x"), h("smoothly-item", { key: '342b97c622d716038f19317684576914257acdb1', value: "y" }, "y"), h("smoothly-input-clear", { key: '21569726b10d6999b787042f7f2e533096d1e759', slot: "end" })), h("smoothly-input-select", { key: 'e8cda7e1e14dcc593abb997e2d1f77caae71ba56', name: "size" }, h("span", { key: '0311005eab874402134fa180e8c62829b6d444d0', slot: "label" }, "Size"), h("smoothly-item", { key: 'c4a818d1eed298db112640f1d356a1c277834c0f', value: "tiny" }, "tiny"), h("smoothly-item", { key: 'a2d5122deb9c8a51fe10796f19c9a16e22453c15', value: "small" }, "small"), h("smoothly-item", { key: '6245959982688e42a7a33a8931c7e3255cc743c2', value: "medium" }, "medium"), h("smoothly-item", { key: 'd9127f7de89eed1680fe5a917b18abbf6933871b', value: "large" }, "large"), h("smoothly-item", { key: '81058c44cc17c319447addd523ccacd72ef9137c', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '9ac0d568820db33f77d5162b77eb9787fd8ec9ba', slot: "end" })), h("smoothly-input-range", { key: 'aa25c23d3f494139787b7465c5fe9d525092e0b0', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '1947c759df77c69e1b74ba559357112ba7cf1390', slot: "end" }))), h("h1", { key: 'd893bf2235db23ef7a0b2199e1b5406660823200' }, "Icons"), h("div", { key: '26d05332b66cb566bc0a0d93fc997d8bdebb6563', class: "icons" }, [
+        return (h(Host, { key: 'f176097a9e8b600e7b6849618d986932e1115dfa' }, h("h2", { key: '600c0aaa4c8d9d66b75b3a9fb2546f8128b00f0b' }, "Filter and Variants"), h("smoothly-form", { key: 'da8b0a10a564b01918e644af025436dd13e1aa8c', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: '976282ac0d7bf9025e305b975b5800ba8946190d', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '81287920684545cdaedf4ae5df9e79bb8a9eea4b', name: "variant" }, h("span", { key: '8f14bd0559ab879184978aa720fbe9d72002c981', slot: "label" }, "Variant"), h("smoothly-item", { key: '262b691b55fc7a5dc662b50f6e84ac98e04db140', value: "outline" }, "outline"), h("smoothly-item", { key: '9baf50fd4633f0785577bebf8647f9ec4c9da525', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '5460d9ba34ad9e5f5bc765893174fb57bf88b189', slot: "end" }))), h("h2", { key: 'a204390a284b9da8171a655c315981111ee29906' }, "Props"), h("smoothly-form", { key: 'bbcb2e224b053d8983a743abd34c0a0186bfcc0f', looks: "grid", onSmoothlyFormInput: e => {
+                this.props = e.detail;
+                console.log("props", this.props);
+            } }, h("smoothly-input-select", { key: '7f0f6e1932f649f5fb300f96a2d6eabc88e701aa', name: "color" }, h("span", { key: '508bbda0d768fc4f661f0f0887857e25d21c7a91', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color }, h("span", { style: {
+                background: `rgb(var(--smoothly-${color}-color))`,
+                "margin-right": "0.5rem",
+                width: "2.5rem",
+                height: "2.5rem",
+            } }), h("span", null, color)))), h("smoothly-input-clear", { key: 'e9b59296121ab6e415840d4f501ba31a4347e7af', slot: "end" })), h("smoothly-input-select", { key: 'd066f9f4aa8d79c19537b03e9fba85386e673633', name: "fill" }, h("span", { key: 'f6ae683d747cbeb8a3e40e4d240efe08a1ef8ec4', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '594435142c02e0b379f6b54886927069681de3cf', slot: "end" })), h("smoothly-input-select", { key: 'f5f821cfdc6a83063bf22c2eb8417e3fa33845cd', name: "customColor", menuHeight: "12items", ordered: true }, h("span", { key: '2b502f1dc5775cc23df45be8e48da4e297071078', slot: "label" }, "Custom Color"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+                background: `rgb(var(--smoothly-${c}-${v}))`,
+                "margin-right": "0.5rem",
+                width: "2.5rem",
+                height: "2.5rem",
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'ca3d4788ce77f1175a2e9e0cce841f3c8aa5925c', name: "customBackground", menuHeight: "12items", ordered: true }, h("span", { key: 'cd4faa49f2167739f5b00f1b0c734fdf6b8ddc4b', slot: "label" }, "Custom Background"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+                background: `rgb(var(--smoothly-${c}-${v}))`,
+                "margin-right": "0.5rem",
+                width: "2.5rem",
+                height: "2.5rem",
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'bfebecae9f13f019bd13a8baa8c1029468d83c18', name: "flip" }, h("span", { key: 'e8a300bdca3f1db8c36dff27b0df5afd08c6bda7', slot: "label" }, "Flip"), h("smoothly-item", { key: '5f92573e3420ce19c1d291c394259cf0b1b0cb63', value: "x" }, "x"), h("smoothly-item", { key: 'c55f735398bb6b01d83d0d80922214f007983f07', value: "y" }, "y"), h("smoothly-input-clear", { key: '171d0667b92be8ea4b8ef6c38bc4b6170c1db813', slot: "end" })), h("smoothly-input-select", { key: '30ebb8bdb6d5d75b8cfae380bb8a83bccb89b499', name: "size" }, h("span", { key: '62df815da76512b43ae1c4583ff3e61f29ed5133', slot: "label" }, "Size"), h("smoothly-item", { key: '5cb1ff7cb3660016cc243eb24b5f7f3fde4dd08f', value: "tiny" }, "tiny"), h("smoothly-item", { key: '0d4d0f54b705a47741d11f2b5fd29245362ded31', value: "small" }, "small"), h("smoothly-item", { key: 'd4469868285cfa6c6ec5de5609f313f892cc66f1', value: "medium" }, "medium"), h("smoothly-item", { key: '2b98aac9eeacc7942aa9ea73c48b16f36c226033', value: "large" }, "large"), h("smoothly-item", { key: '520ebe334ad34dde56d5f8b5ecb7ca25e6645989', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '6b6dd6bd7070703371c89175f71ac30049e8042d', slot: "end" })), h("smoothly-input-range", { key: 'c85ffd310deeec0ef502b8549d9bfce3aa0ea895', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: 'a83b8be42b242c1b42b9ab34c9a3c61e0420ab64', slot: "end" }))), h("h1", { key: '02ce154b99955eece2bca3bb28fa47ad8955d18a' }, "Icons"), h("div", { key: 'e40575d19a189a6c8142c40943692854d9899749', class: "icons" }, [
             ...Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),
             ...Icon.Logo.values.filter(name => !this.display.filter || name.includes(this.display.filter)),
-        ].map(name => (h("smoothly-icon", { name: name, tooltip: name, "data-name": name, color: this.props.color, fill: this.props.fill, flip: this.props.flip, size: this.props.size, rotate: this.props.rotate, onClick: () => {
+        ].map(name => (h("smoothly-icon", { name: name, tooltip: name, "data-name": name, color: this.props.color, style: {
+                fill: this.props["customColor"] ? `rgb(var(${this.props["customColor"]}))` : "",
+                color: this.props["customColor"] ? `rgb(var(${this.props["customColor"]}))` : "",
+                background: this.props["customBackground"] ? `rgb(var(${this.props["customBackground"]}))` : "",
+            }, fill: this.props.fill, flip: this.props.flip, size: this.props.size, rotate: this.props.rotate, onClick: () => {
                 navigator.clipboard.writeText(name);
                 this.notice.emit(Notice.succeeded(`Copied "${name}"`));
             } }))))));
@@ -6238,7 +6260,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: '70b8f1998872650f29f9868082b967534f236f07', 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: 'ea9697662701929b3f97f939bcedf52264e499fa', name: "start" }), h("div", { key: '8438ab65ede2df7cecae8e333877f358a09dc8ba', class: "smoothly-input-container" }, h("div", { key: '498c91553b4672a7439e87ebe01b91fd78e38097', class: "guide" }, h("div", { key: 'a46dd14b4c9dba32d59a5d24067b10d0c89dc577', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '9463bd116c7aa48d36a5f2109cd31fc2968922d2', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'c82970753f25895533f6ed5564edf86578c8ad73', 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: '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) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled) {
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -6254,7 +6276,7 @@ const SmoothlyInput = class {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), h("label", { key: '963b63416e0c77ebc2cfcbcc088efd4728edcd7f', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '49c41be3bf0bf77cd130830b8407c01b1143890f' }))), this.copyable && this.value && (h("span", { key: '3b042352ee3ce520adcdea4c627cddb19dc07d37', class: "copyable" }, h("small", { key: '30e1d95db69cceeef2bcd3a6baccbdd9f64dd57d' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: '7de8ce70f20a982f93ad1e33bb15f6d53854344e', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: '9f571de472ee768ad5e6c975378306515f1d252d', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '75bf79f1aca5b93e984d6f731c0f28a768b6c537', name: "end" })));
+            } }), 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" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -6354,10 +6376,10 @@ const SmoothlyInputCheckbox = class {
         }
     }
     render() {
-        return (h(Host, { key: 'd3c69edab659c924b8bcdc9bd7f2c8f3bf3b6b6d' }, h("input", { key: 'a6ce7d4cc668104d71171e717efe6cbf24227d43', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
+        return (h(Host, { key: '3d423adb72e619d4119435408a6b4ee9adbc2704' }, h("input", { key: '489144f56039b3edf5dab1f7ffe9f37e2d0fcadd', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
                 this.checked = e.target.checked;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), this.checked && h("smoothly-icon", { key: '1469bffde30e54f10340e7a6c4a22dac6d6b3755', name: "checkmark-sharp", size: "tiny" }), h("label", { key: '768ef233b6b58a99328caaeae28a30a3f0ee3c7e', htmlFor: this.id }, h("slot", { key: '8d6cd0ff949cd3b444dad658a3ebe4a6c974ca42' })), h("span", { key: 'e87b01790eb36fafdb0ef8ad4ef4cfefbc32bbde', class: "smoothly-checkbox-end-slot" }, h("slot", { key: '3287f4a21799575093d3116708912944fb475576', name: "end" }))));
+            } }), this.checked && h("smoothly-icon", { key: '6f97dca6dbfedce3d06d4146269bb518016476a8', name: "checkmark-sharp", size: "tiny" }), h("label", { key: '63fc6b505b6d21a779e60ae9803b56134fd855e0', htmlFor: this.id }, h("slot", { key: '88de07dc316049e436784b8ad1e7a3fe359363ff' })), h("span", { key: 'dd9d9e7f30dd37550a089b65c62d26e38471d8bc', class: "smoothly-checkbox-end-slot" }, h("slot", { key: 'f74c25ab1f6765225044bfc21db40b51e47802aa', name: "end" }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -6420,7 +6442,7 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c3057c346978456fae66b50daa28779d57897fe4', title: this.tooltip }, h("smoothly-button", { key: 'ada585112d53669e71813f504c07f4ea51f8365a', 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: '5300d48ce3c05f9ba4e7492db5069e5252aba1c3' }), h("smoothly-icon", { key: '771161bfba19ad4f9f875481a75c5b7b65d3d143', name: "close", size: "tiny" }))));
+        return (h(Host, { key: '35dfd4b4b5b2aaac1457f14143591df8244e4e2f', title: this.tooltip }, h("smoothly-button", { key: '681e2d83c6fe6061919a06ece237673e0c68a159', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '31f3176ab610d6c1ce68055b6f0df55ba2303e29' }), h("smoothly-icon", { key: 'a454fc3409e50dd4a0fb7566460909645066b944', name: "close", size: "tiny" }))));
     }
     get element() { return getElement(this); }
 };
@@ -6578,7 +6600,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h(Host, { key: 'c7ba977a7c84843fddd8c73600a8df00972e8917', style: {
+        return (h(Host, { key: '443b5ede9cb6485ed194f6c4bcd0dfa4d24fbf5f', style: {
                 "--hexCode": this.value,
                 "--rgb-r": `${Math.round((_a = this.rgb.r) !== null && _a !== void 0 ? _a : 0)}`,
                 "--rgb-g": `${Math.round((_b = this.rgb.g) !== null && _b !== void 0 ? _b : 0)}`,
@@ -6587,7 +6609,7 @@ const SmoothlyInputColor = class {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, h("smoothly-input", { key: '8d0493b28e48893024490160374153ad3e499ea4', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: '539224411d36af207f33f96d7da2b504f9eeaac4' })), h("div", { key: '1b84a1ff22dee501938548d73add98faffc4937f', class: "color-sample" }), h("smoothly-icon", { key: 'cf4b1cce4a53443502a469a7804140855138a619', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: '07c94343fd9ec8b583cf394e970b9b3ada13ee52' }, h("slot", { key: 'b9de4cc751ac02caf0c3a69f1f19453ed6ec0fac', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: '805a0527d0fced3f71a7f132839122546760a889', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: '5422c50441feafc90c407eed1773e96c6774c0eb', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
+            } }, h("smoothly-input", { key: '773d645e7cbe1dba29ed0faaf411873eff3850e4', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: 'e0237c1fd28820b5827660cc3f343a0b0daad919' })), h("div", { key: 'd4be603547b585719296c5fe4a129cffd7e5e904', class: "color-sample" }), h("smoothly-icon", { key: '17a5e51dba9a921faa53a42a2bd0b94cbdb8f490', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: '30eaa873254116bfb5930a1da0f93924682d5810' }, h("slot", { key: '65f98a331cb2b8cabbe58715c2cc496950e5a92c', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: '972192b5efddbb9a173e2b50b35cfeebefb3a1f4', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: '9ec21361f064f9fc889aa1c1b50f672982882cb3', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -6612,7 +6634,7 @@ const SmoothlyInputColorDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'f984ceaff90804fca1e618768ebadbd329c6b2e1' }, h("h2", { key: '00d7865260450e2575681ca1650bab25b4d52508' }, "Color"), h("smoothly-input-color", { key: '67d034749c8c4725dfc05e30a035755da7aa53f4', name: "color" }, "Choose color")));
+        return (h(Host, { key: 'a24614a0d013b44ad55334eba6849d7d4c2ebdc8' }, h("h2", { key: 'f003675167b0a648e3de7cd44a2a2c53a27c1e3a' }, "Color"), h("smoothly-input-color", { key: 'd562fdd31044939c84dd7bd6264adfe9ea4a8bfa', name: "color" }, "Choose color")));
     }
 };
 SmoothlyInputColorDemo.style = `style.css`;
@@ -6733,7 +6755,7 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: 'daf9c45dec7dd26de2d6e0a6c4be1edb164c550a', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '7e4ded7f49badad87d40e7c72feea1f97c1b3696', name: "start" }), h("label", { key: 'adb59c083e4c8f8eff91c5ec551b80a8a8c6021c', class: "label float-on-focus" }, h("slot", { key: '5eb72d0fad4a9434e04ca26990f5814c3968816e' })), this.placeholder && h("span", { key: '2db6ea8a6aa504a88f0df85cb51d3b35f169f7e0', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '579177b155b1ec9057ba5ef0caf6b200255739a8', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '7793ab23717002dc3b48c395339ba1a52e4ff29b', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '22fe16cd88fd192c18c03ecc6c7e7f68cd46f1dd', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'abdbafc201ee41a8bf6fd7814ffeb307dcd84c76', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: '1dfeaaa136dae6ae0665e1c98183d5995d14e546', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '93bbc2286b76543c4412969f69aeec2713f60a3c', slot: "year-label" }, h("slot", { key: 'bcba612d6b9803c4cba33775c6a8f12e6dc69cd2', name: "year-label" })), h("div", { key: '83a50201b1f1700910012bf9476f3ca02f3a1f49', slot: "month-label" }, h("slot", { key: '92b1ee4b0d5bb6e0a36857063e9657b649d8a901', name: "month-label" }))))));
+        return (h(Host, { key: 'adce039516ed0f3009e61150455b2c51cc0ec899', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '9050a4383696852cac8b11bf7a426f41d592e3dc', name: "start" }), h("label", { key: '82204edd99bc733897ad6a05d79efc8dd74c83f6', class: "label float-on-focus" }, h("slot", { key: '6a479c63d63fdad7947cd25497f3dceba64574df' })), this.placeholder && h("span", { key: 'a905c85bffb75afa43cf2ea7effdf6a985ce64f8', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '0e7c8d8a86189c99f83750435da80988153c6519', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '6271a396fe0a9db78c65a3ceac415baa6993ce72', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '67762b14cf3c1a8657441805585cc22920fcddf6', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '88eaca53d97c64fcfa81e0f749b1e9ff3a0068c4', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'ed5ff09959095128feac27c0c5c4b8ba8b51514f', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '7d482a7dac0561c9f339948ef22573c9f49ccc51', slot: "year-label" }, h("slot", { key: '6a55528882645e6cc6c5e14b3498b480b8c1d6fd', name: "year-label" })), h("div", { key: 'c310a5c99728b55d0b3f19cb494cc7fe20f12353', slot: "month-label" }, h("slot", { key: '3a4324a869730eb9acb114243a4feae03318b6d5', name: "month-label" }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -6761,7 +6783,7 @@ const SmoothlyInputDateDemo = class {
         this.alwaysShowGuide = false;
     }
     render() {
-        return (h(Host, { key: 'e33d9339ee4a2275ec14772535775d9dd9bf5f1f' }, h("div", { key: 'f10e1c4e913fd6dd05cd04030d3bd845fda0d263' }, h("h2", { key: 'ca6f4b48417c3d0b07f79194512e0f7648ab8939' }, "Date input"), h("p", { key: '6c635b4fcd3276080055d2a12f4e70e609d30af4' }, "Different locales formatting the same date"), h("smoothly-button", { key: '2b62d912d00ce8b225b085e5554b181f0a970bc5', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: 'fbf65e6cb24cdac58990b043c1879c7f192e25b5', looks: "transparent", onSmoothlyUserInput: e => {
+        return (h(Host, { key: '2eddf4f43fc88d4f0baee5472fb55f98be8464f2' }, h("div", { key: 'a505bd4d499e9fce35b50c88dbb3e3375fe7e36c' }, h("h2", { key: 'b79d4c949fec7c008314b3562ba56ddfe22a1202' }, "Date input"), h("p", { key: 'f76bb9f59b85781610474db18fe10891f1560330' }, "Different locales formatting the same date"), h("smoothly-button", { key: 'c8c39579e4ab97b4b455c88514b7b6d0b78ee781', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: '9e921d7050071821148968680950fe00a0bdad8b', looks: "transparent", onSmoothlyUserInput: e => {
                 this.alwaysShowGuide = e.detail.value;
                 console.log(this.alwaysShowGuide);
             } }, "Always Show Guide")), ["en-US", "en-GB", "de-DE", "se-SE"].map(locale => (h(Fragment, null, h("smoothly-input-date", { locale: locale, name: locale, looks: "border", value: this.date, alwaysShowGuide: this.alwaysShowGuide }, locale, h("smoothly-input-clear", { slot: "end" })), h("smoothly-input-date-range", { locale: locale, name: locale + "-range", looks: "border", start: this.date, end: this.date ? isoly.Date.next(this.date) : undefined, alwaysShowGuide: this.alwaysShowGuide }, locale, " Range", h("smoothly-input-clear", { slot: "end" })))))));
@@ -6898,15 +6920,15 @@ const SmoothlyInputDateRange = class {
         this.smoothlyInput.emit({ [this.name]: undefined });
     }
     render() {
-        return (h(Host, { key: 'd51c1a9eb67ac79c9f2197a1e33226a9b2548967', tabindex: this.disabled ? undefined : 0, class: {
+        return (h(Host, { key: '1f8b2d046cbb64b8df5343a945cb51563d721f27', tabindex: this.disabled ? undefined : 0, class: {
                 "has-value": !!(this.start || this.end),
                 "has-text": !!(this.startHasText || this.endHasText),
                 "floating-label": this.alwaysShowGuide,
-            } }, h("span", { key: 'e401f255c513c13acb60b56c3c5a5f4a0379e8b5', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: '5ecf9d540aebf83d21b58713d509a64755b1bdf7', name: "start" }), h("label", { key: '04fe956539cc96ad23058cf629785d0a39345652', class: "label float-on-focus" }, h("slot", { key: '852ab71bfc5c592ecdfa6eeba18e2a49ae3db91b' })), this.placeholder && h("span", { key: '1805d99e668be475cc77a724cd6da0b9f27bdc65', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '65e91796cba51d73162c032ec14d002be778ac11', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
+            } }, h("span", { key: 'abc0f86b086ba26c3b1d4951394d81da35f83e86', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: 'a06c2b9b096aca90e83f765b364dca7544ed99ca', name: "start" }), h("label", { key: '70d76e4a489a17cb028c4b8831d352171214d58f', class: "label float-on-focus" }, h("slot", { key: '929cd10cba08419fbfeb0e19e99d01ef52bfaf96' })), this.placeholder && h("span", { key: '8c91d08654b77a865869dca0633c04d1af54d57f', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '5a37bda38fa94c90ee8e5440f085c9eac3b81648', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
                 var _a, _b;
                 return (e.stopPropagation(),
                     this.end ? ((_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)) : (_b = this.endTextElement) === null || _b === void 0 ? void 0 : _b.select());
-            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: '3808540c3549d2c2806877f19e59a1d1a73e2cde', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: '9a880b0c1d61415c832b33dd52374da6e73206bf', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: '905c40c0e4493dcbf7f19b2b45dad7d3117d5c5e', class: "smoothly-icons" }, h("smoothly-icon", { key: 'cb3e61522d812b6756aa65873740753399cb9256', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'b2d0ed8714484497ba6c69e3b6617db20c720819', name: "end" })), this.open && (h("smoothly-calendar", { key: '4b62dde1ca06fca127562712a14a287861ca31f9', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
+            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: '694bb773d16025b187d059c8b0cc7b36f94956d5', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: '830739f213b8c3a27619d7f29667483f4317b612', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: '90767c1048bbcc816563496f3d3afbea4970e953', class: "smoothly-icons" }, h("smoothly-icon", { key: '9f6ffbfa8e626160be54d8e82f8538d5a1e75c5f', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '83aef1b1b1c8726f0a7b8b939fcf1d54b07a8389', name: "end" })), this.open && (h("smoothly-calendar", { key: '395c5ba753121d7a0eb1c2d1e986cfad58e98232', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
                 e.stopPropagation();
                 this.open = false;
                 this.start = e.detail.start;
@@ -7040,30 +7062,30 @@ const SmoothlyInputDateTime = class {
         this.isDifferentFromInitial = false;
     }
     render() {
-        return (h(Host, { key: 'e3026057b92f6fcf94e0abc163d179557991a56d' }, h("smoothly-input", { key: '899dce367576b7d7c9b71c98753579a08b85e4f2', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+        return (h(Host, { key: 'faf40611232f95c653ef583a7f0b7ed32ebb400d' }, h("smoothly-input", { key: 'e0761d639e8d0b3a4f305a05e70e5a6df241fd29', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail.date;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }, h("slot", { key: '8f35a2a863b7b7cf177f0ac69534f7ce77fe1f2c' })), h("smoothly-input", { key: '2eda68cc37c950ca7318d2f82989402890420b3b', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }, h("slot", { key: '7fbe6ae1b6697d22ab4037bcf86ef6d27ce5f923' })), h("smoothly-input", { key: 'cd751c2a4dfe09b316772c07e126ad0c5b875eb4', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: 'adadacca4988e986f1aa32c32f43c9e528b01c3c', class: "colon" }, ":"), h("smoothly-input", { key: '9dad75b858470dd4ba808aa89062eed852190cf9', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }), h("span", { key: 'ff4cc79cf32d9cd9528010965e6bbb2c60026f57', class: "colon" }, ":"), h("smoothly-input", { key: 'd96351c5c25c042915f2ea78f94365648f620e35', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: '71b671253a0616cc4858b3a6ee5e3466442491dd', class: "icons" }, h("smoothly-icon", { key: '42087cb059d241c89ba24bacf3515a3a02641ccf', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '333c5b5cd559d2d1dd492e23cf68ace9bb77821a', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'f51dffb8bfe1e12d9cbc020d5129a0fd27c170e0', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
+            } }), h("span", { key: '258c62771f84b3816025a7831756d52ddc3e61a3', class: "icons" }, h("smoothly-icon", { key: 'f10cdb5bd42fe2a1bc8e3c9eb41cd488957bb0bf', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '867ca6ecbe958d5f97e126fc4df23c6fcef6e1fa', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'd1c1ea3e905b5e677883c273231794de21777fc0', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
                 this.open = false;
-            } }, h("div", { key: 'e2cdfa2540db761e6cba45ea4526cd3b8678d5ec', slot: "year-label" }, h("slot", { key: '96fb5e705509cb97721f48066cbcceee91e4477d', name: "year-label" })), h("div", { key: '134921d0e28c76ba346231073135fab12acdfb17', slot: "month-label" }, h("slot", { key: '73aedfafe560f577e97f16730c0b295eeb8f172e', name: "month-label" }))))));
+            } }, h("div", { key: '0ab989467e67bc709d0c45285a7eba7743606171', slot: "year-label" }, h("slot", { key: 'ae14dc89cb7cfa3df3bd12ed531d9e4f71242c07', name: "year-label" })), h("div", { key: '9e226c95c5ae7ab3af1e09a93d290222827c5dab', slot: "month-label" }, h("slot", { key: 'c0f55782eece8e74881124284504a2ac9489ed63', name: "month-label" }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7103,14 +7125,14 @@ const SmoothlyInputDemo = class {
         this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
     }
     render() {
-        return (h(Host, { key: '77487e04cd393519b5080f752b3cba328ae8bbd3' }, h("smoothly-input-demo-standard", { key: 'f9de577b637efcaffe3a92dc55bff25520e0384f' }), h("smoothly-input-date-demo", { key: 'cdb1c974c8cb5844cf800f8fc52c407479db307e' }), h("smoothly-input-demo-user-input", { key: '38bb2d03ef20e3e8e5737e423f4f54c9fad4f973' }), h("smoothly-input-demo-radio", { key: '999e3b97199fbcb547e83c589c1447e726f4754a' }), h("div", { key: 'ee8094197dd274791200a010baedd05db71b888a', class: "inputs" }, h("h2", { key: '5b65b420015ad7bb32ef059f6aee019400cdc6b3' }, "Calendar"), h("smoothly-input-date", { key: '375cad6d89a6f80cbe8e67cbeb1759e0cb28ab11', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '797e6d6ccbbba14258926f21f202eacad2b85d76', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: 'a49689e5821a93c721be25c6faa570f05402582b' }, "Date Range"), h("smoothly-input-date-range", { key: 'ab71a879e70b97431da2f0beacf54dc093ca0a7a', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '703952d0ba703d6a8cc26b4bef028d7a48c8c4f6', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: '5bd07b3504d054442cefb2ba9db61c4d83ed39c9', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '39c7ae936d2a952626f20dcc19ae0a52885db2f5', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (h(Host, { key: '0610dea0130909d255f6dcbf7f798521cb18fc4e' }, h("smoothly-input-demo-standard", { key: 'e74b371f701b9371972b5428efb0ea4edea9244c' }), h("smoothly-input-date-demo", { key: 'c989f6853579a9ba68c6f57e2e6381c121ff091c' }), h("smoothly-input-demo-user-input", { key: '67189969e7eeb85c53fa6485cc4bc1c6f8810d3c' }), h("smoothly-input-demo-radio", { key: 'd277353814df2808ab955df71df8dd79a14e3b09' }), h("div", { key: '69864f1761f23e2d9fe5003d1a28895195587f23', class: "inputs" }, h("h2", { key: '9e43ab4414d38f5e7d6ed559293a364700e4e3ff' }, "Calendar"), h("smoothly-input-date", { key: '3cc461eaf51348c11e76a541f4e89c7727d49006', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '331225ff58737c6cd60986d47935cf906f143d02', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: '7e7535017eb1d6a683df758a4d017dc7cb1fccc3' }, "Date Range"), h("smoothly-input-date-range", { key: 'fad6725321923c5821fe74add6cef73a560c2496', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '21d5f9edc259b904554d64c234e8268184db9c78', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'd08635584ffc2cf923f93304701d5ae0130dcd57', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '46c5c5ca642f983a7d4956c83385ab25046044e7', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, h("smoothly-input-clear", { key: 'ef4179eba332c4aefcccec094f4cd75e0a724b3d', slot: "end", size: "icon" })), h("h2", { key: '8b97455a27099963ab131055f4d43f0e050f4cc7' }, "Date"), h("smoothly-input-date", { key: 'c167353ed6a2b37488e709929e8dd7691ff3b0b7' }, "Date"), h("smoothly-input-date", { key: 'f0cfeb105e03c511c2b2c4daa5cd618fb1bcbfb4', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '771efe6acb85206eb87024409a78ed52d3907af0', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: '8e009b6d59da638ada992b07ddb2c2d1c071be55', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '936b5cdea71f19463922d25d2ed9468df89586ce', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'ad177348cf1f5353d3a2b7c7317fbd71c3614f61', slot: "end", size: "icon" })), h("h2", { key: '475ca58552f978b55eba5222267d18a0d78938c5' }, "Select"), h("div", { key: '7eae0b4cee9e74e38e9e726934101066f870aeec', class: "select-div" }, h("smoothly-input-select", { key: '16d9addd365f75e1ff255d9cd94bb90b20901fd3', name: "select-dessert", looks: "border" }, h("label", { key: '7e7550a94183d31ae99bc7dd85eda059c755e3d0', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '62b741c6154152014d1206fd2481984aa3097d8f', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'b45f30884b44e05528555295bd11b4e01fc5d3a4', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '7b2c3712a21be6943acf8eb1557ddd9fa101320c', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '47bbd5ccbaaa9977688f2db60e3b01ee44c37806', value: "4" }, "Cookie"), h("smoothly-item", { key: '0965a9480aa7dfad59a07bc19d49ccf6a5a7d52d', value: "5" }, "Croissant"), h("smoothly-item", { key: '8298f1a72b728eeb490ba52d31f34e4a5d667da5', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '6a5b85b80fd07f85f8d7ca7704e3a80174bd6e6e', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'e5bc84b980a2bd6cca07a580f15817c3b7dc988b', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'f73a74a039e1b892a444591ba6c86ab184dbcbbb', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: 'a863ec926936998f9bbf571b0250ed0f6d0d0a9c', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '7dc67e9285547dda4daad5136837e80450ac13ea', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '55dd30ea0dabd3481795c13c350ee7052207aad6', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '213ff1fbc6a5c445bbbce07140dbd18ee162cb89', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'abc065dab103fdaeb511f56c8db239b82cc48577', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '48922c5a07288a94407c4dc1f55305f567d45893', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '3ebed3f650a369cfbd7850584efd9bcf79c6f846', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '73f73f2bce086f81b7fcb46f4808bd5732783aef', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'beb4a3b4c715c8b1f2bb5b765fb742da64363cb7', value: "manatee" }, "Manatee"), h("smoothly-item", { key: 'f5c8c7fccb97ac840b42220f8380035a7ac7088f', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '5163d4d246184319955f0c1cc756f9cee765847b', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '2c7ab7ef09f08930f072f5e2e51677951c84ea50', value: "folder", selected: true }, h("smoothly-icon", { key: '86f4ed31d2e4ff382aece3cedf8f0d0265454b8a', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'afc8fbf7dba66206051d2ae4d7df8b16a0c3b2cf', value: "camera" }, h("smoothly-icon", { key: 'a9a115b3a8038393e75e72ef38742f3bb1b60339', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'd7aac15a3ff5c7271fd22cab0621aa6d4f69cb99', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'db0eba7390d2b64d810f07898b7b646f0d6a360d', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: '3465328594f446fbbe97cdb87adb806f057a4041', slot: "end", size: "icon" })), h("h2", { key: 'e2a08b76ba392d10beb4eb95d8363620f07b53e4' }, "Date"), h("smoothly-input-date", { key: 'fbc0b53f5e576341027a9d0199e0a369cab1ed15' }, "Date"), h("smoothly-input-date", { key: 'b5ead1c49120a42e63e310361c29d31eabbcff60', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '18fab78a08e80b35d930d40be27c5f2863beaba1', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'ab9470f9a44be6a115ff89db7c50f631362cecae', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '61aa9be4f7193617ecc89d5250f9c97f30742c35', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '9ab5d2a554d2123360afdac3c266ac79c6035d36', slot: "end", size: "icon" })), h("h2", { key: 'ed8c37111142696858c0eac29661406ae2cd9f55' }, "Select"), h("div", { key: '9ae174d2d4a332de3ad770450464569378f05bdb', class: "select-div" }, h("smoothly-input-select", { key: '34f6a893981c3c8dc6703256a9f2c3089cf4ff25', name: "select-dessert", looks: "border" }, h("label", { key: '7198f30b4aa7cb91377cb72ef16cb7dca79d00ff', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'b85cb7fb77fe50cd6a42d0a6c38020dcfb2166ed', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'de464d05e6cdffe4b578e5708d1e9e33376a0521', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '553b7ecd797f0e55def5b6c460440d8286755f4c', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '3b4349b0785cd4440611499c23f082961541a91a', value: "4" }, "Cookie"), h("smoothly-item", { key: 'a5638b6d6424c31cb1d26cecb42cfeb1004e7674', value: "5" }, "Croissant"), h("smoothly-item", { key: '015c157d486120f18de97fae45e36b9e0b0ef863', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'b16c9fd651670b3808643e57043198550e3a1103', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '277ad384d61f6a4ce7fb849d90a7e2437f105841', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'bcd5acb1903599e959821fc91f6aaf60ad0bb5b9', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '3e5c1545a14684d153a252fba8060965f63b6c46', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '155d20eda1c0ed2816a7bac67d54b2e55a7a101a', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'cdf81df5d54168f33c679918e7f3440f0f8d5da3', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'ee8b1f2e292c76d0b5f1ea73501d56ed7c5c748c', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'ea635dbcfc236dec09da467db23e37b18fc8953a', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'de1bad5de86767304a5244812506166ac09ef395', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'a606780ffc3288ff2c3963c63d1e67922e27eb03', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '12d7b79350e82d58eab979ae139ba1895e6d60e8', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'b9c3dfe20a6df2409ef1e350bf6491284a583d5b', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '609d4f74ac6f9b7b3de0d6cf8239e357e273be3f', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '02c55364f84130fbe531450518a9f14c01d093eb', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '838cb077ef888a9474f387f3e103d1fe5a7446bf', value: "folder", selected: true }, h("smoothly-icon", { key: 'b25142bf3ef747ac3b0efce4e5b0570da8fe3fdf', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '230ece62e3958643281636ba4185118102394ce8', value: "camera" }, h("smoothly-icon", { key: '2388323ed7eb30ca002c1fdb0a5b3c39e11b5da2', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '39a9cf873e9f7d93b05de669efa66d38f2f23ab6', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '9789169a41dfb9e3162112e23caffbfe5b6daeea', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'c61728d55e5e96dc81d5df36c4fa38ed802f8b00', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '5768a186da1bf2fa4fbc80fb91478af031981694', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '950676b7ffb90bc765f2a0c24cb40c631f64add8', value: "1" }, "January"), h("smoothly-item", { key: '57e77e1ca64869441e44e0c753a0c132e6c8a152', value: "2" }, "February"), h("smoothly-item", { key: '2ee03ce05d5dfa6ec01fc3cde97051a10d2215d9', value: "3" }, "March"), h("smoothly-item", { key: '9c9dfdf2dd5ebdfffdc92732b7dff4b770632775', value: "4" }, "April"), h("smoothly-item", { key: '35a1ce3376a84c830c00fba8080c093ef6f4830a', value: "5" }, "May"), h("smoothly-item", { key: 'cbf4b76e9f8324b29626555ec612f5ee5da8d47b', value: "6" }, "June"), h("smoothly-item", { key: '6f7bc0aaeb4ff6e5d0427ab5226924b625086419', value: "7" }, "July"), h("smoothly-item", { key: '72d72d65b42e1250b527023364c2bb0c79178a37', value: "8" }, "August"), h("smoothly-item", { key: '5d6f57f7ca75f90c30aef101bbbdbb9a26aafb69', value: "9" }, "September"), h("smoothly-item", { key: '08d57569eab4d0948f87eaeb8d5e1b936ee17839', value: "10" }, "October"), h("smoothly-item", { key: '99e91533b340a40db158f87ed28fb371ebd8eb08', value: "11" }, "November"), h("smoothly-item", { key: '4fd40ffef20baed8a6f5ca58768c78693b3a45a4', value: "12" }, "December")), h("div", { key: 'e1c03afba7cd1421976e4a4c59beac860dedf723', class: "select-div-row" }, h("smoothly-input-select", { key: '4067c5e666655fe1b474a73a58241373c826ab03', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '0589c79c7fa7cf31dbad4ab0e8be68523e684299', value: "folder", selected: true }, h("smoothly-icon", { key: '56813db2ee593db9227920662d646f7493e0515a', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '3937b7ebb395698a854b2eeb9aeed188fe8fd78d', value: "camera" }, h("smoothly-icon", { key: 'ce39494e071c12c23a475c31eb448512d2fa0f25', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '9a65176e01981ccfd312fd4d3d4b255760891699', value: "boat" }, h("smoothly-icon", { key: 'e9e97ae824d225a6dc33fa997b5e46a8bc3c2812', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: '1f21eb6eded9dffd449157755bad1b84f7a52981', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'f4afcff411357a29b89fe0a52239ba7c677cb490', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '9883744d26d1eec36ed1082407e3656d4ea0d1f7' }, "Duration"), h("smoothly-input", { key: 'fa507aaa61557ca41837cf906a78fef5d16affc0', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: 'f5c027a3ed22026819a2e88ddc5300afe7b8c900', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'f387c1c723590cc0af87d9a1fd57d459c1cc73f6', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'a5db731994586ad163c1077afe56a23f8645654a', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'f1f9ee3d60d71883b4dd1b4aea488f2c22cde1d5', value: "1" }, "January"), h("smoothly-item", { key: 'a4432cbbf045646fdb7c5481edd5a4dc647e714e', value: "2" }, "February"), h("smoothly-item", { key: '5004b0e7acb2fca29c26f563933f66a141a87a21', value: "3" }, "March"), h("smoothly-item", { key: 'f9085fa0f5ac2bdc308a6e6eb5f76d060179adac', value: "4" }, "April"), h("smoothly-item", { key: '45c828dcd5f36bcb4624860f11ffe970ecfe3021', value: "5" }, "May"), h("smoothly-item", { key: '6dcc18a959124619842d5a7bd68b38b507ecbb80', value: "6" }, "June"), h("smoothly-item", { key: 'cd1b161f2f13dfe661b2d3363e3b20647c4ec3ca', value: "7" }, "July"), h("smoothly-item", { key: 'a5ae41fa7eed339f47f69aad3681eae4579e0efe', value: "8" }, "August"), h("smoothly-item", { key: '0016e486b487603da72487e53031739b85dc5318', value: "9" }, "September"), h("smoothly-item", { key: 'f1c6ed5593caa14259f74be4c8b3be20386e54cf', value: "10" }, "October"), h("smoothly-item", { key: 'f636538a7669567ff285e74a4c2de398546108ec', value: "11" }, "November"), h("smoothly-item", { key: '0a83028ce8f962d1b8d501041aad0a288a5829c5', value: "12" }, "December")), h("div", { key: 'e16c4ae44a81885c288ca235fc56e53d08b3253f', class: "select-div-row" }, h("smoothly-input-select", { key: 'a399d1152444fff42ea7b37ca41824a6ecf63d81', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'af648a4bb5f15488197c34a752e282bd60cf79a3', value: "folder", selected: true }, h("smoothly-icon", { key: '16d8cdf17dbf67544d10c06d8f599dd30b87cb61', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '39012cd32fa3bcecb1cc012160048d6817a94c5c', value: "camera" }, h("smoothly-icon", { key: 'a51166743064c08c1e9509fea17b60fde3f39556', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '5b13f14afbbf764ad387c34db65f48335c8e5ff8', value: "boat" }, h("smoothly-icon", { key: '855facc3a62046b5b3b4ff29f0d5226d2aff1c55', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: 'cc1e08d1120f45c8143ae6f28cbdbad769785e58', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'f12155b6e15ef36745915628c1ffc34a2c277bcd', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '32733265cff202c69112ac37afbbe51e9ee16b13' }, "Duration"), h("smoothly-input", { key: '1c359b65c54c00a291d4ab2fca662ae0823545be', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: 'b50a7ea8c22c140a5d1b81eb197caa88d79ff4cc', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: 'f178f51facdeb434a16ecc35c0820ee5035f7d6c' }, "Integer with Min/Max"), h("smoothly-input", { key: 'acc0577e2f0679be92ef3ba362210cd1953a73ff', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '9a24258cbec32021cf1ec3506f7b4cadf2f459e5', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '95a122168d96126ef14f48810daf29867fba07b4', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: '9631a9f894bbefd71bb298683f3333c4357db73b', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: 'c6f4545ede80c54a354bc0f01be6072b19ea2bb1' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: 'ae5cf8e08b0887db2752d0bf39a4c5a14cb1027c', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '22724babf43bccb1d64e21646130dd8f58c9505c' }, "Identifiers"), h("smoothly-input", { key: 'c5a7f350b414fd154ab54c889aeab223cbe23d16', type: "identifier-code" }, "Code"), h("smoothly-input", { key: 'de0f4aaf40eca11ccb24293c3976ade34f91aaa5', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'fda65727abf9aa451b8b7f755f7bb92fa43afb93', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '11de906823b2e325f3f9548b019aa8234722656a', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'ba3477e4964b1336e6198db348640d7144fbd06c', type: "identifier-camel" }, "Camel"), h("h2", { key: '059c263a0ec79a3986d4e57337a2949c755feb70' }, "Input Alternatives"), h("smoothly-input", { key: '8fbe4f80ac2d1d4bd1093a2b60103e248e4169f8', type: "text", name: "name.last" }, h("smoothly-icon", { key: 'cd0f121fd2ff7bbc8cdc9cfa9cf730cef08e8f11', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: 'adf350f5ec052599e95fbf6dcc7c16fa64bcc277', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '4d0ca4a746cce893302008a8b66f07df9a96604c', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'cfb36cd378ca610efbb3d6252e70391985f9b00f', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '9fbb53db768468228c7716881cc996d20b77fba3', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '1383590d66cba4e38a1beb82cfafb551ea1661fd', placeholder: "test" }), h("smoothly-input-submit", { key: '13cc6546a1eb274496d10c27c3c80a2bca7dca66', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '53f6a46a5524668011994c2be07b47ab4d2fb1d0' }, "Smoothly checkboxes"), h("div", { key: 'cc5f357f8e9b673c95de607251ef97437f0f2afc', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: 'b12ff9cf6d4c042dfc079dea8ed8f92d95a70c68', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '7daedabd25cb229c4512c017efb990cca3a08cc8', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '0836da075b7030bee160bb8931c54092a5b93ef8', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '4d94e2fe73e6580791da9d9a872cd8d4649df36f', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '117ca8ae52817149a678b4a100a24c3a4829a9b3', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '6e99923c8c082c4727eea3c75b77b23d86eed801', name: "third-checkbox" }, "3rd")), h("h4", { key: '3a807db156e197c5192388886889988b874018d8' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '85e1ce54231e39c9f248fe1c7829a2b9cc7775e3', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '72e48b10d12022b72d30591bc74af1c4cb516bf7', name: "checkmark-circle", slot: "start" }), h("label", { key: '5b67d1eaaf73b84abb3a3e26ddd3fe27c9993e23', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '06f796bdde5479565e1ee6258ad73f0b7c4327f5', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '14ab365a1da0fe3b94f1454549e3040df215d9c8', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'ccaf48dc6917aeb500653f637c4b30883814e61a', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '3cc0373ca5e87e2bb0916b2afed9e4cd70515866', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'cdd729d929f57261d1422a45d83f6332912ae399', name: "radioSecondInput" }, h("label", { key: '95d8374b3914b2f88605e2e90cb607bb423fed2b', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'b1cd33f88df8c1161b203675a4e02c8815954f96', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'b797b785615fbfd4b881db249c99c39bf0fa6504', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '8557067758ca9f7acc6b35db56e9c6aee2c49f43', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'bdbbcf1228089b03cae001cdb573b8c7f37f08df', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '414016c094bc15ceb37955e3adf1dc18db87e45c', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'ba3a6a393f5f3af34eb12ec5391d0a6a1eb03e04', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '97406c6ddb794364f4a1b53c5e1ed551ed8a1ad6' }), h("smoothly-input-color-demo", { key: '0676c5e29637f2097dd0fb084d6507ec9c5c218c' }), h("smoothly-input-price-demo", { key: '80c25cdc1a8d1c2d88df5c680527d5638da91d65' }), h("smoothly-back-to-top", { key: '6aad374c875c762e4e4aff5567aae10300fbd7be' }))));
+            } }, "Duration"), h("h2", { key: '9bf848b3aeb2d99264b20270c030daf0a2e4538c' }, "Integer with Min/Max"), h("smoothly-input", { key: 'ef9a50d998c97e0ee62ce7521a47d9116596f594', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '3fc4295acaaabe23a12e6e9fd192371d137e2ebd', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: 'e3e23c2ff05c311d1d62b86d9de0e333aaf38d16', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: 'a92c74f2b45cc1df86589e62e97b87c8a7060351', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '05151b343a921085863acb3cc263fb4775fc1326' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '433ed8e5372266ef59393311c0dde265b79efb36', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: 'b5e460972d07d70a04099e129f4b11706ee6ea58' }, "Identifiers"), h("smoothly-input", { key: 'd059d3ecee65ec385e40d11bad328bde8be89246', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '669bda44ce4115dc276335a9566cd433ccc992c4', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'a775035df9b192896c2ce7f1beebe6e904c1d42d', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '359285e474ea704c36e73984c35e4ae245c47a00', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'f1a36423248b413cd20749f738fe12a8eeacae15', type: "identifier-camel" }, "Camel"), h("h2", { key: '2f6beac2f107dd3dc34a537e5b47f13d76206a07' }, "Input Alternatives"), h("smoothly-input", { key: '74cfbe969295b7cb9e02af90b126d9bdb60168cc', type: "text", name: "name.last" }, h("smoothly-icon", { key: '34e749e71f3d9976f2b71e57dd8644d53872aa35', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '61f44e09ab53cf0cf061007d3cf8426722e53312', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '55adb72f7485eb5f2235516c9d2839feae927ad7', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '642a573bebe0e805fd7d178dfc8befe7e77bba15', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '5bcfe9a74e7ec780fee1764933bd37f82b36495d', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'cd5b1bbd73247cfb21b6ff99a56c0989ec7f3239', placeholder: "test" }), h("smoothly-input-submit", { key: '02c46969366444af0882851f2f3a0cd80f1b61c3', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '3bc94eda5050b71ec193fda5600d76b5341b71d5' }, "Smoothly checkboxes"), h("div", { key: '165dd5a0d8e539c3d9fdbebf49ded093589acea7', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '17c781cdca9adf265d7418ca27ace984f0b70499', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '413a357d61374d72ae7be41bca5a7360b105e9e0', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '81ad9a572cb4e01b86ca1a189d4ce027c81d588b', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: 'a34d9d7860461de0a508e8f36ab3e89627475777', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'fc64656864d9c68ef8f8ee42868af8f6d27ff217', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '8d1461bc9cc61eb79488162501232355e27bb992', name: "third-checkbox" }, "3rd")), h("h4", { key: '0eca64c7ae21e4f915e7f146d36662983f5c3759' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '7677ce8ca260453a84a650fcced18a6592acc6a7', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'fd28ffad9dc1a32efb02131873f238c54fcb63e2', name: "checkmark-circle", slot: "start" }), h("label", { key: '63d92632a2ef4832fd863f55991480e1ec58fbae', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'a3e81d19c74fc5de2d25e44afb686793807025d5', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '5a4118fd0fb1b24e7a3e957c6186a94caf6c3160', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'beb9d9bfec1ebd2bd268b3c94fde2f23ee77b31b', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '91ff12f5c8d3911b662a4774e3d8887742de6b42', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '5e708295015296538d73936026d36e5badc6f805', name: "radioSecondInput" }, h("label", { key: '8ffb6b2f623f8e16a19d6b9d83b93b28d9fe2637', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'a5cf624fceafa16030eab1e9050cd3cac2c985f1', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '66ab2a39eb130a221dea6cc77beecb0c221cecf5', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '44792e09a3cfff26ec11c364e842db24f1eb10f2', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '78b2689f9c52960b2901431b22c7f7faec8605ae', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'fb6757b00011d410ffcf1cad4dcdfe1c586ca24a', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'dcd365bfd3792cab31ede99aa43edf5d41d8af9e', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: 'c231fb7b9c6d28546b4d13c87ef3a900b33191ca' }), h("smoothly-input-color-demo", { key: '540d7e3d4ec89f99ec6c67d725468e050ec0a183' }), h("smoothly-input-price-demo", { key: 'eb8164f02728a0ee68e10ecb949c6b7f45d2fff2' }), h("smoothly-back-to-top", { key: '98cd43c5de35cfeea70b77434dac7907648c1b6e' }))));
     }
 };
 SmoothlyInputDemo.style = styleCss$O();
@@ -7125,7 +7147,7 @@ const SmoothlyInputDemoRadio = class {
         console.log("selected", this.selected);
     }
     render() {
-        return (h(Host, { key: '52b576841887c998b76f78e137692aacbac7a2b6' }, h("h2", { key: '0c8d936766c24b6948c809e2f6e6468d2aa4420c' }, "radio input - column direction"), h("smoothly-input-radio", { key: '3f2d62940acfdf116a84afcdcab390d6cd2dd4b5', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: '1bf763d55cb64ef808e4a756c42691b6fe17f5c0', value: "1" }, h("span", { key: '885acf73103c0329fdcf008205eb6af697ad3f7d' }, "Option 1"), h("span", { key: '8ffd5831c8ad3fd4ecf98c1947a9716eac3f68bd', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '1d1c4c16d909d34a46c710342c61e47c87a95f70', value: "2", selected: true }, h("span", { key: 'e82706946e78a02f91075a23546ca74a4a6efcba' }, "Option 2"), h("div", { key: '50bf73dc371ba8fa7b6f61dc4647614bc3de92c1', slot: "detail" }, h("smoothly-tabs", { key: 'af9ceaab9bd3a4beea42abc0d645fb55c8394d06' }, h("smoothly-tab", { key: 'db10107a17b64bc198da2aeb103baf88b1f52f28', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '53da582a28e65a22c419c54203d2362f13d54076', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: 'd142440607e5315288e1600a6538f835ed35837e', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
+        return (h(Host, { key: '040a57805b385a247d202b5e955a7f8eba616010' }, h("h2", { key: 'f09dbab032e5a1236b6917adf732333decd4f304' }, "radio input - column direction"), h("smoothly-input-radio", { key: 'b433eda6893f6ace20301795321958f684f47d57', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: '2d9b7a2edea9639f1edebc73c8caca090765ce61', value: "1" }, h("span", { key: 'e42fdc99169da6f957f0f7d701f07e28ec3b6f75' }, "Option 1"), h("span", { key: 'ffdf79cbc7f98435a01a3a1a6c30c307741a566c', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '0d9d95f1375bca503b1aade350a87119bb329c09', value: "2", selected: true }, h("span", { key: 'dc6d2e6888deb8bf32a626badc8a01d1daeb960d' }, "Option 2"), h("div", { key: '5ab436788acba5bcf290faf1551513a1f1b493b6', slot: "detail" }, h("smoothly-tabs", { key: '097716e9e682a11b5eff9880e94c036a01344de4' }, h("smoothly-tab", { key: '4b4117fbeb2aec641c279690438452f1e0ff15d6', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '4cb637cfdb67a7721dc13348cfe830595d47027b', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: '1c4873e9b744831a602192bb520236b440d8b547', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
     }
     static get watchers() { return {
         "selected": [{
@@ -7157,7 +7179,7 @@ const SmoothlyInputDemoStandard = class {
         });
     }
     render() {
-        return (h(Host, { key: '0d47a2dd423a8bcdd889139f74ef2ec375d0ea97' }, h("div", { key: 'a884b4c59f663f8c47aa9e3736e6a82235e9d276', class: "description" }, h("h2", { key: '7c0b8da3728fd79d203de1895c6ae146e1eb8aef' }, "Input Standard"), h("p", { key: '10fe94edd162dd158388508c2470359447e6da57' }, "Height of input should be ", h("code", { key: 'dffd62a251af68595f7c5659a2251ada08999b63' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '3f8c09fbdce4b808a430cf7266d40d25a596803d', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '563356600a698bf3c974a61b79520aa8f77c249f', name: "color" }, h("span", { key: 'e12af511b6921b2d9f7d50b45fdbe3d5b34f6817', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '23c642ae01bb6d0f7aaf653c027eb255ee38d90a', slot: "end" })), h("smoothly-input-select", { key: 'fa106dd22e247954860c217692ca37a24fe4f772', name: "looks" }, h("span", { key: 'c42065aac1f357b670cf2a99bb8be554fb314cd9', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: 'c3b585f898718c9f81ef15c1469eccf08988c00e', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: '8fab112575cb1c02c2019022cee83e5e5e65a9c6', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'c34401c8b28faa79a139869c0766e8f8af357ca8', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '672b5bc96fa9e6886c90b5e8354d7dea8c916270', name: "invalid" }, "Invalid"), h("smoothly-input", { key: 'c395fd3b7ca8d1243cd9e9ea4e006f1fd7ef1a27', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '121d1a50813987b2aeac50afe73e40c6a7c4fb8b', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '265ce4b0e44c8fda1b3188929eb5901e1658bfd5', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '1eafaaaa6696f9f1d696742869d10aba19c2f0c9', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'f6a5d34435c177c5dc64c31632dc7a1e65f3e270', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'c4d82ee52f0d44015df7eb734c98aa41f7c92827', class: "width" }, "width: 100%"), h("div", { key: '2ae68895caf503ba92049a32d0054439f069123b', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: 'f5f4ee65ccf3180d2f9181fbc258c79e916e14ee', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: 'bf32f13cfbfa88add92692bf9ee02b836eeea2be' }, "Text"), h("smoothly-input-clear", { key: '26639066ab906f755f7a42e154b1954f1f34f19d', slot: "end" })), h("div", { key: 'de01a46f39aa6f331c5edf54208a6f9f726337e3', class: "height" }), h("smoothly-input-select", { key: 'abb4be407f4b7ed51d5f796bdfce3b2b56c468a4', name: "month", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '49f71dbb091094f79927778d18a0a58e70689f42', slot: "label" }, "Select"), h("smoothly-item", { key: '4b0e9cb4ce233c50a42fe249a3aef5648dc62558', value: "1" }, "January"), h("smoothly-item", { key: '38380b0f13ddeb83e2e19e0ac645dcdbacf6c4df', value: "2" }, "February"), h("smoothly-item", { key: '4f65be9a949261542191e3b484ad646e17f04987', value: "3" }, "March"), h("smoothly-item", { key: 'b6e9be5fbe31a12865717daddcd1a4039c942205', value: "4" }, "April"), h("smoothly-item", { key: '6c867101a115315e30bcf525d3fde4a8e49a5719', value: "5" }, "May"), h("smoothly-item", { key: 'ba4792a24e862aed054b356a444f9b791add16b1', value: "6" }, "June"), h("smoothly-item", { key: '9cc3a21ed384c2e2415311770925458dc13ac8d1', value: "7" }, "July"), h("smoothly-item", { key: '53cf8809b4dbc8256448b5c08a9d07f274e365a3', value: "8" }, "August"), h("smoothly-item", { key: '47a43966214064dab4d321cf9116b5cd87409dd3', value: "9" }, "September"), h("smoothly-item", { key: 'c71ceab27a3f86a5c2a27dc251b18f119f5ac623', value: "10" }, "October"), h("smoothly-item", { key: '7e824138f3b0b28a414465d69bb71c4d6786c3b5', value: "11" }, "November"), h("smoothly-item", { key: 'e7813efea82efe4cd4a8bfa54a7a55b21f53fa48', value: "12" }, "December"), h("smoothly-input-clear", { key: '7072ef8f9ac5b9a3028cbd2962560fc315f3d58b', slot: "end" })), h("div", { key: '3a1c4b4c2834bbb4921e330a77fe477c4741f181', class: "height" }), h("smoothly-input-checkbox", { key: '50499f2f1a4258a56caeb2266da17a9e881c7993', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: '550d44f73f1ae07461d73f66febd5138867e8247', slot: "end" })), h("div", { key: 'acb1b0eaab732df76e2c586e8f56ee6c81fbdd87', class: "height" }), h("smoothly-input-radio", { key: 'ec7f8b66f806e63a09320e2ebfcda71be001cd3b', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '00de1fcac1f811970b3f1154d6286dc7bd6036d8', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '35ea9212aa0f8eec4a96dedc406b428f58b848e6', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'db11c348c12a468a854c53c5f5f692ae7dcbaeb1', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '65707145740b173f4379c6bf5706a962a91bb021', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '883be5fef36a7e6fb16c57b30fcad312f1f25a6b', slot: "end" })), h("div", { key: '2cd8b1bb4ac90fd34732d2bfc34116bcc8429045', class: "height" }), h("smoothly-input-file", { key: '87739b41a33b7be135c5b3ed02648e702ac386ca', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '0d10524c66e0625ec86431a8c19dcedf83f47eac', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'a95f256a28cf294430040b6c6028921f0c620c8d', slot: "end" })), h("div", { key: '48650848e22a86ca8aa7501e09fbd8c5f0ce83ea', class: "height" }), h("smoothly-input-range", { key: 'b1e96735886d8e3e4b451ed17fa11ecada3e2302', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: 'ab7f71a498ce9404aacc63f0273bd3b715ddf12c', slot: "end" })), h("div", { key: '0ff2870912f9ae2e2b41ba9d982c906124ef2641', class: "height" }), h("smoothly-input-color", { key: 'fa4d779da5bfaea1e9644e721d9f6c4249949407', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '63674017888873443dc7b744114dae7996e79c52' }, "Color"), h("smoothly-input-clear", { key: '6344ad242592e19365961e80cc0814023eaa7dc2', slot: "end" })), h("div", { key: '16e0b71b1b6b1ee68813e3827b96bffe5ec63ef7', class: "height" }), h("smoothly-input-date", { key: '85e2fc24713c7543766e5c88341de28bb235eec9', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: '106776717336dc925ceef2fc726c2acbff48a060' }, "Date"), h("smoothly-input-clear", { key: 'dd31d582a9da8729177e44f0709e20dd22ad1ceb', slot: "end" })), h("div", { key: '7a3b4c683d4d6ba46a09890c3112126911376100', class: "height" }), h("smoothly-input-date-time", { key: '6826e6fad4f1bcb21a30188e489215a785bf9d92', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: 'bfa1fd01c821d467bb322310b56353e8a21b37ed', slot: "end" })), h("div", { key: 'a9b5fac536b744270db8ee2c2e29c05f011a522a', class: "height" }), h("smoothly-input-date-range", { key: '437b2e44f71354330bded70e2ee61a1180b42215', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'ce778323ca7e585f98cb5c6d029593e329eaa3f0' }, "Date Range"), h("smoothly-input-clear", { key: '96a689e9facde44dc827d19c9476fd7191a753ce', slot: "end" })), h("div", { key: '99a70bddd4168419ce44d234a84d5b234de4abcf', class: "height" }))));
+        return (h(Host, { key: 'd2a4b3a8e5675b4fe394f551166318902c09ea84' }, h("div", { key: '67b40a89a1cbf17d511c56d966a9173e02a9c92e', class: "description" }, h("h2", { key: 'fdd28a17423a0da06745fc2aad06e1acbde54be4' }, "Input Standard"), h("p", { key: 'e9e84428aa2ebe4ea0b1d04410629ed85de1d329' }, "Height of input should be ", h("code", { key: 'faccb606910cbe8418c176efd45ff05eafd0ffc8' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: 'f8770ba1128622c8b40be48cd26214ed162035e3', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '82ce7ab02f341b560e6347164a19c9273580ed18', name: "color" }, h("span", { key: '4062538c8b4b25d9a1cc1f625df0313383990193', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '659e785d9f5e4043fcf15dc457dde4dc48676215', slot: "end" })), h("smoothly-input-select", { key: '656b68d41b449cde70e4d86b252dc70d994f63ce', name: "looks" }, h("span", { key: '39ef79d28d1dbec7a678b93fa031615457560351', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: '3ae946ee3c4cdcf5b698b0456499c4807e53b257', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: 'f73361b452096abbda4ebc6908371c397c0a9fd4', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: '7a4762f9122be37ce57099515e0d9fac7c18df94', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '0ac401e2b9e2525dfc899eda4957a61b99947758', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '2ba7f175d8aeef4301598f3c3da5d436a17c45c7', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '5844e0ab1cc53ecd0691d585fa4461f89c9994bc', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '6d46add6231e87d95dd8aea7bd91181c47a56490', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '43af9a815da45bc2ce0e54e8442e3a8ab1bc534c', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'cf6750528c66ee0c0b9e97478de77514cbd39045', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '4fbc0ba2b6b142f6c4ac8379157b2953d88cb062', class: "width" }, "width: 100%"), h("div", { key: '7fb5a3a68f6ed4d14bcab9758a8de0a95de7e80c', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: '3d379565ac3335e2ef39e7d616b082fd5247619e', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '7d37fa391bb86cf43fe84db4826d8394c04d8af9' }, "Text"), h("smoothly-input-clear", { key: '5c5b48cd36f13a3b50fc49809edb17148993a004', slot: "end" })), h("div", { key: 'c666bcf200205fbe3d4e045ee69530b217d4845d', class: "height" }), h("smoothly-input-select", { key: '9a2bb30a995830fecbc0dc7f9df2895470ac8e3b', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: 'd91f28c2c80c6b95703b9476c8d07b64387f989a', slot: "label" }, "Select"), h("smoothly-item", { key: '61aeaf05ac730b30d7fb29b749dcf6ba59932c9c', value: "1" }, "January"), h("smoothly-item", { key: '131052c2a6ad24d5c93cda5352dd16873e81fc81', value: "2" }, "February"), h("smoothly-item", { key: '599a8b88c0abd24346856c8c653c1adc69d432e0', value: "3" }, "March"), h("smoothly-item", { key: 'e8933cb5d5af0fbb4d898a919a1d0ccc26584c11', value: "4" }, "April"), h("smoothly-item", { key: 'eb7b7c07dd9fcb31eba2b5a8da79da32e14f2c67', value: "5" }, "May"), h("smoothly-item", { key: '48e70f3d930689aed016ac28241e6f8d253f61db', value: "6" }, "June"), h("smoothly-item", { key: '738b7ad9d5286f6afc8ad033d9cbb9e066c4c861', value: "7" }, "July"), h("smoothly-item", { key: 'aad0e64de6bf35b315fb3472c8cad86e3fb195d9', value: "8" }, "August"), h("smoothly-item", { key: '81c533fd3eeaa48ae7917f6064a17724b101b650', value: "9" }, "September"), h("smoothly-item", { key: '69f567c427f80cee633f72ac4dd06a4d4b4a27c7', value: "10" }, "October"), h("smoothly-item", { key: '0d87e5fa94a04a60b527d7a5f1670b1788bd4339', value: "11" }, "November"), h("smoothly-item", { key: '34b1425da536971ffde20fbab5b96c9d23f71fe3', value: "12" }, "December"), h("smoothly-input-clear", { key: 'd16aad09e1f53274a0c6d23c071f2abe1157ce4f', slot: "end" })), h("div", { key: '51931a5ed8ec83b8937cd7899a303569cf8bf7cd', class: "height" }), h("smoothly-input-checkbox", { key: '20d5a02ab8d8f1f709b030a0258598de61250555', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'd36312b0bb0393568cf05e51eea4cfa057dce607', slot: "end" })), h("div", { key: 'c1353494563098fc08fe2c93cceeb80d56a1aa51', class: "height" }), h("smoothly-input-radio", { key: '84976dd68dfe5534f28c02395d2476593bcb3bcd', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'fd87d0cfc047bcaf959908191d798ea774daca25', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '4029068fb2fea98f2b5c19ec87e8dea13cf22365', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '1ab27866d3db524f52da4f76a3abb5eff1deeed3', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '9415dd464250d9af68a54de51a9e6b15234f8faf', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '8ea8291c65ca421b0044fe3e0da4127f9fac0c40', slot: "end" })), h("div", { key: 'fa351e941ec780e05a037c2c1948dabd8ef371e8', class: "height" }), h("smoothly-input-file", { key: 'b45c3bf3c7b5e9e8408a6cecacdda30c7ce392df', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '7e81668b6bf2a3f72238d18d02c21f19bf6c2756', slot: "label" }, "File"), h("smoothly-input-clear", { key: '4ead6310cb554351b45699cbbc6d84804d26611b', slot: "end" })), h("div", { key: '73cd3845233377057ff16a18b9ad85eb4e4be30f', class: "height" }), h("smoothly-input-range", { key: 'ec0f42a5ee5fddd52fb5c0d283f9add183e429fd', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '49536b00574ad5e0cba72b9a8fdeee599435a886', slot: "end" })), h("div", { key: 'cc112e755aeb5724b6e4bc511ed1b4e32b394d08', class: "height" }), h("smoothly-input-color", { key: 'dbd6daa2196f6ba316721ed338c0638d6c713e00', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '04197c11337298f86531d7ba52d67df221619051' }, "Color"), h("smoothly-input-clear", { key: '6489a29a796e8e443efdf27574df27e4e24111ee', slot: "end" })), h("div", { key: 'e48defb9f45eaa2f935b0108cf3ec6e331d4ecb2', class: "height" }), h("smoothly-input-date", { key: '0a5c51ecc51013f9572ed8cd8ef38f6d92bd4f5b', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: '21f21c543ff1df34c50333fba2d1ca8377ea4e37' }, "Date"), h("smoothly-input-clear", { key: 'f8226e817b97c90070b649935ac70d6ba11f7b30', slot: "end" })), h("div", { key: '8920789228e2911822a6b822d1c8c37537a225e4', class: "height" }), h("smoothly-input-date-time", { key: '2e58e0e5f6370f7a4d0dd7f17c56718038167e6a', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '9ebc24b5b639628fd5f3d11a72500bcd6ae9ab0f', slot: "end" })), h("div", { key: 'dddb389df78c212ec451422436e3f0468f523065', class: "height" }), h("smoothly-input-date-range", { key: '76b7832bcf134165961c00e610180ee37b74968d', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '023a98551ba8d1b848665506fdad5282338a2d2e' }, "Date Range"), h("smoothly-input-clear", { key: '078a1ca386a3f814286b35fc0579573b8e4d64c3', slot: "end" })), h("div", { key: '32733c0b81a14c8a982c1607d5635d807894b2ae', class: "height" }))));
     }
     get element() { return getElement(this); }
 };
@@ -7176,11 +7198,11 @@ const SmoothlyInputDemoUserInput = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'e5373df530143e9be043fef3040f0c28e4e6befd' }, h("div", { key: 'e43682af956adff7d7717bc0460eed3b1bb95d84' }, h("h2", { key: '4332098a4a62650fee3ff36df29bbab86ece7e9d' }, "User Input Event"), h("p", { key: 'b20f95a50866658227c61b92cd110ec481da9aea' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: 'd7966a4bf162c151d82b4202e72cd090eaf54ea0' }, "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: 'c491689d80addd8399ee02ab7cfc6c14f599bb85' }), "Check the console to see the details of each ", h("code", { key: '919ebbf26937841a5396d0d8b1f7d56a268ac292' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '241df770721275520a479cac831b972062cf0fce', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '1c8afb64233081bd049d91a0dd0e8071aad85856', 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: '5fe334fb6629980fec2ee42d22df173f86b9bec2', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '0972c18426ec3adf17de6b187c582d875de17c75', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '0e6d5f9596b71bae1f548aaf3cc830e9327dda05', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '66f5d072734363f0457f38252105272c643354ce', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '37bb578799dfb2de20c6ed9c26214acc5a4b3c0b', 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: 'a70017b8ad95581ec4361d96350f809942b61d93', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: '07558d4cbc286b03af94f0cc93718f35a93a73f6', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '1e6fa16c98dbf64e75d4527a5619a37d30631801', 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: 'd3d7581a7c25ce7a7add6cc0f318bb738fbfcf56', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'cf1ad804353d6cecc2a92f1c919f0814ddc90293', 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: 'ac4215b8764d794d7b2b502e8978eeb066bb482b', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: 'b0f18cbf601c7a7e1b105b6ade6b7738e735c1af', 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: '353846f23973a62890ca228fce9434606c351eab', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: 'e4e466950e474177dfd57b95741256ece59aeba7', 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: 'e39a9742e3c896ed0b8083b0cb12694971c2f7b3', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (h(Host, { key: 'eab36e7674fb973f979c4aaed34abadae7576fe0' }, h("div", { key: '8225faa4114dc00127534d7a4400b1d9b23f4ae7' }, h("h2", { key: 'a6e84f195de0a08ef8ea173615663417db7cb4fb' }, "User Input Event"), h("p", { key: 'e6aad349cb3b67654e5eb4499aa0088367862ceb' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: 'ca92dbe2b5834d176ee33651b5d4287ece6d585c' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '96cfdda6ccf73450ce38e886fbb26681c17667ea' }), "Check the console to see the details of each ", h("code", { key: '13af94b46758e72141f7ba0da21f93f2ef70a052' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '5f3eadf13479a585b26f63bbd14d5a06d4efd82e', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '18606ed8401bc0a7a9146ab7b8da848b9f155971', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '89d848edf493f23af859f999c62788cd58f89b9e', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '223ebf76fcfd12bb61cf78cdafb7cc2a6f9ab95a', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '1bb540b065fdf0f3571482e0c8a3417a4d9be70a', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: 'c8759cf4029e8910db9eca83c856bbcd203721ae', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: 'a613696a09d76a9410d66e4fc51833db30a8acd6', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '552e86df8bca79435198c9d18258d89471c17f2f', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: '83d0d370cfb15750bfec897741493bf51352409e', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '205e6dc2498d0ae6b95a119aba4d19c75cefabea', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: '13bc5121320b0982bdcf65c0ea5454841783ef24', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'c6097f9351a54aefda3b9f51694c71d4faa803a5', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: '5356c9d3d1ebd1edc281d0802deee76cd098ed7d', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '18d6651482ef0254f9c1dd1cdefd2127c4d67dc1', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '3da5ff4f15a19d39a1537fc0f3f738bc840b17c4', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: 'c20a4edf0546a89bcbd55a1f67840ffb6ca6a98a', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '0ab185dd19fabc2ded8387b5d08b1580d47726c9', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? isoly.DateTime.nextDay(this.datetimeValue)
-                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: '91d54581db356cfcfc093286eb125502398315bd', 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: '1bfc78adefad21783c035335cf764bdb92c537e4', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: '402a80aa4b3b25a460d2acec85964446350501fa', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '89b12f184e5f3c2953b3882fca43dbea273f5178', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { 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: '78f36ca1d6a278db6d7bd4644689331be84c488a', 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: '7c2c3867bb8465daf5da9496c70e717bdfd2616c', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
 };
 SmoothlyInputDemoUserInput.style = styleCss$L();
@@ -7213,7 +7235,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9413c465eefd77797e42c791530e44dff3846f28', title: this.tooltip }, h("smoothly-button", { key: '6671fd2c91156be7d9a584e1a99f5b8b4f32eb1e', 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: 'acaa5562e2b97fb0bf0f774fda77efdb33ba66cc' }), h("smoothly-icon", { key: '8defa183091cea2766970860a93f9005085e7325', class: "default", name: "create-outline", size: "tiny" }))));
+        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" }))));
     }
 };
 SmoothlyInputEdit.style = styleCss$K();
@@ -7329,7 +7351,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'a1e2fbf3bf30d1fd941de3bd207e16ef0e168407', 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: '1b2e27e123de65862e6535b4ee4e9760f1541129' }, h("slot", { key: 'aa0b28bb9a49649463084495e47d98d92729a57d', name: "label" })), h("div", { key: 'e7275addeb482256063dae4196f46ff8f45993c4', class: "input" }, h("smoothly-button", { key: 'efb739b21ac1af7cdec628fe67fdf8e38d576e74', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '131edbbc38611bdaf47024837c043d2f094104b0', name: "button" })), h("span", { key: 'dfd5aca4c0112a257fce52f7b2ecddf348b71870' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: 'b118ce04ee719798fe30fa562c77f60ce85945e6', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '94cd919ab0af8d448bf20fad13cb6a19579d26dc', name: "document-attach-outline" })), h("input", { key: '4f372d0ca5451932574973b4d0d556423acdf320', 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: '092975f9f5161227ee1907c12918e8256dc88d09', onClick: (e) => e.stopPropagation() }, h("slot", { key: '9039ae566f705c87e542ded409bba07358849829', name: "end" }))));
+        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" }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7455,21 +7477,21 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '825ed9c377498394114231b5fba58e1cbd53c321' }, h("smoothly-icon", { key: 'b17668f6747bf7169a0bd6284fec3e414be2b78c', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: '28204b265ebea6c0cbb757b8cc4a6a1e01e3b74c' }, h("smoothly-icon", { key: 'f4c14f7bf0825b0baede2c01ff097482ec9d75f5', 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: 'ec12ff50447e0ae9c85b7eefe6abeaf350b3a155', 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: '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 => {
                 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: '03f9af108c9a82b265055a5922371524a9a1485f', slot: "label" }, h("slot", { key: 'e1b37f7f4db3f27951844f1cf0453bc3bc66e141', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: '4c57f95ca4288fbf6401acfe5f83a9e21a7ad5e7', 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: 'fe85ea22cbf1dda9cbae9ba96b2d6e45343c9a31', slot: "label" }, h("slot", { key: '1f0e5aef19949285791558528dac50ada4cb1f32', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: 'a5718197e3389df6c5d175ecf362826e5a6dafad', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 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: '4c864e162f8fd664bf64d213f044608df5c32052', slot: "label" }, h("slot", { key: '8be0361eafcdda1fe0af35403fafe7268e0e1857', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: 'a00a80fa415529ddd7fb28b12394ffbc3895e3ca', 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: 'd4d00cd1968bf5766fee52de789f9fe983730210', slot: "label" }, h("slot", { key: '1b0a796b6cb66e6c549cd6eaef2f281ef519816a', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: 'dc499bc33e59e0f918194a7a4b3a61bcdd270600', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7502,7 +7524,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: '47fe9e7623e48def83512a77af0c7720b7d359e1' }, h("h2", { key: 'be944b8ee8341bfb659135ee049084cece6dd0da' }, "State demo on smoothly-input"), h("p", { key: '728077f668bbf069362b28336cfca6bfc3c9ef37' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '64db9e66b2e50e69f65a234df4a4071221b8926d' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'f260f857923136f03db67981a71f03295014f407', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: 'a01183cf22a642906f22873c5dcc09367ca524ef', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: '2d35ede0ba48999e163c9b401e822a703c049639' }, h("h2", { key: '6e3c78bd7a51616418555e74379ed81f4351688a' }, "State demo on smoothly-input"), h("p", { key: 'd43ad6219d21d065dc62197872e4cb689fececb5' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'e2a250b7bfb6433bc61fa3d740df11cae0713f85' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '4d111e1bd9fbc0dcc57d3a842cfd0756a4807991', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '4c81a6bf8c3d854f3443942a6c1fb64db9b67b54', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = styleCss$H();
@@ -7661,7 +7683,7 @@ const SmoothlyInputRadioItem = class {
         });
     }
     render() {
-        return (h(Host, { key: '370000d169e3450e3646936321086771915d4fad', onClick: () => this.inputHandler(true) }, h("input", { key: 'b750a0accdbf51b07e2304cb90387110fd59b618', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '98c9ceaa8bba2beff6477149fc393507da83d79d', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: 'f3fb78e097edde9b4a6ddfbd951e6614713374fc' }, h("slot", { key: '1f9e1d9419e874fe7dc9dd4696167449c34c14da' })), h("slot", { key: '0165c599564757d6b34944505fa296cd52fadc11', name: "detail" })));
+        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" })));
     }
     get element() { return getElement(this); }
 };
@@ -7770,18 +7792,18 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '8534047293e77d99f6c8a8e5d87659968516144c', class: {
+        return (h(Host, { key: 'db02e0bee4842a0dcce6ee6856758372481f2fb4', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '6b092b4a1e91bf15f714996ed01a801548a75655', name: "start" }), h("div", { key: 'ca7c4207e37dccd2fbc3b0edae03895a39ec96c8' }, h("label", { key: 'dc1b4d97e1256c4ee1b7f9daa91d25fe523ce418', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'ec6dfec2d8a625897d3a9b6a7fafcd897be8ef1c', 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: '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(),
                 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: '4e698362ae12d14f9bc217afe8e909b3b13a46bb', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'a8f20e17b2910b97862b3490c1efd0dcb1aa89bf', 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: '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 => {
                 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: '46b26acc10c408177bf4b77af9c451ac5ec98360', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: '1ebbd0cc6dfbf6179f9dc50e1597944571e219c2', name: "end" })));
+            }, 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" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7806,7 +7828,7 @@ const SmoothlyInputRangeDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '513ed764bf3593102fe688e6929f2c3f19c0a1a9' }, h("h2", { key: '25a0e8ad3ef9322ca03f6c64d812148022dc9688' }, "Range"), h("h3", { key: 'f14838850168a97050eab32a4eff767f17e0b3ef' }, "Phone Number"), h("smoothly-input-range", { key: '8ad60bd62396e66ac1338c8937a432bc8580dc23', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'f766bb38a2ae9108ea03e03d02dc6cf5308f3139' }, "Stars out of ten"), h("smoothly-input-range", { key: '67164065098d501e710abe48fa0e8411a56c15c0', max: 10, step: 1, label: "Stars" }), h("h3", { key: '73c4f2da26f0b6d61997b342ad6d4c0976ccc89e' }, "Percent"), h("smoothly-input-range", { key: '9bd55d44e6611c0dfa3bd9e7c1b061d119437326', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '49dc7f9db92e9fbecc53fd0bf1c8804a13febaa2' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '107e975039193ea8d1a9dca98d682c61d2c15096', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: 'cf0e39c1484399a21532024399ef6b08374a87c6', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: 'd1a3ab9ac2081a365a818d9ce2e453f03a21c049', size: "icon", slot: "end" }))));
+        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" }))));
     }
 };
 
@@ -7853,7 +7875,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '07fe387d6e31ee4b8733dd797ccbb6bc2a602450', title: this.tooltip }, h("smoothly-button", { key: 'db64da157afc163be326cc342d344881b0dd665c', 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: '6a6a1f5f60b8dee75d3adeba5a7dfd611a84d256' }), h("smoothly-icon", { key: '5d37c4a5f21cf620ab223979e1b0d0e589b97d73', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        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" }))));
     }
 };
 SmoothlyInputReset.style = styleCss$D();
@@ -7874,7 +7896,75 @@ var Item;
     Item.is = Item.type.is;
 })(Item || (Item = {}));
 
-const styleCss$C = () => `.sc-smoothly-input-select-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks="border"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within::before{content:"";position:absolute;inset:0;pointer-events:none;border-bottom:2px solid rgb(var(--smoothly-input-border-focus));z-index:10}[looks="grid"].sc-smoothly-input-select-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-select-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within{position:relative;box-shadow:0px 0px 0px 2px rgb(var(--smoothly-input-border-focus));outline:none;z-index:10}[looks="transparent"].sc-smoothly-input-select-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-select-h,[looks="transparent"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-select-h>input.sc-smoothly-input-select,[looks="transparent"].sc-smoothly-input-select-h:not(:focus-within)>input.sc-smoothly-input-select{background-color:transparent}[looks="transparent"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-select-h{cursor:not-allowed;--smoothly-input-foreground:var(--smoothly-input-disabled-foreground);--smoothly-input-background:var(--smoothly-input-disabled-background);--smoothly-input-border:var(--smoothly-input-disabled-border)}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .label.sc-smoothly-input-select{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.floating-label.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.floating-label .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder] .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly] .sc-smoothly-input-select-s>[slot=label],.floating-label.sc-smoothly-input-select-h .label.sc-smoothly-input-select,.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,.has-text.sc-smoothly-input-select-h .label.sc-smoothly-input-select,[placeholder].sc-smoothly-input-select-h .label.sc-smoothly-input-select,[readonly].sc-smoothly-input-select-h .label.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-select{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-select-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h smoothly-icon.smoothly-invalid.sc-smoothly-input-select{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-select-h{display:flex;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));padding-left:var(--input-padding-side)}.open.sc-smoothly-input-select-h{border-radius:var(--smoothly-input-border-radius) var(--smoothly-input-border-radius) 0 0}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select{box-sizing:border-box;display:flex;padding:var(--input-value-padding-top) .8rem var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.select-display.sc-smoothly-input-select{cursor:pointer}.sc-smoothly-input-select-h:not(:has([slot=label]))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>div.select-display.sc-smoothly-input-select{padding:.6rem .8rem .6rem 0;align-items:center}.sc-smoothly-input-select-h>div.select-display.sc-smoothly-input-select smoothly-icon.sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-select-h:hover>div.icons.sc-smoothly-input-select-s>smoothly-icon{filter:opacity(100%)}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{opacity:.7;height:100%;padding-inline:var(--input-padding-side)}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{cursor:pointer}[invalid].sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:block;padding:0.5rem}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h .label.sc-smoothly-input-select{left:.5rem}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>div.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>div.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:20;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));left:0;right:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);min-width:fit-content;border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}[looks="grid"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select,[looks="transparent"].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select{left:-1px;right:-1px}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item.sc-smoothly-input-select::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:0.5rem;border:1px solid rgb(var(--smoothly-input-foreground));border-radius:0.15rem;vertical-align:middle}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item[selected].sc-smoothly-input-select::after{content:"✔";position:absolute;left:0.65rem;color:rgb(var(--smoothly-item-selected-foreground))}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item[selected].sc-smoothly-input-select::before{border:1px solid rgb(var(--smoothly-item-selected-foreground))}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item[selected].sc-smoothly-input-select::after{color:rgb(var(--smoothly-item-selected-foreground))}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item.sc-smoothly-input-select:hover::before{border:1px solid rgb(var(--smoothly-item-hover-foreground))}[multiple].sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>smoothly-item.sc-smoothly-input-select:hover::after{color:rgb(var(--smoothly-item-hover-foreground))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>smoothly-item,.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{padding:.7rem .7rem .7rem .25rem}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview{display:flex;position:sticky;top:0;gap:1rem;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select-s>div.search-preview::before{content:"";position:absolute;inset:0;background-color:rgba(var(--smoothly-primary-tint), 0.5);z-index:-1}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name="search-outline"].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name="backspace-outline"].sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)))}.sc-smoothly-input-select-h>div.options.sc-smoothly-input-select>div.search-preview.sc-smoothly-input-select>smoothly-icon[name="backspace-outline"].sc-smoothly-input-select{margin-left:auto;margin-right:0}.sc-smoothly-input-select-h>div.options.hidden.sc-smoothly-input-select{display:none}`;
+var layout;
+(function (layout) {
+    function firstItemHeight(items) {
+        var _a;
+        return (_a = items.find(item => item.clientHeight > 0)) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    }
+    layout.firstItemHeight = firstItemHeight;
+    function applyMenuHeight(element, itemHeight, menuHeight) {
+        var _a, _b;
+        const height = menuHeight.endsWith("items")
+            ? `${itemHeight * +((_b = (_a = menuHeight.match(/^(\d+(\.\d+)?|\.\d+)/g)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "10")}px`
+            : menuHeight;
+        element.style.setProperty("--menu-height", height);
+    }
+    layout.applyMenuHeight = applyMenuHeight;
+    function applyElementHeight(element) {
+        element === null || element === void 0 ? void 0 : element.style.setProperty("--element-height", `${element.clientHeight}px`);
+    }
+    layout.applyElementHeight = applyElementHeight;
+})(layout || (layout = {}));
+
+var menu;
+(function (menu) {
+    function next(items, direction) {
+        const selectable = items.filter(item => !item.hidden && !item.disabled);
+        const currentIndex = selectable.findIndex(item => item.marked);
+        let index;
+        if (currentIndex == -1) {
+            index = 0;
+        }
+        else {
+            index = (currentIndex + direction + selectable.length) % selectable.length;
+        }
+        return { current: selectable[currentIndex], next: selectable[index] };
+    }
+    menu.next = next;
+    function hasVisibleItems(items) {
+        return items.some(item => !item.getAttribute("hidden"));
+    }
+    menu.hasVisibleItems = hasVisibleItems;
+    function markOnly(items, item) {
+        items.map(i => (i.marked = i === item));
+    }
+    menu.markOnly = markOnly;
+    function findFirstSelected(items) {
+        return items.find(item => item.selected);
+    }
+    menu.findFirstSelected = findFirstSelected;
+    function findFirstMarked(items) {
+        return items.find(item => item.marked);
+    }
+    menu.findFirstMarked = findFirstMarked;
+})(menu || (menu = {}));
+
+var scroll;
+(function (scroll) {
+    function centerInView(container, item, behavior = "smooth") {
+        var _a;
+        if (item && container) {
+            container.scrollTo({
+                top: item.offsetTop + item.offsetHeight / 2 - ((_a = container.clientHeight) !== null && _a !== void 0 ? _a : 0) / 2,
+                behavior,
+            });
+        }
+    }
+    scroll.centerInView = centerInView;
+})(scroll || (scroll = {}));
+
+const styleCss$C = () => `.sc-smoothly-input-select-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks="border"].sc-smoothly-input-select-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks="border"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks="border"][readonly].sc-smoothly-input-select-h{border:transparent solid 1px}[looks="line"].sc-smoothly-input-select-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks="line"][readonly].sc-smoothly-input-select-h{border-bottom:transparent solid 1px}[looks="line"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within::before{content:"";position:absolute;inset:0;pointer-events:none;border-bottom:2px solid rgb(var(--smoothly-input-border-focus));z-index:10}[looks="grid"].sc-smoothly-input-select-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks="grid"][readonly].sc-smoothly-input-select-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks="grid"].sc-smoothly-input-select-h:not([readonly]):not([disabled]):focus-within{position:relative;box-shadow:0px 0px 0px 2px rgb(var(--smoothly-input-border-focus));outline:none;z-index:10}[looks="transparent"].sc-smoothly-input-select-h{border:none}[looks="transparent"][readonly].sc-smoothly-input-select-h,[looks="transparent"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks="transparent"][readonly].sc-smoothly-input-select-h>input.sc-smoothly-input-select,[looks="transparent"].sc-smoothly-input-select-h:not(:focus-within)>input.sc-smoothly-input-select{background-color:transparent}[looks="transparent"].sc-smoothly-input-select-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-select-h{cursor:not-allowed;--smoothly-input-foreground:var(--smoothly-input-disabled-foreground);--smoothly-input-background:var(--smoothly-input-disabled-background);--smoothly-input-border:var(--smoothly-input-disabled-border)}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h .label.sc-smoothly-input-select{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.floating-label.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.floating-label .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h.has-value .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[placeholder] .sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly].sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h[readonly] .sc-smoothly-input-select-s>[slot=label],.floating-label.sc-smoothly-input-select-h .label.sc-smoothly-input-select,.has-value.sc-smoothly-input-select-h .label.sc-smoothly-input-select,.has-text.sc-smoothly-input-select-h .label.sc-smoothly-input-select,[placeholder].sc-smoothly-input-select-h .label.sc-smoothly-input-select,[readonly].sc-smoothly-input-select-h .label.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-select{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-select-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h smoothly-icon.smoothly-invalid.sc-smoothly-input-select{fill:rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)))}.sc-smoothly-input-select-h{display:flex;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground));padding-left:var(--input-padding-side)}.open.sc-smoothly-input-select-h{border-radius:var(--smoothly-input-border-radius) var(--smoothly-input-border-radius) 0 0}.sc-smoothly-input-select-h>.select-display.sc-smoothly-input-select{box-sizing:border-box;display:flex;padding:var(--input-value-padding-top) .8rem var(--input-value-padding-bottom) 0;overflow:hidden;width:100%;white-space:nowrap;gap:1rem;text-overflow:ellipsis}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>.select-display.sc-smoothly-input-select{cursor:pointer}.sc-smoothly-input-select-h:not(:has([slot=label]))>.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not([show-label])>.select-display.sc-smoothly-input-select{padding:.6rem .8rem .6rem 0;align-items:center}.sc-smoothly-input-select-h>.select-display.sc-smoothly-input-select smoothly-icon.sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground));fill:rgb(var(--smoothly-input-foreground));stroke:rgb(var(--smoothly-input-foreground))}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-select-h:hover>div.icons.sc-smoothly-input-select-s>smoothly-icon{filter:opacity(100%)}.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{opacity:.7;height:100%;padding-inline:var(--input-padding-side)}.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-down-outline].sc-smoothly-input-select,.sc-smoothly-input-select-h:not([readonly]):not([disabled])>div.icons.sc-smoothly-input-select>smoothly-icon[name=caret-forward-outline].sc-smoothly-input-select{cursor:pointer}[invalid].sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:block;padding:0.5rem}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>smoothly-icon.smoothly-invalid.sc-smoothly-input-select{display:none}.has-value.sc-smoothly-input-select-h:has([slot=label]:not(:empty))>.select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder]>.select-display.sc-smoothly-input-select{overflow:hidden;width:100%}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:20;max-height:var(--menu-height, unset);overflow-x:hidden;overflow-y:auto;background-color:rgb(var(--smoothly-input-background));inset-inline:0;border-radius:0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);border:rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px}.sc-smoothly-input-select-h:not(.open)>.dropdown.sc-smoothly-input-select{border:0}[looks="grid"].sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select,[looks=border].sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select,[looks="transparent"].sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select{inset-inline:-1px}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select{display:flex;position:sticky;align-items:center;top:0;gap:1rem;padding:.7rem .7rem .7rem .25rem;background-color:rgb(var(--smoothly-input-background));color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)))}.sc-smoothly-input-select-h:not(.has-filter)>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select{height:0;padding:0;overflow:hidden;pointer-events:none}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select::before{content:"";position:absolute;inset:0;background-color:rgba(var(--smoothly-primary-tint), 0.5);z-index:-1}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select>.search-input.sc-smoothly-input-select{width:100%;background-color:transparent;border:none;outline:none}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select>smoothly-icon[name="search-outline"].sc-smoothly-input-select,.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.search.sc-smoothly-input-select>smoothly-icon[name="backspace-outline"].sc-smoothly-input-select{color:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));fill:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));stroke:rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item{position:relative}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:0.5rem;border:1px solid rgb(var(--smoothly-input-foreground));border-radius:0.15rem;vertical-align:middle}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item[selected]::before{border-color:rgb(var(--smoothly-item-selected-foreground))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item:hover::before{border:1px solid rgb(var(--smoothly-item-hover-foreground))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item[selected]::after{content:"✔";position:absolute;left:0.65rem;color:rgb(var(--smoothly-item-selected-foreground))}.sc-smoothly-input-select-h[multiple].sc-smoothly-input-select-s>.dropdown>.menu>smoothly-item:hover::after{color:rgb(var(--smoothly-item-hover-foreground))}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select{min-width:fit-content}.sc-smoothly-input-select-h>.dropdown.sc-smoothly-input-select>.menu[hidden].sc-smoothly-input-select{display:none}`;
 
 const SmoothlyInputSelect = class {
     constructor(hostRef) {
@@ -7922,18 +8012,24 @@ const SmoothlyInputSelect = class {
         this.onSelectedChange();
     }
     componentDidRender() {
-        var _a, _b, _c, _d, _e;
-        this.itemHeight === undefined && (this.itemHeight = (_a = this.items.find(item => item.clientHeight > 0)) === null || _a === void 0 ? void 0 : _a.clientHeight);
+        var _a;
+        (_a = this.itemHeight) !== null && _a !== void 0 ? _a : (this.itemHeight = layout.firstItemHeight(this.items));
         if (this.menuHeight && this.itemHeight) {
-            (_b = this.element) === null || _b === void 0 ? void 0 : _b.style.setProperty("--menu-height", !this.menuHeight.endsWith("items") || this.items.length == 0
-                ? this.menuHeight
-                : `${this.itemHeight * +((_d = (_c = this.menuHeight.match(/^(\d+(\.\d+)?|\.\d+)/g)) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : "10")}px`);
+            layout.applyMenuHeight(this.element, this.itemHeight, this.menuHeight);
         }
-        (_e = this.element) === null || _e === void 0 ? void 0 : _e.style.setProperty("--element-height", `${this.element.clientHeight}px`);
-        if (this.ordered && !this.multiple && this.open && !this.lastOpen) {
+        layout.applyElementHeight(this.element);
+        const justOpened = this.open && !this.lastOpen;
+        if (justOpened && this.ordered) {
             this.scrollToSelected();
         }
     }
+    scrollToSelected() {
+        const selectedItem = menu.findFirstSelected(this.items);
+        if (selectedItem) {
+            menu.markOnly(this.items, selectedItem);
+            scroll.centerInView(this.dropdownElement, selectedItem, "instant");
+        }
+    }
     async disconnectedCallback() {
         if (!this.element.isConnected) {
             await this.unregister();
@@ -7967,15 +8063,15 @@ const SmoothlyInputSelect = class {
         this.selected = [...this.initialValue];
         this.displaySelected();
         this.isDifferentFromInitial = false;
-        this.open && this.handleShowOptions();
+        this.closeMenu();
     }
     async clear() {
         var _a;
         if (this.clearable) {
             this.selected.forEach(item => (item.selected = item.hidden = false));
             this.selected = [];
-            if (this.displaySelectedElement) {
-                this.displaySelectedElement.innerHTML = (_a = this.placeholder) !== null && _a !== void 0 ? _a : "";
+            if (this.displayElement) {
+                this.displayElement.innerHTML = (_a = this.placeholder) !== null && _a !== void 0 ? _a : "";
             }
         }
     }
@@ -8003,9 +8099,9 @@ const SmoothlyInputSelect = class {
         this.observer.publish();
     }
     async smoothlyInputLoadHandler(event) {
-        if (event.target &&
-            (("name" in event.target && event.target.name !== this.name) ||
-                (event.composedPath().some(e => e == this.iconsDiv) && !event.composedPath().some(e => e == this.toggle)))) {
+        const fromSelf = event.target && "name" in event.target && event.target.name !== this.name;
+        const fromEndSlot = event.composedPath().some(e => e == this.iconsElement);
+        if (fromSelf || fromEndSlot) {
             event.stopPropagation();
         }
         else if (Item.Element.is(event.target)) {
@@ -8017,7 +8113,9 @@ const SmoothlyInputSelect = class {
         this.displaySelected();
     }
     onWindowClick(event) {
-        !event.composedPath().includes(this.element) && this.open && this.handleShowOptions();
+        if (this.open && !event.composedPath().includes(this.element)) {
+            this.closeMenu();
+        }
     }
     onItemDomChange(e) {
         e.stopPropagation();
@@ -8045,144 +8143,120 @@ const SmoothlyInputSelect = class {
     onClosed(open, before) {
         this.lastOpen = before;
         if (!open) {
-            const markedItem = this.items.find(item => item.marked);
+            const markedItem = menu.findFirstMarked(this.items);
             if (markedItem) {
                 markedItem.marked = false;
             }
         }
         this.smoothlySelectOpen.emit(open);
     }
-    handleShowOptions(event) {
-        const wasButtonClicked = (event === null || event === void 0 ? void 0 : event.composedPath().some(e => e == this.iconsDiv)) && !event.composedPath().some(e => e == this.toggle);
-        const clickedItem = event === null || event === void 0 ? void 0 : event.composedPath().find((el) => "tagName" in el && el.tagName == "SMOOTHLY-ITEM");
-        !this.readonly &&
-            !this.disabled &&
-            !(clickedItem && this.items.includes(clickedItem) && this.multiple) &&
-            !wasButtonClicked &&
-            (this.open = !this.open);
-        this.filter = "";
-    }
     areValuesEqual(selected, initialValue) {
         return selected.length === initialValue.length && initialValue.every(value => selected.includes(value));
     }
     displaySelected() {
         var _a;
         const displayString = this.selected.map(option => `<div>${option.innerHTML}</div>`).join("");
-        this.displaySelectedElement &&
-            (this.displaySelectedElement.innerHTML = this.selected.length > 0 ? displayString : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : ""));
+        this.displayElement &&
+            (this.displayElement.innerHTML = this.selected.length > 0 ? displayString : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : ""));
     }
     onKeyDown(event) {
-        if (!this.searchDisabled) {
-            event.stopPropagation();
-            const visibleItems = this.items.some(item => item.getAttribute("hidden") === null);
-            if (event.key != "Tab" && !event.ctrlKey && !event.metaKey) {
-                event.preventDefault();
-            }
-            if (this.open) {
-                switch (event.key) {
-                    case "ArrowUp":
-                        visibleItems && this.move(-1);
-                        break;
-                    case "ArrowDown":
-                        visibleItems && this.move(1);
-                        break;
-                    case "Escape":
-                        if (this.filter == "") {
-                            this.open = false;
-                        }
-                        else {
-                            this.filter = "";
-                        }
-                        break;
-                    case "Backspace":
-                        this.filter = event.ctrlKey ? "" : this.filter.slice(0, -1);
-                        break;
-                    case "Enter":
-                        const result = this.items.find(item => item.marked);
-                        if (result === null || result === void 0 ? void 0 : result.value) {
-                            result.selected = !result.selected;
-                        }
-                        if (!this.multiple) {
-                            this.open = false;
-                            this.filter = "";
-                        }
-                        break;
-                    case "Tab":
-                        this.open = false;
-                        break;
-                    default:
-                        if (event.key.length == 1) {
-                            this.filter += event.key;
-                        }
-                        break;
-                }
-            }
-            else {
-                switch (event.key) {
-                    case "Enter":
-                    case " ":
-                        this.handleShowOptions();
-                        break;
-                    case "ArrowDown":
-                        this.handleShowOptions();
-                        this.move(1);
-                        break;
-                    case "ArrowUp":
-                        this.handleShowOptions();
-                        this.move(-1);
-                        break;
-                    case "Tab":
-                        break;
-                    default:
-                        this.handleShowOptions();
-                        if (event.key.length == 1) {
-                            this.filter += event.key;
-                        }
-                        break;
-                }
-            }
+        event.stopPropagation();
+        const key = event.key;
+        if (key == "ArrowUp" || key == "ArrowDown") {
+            event.preventDefault();
+            this.handlerNavigate(key);
+        }
+        else if (key == "Escape") {
+            event.preventDefault();
+            this.handleEscape();
+        }
+        else if (key == "Enter") {
+            event.preventDefault();
+            this.handleEnter();
+        }
+        else if (key == " ") {
+            event.preventDefault();
+            this.openMenu();
+        }
+        else if (this.open && key == "Tab") {
+            this.closeMenu();
         }
     }
-    scrollToSelected() {
-        const selectedItem = this.items.find(item => item.selected);
-        if (selectedItem) {
-            this.items.map(item => (item.marked = false));
-            selectedItem.marked = true;
-            this.scrollTo(selectedItem, "instant");
+    handlerNavigate(key) {
+        if (menu.hasVisibleItems(this.items)) {
+            this.move(key == "ArrowUp" ? -1 : 1);
         }
+        this.openMenu();
     }
-    move(direction) {
-        const selectableItems = this.items.filter(item => !item.hidden && !item.disabled);
-        let markedIndex = selectableItems.findIndex(item => item.marked);
-        if (markedIndex == -1) {
-            markedIndex = 0;
+    handleEscape() {
+        if (this.filter) {
+            this.resetFilter();
         }
         else {
-            selectableItems[markedIndex].marked = false;
-            markedIndex = (markedIndex + direction + selectableItems.length) % selectableItems.length;
+            this.closeMenu();
         }
-        selectableItems[markedIndex].marked = true;
-        this.scrollTo(selectableItems[markedIndex], "smooth");
     }
-    scrollTo(item, behavior) {
-        var _a, _b, _c;
-        (_a = this.optionsDiv) === null || _a === void 0 ? void 0 : _a.scrollTo({
-            top: item.offsetTop + item.offsetHeight / 2 - ((_c = (_b = this.optionsDiv) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 0) / 2,
-            behavior,
-        });
+    handleEnter() {
+        const item = menu.findFirstMarked(this.items);
+        if (item === null || item === void 0 ? void 0 : item.value) {
+            item.selected = !item.selected;
+        }
+        if (!this.multiple) {
+            this.closeMenu();
+            this.resetFilter();
+        }
+    }
+    move(direction) {
+        const { current, next } = menu.next(this.items, direction);
+        current && (current.marked = false);
+        next.marked = true;
+        scroll.centerInView(this.dropdownElement, next, "smooth");
     }
     addItem() {
         this.addedItems = this.addedItems.concat(h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
+    resetFilter() {
+        this.searchElement && (this.searchElement.value = "");
+        this.filter = "";
+    }
+    setFilter(filter) {
+        if (filter) {
+            this.filter = filter;
+            this.openMenu();
+        }
+        else {
+            this.resetFilter();
+        }
+    }
+    openMenu({ focus } = {}) {
+        this.open = true;
+        focus && queueMicrotask(() => { var _a; return (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }
+    closeMenu() {
+        this.open = false;
+        this.resetFilter();
+    }
+    toggleMenu() {
+        if (!this.readonly && !this.disabled) {
+            this.open ? this.closeMenu() : this.openMenu({ focus: true });
+        }
+    }
+    onClick(e) {
+        const wasIconsClicked = e.composedPath().includes(this.iconsElement) && !e.composedPath().includes(this.toggleElement);
+        const wasSearchClicked = e.composedPath().includes(this.searchElement);
+        const wasItemClicked = e
+            .composedPath()
+            .find(element => element instanceof HTMLElement && element.tagName === "SMOOTHLY-ITEM");
+        if (!wasIconsClicked && !wasSearchClicked && !(wasItemClicked && this.multiple)) {
+            this.toggleMenu();
+        }
+    }
     render() {
-        return (h(Host, { key: 'ca6c2263ae2ef16cb0548e10ead81e15b2b42487', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '032b8a92bb4c74c48a9ea22b3ae552c2cac8d30a', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: 'b1d1e8f9143643a69c23cc16668e901e5329c1cb', class: "icons", ref: element => (this.iconsDiv = element) }, h("smoothly-icon", { key: '958d9fa44174d2b4933e34b5a6c89963e42cb7de', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '0a9725e2e1b37159f392ed2c8cb0e69b0253ec53', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: 'fb656bc03fbec14da5e1914bd6bebed50ad5fbcd', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '743b3bc40c4bd7254225fd3f0962fcb67d07df59', name: "label" }), h("div", { key: 'ac6b4007348834d933c8673710ebdacc3def6001', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("div", { key: '502094a51085fa634e98b0d511713757ff30877d', class: "search-preview" }, h("smoothly-icon", { key: '78729a52979f85bced39cecd9e861ff06185beb0', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: '50956a5cc4a63ef0515947ddbbb7962d38e260c1', name: "backspace-outline", size: "small", onClick: e => {
-                e.stopPropagation();
-                this.filter = "";
-                this.element.focus();
-            } }), this.mutable && (h("smoothly-icon", { key: 'b6f99488a836ad3e33d03ebb600bc5c5fc42e8cc', name: "add", size: "small", onClick: e => {
-                e.stopPropagation();
-                this.addItem();
-            } })))), h("slot", { key: 'a60d0d54bfc5dbae48ec336f92c5556a5ba13b2e' }), this.addedItems)));
+        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: () => {
+                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))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8252,7 +8326,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '4ba889ed871427b4fd99610c5b775068dc05cc54', 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: '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" })))));
     }
 };
 SmoothlyInputSubmit.style = styleCss$B();
@@ -8298,7 +8372,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (h(Host, { key: 'd76e2737454ad914f831482c98d30978975506fd', tabIndex: -1 }, h("slot", { key: 'edef0a2718d076ad33b6f874591a8a2791fb6876' })));
+        return (h(Host, { key: 'a7ee995ec37b480a02715fb95c885152560cc0c1', tabIndex: -1 }, h("slot", { key: 'dcc2403a2253a7059dc88b4658c17c6533876a9f' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8317,9 +8391,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '351e89e82587e7ccb66dc55451c53f05648ac9d4', title: this.description, style: {
+        return (h(Host, { key: '2ae229f53b855fbc470064e7ded803a990d98711', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '9e2eedbf6c74f923cbb0c0ae8648ce207aabcdb7' })));
+            } }, h("slot", { key: '52d6798bf0fbea2948297aad2fe3a71a000b4f76' })));
     }
 };
 SmoothlyLabel.style = styleCss$z();
@@ -8336,7 +8410,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (h(Host, { key: '93b333ebfee933e5f5b147895a04385389b5c03d' }, h("slot", { key: 'b10226510296688cb58fc005c01c68a16ffd150c', name: "before" }), h("smoothly-load-more", { key: '9a097a7489d5e670418250abcc0d5870d11f460c', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'bf5243f15e485eae1203272284b06f0e51d47fa9' })));
+        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' })));
     }
 };
 SmoothlyLazy.style = styleCss$y();
@@ -8380,7 +8454,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return h(Host, { key: '9f0e2e8278780438f214286cd990ee54a6b5546a' });
+        return h(Host, { key: '88150a06ccdec5a72446a3f8dac86339b3007b72' });
     }
     get element() { return getElement(this); }
 };
@@ -8405,9 +8479,9 @@ const SmoothlyModal = class {
         this.open = true;
     }
     render() {
-        return (h(Host, { key: '601bd96e27c500c08df01457b2951449e4392c37', role: "alertdialog", onClick: (e) => {
+        return (h(Host, { key: '12ffaa744cfce7d329f9e335be7b63827eb40644', 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: '9deaaf0008f61aecd194a2094d65544cfa97b425', class: "modal" }, h("div", { key: 'b041b4418cfc98753f6fe34ffca610f2da25ba6b', class: "header" }, h("slot", { key: '848fecf8ba6a2efcacd1b1c753df17ab5a96fcb3', name: "header" }), this.closable && h("smoothly-icon", { key: '1d51dc003fa0604b29530202cbf0fb743322698b', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '802bd940f81748477962b9c4d615913f073fcd34' }), h("div", { key: 'b31e5dbbf56573298464b071414977be7acf5178', class: "actions" }, h("slot", { key: '85a6a0753237febc205e02a52da4086de9f47fad', name: "actions" })))));
+            } }, 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" })))));
     }
     static get watchers() { return {
         "open": [{
@@ -8472,7 +8546,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: 'a8ac459d3c94d3df653723e0d93f6e72260806fc', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: '27e7521a477d0eeb67717166ccc252cfa0a2ce35', fill: "clear", name: "close" }, h("smoothly-icon", { key: '5dff1f73b2937bacf2d81b4e2a528dce8a3c3868', name: "close-circle-outline" }))), h("span", { key: '60584d5ee874685807f6b613592f64e57bba771b', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '186656f3d0f19a4b087a50c5af168be3973cc271', name: this.properties[1] }), h("p", { key: '23547fd1eb3e3d524fb850ff00749f937902a4fb' }, this.notice.message))));
+        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))));
     }
     static get watchers() { return {
         "notice": [{
@@ -8497,7 +8571,7 @@ const Notifier = class {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (h(Host, { key: '6d3724d096d8e0547b7b336206f5bb1c97af54e9' }, h("slot", { key: '86d13b581dae9bfa29714e59b272b68d5143dd08' }), h("div", { key: 'fb0790db93da5415e2ce9a05500675d1e13a0f0c', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        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 }))))));
     }
 };
 Notifier.style = styleCss$v();
@@ -8511,9 +8585,9 @@ const SmoothlySpinner = class {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (h(Host, { key: 'cc63c3d7a177c5119f9dbd6c38038c06f9fe5093', style: {
+        return (h(Host, { key: '458303df1f0703dad9d88e9a6c1dfbd063de34e7', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, h("svg", { key: '50736fa849eb8112f5f0356d4d2233b70eff5248', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'f5e92d9993f413213c5cf59d290b4d52316cc06c', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, 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" }))));
     }
 };
 SmoothlySpinner.style = styleCss$u();
@@ -8533,7 +8607,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (h("details", { key: '307957b81f396381ad9eb975137299e7429dc9b5', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: 'b0951b6f61956f2b7c5253c8c839679af6b4174c' }, h("smoothly-icon", { key: 'f12054adab15e894617ed408fdbb6f6160b42c95', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '5138f3df6492a607ac2a0398204f4a95b9e8c547', name: "summary" })), h("slot", { key: '14aba4cf6b25ed41cb002585d4a117168e7a6169', name: "content" })));
+        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" })));
     }
 };
 SmoothlySummary.style = styleCss$t();
@@ -8578,7 +8652,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (h(Host, { key: 'cc20ba3ae6f849d6dcdab3f1c53c8467ab73dd2d' }, h("div", { key: '421083c3fe13a80ae1417952b51cbbfa838f3b98', onClick: () => !this.disabled && (this.open = true) }, h("label", { key: '0111434d9bac6d843b368fd74d81e323c22ac186', "data-smoothly-tooltip": this.tooltip }, this.label)), h("div", { key: 'de2b298da72c39caa6d3f4d39265e8b569a349cc', hidden: !this.open }, h("slot", { key: 'fcc770a8f2782f0c1135bf49d48696ff26f645ab' }))));
+        return (h(Host, { key: 'dd61170ab95f4c9ceaca14bea3f9a232960a6d9d' }, h("div", { key: 'cfc1188d6c8c405c46a234ad9ac98eb81fd65ec8', onClick: () => !this.disabled && (this.open = true) }, h("label", { key: '25b8c5b4de124f5e597a524aa086a54f3f65ba56', "data-smoothly-tooltip": this.tooltip }, this.label)), h("div", { key: 'd9931e625c2f70c92b8c6ac0efa66f28ae7f4d62', hidden: !this.open }, h("slot", { key: '5811a6f791ceddbf1ef12a80913357fabbc53e5e' }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8603,7 +8677,7 @@ const SmoothlyTable = class {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: '1103836f2752eafb6216c7e591c7fd37fb77e2ce', style: { "--columns": this.columns.toString() } }, h("slot", { key: '141f5cbcd6f2f0fd988bfa98bf9774f9cd61fe66' })));
+        return (h(Host, { key: 'e1e0fc478ebf90003f156eddb44e1de2213cf4e0', style: { "--columns": this.columns.toString() } }, h("slot", { key: '10e080ed0213084a43750f73df364993b30f72b4' })));
     }
 };
 SmoothlyTable.style = styleCss$r();
@@ -8615,7 +8689,7 @@ const SmoothlyTableBody = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '399b61d93f037a694f0e3a8f99ec433c06b3c640' }, h("slot", { key: 'a8325da9f0ffac6857b6a7a6e5625544b5c46899' })));
+        return (h(Host, { key: '35794212738d56a6ee77383f2cdee89a57db82f1' }, h("slot", { key: '34c2c0ce45bc87a5ce11c7ded126b1bdb89af320' })));
     }
 };
 SmoothlyTableBody.style = styleCss$q();
@@ -8629,7 +8703,7 @@ const SmoothlyTableCell = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '0778ff0d0b6e7d5d960f4eb1bc3e63156ac9cc23', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '7f735c3219f7107f895008a6fb76e022cee5b2f2' })));
+        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' })));
     }
 };
 SmoothlyTableCell.style = styleCss$p();
@@ -8641,7 +8715,7 @@ const SmoothlyTableDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'd7277fac7e25efa923ce5e7263b7fe07b3d1ae7c' }, h("smoothly-table-demo-filler-row", { key: '74942c1891773856c68b58eae197b663476e1892' }), h("smoothly-table-demo-group", { key: 'f307da0e9acdb2269e15e58dd0299539a3f6f3a5' }), h("smoothly-table-demo-colspan", { key: '80c976bd5cdbc95a0248b4efaa48805236f0bf08' }), h("smoothly-table-demo-simple", { key: 'b9de2b65113c2ee7543733abef20476b19b440db' }), h("smoothly-table-demo-nested-no-cell", { key: 'd6b6c367cd66b9cc2eb8cfa86800e6697a258071' })));
+        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' })));
     }
 };
 SmoothlyTableDemo.style = styleCss$o();
@@ -8653,7 +8727,7 @@ const SmoothlyTableDemoColspan = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '206c3432bf7936b15e972c161424e6b0e102a15c' }, h("smoothly-table", { key: 'fd9a1adfc79d7e3fa130e55614c8956aa9993ce7', columns: 3 }, h("smoothly-table-head", { key: '079086e32eab6c27ec06646b7cc1addc5a45e218' }, h("smoothly-table-row", { key: '6b421c777d5857d7b8c6e92dfa8ebb9e65c24f0d' }, h("smoothly-table-cell", { key: '9c0f4181cefa485af433741c55eb8033057333ba' }, "Date"), h("smoothly-table-cell", { key: '6b089e4d9d9d43ead73b8602d1f482b019810ee7' }, "Skip"), h("smoothly-table-cell", { key: 'b3a5f766b5a7bc15fe29aa2ba35d908f33883f7f' }, "Total"))), h("smoothly-table-body", { key: '12be40d0b1546ef3bcb8d95815e3a6751a34dc95' }, h("smoothly-table-row", { key: '22d3015ebb0c1a19b412c175f231de9cd3f9f04c' }, h("smoothly-table-cell", { key: 'cb591fa2b41381aa1c663a701a76b953ff610262', span: 2 }, h("smoothly-display", { key: 'a9dfcaebab3333ea62c290c9952ecc7c77ba33a7', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'b3680b9847f0e5635538af75af7c117d86464fcc' }, h("smoothly-display", { key: 'c89fca16b3f2e836dc9dd8c2378f4b26bab2be1f', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: 'd2574793e06a73ede9721349f9e26ea596947500' }, h("smoothly-table-expandable-cell", { key: '2ab7fcbb3c3f54298e7b9f4b6b8287f0e5c07c04', span: 2 }, h("smoothly-display", { key: '40f846739879908115983e730c2e135fc3473977', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '9989441f4da6a580d7d7a21a8623a1dafc0d6a3d', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: '20f47281da324a3fe529553b57c2e50de7a7039d' }, h("smoothly-display", { key: 'd9d02229b0bfa49122ede86d2513648a1448d8bf', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '7803a63f59d968622edfb07fed2b40338fb1b460', 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: '0bf9dd84e89fef204799961f85e24b5a14d4c4d4' }, h("smoothly-table-cell", { key: '7feacfd6127864b97ac910256f434b42ee57dcd6' }, h("smoothly-display", { key: 'df857a1e9f9503c08c49f564a47bbb4b3b96f170', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'bd1848a3218ec7b9177b0354570fc3a96f827c0a' }, "Not Skipped"), h("smoothly-table-cell", { key: '1656b57464928e417afa36732fe710654c6c1e8d' }, h("smoothly-display", { key: '6097190c8c8c9ae2899a0497d524da52f42a145e', type: "price", value: 320, currency: "EUR" })))))));
+        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" })))))));
     }
 };
 SmoothlyTableDemoColspan.style = styleCss$n();
@@ -8671,7 +8745,7 @@ const SmoothlyTableDemoFillerRow = class {
         }, 3000);
     }
     render() {
-        return (h(Host, { key: 'e2842ae7ee217b160d69fc5fa6cb686af528e2fc' }, h("smoothly-display", { key: '8ec4889c9bc004f61f6b9d91b87e9135f2b7ba11', type: "text", value: "Filler row" }), h("smoothly-table", { key: '39f5a22a15a05631cf015918050e94215a336d62', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '271ced47bcbc64f53cc70bf3f1ca757059ac81dd' }, h("smoothly-table-row", { key: '7a7566c40b27be58ab6bc3f6eeea2b5e90726cf5' }, h("smoothly-table-cell", { key: 'c3f0eb89f019759418b4524fa923194e1eaa05c9' }, "Breed"), h("smoothly-table-cell", { key: 'beb4c8b9c55d96c4f3e9faa71bfc9bf3971a1e25' }, "Country"), h("smoothly-table-cell", { key: '6c8e3177e07f82961707a6f31729ede9da79acd9' }, "Coat"), h("smoothly-table-cell", { key: '71023e2b53ab05e19b5d2f973f4b45c6ad1b7525' }, "Origin"))), h("smoothly-table-body", { key: 'a4a2e96740dbb0191031fb008fba9c349f4d37b1' }, 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: '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)))))))));
     }
 };
 SmoothlyTableDemoFillerRow.style = styleCss$m();
@@ -8683,7 +8757,7 @@ const SmoothlyTableDemoGroup = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '044be2a5a9260e32e91ee8375a225a0dee587ce9' }, h("smoothly-display", { key: 'c8a77f7bcd0bc541ad217e1df6828a2b0815e2f8', type: "text", value: "Group" }), h("smoothly-table", { key: '807f4357d1197b355711e01d5edffd8d3983db6a', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '6b1b3b0e281764d1430fe6b765f2872884e2e09e' }, h("smoothly-table-row", { key: 'c9b2dd1d3b4c17256cbc1d7214a7654cb82d4436' }, h("smoothly-table-cell", { key: 'b1c8d54323e816490f28005e6bbe618c2ffe0e4a' }, "Date"), h("smoothly-table-cell", { key: 'e45d0a4862cbe71c8cca27a8d6aa6a0956709019' }, "Total"))), h("smoothly-table-body", { key: 'c0bdce1d860654b8ba88bac33a9f035363061d19' }, h("smoothly-table-row-group", { key: 'a11c8367f087e12e0a02d25f8b48a29689107e06', align: true }, h("smoothly-display", { key: '8ab3110cbf9d57591bfa9a2dcc9c7e224792a104', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: '826f0acd265a99d445b6786458c232172d2cf381', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: 'ccc0645a756649d0e748f147eec063aa5c7c7036' }, h("smoothly-table-cell", { key: '3a7e33ab43dca04d24872c2041833bff916e8934' }, h("smoothly-display", { key: '972c99f625f6b27352b3e3c17007a6923a1cbfce', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'bfe695bac2c193687738aafd05a78cb23feac052' }, h("smoothly-display", { key: '934d9207b9971fa1d7787822e7405f1e9def7a13', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: 'a94346f2caa9c0edfa9608485b458da151fae5f9', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '51f21f7bc12d6662392b96f7582a78f19d7dc0af' }, h("smoothly-table-cell", { key: '9bf2051dbb810a8eaa7da2ffe850435a943ab7b2' }, h("smoothly-display", { key: '1abb624a6c4cd85f191576e4155e90f12529ac11', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'a796212e2c36cbaac2d2d9d10960310c23b7d3e0' }, h("smoothly-display", { key: '605eeaac1fee2ccfd96d900cdbda80e98cf86886', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: '8905ac1b38a2acf766c60c74284399a44331874d', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '4d49a3ada2507ec28ae70b3361e620758bd95977' }, h("smoothly-table-cell", { key: '9d6c8b5ba8f0704745e014eeaa0eec94f1957739' }, h("smoothly-display", { key: '851e641172245203cc8c80fe191c629c1e8036f6', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '7a6160c20b31624b7f181526da09ffe4df40ef36' }, h("smoothly-display", { key: '229e788a885e95aa6abb8a0ef633579a17e87a95', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: '42fbdb5745b91dc7f42d19f3fb4e7a9c53b96a78' }, h("smoothly-display", { key: '6dcfdbe08def271dfeaf89a1d8fff32e921971b1', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: 'fe218184eb784cc7cd3094775096f81981ee8733', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '8611b77389d19cb2463ff654328520acc0229030' }, h("smoothly-table-cell", { key: '75d7572ca30ae4a051f3756794a7117c5c7f3c46' }, h("smoothly-display", { key: 'fb86017176633bc226dafc03e37b9ac282f88ddc', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'be847bc7c1ac7781c2bc9637b6143b493e9688eb' }, h("smoothly-display", { key: '553cd5b7591033b6f8743b1e6b14e7ec15552889', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'f3dfa33ba846fdcb5172b0ad47c3ab14e29ee6fb', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '7e5acc9b813857a344b7ffde22549088f26bda0a' }, h("smoothly-table-cell", { key: '5cba3d4839ba15c0193e7eec1ac664bc9b3f5f61' }, h("smoothly-display", { key: '312c552c6ccece6028c4cdd8ab0f5f2af3391d5c', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'a4273386dd793a0ecb8284727869a51345d0e5bc' }, h("smoothly-display", { key: '21a7a1c5c0a9bcf5e3594a4b48f7c54eb5af0b9a', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '04ee16af0d0033862aa7e29033d0edf95a9b6bfb', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '7ce12fc20fea9844d23e773e19a0296e8dedcbb2' }, h("smoothly-display", { key: 'ece4ded9117930fc4c64c8d2740ed8add76f4fb6', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: 'b43e2f3e5e51beb019da6b4b823014df4fb9b7ad' }, h("smoothly-table-cell", { key: 'd8ec8e3397e6c702a0ce7ffc1148258b357d850f' }, h("smoothly-display", { key: '663260db0785da46c8978f561aea13ffe434a319', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'd526a2aa10c7be28d6e2be439984604c25e98ae8' }, h("smoothly-display", { key: '68f15b2b6bfd5faff55b3421e914633f7e54abc2', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '32eacc646bc96494eab5c117f22f543044a28a16', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '419ca2c46ff03e1ef1a78e2089198337c5aeb180' }, h("smoothly-table-cell", { key: '06a07b9699ffe395dc0c68fd8993ab3e4ae27117' }, h("smoothly-display", { key: 'a2cba094f5178e043d930f445304ed7eab4f7fdd', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: '8e974a68dd724ece0945ff277229f8c70a6c9e04' }, h("smoothly-display", { key: 'beb312d995aa44c5138cbb748237d5cf02c944f3', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '75801728d6f20f9e4acbe38a2b302b73ce8cbd32', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: 'a5d4d32fcb7ac204a3734dea7a616c88307e6cbe' }, h("smoothly-display", { key: '2331960fe63909aef8f9b35ecdd76bc37deb6375', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '19b69cb0e6265bcae3413ff3deacb31359825110' }, h("smoothly-table-cell", { key: 'b1573bf5ea27d637dd429e80c012192fc22e0660' }, h("smoothly-display", { key: 'd8777e74c334c73a60a7fcd377c8ef1d69fae20e', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: '49f464b913486092a2de9b27750a71b00061eef3' }, h("smoothly-display", { key: '0d716ae1f80fa8f98c84e623d1935b7a0213a648', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '7c8d2f82680b35d8f231d828c6ffdb2b6ebb31da', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'b64d7b474e70a8d3334660a01feb0b26c8403e40' }, h("smoothly-table-cell", { key: '64bf40d93b8ff419695fa7d69d4894585e77d92d' }, h("smoothly-display", { key: 'ba5694ed645bb9b5105fa0ffe1dacd63dfa4d72c', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: '837a934ab755965bfad88ed07a5b21a7c7877738' }, h("smoothly-display", { key: '6e2b0d5a372e022374c514393f8a9a439cb06480', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '13966802b164b23cd3959c54373a91a4b99d1ab8', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: 'dc7031260e2ca39650f89659822ed86320701751' }, h("smoothly-table-row-group", { key: '8c4f9f5fd19f9c144c439aaba701c0b0a1b22272' }, h("smoothly-display", { key: '9458e205c4be0d91ce42eff9bcecded48c69c961', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: 'a139382798f85d6922dea91e86b473cd2bfd486a', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: 'ae33f14933f819975a4313ad4255d00b371bd677' }, h("smoothly-table-row", { key: 'ececad7f1be8f60215da7e2f2dce838fefcdf279' }, h("fake-cell-wrapper", { key: 'defb123cb025e0dc64085a248645c635bc488507' }, h("smoothly-table-cell", { key: '97cd28e0c190afcab36d300de24bd5ba4c42139b' }, h("smoothly-display", { key: 'd5ec9b80ecffcac24cb936ac8383161523de7e60', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: '08d0df0f2c099dab483a9c2c48b286e3bcba0346' }, h("smoothly-table-expandable-cell", { key: '53b96521de90492a28d44c74ecd6674828a9d54e' }, h("smoothly-display", { key: '9bf466b6f3090ad44103e1eb2be42fde3a337910', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: '55f6d59ab1c85058c5634774f33c9a71a9451917', 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: '8476b93642f2b53e5c8ae23698c54edb072c6361' }, h("smoothly-table-expandable-row", { key: '8535dad53ba0eaf19f5ee5d2f5b1f3d6f3e1c6bd' }, h("fake-cell-wrapper", { key: 'ff5facddb89a2cf15f18634ad8f7e8780a51cb6d', class: "span-2" }, h("smoothly-table-cell", { key: 'a4508b413fd6e98ac9d64043dee769bb2ff5c97b', span: 2 }, h("smoothly-display", { key: '65865507298b01080b39b2c7b856e37bcac1ba46', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '2e6baa60bcdcd7a892b9863975d2ff90a11fbc9f', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: 'bee25e3af1397c26cbcb59fe0aeb178f672d60c3' }, h("smoothly-display", { key: '89e48e848f09c8edb0a5a71de18f6a6e02e298f8', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '8eb48628fe13eeef290c1b086d3baa338c010cc2', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        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 }))))));
     }
 };
 SmoothlyTableDemoGroup.style = styleCss$l();
@@ -9629,7 +9703,7 @@ const SmoothlyTableDemoNestedNoCell = class {
         this.loadedRows = [];
     }
     render() {
-        return (h(Host, { key: 'f0cccc2533446b88de6b0956cb2c24c3ec106962' }, h("smoothly-display", { key: '997fa002f0a3a14e1516d2fe4eb7cf9491979819', type: "text", value: "Nested" }), h("smoothly-table", { key: 'ec7a88e096863fe59f1c5f7c80aaa4a538bb1b48', color: "primary", columns: 8 }, h("smoothly-table-head", { key: '821e802acadb9d8158badd884ee120228feb41de' }, h("smoothly-table-row", { key: '029120e75a85535c08a7bde66ae8835270716e2f' }, h("div", { key: 'acbe3da2f1f60da436c44523b2797b30221996d8', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'd764a06cee565fdb4361161090c7d3ef57b5e5cf', class: "smoothly-table-cell" }, "Registered"), h("div", { key: '17f3a9f0b08bc9b9f22a590942faf5fdbc7344aa', class: "smoothly-table-cell" }, "Name"), h("div", { key: '5a1e9388b4bec34d26cc186cd0d801b9ff8ccb16', class: "smoothly-table-cell" }, "Age"), h("div", { key: '80e4ff513a81355d9e6526057c19d93b65bc457d', class: "smoothly-table-cell" }, "Balance"), h("div", { key: '55594b070d4f81852eab51086bec06a7b04c0635', class: "smoothly-table-cell" }, "EyeColor"), h("div", { key: 'bd684d81b4b52fa721c34846c8cd94b61eca490e', class: "smoothly-table-cell" }, "Gender"), h("div", { key: '3b078a0ee2ea599d54be265f24796024b23ededd', class: "smoothly-table-cell" }, "Company"))), h("smoothly-table-body", { key: 'db35dab7f93e802c1d95c686dd8bc5262362a8f8' }, data.map((entry, index) => (h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
+        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 => {
                 if (event.detail) {
                     this.loadingIndex = index;
                     setTimeout(() => {
@@ -9637,7 +9711,7 @@ const SmoothlyTableDemoNestedNoCell = class {
                         this.loadedRows = [...this.loadedRows, index];
                     }, 1500);
                 }
-            } }, this.loadingIndex === index && h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.registered), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance), h("div", { class: "smoothly-table-cell" }, entry.eyeColor), h("div", { class: "smoothly-table-cell" }, entry.gender), h("div", { class: "smoothly-table-cell" }, entry.company))))), h("smoothly-table-foot", { key: 'f09a7c7bdf3bf6a423f0dbbcd6999fcdb7d2c0b0' }, h("smoothly-table-row", { key: '6237c3e3f1e5eecb050caacac3a18c70fb7a1d13' }, h("div", { key: 'fa63fb23e29dbe508bec40b0349910597b016164', class: "smoothly-table-cell" }, "Footer Cell"), h("div", { key: '5ff91ed21cf8857ce5d89b2d9d028ad85b4172af', 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: '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"))))));
     }
 };
 SmoothlyTableDemoNestedNoCell.style = styleCss$k();
@@ -9650,7 +9724,7 @@ const SmoothlyTableDemoNestedNoCellInner = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8695c1d15d2eec8b9ee575ed963af80f6319d2ef' }, h("smoothly-table", { key: '45cffac7f3ae618ce4ea0f5f8671f55ed9ba8ab2', columns: 4 }, h("smoothly-table-head", { key: 'c0bdfe025083af1569395f48452d7c1bf2ce2e8e' }, h("smoothly-table-row", { key: '70ef7fc95d6327e8c50134a3815f2b025c4d1f89' }, h("div", { key: 'c9d2b13223be6eddbb4831a9107b1a862d296f94', class: "smoothly-table-cell" }, "Id"), h("div", { key: '14cad91fd59c36a04673ea16250014ea894e0006', class: "smoothly-table-cell" }, "Name"), h("div", { key: '714b0198d5bc725eb78f937741b588b20eed003e', class: "smoothly-table-cell" }, "Age"), h("div", { key: 'f65a8705ba26a84827e11db27c763ea0f2308328', class: "smoothly-table-cell" }, "Balance"))), h("smoothly-table-body", { key: '531c1e3c65c0947291ab22cc888c18615f6b4ee7' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (h("smoothly-table-expandable-row", null, h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
+        return (h(Host, { key: '9150c28b151e6567c9d4d385068702f600fcb2f1' }, h("smoothly-table", { key: '7261ea2339bc05332c0bb2e8d43a9362bbe13d3a', columns: 4 }, h("smoothly-table-head", { key: 'd800c29461ff8bc75f0ac1265e50640c0138d211' }, h("smoothly-table-row", { key: '56bb549fe6154737b01ad2564df4c58a6e5f8c52' }, h("div", { key: 'e6e3a1c445d93d2c814c7cb6057643124c132de2', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'c92d18120e36c54139713090f821a605ad42e3fc', class: "smoothly-table-cell" }, "Name"), h("div", { key: '2fc4f2987f92840727806f222a300bf463990917', class: "smoothly-table-cell" }, "Age"), h("div", { key: '4c5f4888480ac4afdc2a7ea0ea1223f019ac342f', class: "smoothly-table-cell" }, "Balance"))), h("smoothly-table-body", { key: 'ea1511197b149bc2963a00345c5cde47378c7f26' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (h("smoothly-table-expandable-row", null, h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
     }
 };
 SmoothlyTableDemoNestedNoCellInner.style = styleCss$j();
@@ -9662,7 +9736,7 @@ const SmoothlyTableDemoSimple = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '91f4891d9b3f238bbf5897254a8e709af436905a' }, h("smoothly-display", { key: '4b2dd92dffa7b2853be7d70a331308f12b04c5c2', type: "text", value: "Simple" }), h("smoothly-table", { key: '6a9840d72c42ae57008fe773a1e2efaaa598271f', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '033754254544d75ce9c7ae69af93803eebc4136d' }, h("smoothly-table-row", { key: 'de2622eda56a4843b7b1b91d9b9ee2c700fcb3c6' }, h("smoothly-table-cell", { key: 'e445efc0c5585fc269ca0dc74873daef7679cf26' }, "Breed"), h("smoothly-table-cell", { key: '0f054ac68fae8dbdd09e467cede70e397529e722' }, "Coat"))), h("smoothly-table-body", { key: 'f80f23b30de2b1dcd6a266b8d1e1ae10b96c1e46' }, cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country:", h("br", null), cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), h("smoothly-table-row", { key: 'd469f986bbf4e1172906d081be9c73123e3940b5' }, h("smoothly-table-cell", { key: '437a8c8262a11e7270248adb3c8ee8598d4cf4e6' }, "Cell5"), h("smoothly-table-expandable-cell", { key: '3b58406815a7ce4568528d84aabb78627dba819c' }, "Expandable Cell", h("div", { key: '852283739f4d7085726ace98dfd4bf40c5572d95', slot: "detail" }, "Content of the expandable cell"))), h("smoothly-table-row", { key: '249c5a4b449506fc29fa6de81f3018c4f3afdb69' }, h("smoothly-table-expandable-cell", { key: '89bd889979a763f5d122f4b702955f6ec8a875a3' }, "Expandable Cell 1", h("div", { key: '8c022dbeb53e51f4cfa7dfad98c2040d04d453fa', slot: "detail" }, "Content of the expandable cell 1")), h("smoothly-table-expandable-cell", { key: '31cbf39571004b680efaecffb7674804191a5997' }, "Expandable Cell 2", h("div", { key: '3f2fb41ed70a88f413b0133dd5d85aa53bb9f062', slot: "detail" }, "Content of the expandable cell 2")))), h("smoothly-table-foot", { key: '814c8d8d2faab31d6edc4af6f20ad150352f96ea' }, h("smoothly-table-row", { key: 'c9c8981af50d5f2daf71f234f14a0ae2213d2c2a' }, h("smoothly-table-cell", { key: 'f7ee5b1e9bafd407ee9d191645efea768e9998f9' }, "Footer Cell"), h("smoothly-table-cell", { key: '85a523e583fbd8d45fa0c62ebc14d4f4f6be9ced' }, "Footer Cell"))))));
+        return (h(Host, { key: 'fa0ee8dabad78b4e11466c08476a7b7bab777bcf' }, h("smoothly-display", { key: 'f1929229c708243f89969fb865281c87cdea3974', type: "text", value: "Simple" }), h("smoothly-table", { key: 'a74ccd3d2757769582a1640cd03f275040258979', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '3740997a15cd0be3f576a5ccd325dedbcf7ecf57' }, h("smoothly-table-row", { key: '173e8a0edf3ca6131dbfd5fd2e23bf5e818de068' }, h("smoothly-table-cell", { key: '6ccc98fe385d936d3fc18a0802aa171c9e4833f0' }, "Breed"), h("smoothly-table-cell", { key: 'f12b6543b4b7be9f4d26610d2a90b900951e7f52' }, "Coat"))), h("smoothly-table-body", { key: '2cc82f1d8659f303f29352fa4cce8961fa698fab' }, cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country:", h("br", null), cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), h("smoothly-table-row", { key: '9548adc12d9a485c5e973deeb2fe4abf22119809' }, h("smoothly-table-cell", { key: '502907286ab36ee5358c143d8d5613bb0685fa29' }, "Cell5"), h("smoothly-table-expandable-cell", { key: '4ed0239f7262bfb76e8dbfd94b4b76e992dbf1af' }, "Expandable Cell", h("div", { key: 'f576406602ee34bf67621939ff7fe2c57c4b66be', slot: "detail" }, "Content of the expandable cell"))), h("smoothly-table-row", { key: '54e2ecd8dcb9c666930d9005ba31a3f64e25aabc' }, h("smoothly-table-expandable-cell", { key: '88b51a8cf477ca4de13d0735a491c30fe28870c6' }, "Expandable Cell 1", h("div", { key: 'd0ddd7d5489dc8e9df88b52315d61e97d9c6434d', slot: "detail" }, "Content of the expandable cell 1")), h("smoothly-table-expandable-cell", { key: 'ee707b238f569e36eb9bdbaca1c82fc7a0f830bc' }, "Expandable Cell 2", h("div", { key: 'bbdaab7554b86deee81fea4697afc013909cb218', slot: "detail" }, "Content of the expandable cell 2")))), h("smoothly-table-foot", { key: '936f27ddd1dbc6b3b1f8fa5cbe9887898c1b3688' }, h("smoothly-table-row", { key: '161b992762fa4617785cd6c6c83d957a7d5f976c' }, h("smoothly-table-cell", { key: '158fc3ac159fe7eeac086fdde980b1f39c9d79db' }, "Footer Cell"), h("smoothly-table-cell", { key: '3a6ff2185ab3ff1306655498582ea9bfff4d7099' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -9770,7 +9844,7 @@ const SmoothlyTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '83c526f00d51b0168a455e9bf868ebe197665443', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'bd6ef753fad107892472d513d3e85e2303496bb1', class: "content" }, h("slot", { key: 'ce3529ccc72dcc4434fc759be3de926b923952b4' })), h("div", { key: 'bb6ecf54d7568c46a582e5e9b7e34040d3318800', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, h("slot", { key: '55da6c2611dfa327b27b24d5f93f19f58f273c34', name: "detail" }))));
+        return (h(Host, { key: '1c27ff4e5c10ad504e0c8307be3bfb1243afc5d9', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '9df957e7d9f55f6687adbdfc550b3cfa6a8d3dea', class: "content" }, h("slot", { key: '505b6a8964feb91d4d0256b6ea3f27519742ef6c' })), h("div", { key: '9054849f559fc9f02c7ba5c9c95cabf1e741f417', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, h("slot", { key: '0feb5288d454fc6b606ad4585706f40ec3789443', name: "detail" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -9802,7 +9876,7 @@ const SmoothlyTableExpandableRow = class {
         this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (h(Host, { key: 'ff903b0e76d26c2b0828b970b5543cfd0032d64a', onClick: (e) => this.clickHandler(e) }, h("slot", { key: '483c340f950cad51409b816cb72edb5de6f06856' }), h("div", { key: '296d3287e2106d7e0f1703f0f51745e22abac101', class: "smoothly-table-detail", ref: e => (this.div = e) }, h("slot", { key: '23d911a603915e5dfbd807b29c22609382edd008', name: "detail" }))));
+        return (h(Host, { key: '21d040e883e73f9415ee1a3e7055fa5ce9adc57b', onClick: (e) => this.clickHandler(e) }, h("slot", { key: '9c42a350c5e00b6b24f7c746cc801588df69c14f' }), h("div", { key: '0c5c8a4e231018e1f96e09348447c876051540cf', class: "smoothly-table-detail", ref: e => (this.div = e) }, h("slot", { key: '263395e4d57775e72e510071245261a23097175f', name: "detail" }))));
     }
     static get watchers() { return {
         "open": [{
@@ -9819,7 +9893,7 @@ const SmoothlyTableFillerRow = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("smoothly-table-row", { key: '8d580002c87f7b0e829c8611ff035bc6b135fd94' }, h("smoothly-table-cell", { key: '3ebb3485d3fe53900dea32010e5174f9bc27013d' }, h("slot", { key: 'a30dd8ac3c009058d6fba5acebe6608368b92af8' }))));
+        return (h("smoothly-table-row", { key: '7561aa3596121beb8d1fa3af10d14ed9be08f7f2' }, h("smoothly-table-cell", { key: '04c9c851fb31ec6a246b2bc82cdbc7293478a0e3' }, h("slot", { key: 'f0db97bf64c0979fbca0c6f5ab4296684f743a70' }))));
     }
 };
 SmoothlyTableFillerRow.style = styleCss$f();
@@ -9831,7 +9905,7 @@ const SmoothlyTableFoot = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '6fd2e248de8df09b4b20908c00272e7751c63a6b' }, h("slot", { key: '66634f6fcbd68eed2628c4d16e7ff3cf4d7ad78c' })));
+        return (h(Host, { key: 'fa6bc933396023c1d84d01460a4ff641c53136a1' }, h("slot", { key: '7aaddf60b15f344866dce0847441bec4dc739ae0' })));
     }
 };
 SmoothlyTableFoot.style = styleCss$e();
@@ -9877,10 +9951,10 @@ const SmoothlyTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (h(Host, { key: '4e36d52e779e650ece819865062e1b2e3c910aa3', class: { scrolled: !!this.scrolled }, style: {
+        return (h(Host, { key: 'a892578836b416a7ca7dcecf5436988fcd9c33d1', class: { scrolled: !!this.scrolled }, style: {
                 "--top": `calc(${this.depth} * var(--smoothly-table-cell-min-height))`,
                 "--z-index": `${10 - this.depth}`,
-            } }, h("slot", { key: '0ffd90e5c1661e52c1a2047ce754889c51cb7727' })));
+            } }, h("slot", { key: '6905eb9cae9ac8411ff90d83de4ff7a2a5fd5f12' })));
     }
     get element() { return getElement(this); }
 };
@@ -9905,7 +9979,7 @@ const SmoothlyTableRow = class {
         }
     }
     render() {
-        return (h(Host, { key: '79c849e4643bb16dead2af107b205abb420084f7' }, h("slot", { key: '193f73152f488024219ed4af47d1b34d81fca26c' })));
+        return (h(Host, { key: '213964e8d2239419bb9dd5751e00096a922ab084' }, h("slot", { key: '37b92c81dff5ba150141d0d060f7d1eb17c414d2' })));
     }
 };
 SmoothlyTableRow.style = styleCss$c();
@@ -9928,7 +10002,7 @@ const SmoothlyTableRowGroup = class {
         }
     }
     render() {
-        return (h(Host, { key: '06b9db603c4254382dcd7fc3d7dfaf3a2c6be521' }, h("div", { key: '22b594f2c066cf6b2f92139b5847972e204bda1d', onClick: () => this.clickHandler() }, h("div", { key: '9c082d0cbccf65d45637e5e3999aa0e4503eb3b9' }, h("slot", { key: '2530eb7dd1162dc407169270b20fe0fc14a747b1', name: "start" })), h("div", { key: 'd2b06391bca18891401c5a31e4f98a0e2e34479d' }, h("slot", { key: 'f64c478dd61c7abd1c35fa809b85a3a8e0264cab', name: "end" }))), h("div", { key: '8d3c37ffa856ddfea5b0275104c055a75540168b' }, h("slot", { key: '9856a2795799b61ddd4c231054208c960eaba96f' }))));
+        return (h(Host, { key: '8407e47bd79c00425a93bbf78bfaa234417e6730' }, h("div", { key: '80a4d3121142f72cecf08afee5083fc3f00e8772', onClick: () => this.clickHandler() }, h("div", { key: 'ae02eb813ffb3951e41363c41b89e16f8cf93199' }, h("slot", { key: '5020efcd50f6b9349c05c93c90c7b0499ebaa5f6', name: "start" })), h("div", { key: '081546adcccc771440f2f5e681dfc15712579fb3' }, h("slot", { key: 'd05a5dff9ba8473a329e3cb00bedc0732cbed6f9', name: "end" }))), h("div", { key: '26e75848ce1b7f8c889fb7376f5c65c9a1f95ef8' }, h("slot", { key: '0d1687ebc94faafddea6b096c26ce5fdd408ff7f' }))));
     }
 };
 SmoothlyTableRowGroup.style = styleCss$b();
@@ -9996,7 +10070,7 @@ const SmoothlyTabsDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'c0a6d3252227ca35115022479e20eae1518a0ea0' }, h("div", { key: '987c89d2b7d434a7ededccad9aa2592370f35c56' }, h("smoothly-button", { key: '9d1e4baa19cbfd20f0741b62cf1faba0eee5e9f9', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '00e5d3f1a502d466d8f7bb57dc99b8f43b4cec5c', tabs: "multiple" }, h("smoothly-tab", { key: 'f349ea433e31c9fa0601552c83744fb0fd59c0dc', label: "Single Tab", open: true }, h("strong", { key: '1d9e472b1bcb6eab690b534d9c54c85df6ff6bad' }, "Single Tab content here."), " If only one tab is available setting ", h("code", { key: '69f193a4e9a7022eb5a57bf6ba1ce25642440932' }, "tabs"), " to", " ", h("code", { key: 'a2e44255abc6ffcbb97fa40620795d66b708dbe4' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (h("smoothly-tab", { key: 'dd469d65650aef03d78794be04a3753e9f6503b1', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), h("div", { key: 'd4c74375b2a2462272536302cae4c2b8d156d9e8' }, h("smoothly-button", { key: 'b8cb8984081584464d24ac00f8eb31beec0a1ec6', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '13b0f9af28c870dc8eae74930e358b8c2c3e3a31' }, h("smoothly-tab", { key: 'fb2a32bf6a82f57c6f17684262448dfa7ca7312f', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), h("smoothly-tab", { key: 'bc21b1abc992aeb53f934b528888e44e334c651a', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), h("smoothly-tab", { key: '9fb5f89c51f22e527fb3f18c48f5018ef1624364', label: "test2" }, "this is a test message!"), this.extraTab2 && h("smoothly-tab", { key: 'e563eaf2cffb105047505abee23958965108fba1', label: "test-extra" }, "this is a test message!"))));
+        return (h(Host, { key: 'e5afcbf69dade2bfdfbccdb5ebef98067703e03e' }, h("div", { key: '720708cebe6311006737245ba3bfd2ce495fddd4' }, h("smoothly-button", { key: '9cc479c1ca7de47f611071bc020640509ec55f13', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '5e91c482c3f8d282c48630216797762712fbd088', tabs: "multiple" }, h("smoothly-tab", { key: '30fd2e83a0ad2e4ef4363b2471d5ef3a8f508e79', label: "Single Tab", open: true }, h("strong", { key: '46b7eb4a05793c23e1235026732d599ad7cd8acf' }, "Single Tab content here."), " If only one tab is available setting ", h("code", { key: '7f0e856a9e3b6f922c9a872e303f8ef2af92fe68' }, "tabs"), " to", " ", h("code", { key: 'b8398697b2d6c2757cd0a9a6216b1ca9b1680053' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (h("smoothly-tab", { key: 'd52047652788873a578d9f071e07e7a0ade65ea9', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), h("div", { key: '4ce9bdf4953f65e8296e45fc63ea4eef285010bd' }, h("smoothly-button", { key: '68c65012a5382c124b140c26442bbbf00e09b94c', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), h("smoothly-tabs", { key: '7afa233b048274a8966859485ebbe28c76e6b87b' }, h("smoothly-tab", { key: '390d8492e788d1f8748090a43e57b12f0ce88107', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), h("smoothly-tab", { key: 'f3e74d731d6b3fcd9d188a5653beaec79fc179ee', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), h("smoothly-tab", { key: '6de96abf84eb6fb72065cdcc97691257cd0ced76', label: "test2" }, "this is a test message!"), this.extraTab2 && h("smoothly-tab", { key: '01fba3e8e1ad1ed22b3458bd5240f4f4192f3145', label: "test-extra" }, "this is a test message!"))));
     }
 };
 SmoothlyTabsDemo.style = styleCss$9();
@@ -10008,7 +10082,7 @@ const SmoothlyThemeColor = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'fc491c82a4336ac22b0ae27664dc30b8ad2e6ddf' }, this.color, ["tint", "color", "shade"].map(variant => (h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
+        return (h(Host, { key: '2ffa9ed25b646e14b48d6da53a3afd3a9f897468' }, this.color, ["tint", "color", "shade"].map(variant => (h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
     }
 };
 SmoothlyThemeColor.style = styleCss$8();
@@ -10056,7 +10130,7 @@ const SmoothlyThemeDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'f0c5a5037d8d733f786d8ce3b21e0979856ea24c' }, h("h2", { key: 'ffc46c881e6f125cd636f48ed99e9b09483777a3' }, "Theme"), h("smoothly-theme-picker", { key: 'fa85e3f66a7396add5817d5865a9ec72e189ed82' }, h("smoothly-item", { key: '5d0d85fb7891f8128f773cce4541853bec86c218', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), h("smoothly-item", { key: '4c55805827a7429ee79c3b5b2bdb77ef101c1755', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), h("smoothly-item", { key: '5317ebcb61a09140363221a803aa26a3dbfb1c56', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), h("smoothly-item", { key: 'c4ec847f0f40e1ddf9ebb35a11a20965ffa8c7b9', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), h("smoothly-item", { key: 'eb5645045d8906ee1ef1d7ef9878f0d3a85ad194', value: "https://test.dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), h("smoothly-item", { key: '70e9b33c310e0a882c72d22581a0b15d731585cf', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), h("smoothly-item", { key: '94fce8e04541ce2b9f0ef82a18be6639f74973be', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), h("smoothly-item", { key: '97e2ba87bea89e4757bd57295941148046f3917f', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), h("smoothly-item", { key: '50c90c022145e5f03cb83bc69e31e25f1d7cc28d', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), h("div", { key: '1e29f47ff30f071b712a20fc204a975a32370a06' }, h("smoothly-theme-colors", { key: 'b7a0d1e92bb6a6e2c89018b72fb64457dced7b46' }), h("smoothly-theme-guide", { key: '6dbfe67e1241557f3d3ac2411ad01d39119f877a' })), h("smoothly-button", { key: 'd91c71c4a3fd05d492acffb741b215dd6c4b957c', type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { key: '3d47ad9f1472edbf824405924068b588aca5013c', type: "link", link: "/redirect" }, "To /redirect"), h("smoothly-button", { key: '914d0de16407dae3f29d412c64b799bd0d6c220a', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), h("smoothly-button", { key: 'db36742a02c5c56ab0f80daa99d3a2bd6d10984d', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (h(Host, { key: '259010889b682573bbfb69b7711dcf03f972b06f' }, h("h2", { key: 'fe4330363bc1b6322e015569a02662077907cca8' }, "Theme"), h("smoothly-theme-picker", { key: '6df264adb5b90050418224f373e927dc33373d3f' }, h("smoothly-item", { key: 'ac79f3b604c3b6bffe8e1cd19e7b24b03960bf14', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), h("smoothly-item", { key: '4ca9bad0897a7a216a56aa0db0004a6e14b6f272', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), h("smoothly-item", { key: '2e71be7455105d37aa039c6347e4aa24dab3c15a', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), h("smoothly-item", { key: '235223f83245bb7cc3455f2102237a8923c5cf22', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), h("smoothly-item", { key: '43153d498cde19b3a97ea93036be8dabb90c86d7', value: "https://test.dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), h("smoothly-item", { key: 'e5e1e6079b7b20cfe8a62c5572f1fa48c6365a90', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), h("smoothly-item", { key: '26b2f21f376a927f788771a32292d3fb13d7380e', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), h("smoothly-item", { key: 'c36d493ae4ba1b8152c3bb8f41b086b08437f600', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), h("smoothly-item", { key: '1dab38f02ffadd2e2160f99f6209f72e294ac874', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), h("div", { key: 'f542097bfc16f9214244cfb7bcc1e2a2e31704e8' }, h("smoothly-theme-colors", { key: 'a363e1e7ba2164cd58bc1fa03d5b9d13c8e81c10' }), h("smoothly-theme-guide", { key: 'bedcda407b6d30d538176e1c32112d455feddcfd' })), h("smoothly-button", { key: 'aeb9185b1efeb83db2e4359b733c8bad207adb2b', type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { key: '761c81b4c4724e61a6d7bb96f44ef3d241b86ee1', type: "link", link: "/redirect" }, "To /redirect"), h("smoothly-button", { key: 'a45adb52d81652f71a997c9f1c81466822e3da4e', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), h("smoothly-button", { key: '0ad5ce583e40ea790411d756bcc0d9ebb118452c', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = styleCss$5();
@@ -10069,14 +10143,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            h("smoothly-display", { key: 'f1df988e927d7a410fb804c256d83fd2e5df3270' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            h("br", { key: 'd88375d6837282086c1b28679979c5c30535bf6f' }),
-            h("smoothly-display", { key: '92197798a41f3637cdb44eb0d771314994f8558b' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
-            h("br", { key: 'f3babcf46ea37dd12f0963dc5aea96663192b36d' }),
-            h("smoothly-display", { key: '62bcb9535f7bdd1278867a5c7ef64a523f8165c2' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
-            h("br", { key: '10c741b12802f9afdfce58261f02f3d82c313ea7' }),
-            h("smoothly-display", { key: '3611691ee95a6349d47fcd73361bbb24e944ea97' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            h("br", { key: 'abfa804436d8eae1a12e021ee848ddd63ade667a' }),
+            h("smoothly-display", { key: '9d9ac39e30705ec8aa0175a54771ab32d88f70cb' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            h("br", { key: '704a1265d7bb3ec33ab58b3f997df5afdf0707a5' }),
+            h("smoothly-display", { key: '2335c861ac8cb203da8e68ee536565bc2a90174f' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
+            h("br", { key: '02804573e827624e8eebec30f835679c1ecf2fd3' }),
+            h("smoothly-display", { key: '75dfb78b730a334347ff3b5d305df980fa8f41aa' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
+            h("br", { key: '988cfafb48a6f100c7eca395e6a4ac5be3e9d329' }),
+            h("smoothly-display", { key: '2bf7c0cdc1be980a3ff5b0e360a8ffbad6553980' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            h("br", { key: 'c6dbc6a33cf896d8be26a3c8c08641b9de7ade17' }),
         ];
     }
 };
@@ -10090,12 +10164,12 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (h(Host, { key: '3d64ad9ce926088343c92623b0c1a160f8ac6b12' }, h("smoothly-input-select", { key: '6d5fd6f6e60d38230bb5e5093ae3a3c363bcbf46', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (h(Host, { key: '6b397ed31434037a5f53640cd677e4bf9f680671' }, h("smoothly-input-select", { key: 'e89de311276c516112329aa634ec4fa372eeeda7', name: "theme", looks: "border", onSmoothlyInput: e => {
                 const element = document.querySelector(`#${this.element}`);
                 if (element instanceof HTMLLinkElement && typeof e.detail.theme == "string") {
                     element.href = e.detail.theme;
                 }
-            } }, h("label", { key: '833d1f1acc791ab7eaa91c6ac44d0a49fe4730d2', slot: "label" }, "Select theme"), h("slot", { key: '40db0ed1a542a37e5b7eb3c605927d9ecb52ba0d' }))));
+            } }, h("label", { key: '185ea02a7eeda366e8290a3b2855e287eb62e91d', slot: "label" }, "Select theme"), h("slot", { key: '3844628b22bfe87cebc35c2ab396accc02cf48dc' }))));
     }
 };
 SmoothlyThemePicker.style = styleCss$3();
@@ -10118,7 +10192,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (h(Host, { key: '945d2ccf63b6151062eb53a452e0f0f692dc4c24' }, h("button", { key: 'b9c395ce35fc7bc680217e09ad206b54a7b62241', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, h("smoothly-icon", { key: '7ba58e7bb4e71ee39dc447534f5ff020ebbc6147', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
+        return (h(Host, { key: '8fe4ea1f46f6c01c92b57819809602946c96c06f' }, h("button", { key: 'd9bfcb5daac769bbd7ef5aaa7839737e4711d76a', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, h("smoothly-icon", { key: '270b37fed4a32ba6ce9226af559a6aaa23aae7de', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = styleCss$2();
@@ -10130,7 +10204,7 @@ const SmoothlyToggleSwitchDemo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '6d75883f10a6927501fbbe6a03f82ef7528133be' }, h("h4", { key: '625ba905112acc2df7c3126199167707b03c210d' }, "Toggle switches"), h("div", { key: '5f2287372e9c1052aed9b1479e8bbbbf6dd64757' }, h("p", { key: 'edef7d5d95c5fa0419555941c1e45ea40b045ce3' }, "Checkmark"), h("span", { key: 'c397f7c3cfc3409b82cb530e03f0c8e670041435' }, h("p", { key: 'ab0a7e9ba7b3e413b0d7019c09a252592840da21' }, "Tiny"), h("smoothly-toggle-switch", { key: '2afce65a2ec65e39c88d8fb4520edc6dff419ea2', disabled: false, size: "tiny" })), h("span", { key: '67696d9cb555e62ae71f9c40fe4f8ebee7931e35' }, h("p", { key: '6b304afb35f96bb0dfd8aed9db8490dd7ca40298' }, "Small"), h("smoothly-toggle-switch", { key: 'bc35c4113a7f9393d53806f789a54589e3dc2353', disabled: false, size: "small" })), h("span", { key: '865f6cccdff04345c79ec1bcee9f5e6534dec7fd' }, h("p", { key: '6d5519e11c79219503d715320d738950c37d780c' }, "Standard"), h("smoothly-toggle-switch", { key: 'd5602d7f3f60b7ded9eb7248e71d1b3f750b777f', disabled: false })), h("span", { key: '273f17415a1e8c9f108309e6d4fcfdcf17c608b7' }, h("p", { key: 'e8c5ad08bc97b6694f1b2606a5d8626c2f278126' }, "Large"), h("smoothly-toggle-switch", { key: 'cf6cce07734bbf3c50a4a443c68fba38d63fc8dd', disabled: false, size: "large" })), h("p", { key: '147584c6d76a94f2a2588d15154113f94402464d' }, "Colors checkmark"), h("span", { key: '37e5370fdfc007d0368a28d2bea98d37ed288312' }, h("p", { key: '5500276de9dbf6a9fdf2fd15ecbfd2b8299809e8' }, "Danger"), h("smoothly-toggle-switch", { key: '78879aa4d4277bf89dc24e6cf287c1accfdfec6f', color: "danger", disabled: false, size: "small" })), h("span", { key: '4b86b7193d1982ff84bc5691a342916f62281059' }, h("p", { key: '4da64077bf3f54d0800abab5b6f2a10b8b4c97d2' }, "Primary color"), h("smoothly-toggle-switch", { key: '534d2e2bf89fd7dea185eff41d8a3f1711d76078', color: "primary", disabled: false, size: "small" })), h("span", { key: '72f8aad6e84051d29e1f9ba18ecb4895612c936c' }, h("p", { key: 'f4aa9ffc25c89dd66d17483dfa7a0489ae1d6bba' }, "Secondary color"), h("smoothly-toggle-switch", { key: '15bfaeed2c51163bc7de95f061cde923b7607654', color: "secondary", disabled: false, size: "small" })), h("p", { key: '199c1a9d0a3d6eae579a5b7df8d0d9e2758a6fe8' }), h("p", { key: 'de9327fe62e464761eb16462480a1802226221aa' }, "Colors no checkmark"), h("span", { key: '571bbf458b871cf5cac9876a476b7754df87ae44' }, h("p", { key: 'ef59738e2b79bf43de0b1192842173157d5e3406' }, "Danger"), h("smoothly-toggle-switch", { key: '97a4641ae8fe82838241816b46b2d8f79c4f9908', checkmark: false, color: "danger", disabled: false, size: "small" })), h("span", { key: 'b58b64c313b1d4f9aad01d581920e52be572de4e' }, h("p", { key: '1a794486d86bccac605e8faa18c87cb5e85dc69a' }, "Primary color"), h("smoothly-toggle-switch", { key: 'dccb06b7ba71fc9ec9e5e1cd430ae8c82f6e03c4', checkmark: false, color: "primary", disabled: false, size: "small" })), h("span", { key: '29477d34ea6de176fe86cd7979d0e638219c38d7' }, h("p", { key: '4180155f37c46569c583d626f7c6c528f77daf86' }, "Secondary color"), h("smoothly-toggle-switch", { key: '3dc6be79be809e7b13e5510538221a7d58044137', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (h(Host, { key: '427648c217c445ff9bfcbc15897305cd8cc7a1fb' }, h("h4", { key: 'de6459b36d5a11ca5ef125e7be6fd47b6a7eb938' }, "Toggle switches"), h("div", { key: '544de9cabe5fa1da5a303b3ac4cb21f46d4e773a' }, h("p", { key: '3e464b80ef1bd8fe1ab43b29a1dffd8fb328df7d' }, "Checkmark"), h("span", { key: '3439d69cae6f0d7e5a6df6132050abe5c344b187' }, h("p", { key: 'fc9499fddd3bc798c7c52b614cec7bcb6bf52b65' }, "Tiny"), h("smoothly-toggle-switch", { key: '34bdc859582b47fbbb74341becc0e6087072eba5', disabled: false, size: "tiny" })), h("span", { key: 'a58d98e68a782423c12f4b8df8e80857e03dc139' }, h("p", { key: '9034c32dc86c0efdf5a8ab6fff641c09ad43a1a4' }, "Small"), h("smoothly-toggle-switch", { key: 'db605c265143f36a67891e7ed45351e36621df13', disabled: false, size: "small" })), h("span", { key: 'bebf928abd8c347d8022255de8e889dc85c09c77' }, h("p", { key: 'e860772082f263847681a239953580e86e29c399' }, "Standard"), h("smoothly-toggle-switch", { key: '79f4366d8b1862858afb468219c75ecb7018789c', disabled: false })), h("span", { key: 'f4ad70d60ecc85f2814d3e87dfdc7a236e7fef13' }, h("p", { key: 'fb93088b1c7482580821322ee74aaf6e9d3cf87e' }, "Large"), h("smoothly-toggle-switch", { key: '694db2c0cfc2fc9fa5ab37934891c3df9a7cbcff', disabled: false, size: "large" })), h("p", { key: '367eeb72e8cdd2c16e456e425c152e8a68976e06' }, "Colors checkmark"), h("span", { key: '9aea20656b1cb4223c036b138790c0fa46182bcd' }, h("p", { key: '861904268f1d9f131fc12de30419576dd4e03ca4' }, "Danger"), h("smoothly-toggle-switch", { key: 'f3e7eb843fa01e958c29dcb055bf121fae011348', color: "danger", disabled: false, size: "small" })), h("span", { key: 'ad94d89305156111da3908a7f4b07dd157e0fcd5' }, h("p", { key: '7c23b1a9151d430b267b66f21430da94b8492acd' }, "Primary color"), h("smoothly-toggle-switch", { key: '50fd4aaa9762a92c9b2f2607d61ed30c8350ce1e', color: "primary", disabled: false, size: "small" })), h("span", { key: '8a8fa2fdf036938a89b0cee770199aadae78b6b0' }, h("p", { key: '581928f8b5a88a15ad840b1ed0c43487cbb58465' }, "Secondary color"), h("smoothly-toggle-switch", { key: '833d19dfc2a929777ec935e69314588883bf153e', color: "secondary", disabled: false, size: "small" })), h("p", { key: 'b36bd1756c7911a71c17b48857c89e41efd497ef' }), h("p", { key: '911b6241ac22a6b6987014b86afa7bae155bad70' }, "Colors no checkmark"), h("span", { key: '6136db79afe7390f27a70286b2b7af2c85f360bb' }, h("p", { key: 'bc5fb4108a80a40d247464b44131eba9dd7613cb' }, "Danger"), h("smoothly-toggle-switch", { key: 'ab1d1ac99e8871dbfe8bffe0d71f1ab3b3542f5a', checkmark: false, color: "danger", disabled: false, size: "small" })), h("span", { key: '2876aa64a40c492e295f7e24d5812ea8d790c405' }, h("p", { key: 'fd59cd462154da9215c9aa80b026319baa021582' }, "Primary color"), h("smoothly-toggle-switch", { key: '50cc57021cc9aaddaf0d1053ce1e9c73ed02813d', checkmark: false, color: "primary", disabled: false, size: "small" })), h("span", { key: '1608427985a0e07188d5566c7f3709a347864b9a' }, h("p", { key: '23050dbf5fb9e8cc76120818921a3fbbfef4d21d' }, "Secondary color"), h("smoothly-toggle-switch", { key: '5c8152a8d52d9fd778aea9f84f3b36b49acf9869', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = styleCss$1();
@@ -10156,7 +10230,7 @@ const SmoothlyTrigger = class {
                 result = this.disabled ? (h("slot", null)) : (h("a", { onClick: e => this.onClick(e) }, h("slot", null)));
                 break;
             case "button":
-                result = (h("button", { key: 'b29e3e2eb0ab5d17b9602df55ad9afb0d0565243', disabled: this.disabled, name: this.name }, h("slot", { key: 'df1757d80fe0e05d8d497b1aa168e9992ee423a2' })));
+                result = (h("button", { key: 'a8277d3521475192961463b4867553aacea5f8e3', disabled: this.disabled, name: this.name }, h("slot", { key: '6998482165ff6a73d87eb079235f88741353a1ce' })));
                 break;
         }
         return result;