@bagelink/vue 0.0.878 → 0.0.882

package/dist/index.cjs

@@ -54,7 +54,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
@@ -131,7 +131,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_1$M),
+        ], 8, _hoisted_1$L),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -157,7 +157,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__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -180,7 +180,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [
         vue.createVNode(vue.unref(_sfc_main$N), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -216,7 +216,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$K = {
+const _hoisted_1$J = {
   key: 0,
   class: "loading"
 };
@@ -229,7 +229,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   props: {
     disabled: { type: Boolean, default: false },
     icon: {},
-    "icon.end": {},
+    iconEnd: {},
     color: {},
     theme: {},
     flat: { type: Boolean },
@@ -248,8 +248,8 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "17220d29": computedBackgroundColor.value,
-      "1a04c6c4": cumputedTextColor.value
+      "f042e370": computedBackgroundColor.value,
+      "6e044b23": cumputedTextColor.value
     }));
     const props2 = __props;
     const isComponent = vue.computed(() => {
@@ -319,7 +319,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
         onClick: vue.withModifiers(_ctx.onClick, ["stop"])
       }, {
         default: vue.withCtx(() => [
-          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
+          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
             _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
               key: 0,
               icon: _ctx.icon
@@ -328,9 +328,9 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
             !vue.unref(slots).default && _ctx.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createTextVNode(vue.toDisplayString(_ctx.value), 1)
             ], 64)) : vue.createCommentVNode("", true),
-            props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+            _ctx.iconEnd ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
               key: 2,
-              icon: props2["icon.end"]
+              icon: _ctx.iconEnd
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]))
         ]),
@@ -339,8 +339,8 @@ const _sfc_main$W = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
   __name: "Alert",
@@ -378,12 +378,12 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$J)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$I)) : vue.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__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
@@ -402,7 +402,7 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$I)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$H)) : (vue.openBlock(), vue.createElementBlock("p", {
           key: 1,
           style: vue.normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, vue.toDisplayString((_ctx.fallback || vue.unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -418,11 +418,9 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     size: {},
     text: {},
     icon: {},
-    "icon.end": {},
     iconEnd: {}
   },
   setup(__props) {
-    const props2 = __props;
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["pill", [_ctx.color]])
@@ -433,17 +431,17 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
           icon: _ctx.icon
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
         vue.createTextVNode(" " + vue.toDisplayString(_ctx.text) + " ", 1),
-        props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+        _ctx.iconEnd ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
           key: 1,
           class: "inline",
-          icon: props2["icon.end"]
+          icon: _ctx.iconEnd
         }, null, 8, ["icon"])) : vue.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__ */ vue.defineComponent({
   __name: "BglVideo",
@@ -499,7 +497,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$H)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_1$G)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           src: _ctx.src,
           autoplay: _ctx.autoplay,
@@ -514,7 +512,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.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"
 };
@@ -546,7 +544,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
         }])
       }, {
         default: vue.withCtx(() => [
-          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$G, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$F, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -554,7 +552,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$F = ["dir"];
+const _hoisted_1$E = ["dir"];
 const _hoisted_2$s = {
   key: 0,
   class: "blocker"
@@ -737,7 +735,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$F);
+      ], 14, _hoisted_1$E);
     };
   }
 });
