@bagelink/vue 0.0.878 → 0.0.882

package/dist/index.mjs

@@ -52,7 +52,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$M = ["aria-expanded", "aria-controls"];
+const _hoisted_1$L = ["aria-expanded", "aria-controls"];
 const _hoisted_2$w = { class: "accordion-label" };
 const _hoisted_3$n = ["id", "aria-hidden"];
 const _sfc_main$Y = /* @__PURE__ */ defineComponent({
@@ -129,7 +129,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
           }, [
             createVNode(unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : createCommentVNode("", true)
-        ], 8, _hoisted_1$M),
+        ], 8, _hoisted_1$L),
         createVNode(Transition, { name: "expand" }, {
           default: withCtx(() => [
             unref(isOpen) ? (openBlock(), createElementBlock("div", {
@@ -155,7 +155,7 @@ const _export_sfc = (sfc, props2) => {
   return target;
 };
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-bb26ed1a"]]);
-const _hoisted_1$L = { class: "relative" };
+const _hoisted_1$K = { class: "relative" };
 const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -178,7 +178,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$L, [
+      return openBlock(), createElementBlock("div", _hoisted_1$K, [
         createVNode(unref(_sfc_main$N), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -214,7 +214,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$K = {
+const _hoisted_1$J = {
   key: 0,
   class: "loading"
 };
@@ -227,7 +227,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   props: {
     disabled: { type: Boolean, default: false },
     icon: {},
-    "icon.end": {},
+    iconEnd: {},
     color: {},
     theme: {},
     flat: { type: Boolean },
@@ -246,8 +246,8 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "17220d29": computedBackgroundColor.value,
-      "1a04c6c4": cumputedTextColor.value
+      "f042e370": computedBackgroundColor.value,
+      "6e044b23": cumputedTextColor.value
     }));
     const props2 = __props;
     const isComponent = computed(() => {
@@ -317,7 +317,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
         onClick: withModifiers(_ctx.onClick, ["stop"])
       }, {
         default: withCtx(() => [
-          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_1$K)) : (openBlock(), createElementBlock("div", _hoisted_2$v, [
+          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_1$J)) : (openBlock(), createElementBlock("div", _hoisted_2$v, [
             _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
               key: 0,
               icon: _ctx.icon
@@ -326,9 +326,9 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
             !unref(slots).default && _ctx.value ? (openBlock(), createElementBlock(Fragment$1, { key: 1 }, [
               createTextVNode(toDisplayString(_ctx.value), 1)
             ], 64)) : createCommentVNode("", true),
-            props2["icon.end"] ? (openBlock(), createBlock(unref(_sfc_main$c), {
+            _ctx.iconEnd ? (openBlock(), createBlock(unref(_sfc_main$c), {
               key: 2,
-              icon: props2["icon.end"]
+              icon: _ctx.iconEnd
             }, null, 8, ["icon"])) : createCommentVNode("", true)
           ]))
         ]),
@@ -337,8 +337,8 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-c00fb1b9"]]);
-const _hoisted_1$J = ["dismissable"];
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-b6c20bd9"]]);
+const _hoisted_1$I = ["dismissable"];
 const _hoisted_2$u = { class: "m-0" };
 const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "Alert",
@@ -376,12 +376,12 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$J)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$I)) : createCommentVNode("", true);
     };
   }
 });
 const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$I = ["src", "alt"];
+const _hoisted_1$H = ["src", "alt"];
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
@@ -400,7 +400,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$I)) : (openBlock(), createElementBlock("p", {
+        }, null, 8, _hoisted_1$H)) : (openBlock(), createElementBlock("p", {
           key: 1,
           style: normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, toDisplayString((_ctx.fallback || unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -416,11 +416,9 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     size: {},
     text: {},
     icon: {},
-    "icon.end": {},
     iconEnd: {}
   },
   setup(__props) {
-    const props2 = __props;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["pill", [_ctx.color]])
@@ -431,17 +429,17 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           icon: _ctx.icon
         }, null, 8, ["icon"])) : createCommentVNode("", true),
         createTextVNode(" " + toDisplayString(_ctx.text) + " ", 1),
-        props2["icon.end"] ? (openBlock(), createBlock(unref(_sfc_main$c), {
+        _ctx.iconEnd ? (openBlock(), createBlock(unref(_sfc_main$c), {
           key: 1,
           class: "inline",
-          icon: props2["icon.end"]
+          icon: _ctx.iconEnd
         }, null, 8, ["icon"])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-1b4c8cfe"]]);
-const _hoisted_1$H = ["src"];
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-2f3caf93"]]);
+const _hoisted_1$G = ["src"];
 const _hoisted_2$t = ["src", "autoplay", "muted", "loop", "controls"];
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "BglVideo",
@@ -497,7 +495,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$H)) : _ctx.src ? (openBlock(), createElementBlock("video", {
+        }, null, 12, _hoisted_1$G)) : _ctx.src ? (openBlock(), createElementBlock("video", {
           key: 1,
           src: _ctx.src,
           autoplay: _ctx.autoplay,
@@ -512,7 +510,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-30c80244"]]);
-const _hoisted_1$G = {
+const _hoisted_1$F = {
   key: 0,
   class: "card_label"
 };
@@ -544,7 +542,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         }])
       }, {
         default: withCtx(() => [
-          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$G, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$F, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -552,7 +550,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$F = ["dir"];
+const _hoisted_1$E = ["dir"];
 const _hoisted_2$s = {
   key: 0,
   class: "blocker"
@@ -735,7 +733,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$F);
+      ], 14, _hoisted_1$E);
     };
   }
 });
@@ -6680,13 +6678,13 @@ var script = defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$E = {
+const _hoisted_1$D = {
   key: 0,
   class: "layer-hover-bar"
 };
 const _hoisted_2$r = ["x", "y", "width", "height"];
 function render$e(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$E, [
+  return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$D, [
     createElementVNode("rect", mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
@@ -6838,7 +6836,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$D = {
+const _hoisted_1$C = {
   key: 0,
   class: "data"
 };
@@ -6895,7 +6893,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const computedSchema = computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
+      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
         _ctx.title ? (openBlock(), createBlock(unref(_sfc_main$3), {
           key: 0,
           label: _ctx.title
@@ -9815,7 +9813,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$C = { key: 0 };
+const _hoisted_1$B = { key: 0 };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "BglMultiStepForm",
   props: /* @__PURE__ */ mergeModels({
@@ -9883,7 +9881,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           mode: "out-in"
         }, {
           default: withCtx(() => [
-            !unref(isStepping) ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
+            !unref(isStepping) ? (openBlock(), createElementBlock("div", _hoisted_1$B, [
               createVNode(unref(_sfc_main$K), mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
@@ -9923,7 +9921,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$B = { class: "primary-checkbox" };
+const _hoisted_1$A = { class: "primary-checkbox" };
 const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
@@ -9934,7 +9932,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const val = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$B, [
+      return openBlock(), createElementBlock("label", _hoisted_1$A, [
         renderSlot(_ctx.$slots, "label", {}, void 0, true),
         withDirectives(createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -9947,7 +9945,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-73f1d9ad"]]);
-const _hoisted_1$A = ["title"];
+const _hoisted_1$z = ["title"];
 const _hoisted_2$p = ["id", "value", "required"];
 const _hoisted_3$j = ["for"];
 const _sfc_main$H = /* @__PURE__ */ defineComponent({
@@ -9992,12 +9990,12 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             createTextVNode(toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$j)
-      ], 10, _hoisted_1$A);
+      ], 10, _hoisted_1$z);
     };
   }
 });
 const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$z = ["title"];
+const _hoisted_1$y = ["title"];
 const _hoisted_2$o = ["id", "placeholder", "required"];
 const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
@@ -10041,7 +10039,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             [vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$z)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$y)) : createCommentVNode("", true);
     };
   }
 });
@@ -18484,7 +18482,7 @@ const eo = ({
 Object.entries(go).forEach(([e, t]) => {
   e !== "default" && (Hn[e] = t);
 });
-const _hoisted_1$y = ["title"];
+const _hoisted_1$x = ["title"];
 const _hoisted_2$n = { key: 0 };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "DateInput",
@@ -18544,11 +18542,11 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           "minutes-grid-increment": _ctx.minutesGridIncrement,
           "start-time": { hours: 8, minutes: 0 }
         }), null, 16, ["modelValue", "required", "enable-time-picker", "allowed-dates", "time-picker-inline", "minutes-increment", "minutes-grid-increment"])
-      ], 10, _hoisted_1$y);
+      ], 10, _hoisted_1$x);
     };
   }
 });
-const _hoisted_1$x = { class: "datetime-wrap" };
+const _hoisted_1$w = { class: "datetime-wrap" };
 const _hoisted_2$m = { class: "date-wrap" };
 const _hoisted_3$i = {
   key: 0,
@@ -18584,7 +18582,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
+      return openBlock(), createElementBlock("div", _hoisted_1$w, [
         createElementVNode("div", _hoisted_2$m, [
           createVNode(unref(Hn), mergeProps({
             modelValue: selectedDate.value,
@@ -18625,7 +18623,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$w = { class: "bagel-input" };
+const _hoisted_1$v = { class: "bagel-input" };
 const _hoisted_2$l = {
   key: 0,
   class: "bgl-multi-preview"
@@ -18810,7 +18808,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _directive_lightbox = resolveDirective("lightbox");
       const _directive_tooltip = resolveDirective("tooltip");
-      return openBlock(), createElementBlock("div", _hoisted_1$w, [
+      return openBlock(), createElementBlock("div", _hoisted_1$v, [
         createElementVNode("label", null, toDisplayString(_ctx.label), 1),
         createElementVNode("div", {
           class: normalizeClass(["fileUploadWrap", {
@@ -18971,7 +18969,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-bfb0bd63"]]);
-const _hoisted_1$v = ["title"];
+const _hoisted_1$u = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
@@ -19006,12 +19004,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           placeholder: _ctx.placeholder,
           onInput: handleInput
         }, null, 42, _hoisted_3$g)
-      ], 10, _hoisted_1$v);
+      ], 10, _hoisted_1$u);
     };
   }
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-1cbaeab2"]]);
-const _hoisted_1$u = ["value", "autofocus", "onKeydown", "onPaste"];
+const _hoisted_1$t = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "OTP",
   props: {
@@ -19110,14 +19108,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             oninput: "this.value = this.value.slice(0, 1);",
             onKeydown: ($event) => handleKeyDown2($event, ind),
             onPaste: ($event) => handlePaste2($event, ind)
-          }, null, 40, _hoisted_1$u);
+          }, null, 40, _hoisted_1$t);
         }), 128))
       ], 512);
     };
   }
 });
 const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-5c22c199"]]);
-const _hoisted_1$t = { class: "relative" };
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ mergeModels({
@@ -19125,7 +19122,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     title: {},
     helptext: {},
     placeholder: {},
-    label: {},
+    label: { default: "" },
     small: { type: Boolean },
     dense: { type: Boolean },
     required: { type: Boolean },
@@ -19152,6 +19149,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue", "update:showPwd"],
   setup(__props) {
     const props2 = __props;
+    const hasLabel = computed(() => props2.label && props2.label.trim() !== "");
     const password = useModel(__props, "modelValue");
     const showPwd = useModel(__props, "showPwd");
     const toggleShowPwdIcon = computed(
@@ -19159,7 +19157,9 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     );
     const inputType = computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["relative", { "has-label": hasLabel.value }])
+      }, [
         createVNode(unref(TextInput), mergeProps({
           modelValue: password.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
@@ -19174,7 +19174,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           icon: toggleShowPwdIcon.value,
           onClick: _cache[1] || (_cache[1] = ($event) => showPwd.value = !showPwd.value)
         }, null, 8, ["icon"])
-      ]);
+      ], 2);
     };
   }
 });
