npm - smoothly - Versions diffs - 1.65.0 → 1.66.0 - Mend

smoothly 1.65.0 → 1.66.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (348) hide show

package/dist/cjs/smoothly-app_101.cjs.entry.js CHANGED Viewed

@@ -9561,7 +9561,7 @@ const SmoothlyInputColorDemo = class {
 };
 SmoothlyInputColorDemo.style = "style.css";
-const styleCss$R = ".sc-smoothly-input-date-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks=\"border\"].sc-smoothly-input-date-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"].sc-smoothly-input-date-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks=\"border\"][readonly].sc-smoothly-input-date-h{border:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks=\"line\"][readonly].sc-smoothly-input-date-h{border-bottom:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-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-date-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"grid\"].sc-smoothly-input-date-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-date-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-h,[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-h>input.sc-smoothly-input-date,[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within)>input.sc-smoothly-input-date{background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-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-date-h.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .label.sc-smoothly-input-date{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-h.floating-label.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.floating-label .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder] .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly] .sc-smoothly-input-date-s>[slot=label],.has-value.sc-smoothly-input-date-h .label.sc-smoothly-input-date,[placeholder].sc-smoothly-input-date-h .label.sc-smoothly-input-date,[readonly].sc-smoothly-input-date-h .label.sc-smoothly-input-date,.sc-smoothly-input-date-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date{display:none}.sc-smoothly-input-date-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date{width:100%;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-h:not([readonly])>smoothly-input.sc-smoothly-input-date>div.sc-smoothly-input-date>input.sc-smoothly-input-date{cursor:pointer}[disabled].sc-smoothly-input-date-h,[disabled].sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date>div.sc-smoothly-input-date>input.sc-smoothly-input-date{cursor:not-allowed}[looks=transparent].sc-smoothly-input-date-h smoothly-input.sc-smoothly-input-date{outline:none}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));min-width:18em}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>smoothly-calendar.sc-smoothly-input-date::before{content:\"\";box-sizing:border-box;position:absolute;top:1px;z-index:9;transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-h>span.icons.sc-smoothly-input-date{display:flex;flex-direction:row;align-items:center}@media screen and (min-width: 400px){.sc-smoothly-input-date-h>nav.sc-smoothly-input-date{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));max-width:22em}}";
+const styleCss$R = ".sc-smoothly-input-date-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks=\"border\"].sc-smoothly-input-date-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"].sc-smoothly-input-date-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks=\"border\"][readonly].sc-smoothly-input-date-h{border:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks=\"line\"][readonly].sc-smoothly-input-date-h{border-bottom:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-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-date-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"grid\"].sc-smoothly-input-date-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-date-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-h,[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-h>input.sc-smoothly-input-date,[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within)>input.sc-smoothly-input-date{background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-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-date-h.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h .label.sc-smoothly-input-date{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-h.floating-label.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.floating-label .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value.sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h.has-value .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[placeholder] .sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly].sc-smoothly-input-date-s>[slot=label],.sc-smoothly-input-date-h[readonly] .sc-smoothly-input-date-s>[slot=label],.has-value.sc-smoothly-input-date-h .label.sc-smoothly-input-date,[placeholder].sc-smoothly-input-date-h .label.sc-smoothly-input-date,[readonly].sc-smoothly-input-date-h .label.sc-smoothly-input-date,.sc-smoothly-input-date-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date{display:none}.sc-smoothly-input-date-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date{width:100%;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-h:not([readonly])>smoothly-input.sc-smoothly-input-date>div.sc-smoothly-input-date>input.sc-smoothly-input-date{cursor:pointer}[disabled].sc-smoothly-input-date-h,[disabled].sc-smoothly-input-date-h>smoothly-input.sc-smoothly-input-date>div.sc-smoothly-input-date>input.sc-smoothly-input-date{cursor:not-allowed}[looks=transparent].sc-smoothly-input-date-h smoothly-input.sc-smoothly-input-date{outline:none}.sc-smoothly-input-date-h>smoothly-calendar.sc-smoothly-input-date{position:absolute;z-index:10;top:4rem;background-color:rgb(var(--smoothly-input-background));min-width:18rem;max-width:22rem}.sc-smoothly-input-date-h>smoothly-calendar.sc-smoothly-input-date::before{content:\"\";position:absolute;left:2rem;top:-0.55rem;z-index:9;transform:rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-h>span.icons.sc-smoothly-input-date{display:flex;flex-direction:row;align-items:center}";
 const SmoothlyInputDateStyle0 = styleCss$R;
 const SmoothlyInputDate = class {
@@ -9660,11 +9660,11 @@ const SmoothlyInputDate = class {
             }, onSmoothlyUserInput: e => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: this.getValue() });