@@ -6682,13 +6680,13 @@ var script = vue.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 ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$E, [
+  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$D, [
     vue.createElementVNode("rect", vue.mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
@@ -6840,7 +6838,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$D = {
+const _hoisted_1$C = {
   key: 0,
   class: "data"
 };
@@ -6897,7 +6895,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     const computedSchema = vue.computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
+      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
         _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$3), {
           key: 0,
           label: _ctx.title
@@ -9817,7 +9815,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$C = { key: 0 };
+const _hoisted_1$B = { key: 0 };
 const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   __name: "BglMultiStepForm",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -9885,7 +9883,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
           mode: "out-in"
         }, {
           default: vue.withCtx(() => [
-            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
+            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
               vue.createVNode(vue.unref(_sfc_main$K), vue.mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
@@ -9925,7 +9923,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$B = { class: "primary-checkbox" };
+const _hoisted_1$A = { class: "primary-checkbox" };
 const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
@@ -9936,7 +9934,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const val = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$B, [
+      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$A, [
         vue.renderSlot(_ctx.$slots, "label", {}, void 0, true),
         vue.withDirectives(vue.createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -9949,7 +9947,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
@@ -9994,12 +9992,12 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.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__ */ vue.defineComponent({
   __name: "ColorPicker",
@@ -10043,7 +10041,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$z)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$y)) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -18486,7 +18484,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__ */ vue.defineComponent({
   __name: "DateInput",
@@ -18546,11 +18544,11 @@ const _sfc_main$F = /* @__PURE__ */ vue.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,
@@ -18586,7 +18584,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
         vue.createElementVNode("div", _hoisted_2$m, [
           vue.createVNode(vue.unref(Hn), vue.mergeProps({
             modelValue: selectedDate.value,
@@ -18627,7 +18625,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.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"
@@ -18812,7 +18810,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_lightbox = vue.resolveDirective("lightbox");
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["fileUploadWrap", {
@@ -18973,7 +18971,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
@@ -19008,12 +19006,12 @@ const _sfc_main$C = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
   __name: "OTP",
   props: {
@@ -19112,14 +19110,13 @@ const _sfc_main$B = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -19127,7 +19124,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     title: {},
     helptext: {},
     placeholder: {},
-    label: {},
+    label: { default: "" },
     small: { type: Boolean },
     dense: { type: Boolean },
     required: { type: Boolean },
@@ -19154,6 +19151,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue", "update:showPwd"],
   setup(__props) {
     const props2 = __props;
+    const hasLabel = vue.computed(() => props2.label && props2.label.trim() !== "");
     const password = vue.useModel(__props, "modelValue");
     const showPwd = vue.useModel(__props, "showPwd");
     const toggleShowPwdIcon = vue.computed(
@@ -19161,7 +19159,9 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     );
     const inputType = vue.computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["relative", { "has-label": hasLabel.value }])
+      }, [
         vue.createVNode(vue.unref(TextInput), vue.mergeProps({
           modelValue: password.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
@@ -19176,7 +19176,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
           icon: toggleShowPwdIcon.value,
           onClick: _cache[1] || (_cache[1] = ($event) => showPwd.value = !showPwd.value)
         }, null, 8, ["icon"])
-      ]);
+      ], 2);
     };
   }
 });
@@ -44005,6 +44005,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     function openOptions() {
       var _a2;
       (_a2 = dropdown.value) == null ? void 0 : _a2.show();
+      updateOpen(true);
     }
     const selectedLabel = vue.computed(() => {
       if (selectedItemCount.value === 0) return props2.placeholder || "Select";
@@ -44034,14 +44035,31 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
         return Boolean(option2) && searchTerm.every((s2) => getLabel(option2).match(s2));
       });
     });
+    let highlightedIndex = vue.ref(0);
+    const selectOptions = vue.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;
@@ -44142,7 +44160,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.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: vue.withCtx(() => [
           vue.createElementVNode("label", null, [
@@ -44155,18 +44173,22 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                 modelValue: vue.unref(search),
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(search) ? search.value = $event : search = $event),
                 class: "mb-0",
-                dense: "",
                 placeholder: searchPlaceholder.value,
                 icon: "search",
                 onDebounce: runServerSearch,
-                onInput: _cache[1] || (_cache[1] = ($event) => vue.isRef(selected) ? selected.value = false : selected = false)
+                onInput: _cache[1] || (_cache[1] = ($event) => vue.isRef(selected) ? selected.value = false : selected = false),
+                onKeydown: [
+                  _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(($event) => navigate("down"), ["prevent"]), ["down"])),
+                  _cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers(($event) => navigate("up"), ["prevent"]), ["up"])),
+                  _cache[4] || (_cache[4] = vue.withKeys(($event) => updateOpen(false), ["enter"]))
+                ]
               }, null, 8, ["modelValue", "placeholder"])) : (vue.openBlock(), vue.createElementBlock("button", {
                 key: 1,
                 disabled: _ctx.disabled,
                 type: "button",
                 class: vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                   key: 0,
@@ -44179,7 +44201,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                     thin: "",
                     icon: "clear",
                     class: "color-gray",
-                    onClick: _cache[2] || (_cache[2] = ($event) => {
+                    onClick: _cache[5] || (_cache[5] = ($event) => {
                       vue.isRef(selectedItems) ? selectedItems.value = [] : selectedItems = [];
                       emitUpdate();
                     })
@@ -44196,7 +44218,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                 style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
                 value: vue.unref(selectedItems),
                 required: "",
-                onInput: _cache[4] || (_cache[4] = ($event) => updateOpen(true))
+                onInput: _cache[7] || (_cache[7] = ($event) => updateOpen(true))
               }, null, 40, _hoisted_5$7)) : vue.createCommentVNode("", true)
             ])
           ])
@@ -44215,6 +44237,8 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
           }, {
             default: vue.withCtx(() => [
               vue.createElementVNode("div", {
+                ref_key: "selectOptions",
+                ref: selectOptions,
                 class: vue.normalizeClass(["selectinput-options", { multiselect: _ctx.multiselect }])
               }, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option2, i2) => {
@@ -44225,7 +44249,11 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                     tabindex: "0",
                     "aria-selected": isSelected(option2),
                     onClick: ($event) => select2(option2),
-                    onKeydown: vue.withKeys(($event) => select2(option2), ["enter"])
+                    onKeydown: [
+                      vue.withKeys(($event) => select2(option2), ["enter"]),
+                      _cache[8] || (_cache[8] = vue.withKeys(vue.withModifiers(($event) => navigate("down"), ["prevent"]), ["down"])),
+                      _cache[9] || (_cache[9] = vue.withKeys(vue.withModifiers(($event) => navigate("up"), ["prevent"]), ["up"]))
+                    ]
                   }, [
                     _ctx.multiselect ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                       isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
@@ -44254,7 +44282,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.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
@@ -52597,22 +52625,22 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
           }), null, 16, _hoisted_4$4)), [
             [vue.vModelText, vue.unref(inputVal)]
           ]),
-          _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$4, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_2$a),
-        _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
-          key: 0,
-          class: "iconStart",
-          icon: _ctx.iconStart
-        }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
-          key: 1,
-          icon: _ctx.icon
-        }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
+          _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$4, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true),
+          _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+            key: 3,
+            class: "iconStart",
+            icon: _ctx.iconStart
+          }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+            key: 4,
+            icon: _ctx.icon
+          }, null, 8, ["icon"])) : vue.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"];
@@ -55265,7 +55293,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     round: "",
                     thin: "",
                     flat: "",
-                    "icon.end": "arrow_outward",
+                    iconEnd: "arrow_outward",
                     value: "Open File",
                     href: (_d = vue.unref(currentItem)) == null ? void 0 : _d.src,
                     target: "_blank"
@@ -55353,7 +55381,7 @@ const _sfc_main = /* @__PURE__ */ vue.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 = {