@@ -44003,6 +44003,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     function openOptions() {
       var _a2;
       (_a2 = dropdown.value) == null ? void 0 : _a2.show();
+      updateOpen(true);
     }
     const selectedLabel = computed(() => {
       if (selectedItemCount.value === 0) return props2.placeholder || "Select";
@@ -44032,14 +44033,31 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         return Boolean(option2) && searchTerm.every((s2) => getLabel(option2).match(s2));
       });
     });
+    let highlightedIndex = ref(0);
+    const selectOptions = ref();
+    function navigate(direction) {
+      if (direction === "up") {
+        highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : filteredOptions.value.length - 1;
+      } else if (direction === "down") {
+        highlightedIndex.value = highlightedIndex.value < filteredOptions.value.length - 1 ? highlightedIndex.value + 1 : 0;
+      }
+      setTimeout(() => {
+        var _a2;
+        const el = (_a2 = selectOptions.value) == null ? void 0 : _a2.children[highlightedIndex.value];
+        if (el) el.focus();
+      }, 10);
+    }
     const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
     function updateOpen(visible) {
       open.value = visible;
       if (!open.value) {
-        if (props2.searchable && !props2.multiselect && !search.value && !selected.value) selectedItems.value = [];
+        if (props2.searchable && !props2.multiselect && !search.value && !selected.value) {
+          selectedItems.value = [];
+        }
         if (props2.searchable && !props2.multiselect && search.value && filteredOptions.value.length === 1 && !isSelected(filteredOptions.value[0])) {
           select2(filteredOptions.value[0]);
         }
+        highlightedIndex.value = -1;
         search.value = "";
       } else {
         if (props2.searchable && !props2.multiselect && selectedItemCount.value) search.value = selectedLabel.value;
@@ -44140,7 +44158,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         placement: "bottom-start",
         class: "bagel-input selectinput",
         noAutoFocus: "",
-        onHide: _cache[5] || (_cache[5] = ($event) => updateOpen(false))
+        onHide: _cache[10] || (_cache[10] = ($event) => updateOpen(false))
       }, {
         trigger: withCtx(() => [
           createElementVNode("label", null, [
@@ -44153,18 +44171,22 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                 modelValue: unref(search),
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(search) ? search.value = $event : search = $event),
                 class: "mb-0",
-                dense: "",
                 placeholder: searchPlaceholder.value,
                 icon: "search",
                 onDebounce: runServerSearch,
-                onInput: _cache[1] || (_cache[1] = ($event) => isRef(selected) ? selected.value = false : selected = false)
+                onInput: _cache[1] || (_cache[1] = ($event) => isRef(selected) ? selected.value = false : selected = false),
+                onKeydown: [
+                  _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => navigate("down"), ["prevent"]), ["down"])),
+                  _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => navigate("up"), ["prevent"]), ["up"])),
+                  _cache[4] || (_cache[4] = withKeys(($event) => updateOpen(false), ["enter"]))
+                ]
               }, null, 8, ["modelValue", "placeholder"])) : (openBlock(), createElementBlock("button", {
                 key: 1,
                 disabled: _ctx.disabled,
                 type: "button",
                 class: normalizeClass(["selectinput-btn", { isEmpty: selectedItemCount.value === 0 }]),
-                onKeydown: openOptions,
-                onClick: _cache[3] || (_cache[3] = ($event) => updateOpen(true))
+                onFocus: openOptions,
+                onClick: _cache[6] || (_cache[6] = ($event) => updateOpen(true))
               }, [
                 _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
                   key: 0,
@@ -44177,7 +44199,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     thin: "",
                     icon: "clear",
                     class: "color-gray",
-                    onClick: _cache[2] || (_cache[2] = ($event) => {
+                    onClick: _cache[5] || (_cache[5] = ($event) => {
                       isRef(selectedItems) ? selectedItems.value = [] : selectedItems = [];
                       emitUpdate();
                     })
@@ -44194,7 +44216,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                 style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
                 value: unref(selectedItems),
                 required: "",
-                onInput: _cache[4] || (_cache[4] = ($event) => updateOpen(true))
+                onInput: _cache[7] || (_cache[7] = ($event) => updateOpen(true))
               }, null, 40, _hoisted_5$7)) : createCommentVNode("", true)
             ])
           ])
