smoothly 1.0.0-alpha.143 → 1.0.0-alpha.144

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

@@ -8285,7 +8285,7 @@ var Clearable;
   Clearable.is = is;
 })(Clearable || (Clearable = {}));
 
-const styleCss$O = "smoothly-form{display:block;position:relative;--background-color:var(--smoothly-color-shade);--text-color:var(--smoothly-color-contrast)}smoothly-form>form{position:relative;min-width:15em}smoothly-form>form>fieldset{display:flex;flex-flow:row wrap;margin-inline-start:unset;margin-inline-end:unset;padding-block-start:unset;padding-inline-start:unset;padding-inline-end:unset;padding-block-end:unset;min-inline-size:unset;border-width:unset;border-style:unset;border-color:unset;border-image:unset}smoothly-form>form>fieldset>*{flex-grow:1;min-width:10em;flex-basis:40%}smoothly-form[looks=\"grid\"]>form>fieldset{border:rgba(var(--text-color), .5) solid .5px}smoothly-form[looks=\"line\"]>form>fieldset,smoothly-form[looks=\"border\"]>form>fieldset{gap:2em}smoothly-form>form>div{display:flex;justify-content:end;gap:1em}";
+const styleCss$O = "smoothly-form{display:block;position:relative;--background-color:var(--smoothly-color-shade);--text-color:var(--smoothly-color-contrast)}smoothly-form>form{position:relative;min-width:15em}smoothly-form>form>fieldset{display:flex;flex-flow:row wrap;margin-inline-start:unset;margin-inline-end:unset;padding-block-start:unset;padding-inline-start:unset;padding-inline-end:unset;padding-block-end:unset;min-inline-size:unset;border-width:unset;border-style:unset;border-color:unset;border-image:unset}smoothly-form>form>fieldset>*{flex-grow:1;min-width:10em;flex-basis:40%}smoothly-form[looks=\"grid\"]>form>fieldset{border:rgba(var(--text-color), .5) solid .5px}smoothly-form[looks=\"line\"]>form>fieldset,smoothly-form[looks=\"border\"]>form>fieldset,smoothly-form[looks=\"transparent\"]>form>fieldset{gap:2em}smoothly-form>form>div{display:flex;justify-content:end;gap:1em}";
 
 const SmoothlyForm = class {
   constructor(hostRef) {
@@ -8929,7 +8929,7 @@ const SmoothlyIconDemo = class {
 };
 SmoothlyIconDemo.style = styleCss$L;
 
-const styleCss$K = ".sc-smoothly-input-h{box-sizing:border-box}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-h[looks=\"grid\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);padding:0 0.4em;overflow:hidden;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));color:rgb(var(--text-color, var(--smoothly-color-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input:nth-child(2){margin-left:0.2em}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0;top:0.6em;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.7em 0.3em 0.7em 0.4em}input.sc-smoothly-input{padding:1.2em 0.3em 0.2em 0.4em;box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}[placeholder].sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-color-contrast)))}";
+const styleCss$K = ".sc-smoothly-input-h{box-sizing:border-box}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-h[looks=\"grid\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within) input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);padding:0 0.4em;overflow:hidden;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));color:rgb(var(--text-color, var(--smoothly-color-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input:nth-child(2){margin-left:0.2em}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0;top:0.6em;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.7em 0.3em 0.7em 0.4em}input.sc-smoothly-input{padding:1.2em 0.3em 0.2em 0.4em;box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}[placeholder].sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-color-contrast)))}";
 
 const SmoothlyInput = class {
   constructor(hostRef) {
@@ -9211,7 +9211,7 @@ const SmoothlyInputClear = class {
 };
 SmoothlyInputClear.style = styleCss$J;
 
-const styleCss$I = ".sc-smoothly-input-date-h{box-sizing:border-box}.sc-smoothly-input-date-h[looks=\"border\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-date-h[looks=\"line\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-date-h[looks=\"grid\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}.sc-smoothly-input-date-h{position:relative;max-width:100vw;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));min-width:18em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}@media screen and (min-width: 400px){nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));max-width:22em}}";
+const styleCss$I = ".sc-smoothly-input-date-h{box-sizing:border-box}.sc-smoothly-input-date-h[looks=\"border\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-date-h[looks=\"line\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-date-h[looks=\"grid\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"transparent\"].sc-smoothly-input-date-h{border:none}[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within) input.sc-smoothly-input-date{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-date-h{position:relative;max-width:100vw;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}[looks=transparent].sc-smoothly-input-date-h smoothly-input.sc-smoothly-input-date{outline:none}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));min-width:18em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}@media screen and (min-width: 400px){nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));max-width:22em}}";
 
 const InputDate = class {
   constructor(hostRef) {
@@ -9254,7 +9254,7 @@ const InputDate = class {
   render() {
     var _a;
     return [
-      index.h("smoothly-input", { color: this.color, name: this.name, onFocus: () => (this.open = !this.open), onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, looks: "plain", showLabel: this.showLabel, onSmoothlyInput: e => (this.value = e.detail[this.name]) }, index.h("slot", null)),
+      index.h("smoothly-input", { color: this.color, name: this.name, onFocus: () => (this.open = !this.open), onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, looks: this.looks, showLabel: this.showLabel, onSmoothlyInput: e => (this.value = e.detail[this.name]) }, index.h("slot", null)),
       this.open && !this.disabled
         ? [
           index.h("div", { onClick: () => (this.open = false) }),
@@ -9273,7 +9273,7 @@ const InputDate = class {
 };
 InputDate.style = styleCss$I;
 
-const styleCss$H = ".sc-smoothly-input-date-range-h{box-sizing:border-box}.sc-smoothly-input-date-range-h[looks=\"border\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-date-range-h[looks=\"line\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-date-range-h[looks=\"grid\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}.sc-smoothly-input-date-range-h{position:relative;display:block;width:fit-content;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;background-color:var(--background-color, var(--smoothly-color-shade), transparent);border-radius:0.25rem;cursor:pointer}smoothly-input.sc-smoothly-input-date-range{border-radius:var(--border-radius, none);background-color:transparent;width:var(--input-width);flex-grow:1}span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}";
+const styleCss$H = ".sc-smoothly-input-date-range-h{box-sizing:border-box}.sc-smoothly-input-date-range-h[looks=\"border\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-date-range-h[looks=\"line\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-date-range-h[looks=\"grid\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"transparent\"].sc-smoothly-input-date-range-h{border:none}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within) input.sc-smoothly-input-date-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-date-range-h{position:relative;display:block;width:fit-content;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;background-color:var(--background-color, var(--smoothly-color-shade), transparent);border-radius:0.25rem;cursor:pointer}smoothly-input.sc-smoothly-input-date-range{border-radius:var(--border-radius, none);background-color:transparent;width:var(--input-width);flex-grow:1}span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}";
 
 const InputDateRange = class {
   constructor(hostRef) {
@@ -9327,14 +9327,10 @@ const InputDateRange = class {
   }
   render() {
     var _a;
-    return [
-      index.h("section", { onClick: () => (this.open = !this.open) }, index.h("smoothly-input", { type: "date", name: "start", value: this.start, looks: "plain", showLabel: this.showLabel, onSmoothlyInput: e => (this.start = e.detail.start) }, `${this.labelStart}`), index.h("span", null, "\u2013"), index.h("smoothly-input", { type: "date", name: "end", value: this.end, looks: "plain", showLabel: this.showLabel, onSmoothlyInput: e => (this.end = e.detail.end) }, `${this.labelEnd}`)),
-      this.open ? index.h("div", { onClick: () => (this.open = false) }) : [],
-      this.open ? (index.h("nav", null, index.h("div", { class: "arrow" }), index.h("smoothly-calendar", { doubleInput: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : getLanguage.Date.now(), onValueChanged: event => {
-          this.value = event.detail;
-          event.stopPropagation();
-        }, start: this.start, end: this.end, max: this.max, min: this.min }))) : ([]),
-    ];
+    return (index.h(index.Host, { tabindex: 0 }, index.h("section", { onClick: () => (this.open = !this.open) }, index.h("smoothly-input", { type: "date", name: "start", value: this.start, looks: this.looks, showLabel: this.showLabel, onSmoothlyInput: e => (this.start = e.detail.start) }, `${this.labelStart}`), index.h("span", null, "\u2013"), index.h("smoothly-input", { type: "date", name: "end", value: this.end, looks: this.looks, showLabel: this.showLabel, onSmoothlyInput: e => (this.end = e.detail.end) }, `${this.labelEnd}`)), this.open ? index.h("div", { onClick: () => (this.open = false) }) : [], this.open ? (index.h("nav", null, index.h("div", { class: "arrow" }), index.h("smoothly-calendar", { doubleInput: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : getLanguage.Date.now(), onValueChanged: event => {
+        this.value = event.detail;
+        event.stopPropagation();
+      }, start: this.start, end: this.end, max: this.max, min: this.min }))) : ([])));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -9365,6 +9361,8 @@ const SmoothlyInputDemo = class {
           console.log("event duration", duration);
           this.duration = duration;
         } }, "Duration")),
+      index.h("h2", null, "Transparent inputs"),
+      index.h("smoothly-form", { looks: "transparent" }, index.h("smoothly-input-file", { name: "file" }, index.h("span", { slot: "label" }, "File"), index.h("smoothly-icon", { slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-picker", null, index.h("span", { slot: "label" }, "Picker"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("smoothly-icon", { name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "square" }, index.h("smoothly-icon", { name: "square-outline" }))), index.h("smoothly-input-date", null, "Date"), index.h("smoothly-input-date-range", null, "Date Range"), index.h("smoothly-input-select", { name: "transport" }, index.h("smoothly-item", { value: "plane" }, index.h("smoothly-icon", { name: "airplane-outline" })), index.h("smoothly-item", { value: "car" }, index.h("smoothly-icon", { name: "car-outline" })), index.h("smoothly-item", { value: "bus", selected: true }, index.h("smoothly-icon", { name: "bus-outline" })))),
       index.h("h2", null, "Submit"),
       index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "Submit")),
       index.h("h4", null, "Clear"),
@@ -9431,7 +9429,7 @@ const SmoothlyInputDemo = class {
 };
 SmoothlyInputDemo.style = styleCss$G;
 
-const styleCss$F = ".sc-smoothly-input-file-h{box-sizing:border-box}.sc-smoothly-input-file-h[looks=\"border\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-file-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-file-h[looks=\"line\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-file-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-file-h[looks=\"grid\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-file-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}.sc-smoothly-input-file-h{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;position:relative;width:100%;padding-left:0.4rem;background-color:rgb(var(--background-color,var(--smoothly-color-shade)))}.mask.sc-smoothly-input-file{position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgb(var(--text-color ,var(--smoothly-color-contrast)), 0.3)}.sc-smoothly-input-file-h:not(.dragging) .mask.sc-smoothly-input-file{display:none}input.sc-smoothly-input-file{overflow:hidden;height:0;width:0;padding:0}.input.sc-smoothly-input-file{display:flex;align-items:center;padding-left:0.4rem;padding-bottom:0.2rem}smoothly-button.sc-smoothly-input-file{margin:0;border:none}label.sc-smoothly-input-file{padding-left:0.4rem;padding-top:0.4rem;display:flex;width:100%;align-items:baseline;justify-content:flex-start;color:rgb(var(--text-color, var(--smoothly-color-contrast)));cursor:inherit}label.sc-smoothly-input-file-s>*{display:block;width:100%;font-size:0.65em;opacity:0.8}.sc-smoothly-input-file-h:not([show-label]) label.sc-smoothly-input-file{display:none}smoothly-icon.sc-smoothly-input-file{display:none;position:absolute;right:0.2em;top:0.6em}span.sc-smoothly-input-file{cursor:pointer;padding-left:0.5rem}";
+const styleCss$F = ".sc-smoothly-input-file-h{box-sizing:border-box}.sc-smoothly-input-file-h[looks=\"border\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-file-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-file-h[looks=\"line\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-file-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-file-h[looks=\"grid\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-file-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"transparent\"].sc-smoothly-input-file-h{border:none}[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within) input.sc-smoothly-input-file{background:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-file-h{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;position:relative;width:100%;padding-left:0.4rem;background-color:rgb(var(--background-color,var(--smoothly-color-shade)))}.mask.sc-smoothly-input-file{position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgb(var(--text-color ,var(--smoothly-color-contrast)), 0.3)}.sc-smoothly-input-file-h:not(.dragging) .mask.sc-smoothly-input-file{display:none}input.sc-smoothly-input-file{overflow:hidden;height:0;width:0;padding:0}.input.sc-smoothly-input-file{display:flex;align-items:center;padding-left:0.4rem;padding-bottom:0.2rem}smoothly-button.sc-smoothly-input-file{margin:0;border:none}label.sc-smoothly-input-file{padding-left:0.4rem;padding-top:0.4rem;display:flex;width:100%;align-items:baseline;justify-content:flex-start;color:rgb(var(--text-color, var(--smoothly-color-contrast)));cursor:inherit}label.sc-smoothly-input-file-s>*{display:block;width:100%;font-size:0.65em;opacity:0.8}.sc-smoothly-input-file-h:not([show-label]) label.sc-smoothly-input-file{display:none}smoothly-icon.sc-smoothly-input-file{display:none;position:absolute;right:0.2em;top:0.6em}span.sc-smoothly-input-file{cursor:pointer;padding-left:0.5rem}";
 
 const SmoothlyInputFile = class {
   constructor(hostRef) {
@@ -9458,7 +9456,7 @@ const SmoothlyInputFile = class {
   }
   render() {
     var _a, _b, _c;
-    return (index.h(index.Host, { class: { dragging: this.dragging }, onDragOver: (event) => (event.preventDefault(), event.stopPropagation()), onDragEnter: () => (this.dragging = true) }, index.h("label", null, index.h("slot", { name: "label" })), index.h("div", { class: "input" }, index.h("smoothly-button", { color: this.color, fill: "clear", size: "flexible", onClick: event => { var _a; return (event.stopPropagation(), (_a = this.input) === null || _a === void 0 ? void 0 : _a.click()); } }, index.h("slot", { name: "button" })), index.h("span", { onClick: event => { var _a; return (event.stopPropagation(), (_a = this.input) === null || _a === void 0 ? void 0 : _a.click()); } }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { class: "mask", onDrop: event => {
+    return (index.h(index.Host, { class: { dragging: this.dragging }, tabindex: 0, onClick: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.click(); }, onDragOver: (event) => (event.preventDefault(), event.stopPropagation()), onDragEnter: () => (this.dragging = true) }, index.h("label", null, index.h("slot", { name: "label" })), index.h("div", { class: "input" }, index.h("smoothly-button", { color: this.color, fill: "clear", size: "flexible", onClick: event => { var _a; return (event.stopPropagation(), (_a = this.input) === null || _a === void 0 ? void 0 : _a.click()); } }, index.h("slot", { name: "button" })), index.h("span", { onClick: event => { var _a; return (event.stopPropagation(), (_a = this.input) === null || _a === void 0 ? void 0 : _a.click()); } }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { class: "mask", onDrop: event => {
         var _a;
         return (event.preventDefault(),
           event.stopPropagation(),
@@ -9512,7 +9510,7 @@ const MonthSelector = class {
 };
 MonthSelector.style = styleCss$E;
 
-const styleCss$D = ".sc-smoothly-input-select-h{box-sizing:border-box}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-select-h[looks=\"grid\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-select-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}.sc-smoothly-input-select-h{display:flex;position:relative;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>main.sc-smoothly-input-select,.sc-smoothly-input-select-h>main.sc-smoothly-input-select>*.sc-smoothly-input-select{height:100%;display:flex;align-items:center}.icon.sc-smoothly-input-select-h>main.sc-smoothly-input-select,.icon.sc-smoothly-input-select-h>main.sc-smoothly-input-select>*.sc-smoothly-input-select{padding:0.5em}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>nav.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;z-index:10;height:var(--menu-height, unset);overflow-y:scroll}.sc-smoothly-input-select-h>aside.sc-smoothly-input-select{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-input-select-h>aside.sc-smoothly-input-select{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contrast))}.hidden.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h>section.sc-smoothly-input-select{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
+const styleCss$D = ".sc-smoothly-input-select-h{box-sizing:border-box}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-select-h[looks=\"grid\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-select-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"transparent\"].sc-smoothly-input-select-h{border:none}[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within) input.sc-smoothly-input-select{background:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-select-h{display:flex;position:relative;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>main.sc-smoothly-input-select,.sc-smoothly-input-select-h>main.sc-smoothly-input-select>*.sc-smoothly-input-select{height:100%;display:flex;align-items:center}.icon.sc-smoothly-input-select-h>main.sc-smoothly-input-select,.icon.sc-smoothly-input-select-h>main.sc-smoothly-input-select>*.sc-smoothly-input-select{padding:0.5em}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>nav.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;z-index:10;height:var(--menu-height, unset);overflow-y:scroll}.sc-smoothly-input-select-h>aside.sc-smoothly-input-select{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-input-select-h>aside.sc-smoothly-input-select{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contrast))}.hidden.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h>section.sc-smoothly-input-select{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
 
 const SmoothlyInputSelect = class {
   constructor(hostRef) {
@@ -9782,7 +9780,7 @@ const Notifier = class {
 };
 Notifier.style = styleCss$A;
 
-const styleCss$z = ".sc-smoothly-picker-h{box-sizing:border-box}.sc-smoothly-picker-h[looks=\"border\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-picker-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-picker-h[looks=\"line\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-picker-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-picker-h[looks=\"grid\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-picker-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}.sc-smoothly-picker-h{display:flex;position:relative;width:max-content;padding:1.2em 0.7em 0.2em 0.8em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-picker-h div.element.sc-smoothly-picker{display:flex;background-color:inherit}smoothly-slot-elements.sc-smoothly-picker{white-space:nowrap}.selected.sc-smoothly-picker{position:relative;display:flex;align-items:center;gap:1rem;width:100%;overflow:hidden;text-overflow:ellipsis;margin-right:2px}.selected.sc-smoothly-picker::after{content:\"\";position:absolute;top:0;bottom:0;right:0;width:2ch;background:linear-gradient(90deg, rgba(var(--background-color, var(--smoothly-color-shade)), 0) 0%, rgba(var(--background-color, var(--smoothly-color-shade)), 1) 100%)}.selected.sc-smoothly-picker *.sc-smoothly-picker{display:none}.label.sc-smoothly-picker{position:absolute;left:0.4rem;top:0.6rem;color:rgb(var(--text-color, var(--smoothly-color-contrast)));opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.selected.sc-smoothly-picker:not(:empty)+.label.sc-smoothly-picker{top:0.4em;transform:scale(0.6)}";
+const styleCss$z = ".sc-smoothly-picker-h{box-sizing:border-box}.sc-smoothly-picker-h[looks=\"border\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-picker-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-picker-h[looks=\"line\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-picker-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-picker-h[looks=\"grid\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-picker-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"transparent\"].sc-smoothly-picker-h{border:none}[looks=\"transparent\"].sc-smoothly-picker-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-picker-h:not(:focus-within) input.sc-smoothly-picker{background:transparent}[looks=\"transparent\"].sc-smoothly-picker-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-picker-h{display:flex;position:relative;width:max-content;padding:1.2em 0.7em 0.2em 0.8em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-picker-h div.element.sc-smoothly-picker{display:flex;background-color:inherit}smoothly-slot-elements.sc-smoothly-picker{white-space:nowrap}.selected.sc-smoothly-picker{position:relative;display:flex;align-items:center;gap:1rem;width:100%;overflow:hidden;text-overflow:ellipsis;margin-right:2px}.selected.sc-smoothly-picker::after{content:\"\";position:absolute;top:0;bottom:0;right:0;width:2ch}.sc-smoothly-picker-h:not([looks=transparent]) .selected.sc-smoothly-picker::after{background:linear-gradient(90deg, rgba(var(--background-color, var(--smoothly-color-shade)), 0) 0%, rgba(var(--background-color, var(--smoothly-color-shade)), 1) 100%)}.selected.sc-smoothly-picker *.sc-smoothly-picker{display:none}.label.sc-smoothly-picker{position:absolute;left:0.4rem;top:0.6rem;color:rgb(var(--text-color, var(--smoothly-color-contrast)));opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.selected.sc-smoothly-picker:not(:empty)+.label.sc-smoothly-picker{top:0.4em;transform:scale(0.6)}";
 
 var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -9871,7 +9869,7 @@ const SmoothlyPicker = class {
     this.selected.forEach(option => option.selected && option.element.clickHandler());
   }
   render() {
-    return (index.h(index.Host, null, index.h("smoothly-slot-elements", { class: "selected", nodes: this.display }), index.h("span", { class: "label" }, index.h("slot", { name: "label" })), index.h("button", { type: "button" }, index.h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("slot", { name: "child" }), index.h("smoothly-picker-menu", { open: this.open, looks: this.looks, onClick: e => e.stopPropagation(), multiple: this.multiple, mutable: this.mutable, readonly: this.readonly, validator: this.validator }, index.h("slot", { name: "search", slot: "search" }), index.h("slot", { name: "display", slot: "display" }), index.h("slot", null))));
+    return (index.h(index.Host, { tabindex: 0 }, index.h("smoothly-slot-elements", { class: "selected", nodes: this.display }), index.h("span", { class: "label" }, index.h("slot", { name: "label" })), index.h("button", { type: "button" }, index.h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("slot", { name: "child" }), index.h("smoothly-picker-menu", { open: this.open, looks: this.looks, onClick: e => e.stopPropagation(), multiple: this.multiple, mutable: this.mutable, readonly: this.readonly, validator: this.validator }, index.h("slot", { name: "search", slot: "search" }), index.h("slot", { name: "display", slot: "display" }), index.h("slot", null))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {