vue-composable-ui 0.0.1 → 1.0.1

package/dist/composable-ui.js

@@ -0,0 +1,1114 @@
+import { ref as S, watch as oe, nextTick as H, onMounted as ae, onBeforeUnmount as G, shallowRef as pe, computed as E, provide as U, readonly as J, shallowReadonly as me, triggerRef as ce, unref as s, inject as B, onBeforeMount as be, defineComponent as A, mergeModels as ie, useModel as W, openBlock as _, createElementBlock as y, renderSlot as O, createCommentVNode as N, useSlots as Ie, Fragment as z, createBlock as te, Teleport as we, mergeProps as de, createTextVNode as he, toDisplayString as _e, renderList as fe, withDirectives as ge, vModelDynamic as ye } from "vue";
+function R(i) {
+  return typeof i == "string" ? S(document.querySelector(i) || void 0) : i instanceof HTMLElement ? S(i) : i;
+}
+function Q(i, e, {
+  direction: t = "down",
+  align: o = "left",
+  position: n = "fixed",
+  closeOnOutsideClick: r = !0,
+  closeOnInsideClick: f = !1
+} = {}) {
+  const a = S(!1);
+  function c() {
+    const v = R(i);
+    if (!v.value) throw new Error("Activator element is undefined");
+    return v.value;
+  }
+  function u() {
+    const v = R(e);
+    if (!v.value) throw new Error("Popover element is undefined");
+    return v.value;
+  }
+  function m({ focus: v = !0 } = {}) {
+    a.value = !0, v && H(() => {
+      u().focus();
+    });
+  }
+  function b({ focus: v = !0 } = {}) {
+    a.value = !1, v && c().focus();
+  }
+  function d(v) {
+    a.value ? b(v) : m(v);
+  }
+  function w() {
+    if (!a.value) return;
+    const v = c(), $ = u();
+    $.style.position = n;
+    const {
+      top: j,
+      right: l,
+      bottom: p,
+      left: h,
+      width: x,
+      height: I
+    } = v.getBoundingClientRect(), L = $.offsetHeight, F = $.offsetWidth, K = document.documentElement.clientHeight, q = document.documentElement.clientWidth;
+    let P = t;
+    t == "up" ? j - L < 0 && (P = "down") : t == "down" ? p + L > K && (P = "up") : t == "right" ? l + F > q && (P = "left") : t == "left" && h - F < 0 && (P = "right");
+    let M = o;
+    o == "left" ? h + F > q && (M = "right") : o == "right" ? l - F < 0 && (M = "left") : o == "top" ? j + L > K && (M = "bottom") : o == "bottom" && p - L < 0 && (M = "top");
+    const V = {
+      top: "auto",
+      bottom: "auto",
+      left: "auto",
+      right: "auto",
+      width: "auto"
+    }, T = n === "fixed";
+    P == "up" ? V.bottom = `${I + (T ? K - p : 0)}px` : P == "down" ? V.top = `${I + (T ? j : 0)}px` : P == "right" ? V.left = `${x + (T ? h : 0)}px` : P == "left" && (V.right = `${x + (T ? q - l : 0)}px`), ["up", "down"].includes(P) ? M == "right" ? V.right = `${T ? q - l : 0}px` : M == "left" || M == "stretch" ? V.left = `${T ? h : 0}px` : M == "center" && (V.left = `${(T ? h : 0) - (F - x) / 2}px`) : M == "bottom" ? V.bottom = `${T ? K - p : 0}px` : M == "top" ? V.top = `${T ? j : 0}px` : M == "center" && (V.top = `${(T ? j : 0) - (L - I) / 2}px`), ["up", "down"].includes(P) && M === "stretch" && (V.width = x + "px");
+    for (const le in V)
+      $.style[le] = V[le];
+  }
+  oe(
+    a,
+    (v) => {
+      v && H(() => {
+        w();
+      });
+    },
+    { flush: "pre" }
+  );
+  function C(v) {
+    const $ = v.target;
+    if (!c().contains($))
+      try {
+        u().contains($) ? f && b() : r && (a.value = !1);
+      } catch {
+      }
+  }
+  const g = new ResizeObserver(w), k = new AbortController();
+  return ae(() => {
+    window.addEventListener("resize", w, {
+      passive: !0,
+      signal: k.signal
+    }), window.addEventListener("scroll", w, {
+      passive: !0,
+      //capture: true,
+      signal: k.signal
+    }), window.addEventListener("click", C, {
+      passive: !0,
+      signal: k.signal
+    }), g.observe(c());
+  }), G(() => {
+    k.abort(), g.disconnect();
+  }), {
+    isOpen: a,
+    open: m,
+    close: b,
+    toggle: d
+  };
+}
+const ne = Symbol();
+function ee(i, e) {
+  const [t, o] = [s(i), s(e)];
+  return typeof t == "object" ? typeof o == "object" ? JSON.stringify(t) === JSON.stringify(o) : !1 : t === o;
+}
+function X(i) {
+  let e = 0;
+  const t = pe([]), o = S(), n = E(() => Array.isArray(i.value));
+  function r(l) {
+    const p = t.value.find((h) => h.id === l);
+    if (!p) throw new Error(`Item not found: (${l})`);
+    return p;
+  }
+  function f(l) {
+    const p = s(l.element);
+    if (p)
+      return p.focus(), p;
+  }
+  function a(l, { focus: p = !1 } = {}) {
+    o.value = (l == null ? void 0 : l.id) ?? void 0, l !== void 0 && p && f(l);
+  }
+  function c(l, { focus: p = !1 } = {}) {
+    const h = r(l);
+    return a(h, { focus: p });
+  }
+  function u(l) {
+    return o.value === l;
+  }
+  function m(l, p, h = !1) {
+    const x = R(l), I = e++;
+    return t.value.push({
+      id: I,
+      value: p,
+      element: x,
+      disabled: h
+    }), ce(t), I;
+  }
+  function b(l) {
+    u(l) && a();
+    const p = r(l), h = t.value.indexOf(p);
+    t.value.splice(h, 1), ce(t);
+  }
+  function d(l) {
+    const p = r(l);
+    if (s(p.disabled)) return;
+    const h = s(p.value);
+    if (h !== void 0) {
+      if (s(n)) {
+        const x = i.value.findIndex(
+          (I) => ee(h, I)
+        );
+        x > -1 ? i.value.splice(x, 1) : i.value = [...i.value, h];
+      } else
+        i.value = h;
+      a(p);
+    }
+  }
+  function w(l) {
+    return s(n) ? !!i.value.find(
+      (p) => ee(l.value, p)
+    ) : ee(i, l.value);
+  }
+  function C(l) {
+    try {
+      const p = r(l);
+      return w(p);
+    } catch {
+      return !1;
+    }
+  }
+  function g({ focus: l = !1 } = {}) {
+    for (let p of t.value)
+      if (w(p))
+        return a(p, { focus: l });
+  }
+  function k({ focus: l = !1 } = {}) {
+    if (t.value.length)
+      return a(t.value[0], { focus: l });
+  }
+  function v({ focus: l = !1 } = {}) {
+    if (t.value.length)
+      return a(t.value[t.value.length - 1], { focus: l });
+  }
+  function $({
+    focus: l = !1,
+    loop: p = !1
+  } = {}) {
+    if (o.value === void 0) return k({ focus: l });
+    const h = r(o.value), x = t.value.indexOf(h);
+    let I;
+    if (x + 1 < t.value.length)
+      I = t.value[x + 1];
+    else if (p)
+      I = t.value[0];
+    else
+      return;
+    return a(I, { focus: l });
+  }
+  function j({
+    focus: l = !1,
+    loop: p = !1
+  } = {}) {
+    if (o.value === void 0) return v({ focus: l });
+    const h = r(o.value), x = t.value.indexOf(h);
+    let I;
+    if (x - 1 > -1)
+      I = t.value[x - 1];
+    else if (p)
+      I = t.value[t.value.length - 1];
+    else
+      return;
+    return a(I, { focus: l });
+  }
+  return U(ne, {
+    value: J(i),
+    selectItem: d,
+    activateItem: c,
+    isSelected: C,
+    isActive: u,
+    addItem: m,
+    removeItem: b
+  }), {
+    items: me(t),
+    isMultiselectable: J(n),
+    activeItem: E(
+      () => o.value !== void 0 ? r(o.value) : void 0
+    ),
+    selectActiveItem: () => {
+      o.value !== void 0 && d(o.value);
+    },
+    activateSelectedItem: g,
+    activateFirstItem: k,
+    activateLastItem: v,
+    activateNextItem: $,
+    activatePrevItem: j
+  };
+}
+function Y(i, e, t) {
+  const o = B(ne);
+  if (!o)
+    throw new Error("List injectable context is not provided");
+  const n = S(-1), r = E(() => o.isSelected(n.value)), f = E(() => o.isActive(n.value));
+  function a() {
+    o.selectItem(n.value);
+  }
+  function c({ focus: u = !0 } = {}) {
+    s(t) || o.activateItem(n.value, { focus: u });
+  }
+  return be(() => {
+    n.value = o.addItem(i, e, t);
+  }), G(() => {
+    o.removeItem(n.value);
+  }), {
+    isSelected: r,
+    isActive: f,
+    select: a,
+    activate: c
+  };
+}
+function Te(i, e = [], t = !0) {
+  const o = S(!1), n = S(!0), r = S(), f = S("");
+  let a, c;
+  function u() {
+    a == null || a.focus();
+  }
+  function m() {
+    n.value = a.validity.valid, r.value = a.validity, f.value = a.validationMessage;
+  }
+  function b() {
+    if (!a) throw new Error("Form element is undefined");
+    if (a.setCustomValidity(""), a.validity.valid) {
+      const g = a.value;
+      for (const k of s(e)) {
+        const v = k(g);
+        if (v !== !0) {
+          a.setCustomValidity(v);
+          break;
+        }
+      }
+    }
+    return m(), n.value;
+  }
+  function d(g) {
+    m(), s(t) || g.preventDefault();
+  }
+  function w() {
+    b(), o.value = c !== a.value;
+  }
+  let C = new AbortController();
+  return ae(() => {
+    if (a = R(i).value, !a) throw new Error("Form element is undefined");
+    c = a.value, a.addEventListener("change", w, {
+      signal: C.signal,
+      passive: !0
+    }), a.addEventListener("invalid", d, {
+      signal: C.signal
+    }), a != null && a.autofocus && u();
+  }), G(() => {
+    C.abort();
+  }), {
+    focus: u,
+    validate: b,
+    isValid: n,
+    validity: J(r),
+    validationMessage: J(f),
+    isChanged: o
+  };
+}
+let ke = 0;
+function D(i = "id") {
+  return `${i}-${++ke}`;
+}
+const se = Symbol(), ve = Symbol(), re = Symbol(), Z = Symbol(), xe = ["aria-activedescendant", "aria-orientation", "aria-multiselectable"], Be = /* @__PURE__ */ A({
+  __name: "listbox",
+  props: /* @__PURE__ */ ie({
+    orientation: { default: "vertical" },
+    loop: { type: Boolean, default: !1 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(i) {
+    const e = i, t = W(i, "modelValue"), {
+      isMultiselectable: o,
+      activeItem: n,
+      selectActiveItem: r,
+      activateFirstItem: f,
+      activateLastItem: a,
+      activateNextItem: c,
+      activatePrevItem: u
+    } = X(t), m = E(() => {
+      var d, w;
+      return (w = (d = n.value) == null ? void 0 : d.element.value) == null ? void 0 : w.id;
+    });
+    function b(d) {
+      switch (d.code) {
+        case "Space":
+          r();
+          break;
+        case "ArrowUp":
+          if (e.orientation === "horizontal") return;
+          u({ focus: !1, loop: e.loop }), o.value || r();
+          break;
+        case "ArrowDown":
+          if (e.orientation === "horizontal") return;
+          c({ focus: !1, loop: e.loop }), o.value || r();
+          break;
+        case "ArrowLeft":
+          if (e.orientation === "vertical") return;
+          u({ focus: !1, loop: e.loop }), o.value || r();
+          break;
+        case "ArrowRight":
+          if (e.orientation === "vertical") return;
+          c({ focus: !1, loop: e.loop }), o.value || r();
+          break;
+        case "Home":
+          f({ focus: !1 });
+          break;
+        case "End":
+          a({ focus: !1 });
+          break;
+        default:
+          return;
+      }
+      d.preventDefault();
+    }
+    return (d, w) => (_(), y("div", {
+      onKeydown: b,
+      "aria-activedescendant": m.value,
+      "aria-orientation": d.orientation,
+      "aria-multiselectable": s(o),
+      role: "listbox",
+      tabindex: "0"
+    }, [
+      O(d.$slots, "default")
+    ], 40, xe));
+  }
+}), $e = ["id", "aria-disabled", "aria-selected", "data-active"], Fe = /* @__PURE__ */ A({
+  __name: "listboxOption",
+  props: {
+    id: {},
+    value: {},
+    disabled: { type: Boolean }
+  },
+  setup(i) {
+    const e = i, t = e.id ?? D("list-option"), o = S(), { isSelected: n, isActive: r, select: f } = Y(
+      o,
+      e.value,
+      e.disabled
+    );
+    return (a, c) => (_(), y("div", {
+      ref_key: "itemEl",
+      ref: o,
+      id: s(t),
+      onClick: c[0] || (c[0] = //@ts-ignore
+      (...u) => s(f) && s(f)(...u)),
+      "aria-disabled": a.disabled,
+      "aria-selected": s(n),
+      "data-active": s(r),
+      role: "option",
+      tabindex: "-1"
+    }, [
+      O(a.$slots, "default", {
+        isSelected: s(n),
+        isActive: s(r)
+      })
+    ], 8, $e));
+  }
+}), He = /* @__PURE__ */ A({
+  __name: "tabContainer",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(i) {
+    const e = W(i, "modelValue"), {
+      items: t,
+      selectActiveItem: o,
+      activateFirstItem: n,
+      activateLastItem: r,
+      activateNextItem: f,
+      activatePrevItem: a
+    } = X(e);
+    return U(se, {
+      getIds: (c) => E(() => {
+        var m, b;
+        const u = t.value.find((d) => d.value === c);
+        return {
+          tabId: ((m = u == null ? void 0 : u.element.value) == null ? void 0 : m.getAttribute("id")) || void 0,
+          panelId: ((b = u == null ? void 0 : u.element.value) == null ? void 0 : b.getAttribute("aria-controls")) || void 0
+        };
+      }),
+      selectActiveItem: o,
+      activateFirstItem: n,
+      activateLastItem: r,
+      activateNextItem: f,
+      activatePrevItem: a
+    }), (c, u) => (_(), y("div", null, [
+      O(c.$slots, "default")
+    ]));
+  }
+}), Ae = ["aria-orientation"], Ke = /* @__PURE__ */ A({
+  __name: "tabList",
+  props: {
+    orientation: { default: "horizontal" }
+  },
+  setup(i) {
+    const e = i, t = B(se);
+    if (!t)
+      throw new Error("Tabs injectable context is not provided");
+    function o(n) {
+      switch (n.code) {
+        case "ArrowUp":
+          e.orientation === "vertical" && t.activatePrevItem({ focus: !0, loop: !0 });
+          break;
+        case "ArrowDown":
+          e.orientation === "vertical" && t.activateNextItem({ focus: !0, loop: !0 });
+          break;
+        case "ArrowLeft":
+          e.orientation === "horizontal" && t.activatePrevItem({ focus: !0, loop: !0 });
+          break;
+        case "ArrowRight":
+          e.orientation === "horizontal" && t.activateNextItem({ focus: !0, loop: !0 });
+          break;
+        case "Home":
+          t.activateFirstItem({ focus: !0 });
+          break;
+        case "End":
+          t.activateLastItem({ focus: !0 });
+          break;
+        default:
+          return;
+      }
+      t.selectActiveItem(), n.preventDefault();
+    }
+    return (n, r) => (_(), y("div", {
+      onKeydown: o,
+      "aria-orientation": e.orientation,
+      role: "tablist"
+    }, [
+      O(n.$slots, "default")
+    ], 40, Ae));
+  }
+}), Ee = ["id", "aria-selected", "aria-controls", "tabindex"], Ne = /* @__PURE__ */ A({
+  __name: "tab",
+  props: {
+    id: {},
+    ariaControls: {},
+    value: {}
+  },
+  setup(i) {
+    const e = i, t = S(), { isSelected: o, select: n } = Y(t, e.value), r = e.id ?? D("tab"), f = e.ariaControls ?? D("tab-panel");
+    return (a, c) => (_(), y("button", {
+      ref_key: "tab",
+      ref: t,
+      onClick: c[0] || (c[0] = //@ts-ignore
+      (...u) => s(n) && s(n)(...u)),
+      id: s(r),
+      "aria-selected": s(o),
+      "aria-controls": s(f),
+      tabindex: s(o) ? 0 : -1,
+      role: "tab"
+    }, [
+      O(a.$slots, "default")
+    ], 8, Ee));
+  }
+}), Oe = ["id", "aria-labelledby"], ze = /* @__PURE__ */ A({
+  __name: "tabPanel",
+  props: {
+    value: {}
+  },
+  setup(i) {
+    const e = i, t = B(ne);
+    if (!t)
+      throw new Error("List injectable context is not provided");
+    const o = B(se);
+    if (!o)
+      throw new Error("Tabs injectable context is not provided");
+    const n = E(() => e.value === t.value.value), r = o.getIds(e.value);
+    return (f, a) => n.value ? (_(), y("div", {
+      key: 0,
+      id: s(r).panelId,
+      "aria-labelledby": s(r).tabId,
+      tabindex: "0",
+      role: "tabpanel"
+    }, [
+      O(f.$slots, "default")
+    ], 8, Oe)) : N("", !0);
+  }
+}), Re = /* @__PURE__ */ A({
+  __name: "popover",
+  props: {
+    id: {},
+    activatorId: {},
+    direction: { default: "down" },
+    align: { default: "left" },
+    position: { default: "fixed" },
+    closeOnOutsideClick: { type: Boolean, default: !0 },
+    closeOnInsideClick: { type: Boolean, default: !1 },
+    role: { default: "dialog" }
+  },
+  setup(i) {
+    const e = i, t = e.id ?? D("popover"), o = e.activatorId ?? D("popover-activator"), { isOpen: n, toggle: r, open: f, close: a } = Q(
+      `#${o}`,
+      `#${t}`,
+      {
+        direction: e.direction,
+        align: e.align,
+        position: e.position,
+        closeOnOutsideClick: e.closeOnOutsideClick,
+        closeOnInsideClick: e.closeOnInsideClick
+      }
+    ), c = E(() => ({
+      id: o,
+      "aria-controls": n.value ? e.id : void 0,
+      "aria-haspopup": e.role,
+      "aria-expanded": n.value
+    }));
+    return U(ve, {
+      popoverId: t,
+      activatorId: o,
+      role: e.role,
+      isOpen: n,
+      close: a
+    }), (u, m) => O(u.$slots, "default", {
+      attrs: c.value,
+      isOpen: s(n),
+      toggle: s(r),
+      open: s(f),
+      close: s(a)
+    });
+  }
+}), Ce = ["id", "role", "aria-labelledby"], Ue = /* @__PURE__ */ A({
+  __name: "popoverDialog",
+  setup(i) {
+    const e = B(ve);
+    if (!e)
+      throw new Error("Popover injectable context is not provided");
+    function t(o) {
+      switch (o.code) {
+        case "Escape":
+          e.close();
+          break;
+        default:
+          return;
+      }
+      o.preventDefault();
+    }
+    return (o, n) => s(e).isOpen.value ? (_(), y("div", {
+      key: 0,
+      onKeydown: t,
+      id: s(e).popoverId,
+      role: s(e).role,
+      "aria-labelledby": s(e).activatorId,
+      tabindex: "-1"
+    }, [
+      O(o.$slots, "default")
+    ], 40, Ce)) : N("", !0);
+  }
+}), Se = ["id"], We = /* @__PURE__ */ A({
+  inheritAttrs: !1,
+  __name: "tooltip",
+  props: {
+    id: {},
+    text: {},
+    delay: {},
+    direction: { default: "up" }
+  },
+  setup(i) {
+    const e = i, t = Ie(), o = S();
+    let n;
+    const r = e.id ?? D("tooltip"), { isOpen: f } = Q(`[aria-describedby=${r}]`, o, {
+      direction: e.direction,
+      align: "center"
+    });
+    function a() {
+      n = setTimeout(
+        () => {
+          f.value = !0;
+        },
+        typeof e.delay == "string" ? parseInt(e.delay) : e.delay
+      );
+    }
+    function c() {
+      f.value = !1, clearTimeout(n);
+    }
+    function u(d) {
+      d.key === "Escape" && c();
+    }
+    const m = {
+      "aria-describedby": r,
+      onmouseenter: a,
+      onmouseleave: c,
+      onfocus: a,
+      onblur: c,
+      onkeydown: u
+    }, b = new AbortController();
+    return ae(() => {
+      if (t.default) return;
+      const d = document.querySelector(
+        `[aria-describedby=${r}]`
+      );
+      if (!d)
+        throw new Error(`Tooltip activator not found: ${r}`);
+      d.addEventListener("mouseenter", a, {
+        signal: b.signal,
+        passive: !0
+      }), d.addEventListener("mouseleave", c, {
+        signal: b.signal,
+        passive: !0
+      }), d.addEventListener("focus", a, {
+        signal: b.signal,
+        passive: !0
+      }), d.addEventListener("blur", c, {
+        signal: b.signal,
+        passive: !0
+      }), d.addEventListener("keydown", u, {
+        signal: b.signal,
+        passive: !0
+      });
+    }), G(() => {
+      b.abort();
+    }), (d, w) => (_(), y(z, null, [
+      O(d.$slots, "default", { attrs: m }),
+      (_(), te(we, { to: "body" }, [
+        s(f) ? (_(), y("div", de({
+          key: 0,
+          ref_key: "popupEl",
+          ref: o,
+          id: s(r)
+        }, d.$attrs, { role: "tooltip" }), [
+          O(d.$slots, "content", {}, () => [
+            he(_e(d.text), 1)
+          ])
+        ], 16, Se)) : N("", !0)
+      ]))
+    ], 64));
+  }
+}), qe = /* @__PURE__ */ A({
+  __name: "menu",
+  props: /* @__PURE__ */ ie({
+    id: {},
+    activatorId: {},
+    direction: { default: "down" },
+    align: { default: "left" },
+    position: { default: "fixed" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(i) {
+    const e = i, t = e.id ?? D("menu"), o = e.activatorId ?? D("menu-activator"), n = W(i, "modelValue"), {
+      isMultiselectable: r,
+      activeItem: f,
+      activateFirstItem: a,
+      activateLastItem: c,
+      activateNextItem: u,
+      activatePrevItem: m
+    } = X(n), { isOpen: b, toggle: d, open: w, close: C } = Q(
+      `#${o}`,
+      `#${t}`,
+      {
+        direction: e.direction,
+        align: e.align,
+        position: e.position,
+        closeOnOutsideClick: !0,
+        closeOnInsideClick: !1
+      }
+    );
+    function g(v) {
+      switch (v.code) {
+        case "Space":
+        case "Enter":
+          d(), b.value && H(a);
+          break;
+        case "ArrowUp":
+          w(), H(c);
+          break;
+        case "ArrowDown":
+          w(), H(a);
+          break;
+        default:
+          return;
+      }
+      v.preventDefault();
+    }
+    const k = E(() => ({
+      id: o,
+      "aria-controls": b.value ? t : void 0,
+      "aria-haspopup": "menu",
+      "aria-expanded": b.value,
+      onclick: d,
+      onkeydown: g,
+      tabindex: 0
+    }));
+    return U(re, {
+      menuId: t,
+      activatorId: o,
+      isOpen: b,
+      close: C,
+      isMultiselectable: r,
+      activeItemId: E(() => {
+        var v, $;
+        return ($ = (v = f.value) == null ? void 0 : v.element.value) == null ? void 0 : $.id;
+      }),
+      activateFirstItem: a,
+      activateLastItem: c,
+      activateNextItem: u,
+      activatePrevItem: m
+    }), (v, $) => O(v.$slots, "default", { attrs: k.value });
+  }
+}), Ve = ["id", "aria-activedescendant", "aria-labelledby"], Je = /* @__PURE__ */ A({
+  __name: "menuItems",
+  setup(i) {
+    const e = B(re);
+    if (!e)
+      throw new Error("Menu injectable context is not provided");
+    function t(o) {
+      switch (o.code) {
+        case "ArrowUp":
+          e.activatePrevItem({ focus: !0, loop: !1 });
+          break;
+        case "ArrowDown":
+          e.activateNextItem({ focus: !0, loop: !1 });
+          break;
+        case "Home":
+          e.activateFirstItem({ focus: !0 });
+          break;
+        case "End":
+          e.activateLastItem({ focus: !0 });
+          break;
+        case "Escape":
+          e.close();
+          break;
+        case "Tab":
+          e.isOpen.value = !1;
+          return;
+        default:
+          return;
+      }
+      o.preventDefault();
+    }
+    return (o, n) => s(e).isOpen.value ? (_(), y("div", {
+      key: 0,
+      onKeydown: t,
+      id: s(e).menuId,
+      "aria-activedescendant": s(e).activeItemId.value,
+      "aria-labelledby": s(e).activatorId,
+      role: "menu",
+      tabindex: "-1"
+    }, [
+      O(o.$slots, "default")
+    ], 40, Ve)) : N("", !0);
+  }
+}), Le = ["id", "data-active", "role", "aria-checked", "aria-disabled"], Ge = /* @__PURE__ */ A({
+  __name: "menuItem",
+  props: {
+    id: {},
+    value: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["select"],
+  setup(i, { emit: e }) {
+    const t = i, o = e, n = t.id ?? D("menu-item"), r = S(), { isSelected: f, isActive: a, select: c, activate: u } = Y(
+      r,
+      t.value,
+      t.disabled
+    ), m = B(re);
+    if (!m)
+      throw new Error("Menu injectable context is not provided");
+    const b = E(() => t.value !== void 0 ? m.isMultiselectable.value ? "menuitemcheckbox" : "menuitemradio" : "menuitem");
+    function d() {
+      c(), o("select", t.value);
+    }
+    function w() {
+      d(), (t.value === void 0 || !(m != null && m.isMultiselectable.value)) && m.close();
+    }
+    function C(g) {
+      switch (g.code) {
+        case "Space":
+          d(), t.value === void 0 && m.close();
+          break;
+        case "Enter":
+          d(), m.close();
+          break;
+        default:
+          return;
+      }
+      g.preventDefault();
+    }
+    return (g, k) => (_(), y("div", {
+      ref_key: "itemEl",
+      ref: r,
+      id: s(n),
+      onClick: w,
+      onKeydown: C,
+      onMouseenter: k[0] || (k[0] = (v) => s(u)({ focus: !1 })),
+      "data-active": s(a),
+      role: b.value,
+      "aria-checked": g.value !== void 0 ? s(f) : void 0,
+      "aria-disabled": g.disabled || void 0,
+      tabindex: "-1"
+    }, [
+      O(g.$slots, "default", {
+        isSelected: s(f),
+        isActive: s(a)
+      })
+    ], 40, Le));
+  }
+}), Me = ["name", "value"], ue = /* @__PURE__ */ A({
+  __name: "comboboxHiddenInput",
+  props: {
+    name: {},
+    value: {}
+  },
+  setup(i) {
+    const e = i, t = E(() => {
+      if (typeof e.value == "object") {
+        const o = {};
+        for (const [n, r] of Object.entries(e.value))
+          o[`${e.name}[${n}]`] = r;
+        return o;
+      } else
+        return {
+          [e.name]: e.value
+        };
+    });
+    return (o, n) => (_(!0), y(z, null, fe(t.value, (r, f) => (_(), y("input", {
+      name: f,
+      value: r,
+      type: "hidden"
+    }, null, 8, Me))), 256));
+  }
+}), Qe = /* @__PURE__ */ A({
+  inheritAttrs: !1,
+  __name: "combobox",
+  props: /* @__PURE__ */ ie({
+    displayValue: { type: Function, default: (i) => Array.isArray(i) ? i.map((e) => e.toString()).join(", ") : i.toString() },
+    id: {},
+    activatorId: {},
+    name: {},
+    formValue: { type: Function, default: (i) => i }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(i) {
+    const e = i, t = E(() => w.value ? o.value.map((I) => e.formValue(I)) : e.formValue(o.value)), o = W(i, "modelValue"), n = e.id ?? D("combobox"), r = e.activatorId ?? n, f = `${n}-popover`, { isOpen: a, toggle: c, open: u, close: m } = Q(
+      `#${r}`,
+      `#${f}`,
+      {
+        direction: "down",
+        align: "stretch",
+        position: "fixed",
+        closeOnOutsideClick: !0,
+        closeOnInsideClick: !1
+      }
+    ), {
+      items: b,
+      activeItem: d,
+      isMultiselectable: w,
+      selectActiveItem: C,
+      activateSelectedItem: g,
+      activateFirstItem: k,
+      activateLastItem: v,
+      activateNextItem: $,
+      activatePrevItem: j
+    } = X(o), l = E(() => e.displayValue(o.value));
+    oe(b, () => {
+      !d.value && b.value.length && (g({ focus: !1 }), d.value || k({ focus: !1 }));
+    });
+    function p() {
+      var L;
+      (L = R(`#${r}`).value) == null || L.focus();
+    }
+    function h(I) {
+      if (a.value)
+        switch (I.code) {
+          case "Space":
+            C(), w.value || m({ focus: !0 });
+            break;
+          case "Enter":
+            C(), m({ focus: !0 });
+            break;
+          case "Tab":
+            C(), m({ focus: !0 });
+            return;
+          case "ArrowUp":
+            j({ focus: !1, loop: !1 });
+            break;
+          case "ArrowDown":
+            $({ focus: !1, loop: !1 });
+            break;
+          case "Home":
+            k({ focus: !1 });
+            break;
+          case "End":
+            v({ focus: !1 });
+            break;
+          case "Escape":
+            m({ focus: !0 });
+            break;
+          default:
+            return;
+        }
+      else
+        switch (I.code) {
+          case "Space":
+          case "Enter":
+            u({ focus: !1 });
+            break;
+          case "End":
+          case "ArrowUp":
+            u({ focus: !1 }), H(() => v({ focus: !1 }));
+            break;
+          case "Home":
+          case "ArrowDown":
+            u({ focus: !1 }), H(() => k({ focus: !1 }));
+            break;
+          default:
+            return;
+        }
+      I.preventDefault();
+    }
+    const x = E(() => {
+      var I, L;
+      return {
+        onkeydown: h,
+        onclick: () => u({ focus: !1 }),
+        id: n,
+        "aria-controls": a.value ? f : void 0,
+        "aria-expanded": a.value,
+        "aria-activedescendant": (L = (I = d.value) == null ? void 0 : I.element.value) == null ? void 0 : L.id,
+        "aria-haspopup": "listbox",
+        role: "combobox"
+      };
+    });
+    return U(Z, {
+      displayValue: l,
+      popoverId: f,
+      isOpen: a,
+      open: u,
+      close: m,
+      focus: p,
+      isMultiselectable: w,
+      activatorAttrs: x
+    }), (I, L) => (_(), y(z, null, [
+      I.name ? (_(), y(z, { key: 0 }, [
+        s(w) ? (_(!0), y(z, { key: 0 }, fe(t.value, (F, K) => (_(), te(ue, {
+          name: `${I.name}[${K}]`,
+          value: F
+        }, null, 8, ["name", "value"]))), 256)) : (_(), te(ue, {
+          key: 1,
+          name: I.name,
+          value: t.value
+        }, null, 8, ["name", "value"]))
+      ], 64)) : N("", !0),
+      O(I.$slots, "default", {
+        popoverId: f,
+        isOpen: s(a),
+        toggle: s(c),
+        displayValue: l.value,
+        attrs: x.value
+      })
+    ], 64));
+  }
+}), Xe = /* @__PURE__ */ A({
+  __name: "comboboxInput",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(i) {
+    const e = B(Z);
+    if (!e)
+      throw new Error("Combobox injectable context is not provided");
+    const t = W(i, "modelValue");
+    function o() {
+      t.value = e.displayValue.value;
+    }
+    oe(e.displayValue, o, { immediate: !0 });
+    const n = E(() => ({
+      oninput: () => e.open({ focus: !0 }),
+      onchange: o,
+      ...e.activatorAttrs.value
+    }));
+    return (r, f) => ge((_(), y("input", de({
+      "onUpdate:modelValue": f[0] || (f[0] = (a) => t.value = a)
+    }, n.value, { autocomplete: "off" }), null, 16)), [
+      [ye, t.value]
+    ]);
+  }
+}), De = ["id"], Ye = /* @__PURE__ */ A({
+  __name: "comboboxOptions",
+  setup(i) {
+    const e = B(Z);
+    if (!e)
+      throw new Error("Combobox injectable context is not provided");
+    return (t, o) => s(e).isOpen.value ? (_(), y("div", {
+      key: 0,
+      id: s(e).popoverId,
+      role: "listbox"
+    }, [
+      O(t.$slots, "default")
+    ], 8, De)) : N("", !0);
+  }
+}), je = ["id", "data-active", "aria-selected", "aria-disabled"], Ze = /* @__PURE__ */ A({
+  __name: "comboboxOption",
+  props: {
+    id: {},
+    value: {},
+    disabled: { type: Boolean }
+  },
+  setup(i) {
+    const e = i, t = e.id ?? D("combobox-option"), o = S(), { isSelected: n, isActive: r, activate: f, select: a } = Y(
+      o,
+      e.value,
+      e.disabled
+    ), c = B(Z);
+    if (!c)
+      throw new Error("Combobox injectable context is not provided");
+    function u() {
+      a(), c.isMultiselectable.value ? c.focus() : c.close({ focus: !0 });
+    }
+    return (m, b) => (_(), y("div", {
+      ref_key: "itemEl",
+      ref: o,
+      id: s(t),
+      onClick: u,
+      onMouseenter: b[0] || (b[0] = (d) => s(f)({ focus: !1 })),
+      "data-active": s(r),
+      "aria-selected": s(n),
+      "aria-disabled": m.disabled || void 0,
+      role: "option"
+    }, [
+      O(m.$slots, "default", {
+        isSelected: s(n),
+        isActive: s(r)
+      })
+    ], 40, je));
+  }
+});
+export {
+  Qe as Combobox,
+  Xe as ComboboxInput,
+  Ze as ComboboxOption,
+  Ye as ComboboxOptions,
+  Be as Listbox,
+  Fe as ListboxOption,
+  qe as Menu,
+  Ge as MenuItem,
+  Je as MenuItems,
+  Re as Popover,
+  Ue as PopoverDialog,
+  Ne as Tab,
+  He as TabContainer,
+  Ke as TabList,
+  ze as TabPanel,
+  We as Tooltip,
+  Z as injectCombobox,
+  re as injectMenu,
+  ve as injectPopover,
+  se as injectTabs,
+  Te as useFormControl,
+  R as useHTMLElement,
+  X as useList,
+  Y as useListOption,
+  Q as usePopover,
+  D as useSequentialId
+};