vue-composable-ui 1.1.1 → 1.1.2

package/dist/{combobox.vue_vue_type_script_setup_true_lang-ChCbDl0x.js → combobox.vue_vue_type_script_setup_true_lang-sMngTuXu.js}

@@ -1,13 +1,13 @@
-import { defineComponent as B, mergeModels as H, computed as p, useModel as T, useId as j, watch as K, provide as N, createElementBlock as v, openBlock as r, Fragment as b, createCommentVNode as P, renderSlot as U, createBlock as A, unref as k, renderList as _, nextTick as h } from "vue";
+import { defineComponent as B, computed as p, useModel as H, useId as T, watch as j, provide as K, openBlock as r, createElementBlock as v, Fragment as b, unref as k, renderList as N, createBlock as A, createCommentVNode as P, renderSlot as U, mergeModels as _, nextTick as h } from "vue";
 import { useHTMLElement as q } from "./composable-ui24.js";
-import { usePopover as z } from "./composable-ui22.js";
-import { useList as G } from "./composable-ui23.js";
-import { _ as $ } from "./comboboxHiddenInput.vue_vue_type_script_setup_true_lang-Ba-UPd-M.js";
-import { injectCombobox as J } from "./composable-ui25.js";
+import { usePopover as z } from "./composable-ui23.js";
+import { useList as G } from "./composable-ui22.js";
+import { _ as $ } from "./comboboxHiddenInput.vue_vue_type_script_setup_true_lang-BtODyQnH.js";
+import { injectCombobox as J } from "./composable-ui19.js";
 const ae = /* @__PURE__ */ B({
   inheritAttrs: !1,
   __name: "combobox",
-  props: /* @__PURE__ */ H({
+  props: /* @__PURE__ */ _({
     displayValue: { type: Function, default: (e) => Array.isArray(e) ? e.map((t) => t.toString()).join(", ") : e?.toString() },
     id: {},
     activatorId: {},
@@ -19,7 +19,7 @@ const ae = /* @__PURE__ */ B({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, I = p(() => u.value ? c.value.map((a) => t.formValue(a)) : t.formValue(c.value)), c = T(e, "modelValue"), i = t.id ?? j(), y = t.activatorId ?? i, l = `${i}-popover`, { isOpen: o, toggle: E, open: n, close: s } = z(
+    const t = e, I = p(() => u.value ? c.value.map((a) => t.formValue(a)) : t.formValue(c.value)), c = H(e, "modelValue"), i = t.id ?? T(), y = t.activatorId ?? i, l = `${i}-popover`, { isOpen: o, toggle: E, open: n, close: s } = z(
       `#${y}`,
       `#${l}`,
       {
@@ -40,7 +40,7 @@ const ae = /* @__PURE__ */ B({
       activateNextItem: S,
       activatePrevItem: C
     } = G(c), g = p(() => t.displayValue(c.value));
-    K(w, () => {
+    j(w, () => {
       !f.value && w.value.length && (O({ focus: !1 }), f.value || d({ focus: !1 }));
     });
     function D() {
@@ -103,7 +103,7 @@ const ae = /* @__PURE__ */ B({
       "aria-haspopup": "listbox",
       role: "combobox"
     }));
-    return N(J, {
+    return K(J, {
       displayValue: g,
       popoverId: l,
       isOpen: o,
@@ -115,7 +115,7 @@ const ae = /* @__PURE__ */ B({
       activatorOnKeyDown: M
     }), (a, Q) => (r(), v(b, null, [
       e.name ? (r(), v(b, { key: 0 }, [
-        k(u) ? (r(!0), v(b, { key: 0 }, _(I.value, (F, L) => (r(), A($, {
+        k(u) ? (r(!0), v(b, { key: 0 }, N(I.value, (F, L) => (r(), A($, {
           name: `${e.name}[${L}]`,
           value: F
         }, null, 8, ["name", "value"]))), 256)) : (r(), A($, {

package/dist/{comboboxHiddenInput.vue_vue_type_script_setup_true_lang-Ba-UPd-M.js → comboboxHiddenInput.vue_vue_type_script_setup_true_lang-BtODyQnH.js}

@@ -1,4 +1,4 @@
-import { defineComponent as l, computed as p, createElementBlock as r, openBlock as u, Fragment as m, renderList as i } from "vue";
+import { defineComponent as l, computed as p, openBlock as r, createElementBlock as u, Fragment as m, renderList as i } from "vue";
 const d = ["name", "value"], f = /* @__PURE__ */ l({
   __name: "comboboxHiddenInput",
   props: {
@@ -17,7 +17,7 @@ const d = ["name", "value"], f = /* @__PURE__ */ l({
           [e.name]: e.value
         };
     });
-    return (n, o) => (u(!0), r(m, null, i(c.value, (t, s) => (u(), r("input", {
+    return (n, o) => (r(!0), u(m, null, i(c.value, (t, s) => (r(), u("input", {
       name: s,
       value: t,
       type: "hidden"

package/dist/{comboboxInput.vue_vue_type_script_setup_true_lang-D3KIXNRO.js → comboboxInput.vue_vue_type_script_setup_true_lang-Be5FBBbM.js}

@@ -1,5 +1,5 @@
-import { defineComponent as r, inject as a, useModel as m, watch as p, withDirectives as d, createElementBlock as s, openBlock as f, mergeProps as v, unref as n, vModelDynamic as c } from "vue";
-import { injectCombobox as b } from "./composable-ui25.js";
+import { defineComponent as r, inject as a, useModel as m, watch as p, withDirectives as d, openBlock as s, createElementBlock as f, mergeProps as v, unref as n, vModelDynamic as c } from "vue";
+import { injectCombobox as b } from "./composable-ui19.js";
 const y = /* @__PURE__ */ r({
   __name: "comboboxInput",
   props: {
@@ -15,7 +15,7 @@ const y = /* @__PURE__ */ r({
     function u() {
       l.value = e.displayValue.value;
     }
-    return p(e.displayValue, u, { immediate: !0 }), (w, o) => d((f(), s("input", v({
+    return p(e.displayValue, u, { immediate: !0 }), (w, o) => d((s(), f("input", v({
       "onUpdate:modelValue": o[0] || (o[0] = (t) => l.value = t)
     }, n(e).activatorAttrs, {
       onClick: o[1] || (o[1] = (t) => n(e).open({ focus: !1 })),

package/dist/{comboboxOption.vue_vue_type_script_setup_true_lang-C9FIG5ye.js → comboboxOption.vue_vue_type_script_setup_true_lang-DmF_EaqI.js}

@@ -1,6 +1,6 @@
-import { defineComponent as f, useId as b, useTemplateRef as p, inject as v, createElementBlock as x, openBlock as E, unref as e, renderSlot as _ } from "vue";
-import { useListOption as k } from "./composable-ui18.js";
-import { injectCombobox as C } from "./composable-ui25.js";
+import { defineComponent as f, useId as b, useTemplateRef as p, inject as v, openBlock as x, createElementBlock as E, unref as e, renderSlot as _ } from "vue";
+import { useListOption as k } from "./composable-ui21.js";
+import { injectCombobox as C } from "./composable-ui19.js";
 const j = ["id", "data-active", "aria-selected", "aria-disabled"], A = /* @__PURE__ */ f({
   __name: "comboboxOption",
   props: {
@@ -19,7 +19,7 @@ const j = ["id", "data-active", "aria-selected", "aria-disabled"], A = /* @__PUR
     function m() {
       r(), t.isMultiselectable.value ? t.focus() : t.close({ focus: !0 });
     }
-    return (u, l) => (E(), x("div", {
+    return (u, l) => (x(), E("div", {
       ref_key: "itemEl",
       ref: s,
       id: e(c),

package/dist/comboboxOptions.vue_vue_type_script_setup_true_lang-DN0tz5dv.js

@@ -0,0 +1,20 @@
+import { defineComponent as n, inject as r, unref as e, openBlock as i, createElementBlock as c, renderSlot as m, createCommentVNode as s } from "vue";
+import { injectCombobox as p } from "./composable-ui19.js";
+const d = ["id"], f = /* @__PURE__ */ n({
+  __name: "comboboxOptions",
+  setup(b) {
+    const o = r(p);
+    if (!o)
+      throw new Error("Combobox injectable context is not provided");
+    return (t, l) => e(o).isOpen.value ? (i(), c("div", {
+      key: 0,
+      id: e(o).popoverId,
+      role: "listbox"
+    }, [
+      m(t.$slots, "default")
+    ], 8, d)) : s("", !0);
+  }
+});
+export {
+  f as _
+};

package/dist/composable-ui.js

@@ -1,26 +1,26 @@
-import { usePopover as e } from "./composable-ui22.js";
-import { useList as p } from "./composable-ui23.js";
-import { useListOption as s } from "./composable-ui18.js";
-import { useFormControl as a } from "./composable-ui3.js";
+import { usePopover as e } from "./composable-ui23.js";
+import { useList as p } from "./composable-ui22.js";
+import { useListOption as s } from "./composable-ui21.js";
+import { useFormControl as a } from "./composable-ui20.js";
 import { useHTMLElement as n } from "./composable-ui24.js";
-import { useValidation as b } from "./composable-ui2.js";
-import { injectCombobox as u, injectMenu as C, injectPopover as T, injectTabs as l } from "./composable-ui25.js";
-import { _ as M } from "./listbox.vue_vue_type_script_setup_true_lang-BJS1g6K9.js";
-import { _ as c } from "./listboxOption.vue_vue_type_script_setup_true_lang-DMkQ_ZA_.js";
-import { _ as v } from "./tabContainer.vue_vue_type_script_setup_true_lang-YfrBXoWm.js";
-import { _ as I } from "./tabList.vue_vue_type_script_setup_true_lang-DLoNOwJ7.js";
-import { _ as g } from "./tab.vue_vue_type_script_setup_true_lang-BSckMUwj.js";
-import { _ as E } from "./tabPanel.vue_vue_type_script_setup_true_lang-DZfMk_Sn.js";
-import { _ as H } from "./popover.vue_vue_type_script_setup_true_lang-C13ARHho.js";
-import { _ as h } from "./popoverDialog.vue_vue_type_script_setup_true_lang-C2z6To-6.js";
-import { _ as q } from "./tooltip.vue_vue_type_script_setup_true_lang-CXxwHtxF.js";
-import { _ as y } from "./menu.vue_vue_type_script_setup_true_lang-BTGGj0FY.js";
-import { _ as A } from "./menuItems.vue_vue_type_script_setup_true_lang-DZL1uyoq.js";
-import { _ as G } from "./menuItem.vue_vue_type_script_setup_true_lang-CSWsvc1p.js";
-import { _ as K } from "./combobox.vue_vue_type_script_setup_true_lang-ChCbDl0x.js";
-import { _ as Q } from "./comboboxInput.vue_vue_type_script_setup_true_lang-D3KIXNRO.js";
-import { _ as S } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-DLv4KjF8.js";
-import { _ as W } from "./comboboxOption.vue_vue_type_script_setup_true_lang-C9FIG5ye.js";
+import { useValidation as b } from "./composable-ui25.js";
+import { injectCombobox as u, injectMenu as C, injectPopover as T, injectTabs as l } from "./composable-ui19.js";
+import { _ as M } from "./listbox.vue_vue_type_script_setup_true_lang-OvzuliPQ.js";
+import { _ as c } from "./listboxOption.vue_vue_type_script_setup_true_lang-BhQm7GxW.js";
+import { _ as v } from "./tabContainer.vue_vue_type_script_setup_true_lang-yqy32Zx5.js";
+import { _ as I } from "./tabList.vue_vue_type_script_setup_true_lang-BjKRcoyi.js";
+import { _ as g } from "./tab.vue_vue_type_script_setup_true_lang-C12uJKqo.js";
+import { _ as E } from "./tabPanel.vue_vue_type_script_setup_true_lang-DwEwu3p7.js";
+import { _ as H } from "./popover.vue_vue_type_script_setup_true_lang-D1gc6B-4.js";
+import { _ as h } from "./popoverDialog.vue_vue_type_script_setup_true_lang-ApsJsSDN.js";
+import { _ as q } from "./tooltip.vue_vue_type_script_setup_true_lang-kslDnoRH.js";
+import { _ as y } from "./menu.vue_vue_type_script_setup_true_lang-B0Jm9v_v.js";
+import { _ as A } from "./menuItems.vue_vue_type_script_setup_true_lang-DQV-lU_A.js";
+import { _ as G } from "./menuItem.vue_vue_type_script_setup_true_lang-IZgj64N4.js";
+import { _ as K } from "./combobox.vue_vue_type_script_setup_true_lang-sMngTuXu.js";
+import { _ as Q } from "./comboboxInput.vue_vue_type_script_setup_true_lang-Be5FBBbM.js";
+import { _ as S } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-DN0tz5dv.js";
+import { _ as W } from "./comboboxOption.vue_vue_type_script_setup_true_lang-DmF_EaqI.js";
 export {
   K as Combobox,
   Q as ComboboxInput,

package/dist/composable-ui10.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./popover.vue_vue_type_script_setup_true_lang-C13ARHho.js";
+import { _ as f } from "./menuItem.vue_vue_type_script_setup_true_lang-IZgj64N4.js";
 export {
   f as default
 };

package/dist/composable-ui11.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./menuItems.vue_vue_type_script_setup_true_lang-DZL1uyoq.js";
+import { _ as f } from "./menuItems.vue_vue_type_script_setup_true_lang-DQV-lU_A.js";
 export {
   f as default
 };

package/dist/composable-ui12.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./menuItem.vue_vue_type_script_setup_true_lang-CSWsvc1p.js";
+import { _ as f } from "./popover.vue_vue_type_script_setup_true_lang-D1gc6B-4.js";
 export {
   f as default
 };

package/dist/composable-ui13.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./menu.vue_vue_type_script_setup_true_lang-BTGGj0FY.js";
+import { _ as f } from "./popoverDialog.vue_vue_type_script_setup_true_lang-ApsJsSDN.js";
 export {
   f as default
 };

package/dist/composable-ui14.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./listboxOption.vue_vue_type_script_setup_true_lang-DMkQ_ZA_.js";
+import { _ as f } from "./tab.vue_vue_type_script_setup_true_lang-C12uJKqo.js";
 export {
   f as default
 };

package/dist/composable-ui15.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./listbox.vue_vue_type_script_setup_true_lang-BJS1g6K9.js";
+import { _ as f } from "./tabContainer.vue_vue_type_script_setup_true_lang-yqy32Zx5.js";
 export {
   f as default
 };

package/dist/composable-ui16.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-DLv4KjF8.js";
+import { _ as f } from "./tabList.vue_vue_type_script_setup_true_lang-BjKRcoyi.js";
 export {
   f as default
 };

package/dist/composable-ui17.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./comboboxOption.vue_vue_type_script_setup_true_lang-C9FIG5ye.js";
+import { _ as f } from "./tabPanel.vue_vue_type_script_setup_true_lang-DwEwu3p7.js";
 export {
   f as default
 };

package/dist/composable-ui18.js

@@ -1,31 +1,4 @@
-import { inject as l, ref as d, computed as n, onMounted as f, onUnmounted as p, unref as I } from "vue";
-import { injectList as j } from "./composable-ui23.js";
-function S(c, o, i) {
-  const e = l(j);
-  if (!e)
-    throw new Error("List injectable context is not provided");
-  const t = d(-1), r = n(() => e.isSelected(t.value)), u = n(() => e.isActive(t.value));
-  function s() {
-    e.selectItem(t.value);
-  }
-  function a({ focus: m = !0 } = {}) {
-    I(i) || e.activateItem(t.value, { focus: m });
-  }
-  function v() {
-    e.deactivateItem();
-  }
-  return f(() => {
-    t.value = e.addItem(c, o, i);
-  }), p(() => {
-    e.removeItem(t.value);
-  }), {
-    isSelected: r,
-    isActive: u,
-    select: s,
-    activate: a,
-    deactivate: v
-  };
-}
+import { _ as f } from "./tooltip.vue_vue_type_script_setup_true_lang-kslDnoRH.js";
 export {
-  S as useListOption
+  f as default
 };

package/dist/composable-ui19.js

@@ -1,4 +1,7 @@
-import { _ as f } from "./comboboxInput.vue_vue_type_script_setup_true_lang-D3KIXNRO.js";
+const o = /* @__PURE__ */ Symbol(), n = /* @__PURE__ */ Symbol(), t = /* @__PURE__ */ Symbol(), c = /* @__PURE__ */ Symbol();
 export {
-  f as default
+  c as injectCombobox,
+  t as injectMenu,
+  n as injectPopover,
+  o as injectTabs
 };

package/dist/composable-ui2.js

@@ -1,30 +1,4 @@
-import { ref as l, watch as V, toValue as u, readonly as n } from "vue";
-function h(s, f = [], c = !1) {
-  const e = l(!0), r = l([]);
-  function d(t, a, o) {
-    r.value = [], e.value = !0;
-    for (const v of a) {
-      const i = v(t);
-      if (i !== !0 && (r.value.push(i), e.value = !1, o))
-        return !1;
-    }
-    return e.value;
-  }
-  return V(
-    [
-      () => u(s),
-      () => u(f),
-      () => u(c)
-    ],
-    ([t, a, o]) => {
-      d(t, a, o);
-    },
-    { immediate: !0 }
-  ), {
-    isValid: n(e),
-    errors: n(r)
-  };
-}
+import { _ as f } from "./combobox.vue_vue_type_script_setup_true_lang-sMngTuXu.js";
 export {
-  h as useValidation
+  f as default
 };

package/dist/composable-ui20.js

@@ -1,4 +1,55 @@
-import { _ as f } from "./comboboxHiddenInput.vue_vue_type_script_setup_true_lang-Ba-UPd-M.js";
+import { ref as t, onMounted as V, onBeforeUnmount as M, readonly as m, unref as g } from "vue";
+import { useHTMLElement as b } from "./composable-ui24.js";
+function k(y, h = [], w = !0) {
+  const a = t(!1), n = t(!0), l = t(), r = t("");
+  let e, u;
+  function s() {
+    e?.focus();
+  }
+  function d() {
+    n.value = e.validity.valid, l.value = e.validity, r.value = e.validationMessage;
+  }
+  function f() {
+    if (!e) throw new Error("Form element is undefined");
+    const o = e.value;
+    for (const p of g(h)) {
+      const c = p(o);
+      if (c !== !0) {
+        e.setCustomValidity(c);
+        break;
+      }
+    }
+  }
+  function v() {
+    if (!e) throw new Error("Form element is undefined");
+    return e.setCustomValidity(""), e.validity.valid && f(), d(), n.value;
+  }
+  function C(o) {
+    d(), g(w) || o.preventDefault();
+  }
+  function E() {
+    v(), a.value = u !== e.value;
+  }
+  let i = new AbortController();
+  return V(() => {
+    if (e = b(y).value, !e) throw new Error("Form element is undefined");
+    f(), u = e.value, e.addEventListener("change", E, {
+      signal: i.signal,
+      passive: !0
+    }), e.addEventListener("invalid", C, {
+      signal: i.signal
+    }), e?.autofocus && s();
+  }), M(() => {
+    i.abort();
+  }), {
+    focus: s,
+    validate: v,
+    isValid: n,
+    validity: m(l),
+    validationMessage: m(r),
+    isChanged: a
+  };
+}
 export {
-  f as default
+  k as useFormControl
 };

package/dist/composable-ui21.js

@@ -1,4 +1,31 @@
-import { _ as f } from "./combobox.vue_vue_type_script_setup_true_lang-ChCbDl0x.js";
+import { inject as l, ref as d, computed as n, onMounted as f, onUnmounted as p, unref as I } from "vue";
+import { injectList as j } from "./composable-ui22.js";
+function S(c, o, i) {
+  const e = l(j);
+  if (!e)
+    throw new Error("List injectable context is not provided");
+  const t = d(-1), r = n(() => e.isSelected(t.value)), u = n(() => e.isActive(t.value));
+  function s() {
+    e.selectItem(t.value);
+  }
+  function a({ focus: m = !0 } = {}) {
+    I(i) || e.activateItem(t.value, { focus: m });
+  }
+  function v() {
+    e.deactivateItem();
+  }
+  return f(() => {
+    t.value = e.addItem(c, o, i);
+  }), p(() => {
+    e.removeItem(t.value);
+  }), {
+    isSelected: r,
+    isActive: u,
+    select: s,
+    activate: a,
+    deactivate: v
+  };
+}
 export {
-  f as default
+  S as useListOption
 };

package/dist/composable-ui22.js

@@ -1,103 +1,144 @@
-import { ref as T, watch as _, nextTick as P, onBeforeMount as F, onMounted as U, onBeforeUnmount as j } from "vue";
-import { useHTMLElement as k } from "./composable-ui24.js";
-function G(y, z, {
-  direction: c = "down",
-  align: u = "left",
-  position: L = "fixed",
-  closeOnOutsideClick: A = !0,
-  closeOnInsideClick: M = !1
-} = {}) {
-  const s = T(!1);
-  function v() {
-    const e = k(y);
-    if (!e.value) throw new Error("Activator element is undefined");
-    return e.value;
+import { shallowRef as N, ref as R, computed as g, provide as B, readonly as h, shallowReadonly as J, triggerRef as S, unref as s } from "vue";
+import { useHTMLElement as _ } from "./composable-ui24.js";
+const q = /* @__PURE__ */ Symbol();
+function d(r, c) {
+  const [n, l] = [s(r), s(c)];
+  return typeof n == "object" ? typeof l == "object" ? JSON.stringify(n) === JSON.stringify(l) : !1 : n === l;
+}
+function P(r) {
+  let c = 0;
+  const n = N([]), l = R(), v = g(() => Array.isArray(r.value));
+  function o(e) {
+    const t = n.value.find((i) => i.id === e);
+    if (!t) throw new Error(`Item not found: (${e})`);
+    return t;
   }
-  function $() {
-    const e = k(z);
-    if (!e.value) throw new Error("Popover element is undefined");
-    return e.value;
+  function b(e) {
+    const t = s(e.element);
+    if (t)
+      return t.focus(), t;
   }
-  function B({ focus: e = !0 } = {}) {
-    s.value = !0, e && P(() => {
-      $().focus();
-    });
+  function f(e, { focus: t = !1 } = {}) {
+    l.value = e?.id ?? void 0, e !== void 0 && t && b(e);
   }
-  function E({ focus: e = !0 } = {}) {
-    s.value = !1, e && v().focus();
+  function O(e, { focus: t = !1 } = {}) {
+    const i = o(e);
+    return f(i, { focus: t });
   }
-  function O(e) {
-    s.value ? E(e) : B(e);
+  function m(e) {
+    return l.value === e;
   }
-  function h() {
-    if (!s.value) return;
-    const e = v(), r = $();
-    r.style.position = L;
-    const {
-      top: f,
-      right: l,
-      bottom: w,
-      left: p,
-      width: m,
-      height: W
-    } = e.getBoundingClientRect(), a = r.offsetHeight, d = r.offsetWidth, x = document.documentElement.clientHeight, b = document.documentElement.clientWidth;
-    let i = c;
-    c == "up" ? f - a < 0 && (i = "down") : c == "down" ? w + a > x && (i = "up") : c == "right" ? l + d > b && (i = "left") : c == "left" && p - d < 0 && (i = "right");
-    let o = u;
-    u == "left" ? p + d > b && (o = "right") : u == "right" ? l - d < 0 && (o = "left") : u == "top" ? f + a > x && (o = "bottom") : u == "bottom" && w - a < 0 && (o = "top");
-    const t = {
-      top: "auto",
-      bottom: "auto",
-      left: "auto",
-      right: "auto",
-      width: "auto"
-    }, n = L === "fixed";
-    i == "up" ? t.bottom = `${W + (n ? x - w : 0)}px` : i == "down" ? t.top = `${W + (n ? f : 0)}px` : i == "right" ? t.left = `${m + (n ? p : 0)}px` : i == "left" && (t.right = `${m + (n ? b - l : 0)}px`), ["up", "down"].includes(i) ? o == "right" ? t.right = `${n ? b - l : 0}px` : o == "left" || o == "stretch" ? t.left = `${n ? p : 0}px` : o == "center" && (t.left = `${(n ? p : 0) - (d - m) / 2}px`) : o == "bottom" ? t.bottom = `${n ? x - w : 0}px` : o == "top" ? t.top = `${n ? f : 0}px` : o == "center" && (t.top = `${(n ? f : 0) - (a - W) / 2}px`), ["up", "down"].includes(i) && o === "stretch" && (t.width = m + "px");
-    for (const C in t)
-      r.style[C] = t[C];
+  function w(e, t, i = !1) {
+    const a = _(e), u = c++;
+    return n.value.push({
+      id: u,
+      value: t,
+      element: a,
+      disabled: i
+    }), S(n), u;
   }
-  _(
-    s,
-    (e) => {
-      e && P(() => {
-        h();
-      });
-    },
-    { flush: "pre" }
-  );
-  function R(e) {
-    const r = e.target;
-    if (!v().contains(r))
-      try {
-        $().contains(r) ? M && E() : A && (s.value = !1);
-      } catch {
-      }
+  function A(e) {
+    m(e) && f();
+    const t = o(e), i = n.value.indexOf(t);
+    n.value.splice(i, 1), S(n);
+  }
+  function I(e) {
+    const t = o(e);
+    if (s(t.disabled)) return;
+    const i = s(t.value);
+    if (i !== void 0) {
+      if (s(v)) {
+        const a = r.value.findIndex(
+          (u) => d(i, u)
+        );
+        a > -1 ? r.value.splice(a, 1) : r.value = [...r.value, i];
+      } else
+        r.value = i;
+      f(t);
+    }
+  }
+  function y(e) {
+    return s(v) ? !!r.value.find(
+      (t) => d(e.value, t)
+    ) : d(r, e.value);
+  }
+  function L(e) {
+    try {
+      const t = o(e);
+      return y(t);
+    } catch {
+      return !1;
+    }
+  }
+  function j({ focus: e = !1 } = {}) {
+    for (let t of n.value)
+      if (y(t))
+        return f(t, { focus: e });
   }
-  let H;
-  const g = new AbortController();
-  return F(() => {
-    H = new ResizeObserver(h);
-  }), U(() => {
-    window.addEventListener("resize", h, {
-      passive: !0,
-      signal: g.signal
-    }), window.addEventListener("scroll", h, {
-      passive: !0,
-      //capture: true,
-      signal: g.signal
-    }), window.addEventListener("click", R, {
-      passive: !0,
-      signal: g.signal
-    }), H.observe(v());
-  }), j(() => {
-    g.abort(), H.disconnect();
+  function p({ focus: e = !1 } = {}) {
+    if (n.value.length)
+      return f(n.value[0], { focus: e });
+  }
+  function x({ focus: e = !1 } = {}) {
+    if (n.value.length)
+      return f(n.value[n.value.length - 1], { focus: e });
+  }
+  function E({
+    focus: e = !1,
+    loop: t = !1
+  } = {}) {
+    if (l.value === void 0) return p({ focus: e });
+    const i = o(l.value), a = n.value.indexOf(i);
+    let u;
+    if (a + 1 < n.value.length)
+      u = n.value[a + 1];
+    else if (t)
+      u = n.value[0];
+    else
+      return;
+    return f(u, { focus: e });
+  }
+  function M({
+    focus: e = !1,
+    loop: t = !1
+  } = {}) {
+    if (l.value === void 0) return x({ focus: e });
+    const i = o(l.value), a = n.value.indexOf(i);
+    let u;
+    if (a - 1 > -1)
+      u = n.value[a - 1];
+    else if (t)
+      u = n.value[n.value.length - 1];
+    else
+      return;
+    return f(u, { focus: e });
+  }
+  return B(q, {
+    value: h(r),
+    selectItem: I,
+    activateItem: O,
+    deactivateItem: () => f(),
+    isSelected: L,
+    isActive: m,
+    addItem: w,
+    removeItem: A
   }), {
-    isOpen: s,
-    open: B,
-    close: E,
-    toggle: O
+    items: J(n),
+    isMultiselectable: h(v),
+    activeItem: g(
+      () => l.value !== void 0 ? o(l.value) : void 0
+    ),
+    selectActiveItem: () => {
+      l.value !== void 0 && I(l.value);
+    },
+    activateSelectedItem: j,
+    activateFirstItem: p,
+    activateLastItem: x,
+    activateNextItem: E,
+    activatePrevItem: M
   };
 }
 export {
-  G as usePopover
+  q as injectList,
+  P as useList
 };