smoothly 1.0.0-alpha.172 → 1.0.0-alpha.174

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

@@ -9629,7 +9629,7 @@ const SmoothlyInputRange = class {
 };
 SmoothlyInputRange.style = styleCss$C;
 
-const styleCss$B = ".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 styleCss$B = ".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;flex-direction:column;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;cursor:default}.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) {
@@ -9695,17 +9695,19 @@ const SmoothlyInputSelect = class {
   }
   onKeyDown(event) {
     event.stopPropagation();
-    event.preventDefault();
+    if (event.key != "Tab" && !event.ctrlKey && !event.metaKey)
+      event.preventDefault();
     if (this.opened) {
-      let direction = 0;
       switch (event.key) {
         case "ArrowUp":
-          direction = -1;
+          this.move(-1);
           break;
         case "ArrowDown":
-          direction = 1;
+          this.move(1);
           break;
         case "Escape":
+          if (this.filter == "")
+            this.opened = false;
           this.filter = "";
           break;
         case "Backspace":
@@ -9713,39 +9715,61 @@ const SmoothlyInputSelect = class {
           break;
         case "Enter":
           const result = this.items.find(item => item.marked);
-          if (result === null || result === void 0 ? void 0 : result.value) {
+          if (result === null || result === void 0 ? void 0 : result.value)
             result.selected = true;
-          }
           this.opened = false;
           this.filter = "";
           break;
+        case "Tab":
+          this.opened = false;
+          break;
         default:
           if (event.key.length == 1)
             this.filter += event.key;
           break;
       }
-      this.move(direction);
     }
-    else if (event.key == "Enter")
-      this.opened = true;
+    else {
+      switch (event.key) {
+        case "Enter":
+        case " ":
+          this.opened = true;
+          break;
+        case "ArrowDown":
+          this.opened = true;
+          this.move(0);
+          break;
+        case "ArrowUp":
+          this.opened = true;
+          this.move(-1);
+          break;
+        case "Tab":
+          break;
+        default:
+          this.opened = true;
+          if (event.key.length == 1)
+            this.filter += event.key;
+          break;
+      }
+    }
   }
   move(direction) {
-    if (direction) {
-      let markedIndex = this.items.findIndex(item => item.marked);
-      if (markedIndex == -1)
-        markedIndex = this.items.findIndex(item => item.selected);
-      if (this.items[markedIndex])
-        this.items[markedIndex].marked = false;
-      do {
-        markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
-      } while (this.items[markedIndex].hidden);
-      this.items[markedIndex].marked = true;
-      this.items[markedIndex].focus();
-    }
+    let markedIndex = this.items.findIndex(item => item.marked);
+    if (markedIndex == -1)
+      markedIndex = this.items.findIndex(item => item.selected);
+    if (this.items[markedIndex])
+      this.items[markedIndex].marked = false;
+    if (markedIndex == -1)
+      markedIndex = 0;
+    do {
+      markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
+    } while (this.items[markedIndex].hidden);
+    this.items[markedIndex].marked = true;
+    this.items[markedIndex].focus();
   }
   render() {
     var _a, _b;
-    return (index.h(index.Host, { tabIndex: 2, class: (_a = (this.missing ? "missing" : this.type)) !== null && _a !== void 0 ? _a : "" }, index.h("main", { ref: element => (this.mainElement = element) }, (_b = this.initialPrompt) !== null && _b !== void 0 ? _b : "(none)"), this.filter.length != 0 ? (index.h("aside", { ref: element => (this.aside = element) }, this.filter, index.h("button", { onClick: e => {
+    return (index.h(index.Host, { tabIndex: 0, class: (_a = (this.missing ? "missing" : this.type)) !== null && _a !== void 0 ? _a : "" }, index.h("main", { ref: element => (this.mainElement = element) }, (_b = this.initialPrompt) !== null && _b !== void 0 ? _b : "(none)"), this.filter.length != 0 ? (index.h("aside", { ref: element => (this.aside = element) }, this.filter, index.h("button", { onClick: e => {
         e.stopPropagation();
         this.filter = "";
       } }, index.h("smoothly-icon", { name: "close", size: "small" })))) : undefined, this.opened ? index.h("section", { onClick: () => (this.opened = true) }) : [], index.h("div", { class: this.opened ? "" : "hidden" }, index.h("nav", null, index.h("slot", null)))));