bitboss-ui 2.0.120 → 2.0.122

package/dist/index25.js

@@ -1,15 +1,15 @@
-import { defineComponent as ne, ref as o, computed as u, getCurrentInstance as re, nextTick as N, useAttrs as ue, onMounted as de, onBeforeUnmount as G, watch as ce, openBlock as _, createBlock as ve, withCtx as fe, createElementVNode as a, mergeProps as P, createElementBlock as $, renderSlot as d, createTextVNode as be, toDisplayString as K, createCommentVNode as z } from "vue";
-import { throttle as pe } from "./index213.js";
-import { useFocusTrap as me } from "./index214.js";
+import { defineComponent as ie, ref as o, computed as u, getCurrentInstance as ne, nextTick as N, useAttrs as re, onMounted as ue, onBeforeUnmount as G, watch as de, openBlock as _, createBlock as ce, withCtx as ve, createElementVNode as a, mergeProps as P, createElementBlock as H, renderSlot as d, createTextVNode as fe, toDisplayString as K, createCommentVNode as L } from "vue";
+import { throttle as be } from "./index239.js";
+import { useFocusTrap as pe } from "./index221.js";
 import { useId as U } from "./index8.js";
-import { wait as H } from "./index130.js";
-import { waitFor as ge } from "./index215.js";
-import { useModalsState as C } from "./index216.js";
-import { useLogger as ye } from "./index217.js";
-import { useMobile as he } from "./index9.js";
-import we from "./index218.js";
-import { useLocale as ke } from "./index212.js";
-const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PURE__ */ ne({
+import { wait as T } from "./index130.js";
+import { waitFor as me } from "./index224.js";
+import { useModalsState as C } from "./index240.js";
+import { useLogger as ge } from "./index241.js";
+import { useMobile as ye } from "./index9.js";
+import he from "./index242.js";
+import { useLocale as we } from "./index222.js";
+const ke = { class: "bb-base-dialog-close" }, _e = ["aria-label"], Se = /* @__PURE__ */ ie({
   __name: "BaseDialog",
   props: {
     closeLabel: {},
@@ -22,7 +22,7 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
     showClose: { type: Boolean, default: !0 },
     title: {},
     transition: { default: "fade" },
-    transitionDuration: { default: 350 },
+    transitionDuration: { default: 200 },
     size: { default: "sm" },
     description: {},
     focusTarget: {},
@@ -32,12 +32,12 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
   emits: ["shown", "hidden", "update:modelValue"],
   setup(j, { emit: q }) {
     var R, W;
-    const l = j, c = q, B = `title_${U().id.value}`, V = `description_${U().id.value}`, { isMobile: J } = he(), g = o(null), v = o(null), L = o(null), y = o(null), f = o(null), s = o(null), b = o(null), Q = o(null), T = u(
+    const l = j, c = q, B = `title_${U().id.value}`, V = `description_${U().id.value}`, { isMobile: J } = ye(), g = o(null), v = o(null), $ = o(null), y = o(null), f = o(null), s = o(null), b = o(null), Q = o(null), M = u(
       () => l.fullscreen === !0 || l.fullscreen === "mobile" && J.value
-    ), M = !!((W = (R = re()) == null ? void 0 : R.proxy) != null && W.$nuxt), h = o(0), X = u(() => {
+    ), D = !!((W = (R = ne()) == null ? void 0 : R.proxy) != null && W.$nuxt), h = o(0), X = u(() => {
       const { openedModals: e } = C();
       return e.value && e.value === h.value;
-    }), { activate: Y, deactivate: x } = me(L, {
+    }), { activate: Y, deactivate: x } = pe($, {
       initialFocus: l.focusTarget ?? void 0,
       clickOutsideDeactivates: (e) => e.target === v.value,
       allowOutsideClick: !0,
@@ -45,15 +45,15 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
       escapeDeactivates: () => (N(() => {
         c("update:modelValue", !1);
       }), !0)
-    }), Z = ue(), { t: ee } = ke(), le = u(
+    }), Z = re(), { t: ee } = we(), le = u(
       () => l.closeLabel || ee("dialog.closeLabel").value
     );
-    de(async () => {
-      s.value && (g.value = new ResizeObserver(r), g.value.observe(s.value)), window.addEventListener("resize", r), r(), !(!l.modelValue && !n.value) && (M && !globalThis.document || A());
+    ue(async () => {
+      s.value && (g.value = new ResizeObserver(r), g.value.observe(s.value)), window.addEventListener("resize", r), r(), !(!l.modelValue && !n.value) && (D && !globalThis.document || A());
     }), G(() => {
       window.removeEventListener("resize", r);
     });
-    const w = o(!1), p = o(!1), D = o(!0), m = o(!1), n = o(l.eager || l.modelValue), O = u(() => p.value || m.value), te = () => {
+    const w = o(!1), p = o(!1), z = o(!0), m = o(!1), n = o(l.eager || l.modelValue), O = u(() => p.value || m.value), te = () => {
       if (!globalThis.document) return;
       const e = window.innerWidth - document.documentElement.clientWidth;
       document.body.style.overflow = "hidden", document.body.style.paddingRight = `${e}px`;
@@ -68,19 +68,19 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
     });
     const A = async () => {
       if (l.modelValue) {
-        n.value || (n.value = !0, await ge(() => !!s.value), await N(), s.value && (g.value = new ResizeObserver(r), g.value.observe(s.value))), D.value = !1, m.value = !1, p.value = !0;
+        n.value || (n.value = !0, await me(() => !!s.value), await N(), s.value && (g.value = new ResizeObserver(r), g.value.observe(s.value))), z.value = !1, m.value = !1, p.value = !0;
         const { modalHasOpened: e, openedModals: t } = C();
-        e(), h.value = t.value, te(), await H(l.transitionDuration), p.value = !1, w.value = !0, c("shown"), Y();
+        e(), h.value = t.value, te(), await T(l.transitionDuration), p.value = !1, w.value = !0, c("shown"), Y();
       } else {
-        x(), p.value = !1, w.value = !1, m.value = !0, await H(l.transitionDuration), m.value = !1, D.value = !0;
+        x(), p.value = !1, w.value = !1, m.value = !0, await T(l.transitionDuration), m.value = !1, z.value = !0;
         const { modalHasClosed: e, openedModals: t } = C();
         e(), h.value = 0, t.value || S(), c("hidden");
       }
     };
-    ce(
+    de(
       () => l.modelValue,
       () => {
-        !l.modelValue && !n.value || M && !globalThis.document || A();
+        !l.modelValue && !n.value || D && !globalThis.document || A();
       },
       { flush: "post" }
     );
@@ -94,13 +94,12 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
       const e = [
         {
           "bb-base-dialog bb-base-dialog__overlay": !0,
-          "bb-base-dialog--fullscreen": T.value,
+          "bb-base-dialog--fullscreen": M.value,
           "bb-base-dialog--faded": !X.value,
           "bb-base-dialog--open": w.value,
           "bb-base-dialog--opening": p.value,
-          "bb-base-dialog--closed": D.value,
-          "bb-base-dialog--closing": m.value,
-          [`bb-base-dialog--transition-${l.transition}`]: !0
+          "bb-base-dialog--closed": z.value,
+          "bb-base-dialog--closing": m.value
         },
         l.overlayClasses
       ].flat(), t = {
@@ -110,7 +109,7 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
         onWheel: k,
         onKeydown: k
       }, i = {
-        transitionDuration: l.transitionDuration / 1e3 + "s"
+        "--transition-duration": l.transitionDuration / 1e3 + "s"
       };
       return {
         class: e,
@@ -137,22 +136,19 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
         md: 652,
         lg: 896
       };
-      T.value ? i = "100%" : typeof l.size == "number" ? i = l.size + "px" : l.size in F ? i = F[l.size] + "px" : i = l.size + "px";
-      const ie = {
-        maxWidth: i,
-        transitionDuration: l.transitionDuration / 1e3 + "s"
-      };
-      return {
+      return M.value ? i = "100%" : typeof l.size == "number" ? i = l.size + "px" : l.size in F ? i = F[l.size] + "px" : i = l.size + "px", {
         class: e,
-        style: ie,
+        style: {
+          maxWidth: i
+        },
         ...t
       };
     });
     let I = 0;
-    const r = pe(
+    const r = be(
       async () => {
         if (I++, I === 100) {
-          const { error: e } = ye();
+          const { error: e } = ge();
           e(
             "Dialog is updating its height too often. Please check the content is reliably sized."
           );
@@ -163,7 +159,7 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
         }
         if (f.value && s.value && b.value) {
           const e = f.value.scrollHeight + s.value.scrollHeight + b.value.scrollHeight + 2;
-          if (y.value && (y.value.style.height = "0px", y.value.style.height = `${e + 2}px`, await H(30), f.value && s.value && b.value)) {
+          if (y.value && (y.value.style.height = "0px", y.value.style.height = `${e + 2}px`, await T(30), f.value && s.value && b.value)) {
             const t = f.value.scrollHeight + s.value.scrollHeight + b.value.scrollHeight + 2;
             e !== t && r();
           }
@@ -172,17 +168,17 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
       200,
       { trailing: !0 }
     );
-    return (e, t) => (_(), ve(we, null, {
-      default: fe(() => [
+    return (e, t) => (_(), ce(he, null, {
+      default: ve(() => [
         a("div", P(ae.value, {
           ref_key: "overlay",
           ref: v
         }), [
           a("div", P(se.value, {
             ref_key: "panel",
-            ref: L
+            ref: $
           }), [
-            n.value ? (_(), $("div", {
+            n.value ? (_(), H("div", {
               key: 0,
               ref_key: "content",
               ref: y,
@@ -203,11 +199,11 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
                     class: "bb-base-dialog__title"
                   }, [
                     d(e.$slots, "title", { text: e.title }, () => [
-                      be(K(e.title), 1)
+                      fe(K(e.title), 1)
                     ])
                   ]),
-                  a("span", _e, [
-                    e.showClose ? (_(), $("button", {
+                  a("span", ke, [
+                    e.showClose ? (_(), H("button", {
                       key: 0,
                       "aria-label": le.value,
                       type: "button",
@@ -230,7 +226,7 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
                           ])
                         ], -1))
                       ])
-                    ], 8, Ce)) : z("", !0)
+                    ], 8, _e)) : L("", !0)
                   ])
                 ])
               ], 512),
@@ -243,11 +239,11 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
                   descriptionId: V,
                   text: e.description
                 }, () => [
-                  e.description ? (_(), $("div", {
+                  e.description ? (_(), H("div", {
                     key: 0,
                     id: V,
                     class: "bb-base-dialog__description sr-only"
-                  }, K(e.description), 1)) : z("", !0)
+                  }, K(e.description), 1)) : L("", !0)
                 ]),
                 d(e.$slots, "default")
               ], 512),
@@ -259,7 +255,7 @@ const _e = { class: "bb-base-dialog-close" }, Ce = ["aria-label"], Se = /* @__PU
               }, [
                 d(e.$slots, "footer")
               ], 512)
-            ], 512)) : z("", !0)
+            ], 512)) : L("", !0)
           ], 16)
         ], 16)
       ]),

package/dist/index250.js

@@ -1,5 +1,20 @@
-import r from "./index301.js";
-const t = r;
+import { isNil as c } from "./index260.js";
+const a = (t, r) => {
+  if (!Object.prototype.hasOwnProperty.call(t, r))
+    throw new Error(
+      `Object ${JSON.stringify(t, null, 2)} has no property named "${r.toString()}"`
+    );
+}, l = (t) => typeof t == "string" ? t.toLocaleLowerCase() : JSON.stringify(t).toLowerCase(), y = (t, r, s) => {
+  const i = s.toLocaleLowerCase();
+  for (let e = 0; e < r.length; e++) {
+    const n = r[e];
+    a(t, n);
+    const o = t[n];
+    if (c(o)) continue;
+    if (l(o).includes(i)) return !0;
+  }
+  return !1;
+};
 export {
-  t as deburr
+  y as matchAnyKey
 };

package/dist/index251.js

@@ -1,4 +1,128 @@
-const o = (e) => e[0];
+import { arrow as j, computePosition as A } from "./index258.js";
+import { autoUpdate as W, flip as X, hide as Y, offset as Z, platform as ee, shift as ne } from "./index258.js";
+import { isNode as B, getNodeName as F } from "./index302.js";
+import { getOverflowAncestors as le } from "./index302.js";
+import { computed as a, ref as f, shallowRef as I, watch as h, getCurrentScope as U, onScopeDispose as k, shallowReadonly as r, unref as q } from "vue";
+function z(e) {
+  return e != null && typeof e == "object" && "$el" in e;
+}
+function g(e) {
+  if (z(e)) {
+    const l = e.$el;
+    return B(l) && F(l) === "#comment" ? null : l;
+  }
+  return e;
+}
+function o(e) {
+  return typeof e == "function" ? e() : q(e);
+}
+function K(e) {
+  return {
+    name: "arrow",
+    options: e,
+    fn(l) {
+      const t = g(o(e.element));
+      return t == null ? {} : j({
+        element: t,
+        padding: e.padding
+      }).fn(l);
+    }
+  };
+}
+function M(e) {
+  return typeof window > "u" ? 1 : (e.ownerDocument.defaultView || window).devicePixelRatio || 1;
+}
+function C(e, l) {
+  const t = M(e);
+  return Math.round(l * t) / t;
+}
+function L(e, l, t) {
+  t === void 0 && (t = {});
+  const x = t.whileElementsMounted, V = a(() => {
+    var n;
+    return (n = o(t.open)) != null ? n : !0;
+  }), D = a(() => o(t.middleware)), d = a(() => {
+    var n;
+    return (n = o(t.placement)) != null ? n : "bottom";
+  }), v = a(() => {
+    var n;
+    return (n = o(t.strategy)) != null ? n : "absolute";
+  }), S = a(() => {
+    var n;
+    return (n = o(t.transform)) != null ? n : !0;
+  }), i = a(() => g(e.value)), u = a(() => g(l.value)), p = f(0), w = f(0), c = f(v.value), O = f(d.value), P = I({}), y = f(!1), _ = a(() => {
+    const n = {
+      position: c.value,
+      left: "0",
+      top: "0"
+    };
+    if (!u.value)
+      return n;
+    const R = C(u.value, p.value), b = C(u.value, w.value);
+    return S.value ? {
+      ...n,
+      transform: "translate(" + R + "px, " + b + "px)",
+      ...M(u.value) >= 1.5 && {
+        willChange: "transform"
+      }
+    } : {
+      position: c.value,
+      left: R + "px",
+      top: b + "px"
+    };
+  });
+  let s;
+  function m() {
+    i.value == null || u.value == null || A(i.value, u.value, {
+      middleware: D.value,
+      placement: d.value,
+      strategy: v.value
+    }).then((n) => {
+      p.value = n.x, w.value = n.y, c.value = n.strategy, O.value = n.placement, P.value = n.middlewareData, y.value = !0;
+    });
+  }
+  function E() {
+    typeof s == "function" && (s(), s = void 0);
+  }
+  function N() {
+    if (E(), x === void 0) {
+      m();
+      return;
+    }
+    if (i.value != null && u.value != null) {
+      s = x(i.value, u.value, m);
+      return;
+    }
+  }
+  function $() {
+    V.value || (y.value = !1);
+  }
+  return h([D, d, v], m, {
+    flush: "sync"
+  }), h([i, u], N, {
+    flush: "sync"
+  }), h(V, $, {
+    flush: "sync"
+  }), U() && k(E), {
+    x: r(p),
+    y: r(w),
+    strategy: r(c),
+    placement: r(O),
+    middlewareData: r(P),
+    isPositioned: r(y),
+    floatingStyles: _,
+    update: m
+  };
+}
 export {
-  o as head
+  K as arrow,
+  W as autoUpdate,
+  A as computePosition,
+  X as flip,
+  le as getOverflowAncestors,
+  Y as hide,
+  Z as offset,
+  ee as platform,
+  ne as shift,
+  L as useFloating
 };

package/dist/index252.js

@@ -1,12 +1,108 @@
-const o = (t, r) => {
-  const e = {};
-  for (const c in t)
-    if (Object.prototype.hasOwnProperty.call(t, c)) {
-      const n = t[c];
-      r(n, c, t) && (e[c] = n);
-    }
-  return e;
-};
+import { defineComponent as y, ref as F, computed as H, watch as N, openBlock as p, createElementBlock as L, Fragment as S, renderList as V, createBlock as A, normalizeClass as O, withModifiers as P, withCtx as $, createTextVNode as z, toDisplayString as D } from "vue";
+import { hash as d } from "./index236.js";
+import { isNil as l } from "./index260.js";
+import E from "./index125.js";
+/* empty css         */
+const K = /* @__PURE__ */ y({
+  __name: "ChipsBox",
+  props: {
+    options: {}
+  },
+  emits: ["option:unselected"],
+  setup(f, { expose: v, emit: h }) {
+    const t = f, u = h, n = F(null), i = H(() => t.options.some((e) => !e.disabled)), a = (e = 1) => {
+      const s = l(n.value) ? -1 : n.value;
+      let o = (s + e) % t.options.length;
+      for (; t.options[o].disabled && o !== s; )
+        o = a(e + 1);
+      return o;
+    }, x = () => {
+      if (!i.value) return;
+      const e = a();
+      n.value = e;
+    }, c = (e = 1) => {
+      const s = l(n.value) ? 0 : n.value;
+      let o = (s - e + t.options.length) % t.options.length;
+      for (; t.options[o].disabled && o !== s; )
+        o = c(e + 1);
+      return o;
+    }, m = async () => {
+      if (!i.value) return;
+      const e = c();
+      n.value = e;
+    }, w = () => {
+      if (!i.value) return;
+      let e = 0;
+      for (; t.options[e].disabled; )
+        e++;
+      n.value = e;
+    }, b = () => {
+      if (!i.value) return;
+      let e = t.options.length - 1;
+      for (; t.options[e].disabled && e !== 0; )
+        e--;
+      n.value = e;
+    }, I = () => {
+      if (!i.value) return;
+      let e = 0;
+      for (; !t.options[e].selected && t.options.length !== e; )
+        e++;
+      n.value = e;
+    }, g = () => {
+      if (!i.value) return;
+      let e = t.options.length - 1;
+      for (; t.options[e].selected && e !== 0; )
+        e--;
+      n.value = e;
+    }, _ = (e) => {
+      if (!i.value) return;
+      const s = t.options.findIndex(
+        (o) => o.valueHash === e
+      );
+      s >= 0 && (n.value = s);
+    }, r = () => {
+      n.value = null;
+    }, k = () => {
+      if (l(n.value)) return;
+      const e = t.options[n.value];
+      e.selected && u("option:unselected", e);
+    }, C = () => l(n.value) ? void 0 : t.options[n.value];
+    return N(
+      () => t.options,
+      (e, s) => {
+        d(e) !== d(s) && r();
+      },
+      {
+        flush: "post"
+      }
+    ), v({
+      focusNext: x,
+      focusPrevious: m,
+      focusFirst: w,
+      focusFirstSelected: I,
+      focusLast: b,
+      focusLastSelected: g,
+      blur: r,
+      confirmOption: k,
+      focusByHash: _,
+      getHighlighted: C
+    }), (e, s) => (p(!0), L(S, null, V(e.options, (o, B) => (p(), A(E, {
+      key: o.valueHash,
+      class: O({
+        "bb-chipsbox-item": !0,
+        "bb-chipsbox-item--focused": B === n.value
+      }),
+      clearable: !0,
+      text: o.text,
+      "onClick:clear": P((M) => u("option:unselected", o), ["stop"])
+    }, {
+      default: $(() => [
+        z(D(o.text), 1)
+      ]),
+      _: 2
+    }, 1032, ["class", "text", "onClick:clear"]))), 128));
+  }
+});
 export {
-  o as pickBy
+  K as default
 };

package/dist/index254.js

@@ -1,108 +1,102 @@
-import { defineComponent as y, ref as F, computed as H, watch as N, openBlock as p, createElementBlock as L, Fragment as S, renderList as V, createBlock as A, normalizeClass as O, withModifiers as P, withCtx as $, createTextVNode as z, toDisplayString as D } from "vue";
-import { hash as d } from "./index225.js";
-import { isNil as l } from "./index249.js";
-import E from "./index125.js";
-/* empty css         */
-const K = /* @__PURE__ */ y({
-  __name: "ChipsBox",
+import { defineComponent as F, ref as H, computed as L, watch as N, openBlock as d, createElementBlock as v, Fragment as S, renderList as A, normalizeClass as O, withModifiers as P, toDisplayString as V } from "vue";
+import { hash as f } from "./index236.js";
+import { isNil as i } from "./index260.js";
+const z = ["text", "onClick:clear"], j = /* @__PURE__ */ F({
+  __name: "CommaBox",
   props: {
     options: {}
   },
   emits: ["option:unselected"],
-  setup(f, { expose: v, emit: h }) {
-    const t = f, u = h, n = F(null), i = H(() => t.options.some((e) => !e.disabled)), a = (e = 1) => {
-      const s = l(n.value) ? -1 : n.value;
+  setup(m, { expose: h, emit: x }) {
+    const t = m, a = x, n = H(null), l = L(() => t.options.some((e) => !e.disabled)), u = (e = 1) => {
+      const s = i(n.value) ? -1 : n.value;
       let o = (s + e) % t.options.length;
       for (; t.options[o].disabled && o !== s; )
-        o = a(e + 1);
+        o = u(e + 1);
       return o;
-    }, x = () => {
-      if (!i.value) return;
-      const e = a();
+    }, b = () => {
+      if (!l.value) return;
+      const e = u();
       n.value = e;
     }, c = (e = 1) => {
-      const s = l(n.value) ? 0 : n.value;
+      const s = i(n.value) ? 0 : n.value;
       let o = (s - e + t.options.length) % t.options.length;
       for (; t.options[o].disabled && o !== s; )
         o = c(e + 1);
       return o;
-    }, m = async () => {
-      if (!i.value) return;
+    }, w = async () => {
+      if (!l.value) return;
       const e = c();
       n.value = e;
-    }, w = () => {
-      if (!i.value) return;
+    }, I = () => {
+      if (!l.value) return;
       let e = 0;
       for (; t.options[e].disabled; )
         e++;
       n.value = e;
-    }, b = () => {
-      if (!i.value) return;
+    }, g = () => {
+      if (!l.value) return;
       let e = t.options.length - 1;
       for (; t.options[e].disabled && e !== 0; )
         e--;
       n.value = e;
-    }, I = () => {
-      if (!i.value) return;
+    }, k = () => {
+      if (!l.value) return;
       let e = 0;
       for (; !t.options[e].selected && t.options.length !== e; )
         e++;
       n.value = e;
-    }, g = () => {
-      if (!i.value) return;
+    }, _ = () => {
+      if (!l.value) return;
       let e = t.options.length - 1;
       for (; t.options[e].selected && e !== 0; )
         e--;
       n.value = e;
-    }, _ = (e) => {
-      if (!i.value) return;
+    }, C = (e) => {
+      if (!l.value) return;
       const s = t.options.findIndex(
         (o) => o.valueHash === e
       );
       s >= 0 && (n.value = s);
     }, r = () => {
       n.value = null;
-    }, k = () => {
-      if (l(n.value)) return;
+    }, y = () => {
+      if (!n.value) return;
       const e = t.options[n.value];
-      e.selected && u("option:unselected", e);
-    }, C = () => l(n.value) ? void 0 : t.options[n.value];
+      e.selected && a("option:unselected", e);
+    }, B = () => i(n.value) ? void 0 : t.options[n.value];
     return N(
       () => t.options,
       (e, s) => {
-        d(e) !== d(s) && r();
+        f(e) !== f(s) && r();
       },
       {
         flush: "post"
       }
-    ), v({
-      focusNext: x,
-      focusPrevious: m,
-      focusFirst: w,
-      focusFirstSelected: I,
-      focusLast: b,
-      focusLastSelected: g,
+    ), h({
+      focusNext: b,
+      focusPrevious: w,
+      focusFirst: I,
+      focusFirstSelected: k,
+      focusLast: g,
+      focusLastSelected: _,
       blur: r,
-      confirmOption: k,
-      focusByHash: _,
-      getHighlighted: C
-    }), (e, s) => (p(!0), L(S, null, V(e.options, (o, B) => (p(), A(E, {
+      confirmOption: y,
+      focusByHash: C,
+      getHighlighted: B
+    }), (e, s) => (d(!0), v(S, null, A(e.options, (o, p) => (d(), v("span", {
       key: o.valueHash,
       class: O({
-        "bb-chipsbox-item": !0,
-        "bb-chipsbox-item--focused": B === n.value
+        "bb-commabox-item": !0,
+        "bb-commabox-item--focused": p === n.value,
+        "bb-commabox-item--has-comma": p !== e.options.length - 1
       }),
       clearable: !0,
       text: o.text,
-      "onClick:clear": P((M) => u("option:unselected", o), ["stop"])
-    }, {
-      default: $(() => [
-        z(D(o.text), 1)
-      ]),
-      _: 2
-    }, 1032, ["class", "text", "onClick:clear"]))), 128));
+      "onClick:clear": P((D) => a("option:unselected", o), ["stop"])
+    }, V(o.text), 43, z))), 128));
   }
 });
 export {
-  K as default
+  j as default
 };