-            } }, index.h("slot", { key: '36ae0a68c644b9a284b4c410c5358632590eaba3' })), index.h("span", { key: '8bac9164ec6d56039550d1da7d9f87dc27974383', class: "icons" }, index.h("slot", { key: 'ae050474e8f04c00d9e5634c8145b1f6f1317bdf', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '23fd42dfe6c7bfb16c6dbd0160c1d0e5604810cf' }, index.h("smoothly-calendar", { key: '90138ffd2f1e5662db92a273121934e7e3772b82', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, index.h("slot", { key: '36ae0a68c644b9a284b4c410c5358632590eaba3' })), index.h("span", { key: '8bac9164ec6d56039550d1da7d9f87dc27974383', class: "icons" }, index.h("slot", { key: 'ae050474e8f04c00d9e5634c8145b1f6f1317bdf', name: "end" })), this.open && !this.readonly && (index.h("smoothly-calendar", { key: '985c5869c42670ffc64f9bfb43846fbb0d29411c', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: this.value });
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, index.h("div", { key: 'af44bc25c46a6523246b3abef195ee0d503c99a9', slot: "year-label" }, index.h("slot", { key: '36093c68ef3aca415b59f32b0a29bcca18dee2ed', name: "year-label" })), index.h("div", { key: '59fa0e841ca01529ed8bcdf463d4d0e3b2e8fa31', slot: "month-label" }, index.h("slot", { key: 'be0b3f429e1cfcc97b9440ce13819742cef60e8b', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: '157268666c96f8bf5b63262902cb9ace1679f928', slot: "year-label" }, index.h("slot", { key: '89f400686f2f7665b750b0c7245504d28e5646cc', name: "year-label" })), index.h("div", { key: '89882b5b88c6b1e78a3618448709bf250c9abc79', slot: "month-label" }, index.h("slot", { key: '0b7369fd5f646a217d413ea90f2db6f06754fa42', name: "month-label" }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9676,7 +9676,7 @@ const SmoothlyInputDate = class {
 };
 SmoothlyInputDate.style = SmoothlyInputDateStyle0;
-const styleCss$Q = ".sc-smoothly-input-date-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"].sc-smoothly-input-date-range-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks=\"border\"][readonly].sc-smoothly-input-date-range-h{border:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks=\"line\"][readonly].sc-smoothly-input-date-range-h{border-bottom:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-range-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-date-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"grid\"].sc-smoothly-input-date-range-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-date-range-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h>input.sc-smoothly-input-date-range,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within)>input.sc-smoothly-input-date-range{background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-range-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-date-range-h.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-range-h.floating-label.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.floating-label .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder] .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly] .sc-smoothly-input-date-range-s>[slot=label],.has-value.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[placeholder].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[readonly].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-range{display:none}.sc-smoothly-input-date-range-h{position:relative;display:flex;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h:not([readonly])>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{cursor:pointer}[disabled].sc-smoothly-input-date-range-h,[disabled].sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{cursor:not-allowed}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:4rem;background-color:rgb(var(--smoothly-input-background));max-width:22rem;min-width:18rem}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>smoothly-calendar.sc-smoothly-input-date-range::before{content:\"\";position:absolute;box-sizing:border-box;top:1px;left:-7rem;z-index:9;transform:translate(10em, -0.55rem) rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;width:100%;background-color:var(--smoothly-input-background);border-radius:0.25rem;cursor:pointer}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{min-width:15rem;width:100%;background-color:transparent;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range>span.sc-smoothly-input-date-range{padding-block:0.5rem;padding-inline:0.2rem;align-self:center}.sc-smoothly-input-date-range-h>span.icons.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}";
+const styleCss$Q = ".sc-smoothly-input-date-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"].sc-smoothly-input-date-range-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks=\"border\"][readonly].sc-smoothly-input-date-range-h{border:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks=\"line\"][readonly].sc-smoothly-input-date-range-h{border-bottom:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-range-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-date-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"grid\"].sc-smoothly-input-date-range-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-date-range-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-range-h>input.sc-smoothly-input-date-range,[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within)>input.sc-smoothly-input-date-range{background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-range-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-date-range-h.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-range-h.floating-label.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.floating-label .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value.sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h.has-value .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[placeholder] .sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly].sc-smoothly-input-date-range-s>[slot=label],.sc-smoothly-input-date-range-h[readonly] .sc-smoothly-input-date-range-s>[slot=label],.has-value.sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[placeholder].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,[readonly].sc-smoothly-input-date-range-h .label.sc-smoothly-input-date-range,.sc-smoothly-input-date-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-range{display:none}.sc-smoothly-input-date-range-h{position:relative;display:flex;background-color:rgb(var(--smoothly-input-background))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h:not([readonly])>.smoothly-date-range-input-part.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{cursor:pointer}[disabled].sc-smoothly-input-date-range-h,[disabled].sc-smoothly-input-date-range-h>.smoothly-date-range-input-part.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{cursor:not-allowed}.sc-smoothly-input-date-range-h>smoothly-calendar.sc-smoothly-input-date-range{position:absolute;z-index:10;top:4rem;background-color:rgb(var(--smoothly-input-background));max-width:22rem;min-width:18rem}.sc-smoothly-input-date-range-h>smoothly-calendar.sc-smoothly-input-date-range::before{content:\"\";position:absolute;top:-0.55rem;left:3rem;z-index:9;transform:rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-range-h>.smoothly-date-range-input-part.sc-smoothly-input-date-range{display:flex;width:100%;background-color:var(--smoothly-input-background);border-radius:0.25rem;cursor:pointer}.sc-smoothly-input-date-range-h>.smoothly-date-range-input-part.sc-smoothly-input-date-range>smoothly-input.sc-smoothly-input-date-range{min-width:15rem;width:100%;background-color:transparent;--input-min-height:calc(var(--input-min-height) - 2px)}.sc-smoothly-input-date-range-h>.smoothly-date-range-input-part.sc-smoothly-input-date-range>span.sc-smoothly-input-date-range{padding-block:0.5rem;padding-inline:0.2rem;align-self:center}.sc-smoothly-input-date-range-h>span.icons.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}";
 const SmoothlyInputDateRangeStyle0 = styleCss$Q;
 const SmoothlyInputDateRange = class {
@@ -9778,12 +9778,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: '75cada2cb69af61886475a89b0504a2e870d3dc9', tabindex: this.disabled ? undefined : 0 }, index.h("section", { key: 'e7cd56a08bef39622d823a6f8c42eb07efb7fcf6', onClick: () => !this.readonly && !this.disabled && (this.open = !this.open) }, index.h("smoothly-input", { key: '8a28ae4f819d9d96d68324192c307b6f3a0109f7', type: "text", name: "dateRangeInput", readonly: this.readonly, disabled: this.disabled, value: this.start && this.end
+        return (index.h(index.Host, { key: '6221427932976677b0cd028157eeb19abc3d673d', tabindex: this.disabled ? undefined : 0 }, index.h("span", { key: 'efb16913d375660c519993cc72a13eebeff71b8a', class: "smoothly-date-range-input-part", onClick: () => !this.readonly && !this.disabled && (this.open = !this.open) }, index.h("smoothly-input", { key: '13641c21c3dec894783fe4ebcd95ad5218ac386a', type: "text", name: "dateRangeInput", readonly: this.readonly, disabled: this.disabled, value: this.start && this.end
                 ? `${format(this.start, "date", locale)} — ${format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, index.h("slot", { key: 'd3c4d72697955434ad7b2e83f2e5306aa1bf5646' }))), index.h("span", { key: '8bc35c4fb0f0f0d5601114941967153b2ac695be', class: "icons" }, index.h("slot", { key: '043a021470f3996d56db1c43f8d87c37838a5338', name: "end" })), this.open && (index.h("nav", { key: 'cf12a6ed45822c63deb0bedf5da82f617670123c' }, index.h("smoothly-calendar", { key: 'a8a04d7452018076566a4d42fb0d7a7facd0ba9f', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: '33f8ea6964b95fc02307e5252f90435774afc8f2' }))), index.h("span", { key: 'e2a67d368e37f8b61dc29f64d3b549c2e4d37451', class: "icons" }, index.h("slot", { key: '933e5726bae826674889433653efbc8287ac3258', name: "end" })), this.open && (index.h("smoothly-calendar", { key: '2abb9c1a4dd89cc6006da167927f5344b13ad8a3', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9794,7 +9794,7 @@ const SmoothlyInputDateRange = class {
                 this.open = false;
                 this.smoothlyInput.emit({ [this.name]: e.detail });
                 this.smoothlyUserInput.emit({ name: this.name, value: e.detail });
-            }, value: this.start, start: this.start, end: this.end, max: this.max, min: this.min })))));
+            }, value: this.start, start: this.start, end: this.end, max: this.max, min: this.min }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9808,7 +9808,7 @@ const SmoothlyInputDateRange = class {
 };
 SmoothlyInputDateRange.style = SmoothlyInputDateRangeStyle0;
-const styleCss$P = ".sc-smoothly-input-date-time-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-date-time-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"].sc-smoothly-input-date-time-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks=\"border\"][readonly].sc-smoothly-input-date-time-h{border:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-time-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks=\"line\"][readonly].sc-smoothly-input-date-time-h{border-bottom:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-time-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-date-time-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-time-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"grid\"].sc-smoothly-input-date-time-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-date-time-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-time-h,[looks=\"transparent\"].sc-smoothly-input-date-time-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-time-h>input.sc-smoothly-input-date-time,[looks=\"transparent\"].sc-smoothly-input-date-time-h:not(:focus-within)>input.sc-smoothly-input-date-time{background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-time-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-time-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-date-time-h.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-time-h.floating-label.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.floating-label .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.has-value.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.has-value .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[placeholder].sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[placeholder] .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[readonly].sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[readonly] .sc-smoothly-input-date-time-s>[slot=label],.has-value.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,[placeholder].sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,[readonly].sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,.sc-smoothly-input-date-time-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-time{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-time-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-time{display:none}.sc-smoothly-input-date-time-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-time-h>smoothly-input.sc-smoothly-input-date-time{--input-min-height:calc(var(--input-min-height) - 2px);--smoothly-input-border-focus:none}.sc-smoothly-input-date-time-h:not([readonly])>smoothly-input.sc-smoothly-input-date-time>div.sc-smoothly-input-date-time>input.sc-smoothly-input-date-time{cursor:pointer}[disabled].sc-smoothly-input-date-time-h,[disabled].sc-smoothly-input-date-time-h>smoothly-input.sc-smoothly-input-date-time>div.sc-smoothly-input-date-time>input.sc-smoothly-input-date-time{cursor:not-allowed}[looks=transparent].sc-smoothly-input-date-time-h smoothly-input.sc-smoothly-input-date-time{outline:none}.sc-smoothly-input-date-time-h>nav.sc-smoothly-input-date-time{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));min-width:18em}.sc-smoothly-input-date-time-h>nav.sc-smoothly-input-date-time>smoothly-calendar.sc-smoothly-input-date-time::before{content:\"\";box-sizing:border-box;position:absolute;top:1px;z-index:9;transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-time-h>span.icons.sc-smoothly-input-date-time{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-time-h>smoothly-input[name=\"date\"].sc-smoothly-input-date-time{width:12rem}.sc-smoothly-input-date-time-h>smoothly-input[name=\"hour\"].sc-smoothly-input-date-time{width:4rem}.sc-smoothly-input-date-time-h>smoothly-input[name=\"minute\"].sc-smoothly-input-date-time{min-width:4rem;flex-grow:1}.sc-smoothly-input-date-time-h>span.colon.sc-smoothly-input-date-time{padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side)}.sc-smoothly-input-date-time-h>.icons.sc-smoothly-input-date-time>.smoothly-invalid.sc-smoothly-input-date-time{display:none;z-index:2;cursor:pointer;padding:0.5rem}[invalid].sc-smoothly-input-date-time-h>.icons.sc-smoothly-input-date-time>.smoothly-invalid.sc-smoothly-input-date-time{display:flex}@media screen and (min-width: 400px){.sc-smoothly-input-date-time-h>nav.sc-smoothly-input-date-time{position:absolute;z-index:10;top:4em;background-color:rgb(var(--smoothly-input-background));max-width:22em}}";
+const styleCss$P = ".sc-smoothly-input-date-time-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-date-time-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"].sc-smoothly-input-date-time-h:not([readonly]):not([disabled]):focus-within{outline:2px solid rgb(var(--smoothly-input-border-focus))}[looks=\"border\"][readonly].sc-smoothly-input-date-time-h{border:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-time-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px;position:relative}[looks=\"line\"][readonly].sc-smoothly-input-date-time-h{border-bottom:transparent solid 1px}[looks=\"line\"].sc-smoothly-input-date-time-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-date-time-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-date-time-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"grid\"].sc-smoothly-input-date-time-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-date-time-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-date-time-h,[looks=\"transparent\"].sc-smoothly-input-date-time-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-date-time-h>input.sc-smoothly-input-date-time,[looks=\"transparent\"].sc-smoothly-input-date-time-h:not(:focus-within)>input.sc-smoothly-input-date-time{background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-time-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}[disabled].sc-smoothly-input-date-time-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-date-time-h.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-date-time-h.floating-label.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.floating-label .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.has-value.sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h.has-value .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[placeholder].sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[placeholder] .sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[readonly].sc-smoothly-input-date-time-s>[slot=label],.sc-smoothly-input-date-time-h[readonly] .sc-smoothly-input-date-time-s>[slot=label],.has-value.sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,[placeholder].sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,[readonly].sc-smoothly-input-date-time-h .label.sc-smoothly-input-date-time,.sc-smoothly-input-date-time-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-date-time{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-date-time-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-date-time{display:none}.sc-smoothly-input-date-time-h{display:flex;position:relative;max-width:100vw;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box;min-height:var(--input-min-height)}.sc-smoothly-input-date-time-h>smoothly-input.sc-smoothly-input-date-time{--input-min-height:calc(var(--input-min-height) - 2px);--smoothly-input-border-focus:none}.sc-smoothly-input-date-time-h:not([readonly])>smoothly-input.sc-smoothly-input-date-time>div.sc-smoothly-input-date-time>input.sc-smoothly-input-date-time{cursor:pointer}[disabled].sc-smoothly-input-date-time-h,[disabled].sc-smoothly-input-date-time-h>smoothly-input.sc-smoothly-input-date-time>div.sc-smoothly-input-date-time>input.sc-smoothly-input-date-time{cursor:not-allowed}[looks=transparent].sc-smoothly-input-date-time-h smoothly-input.sc-smoothly-input-date-time{outline:none}.sc-smoothly-input-date-time-h>smoothly-calendar.sc-smoothly-input-date-time{position:absolute;z-index:10;top:4rem;background-color:rgb(var(--smoothly-input-background));min-width:18rem;max-width:22rem}.sc-smoothly-input-date-time-h>smoothly-calendar.sc-smoothly-input-date-time::before{content:\"\";box-sizing:border-box;position:absolute;top:-0.55rem;left:2rem;z-index:9;transform:rotate(45deg);width:1rem;height:1rem;background-color:rgb(var(--smoothly-input-background));border-top:1px solid rgb(var(--smoothly-input-border));border-left:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-date-time-h>span.icons.sc-smoothly-input-date-time{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-time-h>smoothly-input[name=\"date\"].sc-smoothly-input-date-time{width:12rem}.sc-smoothly-input-date-time-h>smoothly-input[name=\"hour\"].sc-smoothly-input-date-time{width:4rem}.sc-smoothly-input-date-time-h>smoothly-input[name=\"minute\"].sc-smoothly-input-date-time{min-width:4rem;flex-grow:1}.sc-smoothly-input-date-time-h>span.colon.sc-smoothly-input-date-time{padding:var(--input-value-padding-top) \n\t\tvar(--input-padding-side) \n\t\tvar(--input-value-padding-bottom) \n\t\tvar(--input-padding-side)}.sc-smoothly-input-date-time-h>.icons.sc-smoothly-input-date-time>.smoothly-invalid.sc-smoothly-input-date-time{display:none;z-index:2;cursor:pointer;padding:0.5rem}[invalid].sc-smoothly-input-date-time-h>.icons.sc-smoothly-input-date-time>.smoothly-invalid.sc-smoothly-input-date-time{display:flex}";
 const SmoothlyInputDateTimeStyle0 = styleCss$P;
 const SmoothlyInputDateTime = class {
@@ -9923,32 +9923,32 @@ const SmoothlyInputDateTime = class {
         this.changed = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'bc100a3a16b23b185cc59d1c705a70a346f1b921' }, index.h("smoothly-input", { key: '5e1724a9b77e76b99ef0cc70e764610715d4fa9e', 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 (index.h(index.Host, { key: '110fad76688155b7391a99f107051836de3fb0bc' }, index.h("smoothly-input", { key: 'c2881794dfb4d1ce5306a463f6828cb1c2c18652', 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() });
-            } }, index.h("slot", { key: '8af07feb44277cc000039d40b1a47232ce6840ee' })), index.h("smoothly-input", { key: '32ea8114a00b2679362deb5b9c56ee7988d604fb', 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) => {
+            } }, index.h("slot", { key: '606c86ae6e1ff705e4d1293185b9eee102460aaa' })), index.h("smoothly-input", { key: '95f01e634465706be56cbb9f41a950a4af028a57', 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() });
-            } }), index.h("span", { key: 'fdd4d43c7d14ffb5800dd473624a760a239f6cc8', class: "colon" }, ":"), index.h("smoothly-input", { key: '0c3ab905a5b2ac3331c3b060aeafcd6ca01ae40c', 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) => {
+            } }), index.h("span", { key: 'd9eafe1417718bc5b281fd8c336d038eff590e97', class: "colon" }, ":"), index.h("smoothly-input", { key: '990301fac08c807caa43b8f72bfbebbb59ed0221', 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() });
-            } }), index.h("span", { key: '12ad993d828a5c40436cfa669f196ff103da845c', class: "icons" }, index.h("smoothly-icon", { key: 'fd371a5a3af47b77655d289310259d3015633373', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: '7b785989dd182c178e704b9b902f7ca5a8d5965a', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: 'bbdb812ebcbe80e131f162cb98edcbd3f2441838' }, index.h("smoothly-calendar", { key: '86bb4cebaaf256cb23f62557a183cf29c3127a05', doubleInput: false, value: this.value ? TimeZone.DateTime.getDate(this.value) : undefined, min: this.min ? TimeZone.DateTime.getDate(this.min) : undefined, max: this.max ? TimeZone.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: async (e) => {
+            } }), index.h("span", { key: '614506b466e6c1313cd5f9920fccaecbe0381870', class: "icons" }, index.h("smoothly-icon", { key: '1801447c9164bdd52835d6ff223fc53e973b713c', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: 'c7daa1ee0d6d24e09cd7aa5382b34aa677430d5e', name: "end" })), this.open && !this.readonly && (index.h("smoothly-calendar", { key: '4561e20989e86de03f22a8905c86ba60ad723c7b', doubleInput: false, value: this.value ? TimeZone.DateTime.getDate(this.value) : undefined, min: this.min ? TimeZone.DateTime.getDate(this.min) : undefined, max: this.max ? TimeZone.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
             }, onSmoothlyDateSet: e => {
                 e.stopPropagation();
                 this.open = false;
-            } }, index.h("div", { key: '12e491eb754d1ebe1071c5f5ed2b53a9884ee2b8', slot: "year-label" }, index.h("slot", { key: '2e0d13fd569f443707327abc67d61584e1d06776', name: "year-label" })), index.h("div", { key: '82950620216b02db4735f08f0b244e31209fbb4a', slot: "month-label" }, index.h("slot", { key: 'd11d7a4b5fbf384afdabecc9f41cb343344469f2', name: "month-label" })))))));
+            } }, index.h("div", { key: 'eb520ce8fc5f76cbf66b7d1ad7d170257b9f2c1d', slot: "year-label" }, index.h("slot", { key: 'aeeb7a5575f437b9ef9d3f15f8f9aa20748d915f', name: "year-label" })), index.h("div", { key: 'b46f58b9fada00ec3d90698f5fd3f8ffdc10d318', slot: "month-label" }, index.h("slot", { key: '9a87a0820c5b86e4f0974e9063a9691f6310833b', name: "month-label" }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9975,14 +9975,14 @@ const SmoothlyInputDemo = class {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (index.h(index.Host, { key: '8eca5085c2cd1c049f973fc3660e505fe011cb8d' }, index.h("smoothly-input-demo-standard", { key: '2a981d4cc5d0aa0d3b2d4cf00f5fd02b6532ba8a' }), index.h("smoothly-input-demo-user-input", { key: 'd5cf6a5e4ec84c34d15aa6aa70db7814f1c6bc7b' }), index.h("div", { key: '4029596231233b85a8b5808d5b3a234a90738e6f', class: "inputs" }, index.h("h2", { key: 'ca5b785ca2352a398bc5d39e5ade8a57abc79289' }, "Calendar"), index.h("smoothly-input-date", { key: '103948cd715903bb4dbdca4cd65d645ec9759d11', name: "some-date" }, "Calendar"), index.h("smoothly-input-date-time", { key: '72c6cb49f3f7ac1999f8a6436f32ed35c990fe15', name: "someDateTime", value: TimeZone.DateTime.now() }, "DateTime"), index.h("h2", { key: '4957924da6ce45181769d2f023390463111502e2' }, "Date Range"), index.h("smoothly-input-date-range", { key: '4600c944c908626735780163e22c24029e81454a', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: '0806be3afdea28de4a1e10f2e4130926e184b69c', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index.h("smoothly-input-reset", { key: '07e0f760e9e406795bc70a350d07cc62a7de786d', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: 'f5ffd85a8fda6f8cbf0a0d7eb7a2df8a84394536', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (index.h(index.Host, { key: 'a37c4c185307235918c72e241e249b6138f44814' }, index.h("smoothly-input-demo-standard", { key: '35370fe7c191ac6a59b32fe1331bd0a581df3681' }), index.h("smoothly-input-demo-user-input", { key: '00c9815f8a68296c6037174e54bac77b1159f201' }), index.h("div", { key: '190f045bca16120c4b5f94ea8b89f9b25e9d3e74', class: "inputs" }, index.h("h2", { key: '2d788a85c60888f9ddf365558ca4c630af9996b8' }, "Calendar"), index.h("smoothly-input-date", { key: '9857a90cb2dc72ba556bf54460adc399c6034135', name: "some-date" }, "Calendar"), index.h("smoothly-input-date-time", { key: '17b8fa944cf5b12bba926342148313378e2afafc', name: "someDateTime", value: TimeZone.DateTime.now() }, "DateTime"), index.h("h2", { key: 'd5ec408c55874fe731a75013f7fbca47b416551a' }, "Date Range"), index.h("smoothly-input-date-range", { key: '1672436088451b5ffe5acabb7bd46fdb1076045e', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-01", max: "2025-01-31" }), index.h("smoothly-input-date-range", { key: '90f68210aa35add7aa56e33953ef061236597b9d', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }, index.h("smoothly-input-reset", { key: '30199ac98782e2fa17d934df5d16f70d8902d493', slot: "end", size: "icon" })), index.h("smoothly-input-date-range", { key: '6a5a65f8d641c08fa00db376c3406ef320e750a7', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, index.h("smoothly-input-clear", { key: 'ea0f780cac1bbd91e2f23792a0e9563ba4b31a22', slot: "end", size: "icon" })), index.h("h2", { key: '78bb9d81fd2f2dae86b3c903b2769be20807de25' }, "Date"), index.h("smoothly-input-date", { key: '7aaf3f7ffd6a0862a2a2d28a5d4094b65b0130b3' }, "Date"), index.h("smoothly-input-date", { key: '2145991358450d61e65f2cd0e0abcc9067b61784', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '4657bb164cf02e7c0d04110035b459bde302a0dd', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: '9565c757b720c2d3821ebecedf3e5df61e8fe4f4', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '8e575010ec44b3f9f8232357e6e17715ac4e6944', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '7f91042a395ffb0fc1a831f379a4c2bd78af4994', slot: "end", size: "icon" })), index.h("h2", { key: '2cc4948ee84ad942ebe612c709f595741a60ec5d' }, "Select"), index.h("div", { key: 'b5f5b389e9280f64dd295211a9e9bfde982609b3', class: "select-div" }, index.h("smoothly-input-select", { key: '12f26e8f0046a3e6526aa086ab4d467b804b37eb', name: "select-dessert", looks: "border" }, index.h("label", { key: '047be28f02f1a4e9d2218681ef316be6555d25ce', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: 'ccfb99a06feb5ca0db8359873b407206a007fa68', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: '5aa2fa9271e4a887e6692a59f6c09d93c7b36935', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: 'e04fdaae47ea615d41a2b6a5663cd6197dd14571', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: 'f816f49f806f0a97c9c30e9ce6df0f2643a38a71', value: "4" }, "Cookie"), index.h("smoothly-item", { key: '9aada5007c7f4bf07adeabda132a39b012a7868e', value: "5" }, "Croissant"), index.h("smoothly-item", { key: '1e5a46725a7f928e6bfcfbe74cd885c97f468dd5', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: '136a5ce5d41476f0286953a5a53ae22401ae99fd', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '3b9205e7e91564e4a5adad8783e17294f071fda5', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: 'cd6cd9703163db684b82123d276608b9209967dc', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '22cf141faccff6d889c8f47593816dfb57223ad5', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '2a3d0788b12de8b50a0a37872f3496b783548360', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: '8fdf1566ea2744befdb88e0f55aa329dbe89fc1c', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: 'e6844c5f4e62fdb42e29dcdc009f918c1b6f4995', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '52a2781331ade2f39812ffee322cc1a546a56972', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: 'cd283f041b19cdeb3ab194f9c1ae5e93d02234a7', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '9093b94cc40d8fe5384a7cf2da7162bfc396d24b', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: '2f9471b860bc412c256d262cc858fa82a7983448', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '8cd15eb854c6e963df4c3b3662a35db8744276ed', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '93a899ccfd2446f7e96b9acb19270042ed912aa6', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: 'e129f6ae7fe928950d1555f0281130c22457ddab', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'ea1c4c02eaf90062c44543bdf0ebc29bc80416b7', value: "folder", selected: true }, index.h("smoothly-icon", { key: '6f0bd86a0e3e055b3c18372a78af6168b9a07503', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '4e3211dd1a028391b4affb577379dd9fd51b16b0', value: "camera" }, index.h("smoothly-icon", { key: 'd57f56b01d45e6c4ef5b3a7a7c621c26c932acc6', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'a5aa85986d6851b6dd9e569bfe3e120c597df129', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '69d4797ade65df0c6624e6d1a4427eeb272728b0', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, index.h("smoothly-input-clear", { key: 'a60635141f09b88aae0704c1cf70d506bee12f3a', slot: "end", size: "icon" })), index.h("h2", { key: '23a3e7e1ea14abcdd820f13ace168c9231be5504' }, "Date"), index.h("smoothly-input-date", { key: '4aa22a6273dd8f5ee6f9471c57db0f1f8225cc7e' }, "Date"), index.h("smoothly-input-date", { key: '975a29e4973b76e7bd2b7a4503905e83604bcec4', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-input-date", { key: '1e733c371239a4973b69241794ef4bc368b72c19', value: "2021-10-28" }, "Date", index.h("smoothly-input-reset", { key: 'd625fb4b05633747f57242eb53a6580d0a48ec77', slot: "end", size: "icon" })), index.h("smoothly-input-date", { key: '667f9d143916730c36a49f7cad5d2545baf01d72', value: "2021-10-28" }, "Date", index.h("smoothly-input-clear", { key: '309c53a4124639bcc188d8efaa40c0027ba55134', slot: "end", size: "icon" })), index.h("h2", { key: 'a3726575d57baaec606015a5f0a8563d74db473d' }, "Select"), index.h("div", { key: '3adb0bea966d156cc890b6fe9af5f7d18c08b341', class: "select-div" }, index.h("smoothly-input-select", { key: '3ddb5dfd2723125abb260efb1688cb254c969563', name: "select-dessert", looks: "border" }, index.h("label", { key: '806896bae66c354339284594f4ce1587df1bd2ed', slot: "label" }, "Select with clear button"), index.h("smoothly-item", { key: '481b9c9ad17d5489da48bb7fc06019cc0f16fd88', value: "1" }, "Ice cream"), index.h("smoothly-item", { key: 'fe59e8162ea29a86b2bce02436779e603583bbda', value: "2" }, "Sponge cake"), index.h("smoothly-item", { key: '393a7567efaa5d9ab59b0e68add56c9091ad2255', value: "3", disabled: true }, "Disabled Item"), index.h("smoothly-item", { key: '89489833b8dd90bc074ed5528f0098335998c5cc', value: "4" }, "Cookie"), index.h("smoothly-item", { key: 'a16235e961fb23f24cc2fd1dbef75bf916e7adcd', value: "5" }, "Croissant"), index.h("smoothly-item", { key: 'b12828a0a95cd1d8829c025a62fa1eccde4551a6', value: "6" }, "Chocolate fondue"), index.h("smoothly-input-clear", { key: 'dfddb8940a4a31ab2852125cc27087ec0a0282af', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '782272cc9aaf11e6e019f84aebf9a7515c7b8922', multiple: true, name: "select-dessert-multiple", looks: "border" }, index.h("label", { key: '8c35f02f401b4fed52fc7789117ae55d43fd60b1', slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { key: '17ec60dd7ba67202f9045914fd7bfd258fa96358', value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { key: '8a69aaea39e1dea733dc1d105d3801525e9c7b81', value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { key: 'be9cc7ed28577cb9afc4d4e12bd4da2f3e8867c0', selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { key: 'd32906310ad7598dc88947d730a70f76dbf423cd', value: "croissant" }, "Croissant"), index.h("smoothly-item", { key: '497fc89b4745e8a202c280afeb5e48001399bc5f', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { key: '637a80a1b24db1f52f3cd114fa866c0b9013111a', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '67b95ef6d630b4890be85995b1a765a3abd6f519', name: "spirit-animals", looks: "border", mutable: true }, index.h("label", { key: 'a999e61c9f6400e65fef2420b349c72ea5a44b96', slot: "label" }, "Select or add new options"), index.h("smoothly-item", { key: '52e8bbe2db4a40b9f45f437e71bbd143374fad7b', value: "manatee" }, "Manatee"), index.h("smoothly-item", { key: '1b320032388fa3b03bd8b76004606033dfb5a91d', selected: true, value: "cthulu" }, "Cthulu")), index.h("smoothly-input-select", { key: '0effb3dbc9a18909dff9ea025828a366ce8ff17e', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '41ada3c8b817f6c126a83fd1a8baaf54645afffe', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'c3c9f9fffc4edd7082f719e3d1396174193f1eca', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '1d2733e288c237e78df51997d21e2b6c6ec4fa57', value: "camera" }, index.h("smoothly-icon", { key: '969429855211e1a8a5b163a114d389506bf38ac4', size: "small", name: "camera-outline" }))), index.h("smoothly-input-select", { key: 'f0848d77bab987602c38a0401899f9c1d928b41c', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: 'a920b26dab48cdffed61e28753fc71f7eb8dbcda', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: '7c45606efbbf88f4841b5eb5071ecd51f32b7a93', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '651ebb10ab71243b641d373838183559abb44046', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'd177ac91aafc330fc953dbc034d6d1aa9b9b5722', value: "1" }, "January"), index.h("smoothly-item", { key: '9233a045fa9f8d4eee8b75b4718274186b6ca92c', value: "2" }, "February"), index.h("smoothly-item", { key: '42240bee2c1d1e2a2ee3839b31481b2aa346e8eb', value: "3" }, "March"), index.h("smoothly-item", { key: '7e9e3c13119fd0613db656e581f3b9fe55ee3e7b', value: "4" }, "April"), index.h("smoothly-item", { key: 'b09a0ea6bf3eedaab1048448f0cbf95af6bf9f0a', value: "5" }, "May"), index.h("smoothly-item", { key: 'd209057ac70e38610f93339f57bb5da6e205c9f4', value: "6" }, "June"), index.h("smoothly-item", { key: 'f81d9b6b87fa1b138236bd149a31d361688727f8', value: "7" }, "July"), index.h("smoothly-item", { key: 'd8909b5c43adf58bdaa7dce5078b940664cf4f46', value: "8" }, "August"), index.h("smoothly-item", { key: '600c0667395e9116e1fbfed32bcc483961887173', value: "9" }, "September"), index.h("smoothly-item", { key: '9eb855fbf2f710d0cb427d5b04998af8a81f5f83', value: "10" }, "October"), index.h("smoothly-item", { key: 'c5f792bcf69b2933d96711de66eb4458134cb6cf', value: "11" }, "November"), index.h("smoothly-item", { key: 'd1e038e5c343c0d0c46d07d2dac25acdbb2d61b0', value: "12" }, "December")), index.h("div", { key: '11857a26b22fe9154c7350eb994674b13ca8487f', class: "select-div-row" }, index.h("smoothly-input-select", { key: '33be6706d1f52b6bfdfc2a4f5f2d51fc33fb1022', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '67ad3188ccec6edbac97865b8d4a2ff5230bbdde', value: "folder", selected: true }, index.h("smoothly-icon", { key: '3422f645f239ef19c377afe4d3218c364cf0fbab', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '1f44571b6551f714863c7e7eb5a1774c95a14685', value: "camera" }, index.h("smoothly-icon", { key: '31b8a68a0eaec11b262c8c85fac3ead5564a9b8f', size: "small", name: "camera-outline" })), index.h("smoothly-item", { key: 'fc35faf42856c2e1c76dcd408ff26e6c81299e55', value: "boat" }, index.h("smoothly-icon", { key: 'bc4650179d9e974ac443b0918c2195e2b83aac14', size: "small", name: "boat-outline" }))), index.h("smoothly-input-select", { key: '561637479d0267d2fd072ad29b016fd8021a1d46', name: "select-number", clearable: false }, this.numbers.map(number => (index.h("smoothly-item", { value: "number", selected: number === 3 }, number)))), index.h("smoothly-input", { key: '51f1c70d73fc312382dab3fd4523b98d779f495d', name: "name", value: "Sten Qvist" }, "Name"))), index.h("h2", { key: 'd3ef4e8c3a1d423a7ea78744c0042d8dab71d91c' }, "Duration"), index.h("smoothly-input", { key: '7a59352f05ff1bd6b472b5e3eaa41525dc12783f', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index.h("smoothly-input", { key: '387d5e488a8bbe85ab9d7ff3c57c677b98a476a0', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (index.h("smoothly-item", { value: char, selected: char == "H" }, char)))), index.h("smoothly-input-select", { key: 'd7f6e9ccd5f7deb1ed1495c7e137bd88f5e25462', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { key: '3a1cb0186724001cea13d1909b96f74be9bdc03a', slot: "label" }, "Month multiple select"), index.h("smoothly-item", { key: 'bc88ff9d4d99fcaa76269aff859b3d7a816c8897', value: "1" }, "January"), index.h("smoothly-item", { key: 'a0c5058c05f54ad444d3f6aeb1799b6c5290ce3b', value: "2" }, "February"), index.h("smoothly-item", { key: 'f7f03af426b3873387689041a1e73a286a7a9981', value: "3" }, "March"), index.h("smoothly-item", { key: '6c36db6607bfe7b003b7fa5aebe7b321b0c8adfa', value: "4" }, "April"), index.h("smoothly-item", { key: '72652ff36fbcde4922acf1a7c3ba786b40301038', value: "5" }, "May"), index.h("smoothly-item", { key: '20384363f6d937978c79ccfaf8592e2c7ff2afb8', value: "6" }, "June"), index.h("smoothly-item", { key: '4473a0e1e677fb4542904fb936be5ea98c702588', value: "7" }, "July"), index.h("smoothly-item", { key: '243bcc8ecc15ad4f44bd641976b4eb7dbb5aab8a', value: "8" }, "August"), index.h("smoothly-item", { key: 'c812c283c37eafb5bc61f69aa3256aeec13db012', value: "9" }, "September"), index.h("smoothly-item", { key: '462541bad998b5f70d6f72340e3dcca12947bba2', value: "10" }, "October"), index.h("smoothly-item", { key: '44774d9a5862a47d3c3c6f82079e98c139dfc398', value: "11" }, "November"), index.h("smoothly-item", { key: '41067a4148109271b9e9720dbcb0793f10287e71', value: "12" }, "December")), index.h("div", { key: '94a6d20d151fb35736a80fb26e85aaa1f34ce5b3', class: "select-div-row" }, index.h("smoothly-input-select", { key: 'd570d9e4a76a8893112c4e4b26f3003610feca4a', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: '78167fec49064159eee079ffc32bc6fd065c1ad8', value: "folder", selected: true }, index.h("smoothly-icon", { key: '23c952f842ffc06ddafe547f0d7e3ae75e304b9d', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: '7ffd66ece0b2b70944043a03f6863c45b0464fda', value: "camera" }, index.h("smoothly-icon", { key: '8e17e4659f2570bf66cdb0229cc2e6a691003998', size: "small", name: "camera-outline" })), index.h("smoothly-item", { key: 'bf193aa0f7f5892f7f337c6b6760a2d6abfc63bc', value: "boat" }, index.h("smoothly-icon", { key: '557d992d1051d261064ebbc6cfd5bfe04588d358', size: "small", name: "boat-outline" }))), index.h("smoothly-input-select", { key: '18b294880a86f29af40d190f69ed27efaa97c071', name: "select-number", clearable: false }, this.numbers.map(number => (index.h("smoothly-item", { value: "number", selected: number === 3 }, number)))), index.h("smoothly-input", { key: '60575408287bfdcb75221d2d7983b5f3e6c188a8', name: "name", value: "Sten Qvist" }, "Name"))), index.h("h2", { key: '2efd2d77fb08efd0bf366cd29d67e1925c26bf57' }, "Duration"), index.h("smoothly-input", { key: '37ea18e67b77d80500da8f8259e970c20924d818', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), index.h("smoothly-input", { key: 'a3c98220f0ce0e3fd8ac47f7ce5e4b5230ba595a', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), index.h("h2", { key: '3f54e207a4b8141f901a4ca93afbd0d8dca63211' }, "Integer with Min/Max"), index.h("smoothly-input", { key: 'fb0a7420b309d2d6d54bd8b4bfcb080b16511a8b', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index.h("smoothly-input", { key: 'd8f4bbc45750c957d8f93c9f92e36b8f74122ccb', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index.h("smoothly-input", { key: '9c122fc4053deba503e4e4cf552ea0f556604e3d', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index.h("smoothly-input", { key: '82d2d8ca00b5d7003812695fb2d5abb2f33b7110', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index.h("h2", { key: '48b36ca619f51da947855e1e5daed0fe4fcd4c61' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '730508d924489b86e06e438d61f037afe03038bc', 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"), index.h("h2", { key: '0a242030e2d87a7dbcbc6d92776bebdf005d2aba' }, "Identifiers"), index.h("smoothly-input", { key: '88171624261873a6fbd5ffd238b664e7353595ab', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: 'e237e4448c711207edc805756d213a6f3b823547', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '17068bfd4b048591fcffca4974b1a345c0b30b53', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: '1c78073c482d537a006551b6e6c3ab2aef605bd7', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'af5490d3f6c137e0fde75c328041b88be044fe33', type: "identifier-camel" }, "Camel"), index.h("h2", { key: '3d5080306ddb1384c2698ac7d6ef55f8955d0e24' }, "Input Alternatives"), index.h("smoothly-input", { key: '668782e103f580273e4bd53c405d9484481ffdb6', type: "text", name: "name.last" }, index.h("smoothly-icon", { key: 'a403f42ce3f499497562796dbabe515c00dbce61', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: 'dbf6a47acfd072a18020a80b377c61752918fe32', type: "text", name: "name.first" }, "Last Name", index.h("smoothly-icon", { key: '976c54b6f8350da7f5b01c1f560a91694137e3e7', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '316fa17d39c5853d15b877fd7e80e9e204852dc6', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", index.h("smoothly-icon", { key: '75599cba8c2f5cbd5b6f12ce98687c7d221f92bb', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '3f76beb14de0460ad9147a97af335b104cc8ec1e', placeholder: "test" }), index.h("smoothly-input-submit", { key: 'a56cb9fa8784ed974e2fb40c4fe2b342d83b5bcf', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: 'e1a582c272e9d20758234c4984eb0b453e0e6f8b' }, "Smoothly checkboxes"), index.h("div", { key: '85a0c58f42a18af1b6bccd5cd9454c1dd5c6b49c', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '2ad493d6781c7f69339dcedffdfcaaba06bbb432', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '0c088eb9ac9cd8a60b6b7e694c18b7039fe6db41', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '754bd934f2957392cee2280b42f2d52044921000', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '742a9fcda061b330b582982476d197791724bfaa', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: 'df629e531eef747d1f33b94d62bdf6dff6cba527', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: 'affdad70764bc35351d093efe6a3c75350933984', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'f4f77227045d210881096e69bac51afe6aa5f415' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: 'f6d950f5bc69e4368976bde976f372c048aa50bd', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '4c89b5bb8ed1f9e1cf9901400a1be6d8a37e74b6', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '2edb666548cb40aae10cf34b58bca819c9afe7bd', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '40545d8c6f923e3ef26f809376203fb200bbb939', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'b435f94dd688bf4701707411f957f2362062c9fc', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '02fd6e991adbe2ea4dec0cbaa274b9a7cf13e2d1', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '064fea584a864151a371131ce008cb22461cde19', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'aa5fdaae17b110e952f959253921c0385eb363e3', name: "radioSecondInput" }, index.h("label", { key: 'dc06ed17533eb97afabfb75f7971bf65467cd3b9', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '52af1a7bd4cee4aa2351cf9b13d0868c92011c4f', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '34d73d444fda070b41340202d265c1f6ca352ce9', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '6685c9d0a6f7dc231d02e8c220c7e802a408477d', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: 'c77154f732d674761e3c2054c743f1c0d6f7c048', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '67b2559ac15ac1ae5559d261a1b980e95d5d0765', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '6b631e9d66e8b78ced8433440eff925ef618d93b', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: 'fef41e64a3180217ad4dde7604fd811c9f9b7d68' }), index.h("smoothly-input-color-demo", { key: '457a996834344fa00c9d7d0afdd304e543df675e' }), index.h("smoothly-input-price-demo", { key: '23762bdd1fb1f03de754d176ad008122199fd69c' }), index.h("smoothly-back-to-top", { key: 'dc25a5a529a8999e2fc776e0dc6cec912fa291ea' }))));
+            } }, "Duration"), index.h("h2", { key: '6f1df0f6232e4aedf346b68d93fc0565ba991656' }, "Integer with Min/Max"), index.h("smoothly-input", { key: '4c367208b79ca80e9efcd8981f0efa3399b432d7', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), index.h("smoothly-input", { key: '335e0533082db4c1ba5a520c39b007263031d062', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), index.h("smoothly-input", { key: 'cee8162f497f0a66fe31159ef5a882fe0e6b45ba', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), index.h("smoothly-input", { key: '86cc907a85c13c34755dad6271696c773c219fdb', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), index.h("h2", { key: '4dc21cfd394e5987d8640561f216da536ba45ff7' }, "Invalid text with warning icon and tooltip"), index.h("smoothly-input", { key: '101920eba1b96a055e662b7de1d34b52253dfec2', 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"), index.h("h2", { key: 'd59df0dd3adcd87850bfbecf763d3585f277f237' }, "Identifiers"), index.h("smoothly-input", { key: '0eb53173e428f4b37a33b34a04bdac777e8f2bac', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '4641f31db02656a2fb660b4c7655eb684825571a', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '1ee35beb82336a2887ee46a93448a40d0b672328', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'a974746240c25a4bab81e50cedb00817434a3064', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: 'a03a327bd20269a2575d68569fc243b728b90610', type: "identifier-camel" }, "Camel"), index.h("h2", { key: 'f9d96cf362c218de5fc1860a1fbfc8d0f8864884' }, "Input Alternatives"), index.h("smoothly-input", { key: 'a396f2394b1f03a59061ca8a1bb648c8965a8967', type: "text", name: "name.last" }, index.h("smoothly-icon", { key: 'd1915b58cebf5350332453728372fb54a2e0fe1f', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: 'cec12a8278ef5ce55af9a932fc9b191adedde5a2', type: "text", name: "name.first" }, "Last Name", index.h("smoothly-icon", { key: 'c46ea47d79ebbf984834be089c391578ae666b97', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '77a953e428bc0b6778ca992c192371870b1761c0', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", index.h("smoothly-icon", { key: '6c6dfef02315b23dc4f26ecfb6c8c7a6534e915e', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'b49b05a937adf7b1a12a0fa91f38f1c82a1770e1', placeholder: "test" }), index.h("smoothly-input-submit", { key: '2ff697a871564ed41e0e5dd3dd4962085a3fd8af', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), index.h("h4", { key: '75a4982fca6e9e11ecf32cabc3a850d5be7ae59a' }, "Smoothly checkboxes"), index.h("div", { key: 'c3c6aef223b27239712f6e1743f35628319e3563', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: 'ad410e2aa6db23cb2f57a71cfb85d6e617987dea', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '41331624a549dd6d81132a012e0204ae89c5e2fd', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: 'e0253c7c7814d7c0feb216abbf98a047e6f252eb', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: '1c4a05e7e42fcbb4a051893c0916fa078422c931', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '404eb07022c7a50bf85c910adecfd88b94aca33f', size: "icon", slot: "end" })), index.h("smoothly-input-checkbox", { key: 'c1c645a7e99162d86d3ac27a238c0b05113bf75d', name: "third-checkbox" }, "3rd")), index.h("h4", { key: 'f177006014b94d0ca0e57576ca5646448eb66154' }, "Smoothly Radio Buttons"), index.h("smoothly-input-radio", { key: '941a0bcd0c7d90f748669615fc97c1e8a0c16853', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: 'fb4989a4d344aebc21d125df91b1aeb80ec9b857', name: "checkmark-circle", slot: "start" }), index.h("label", { key: '99f84e0b30e1625b83e929ed134531ee5d5ea754', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '036fe6225f6f5fdb39639e933724408ec91b76f5', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '3debc98db975a057708f0979a4ed41977a3b1f2f', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'ebd08de052eafd35f8e5cf36e1b76c1f54e5dd69', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '76e21de13255bdbb1deb48ca2ce67ffbfc61e8ca', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'c1776ffc02b87488e958990950e5f73ea73eab40', name: "radioSecondInput" }, index.h("label", { key: 'fd6b3472f370975354d2261506e080f7c4ca53e9', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '79e9f0bf80331ef65314ddfea48deac610e5d8f2', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'a60ead4014e09967c0d160222ad4f6210efde84e', value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '209c85b051a022066d70609805829f665c9fce78', value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '15a78b14395c99b10c411106c98bfd562d0f3b80', value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: 'a8af4e97336149ca6d8dd49d75c8bc4c19b74b56', value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '449cee1c0060467b01128cf68fce31254642f164', value: "sixth" }, "Label 6")), index.h("smoothly-input-range-demo", { key: '88a37707570731e405269b07696f362388e7250f' }), index.h("smoothly-input-color-demo", { key: 'a214dc3e1a5c570458a14be24423da4367717625' }), index.h("smoothly-input-price-demo", { key: 'fb69a0076db26166fdf8087a5924067e24758cb9' }), index.h("smoothly-back-to-top", { key: '8c58acbaedc260c563cc76d5c3db6c9a16599fa4' }))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -10010,7 +10010,7 @@ const SmoothlyInputDemoStandard = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '3138c0c2a7d5a9867caf20cc7913364d458a3812' }, index.h("div", { key: 'be1a11b5c328b095c816622365bfb7bddf6ee5e2', class: "description" }, index.h("h2", { key: '51938a9ee35f7e188f62e89336de0a4868e8b97b' }, "Input Standard"), index.h("p", { key: '1238eede12db79b214f1fad9124ff8ef8072ec60' }, "Height of input should be ", index.h("code", { key: '143bb6d3c16df47e24442931b20a80815f570e15' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '4dd2662d2b1595279ecc7b1bd6245dfea8633865', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '7dbea4487f3ea6ea0d12a060b65edc2b45d2896f', name: "color" }, index.h("span", { key: 'd1bbe2953412676d763b4445757da219c5bbe6fc', slot: "label" }, "Color"), Scrollable.Color.values.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '9f11b80a1b98f6eacdd5500d5fbbc2fd14feb6e8', slot: "end" })), index.h("smoothly-input-select", { key: '69a136535e72a624aac1cf80e7ea611cce0db766', name: "looks" }, index.h("span", { key: 'c24b2b39ae388dffad74bd608b088d64dcf96502', slot: "label" }, "Looks"), Looks.values.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-range", { key: '85dba083c3efb9f667f95719dc0c01e48546b1f6', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), index.h("smoothly-input-checkbox", { key: 'fc897b5811b0d1e8d22405a0a8d0ce4ab13bbddc', name: "readonly" }, "Readonly"), index.h("smoothly-input-checkbox", { key: '21d061131cc5626188661a0adb3b0ab2a1424f83', name: "disabled" }, "Disabled"), index.h("smoothly-input-checkbox", { key: '46fb005ff971f613f3ff9653029885b4bda08c34', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: 'e9e5cb2e2707276bbe8e92c660ac285d93f80ebb', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-checkbox", { key: 'd97b6347057812b8650ac914c7a229900aa9d21f', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input", { key: '0a37b9ec99aa52c6c5b6cdcb3fd38664d8129fcb', name: "placeholder" }, "Placeholder"))), index.h("div", { key: '9e3f173174cfaf4e2eab253a6ab7a3d78ae4ce76', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '329ef1983e54358f150c393ce5be5d240e7935ab', class: "width" }, "width: 100%"), index.h("div", { key: 'aee591ed73b18eb7656a642ee93e78506d750985', class: "left-padding" }, "padding-left: 0.5rem"), index.h("smoothly-input", { key: 'b0e7d6922dbcc5570332cc5a91fe20e0459c2950', 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 && index.h("span", { key: 'cd51d26590bcbb2ae25e2bef6ef241f396e3cced' }, "Text"), index.h("smoothly-input-clear", { key: '415d27c36710e17ee479831a0f4f5f5c413301f8', slot: "end" })), index.h("div", { key: 'ae574972e9dcf571036c8c4b35950317cbdb09d7', class: "height" }), index.h("smoothly-input-select", { key: '335c980ac6dac8edcfd6308c91a23f6b865cb66a', 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 && index.h("label", { key: 'aa9657fd6079de60607fd522a50e2d50df2d5dca', slot: "label" }, "Select"), index.h("smoothly-item", { key: '3d75ec566f7be10e85daf2841aa46c16945d3e12', value: "1" }, "January"), index.h("smoothly-item", { key: 'c5acfe4618783632cc4c0d4f365c70000c584cc4', value: "2" }, "February"), index.h("smoothly-item", { key: 'e440c20f570c25927bab736784660f6397e767a3', value: "3" }, "March"), index.h("smoothly-item", { key: '50cdc76482f03ee2575595f6186e21a1f481b326', value: "4" }, "April"), index.h("smoothly-item", { key: '3b37e8107b0676e62d50ef7968b5c71ebbd84b8d', value: "5" }, "May"), index.h("smoothly-item", { key: '07c06a1ce653b9bb09b8db1f3a4de6a4db6fc475', value: "6" }, "June"), index.h("smoothly-item", { key: '4d333aeaca77cc569dc22a20a086214407272904', value: "7" }, "July"), index.h("smoothly-item", { key: '90a820f098b5927b6c329aec50aa8e09e00d97bf', value: "8" }, "August"), index.h("smoothly-item", { key: '4a1cd31364e5f6b4ab546f17e1c9973a13a811b3', value: "9" }, "September"), index.h("smoothly-item", { key: '5dcf14641bb1d6fe0d93d743027e1f86fe029e4a', value: "10" }, "October"), index.h("smoothly-item", { key: '6548e5330bcb99442db12aa5f7dd34f43fe6b41b', value: "11" }, "November"), index.h("smoothly-item", { key: '0d0be1679aebaedb0d4be188daf3ba6bd54c9dc7', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '4b57381439d017e671044a96a075dc793a9a3f99', slot: "end" })), index.h("div", { key: '51ffaddf720d92ae479ee0384d3ded52326c5551', class: "height" }), index.h("smoothly-input-checkbox", { key: '132d7cffb2787c91e1d0b877d557fd8d575c9d4f', name: "checkbox", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check"), index.h("div", { key: '10e594055dbe2774366d8493ac7fffe65002e868', class: "height" }), index.h("smoothly-input-radio", { key: '3eee8bf207e49047d3afd697babd52f92ce950be', 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 && index.h("label", { key: 'c32200239b884e4aca99d5a7475e02661cd18206', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '0f44d10016c61955fd939a0e8907deda87ed25e7', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'f03f8948d0f28f2f216ef764eab0c2caab62ec3b', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'ba0d78216d05df9f1fc2a9e8217dee3e791a1be8', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '9ff5cae5528943585ccb788429a1e1ca7895f3be', slot: "end" })), index.h("div", { key: 'eea2613bfa7f8b36cc27e6d3bd92ab28f7f86562', class: "height" }), index.h("smoothly-input-file", { key: '057faff6c0bf578b2df6be51de474d809abb3a96', 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 && index.h("span", { key: 'a455a704931d07cf68ba7bd84be5dd2ede55ee4e', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '6d410486d191992ee29700c373f0c0c69e3d32fd', slot: "end" })), index.h("div", { key: '86d60efe5926b1ac801f34e1a0bbf5dcf787ff44', class: "height" }), index.h("smoothly-input-range", { key: '5fc459837bf1919e2aac2c9280305e03e7b97a0b', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, index.h("smoothly-input-clear", { key: 'dce1461f5e2378d57b82fd36007b39bd46de658e', slot: "end" })), index.h("div", { key: 'ee7da922c1d64ae5658a7061ba5d913088e66c80', class: "height" }), index.h("smoothly-input-color", { key: '47bd37f4e21d3e8556103641ddd8e76c119194ed', 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 && index.h("span", { key: '3c05e351348fda11491bc749eb8beaa8cbc4fb7d' }, "Color"), index.h("smoothly-input-clear", { key: 'ec1843444cdea40be386e57f42bf588164a2f38d', slot: "end" })), index.h("div", { key: 'b3d9daabd07cc25333c3cb7efbcf13fb39731f5f', class: "height" }), index.h("smoothly-input-date", { key: '41d096268d196f5b4d22ff4f9efa2fa876dcca2a', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'a31dca9643aab4f87296c372d09ae7fc64a5c6ab' }, "Date"), index.h("smoothly-input-clear", { key: '91116b9ce2c390d7ea715a29cec1874cb6adad32', slot: "end" })), index.h("div", { key: '4a108a100ca992b1df1413f7760710687ab65929', class: "height" }), index.h("smoothly-input-date-time", { key: 'e6c4475e0b65bf097ed7f3d88431e9b32bff247c', 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", index.h("smoothly-input-clear", { key: '31da599e9a11d92c26adb99586a8a7fe973d4237', slot: "end" })), index.h("div", { key: '38f80abf37b64f8d30d6a332b06dcf7cf5bb109c', class: "height" }), index.h("smoothly-input-date-range", { key: '445e2f00bb50aeccb3150d64c8ef941ef0e534dc', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, placeholder: this.options.placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '37feae59590230fc77df587d60c5625ec77297a9' }, "Date Range"), index.h("smoothly-input-clear", { key: '466984321d51eca9c8170364dd9c8d5fec56e57e', slot: "end" })), index.h("div", { key: '0bdefd20c2ed6d5b1f872a5c2b5ed043d6ef968b', class: "height" }))));
+        return (index.h(index.Host, { key: '0121e413864bb82330a18c9206f1e7149a44eb55' }, index.h("div", { key: '4dee30d73a77f872d01d9d510be08decff44e2b5', class: "description" }, index.h("h2", { key: '1216f91eb727928b14d11d08d78d0421cc684b96' }, "Input Standard"), index.h("p", { key: '3916bcb833ca3a0f334d536125aa3469d25e0a70' }, "Height of input should be ", index.h("code", { key: '2682177f7c015e79bd62b7d89b2b7059c447b1fb' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '03fcd341148a8e96a9d3606e76a2d9dee5b17375', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: 'd4cf6064a2a6fc4eb8804d8cd4618e260eedb053', name: "color" }, index.h("span", { key: '89c1095f7c258b2b9c650f37689ce93a432d034c', slot: "label" }, "Color"), Scrollable.Color.values.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '88177152e7994128427527c7a4c18780160ef8c3', slot: "end" })), index.h("smoothly-input-select", { key: 'bebe9e1e954ce370f257a3cf9e1a3821927786f3', name: "looks" }, index.h("span", { key: '8709ae5faa104ad8ab082ae862eb5f27ee2786cb', slot: "label" }, "Looks"), Looks.values.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-range", { key: '4c6cf40cb29eda4aa22c7f2185f3ab7425e39c17', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), index.h("smoothly-input-checkbox", { key: '21e6b06e5a1b0caab245720d2dc1eee5e1f9acd2', name: "readonly" }, "Readonly"), index.h("smoothly-input-checkbox", { key: '56280a48671681907cdcd5903732565119ccd707', name: "disabled" }, "Disabled"), index.h("smoothly-input-checkbox", { key: '0154ba49771bfba0fdc7112a71a4d317dc7429e6', name: "invalid" }, "Invalid"), index.h("smoothly-input", { key: 'ecb5a9c034b3bb16a8b151018c4420f63bb17f23', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), index.h("smoothly-input-checkbox", { key: '08d5823bd4f53a8e52972fee2204f849d7e90140', name: "showLabel", checked: true }, "Show Label"), index.h("smoothly-input", { key: 'ed4d99997e67ffe633d33e3a3c6a7601dcc0162c', name: "placeholder" }, "Placeholder"))), index.h("div", { key: 'de8a189dacd5f75fac307e4f22057c979358f5a7', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '9f73c8aa8bac75278a5300b51b8bfb50fdd0dcd7', class: "width" }, "width: 100%"), index.h("div", { key: '17db242f8227c2ca333514dd50d40a5a92649ff6', class: "left-padding" }, "padding-left: 0.5rem"), index.h("smoothly-input", { key: '332f9928f334d44fc7d89ac16ca1bea9fa86e1cc', 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 && index.h("span", { key: 'fb7ddf5217c875ef753a0b3e2696ee01fd6db972' }, "Text"), index.h("smoothly-input-clear", { key: '8bc763e0940fa5c4556715b884e3cd5c8f7bdf3a', slot: "end" })), index.h("div", { key: '0f0f8376bfc8e288ada8ef7fd9acf4748df79469', class: "height" }), index.h("smoothly-input-select", { key: '96d46a61ed1c02a3e8d5fd4c060c205f0b5669f6', 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 && index.h("label", { key: '009f566ace46ba317594b1f1b73b17e1a410dd2d', slot: "label" }, "Select"), index.h("smoothly-item", { key: '208764401922cbc268e44a547ec31a9a5b9e2fc5', value: "1" }, "January"), index.h("smoothly-item", { key: '9dff033d5b83a6e2fa14f739326ae9cd7be7f8f1', value: "2" }, "February"), index.h("smoothly-item", { key: '4bb98a76f4be3c01687068f14b7eb13137b9bfc7', value: "3" }, "March"), index.h("smoothly-item", { key: '008c5fcf4db87f1eb5220fbefead32b4406f11c2', value: "4" }, "April"), index.h("smoothly-item", { key: '3fa61e554501d93b854c82329eb2779f4d29bcbe', value: "5" }, "May"), index.h("smoothly-item", { key: 'e63292228fa54c36aba03ab4d512d6fbeb6be6af', value: "6" }, "June"), index.h("smoothly-item", { key: '9a43c644f373295ab84416d12598255a184fcdbb', value: "7" }, "July"), index.h("smoothly-item", { key: 'd7ddef84f6a3b701397a251e0c8bfb2f5694fa84', value: "8" }, "August"), index.h("smoothly-item", { key: '78be1b785221b60a77af5457f47960aab373a128', value: "9" }, "September"), index.h("smoothly-item", { key: '1dc9c48908821127d8c0c10128fb52c8ee7c9b7e', value: "10" }, "October"), index.h("smoothly-item", { key: '6a2d4f60b46d11c51ce1ccf714631cb9436afae8', value: "11" }, "November"), index.h("smoothly-item", { key: '182d79157dc0a3b3368a359488b83922cb231aee', value: "12" }, "December"), index.h("smoothly-input-clear", { key: 'f4e404c23c9bd0172137d95ec1bb6dccc35f9bb2', slot: "end" })), index.h("div", { key: 'fd70e3ddb843a2548791b484e99584b0596d9037', class: "height" }), index.h("smoothly-input-checkbox", { key: '3a2a02d38ce8bdfda309515201275daa96a0673f', name: "checkbox", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check"), index.h("div", { key: 'c2da8ac2bb4cdb951cc04b200336aa4dfbab4200', class: "height" }), index.h("smoothly-input-radio", { key: '74d529deb82a85aa6a891049400149c950c68ff5', 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 && index.h("label", { key: '8d6241e9725737268e6c70c8767e4c9b8061e302', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '1bf67ef0a2ef87d20fea3888a023096d7b22ae6c', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '91ac8b8da15f2cf9e477c1207297e7a3756a0f5e', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '89f4a35c02718f41caab113babb485a4910f804f', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: '4995d2df82858db490336375d18309fb1a96d164', slot: "end" })), index.h("div", { key: 'df85bf9bb44803dba396f390c53aa8a8fcce9a91', class: "height" }), index.h("smoothly-input-file", { key: '4f693aa901f1b770420c280053aa343d56cea1f1', 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 && index.h("span", { key: '13ddb873eb51b5f5525bd96ae44c0acc3fed2348', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '80e1834b8b03d430278da7a6aad1d0fb5d27251b', slot: "end" })), index.h("div", { key: '3dec3ea33af8b715b3aeb3e838bcfde56331c44d', class: "height" }), index.h("smoothly-input-range", { key: '3dd3177c9926fb81bb67852003df2bcf265e8201', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, index.h("smoothly-input-clear", { key: 'dfac5f66e11d152ca822d2800a0d00ca8eb7a8cd', slot: "end" })), index.h("div", { key: 'c42b10ccbb3b22f03d840064ead7f5a37d625e87', class: "height" }), index.h("smoothly-input-color", { key: '3336313284c56365f1928c26bc606a9423bedc14', 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 && index.h("span", { key: 'e8560a3b7df414541bf7217dfd06c5626072a922' }, "Color"), index.h("smoothly-input-clear", { key: '34dc1bee042c4f677e54c281f163bf3339515a09', slot: "end" })), index.h("div", { key: '8fd212de03f3e7a5836e8f35f9226ec01e0c2c03', class: "height" }), index.h("smoothly-input-date", { key: '386e27cb3da2a18bd21c8a7bc646dd894a9abc11', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'a58023803a722c0a1d0b5347eb6317775a020e90' }, "Date"), index.h("smoothly-input-clear", { key: '74df887987321cd9b21630857e9691332dcd6e6b', slot: "end" })), index.h("div", { key: 'ab9bd5a71cdf591205225d93496ffc26c7f9fa96', class: "height" }), index.h("smoothly-input-date-time", { key: '79fa345a9d4ab886579d8634318dd2250ae89890', 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", index.h("smoothly-input-clear", { key: 'b23a22a8df7521e380e3d221ca3a48ff0630ab41', slot: "end" })), index.h("div", { key: '165bcaebe9330207be30466006b40370168bc3ad', class: "height" }), index.h("smoothly-input-date-range", { key: '167395262090aebddf4d7c3b4267ca25d1ce769a', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, placeholder: this.options.placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'e98721bd4d7c0ba16c715c9f7ee2692a8d53a920' }, "Date Range"), index.h("smoothly-input-clear", { key: 'e16a8febecbd221d82e4aa77a29ae0ebc48f6a84', slot: "end" })), index.h("div", { key: '9941346e2caffe09f68ab851950676d01d31dd9b', class: "height" }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10039,11 +10039,11 @@ const SmoothlyInputDemoUserInput = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'ae3eb85c10e9f600c2797e43a598630cb254af44' }, index.h("div", { key: '50520b52f8a4753b1f0b71323e52e66a86201982' }, index.h("h2", { key: '05a09f8969fc436776d61f5920f154d1d304daac' }, "User Input Event"), index.h("p", { key: 'c1b3aeab9baab59832612ee205814441556ef1f1' }, "These inputs demonstrate how user input is handled. The ", index.h("code", { key: '3738c098ed392b3479708c7b83917a089f5eba46' }, "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).", index.h("br", { key: 'a39b028b3af7374f70c7b6e7ddbeb9beb0448b95' }), "Check the console to see the details of each ", index.h("code", { key: '7712a548ab24f94de1c3ee5d07ef07bdc1ff3262' }, "smoothlyUserInput"), " event.")), index.h("smoothly-button", { key: '8e8d5b52eebabc0cf2e5588455ff8928a289bf9b', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), index.h("smoothly-input", { key: 'e8465ae0fa9c32788e518e653ee51152c66131f8', 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"), index.h("smoothly-button", { key: 'ad09a088c36bd1f149f99be22c6055fdf08cb1b0', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), index.h("smoothly-input-select", { key: '77442278140c916e14c903412abc3a0b59aeba12', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index.h("span", { key: '169314f0e4944b3a7cc21210548acb1e8184e53a', slot: "label" }, "Select input"), this.values.map((value, index$1) => (index.h("smoothly-item", { value: index$1, selected: index$1 == this.selectIndex }, value)))), index.h("smoothly-button", { key: 'b8a7c14017c652e1e12ff9b1a8ed380ca1b9283c', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), index.h("smoothly-input-checkbox", { key: '6f10f7aac1d4a1ebc2e53cbbc1fcab6d76e8e0c4', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), index.h("smoothly-button", { key: 'c7293e70a5707dbeed3e915a448d10735f5dc950', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), index.h("smoothly-input-radio", { key: 'c581780a8d05d1cea48df5cd8733d3e1508444d0', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index.h("span", { key: '51cb5294f83c5d046b9b154ad6ccceec1ff39048', slot: "label" }, "Radio input"), this.values.map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, selected: index$1 == this.radioIndex }, value)))), index.h("smoothly-button", { key: 'cb1ed38f4364bb2ed2caa54285bb24f57f569f51', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), index.h("smoothly-input-range", { key: 'e67a51ebee7fb6a885edc25ee33e4bb1734739e6', 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) }), index.h("smoothly-button", { key: 'e2bb2c57d0c809adc994cf6e8afde4bc38094839', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), index.h("smoothly-input-color", { key: '86afbbda3796a1806838270760b4704b626d7173', 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"), index.h("smoothly-button", { key: '76c36046e4deab5fd66336ae2e2e6da341a3bdf9', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? TimeZone.Date.next(this.dateValue) : TimeZone.Date.now()) }, "Next day"), index.h("smoothly-input-date", { key: '5f3408deb2234dc4284f39b39382d3147d81b866', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), index.h("smoothly-button", { key: 'c7c0006ae09cda944e01263ca15ca5e40963506d', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (index.h(index.Host, { key: '720ba08eebfa29a3a667b8a9509fda85afa9b990' }, index.h("div", { key: '38a5084afa7ed71ed52556503ca397ee21f804c3' }, index.h("h2", { key: 'aeb33af8d583fdf95f1ffeafd00e0018fb4e5b65' }, "User Input Event"), index.h("p", { key: 'd88322298ebf04175dd799a2d2cf90d3d5e6b23a' }, "These inputs demonstrate how user input is handled. The ", index.h("code", { key: '912e36ca3030ad128bbae9d3781d95371847e80e' }, "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).", index.h("br", { key: '1ee8b2447d39e980eaab59ab16ba69f9e4e4c8a1' }), "Check the console to see the details of each ", index.h("code", { key: '690328aab2555f72a18f07a9c37399391393499f' }, "smoothlyUserInput"), " event.")), index.h("smoothly-button", { key: 'd51eb86e18cfe46c2135e1f5fb7d0f33137ada23', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), index.h("smoothly-input", { key: '4c45bd8be48db91cab29de3bc8ed427fc1299b78', 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"), index.h("smoothly-button", { key: 'c0da89770cd94848e34b100128500aebd8015d2d', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), index.h("smoothly-input-select", { key: '45d02812ff7caa43bcbf631de8a1a9fe858e20e6', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index.h("span", { key: '974f8a982049cbe089f73cf213ac3b3f15f3a664', slot: "label" }, "Select input"), this.values.map((value, index$1) => (index.h("smoothly-item", { value: index$1, selected: index$1 == this.selectIndex }, value)))), index.h("smoothly-button", { key: '0b9c6d34ddf90f305551c7af8e794c76e7675a44', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), index.h("smoothly-input-checkbox", { key: 'b941621793b3a8af431aa011ef4bc86183652564', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), index.h("smoothly-button", { key: '764ca30454dd3f20d191972cfcb3900bab73f6dc', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), index.h("smoothly-input-radio", { key: '6552f16df999a93e451471a63537bb228ef8327a', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, index.h("span", { key: '4d02040f062c306a443a84b485021f6fb3edccc1', slot: "label" }, "Radio input"), this.values.map((value, index$1) => (index.h("smoothly-input-radio-item", { value: value, selected: index$1 == this.radioIndex }, value)))), index.h("smoothly-button", { key: 'cd1130f13d161525092c7e9a97a34a38e13f27e7', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), index.h("smoothly-input-range", { key: 'b810cd958801b447b5231074d4393855eb701a8b', 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) }), index.h("smoothly-button", { key: 'cbe17b2d3212dac013404c29f8e77a994b0c805c', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), index.h("smoothly-input-color", { key: 'e811bebe403c7bf4bac5ea954d112f7079f7a9d7', 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"), index.h("smoothly-button", { key: '19446779ca16889731dcec646a912c186121212b', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? TimeZone.Date.next(this.dateValue) : TimeZone.Date.now()) }, "Next day"), index.h("smoothly-input-date", { key: '558cbaf1bc9ecb9625cb87ccd0b4908fcbe6ff3c', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), index.h("smoothly-button", { key: '6b6c199d0fef78a1213bfd72eac24479ed9039be', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? TimeZone.DateTime.nextDay(this.datetimeValue)
-                : TimeZone.DateTime.now()) }, "Next date time"), index.h("smoothly-input-date-time", { key: '0477c2f4110311dc388170227cbe50fe5d577ead', 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"), index.h("smoothly-button", { key: '01907b324fd98bff9415165b15e0331ca90eff66', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : TimeZone.DateTime.now()) }, "Next date time"), index.h("smoothly-input-date-time", { key: '2b9a082b98eea78af631d31fed8a90b6c7e31286', 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"), index.h("smoothly-button", { key: '7f953ead8b603212a48ee8273ab0e8f966079ad5', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: TimeZone.Date.next(this.dateRangeValue.start), end: TimeZone.Date.next(this.dateRangeValue.end) }
-                : { start: TimeZone.Date.now(), end: TimeZone.Date.next(TimeZone.Date.now(), 10) }) }, "Next date range"), index.h("smoothly-input-date-range", { key: 'd6bcee1906ad727608552081abcd7f7e7e5b4c01', 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: TimeZone.Date.now(), end: TimeZone.Date.next(TimeZone.Date.now(), 10) }) }, "Next date range"), index.h("smoothly-input-date-range", { key: '0b1208eee645667a3fa7c2b4ab720073758a4f06', 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 = SmoothlyInputDemoUserInputStyle0;
@@ -10081,7 +10081,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '69d98da44e93262eac17ad46705b72c0c5ef3c33', title: this.tooltip }, index.h("smoothly-button", { key: 'e7c26b2fff4d9b6569abdd0323565b922b29a156', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '875eefa3fc6ba4ee644dc2f776a4fbc815d6029d' }), index.h("smoothly-icon", { key: '571bd8b5cf79bdf1910569f6f0003e728a98e6ab', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '8f6465e49e798ba7e0f995603502f905611b1b2d', title: this.tooltip }, index.h("smoothly-button", { key: '521eec7917a088235f284e664111725c5d3de2ea', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: 'c50c47be087bdfc663e4473d65a1795e19324045' }), index.h("smoothly-icon", { key: '2d17e285a743e93300ab8c9bbf20840aee6e1ab9', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
@@ -10205,7 +10205,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '8612840f4d6ec10ff9e2ad9c786c5c6c62ab3301', 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) }, index.h("label", { key: '7dcc2c93dc1437b57e5bfb2a798daf62df353d8a' }, index.h("slot", { key: '6fd5c64dd182b92614b256235951aefa95894da4', name: "label" })), index.h("div", { key: 'da84af8a4920baed99be4c3e948a8fbc7a78963a', class: "input" }, index.h("smoothly-button", { key: 'e4d60080fa60b9889e4e623d142558555f89bcb8', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: 'e07fa67b8af59b0eb728f57083a692328b4b089d', name: "button" })), index.h("span", { key: '51f3eb7374bfe4fc7fffee130eec6073cdadb7a7' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '8cff3b828428f70e92f59bd598b180d7cf502710', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: 'fefe4998bc7c4bf76265e0d28854ace49a68e635', name: "document-attach-outline" })), index.h("input", { key: '9172ea295ef9274f0378ae25d0171c571aada6c7', onFocus: () => console.log("focus file input!"), 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) })), index.h("span", { key: '3e7273fb94e79e71a3afb79269ccdddfb6f5de2a', onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '1ee325bfb41f3964a524bcfc7a467a8657bc2291', name: "end" }))));
+        return (index.h(index.Host, { key: '29ced940ad22bf58756dd5a80c9ef95a5127a523', 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) }, index.h("label", { key: 'f55efbdf61946305e78d9bf7857182914afde936' }, index.h("slot", { key: '23f2c1caef8c74f67d7d776e46f34dd4b8689690', name: "label" })), index.h("div", { key: '4b22364c5831f975be2ea51d314dd73dd0207696', class: "input" }, index.h("smoothly-button", { key: 'ba5ce48226f4355c2199e1e8160613af35d6dc43', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '87be3caa52ab836f008077e3e99fc00eefe6bf28', name: "button" })), index.h("span", { key: 'd9aa22c4a47cee45fd09953210b1213f0ff5a775' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '4b478f51b1c4ee7c1bae3036934426ac5e009fa4', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '0c6ed10c8ece8974ec0594918b479c12246d6f9f', name: "document-attach-outline" })), index.h("input", { key: '696d85711a1fbeaf234161ad4633e76d713e6625', onFocus: () => console.log("focus file input!"), 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) })), index.h("span", { key: '304376ec67450d7993c42b21b9220428b4a9c7bb', onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '016b1d30a5042db2993a0f66bad0609b243c70d4', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10330,21 +10330,21 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '8ac8239c890aa8bf10baf8ff7a9751cb70a8ac73' }, index.h("smoothly-icon", { key: '6401910f2017bc8ce586daf3a5bf5e9c9d8f41e2', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index.h(index.Host, { key: 'd6f46df40394931486528f32a911b53fecb14e02' }, index.h("smoothly-icon", { key: 'f07908f858aee27aa1579a82e898ec5a2d06681b', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: 'b8b48af0215cebaec79baf5d62f7ebb192765892', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: 'e3443c33494a5050de9f260fea75006019a2f0b3', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const month = e.detail.value;
                 if (month && TimeZone.Date.is(month)) {
                     const value = TimeZone.Date.firstOfMonth(month);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, index.h("div", { key: 'e9694d62328f957b5fe49ce1cfbe98f8de890d95', slot: "label" }, index.h("slot", { key: 'aae75cef345e53bf16426c462db4d25c4a901459', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: '90e96a41b0731d888be6a657458cb329a0bab450', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, searchDisabled: true }, index.h("div", { key: '5a371106f73d9dc4e312ae25672209f8b2aa5abe', slot: "label" }, index.h("slot", { key: 'c8d17dcec5683bf588244e4cf64db9b82af82a4b', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: 'dbd15806228c9ed27380cd5ba16f157ddb2a4450', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const year = e.detail.value;
                 if (year && TimeZone.Date.is(year)) {
                     const value = TimeZone.Date.firstOfMonth(year);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, index.h("div", { key: '219be7f927af6e1925657abff3028d66b0c6bc34', slot: "label" }, index.h("slot", { key: 'e204921ee5580156e37fc717e874d7524261efde', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: 'e1b61e6b5275100c2499a6145db605afae1ff38f', 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 }, index.h("div", { key: 'd01ef3cd5485c717efefc98924caa269d1ba5873', slot: "label" }, index.h("slot", { key: 'a7f0fbac36e3b5a1cf5b0b762f12afa38a418608', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: 'f13c1f59ce333c3153bd039e2f635d1c8388979a', 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 index.getElement(this); }
     static get watchers() { return {
@@ -10366,7 +10366,7 @@ const SmoothlyInputPriceDemo = class {
         this.currency = "USD";
     }
     render() {
-        return (index.h(index.Host, { key: '3f56209797d2086ac8cf1568e0b06cd64280b5ed' }, index.h("h2", { key: 'de58b193abdc2a6f5ba468055a8880ccf3843b6b' }, "State demo on smoothly-input"), index.h("p", { key: 'bc8345fd3c2b472ff429ba24b2c5c63274129f19' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '68195361f50c431d325e28fac6718d7c0e4f8ef0' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: '93b52a5b39cd0ad647a3e983ec27a95ca9c71dd7', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'f8ee0771e76388ffa9d32afe0f627037f08e3db4', type: "price", currency: this.currency }, "price")));
+        return (index.h(index.Host, { key: '1a5c2e57a913f6592e891558a7672373db288b44' }, index.h("h2", { key: '98aa8a230da7f0721f7440270a5d3ac5717fa14f' }, "State demo on smoothly-input"), index.h("p", { key: '040802ced05d26de8b49f8e9e667f2d3257492fc' }, "This demo/test the internal state of the smoothly-input component."), index.h("p", { key: '5a0eed8ae53321122af9a8c822273c4174c05016' }, "The currency of the price should update when switching between the currencies."), index.h("smoothly-input-radio", { key: '2beed0ef6f2a016625112ad7e58eab08afe65071', name: "currency", onSmoothlyInput: e => (this.currency = TimeZone.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (index.h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), index.h("smoothly-input", { key: 'fa4b2dfbf6b41bb4dd919f6906f6ab7dc8db577f', type: "price", currency: this.currency }, "price")));
     }
 };
 SmoothlyInputPriceDemo.style = SmoothlyInputPriceDemoStyle0;
@@ -10525,7 +10525,7 @@ const SmoothlyInputRadioItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '05fd835653c873fffed9261880dfb81fd42add26', onClick: () => this.inputHandler(true) }, index.h("input", { key: '0c69da0126b7a0fbaee9f5ca11e54c02a4591248', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), index.h("smoothly-icon", { key: 'ffb94b845f41bba397ce38ba52e9576a6463b7c0', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), index.h("label", { key: 'c6316d24140192d80d8151c7fd5edfe6640cd8f1' }, index.h("slot", { key: '471ebcb3e8ad8c712233b163dd3523e63427609d' }))));
+        return (index.h(index.Host, { key: 'edc0ce11f70fb0297e18f478b462616f20e9c89d', onClick: () => this.inputHandler(true) }, index.h("input", { key: '8eb13f4be62a9db3fa5a792d027e78acfe927c31', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), index.h("smoothly-icon", { key: 'becb52e3f5e6d73d654ea0fb0e898aa807c7d29c', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), index.h("label", { key: '06b3ef42d5722ce46266ade1270febdd096a5256' }, index.h("slot", { key: '4c62e585ca2220df854f194614cbda828a36b6db' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10636,18 +10636,18 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '981c609e208eb67780a4e858298d522094ffb8a3', class: {
+        return (index.h(index.Host, { key: '4b6e036825f690d43651c77a1f53af7dfe33df65', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: '7206180cecc1eafb5443fdecbcbc7f79aac6f71d', name: "start" }), index.h("div", { key: '118f190f0ee01c234ae8757e4476b2983742bd22' }, index.h("label", { key: '26371708fd1a3b7e095b1e16a30019d94d5e59a7', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '311df0db9acc0311002a2aae2fa5d8a6fe441371', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, index.h("slot", { key: 'f3d24baf12ce46e5e4e94a8a7023e411f0ec358f', name: "start" }), index.h("div", { key: '136409bc79b218c6836bed5679f5e078ada03d36' }, index.h("label", { key: 'd1a7c60a81f8f07e79d1aee86b34b4725d13a2d0', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '60925181c249aca334cc54379acc006472bca399', 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), index.h("smoothly-display", { key: '10bc1d08c072b9595f331ac7ad01a6c5347fcafb', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '4c817c133d504b5655b53d3769f6705e09e4a757', 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), index.h("smoothly-display", { key: '0c91879000f76028d080997c795bb2601efaec50', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '348b2398b35ac139fee75783160ee68e7974e34d', 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 }), index.h("smoothly-display", { key: 'c94ff61c3bf353afe9ee3ce054599fdac03f7650', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '21a8caced6089d13bc0ffeaab47956cad1707b1a', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: '2fc33b5427f631cddb3b6362110eb71e273b69f4', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '71ff94b253b83205a8854138eb2d455c3148da5e', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10664,7 +10664,7 @@ const SmoothlyInputRangeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e3e3de851a249467dbb12ef82a18708a8c409859' }, index.h("h2", { key: 'ba090ed614d6d4566ec7e3654c3bbc75afd3bf6f' }, "Range"), index.h("h3", { key: '3d241b30795709768f520193d767290796c0c6cb' }, "Phone Number"), index.h("smoothly-input-range", { key: '61b4922da7639e508287d10c649c735f3a34ec86', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '968e889a4859c242a8b6dd6919cf51bb73fadab4' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '20428608c65d8ef43b6ce24a147785cbfb7cec41', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: '1e58cabc50c4cd3962828af39e230833bf33b9ad' }, "Percent"), index.h("smoothly-input-range", { key: '82c6a813725d957ea824e208026f2be35905087c', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: 'bd51dfcaecfe0bf4921795ae2a78f77a90dc9a63' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '4312e0ffb7d1b45a13ab8962cddf657608405847', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: '93da6dc495124a267b8811661bc7ea1c552010b5', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: 'b9a5c6c9477563d6a661da2e5dd207e6c57c90ad', size: "icon", slot: "end" }))));
+        return (index.h(index.Host, { key: '58f3a756f7a63ae81ef3003935790c7c92d552f8' }, index.h("h2", { key: '04242ea3191a540d3d6d3f3468971d481944cbab' }, "Range"), index.h("h3", { key: '0c5b87ea6d22e79041bed09b6e9d5bf040fef932' }, "Phone Number"), index.h("smoothly-input-range", { key: 'e11083989f392351645c1ec6007690c54a776bf6', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), index.h("h3", { key: '56bfc491e754f0200b30f2227c5d051cc72e072f' }, "Stars out of ten"), index.h("smoothly-input-range", { key: '584b0d5acebe3005ed5c63222803f2d48bd21827', max: 10, step: 1, label: "Stars" }), index.h("h3", { key: 'b3eef78c41a93528832013fff310ca8baaaa5668' }, "Percent"), index.h("smoothly-input-range", { key: '4e2ad864d825aa680e448e04b01da302e3149375', type: "percent", max: 1, step: 0.01, label: "Percent" }), index.h("h3", { key: 'f289243f5634f3881b20633c1940b9804f5970ad' }, "With icon at start and clear button"), index.h("smoothly-input-range", { key: '171ceb56b64b0b798c8e7da9851c1f4e52e82809', step: 1, name: "range2", label: "Select" }, index.h("smoothly-icon", { key: 'ddf810323c859da2e3b28d190620ab1b68ff8a79', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '19c0138d1bd2d3e7cb31743fff0d268c6993a0e8', size: "icon", slot: "end" }))));
     }
 };
@@ -10710,7 +10710,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '7a379f25c285c0f3e94ddada7fc3d55496561958', title: this.tooltip }, index.h("smoothly-button", { key: 'ea763b6c2704249cb2c348e81b9d50e95c7938b7', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index.h("slot", { key: '0650a68f1c45e2462db0c4d166427febbfd00f1a' }), index.h("smoothly-icon", { key: 'f71f13839b2a2f88f2ecd95629eba639e6d398a8', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '7b0db1c71cbf90c99e5722d4d3ccff17a0a28563', title: this.tooltip }, index.h("smoothly-button", { key: '0a8339f43c836b096eba34640397e4013ee339f2', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index.h("slot", { key: '64ea76b8986291c4b489f3534242261065183b71' }), index.h("smoothly-icon", { key: 'fe97d04623dcb7221293717df9b9a516e12905e6', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -11027,14 +11027,14 @@ const SmoothlyInputSelect = class {
         this.addedItems = this.addedItems.concat(index.h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (index.h(index.Host, { key: '634ee1c37ccc315c2c9857c60fa3c6069556f74e', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: 'fe3fefa2ddb788e6f4511da0f4039f8aba6c0ba9', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'b9965965aedd76ff9ad68a7f05498f294c90b592', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: '5835b784072d80f848a65902b7fcc0166b4cd3d9', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: '46220443d011b003066ccdab05143e5608a9cd01', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: 'b66541ba94fe369da41cf931068e03590efd837d', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: '6aa082460f268235af1029e9edff601df8d9140f', name: "label" }), index.h("div", { key: '1d817bb6873ac5c20ab76656adfd6e5d0ce9370e', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '58926481e75aa7f8f5296f5151e115eba91a7af2', class: "search-preview" }, index.h("smoothly-icon", { key: 'a870e6700a6593c74e84c28e345a289f5de4ad10', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '48efe8883dec494e42fe60165d541327bd6a4ca8', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: '161178270b3b59846ae100e8dd6cf6083fe2fe33', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '2e44ea79ed84225c0e0879504cc3365d5780a437', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'f25dd733169b04290a1862a48e8871f65bd07466', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: '7286c071b88b3dde9f31881f5f118a500f380468', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: '13edfbd3d7b42c7110ced1abc72b422196cefd7a', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '7f9b608039075f721855458303ac10a033488664', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: '87013dc89b1183474415a556c0a17c60cdaeeccd', name: "label" }), index.h("div", { key: 'cd9909a5a6fb60ec500ac4ef4a0a98aba0e5bd9a', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '7757adad12e29af4dbe5a2a0ba11f9f4da8cbaeb', class: "search-preview" }, index.h("smoothly-icon", { key: '1616937a8cce4efa684cc0eb067067b0d79edb08', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'b83211eb2dec69f8e43ae82b2d356a50fe0ad7f8', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '971f8942da3c3e9f2fa1a94694de88f96b823db4', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: '1c8e65f6e56e44ee4e2d8d9f8aed95c18e7ad4b1', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '35ccb0be4ab96d33435e78a49d87439d40e8caad' }), this.addedItems)));
+            } })))), index.h("slot", { key: '065a9718eed1c8dfd6afa490933415fc7ef58a6e' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -11089,7 +11089,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '30c147018c86276cfbf1d0bc6b85755131c8b9ba', title: this.tooltip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (index.h(index.Host, { key: '2c31aa1365fa11c0115d33cc21448ea600d835ac', title: this.tooltip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
 };
 SmoothlyInputSubmit.style = SmoothlyInputSubmitStyle0;
@@ -11137,7 +11137,7 @@ const SmoothlyItem = class {
             : false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b4e749ab5d696e7b58574e18e4b8bc6f4bb2c72d', tabIndex: -1 }, index.h("slot", { key: '6f1acb782c351e25b2db5399f11314b01bbc8ecf' })));
+        return (index.h(index.Host, { key: 'e9fa67d0428cfef2ae21c94eb9432f59d8b3b395', tabIndex: -1 }, index.h("slot", { key: '69a026d94d4846ab9f48f77d8f67b6e83dfd0084' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -11158,9 +11158,9 @@ const SmoothlyLabel = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'cc716eaf87a3387f147422f576544cb77cccfe26', title: this.description, style: {
+        return (index.h(index.Host, { key: '7f1d3ced4fa7652ba47c9880aa81f1868b56ba3a', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, index.h("slot", { key: '6117c12c6184cf76db0e27a3e47382a65919c407' })));
+            } }, index.h("slot", { key: 'ca89f2d10329b16869a77680f329f197e3159720' })));
     }
 };
 SmoothlyLabel.style = SmoothlyLabelStyle0;
@@ -11179,7 +11179,7 @@ const SmoothlyLazy = class {
         this.show = true;
     }
     render() {
-        return (index.h(index.Host, { key: '17ba82a5444b38dc7dca06f9bae690e05a539698' }, index.h("slot", { key: '2328805f3ef1e5dff4f647f26d89cbc2d49be624', name: "before" }), index.h("smoothly-load-more", { key: '67fcc89320807ac6ab65a4648deab0cb0511838b', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: 'ccc6f2be5670edd1bc323398c8f1d8a4a0665d65' })));
+        return (index.h(index.Host, { key: '1c8d5040a84fa8f96815d3baa4449691f4eba21d' }, index.h("slot", { key: '4a7f26fb0876115a2774ee6d8a82161b8916becb', name: "before" }), index.h("smoothly-load-more", { key: '9e965f0feb6497726622083b20729ed51cdb6a03', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? index.h(this.content, null) : this.content), index.h("slot", { key: '9be6657b1adbd337bf7c63bdbd9974be2d771e39' })));
     }
 };
 SmoothlyLazy.style = SmoothlyLazyStyle0;
@@ -11223,7 +11223,7 @@ const LoadMore = class {
         }
     }
     render() {
-        return index.h(index.Host, { key: '70721cac649d546d46464e3ac3eaaae6fd714371' });
+        return index.h(index.Host, { key: '67d9ed7e269cbb9193128ae3aec979a2f68254c0' });
     }
     get element() { return index.getElement(this); }
 };
@@ -11249,9 +11249,9 @@ const SmoothlyModal = class {
         this.open = true;
     }
     render() {
-        return (index.h(index.Host, { key: 'a47ab1c0d6318381cbee29214533874b9f05f205', role: "alertdialog", onClick: (e) => {
+        return (index.h(index.Host, { key: '5283234e9e4c2e42b64814b3d18d51298c157a69', 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();
-            } }, index.h("div", { key: '17b11319995dbcc9937727f15fb7bf10b85e4fc6', class: "modal" }, index.h("div", { key: '561b56a493b4246d49ea593f64610ddf84d32db8', class: "header" }, index.h("slot", { key: 'b8733fe31f2b4b301c848ba61f60a46b70caaf74', name: "header" }), this.closable && index.h("smoothly-icon", { key: '3bc07262a20fa44092b4227837d3ec933afa4c6b', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), index.h("slot", { key: '750a8d6e9e8cdc3b514a7e04547f705c0f57f097' }), index.h("div", { key: 'c179339153513dd1c93b764fdc4885a404767e12', class: "actions" }, index.h("slot", { key: '76fd6acd55c04dff91644325f835aa079824c99f', name: "actions" })))));
+            } }, index.h("div", { key: 'eb8a57c1a67877a5be90db66de2a301666f07f09', class: "modal" }, index.h("div", { key: '11a915af98f449f29b9bf7f7e9dd8043dec1d2ed', class: "header" }, index.h("slot", { key: '58b175e4ab4287664b39c31a456d91fdaa6af3b2', name: "header" }), this.closable && index.h("smoothly-icon", { key: 'fc1bd8b2e2cf73a4586b0a64cdce0f052a88b038', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), index.h("slot", { key: 'da6bec9274af34741f0a03a80f0008cd5da0dfef' }), index.h("div", { key: '57d5c5163db860d73db87559529de84220ac92c8', class: "actions" }, index.h("slot", { key: '67baa0fed64dcd9679e25c034b60f5cb3a865197', name: "actions" })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -11314,7 +11314,7 @@ const Notification = class {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (index.h(index.Host, { key: '491472d5d7d8dd9ac78532310456d754612ebc80', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: 'cd4f31f0b0c4098e1ceb759284734afceb363262', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: '87c9d7d92aa84b0fa05937e0dc8731fc63cc585a', name: "close-circle-outline" }))), index.h("span", { key: '93db881b72ac10a0426008ecbe202aaaa08394a3', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: '07626177e6e6b1998b28347941deacd074972a73', name: this.properties[1] }), index.h("p", { key: '947b5b4cb2c142821b8c35cd41a77427ec41fffe' }, this.notice.message))));
+        return (index.h(index.Host, { key: 'd94d6dc36db3361107339bf0ad0d79f3ed99cc0e', color: this.properties[0], fill: "solid" }, this.closable && (index.h("smoothly-trigger", { key: '0ab1a46642e9dfadf98a332d48f6a1f279498c3e', fill: "clear", name: "close" }, index.h("smoothly-icon", { key: 'b31592d466413a26f14f2355534f952282aee178', name: "close-circle-outline" }))), index.h("span", { key: 'a28762901444429c6081f3b6764af2933d317a3a', class: this.icon ? "icon" : "clean" }, this.icon && index.h("smoothly-icon", { key: 'fdc895a8a35261b05c1ff162cc5491a6cbbfb22d', name: this.properties[1] }), index.h("p", { key: 'c48f8e6032f3ba3a9e5770815870249b55d9490f' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -11338,7 +11338,7 @@ const Notifier = class {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (index.h(index.Host, { key: 'f801171b6cd660c354003888774d2bb08e7c4d93' }, index.h("slot", { key: '98ee0d958d49b9dfeeb43403946c01197b585ff3' }), index.h("div", { key: 'a44b65d5c14daa7fc8206abfc49eb09f46afa04c', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (index.h(index.Host, { key: 'bc155ebb7349ed9d133d7e31a5950fee36b1f38b' }, index.h("slot", { key: 'f30df12c6632bd5ff9eb9fe32f635bfd9166ba60' }), index.h("div", { key: '63975463615b05797274175202eed1f0fd5d2d2b', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (index.h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
 };
 Notifier.style = SmoothlyNotifierStyle0;
@@ -11354,9 +11354,9 @@ const SmoothlySpinner = class {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (index.h(index.Host, { key: 'c08c245377dd2c4da8c6baf17dc9bd78cf70aa4b', style: {
+        return (index.h(index.Host, { key: 'baf40b4f6ab882962d6d6f236340456a3580749c', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, index.h("svg", { key: '0d046eabed666fc709211c788225cfa5dbe8adc5', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '0b4140ca9d5337bd916ddadec0ee82b582cfa75a', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, index.h("svg", { key: '482643be9f0db47f48db72b2e39aec505500ccc2', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'fd7038dac8e6fd97f33cfd850aa68653ad997fc2', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
 };
 SmoothlySpinner.style = SmoothlySpinnerStyle0;
@@ -11391,7 +11391,7 @@ const SmoothlySummary = class {
         }
     }
     render() {
-        return (index.h("details", { key: '0cc7e2b3c1097da55c709a202f50d84fb7b4ed9b', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'a46ba670c1f03e052613bd88ad1d7acbd7065450' }, index.h("smoothly-icon", { key: '3582ab7dbbbe4bf4875b8c606a58a6626f96511f', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: '58889b6ccb82840730e04fe7dc85d6121f6d02eb', name: "summary" })), index.h("slot", { key: 'fbfcd57c41d8963101adfae3a00542eb1afb6d3d', name: "content" })));
+        return (index.h("details", { key: '83fb8a3d5186f88c5dc94d3617b98bea9d8b264a', onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", { key: 'c09f5884559f9092ce78daf3a48cab4646019864' }, index.h("smoothly-icon", { key: '1df56b2c7985a75b481475ebf7825f4a63f66f1a', name: "caret-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { key: 'f20d4a7c97a5728d85a8f756ea3f5e7e31520661', name: "summary" })), index.h("slot", { key: '75ff252cc06e30dbaab46673be01bd223197bfb9', name: "content" })));
     }
 };
 SmoothlySummary.style = SmoothlySummaryStyle0;
@@ -11440,7 +11440,7 @@ const SmoothlyTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4f31a21320e76019b99c7cfc4cb4ff0d8472450a' }, index.h("div", { key: '87ffb5977d0957aa9a156a42f2858b3f8b39cbf8', onClick: () => !this.disabled && (this.open = true) }, index.h("label", { key: 'bf22b6ac424669960fb1e9ac1014b2d3c1710027', "data-smoothly-tooltip": this.tooltip }, this.label)), index.h("div", { key: '2aa64bb4f3f266630dc9642e65cc984da002334b', hidden: !this.open }, index.h("slot", { key: 'b724eb4399aa54cd465519ba65c8dd759a0ade10' }))));
+        return (index.h(index.Host, { key: 'ec2463e53566b1f21fedb396e3c675352265603c' }, index.h("div", { key: 'f022878ef85911c5b6d9a820b058bd7a521cde15', onClick: () => !this.disabled && (this.open = true) }, index.h("label", { key: '2ee493b65234764681f02c80cda51341d4ca4598', "data-smoothly-tooltip": this.tooltip }, this.label)), index.h("div", { key: '8602ff2bbd64dd38583c3133d666362559bca207', hidden: !this.open }, index.h("slot", { key: '4f54d83b948aecc60736f5b268461d1eaa605741' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -11464,7 +11464,7 @@ const SmoothlyTable = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: '9141511e105824062be8d9744830b343a4017148', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: '6e90573c79d59d461c3cfe85333477661457b941' })));
+        return (index.h(index.Host, { key: '6f88947e747fb734ffffff5b9b75d2adbe102840', style: { "--columns": this.columns.toString() } }, index.h("slot", { key: 'a58008322268935b9f2e37f1a68dcb77dfb02bb3' })));
     }
 };
 SmoothlyTable.style = SmoothlyTableStyle0;
@@ -11477,7 +11477,7 @@ const SmoothlyTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2517aa5f8d0ac4e9cc8e04aa9d8c4206930ef309' }, index.h("slot", { key: 'd62a262e625f6e2d13b3fc9c2ff318352c004a10' })));
+        return (index.h(index.Host, { key: '4cec7da8f09abc1a4fd4d4844f3f2ebcb0600872' }, index.h("slot", { key: '8f617d63bdd25a5d5fc957a137cc38210a24e7ed' })));
     }
 };
 SmoothlyTableBody.style = SmoothlyTableBodyStyle0;
@@ -11492,7 +11492,7 @@ const SmoothlyTableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'fd659cc7790ab25e19aa6e7f6a80ff0c60f753c0', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: '314303397c157718fa4791b6985331b7d015ab9f' })));
+        return (index.h(index.Host, { key: 'ff5e66a596dd90b5a41ae5c98baa232c9d56e958', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, index.h("slot", { key: 'e9fe0b9ca67f73dabb7dccac7e23cdebe6bb6ffa' })));
     }
 };
 SmoothlyTableCell.style = SmoothlyTableCellStyle0;
@@ -11505,7 +11505,7 @@ const SmoothlyTableDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5a60b0a8e0603e4aca3c71e28018783e7b171926' }, index.h("smoothly-table-demo-filler-row", { key: '376a899c29affb2ac75463a62203b687f43691f3' }), index.h("smoothly-table-demo-group", { key: 'fc5d0452df007e31bd12c9c4559812d5927bc7e0' }), index.h("smoothly-table-demo-colspan", { key: 'df61da994671158afecaf08f798f5d4c37753b80' }), index.h("smoothly-table-demo-simple", { key: '0c82c068d184f295fa004da7c4ab37e08b0ada67' }), index.h("smoothly-table-demo-nested-no-cell", { key: 'ba975806a892ac988bcb6fd483cb340706dcda03' }), index.h("smoothly-table-demo-filtered", { key: 'cdb6d52cd2063d2d7ca556402b4323ca6a30a381' })));
+        return (index.h(index.Host, { key: 'd2b535e5ac21668ee169aa2f57b7968b31c8e4c2' }, index.h("smoothly-table-demo-filler-row", { key: 'fa48ef40d9469a38b8450cdad0c06a7f9a72da0a' }), index.h("smoothly-table-demo-group", { key: 'ed72ac53f7686607710b8373719ac05ec47bf987' }), index.h("smoothly-table-demo-colspan", { key: 'cfa4bb0a90387f060ca4b1e35d623855f8760b9e' }), index.h("smoothly-table-demo-simple", { key: '33ddf4545e5f21c4b418b573f2c7cfecb7b92f28' }), index.h("smoothly-table-demo-nested-no-cell", { key: '1493507c0b23aad983fb032760da4a89a05a3433' }), index.h("smoothly-table-demo-filtered", { key: '32fc621c47756d7e6276b1ca7f0a3ca3131e22d3' })));
     }
 };
 SmoothlyTableDemo.style = SmoothlyTableDemoStyle0;
@@ -11518,7 +11518,7 @@ const SmoothlyTableDemoColspan = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '68fca89bb1ad91af8e9f2a2fad20909ed0019e20' }, index.h("smoothly-table", { key: '2a51c2f08a2595a8e6caf2450bc9c033646907cf', columns: 3 }, index.h("smoothly-table-head", { key: '09e799789f1c1a080aaf36e48735e4364fc1a19f' }, index.h("smoothly-table-row", { key: '6920497dd75fe2114c94f38751434726fd2f507b' }, index.h("smoothly-table-cell", { key: 'e515ac6f18649577dc0a2f61b7e54faf479140bd' }, "Date"), index.h("smoothly-table-cell", { key: '66e6e9fe42e7d7655f237cb23ea93158ebaa1f39' }, "Skip"), index.h("smoothly-table-cell", { key: 'b6a8667c26e04420ff33c97db01d835aee8b3a07' }, "Total"))), index.h("smoothly-table-body", { key: '2deef2e8d0a741d06ad34c302f1bb1498631c250' }, index.h("smoothly-table-row", { key: 'd3337116839c99c8c6107874821df9120364ed75' }, index.h("smoothly-table-cell", { key: '8b06d0fc881fb10433d2db4445604472d6974646', span: 2 }, index.h("smoothly-display", { key: '87c4b07374a670e2a3a2a54fa48d8cc643647370', type: "date", value: "2024-01-01" })), index.h("smoothly-table-cell", { key: 'bb8821adc87a64f95e7771bb279b60a6bd81c214' }, index.h("smoothly-display", { key: '5a59941a2ac34de584a74de68e4affda9784a030', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-table-row", { key: 'c7eaf31271b3c566e75a9fc6a6d8149548ce5d1f' }, index.h("smoothly-table-expandable-cell", { key: '21173e075dea1d85c87615f27c1b507de14c61cc', span: 2 }, index.h("smoothly-display", { key: 'af2901da384c4b19315872415ebb5c510a6bbbfa', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '5cec58b2f5d374d3ac3723af5483af6e33a58308', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-table-expandable-cell", { key: '071061eb3c30e448af187feef488085425f4f3ef' }, index.h("smoothly-display", { key: '0f5df642c8ae4fcb2ed32f4dd145556f68364092', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '089441483694e35584eaf12ab20ab738aad35923', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index.h("smoothly-table-row", { key: '6dfa02e155f269bbc59742ff6f70ddb94a45039a' }, index.h("smoothly-table-cell", { key: 'e6c44311c163beee4d1ed429fd271588a11964a0' }, index.h("smoothly-display", { key: '667c5fa2d69bede5d5fee8e82f4815c34000869c', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'bafe1a0134b39d55503b2f85a88f78a89c68507c' }, "Not Skipped"), index.h("smoothly-table-cell", { key: 'd3bc0c579b56896321761945d0df910481fe2ba1' }, index.h("smoothly-display", { key: 'fbbbc10f6843e4ea79bad1b0a0304f15c1f2385d', type: "price", value: 320, currency: "EUR" })))))));
+        return (index.h(index.Host, { key: '2f5b8a961766cfb14a4cbc0e249687d089fc57ea' }, index.h("smoothly-table", { key: 'e0505d1f8b62fd40d5632ece5ba342f8aaae0382', columns: 3 }, index.h("smoothly-table-head", { key: 'e6f619b8c66c3515b7dd64f1b6b705263ba83ff3' }, index.h("smoothly-table-row", { key: 'a71e5f9926964968ef326950a3a2a9be8fe1a133' }, index.h("smoothly-table-cell", { key: 'a73cad3cd90c3576f8f4b8bd344eac7bd4a69302' }, "Date"), index.h("smoothly-table-cell", { key: 'a823b166cc59687713057b1d669c03325158fbdc' }, "Skip"), index.h("smoothly-table-cell", { key: '4ac6436d381e6dcd6ec2ac7637ba69f038b8c464' }, "Total"))), index.h("smoothly-table-body", { key: '5c1fa77ed1b30eb18f8ed57c0d6b65906b441dc1' }, index.h("smoothly-table-row", { key: '5f964dbcf511664cce59247ab345309d99536d95' }, index.h("smoothly-table-cell", { key: 'a0e8866efd9962a044da0e0fe1edcbda15b746fb', span: 2 }, index.h("smoothly-display", { key: '84779560170d6daedfd5e42a21bdc797568e3c55', type: "date", value: "2024-01-01" })), index.h("smoothly-table-cell", { key: '6b6305d91a15e790ec7d1bb535e6229245878929' }, index.h("smoothly-display", { key: 'aca16eb6afc9d75d205cf76ca656f89ed2686799', type: "price", value: 120, currency: "EUR" }))), index.h("smoothly-table-row", { key: '3ebd132084c5829effae414807f09ce700c50092' }, index.h("smoothly-table-expandable-cell", { key: '74a13c39975f621e7913e8a7becdf5c164fb49dd', span: 2 }, index.h("smoothly-display", { key: '07c8e4fb1f5425a9f6170188df20fd8a1794c33e', type: "date", value: "2024-01-02" }), index.h("smoothly-lazy", { key: '2dcf180541fda11f94edd92f5af58e08a3a6a170', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), index.h("smoothly-table-expandable-cell", { key: 'cb0c8c186c2aeee6630ff42ced2aa94ed589137c' }, index.h("smoothly-display", { key: '266a7f3bc205dedea081b4bb9479074720fa3b0c', type: "price", value: 220, currency: "EUR" }), index.h("smoothly-lazy", { key: '23f465608361483d816290948562f58c45147eb3', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), index.h("smoothly-table-row", { key: '56528d08e829f3fe6f4246379f739d22c003c25c' }, index.h("smoothly-table-cell", { key: '3dfe937b5dbbd1999f767d9dc29b024631ac7e79' }, index.h("smoothly-display", { key: 'fcff82d75a5937946d291b83250244bb4ef00596', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: '733b64a5b6da52d3f230cffb676eeb2cebbc8fff' }, "Not Skipped"), index.h("smoothly-table-cell", { key: '77ec9ac171438abc7d6e7119a2f76fc1b4504682' }, index.h("smoothly-display", { key: 'f801dbad93eaf8fce6f198a05063dfe0e67357ab', type: "price", value: 320, currency: "EUR" })))))));
     }
 };
 SmoothlyTableDemoColspan.style = SmoothlyTableDemoColspanStyle0;
@@ -11537,7 +11537,7 @@ const SmoothlyTableDemoFillerRow = class {
         }, 3000);
     }
     render() {
-        return (index.h(index.Host, { key: 'a03f1c70b2e92ff356d45e773ae73d831e6cd0fc' }, index.h("smoothly-display", { key: '5036d9aaa30aeb6d3eed6f10d835aeb6f4efe3bc', type: "text", value: "Filler row" }), index.h("smoothly-table", { key: '7fcb76f36dc6f2f2908691b7068e497c1b8a1da1', color: "primary", columns: 4 }, index.h("smoothly-table-head", { key: '25346f60c41a560528f39ac2e822d2b3b15f2c86' }, index.h("smoothly-table-row", { key: 'e0ffc1a2e88c33fd6509ab2acfd2f612cf39a006' }, index.h("smoothly-table-cell", { key: '6816fc98a889ce71cc2ec43b6d91597856e1f0b2' }, "Breed"), index.h("smoothly-table-cell", { key: '0f04dc7a0c25da1e4e15a1b6b7caee0a93c0bba6' }, "Country"), index.h("smoothly-table-cell", { key: '14d52e902bf3ad350d6a87a86b6e413c3e979f4b' }, "Coat"), index.h("smoothly-table-cell", { key: '9d196cabb51ff631141fc5abe22e10509d59ca61' }, "Origin"))), index.h("smoothly-table-body", { key: '9a0c88bdc0f5c52d3ce41ef0e6dcd9b8dd99a18a' }, this.cats === undefined ? (index.h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-table-row", null, index.h("div", { class: "smoothly-table-cell" }, a.breed), index.h("div", { class: "smoothly-table-cell" }, a.country), index.h("div", { class: "smoothly-table-cell" }, a.coat), index.h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
+        return (index.h(index.Host, { key: 'a4ab7f77bdf46eb363b09013e1dafff11b0e752f' }, index.h("smoothly-display", { key: 'c0e379bad80ac3aff522fab6ece62736eee9e1fc', type: "text", value: "Filler row" }), index.h("smoothly-table", { key: '4529aaaea08f8cffd04ff86917b4e3bf7deb87b7', color: "primary", columns: 4 }, index.h("smoothly-table-head", { key: 'ef6090225fb94dd52e095407ce495c140e744d9f' }, index.h("smoothly-table-row", { key: '70930529d09f901a674c6cd217b19dd7a4ebe12f' }, index.h("smoothly-table-cell", { key: '36fd7f72b033dac6ecce90d14ebf9c4140c43298' }, "Breed"), index.h("smoothly-table-cell", { key: '460d7952f12319ef83d14467526ed60eff67ac25' }, "Country"), index.h("smoothly-table-cell", { key: 'd9a24f736756b599f61c1f01916717e08ce002ba' }, "Coat"), index.h("smoothly-table-cell", { key: '4fb39edc7f9e2ea41e3a2203172b0945f7d20e4d' }, "Origin"))), index.h("smoothly-table-body", { key: 'b1515760c0a8f5296f9e9fe86d54c09e553dcd06' }, this.cats === undefined ? (index.h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (index.h("smoothly-table-filler-row", null, index.h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (index.h("smoothly-table-row", null, index.h("div", { class: "smoothly-table-cell" }, a.breed), index.h("div", { class: "smoothly-table-cell" }, a.country), index.h("div", { class: "smoothly-table-cell" }, a.coat), index.h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
     }
 };
 SmoothlyTableDemoFillerRow.style = SmoothlyTableDemoFillerRowStyle0;
@@ -11609,18 +11609,18 @@ const TableDemoFiltered = class {
     }
     render() {
         const cats = this.cats && filter(this.criteria, this.cats);
-        return (index.h(index.Host, { key: '9d52b9430f98dd1e55863eede669b55740fd3b2b' }, index.h("smoothly-display", { key: '228f235640c863fa1326ac3ea0ff29c49672b9db', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: 'dbd13ea0d42cdd09c3ec96d6793fad8f328aace7' }, index.h("smoothly-filter-toggle", { key: 'b7c7cc453733530029439a894e26b044dddfa2dc', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", tooltip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '7a4e7976b0ecb684cb5a752cc4318ca1f5ad7409', properties: { pattern: "Ticked", breed: "" }, icon: "paw", tooltip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '0499d2af053b12f76c4d7c8fc1aabfd847f564fe', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", tooltip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'd22c2021808718e5175059efbdc4d3bb720325eb', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", tooltip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: '2386badd2d73fcae11097cce654f2dee9b99f13e', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (index.h(index.Host, { key: '908dcfd89c7796f05b9368c84638e03e0c18753b' }, index.h("smoothly-display", { key: '59b1a019a94677a9bc50578db0a00913f4143301', type: "text", value: "Filtered" }), index.h("smoothly-filter", { key: '0c6259f47f3abd250b94161a5ad5d4c27cdaa07c' }, index.h("smoothly-filter-toggle", { key: 'be9b6b879fb240e5a912364ae8250fa23094a2b0', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", tooltip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'e3a28cae69da5b8241fc3f9a1db7e68413039890', properties: { pattern: "Ticked", breed: "" }, icon: "paw", tooltip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: 'b2ea41e66edc53e9cdac4550a5b946566f5cdad3', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", tooltip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { key: '49cc5be0c51bcfcb36e5fe52ccb4f186268997a1', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", tooltip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-select", { key: 'eb284c050a5beaa410129bbb422d91dff47472e9', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
             Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
                 var _a;
                 return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("div", { key: '36d340b6c3b8b736188eb7d9c8b58c1d5b4f45ab', slot: "detail" }, index.h("smoothly-form", { key: '28696996dd3a348ac40563daa34d53d840ae386e', looks: "border" }, index.h("smoothly-filter-select", { key: 'aea97995976be168e54d90b12662336dfbf15f8b', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), index.h("div", { key: '640f6d1eb05604c49b066e6b0f48c1f3b9fa4260', slot: "detail" }, index.h("smoothly-form", { key: '9b24dd67d6ca57a53c4d1beec444134bf088f594', looks: "border" }, index.h("smoothly-filter-select", { key: '689da21945fa5166adf394be4b5bad682f402021', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
             Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
                 var _a;
                 return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), index.h("smoothly-filter-select", { key: '3349383d47061a7b0a209ad7ec4c5b8bbdfac642', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (index.h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), index.h("smoothly-filter-select", { key: 'aa90475e87bb13bd3bc18e55096d479bc3b66638', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), index.h("smoothly-filter-select", { key: '388f2a8ac1b7af1ab1d931d32288471591d4608b', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
+            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (index.h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), index.h("smoothly-filter-select", { key: '62215a0457d5b8405f7176a65bc5189ffe663146', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
             .flat()
-            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (index.h("smoothly-item", { slot: "items", value: name }, name)))), index.h("smoothly-filter-input", { key: '65c1509883210b656ca9af4ad09eb44d23e9efdc', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '11925c6ec93cea60d1c5134f8070f9597d2d2c86', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", { columns: 4 }, index.h("smoothly-table-head", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cats)), index.h("smoothly-table-cell", null, "Breed"), index.h("smoothly-table-cell", null, "Coat"), index.h("smoothly-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-foot", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", { span: 3 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
+            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (index.h("smoothly-item", { slot: "items", value: name }, name)))), index.h("smoothly-filter-input", { key: 'e316fcd9702312afb284034ba9c74edc570038fc', label: "Coat", property: "coat" }), index.h("smoothly-filter-input", { key: '9dbed0e00e6a1108697333ae2edfa42287b068f4', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", { columns: 4 }, index.h("smoothly-table-head", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cats)), index.h("smoothly-table-cell", null, "Breed"), index.h("smoothly-table-cell", null, "Coat"), index.h("smoothly-table-cell", null, "Price"))), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-foot", null, index.h("smoothly-table-row", null, index.h("smoothly-table-cell", { span: 3 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
     }
 };
 const names = {
@@ -11639,7 +11639,7 @@ const SmoothlyTableDemoGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'cb9c374a765eca44fb1d8543050bf3f1aca7e7b5' }, index.h("smoothly-display", { key: '8575b746f011619e19391052a5a3a7ed1069c949', type: "text", value: "Group" }), index.h("smoothly-table", { key: '7079a601ab8268d54b31dc80ed13f1a5484ab821', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: 'fccfa1dcf9166f10aa3fcc4a5a642276ed6a16c2' }, index.h("smoothly-table-row", { key: '9909df83d6073f3aa8676c99ea9a4067d5487498' }, index.h("smoothly-table-cell", { key: '69356e6e78a502f3110ddb7b1f847063b5015919' }, "Date"), index.h("smoothly-table-cell", { key: 'fefb88e5a644af89541e0040aa131e3453dd5d0b' }, "Total"))), index.h("smoothly-table-body", { key: '828c2cee93b8b97040c554112dd276613a0b6be8' }, index.h("smoothly-table-row-group", { key: '4d8d44c2e3b32095daa02a40b12f86b4ff86dd86', align: true }, index.h("smoothly-display", { key: 'f3bcf256586535f9986c97ec21ada180003991e0', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: '6a3535233789061facd84f37b4fead6a7f0d60f7', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-table-expandable-row", { key: '95f2a34ce70652430b616cdc3831d10df9087d14' }, index.h("smoothly-table-cell", { key: 'a73c05b01d671db9cfa72fa8068cb4d7f95036ef' }, index.h("smoothly-display", { key: '6a7e44deb79ea54ae64a84dffcc0520c66da378b', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '9adb23eb7189952f703db59123d1d8f38c0a166c' }, index.h("smoothly-display", { key: '984f42c4690d57e327c63dab88f332ba44182e2c', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: '7d766476c16cad32f93fe5ef5fb98fb79916a9a3', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '85a8c9673f36f30673fed34157a680f75b91bee8' }, index.h("smoothly-table-cell", { key: '7c3bdb3b1a19b20b150b69cddda2e8e59e43e759' }, index.h("smoothly-display", { key: 'd0717f95fb92f1d87f6d47c2f84ab52f8bbc21cd', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'ec504f6455e0a73ca58d5c6b7a30df0e73173097' }, index.h("smoothly-display", { key: 'c7ec3aca9d5b294e21a033cf9d355d892569d5a3', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '8495ba830272a904584c83588d463ee981a75898', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-table-row", { key: 'e6d15fcadbda9aa5d8f4108f631581994df5ac6e' }, index.h("smoothly-table-cell", { key: 'eee32ea2b94ae868a568efe82fb6a697b5e767ce' }, index.h("smoothly-display", { key: '9fe610a829b01221136befb1bea1c67cc12714c3', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'b2157c0b4430c361b1b2c015b9b17fbfce74eba3' }, index.h("smoothly-display", { key: '05980109d8341a18f74175fde5ea88f9bfd5db18', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-table-row-group", { key: '550e08e6a2ba032e4f1edb792368320facee4218' }, index.h("smoothly-display", { key: 'd0039d4587a46ce54cc09505468c794d4719d6fc', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: '9ea5bf91300a63ed742aaf23d3aeeb0fc413a5c6', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: 'bcb96780b057591413bf08f86fc48f3092b3ef78' }, index.h("smoothly-table-cell", { key: '96fa8d21b911c2e89bd16162b470547f40c59260' }, index.h("smoothly-display", { key: '768999a3d220c2071bcaf0b7d580b20431590ed6', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'e4060edb7613db6a37d78377e79d54cf1ebf687a' }, index.h("smoothly-display", { key: 'f1132da3f844c62f01ac91d22d333b0e02ec669b', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'd8d8f0171e1e93410f7a73fc556ef314a52376bf', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '864e04ed18ce70d8b3fbdf40e7da8c664d1d6da3' }, index.h("smoothly-table-cell", { key: '10073a5ba35669ad1286e37dd1d7362f8f920607' }, index.h("smoothly-display", { key: '8b1a0c8bf4ab5091a6bb7bf0ed4831c052e1fb95', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'd96119b96cdfe1e69d34a7d7f8ad89c66a2c9c95' }, index.h("smoothly-display", { key: 'cb0a4650ced58ee4d8f8b69ea60e96a804b9bbb0', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '3ec0a1b5864824ba58f6253ff61dd7df6e0965e8', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '17a7220faf185e221e6575b7417064f640049353' }, index.h("smoothly-display", { key: 'd1a8ba2e1f00273f8cf0cd663c33409159fba564', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-table-expandable-row", { key: '6b3a3552021825523cf13b7360be3f9a9724c70a' }, index.h("smoothly-table-cell", { key: '4a6e91ade11bc599c0972b39bad2da7b2714e95b' }, index.h("smoothly-display", { key: 'f8a5ca90a832692bcfc298d97d72f2342ea9b621', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'b0fc1819f4a4a5e6969fa5e16721d254d2cf58f2' }, index.h("smoothly-display", { key: 'f074ed0f38927fc32eddb796db8e4bd13ddff5b5', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: '081597e39eb74ef486e08b0e81f531a84c6b6f88', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '2f31bd3aeca17588053fd443732ba7104e76a537' }, index.h("smoothly-table-cell", { key: 'e169bbb7c6a8a34a3764b93d88d3395507f62a89' }, index.h("smoothly-display", { key: 'f62c11b7989cc87cc71ad926f8f7eda276a986bd', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: 'e52293f00718bf1c5cb6cbe202e4a6361d837be8' }, index.h("smoothly-display", { key: 'd184c61a50db31ff40f95fb2d0590c4af6cb0f1a', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '196a5cdc02e0aa89fa5ed00f61e8aa6ccc1e4a18', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '75eb5a7e930a007ed0a1fdfff7edc86899f749b8' }, index.h("smoothly-display", { key: '309d0b896ea94a26676e7836fa81e30e1637702b', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: '9ce56024e34235fdc9678d6b6e5667d6f3b8de0c' }, index.h("smoothly-table-cell", { key: '923b4c15ae23a262f73d3c419eebc6fea401de4a' }, index.h("smoothly-display", { key: '1ab89af5c408641eb0542741a1a94a599ae07807', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '774cfe6aa680be3e5e95b185cc32098e0cc53883' }, index.h("smoothly-display", { key: 'f479af8e80e1441714c54dba448731b5d2464029', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'bfcbdd239e454fcdb0c9e12c69e2bde8b345234f', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'c00e2e135f9ec5769720eb0079d30eb89792aac7' }, index.h("smoothly-table-cell", { key: 'fc268d21e428ce7db18b31e9808c1a315f93bd5b' }, index.h("smoothly-display", { key: '7c12adb25a5e808756e864e5158902e99a08e2a0', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '4b493f33ce9c366bae4b197bffdde4d73c18d630' }, index.h("smoothly-display", { key: '8522920e0ba9a8ce448f82ae7a9ee651bd9fd013', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '62739501d31b40e0c380a5180950f3dd3b8d58bc', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '751842a7f1ef2b76b73883dec6944b7915129b8d' }, index.h("smoothly-table-row-group", { key: '15058bd1beca118e60ed9482e2743d7bc3a06229' }, index.h("smoothly-display", { key: 'e136b065bc232bd34004dfd684993b9fbbe45ad8', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '26fb2d19ec2cc050fc18ee78d2d0310cfec369cc', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: '1f28649db69b6ce35c71e8e81ff46c8059ea1349' }, index.h("smoothly-table-row", { key: '4239aa228489e74fe32dd6cb46b0b956b9a917cd' }, index.h("fake-cell-wrapper", { key: '0995d0795d88d90dc4a652b93bd01339885a4a15' }, index.h("smoothly-table-cell", { key: '6fbfe32c8600ee8792d234e4031c3d88b7cd07a5' }, index.h("smoothly-display", { key: '7278ba187d47a030c593c7c149efa9fee3dc457d', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: 'd49fb4284720169c881afa15f0af96c85a236d08' }, index.h("smoothly-table-expandable-cell", { key: '61965249141071c357e76bcd4b37432eae785011' }, index.h("smoothly-display", { key: '83c33af35c51bce8c3524c94c184e56e9a60bb4c', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '434779474958f2bd9f9b86af5794440b536b17db', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index.h("fake-expandable-row-wrapper", { key: '4fef13086f3c56e09a84b5b3cd5a4e34c807c03c' }, index.h("smoothly-table-expandable-row", { key: '0d7460a51b87bbe63224060fc7fe9ff097bcf964' }, index.h("fake-cell-wrapper", { key: 'db5254d9ee7725c31171562a23f3a3824f37b1e2', class: "span-2" }, index.h("smoothly-table-cell", { key: 'be07fabe144bedb0a7525b97a5c6a29fb05f482a', span: 2 }, index.h("smoothly-display", { key: 'e63cce72f5879609cae82b5e02b0513de3761e0b', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '1f3d1eb4b86892e86ad9b8f80441e8d151c8cc11', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-table-row-group", { key: '32c835a3c51e8f793ccce4e9847c5e8af01729a9' }, index.h("smoothly-display", { key: '5367fd62c0dbaffc8895234df678fb6f645f14c6', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: '79879a7ae5c080e20e3fefb27ec1d94d966af8e6', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (index.h(index.Host, { key: 'da8c72df27c72f28c4b88ab7f6d9465e99931588' }, index.h("smoothly-display", { key: 'b905719c8dced9243e45a0e5472e268579688627', type: "text", value: "Group" }), index.h("smoothly-table", { key: '06bef1134bd8e8d6c5bf61c612252414df76f404', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: 'd2d85d0b011572b05cb8f9384654b40a79a1bf88' }, index.h("smoothly-table-row", { key: 'bfb7be194d88e15c9370c53d139cc7565f4f8a0f' }, index.h("smoothly-table-cell", { key: '59bc4eb014e978e58a0326ea813d4cb81ba5c7c2' }, "Date"), index.h("smoothly-table-cell", { key: '61b080594168f3c4a78c07f32b9c8e10ccce31a1' }, "Total"))), index.h("smoothly-table-body", { key: 'e760bc5e0c654cd8dd9f03900059a0598a303a50' }, index.h("smoothly-table-row-group", { key: 'c28af2e98f25e867dcc63959e2c709732d47084c', align: true }, index.h("smoothly-display", { key: '20d12520de19a3767d82834ca82ed27379f4b9a1', slot: "start", type: "date", value: "2024-01-01" }), index.h("smoothly-display", { key: 'cea66f5eb151228b1261d29f1786a02b47077a2c', slot: "end", type: "price", currency: "EUR", value: 510 }), index.h("smoothly-table-expandable-row", { key: '72a431179c790a481fcc27bdc4edfd49f9d9a64d' }, index.h("smoothly-table-cell", { key: '5d870cf25e72dbc5ff008fdb55637304b7fa3eb1' }, index.h("smoothly-display", { key: '391f65b392046ce78a8d6667e89b1bc477bfb7c5', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '6321d69210022c65047a1cfe97d8616635a98692' }, index.h("smoothly-display", { key: 'e782a02474c3e2917c10ad9f9bfdc5899117c849', type: "price", currency: "EUR", value: 250 })), index.h("smoothly-lazy", { key: 'b0b30ebe085dd172a0f7457ff55564573d0ef3a7', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '50795622851bee4d55ab99b8bfd59e3e1414f1e6' }, index.h("smoothly-table-cell", { key: '004d4d6324e2dc950971dd3680d16999aae20a7b' }, index.h("smoothly-display", { key: '8e0e868af592e3b78ab80812b433bbb7394661f5', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '0a11972a561a8ace70e6ac84c073cda5b881a6a1' }, index.h("smoothly-display", { key: '80bc3be6f2c5481ad012ca7dbfe5510daf77b51b', type: "price", currency: "EUR", value: 260 })), index.h("smoothly-lazy", { key: '9dd83d5a40eb07323f77e8841fecb78b36582721', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), index.h("smoothly-table-row", { key: '7acb7852cc5b8c44d3c5399ad833639934403a65' }, index.h("smoothly-table-cell", { key: 'bd1d5d4cd10f01007f3183db2632b0e463153485' }, index.h("smoothly-display", { key: '5c89f8ba441669bdaa0fb90c617f6bbd745ad6bd', type: "date", value: "2024-01-02" })), index.h("smoothly-table-cell", { key: 'a64ced0122ece2e2b56b0398adedf7ed6ca97712' }, index.h("smoothly-display", { key: '03304cf83a41c648c5deca85244e67d9c8cbb05f', type: "price", currency: "EUR", value: 130 }))), index.h("smoothly-table-row-group", { key: '04a93eba34faa344e5f2e0efcdeade50bf869ee3' }, index.h("smoothly-display", { key: '07364fa821e89a41734a8b5659790098bd274974', slot: "start", type: "date", value: "2024-01-03" }), index.h("smoothly-display", { key: 'e81c2e49e54e23c9e8dab4d3483511733dc6dcbf', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: 'a9f5cc740f4da243174d017f837bcf8cfc50db5a' }, index.h("smoothly-table-cell", { key: '6cc3cec7ceaaba9c5dcc77967ff17d776fc80248' }, index.h("smoothly-display", { key: '8a8bdb848fa3b5faa50ea13112a0567beac6510a', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '5327943d6a8d9fbcb9d0a6443fe72eb148c2b95a' }, index.h("smoothly-display", { key: 'ddf0d12356451ccd7f6cf2d32984023529f73500', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'dd0fe0624c593a78f3204d0f348e7b869cf5a38e', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: '1401000762d0ff13cceb94b8582e234b52d236a2' }, index.h("smoothly-table-cell", { key: 'e973a1749a6ae23b203ae2852a0f96288edc1002' }, index.h("smoothly-display", { key: '12d5f24d7e674a96bac442abb2dfeb03cfb9089f', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '932ca025fa648492ec0843d2026c2c7eef4a96a6' }, index.h("smoothly-display", { key: '7395996f71515b7b4cd89b44c43115a8f48a4479', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '715b89676f9a61c8ee379641d0f3f026d2006398', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '186dc1e22f94992bfec6a53ee17369ac4d8a44e5' }, index.h("smoothly-display", { key: '6b76ff53a810678f0479ffe0cb1f71858cdfe2a0', slot: "start", type: "date", value: "2024-01-04" }), index.h("smoothly-table-expandable-row", { key: '3aaa8851fd47c9daa5ebcbdec90e1044e513152b' }, index.h("smoothly-table-cell", { key: '4508bd5d65f213fc1f551a2a46b79b5488b2812f' }, index.h("smoothly-display", { key: '552b4533f8ea48c66ab8b2800c6a9f8e6065ea3e', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '21874226f3bb42e967452984fa3fd2bb5163110e' }, index.h("smoothly-display", { key: 'b45d9c7440832692a11cb2b935747d686b5dcbad', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'febe63c87f1c34a21ab6d1337d6818822b718ca6', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'f24a40c2fe90d21265f8bca8d4a91c6f40eafa78' }, index.h("smoothly-table-cell", { key: '1abf1b6e37a5510c88b25e03f5abe59b9f1e08c0' }, index.h("smoothly-display", { key: 'd804e501146c89932671847429b6b5e75bfdbc8a', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '88669c958de7cac17ff299112c21204fd6d9338e' }, index.h("smoothly-display", { key: '728161eb3a40c4a38e4615f1e508158e3471ea5b', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: '7bc9a94c213ada73e52e97a84b6e2bce1b259e2e', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), index.h("smoothly-table-row-group", { key: '481613983b9f3a1a6e8c0d789a93bc4db1fdd28b' }, index.h("smoothly-display", { key: 'fee7a993e79b632372dbd1a3c2e858729c9dfba2', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("smoothly-table-expandable-row", { key: 'ed86ef18abc40b4c0d7f599859fd490df5eaaff1' }, index.h("smoothly-table-cell", { key: '3b4b94027c2c4a64cce25eb23b303e36e7e458d8' }, index.h("smoothly-display", { key: '1153c77ef27f5184d07816ec5c3755f9ffaa256d', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), index.h("smoothly-table-cell", { key: '1ca0d125ca4c2d8a412041909922c39b7509395f' }, index.h("smoothly-display", { key: '6aad6aaaad80470b324640d9d4eab5f3c0b741c4', type: "price", currency: "EUR", value: 320 })), index.h("smoothly-lazy", { key: 'a222dff482ccc20bfeaa8d46b862cd84986e9939', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), index.h("smoothly-table-expandable-row", { key: 'ae9c107f66dc9dbe3aa9d8eec2a460deadf3b429' }, index.h("smoothly-table-cell", { key: '96fa23fd45df248e3aeafc2c55a8d9054923c469' }, index.h("smoothly-display", { key: '15910bd6fa106dde6fcad5664e45c1d9f5b592d6', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), index.h("smoothly-table-cell", { key: '56c04a10b49d60b4adb96fcf26b7f9f8fdf50b24' }, index.h("smoothly-display", { key: 'c39a111f569d4c52e64a815975ad4e1fd53d1250', type: "price", currency: "EUR", value: 400 })), index.h("smoothly-lazy", { key: 'e2da1a14b8a16d1b587a68fdd75608fa7f1941bc', slot: "detail", content: index.h(index.Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), index.h("fake-group-wrapper", { key: '90d54ba586c10ce451d740ed33eda13bd5b00001' }, index.h("smoothly-table-row-group", { key: 'b3cc66b2c2d7f333c148424877400022594e7f81' }, index.h("smoothly-display", { key: '5ddd47079e85756137dc7dc43cdc32bbf0b4f732', slot: "start", type: "date", value: "2024-01-06" }), index.h("smoothly-display", { key: '17db375e01b903cde1cb0059db1be973b00221fe', slot: "end", type: "price", currency: "EUR", value: 720 }), index.h("fake-row-wrapper", { key: 'a65723fdd4423137421b3581d08d687681883094' }, index.h("smoothly-table-row", { key: 'c636f9582640e21011ce1e6e0d4a8de5d137543a' }, index.h("fake-cell-wrapper", { key: 'a31f7f17fc0a19049f63a64407804ffba93c8e2d' }, index.h("smoothly-table-cell", { key: '18938a4ae05478c5d970ca8c0f2dd5718e7971c6' }, index.h("smoothly-display", { key: '3e2b7b15aaabc229bf0f91e58e664e06281b570b', type: "date", value: "2024-01-02" }))), index.h("fake-expandable-cell-wrapper", { key: '68f60c27598754cd0183868c7cde10970da93a76' }, index.h("smoothly-table-expandable-cell", { key: '235409d91c0799ed4eb31da6ba0f74db329fcdb3' }, index.h("smoothly-display", { key: 'b92bb4d9dddafe0904190976d4e8e80fe79b33d5', type: "price", currency: "EUR", value: 130 }), index.h("smoothly-lazy", { key: '41197c6e029c1bddffa3d86fd3d2744607d4d969', slot: "detail", content: index.h("span", null, index.h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), index.h("fake-expandable-row-wrapper", { key: 'd2c1e736c61feeb4b6de8963347424c0e702ef9b' }, index.h("smoothly-table-expandable-row", { key: '31c742b3f422921bcb63cfe4520afb0372f7f611' }, index.h("fake-cell-wrapper", { key: 'feee1badbb65a288326e93d659ae9d04e2dcaeeb', class: "span-2" }, index.h("smoothly-table-cell", { key: '0a02544521a7b2c8447892a1c6254813f465cba5', span: 2 }, index.h("smoothly-display", { key: '255baa3b6dd0b94f268b93397c149e5b37f0fe69', type: "date", value: "2024-01-07" }))), index.h("smoothly-lazy", { key: '8895823aeb4009934a30fd791fd610dbfea3e8be', slot: "detail", content: index.h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), index.h("smoothly-table-row-group", { key: '3c97e99082897a415d041a16c0fca1a6016929a5' }, index.h("smoothly-display", { key: '0c2f02e09d04fdf0d4622b143b871a8901dfc4e7', slot: "start", type: "date", value: "2024-01-08" }), index.h("smoothly-display", { key: 'd2cbe40f0b68e8dfa485d709d4bc24b27b83bed4', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
 };
 SmoothlyTableDemoGroup.style = SmoothlyTableDemoGroupStyle0;
@@ -12587,7 +12587,7 @@ const SmoothlyTableDemoNestedNoCell = class {
         this.loadedRows = [];
     }
     render() {
-        return (index.h(index.Host, { key: '87f7234ed07cb86ea3d1e314331c8f51285459b3' }, index.h("smoothly-display", { key: '9be98a5ae53ed74a79cc8b06bdb875ac7519789d', type: "text", value: "Nested" }), index.h("smoothly-table", { key: 'd87589ec253d0ed1cb5a6a870bd752791f95da39', color: "primary", columns: 8 }, index.h("smoothly-table-head", { key: 'de6f0673a9abe1a1aba05c1bbef91b4fc5c93c70' }, index.h("smoothly-table-row", { key: '87e852b736048a5357f5058051bda7fe74b4463e' }, index.h("div", { key: '28c60977e7355fe80e03ab01544369913a2dafa2', class: "smoothly-table-cell" }, "Id"), index.h("div", { key: 'b56ef63848c997188b5c187381345063737acb85', class: "smoothly-table-cell" }, "Registered"), index.h("div", { key: '5d59c64f6d0a7757e7f00244d3f04ba2455fcec8', class: "smoothly-table-cell" }, "Name"), index.h("div", { key: 'bac3313f481472bb499d6dbcab7c6470a1873f80', class: "smoothly-table-cell" }, "Age"), index.h("div", { key: 'f1688aaa67476ddbfccc752dc1c95f32890687c4', class: "smoothly-table-cell" }, "Balance"), index.h("div", { key: '09f89a13345684f56c428711652da7fed4825758', class: "smoothly-table-cell" }, "EyeColor"), index.h("div", { key: '7623a6e3dc9ef2f2379fef2264847121603e18d7', class: "smoothly-table-cell" }, "Gender"), index.h("div", { key: 'c36e69f8aeca91a3c38790a4ac190def7864af8d', class: "smoothly-table-cell" }, "Company"))), index.h("smoothly-table-body", { key: '95c3a29a56bb6d93cd0a0e2f0bd934f9980b0d07' }, data.map((entry, index$1) => (index.h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
+        return (index.h(index.Host, { key: 'e2ea1bc4f16d79cb37981f4505444305e947d68e' }, index.h("smoothly-display", { key: '13289840bc0221f4a7ab4ac586d5d2369139fa14', type: "text", value: "Nested" }), index.h("smoothly-table", { key: 'f3b0a88dbae4b9ec9e2d4c9c020884a7d93b98f6', color: "primary", columns: 8 }, index.h("smoothly-table-head", { key: '100c1dc0f3ba10fea8fb7e917973afb7bdb9fa53' }, index.h("smoothly-table-row", { key: '141279d17e425a2812234f1efc96e45da3e8967f' }, index.h("div", { key: 'b2d69d77d0263b9d7e22669a2770ce3b71ba0aed', class: "smoothly-table-cell" }, "Id"), index.h("div", { key: '23c56233285a9633be65e7e63a7f0662a4310e11', class: "smoothly-table-cell" }, "Registered"), index.h("div", { key: '3b627efbc35c5ef5d6eeb517d2f40fef354784e2', class: "smoothly-table-cell" }, "Name"), index.h("div", { key: '93d7f99631f28731a4842149d8e07377e0268847', class: "smoothly-table-cell" }, "Age"), index.h("div", { key: '5deefe5c15a9ccd73f5f1681af5cd5a6f0c6d9c3', class: "smoothly-table-cell" }, "Balance"), index.h("div", { key: '59fe7612ab4b93f18b02a5beec91b99196286c44', class: "smoothly-table-cell" }, "EyeColor"), index.h("div", { key: 'a20673454e87e3524b7ea4106ab907092ade37fd', class: "smoothly-table-cell" }, "Gender"), index.h("div", { key: 'fc7b60f8d25148d0f8aea343e33aeae41e83c916', class: "smoothly-table-cell" }, "Company"))), index.h("smoothly-table-body", { key: '9df2de835d78ed1e530802cecdd4b8af5763f0e0' }, data.map((entry, index$1) => (index.h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
                 if (event.detail) {
                     this.loadingIndex = index$1;
                     setTimeout(() => {
@@ -12595,7 +12595,7 @@ const SmoothlyTableDemoNestedNoCell = class {
                         this.loadedRows = [...this.loadedRows, index$1];
                     }, 1500);
                 }
-            } }, this.loadingIndex === index$1 && index.h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index$1) && (index.h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), index.h("div", { class: "smoothly-table-cell" }, entry.id), index.h("div", { class: "smoothly-table-cell" }, entry.registered), index.h("div", { class: "smoothly-table-cell" }, entry.name), index.h("div", { class: "smoothly-table-cell" }, entry.age), index.h("div", { class: "smoothly-table-cell" }, entry.balance), index.h("div", { class: "smoothly-table-cell" }, entry.eyeColor), index.h("div", { class: "smoothly-table-cell" }, entry.gender), index.h("div", { class: "smoothly-table-cell" }, entry.company))))), index.h("smoothly-table-foot", { key: '83a80716272f3eebb9518bd5b296993e4f7d6b92' }, index.h("smoothly-table-row", { key: '0f7966294282503dda26e998bb71de4d823164ad' }, index.h("div", { key: '674c82e6336b96ee78581d92d741897e91ce3416', class: "smoothly-table-cell" }, "Footer Cell"), index.h("div", { key: 'c6e763fce4cd9e7b6ff1995dd460c4445de828e2', class: "smoothly-table-cell" }, "Footer Cell"))))));
+            } }, this.loadingIndex === index$1 && index.h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index$1) && (index.h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), index.h("div", { class: "smoothly-table-cell" }, entry.id), index.h("div", { class: "smoothly-table-cell" }, entry.registered), index.h("div", { class: "smoothly-table-cell" }, entry.name), index.h("div", { class: "smoothly-table-cell" }, entry.age), index.h("div", { class: "smoothly-table-cell" }, entry.balance), index.h("div", { class: "smoothly-table-cell" }, entry.eyeColor), index.h("div", { class: "smoothly-table-cell" }, entry.gender), index.h("div", { class: "smoothly-table-cell" }, entry.company))))), index.h("smoothly-table-foot", { key: 'afd2dd1e070066cc36766b0d280ca2d76d121c17' }, index.h("smoothly-table-row", { key: '19ec4cbc323e89abb5bd16dcfa8a6a35e9117368' }, index.h("div", { key: '241073cc79df5445097b1f94d7a6f861dc422222', class: "smoothly-table-cell" }, "Footer Cell"), index.h("div", { key: 'd16ee2b2ca07a90beabd7aac03aff2bcd370537d', class: "smoothly-table-cell" }, "Footer Cell"))))));
     }
 };
 SmoothlyTableDemoNestedNoCell.style = SmoothlyTableDemoNestedNoCellStyle0;
@@ -12610,7 +12610,7 @@ const SmoothlyTableDemoNestedNoCellInner = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '2e4caa396647eb50a79dd897ac13bbe021335048' }, index.h("smoothly-table", { key: 'ef9a35da01f532ff7d83740eb016c3de9adfa2c7', columns: 4 }, index.h("smoothly-table-head", { key: '287be82074a99020ecd36fb8b15592d4c00dfc53' }, index.h("smoothly-table-row", { key: '673c69c9d5bf2431173ed168e1c3ac30dc997e89' }, index.h("div", { key: '4654bd574e6d20d3294408202b65e8019bd5ca1b', class: "smoothly-table-cell" }, "Id"), index.h("div", { key: '5966aba21aedc22a05697597a78bc9e2bacfcabe', class: "smoothly-table-cell" }, "Name"), index.h("div", { key: '4e26c9ac1a4e8019560d9b02f79a97d738c60f7d', class: "smoothly-table-cell" }, "Age"), index.h("div", { key: '141e63fc10bdf24d6cf53d7c6686937d74605e03', class: "smoothly-table-cell" }, "Balance"))), index.h("smoothly-table-body", { key: 'e39dee35a6e0c8df95f5d69c870bcaf6fdbc38cd' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("div", { class: "smoothly-table-cell" }, entry.id), index.h("div", { class: "smoothly-table-cell" }, entry.name), index.h("div", { class: "smoothly-table-cell" }, entry.age), index.h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
+        return (index.h(index.Host, { key: '444b8b9aba8218aab71a427719d96894c7d425d1' }, index.h("smoothly-table", { key: 'ca7410f6d894edeaf7802aff771faff87d14862d', columns: 4 }, index.h("smoothly-table-head", { key: '2bbbaa3a17bf974029cc7d537da4cd017cf117a4' }, index.h("smoothly-table-row", { key: '54b6b994a1a6c4265d3b159e176b6c1c3d52d557' }, index.h("div", { key: 'dcc13f0e6bde4d587df21b00fc0aa0f3edca7068', class: "smoothly-table-cell" }, "Id"), index.h("div", { key: 'a2767befa861b3365db8272b42f51226fc8950b3', class: "smoothly-table-cell" }, "Name"), index.h("div", { key: '7d626ce0e9fcf1701bc03c252f67e76f323d8c47', class: "smoothly-table-cell" }, "Age"), index.h("div", { key: '2c1332d2b80257a5416ca9c7bdea0d3cf1549b09', class: "smoothly-table-cell" }, "Balance"))), index.h("smoothly-table-body", { key: '5f52c3163444fa862614e7b7b9171fd748e4f013' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (index.h("smoothly-table-expandable-row", null, index.h("div", { class: "smoothly-table-cell" }, entry.id), index.h("div", { class: "smoothly-table-cell" }, entry.name), index.h("div", { class: "smoothly-table-cell" }, entry.age), index.h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
     }
 };
 SmoothlyTableDemoNestedNoCellInner.style = SmoothlyTableDemoNestedNoCellInnerStyle0;
@@ -12623,7 +12623,7 @@ const SmoothlyTableDemoSimple = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '427b5d3763dcdb304407d22f95065d83fc678561' }, index.h("smoothly-display", { key: 'd11d4514408946e49a30a2a2b8aab585ffd8f1dd', type: "text", value: "Simple" }), index.h("smoothly-table", { key: '27626d9213b1b24c216991772435a3349408b78c', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: 'c4e49138fd8500b55a48c3af8e76cb4e8b97f2c6' }, index.h("smoothly-table-row", { key: 'e91a2bd4d5b6f989aa11259f1feb0a1f59d8046c' }, index.h("smoothly-table-cell", { key: 'e8b4cd83c8fbf55ebd1745a5948ec8912867b896' }, "Breed"), index.h("smoothly-table-cell", { key: '88d67cebb6e6d1740ca7640e7648d3e97500f9e6' }, "Coat"))), index.h("smoothly-table-body", { key: 'a36dd3a39a7ba1e622ef1739c40ebaff2cc4fe76' }, cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-table-row", { key: 'd44308c45940471e065b52f10d6e692e9d096c06' }, index.h("smoothly-table-cell", { key: '3c25e702564c5111724ed3b55842c3d3b3d635ee' }, "Cell5"), index.h("smoothly-table-expandable-cell", { key: 'd89769e142074a80e1ed04a2ac3561e5dcdcec3a' }, "Expandable Cell", index.h("div", { key: '53e2feb80a331c168b280af99c2b93c64b280e0f', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-table-row", { key: '7fb4d39de015e03afab065c5dbdbc384fff1668f' }, index.h("smoothly-table-expandable-cell", { key: '914bcdc57a76cb2a618c2a25c54d62a06e341283' }, "Expandable Cell 1", index.h("div", { key: 'b7e6f046259646482480b735811cc02de0028c60', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-table-expandable-cell", { key: '4162b44ead1175fa1216edb49249e2af3db0e31f' }, "Expandable Cell 2", index.h("div", { key: '443f584a2a03a09eff2c4d580850d6b8a249b595', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-table-foot", { key: '0617de0f60b3585610940e7244e53843c070648c' }, index.h("smoothly-table-row", { key: 'c809a2471fb1902016706a73d693824af4d184e5' }, index.h("smoothly-table-cell", { key: '22f0e37f0db31dd4a4aa0baf888032253bf2a5ce' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '221533ebb306f72640d7b85aac9bba61a881fffd' }, "Footer Cell"))))));
+        return (index.h(index.Host, { key: '21c998eec33932eab08fff0dfd53e6fa297e7334' }, index.h("smoothly-display", { key: 'aa043f90ab8250c1aa26815aae4e311db64542a2', type: "text", value: "Simple" }), index.h("smoothly-table", { key: 'ae03f6e207ffcb628199215826d288977e6430fe', color: "primary", columns: 2 }, index.h("smoothly-table-head", { key: '5d298d98ba326f7baccd57e0a5e3acbaaebea243' }, index.h("smoothly-table-row", { key: '70b7ef7741b7b1a3711eff790ebc1436e8326643' }, index.h("smoothly-table-cell", { key: '324f5cd22f25b594d1c089e101470e848465c7c0' }, "Breed"), index.h("smoothly-table-cell", { key: 'cba1d1ad48208c47d85231da1917744df53a6fab' }, "Coat"))), index.h("smoothly-table-body", { key: '3a4f0841f7f2bf4f835aa8340db47aeea9ecc000' }, cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country:", index.h("br", null), cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), index.h("smoothly-table-row", { key: 'e11b4e8efc204e42533175d5ccbc1a22c659087e' }, index.h("smoothly-table-cell", { key: 'a489cad0aa507c26a67ebc9d5f281d95b95f07fd' }, "Cell5"), index.h("smoothly-table-expandable-cell", { key: 'e02cea5f9a5f3d83404733ccf11dc77e45baed26' }, "Expandable Cell", index.h("div", { key: '5c0898ecc5b32a79b0593d03a841c5350ce03e54', slot: "detail" }, "Content of the expandable cell"))), index.h("smoothly-table-row", { key: '93cac1a78f4791799ee83e1ab1195d29322e1ab9' }, index.h("smoothly-table-expandable-cell", { key: '7efaab4e485262a38c517d006be201dbc7e4f9d1' }, "Expandable Cell 1", index.h("div", { key: '25e40930b076b921a7b6a9fa577086c0edc26a92', slot: "detail" }, "Content of the expandable cell 1")), index.h("smoothly-table-expandable-cell", { key: '034738ad72093a676787f2b6e4cb6a263d4af52e' }, "Expandable Cell 2", index.h("div", { key: 'f7068d9d304d485ef8ae58d3658280bc8c99eeb3', slot: "detail" }, "Content of the expandable cell 2")))), index.h("smoothly-table-foot", { key: 'fb3df1ab1ad3a9a5e6f162e25cf67a018e62f2b5' }, index.h("smoothly-table-row", { key: 'fbd654a282d65be6212eb174b3a8946a369e548a' }, index.h("smoothly-table-cell", { key: 'd87028668db3c970ffdd5d7830133791ed4be8e6' }, "Footer Cell"), index.h("smoothly-table-cell", { key: '06fedb739b1425cc6679a091c37af7ec562ad4da' }, "Footer Cell"))))));
     }
 };
 const cats = [
@@ -12731,7 +12731,7 @@ const SmoothlyTableExpandableCell = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '556f7eca8f3dc2d2ca17e5d82be2621922f8a2b5', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, index.h("div", { key: 'a5b2fbbe782b391f28f443bc063c7e27033be1bd', class: "content" }, index.h("slot", { key: '3881144b28625f84489704ea1c76fc6981579119' })), index.h("div", { key: 'e27a007486cd81d8a6c36cd785ff4dd548b75b6f', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, index.h("slot", { key: 'b9792f456aa52a9a42bee53268f9110a15579e12', name: "detail" }))));
+        return (index.h(index.Host, { key: '84f3c8a4664973e81792e70892eb73e966ee637c', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) }, onClick: (e) => this.clickHandler(e) }, index.h("div", { key: '565c8de0530fc0d6209f93b426cc546e6f58a68e', class: "content" }, index.h("slot", { key: 'ffb926cf5bae4a07a16f67ebbe8e837f412ac9f4' })), index.h("div", { key: '18ece9c57309445e82593e79006c5fa4287b794e', class: "smoothly-table-detail", ref: (el) => (this.detailElement = el) }, index.h("slot", { key: '1999563802d67cdd1b600b81fda23aec75b546b0', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12761,7 +12761,7 @@ const SmoothlyTableExpandableRow = class {
         this.smoothlyTableExpandableRowChange.emit(this.open);
     }
     render() {
-        return (index.h(index.Host, { key: 'a65bc97d66bc01dc5473e4d49cdd9aba68a22741', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '1cbe4f21fc60a26dba1fc3ab465df6e23112bc2e' }), index.h("div", { key: 'c150efa814b01a1208f17430fcae4c8bd2b2fc52', class: "smoothly-table-detail", ref: e => (this.div = e) }, index.h("slot", { key: '99bc09c99dd7dd65e2992ccc6423f4b81d308ce3', name: "detail" }))));
+        return (index.h(index.Host, { key: 'e250c54b8b6cb88eceac9e38250b959fd568a3e7', onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '40fde0e8066cbb58188101933597e3110a841c57' }), index.h("div", { key: '45a6e9e451b2f33a10b12bf60b209b157d72baf7', class: "smoothly-table-detail", ref: e => (this.div = e) }, index.h("slot", { key: '75f3b14ab415f3c58714b43a794cf2c035a16a72', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -12777,7 +12777,7 @@ const SmoothlyTableFillerRow = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("smoothly-table-row", { key: '286b6d3f9f8bff5514b1f2f9dd3dd2aa67e907f1' }, index.h("smoothly-table-cell", { key: 'a5acf7b7a17d8a0100e0decca5d112b14097e683' }, index.h("slot", { key: '29871cb5fe247bb8b6336444c0b2305aaf417f10' }))));
+        return (index.h("smoothly-table-row", { key: '4a074ae88327a156113feea5a7b91d5a754a1777' }, index.h("smoothly-table-cell", { key: '3788642cb07f9abda2d344a5ac1161b90b439572' }, index.h("slot", { key: '539714e26747cfd57efc37ae008897495008544d' }))));
     }
 };
 SmoothlyTableFillerRow.style = SmoothlyTableFillerRowStyle0;
@@ -12790,7 +12790,7 @@ const SmoothlyTableFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '9c96c38e06369b33c01c4b146a99eec8f650be9c' }, index.h("slot", { key: '2c20e429284384d5dfe1ed5c5ef6b6425a7e77af' })));
+        return (index.h(index.Host, { key: 'fe18290c9a9ca66fb6d55aabdf987e027ed5e059' }, index.h("slot", { key: 'a5c4fa05f7ce981587a2491d05967525b616682a' })));
     }
 };
 SmoothlyTableFoot.style = SmoothlyTableFootStyle0;
@@ -12821,7 +12821,7 @@ const SmoothlyTableHead = class {
         (_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (index.h(index.Host, { key: '3104a69b79e8818ca7af2d096dcedca14b0f0795', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: '7ac2dbabd41beb43848d0472a9497ec9ce669b39' })));
+        return (index.h(index.Host, { key: '23c43ddf466c7b5b465dbae62efb897c6e68c1c8', class: { scrolled: !!this.scrolled } }, index.h("slot", { key: 'da3e20ed36aa24fd175205ca0700c59929bc291b' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -12845,7 +12845,7 @@ const SmoothlyTableRow = class {
                 event.target != cell && cell.close();
     }
     render() {
-        return (index.h(index.Host, { key: '033b5662402dd5860be65c4529f8d49da3e1c0e5' }, index.h("slot", { key: '4d4a85cd5bdb7e3ec2cb2ad781b3cd8f86d0a925' })));
+        return (index.h(index.Host, { key: 'b1f92556b67adc1aa3d84e7e46b91435cf418a87' }, index.h("slot", { key: 'f902bc70361a0b94b66cb9b1078383a8200279f3' })));
     }
 };
 SmoothlyTableRow.style = SmoothlyTableRowStyle0;
@@ -12869,7 +12869,7 @@ const SmoothlyTableRowGroup = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8ebfb43f311c33753dd6d749ef2362af1ea7cfbe' }, index.h("div", { key: '2d1846051cb536cc79a014187d3189ef6bac6fb4', onClick: () => this.clickHandler() }, index.h("div", { key: '6342be3d05b90633e8b2daa584629e60fd336b22' }, index.h("slot", { key: '91840077085722aeb2fccc77a126c27c47a20ecd', name: "start" })), index.h("div", { key: '4023dbac459849a6859bc03006b1d7f45d530d5e' }, index.h("slot", { key: 'db247beaaef2b10c76efd648fe562b0414177dd0', name: "end" }))), index.h("div", { key: 'a2387169d4bd16c927d75d5d11d286631f133b94' }, index.h("slot", { key: '6e85abb5c56cc4b79246442cf287f9104ab25cb0' }))));
+        return (index.h(index.Host, { key: '94fbd7718fe14b2714ef06a04964e0e384f74e5b' }, index.h("div", { key: '84f82be24517d5523a16a0bb2bf9bed0e6b5d033', onClick: () => this.clickHandler() }, index.h("div", { key: 'cac4edc4f8860f55f6147e79adbc118993bce511' }, index.h("slot", { key: '9df591df4dc4e5830fd5bd4700f05ebbceb3b1c5', name: "start" })), index.h("div", { key: '7878cc8f67b9d2b7b4efacb249fb6fa7b392001c' }, index.h("slot", { key: 'f7048c813791dbc090edc79a0a2aa68e3dda3d6f', name: "end" }))), index.h("div", { key: '96d15a2807c0dd0d8f4678aa86cc87ad665a7083' }, index.h("slot", { key: '20ad4cc5343f37be527d91c06805d81df99ffed4' }))));
     }
 };
 SmoothlyTableRowGroup.style = SmoothlyTableRowGroupStyle0;
@@ -12938,7 +12938,7 @@ const SmoothlyTabsDemo = class {
         this.extraTab2 = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '29421ef4f99721461b19f11c0969974959da11b7' }, index.h("div", { key: '3546ec67efcedf780ff5781755df686e2c04fe0e' }, index.h("smoothly-button", { key: '69671f23e970f32320a347d0c75fd94044d19f7f', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), index.h("smoothly-tabs", { key: '20c85a590229cc970e657ca9fcbaa6e2d17b083b', tabs: "multiple" }, index.h("smoothly-tab", { key: 'd6d821dc2badea6de18a116b013214c36f0e1af0', label: "Single Tab", open: true }, index.h("strong", { key: 'a0e5b01afaecd1994c4805db24e8560ae9ce6309' }, "Single Tab content here."), " If only one tab is available setting ", index.h("code", { key: '9425b3ee81d6c6cad8af5b5319719f36cbb17232' }, "tabs"), " to", " ", index.h("code", { key: 'c70a8a3bec7f7ab442b3f845da0c5e28ab0714e4' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (index.h("smoothly-tab", { key: '69df20e89396a6004bbf5766ebcf35cadaf9df5d', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), index.h("div", { key: 'cb0ed6c7832aaac46a26fa224bfd7e7cb080c07e' }, index.h("smoothly-button", { key: '6062636c63d395b8fc58a9e76d52243184f685e2', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), index.h("smoothly-tabs", { key: '37bcdd53515f35ff4e3a1d1b671546f626447130' }, index.h("smoothly-tab", { key: 'f65f24d7db8911f888fb3db2acdbf17b80bef317', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), index.h("smoothly-tab", { key: '5c8ee86d81bc684d8d6d4304b7fe3efa3546930c', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: '4d2994b727dd9651308e3fbf3f7e91b282f6a452', label: "test2" }, "this is a test message!"), this.extraTab2 && index.h("smoothly-tab", { key: '5199f2a4d47fd5fc89b9eb423f439f7b1e9e6129', label: "test-extra" }, "this is a test message!"))));
+        return (index.h(index.Host, { key: '136212df40cf7a4188debcab2a1d9fd4882fd141' }, index.h("div", { key: 'c22e1a38ebd895797f30f021aa838daeb044c7d4' }, index.h("smoothly-button", { key: 'f0f0c2b38bdc5c097309971cf0cff3529ec02b86', color: "primary", onClick: () => (this.extraTab1 = !this.extraTab1) }, this.extraTab1 ? "Remove" : "Add", " tab")), index.h("smoothly-tabs", { key: 'c0e7983c6a27e40a09e6cc60828a9ff76abef094', tabs: "multiple" }, index.h("smoothly-tab", { key: 'b98ca2740f3864e085525c24d83e3a1b2c451277', label: "Single Tab", open: true }, index.h("strong", { key: 'd93f54bee41713b9d6b640877b7c04e1f60d1fb9' }, "Single Tab content here."), " If only one tab is available setting ", index.h("code", { key: 'e99970353ed0396a481b5b48791289d815f98864' }, "tabs"), " to", " ", index.h("code", { key: '4049e41bd11e79227abc4fd37adec0cfc7b30110' }, "\"multiple\""), " will hide the tab navigation and display the single tab's content directly."), this.extraTab1 && (index.h("smoothly-tab", { key: '6a8c65b134534001a49d90848dcfb75b3bb269bf', label: "Extra tab" }, "When there are more then one tab, the tab navigation will show."))), index.h("div", { key: 'cf970339a9b2743445a86bacf2be674428b91488' }, index.h("smoothly-button", { key: '68cadbe05272a51757616a53fafa47df229f51de', color: "primary", onClick: () => (this.extraTab2 = !this.extraTab2) }, this.extraTab2 ? "Remove" : "Add", " tab")), index.h("smoothly-tabs", { key: '8423c5727df336508ec030a0b41ab0b1f26f9404' }, index.h("smoothly-tab", { key: '722afe6740c99b3456f37e97f479ab1aa48d7b6d', label: "Disabled tab", tooltip: "Tooltip for test3", disabled: true }, "this is a test message again!"), index.h("smoothly-tab", { key: 'eaae13852f547e304a92ba516a2b621acaa3c068', label: "test1", tooltip: "Tooltip for test1", open: true }, "Hello world!"), index.h("smoothly-tab", { key: 'e8e8c71f3675cb0c8d2001af5e10baa23c1d61b6', label: "test2" }, "this is a test message!"), this.extraTab2 && index.h("smoothly-tab", { key: '22a78411d922deb63e705b5e3d562de325374f40', label: "test-extra" }, "this is a test message!"))));
     }
 };
 SmoothlyTabsDemo.style = SmoothlyTabsDemoStyle0;
@@ -12952,7 +12952,7 @@ const SmoothlyThemeColor = class {
         this.color = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '9ed7ac41d54a43b507d2639c8a0e889c06d7190b' }, this.color, ["tint", "color", "shade"].map(variant => (index.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
+        return (index.h(index.Host, { key: '42baa97b1781277dd3c4f854e3c9c2ffb8f2b864' }, this.color, ["tint", "color", "shade"].map(variant => (index.h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
     }
 };
 SmoothlyThemeColor.style = SmoothlyThemeColorStyle0;
@@ -13004,7 +13004,7 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b0a9615c61e3692238aaa8de2061fb0ced746920' }, index.h("h2", { key: 'fc086a96c65eda4b27f0f634526fc4058eca7fe1' }, "Theme"), index.h("smoothly-theme-picker", { key: 'e3ad28d4d3b457431c03190472214000558f6fda' }, index.h("smoothly-item", { key: '0c55245e030aaa6de6db4687fa74ac15ee2fb161', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: 'bedbe004e175e9eac2ee9539889ddb15aec89b07', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: 'e2376b4a5af287337c960688229d2976923b06ee', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '51e53922688b41afe8a9755ac3b7963f0a6fca65', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '858e96045cda14855ab29168d5584351af619046', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '3ff612aad765ab0216433c763b7c338c7ff1cd4b', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '1806fd6647145e5fd5dd662b9acb270a1f19bac8', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '82fda2f5b5c3c16c2cd588ca3cc7d22c589b71ec', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '0f55eb2a7e0a2c73c650eed5a0301944da7e76c9', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'a0679c0c72126f7bc7db8804d3497145df84c52f' }, index.h("smoothly-theme-colors", { key: 'b7bdd5e0dd6451817cb81ddf29d0db2366b5b5a5' }), index.h("smoothly-theme-guide", { key: '275f5e5990675d1cef75a951abeaa9339ad8e53f' })), index.h("smoothly-button", { key: 'bafa07ebe69de60134c37159686cccf8f93f0ee4', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '0ff5101b5f9961976ca8c3e8fdf071e0ad750f61', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'ea56c788907f930d96be1a6e96a9c954f56459c1', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: 'd56bd965aedd96e5c718bc09ffead778acdb36bf', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: '0b277c907ea1794a56fa4e3f6b42818cbbd03cd2' }, index.h("h2", { key: '1deba46da6a4eb41476efd55f2614a3e87475871' }, "Theme"), index.h("smoothly-theme-picker", { key: 'd3db3d49e05965192e8debeb9e17ba694669c000' }, index.h("smoothly-item", { key: 'd6352f35c2b237b924e9c028d62aa0622c5eca4c', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '42c974c604eb25cd1e9bf87ff0810a168a7bcc0b', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '1fc5cf5deff84d908cd960f3111ee76051a87be8', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: 'd9734a2fa698079d8827a92c83afe2e6ac43ba4f', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: 'c42221a4d9d34280adbe7d1d61802251dbf8dcd5', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '71b66d2755d350ece53dba4d2d2405fa875ce4c9', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '7409342456878588d3ad49e959b76c1690e0016d', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '372d067497afea8a2b3e27c012ad164a91eaedc0', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '3c848a0b0b4e93a5e13dd201d5b9bef8e77502ee', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: '34568bfcfccd010dca6b66dfff7cfa6c17a7a1d7' }, index.h("smoothly-theme-colors", { key: '54a9f8abe1c117063bd69e322736d7752321d5ab' }), index.h("smoothly-theme-guide", { key: 'b073e84ebbbbeb4a2c492b9660d1957067a7dc35' })), index.h("smoothly-button", { key: '568670dd3eaedfa825a7e3aeec4d4b921e189b34', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '570e70bb05a25c699550210288446e33d836494a', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'd9bf767aef86a83ced4940119a29454cb749d977', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '45e73698049ae5c9c080a6d34f75b3c0c996e398', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
@@ -13018,14 +13018,14 @@ const SmoothlyThemeColors = class {
     }
     render() {
         return [
-            index.h("smoothly-display", { key: '0623cf2eba5807da311f35b17ff2c83029aa86fc' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            index.h("br", { key: 'e4c1b723ee60a751f42b7d11ab81528ae25f9c33' }),
-            index.h("smoothly-display", { key: '2fb439d0376882bcbf39ef4fe8461432a27ec325' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
-            index.h("br", { key: '729cef3380ce5f94f7c3f0c509b63d23f9446fb0' }),
-            index.h("smoothly-display", { key: '378ead03c4ac2ba8e8b1525eaa56d2b2c04a9425' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
-            index.h("br", { key: 'a6c9ed53309c4564fd8dfb7b120a23c5d91ec35a' }),
-            index.h("smoothly-display", { key: 'e5b61b47d634d7dddf821ef6a2aeccdb2888fe3a' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            index.h("br", { key: 'fe18968c970682db184ca68c59d8d500c33ac588' }),
+            index.h("smoothly-display", { key: '4623ec45f8fde0164efd4bc4e02df3cb3f778a19' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            index.h("br", { key: '63b701dc1e6b2147e30508904b9189628709d3b0' }),
+            index.h("smoothly-display", { key: '48dd76ac1ac6ff0dabaa284086f2092849e4a80b' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
+            index.h("br", { key: 'e1c6fb9a1a4219a1e7ac178448c8ee5e7298e8e0' }),
+            index.h("smoothly-display", { key: '3c5c340eb79c37914d426f427d45a59b6c4a9d9a' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
+            index.h("br", { key: '3c5e3be09bb64508284a309d8aa4f0defbdd5c79' }),
+            index.h("smoothly-display", { key: '3e7209fc7b9e7e9736d493ce009d0ffd625f7a94' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            index.h("br", { key: 'd1c80da9f53a23cce99b4ed6aa95b0f3122cd398' }),
         ];
     }
 };
@@ -13040,11 +13040,11 @@ const SmoothlyThemePicker = class {
         this.element = "smoothly-css";
     }
     render() {
-        return (index.h(index.Host, { key: '7e3474a523f553c83808f86ac3b9acbef0048265' }, index.h("smoothly-input-select", { key: '46ed5955c0e70055bf2f2e8f34a3b1681ed33993', name: "theme", looks: "border", onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'b1aeafa61d13b6ae3272345cbe38a3a248e68f8d' }, index.h("smoothly-input-select", { key: '8272ee2fe83068c46ddc4745659d3760214a292f', name: "theme", looks: "border", onSmoothlyInput: e => {
                 const element = document.querySelector(`#${this.element}`);
                 if (element instanceof HTMLLinkElement && typeof e.detail.theme == "string")
                     element.href = e.detail.theme;
-            } }, index.h("label", { key: 'f7af435de18a326e8bf840a3705c63f106132ced', slot: "label" }, "Select theme"), index.h("slot", { key: 'c750d585b1a2b828da7352ff5b783880f60c2ba3' }))));
+            } }, index.h("label", { key: '779487e72c21a2dcd9275056ce6a52ffacf8df3b', slot: "label" }, "Select theme"), index.h("slot", { key: 'd8bbc11dbeb637edfbfb521e2ef9a5bf1a7da311' }))));
     }
 };
 SmoothlyThemePicker.style = SmoothlyThemePickerStyle0;
@@ -13068,7 +13068,7 @@ const SmoothlyToggleSwitch = class {
         this.smoothlyToggleSwitchChange.emit(this.selected);
     }
     render() {
-        return (index.h(index.Host, { key: 'f6a19c24554aee8aa1e1cb16c35b3e78cdb033d1' }, index.h("button", { key: '6bea08c0082a81c3b7f55f1b393e69c3c409a6d9', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: 'd41cf1bed0df32e75a8dbf20d9d111a64d993f80', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
+        return (index.h(index.Host, { key: 'e3f2ddfa3a26fd25b1c979080beb81ac7eaae55f' }, index.h("button", { key: '9ea00df3b4927a4d8066a15e8c60666436aedae1', type: "button", disabled: this.disabled, onClick: () => this.handleClick() }, index.h("smoothly-icon", { key: '8e8138d38e102db3bca1b5ccb1375e1d405b2f77', color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
     }
 };
 SmoothlyToggleSwitch.style = SmoothlyToggleSwitchStyle0;
@@ -13081,7 +13081,7 @@ const SmoothlyToggleSwitchDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '99f60d67901a1be3f9c76eebcc4bac2e1f070988' }, index.h("h4", { key: '9c0593c83f4aa26b0f4f4a07287386e4a5621b92' }, "Toggle switches"), index.h("div", { key: '049d434b0b0acf35d44d42b47d752f3c5796c237' }, index.h("p", { key: 'bd281e749720e9fa4359fcd7c981a88bb8f5e14c' }, "Checkmark"), index.h("span", { key: 'b4c75e8d922d4f0955a6c4e7a4d92bf633d31880' }, index.h("p", { key: '36171f87439770a862d858cbab498198e0f4c9b3' }, "Tiny"), index.h("smoothly-toggle-switch", { key: 'e2588d18bdad4cadff3a77d5b5d83c1c9d00df10', disabled: false, size: "tiny" })), index.h("span", { key: 'b3313971025e732cc3b11044d6ddf30cc6e687f9' }, index.h("p", { key: '4402a732fccdded3bdfd73a8ff92282d298f2061' }, "Small"), index.h("smoothly-toggle-switch", { key: 'e73212de2569f245739a3cb9eae6e7260cc71645', disabled: false, size: "small" })), index.h("span", { key: 'd5508fdcd35848b697c65cbba1fbb62eaabe9a2e' }, index.h("p", { key: '48528f123aab39314aa7da4b014ef71f5eaa3abb' }, "Standard"), index.h("smoothly-toggle-switch", { key: '250bfaf0584cf71d5206fb26aa7ddee1fcf2bfca', disabled: false })), index.h("span", { key: '05ea31039aec424481d1560712a591105ab2efb0' }, index.h("p", { key: '8169e47718330a118190f8aadb28bb80d5b95c7c' }, "Large"), index.h("smoothly-toggle-switch", { key: '9e10bd3e0ecb71261d10d196ed0304a89b277224', disabled: false, size: "large" })), index.h("p", { key: '8cbf97718c658936079fd084f7a352910970d754' }, "Colors checkmark"), index.h("span", { key: '873b2dcada84d319eadf5ee19f9dad3e70903051' }, index.h("p", { key: 'fe134c17883d512bf1068797199012cd601cd734' }, "Danger"), index.h("smoothly-toggle-switch", { key: '1beae26e7c4eaad1bd42e90486e3846ca14d5937', color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'fae035c69d5ed9106d2ee12f8eb3d5abfea21409' }, index.h("p", { key: '480dc2874d20cd56ad454e62fb4b1a7e09ad19c5' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '8ef71f3201724b469201a7eb819124c2bc181448', color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'e3cfa48df237ae1b3d31604d9db176392fb5b616' }, index.h("p", { key: 'd49abaafa7da928914c645972d61112a275bac06' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '9a347c2de169c136164a56830e3c779c03a9173f', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: 'ad7c7952db0e24de2c9733038fea36e718d61a6b' }), index.h("p", { key: '31ef6f0dda2bae3b4a6c38c6b3673d44afe31638' }, "Colors no checkmark"), index.h("span", { key: '76c0ab92b50af41349afdc5296cf267c655e9fd1' }, index.h("p", { key: '4d1024cf78e89ca1ea83ceab0dd1919022f22b71' }, "Danger"), index.h("smoothly-toggle-switch", { key: '0133c24cefb5b4a01f243d880586dd00cbb8511c', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: 'a3b2205336c214fc7a9c151d24a790e4f28038fb' }, index.h("p", { key: '63f6d2d6aac041ea137a00dcadefd624c863e630' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'fb912293a5726ef665fa66aa98444013e3e111ea', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: '3c6f030802b3a4c5ee495ba5bfe0119ff8706a99' }, index.h("p", { key: 'b13a4d1250a6462be99ccc678e67a403c0f56ce0' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '6532dbebf90c5f61789dfb1db4722e5af3e5b10e', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
+        return (index.h(index.Host, { key: '5dbda4d44ea5349aa45da737b4450004f7cae52b' }, index.h("h4", { key: '3740b6d4fe454a280a9167cc8375daaa1e363bd7' }, "Toggle switches"), index.h("div", { key: '62e3a5ba2a9f38f94d773270076e3598496dcedd' }, index.h("p", { key: '039371bda3be7f967bf6afc5eff1cdefe3f1c167' }, "Checkmark"), index.h("span", { key: 'b061009f2386fd46ec0900f8048e10e7fb950ee7' }, index.h("p", { key: '7bcb9e120b38e621af1212186a8e9bbb77e5a96f' }, "Tiny"), index.h("smoothly-toggle-switch", { key: '85d90912b0fb2c52adbc8bc99e32e168e6260a76', disabled: false, size: "tiny" })), index.h("span", { key: '720c1f7a13195d292fc9c53fa90b98b06bd93031' }, index.h("p", { key: '1107caead1b2d8b551b0f2d317176ad517432eb0' }, "Small"), index.h("smoothly-toggle-switch", { key: '54aee2d81f59a4956ead42983e799acc51ae9ed3', disabled: false, size: "small" })), index.h("span", { key: 'f1db6e5661d3d6a4b9c5cd01f5cd733ace6f11b8' }, index.h("p", { key: '3c9d431736105891ac14901cd4adf1de6c0bea3b' }, "Standard"), index.h("smoothly-toggle-switch", { key: 'a4dc7bc928964ae5abb6b46e1b0428d355347354', disabled: false })), index.h("span", { key: '4dff89b25bf74e3a7c989622d782993dbeea628f' }, index.h("p", { key: '0d1f7390413b39258613973f0bb658336b20cc55' }, "Large"), index.h("smoothly-toggle-switch", { key: '0140f25ee7b512a1c9d8ee3df26d70bd11d3e05c', disabled: false, size: "large" })), index.h("p", { key: '9341ee88ca1f7b855c631ccbb505e9cd7d01e99d' }, "Colors checkmark"), index.h("span", { key: '495f9660284d48ac6f5b586d5fbb847fe83df27d' }, index.h("p", { key: '65a85d63c0dd309a88e840d179cff00a364fbb87' }, "Danger"), index.h("smoothly-toggle-switch", { key: '0bacbf0a0528501caffe78600e3d810ed96d24ad', color: "danger", disabled: false, size: "small" })), index.h("span", { key: '3f6060bf69fc8ab291ff5cd8ca7585f651906b55' }, index.h("p", { key: 'df9822f711e77200e227a72734ab2e573b0b9656' }, "Primary color"), index.h("smoothly-toggle-switch", { key: 'b28619a9a9ae1f6fd6816bd1037e872d2d2d5162', color: "primary", disabled: false, size: "small" })), index.h("span", { key: '7c16f7e88359961b0672dadb0eb481d362157e0a' }, index.h("p", { key: 'bd015cb3a79fc1cf7de23227397e6e189d2f1eef' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: 'fb228aac8c9554b021b0cdad65897ff36e5214a6', color: "secondary", disabled: false, size: "small" })), index.h("p", { key: '988d7d2ba06432774bacefc968bf21d23faf7d27' }), index.h("p", { key: '75aa809dfb5c92312ceb85387acfd1c8a7aa323e' }, "Colors no checkmark"), index.h("span", { key: '6a685a024ce77955232c7cbf0d871ab4fe2e2869' }, index.h("p", { key: '3b954a964233b83a549d081246d13271056249e3' }, "Danger"), index.h("smoothly-toggle-switch", { key: '105be4cea36cea72dd88cfc1b0f4bb116492f143', checkmark: false, color: "danger", disabled: false, size: "small" })), index.h("span", { key: '3d8b82453b8d5184451caa56b8d50937899c24e1' }, index.h("p", { key: 'fd802d1f8a93a52160e88ef907441548463fed26' }, "Primary color"), index.h("smoothly-toggle-switch", { key: '6b8b110b99b2746de304e388629e6a4245d0e456', checkmark: false, color: "primary", disabled: false, size: "small" })), index.h("span", { key: 'e3f236fc84433cecd3da0fe1069b2e7b4b378c63' }, index.h("p", { key: '9de6cc9c6dfb0a72f1d7998a844b61920e7c05b8' }, "Secondary color"), index.h("smoothly-toggle-switch", { key: '5fbaa89e9e18eb7104d0816ce08376ea4b3d52c4', checkmark: false, color: "secondary", disabled: false, size: "small" })))));
     }
 };
 SmoothlyToggleSwitchDemo.style = SmoothlyToggleSwitchDemoStyle0;
@@ -13112,7 +13112,7 @@ const SmoothlyTrigger = class {
                 result = this.disabled ? (index.h("slot", null)) : (index.h("a", { onClick: e => this.onClick(e) }, index.h("slot", null)));
                 break;
             case "button":
-                result = (index.h("button", { key: '2236548dea3c7f1234348e4534bdfb1c8f62d580', disabled: this.disabled, name: this.name }, index.h("slot", { key: 'ea285e18a7a242e02b7ebc64136da8fc4afb3dfa' })));
+                result = (index.h("button", { key: 'c882ba84197f445669664fe22b0e78b4995fd0ad', disabled: this.disabled, name: this.name }, index.h("slot", { key: '50bc150c8de2fb7213836ef40c363a426acfd590' })));
                 break;
         }
         return result;