@@ -44213,6 +44235,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           }, {
             default: withCtx(() => [
               createElementVNode("div", {
+                ref_key: "selectOptions",
+                ref: selectOptions,
                 class: normalizeClass(["selectinput-options", { multiselect: _ctx.multiselect }])
               }, [
                 (openBlock(true), createElementBlock(Fragment$1, null, renderList(filteredOptions.value, (option2, i2) => {
@@ -44223,7 +44247,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     tabindex: "0",
                     "aria-selected": isSelected(option2),
                     onClick: ($event) => select2(option2),
-                    onKeydown: withKeys(($event) => select2(option2), ["enter"])
+                    onKeydown: [
+                      withKeys(($event) => select2(option2), ["enter"]),
+                      _cache[8] || (_cache[8] = withKeys(withModifiers(($event) => navigate("down"), ["prevent"]), ["down"])),
+                      _cache[9] || (_cache[9] = withKeys(withModifiers(($event) => navigate("up"), ["prevent"]), ["up"]))
+                    ]
                   }, [
                     _ctx.multiselect ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
                       isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$c), {
@@ -44252,7 +44280,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-4d1e8e98"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-0ea75792"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -52595,22 +52623,22 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           }), null, 16, _hoisted_4$4)), [
             [vModelText, unref(inputVal)]
           ]),
-          _ctx.helptext ? (openBlock(), createElementBlock("p", _hoisted_5$4, toDisplayString(_ctx.helptext), 1)) : createCommentVNode("", true)
-        ], 8, _hoisted_2$a),
-        _ctx.iconStart ? (openBlock(), createBlock(unref(_sfc_main$c), {
-          key: 0,
-          class: "iconStart",
-          icon: _ctx.iconStart
-        }, null, 8, ["icon"])) : createCommentVNode("", true),
-        _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
-          key: 1,
-          icon: _ctx.icon
-        }, null, 8, ["icon"])) : createCommentVNode("", true)
+          _ctx.helptext ? (openBlock(), createElementBlock("p", _hoisted_5$4, toDisplayString(_ctx.helptext), 1)) : createCommentVNode("", true),
+          _ctx.iconStart ? (openBlock(), createBlock(unref(_sfc_main$c), {
+            key: 3,
+            class: "iconStart",
+            icon: _ctx.iconStart
+          }, null, 8, ["icon"])) : createCommentVNode("", true),
+          _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
+            key: 4,
+            icon: _ctx.icon
+          }, null, 8, ["icon"])) : createCommentVNode("", true)
+        ], 8, _hoisted_2$a)
       ], 10, _hoisted_1$i);
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-63ff8c9c"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-91822151"]]);
 const _hoisted_1$h = ["title"];
 const _hoisted_2$9 = ["id", "required"];
 const _hoisted_3$7 = ["for"];
@@ -55263,7 +55291,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     round: "",
                     thin: "",
                     flat: "",
-                    "icon.end": "arrow_outward",
+                    iconEnd: "arrow_outward",
                     value: "Open File",
                     href: (_d = unref(currentItem)) == null ? void 0 : _d.src,
                     target: "_blank"
@@ -55351,7 +55379,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-04df78d3"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c8e5a3c4"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {