vue-composable-ui 1.0.7 → 1.1.0

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

@@ -1,9 +1,9 @@
 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 { useHTMLElement as q } from "./composable-ui23.js";
-import { usePopover as z } from "./composable-ui21.js";
-import { useList as G } from "./composable-ui22.js";
+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-ui24.js";
+import { injectCombobox as J } from "./composable-ui25.js";
 const ae = /* @__PURE__ */ B({
   inheritAttrs: !1,
   __name: "combobox",

package/dist/{comboboxInput.vue_vue_type_script_setup_true_lang-Cjl65Eoo.js → comboboxInput.vue_vue_type_script_setup_true_lang-D3KIXNRO.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-ui24.js";
+import { injectCombobox as b } from "./composable-ui25.js";
 const y = /* @__PURE__ */ r({
   __name: "comboboxInput",
   props: {

package/dist/{comboboxOption.vue_vue_type_script_setup_true_lang-DPEArk3M.js → comboboxOption.vue_vue_type_script_setup_true_lang-C9FIG5ye.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-ui17.js";
-import { injectCombobox as C } from "./composable-ui24.js";
+import { useListOption as k } from "./composable-ui18.js";
+import { injectCombobox as C } from "./composable-ui25.js";
 const j = ["id", "data-active", "aria-selected", "aria-disabled"], A = /* @__PURE__ */ f({
   __name: "comboboxOption",
   props: {

package/dist/{comboboxOptions.vue_vue_type_script_setup_true_lang-Doy6MfEQ.js → comboboxOptions.vue_vue_type_script_setup_true_lang-DLv4KjF8.js}

@@ -1,5 +1,5 @@
 import { defineComponent as n, inject as r, createElementBlock as i, createCommentVNode as c, unref as e, openBlock as m, renderSlot as s } from "vue";
-import { injectCombobox as p } from "./composable-ui24.js";
+import { injectCombobox as p } from "./composable-ui25.js";
 const d = ["id"], f = /* @__PURE__ */ n({
   __name: "comboboxOptions",
   setup(b) {

package/dist/composable-ui.js

@@ -1,49 +1,51 @@
-import { usePopover as e } from "./composable-ui21.js";
-import { useList as p } from "./composable-ui22.js";
-import { useListOption as s } from "./composable-ui17.js";
-import { useFormControl as a } from "./composable-ui2.js";
-import { useHTMLElement as n } from "./composable-ui23.js";
-import { injectCombobox as i, injectMenu as _, injectPopover as u, injectTabs as C } from "./composable-ui24.js";
-import { _ as L } from "./listbox.vue_vue_type_script_setup_true_lang-CP8lV3wp.js";
-import { _ as M } from "./listboxOption.vue_vue_type_script_setup_true_lang-C1-Q-dSr.js";
-import { _ as c } from "./tabContainer.vue_vue_type_script_setup_true_lang-fPpLno2Z.js";
-import { _ as v } from "./tabList.vue_vue_type_script_setup_true_lang-CZyqGCuj.js";
-import { _ as I } from "./tab.vue_vue_type_script_setup_true_lang-Y5OFGqMB.js";
-import { _ as D } from "./tabPanel.vue_vue_type_script_setup_true_lang-CGhP6SHR.js";
-import { _ as F } from "./popover.vue_vue_type_script_setup_true_lang-DhKF7_nY.js";
-import { _ as d } from "./popoverDialog.vue_vue_type_script_setup_true_lang-CDXUO7wZ.js";
-import { _ as k } from "./tooltip.vue_vue_type_script_setup_true_lang-D4uAZmQb.js";
-import { _ as w } from "./menu.vue_vue_type_script_setup_true_lang-Ci7q2rOg.js";
-import { _ as z } from "./menuItems.vue_vue_type_script_setup_true_lang-p9vftREy.js";
-import { _ as B } from "./menuItem.vue_vue_type_script_setup_true_lang-ezPw3j-i.js";
-import { _ as J } from "./combobox.vue_vue_type_script_setup_true_lang-8JadictW.js";
-import { _ as N } from "./comboboxInput.vue_vue_type_script_setup_true_lang-Cjl65Eoo.js";
-import { _ as R } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-Doy6MfEQ.js";
-import { _ as U } from "./comboboxOption.vue_vue_type_script_setup_true_lang-DPEArk3M.js";
+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 { 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";
 export {
-  J as Combobox,
-  N as ComboboxInput,
-  U as ComboboxOption,
-  R as ComboboxOptions,
-  L as Listbox,
-  M as ListboxOption,
-  w as Menu,
-  B as MenuItem,
-  z as MenuItems,
-  F as Popover,
-  d as PopoverDialog,
-  I as Tab,
-  c as TabContainer,
-  v as TabList,
-  D as TabPanel,
-  k as Tooltip,
-  i as injectCombobox,
-  _ as injectMenu,
-  u as injectPopover,
-  C as injectTabs,
+  K as Combobox,
+  Q as ComboboxInput,
+  W as ComboboxOption,
+  S as ComboboxOptions,
+  M as Listbox,
+  c as ListboxOption,
+  y as Menu,
+  G as MenuItem,
+  A as MenuItems,
+  H as Popover,
+  h as PopoverDialog,
+  g as Tab,
+  v as TabContainer,
+  I as TabList,
+  E as TabPanel,
+  q as Tooltip,
+  u as injectCombobox,
+  C as injectMenu,
+  T as injectPopover,
+  l as injectTabs,
   a as useFormControl,
   n as useHTMLElement,
   p as useList,
   s as useListOption,
-  e as usePopover
+  e as usePopover,
+  b as useValidation
 };

package/dist/composable-ui10.js

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

package/dist/composable-ui11.js

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

package/dist/composable-ui12.js

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

package/dist/composable-ui13.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./listboxOption.vue_vue_type_script_setup_true_lang-C1-Q-dSr.js";
+import { _ as f } from "./menu.vue_vue_type_script_setup_true_lang-BTGGj0FY.js";
 export {
   f as default
 };

package/dist/composable-ui14.js

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

package/dist/composable-ui15.js

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

package/dist/composable-ui16.js

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

package/dist/composable-ui17.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-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
-  };
-}
+import { _ as f } from "./comboboxOption.vue_vue_type_script_setup_true_lang-C9FIG5ye.js";
 export {
-  S as useListOption
+  f as default
 };

package/dist/composable-ui18.js

@@ -1,4 +1,31 @@
-import { _ as f } from "./comboboxInput.vue_vue_type_script_setup_true_lang-Cjl65Eoo.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-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
+  };
+}
 export {
-  f as default
+  S as useListOption
 };

package/dist/composable-ui19.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./comboboxHiddenInput.vue_vue_type_script_setup_true_lang-Ba-UPd-M.js";
+import { _ as f } from "./comboboxInput.vue_vue_type_script_setup_true_lang-D3KIXNRO.js";
 export {
   f as default
 };

package/dist/composable-ui2.js

@@ -1,55 +1,30 @@
-import { ref as t, onMounted as V, onBeforeUnmount as M, readonly as m, unref as g } from "vue";
-import { useHTMLElement as b } from "./composable-ui23.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;
-      }
+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;
   }
-  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
+  return V(
+    [
+      () => u(s),
+      () => u(f),
+      () => u(c)
+    ],
+    ([t, a, o]) => {
+      d(t, a, o);
+    },
+    { immediate: !0 }
+  ), {
+    isValid: n(e),
+    errors: n(r)
   };
 }
 export {
-  k as useFormControl
+  h as useValidation
 };

package/dist/composable-ui20.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./combobox.vue_vue_type_script_setup_true_lang-8JadictW.js";
+import { _ as f } from "./comboboxHiddenInput.vue_vue_type_script_setup_true_lang-Ba-UPd-M.js";
 export {
   f as default
 };

package/dist/composable-ui21.js

@@ -1,103 +1,4 @@
-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-ui23.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;
-  }
-  function $() {
-    const e = k(z);
-    if (!e.value) throw new Error("Popover element is undefined");
-    return e.value;
-  }
-  function B({ focus: e = !0 } = {}) {
-    s.value = !0, e && P(() => {
-      $().focus();
-    });
-  }
-  function E({ focus: e = !0 } = {}) {
-    s.value = !1, e && v().focus();
-  }
-  function O(e) {
-    s.value ? E(e) : B(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];
-  }
-  _(
-    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 {
-      }
-  }
-  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();
-  }), {
-    isOpen: s,
-    open: B,
-    close: E,
-    toggle: O
-  };
-}
+import { _ as f } from "./combobox.vue_vue_type_script_setup_true_lang-ChCbDl0x.js";
 export {
-  G as usePopover
+  f as default
 };

package/dist/composable-ui22.js

@@ -1,144 +1,103 @@
-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-ui23.js";
-const q = 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 b(e) {
-    const t = s(e.element);
-    if (t)
-      return t.focus(), t;
-  }
-  function f(e, { focus: t = !1 } = {}) {
-    l.value = e?.id ?? void 0, e !== void 0 && t && b(e);
-  }
-  function O(e, { focus: t = !1 } = {}) {
-    const i = o(e);
-    return f(i, { focus: t });
-  }
-  function m(e) {
-    return l.value === e;
-  }
-  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;
+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;
   }
-  function A(e) {
-    m(e) && f();
-    const t = o(e), i = n.value.indexOf(t);
-    n.value.splice(i, 1), S(n);
+  function $() {
+    const e = k(z);
+    if (!e.value) throw new Error("Popover element is undefined");
+    return e.value;
   }
-  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 B({ focus: e = !0 } = {}) {
+    s.value = !0, e && P(() => {
+      $().focus();
+    });
   }
-  function y(e) {
-    return s(v) ? !!r.value.find(
-      (t) => d(e.value, t)
-    ) : d(r, e.value);
+  function E({ focus: e = !0 } = {}) {
+    s.value = !1, e && v().focus();
   }
-  function L(e) {
-    try {
-      const t = o(e);
-      return y(t);
-    } catch {
-      return !1;
-    }
+  function O(e) {
+    s.value ? E(e) : B(e);
   }
-  function j({ focus: e = !1 } = {}) {
-    for (let t of n.value)
-      if (y(t))
-        return f(t, { focus: 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 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 });
+  _(
+    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 {
+      }
   }
-  return B(q, {
-    value: h(r),
-    selectItem: I,
-    activateItem: O,
-    deactivateItem: () => f(),
-    isSelected: L,
-    isActive: m,
-    addItem: w,
-    removeItem: A
+  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();
   }), {
-    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
+    isOpen: s,
+    open: B,
+    close: E,
+    toggle: O
   };
 }
 export {
-  q as injectList,
-  P as useList
+  G as usePopover
 };

package/dist/composable-ui23.js

@@ -1,7 +1,144 @@
-import { ref as r } from "vue";
-function n(e) {
-  return typeof e == "string" ? r(document.querySelector(e)) : e instanceof HTMLElement ? r(e) : e;
+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 = 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 b(e) {
+    const t = s(e.element);
+    if (t)
+      return t.focus(), t;
+  }
+  function f(e, { focus: t = !1 } = {}) {
+    l.value = e?.id ?? void 0, e !== void 0 && t && b(e);
+  }
+  function O(e, { focus: t = !1 } = {}) {
+    const i = o(e);
+    return f(i, { focus: t });
+  }
+  function m(e) {
+    return l.value === e;
+  }
+  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;
+  }
+  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 });
+  }
+  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
+  }), {
+    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 {
-  n as useHTMLElement
+  q as injectList,
+  P as useList
 };

package/dist/composable-ui24.js

@@ -1,7 +1,7 @@
-const o = Symbol(), n = Symbol(), t = Symbol(), c = Symbol();
+import { ref as r } from "vue";
+function n(e) {
+  return typeof e == "string" ? r(document.querySelector(e)) : e instanceof HTMLElement ? r(e) : e;
+}
 export {
-  c as injectCombobox,
-  t as injectMenu,
-  n as injectPopover,
-  o as injectTabs
+  n as useHTMLElement
 };

package/dist/composable-ui25.js

@@ -0,0 +1,7 @@
+const o = Symbol(), n = Symbol(), t = Symbol(), c = Symbol();
+export {
+  c as injectCombobox,
+  t as injectMenu,
+  n as injectPopover,
+  o as injectTabs
+};

package/dist/composable-ui3.js

@@ -1,4 +1,55 @@
-import { _ as f } from "./tooltip.vue_vue_type_script_setup_true_lang-D4uAZmQb.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-ui4.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./tabPanel.vue_vue_type_script_setup_true_lang-CGhP6SHR.js";
+import { _ as f } from "./tooltip.vue_vue_type_script_setup_true_lang-CXxwHtxF.js";
 export {
   f as default
 };

package/dist/composable-ui5.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./tabList.vue_vue_type_script_setup_true_lang-CZyqGCuj.js";
+import { _ as f } from "./tabPanel.vue_vue_type_script_setup_true_lang-DZfMk_Sn.js";
 export {
   f as default
 };

package/dist/composable-ui6.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./tabContainer.vue_vue_type_script_setup_true_lang-fPpLno2Z.js";
+import { _ as f } from "./tabList.vue_vue_type_script_setup_true_lang-DLoNOwJ7.js";
 export {
   f as default
 };

package/dist/composable-ui7.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./tab.vue_vue_type_script_setup_true_lang-Y5OFGqMB.js";
+import { _ as f } from "./tabContainer.vue_vue_type_script_setup_true_lang-YfrBXoWm.js";
 export {
   f as default
 };

package/dist/composable-ui8.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./popoverDialog.vue_vue_type_script_setup_true_lang-CDXUO7wZ.js";
+import { _ as f } from "./tab.vue_vue_type_script_setup_true_lang-BSckMUwj.js";
 export {
   f as default
 };

package/dist/composable-ui9.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./popover.vue_vue_type_script_setup_true_lang-DhKF7_nY.js";
+import { _ as f } from "./popoverDialog.vue_vue_type_script_setup_true_lang-C2z6To-6.js";
 export {
   f as default
 };

package/dist/{listbox.vue_vue_type_script_setup_true_lang-CP8lV3wp.js → listbox.vue_vue_type_script_setup_true_lang-BJS1g6K9.js}

@@ -1,5 +1,5 @@
 import { defineComponent as m, mergeModels as p, useModel as v, computed as b, createElementBlock as k, openBlock as w, unref as I, renderSlot as h } from "vue";
-import { useList as x } from "./composable-ui22.js";
+import { useList as x } from "./composable-ui23.js";
 const A = ["aria-activedescendant", "aria-orientation", "aria-multiselectable"], B = /* @__PURE__ */ m({
   __name: "listbox",
   props: /* @__PURE__ */ p({

package/dist/{listboxOption.vue_vue_type_script_setup_true_lang-C1-Q-dSr.js → listboxOption.vue_vue_type_script_setup_true_lang-DMkQ_ZA_.js}

@@ -1,5 +1,5 @@
 import { defineComponent as m, useId as p, useTemplateRef as u, createElementBlock as f, openBlock as b, unref as e, renderSlot as v } from "vue";
-import { useListOption as _ } from "./composable-ui17.js";
+import { useListOption as _ } from "./composable-ui18.js";
 const k = ["id", "aria-disabled", "aria-selected", "data-active"], B = /* @__PURE__ */ m({
   __name: "listboxOption",
   props: {

package/dist/{menu.vue_vue_type_script_setup_true_lang-Ci7q2rOg.js → menu.vue_vue_type_script_setup_true_lang-BTGGj0FY.js}

@@ -1,7 +1,7 @@
 import { defineComponent as b, mergeModels as M, useId as u, useModel as O, computed as m, provide as A, renderSlot as _, unref as h, nextTick as r } from "vue";
-import { usePopover as C } from "./composable-ui21.js";
-import { useList as D } from "./composable-ui22.js";
-import { injectMenu as V } from "./composable-ui24.js";
+import { usePopover as C } from "./composable-ui22.js";
+import { useList as D } from "./composable-ui23.js";
+import { injectMenu as V } from "./composable-ui25.js";
 const j = /* @__PURE__ */ b({
   __name: "menu",
   props: /* @__PURE__ */ M({

package/dist/{menuItem.vue_vue_type_script_setup_true_lang-ezPw3j-i.js → menuItem.vue_vue_type_script_setup_true_lang-CSWsvc1p.js}

@@ -1,6 +1,6 @@
 import { defineComponent as w, useId as x, useTemplateRef as y, inject as S, computed as h, createElementBlock as j, openBlock as A, unref as t, renderSlot as B } from "vue";
-import { useListOption as I } from "./composable-ui17.js";
-import { injectMenu as $ } from "./composable-ui24.js";
+import { useListOption as I } from "./composable-ui18.js";
+import { injectMenu as $ } from "./composable-ui25.js";
 const C = ["id", "data-active", "role", "aria-checked", "aria-disabled"], O = /* @__PURE__ */ w({
   __name: "menuItem",
   props: {

package/dist/{menuItems.vue_vue_type_script_setup_true_lang-p9vftREy.js → menuItems.vue_vue_type_script_setup_true_lang-DZL1uyoq.js}

@@ -1,5 +1,5 @@
 import { defineComponent as n, inject as o, createElementBlock as c, createCommentVNode as s, unref as a, openBlock as i, renderSlot as u } from "vue";
-import { injectMenu as l } from "./composable-ui24.js";
+import { injectMenu as l } from "./composable-ui25.js";
 const d = ["id", "aria-activedescendant", "aria-labelledby"], b = /* @__PURE__ */ n({
   __name: "menuItems",
   setup(m) {

package/dist/{popover.vue_vue_type_script_setup_true_lang-DhKF7_nY.js → popover.vue_vue_type_script_setup_true_lang-C13ARHho.js}

@@ -1,6 +1,6 @@
 import { defineComponent as u, useId as r, computed as f, provide as v, renderSlot as O, unref as t } from "vue";
-import { usePopover as m } from "./composable-ui21.js";
-import { injectPopover as g } from "./composable-ui24.js";
+import { usePopover as m } from "./composable-ui22.js";
+import { injectPopover as g } from "./composable-ui25.js";
 const x = /* @__PURE__ */ u({
   __name: "popover",
   props: {

package/dist/{popoverDialog.vue_vue_type_script_setup_true_lang-CDXUO7wZ.js → popoverDialog.vue_vue_type_script_setup_true_lang-C2z6To-6.js}

@@ -1,5 +1,5 @@
 import { defineComponent as n, inject as a, createElementBlock as i, createCommentVNode as c, unref as r, openBlock as l, renderSlot as p } from "vue";
-import { injectPopover as d } from "./composable-ui24.js";
+import { injectPopover as d } from "./composable-ui25.js";
 const s = ["id", "role", "aria-labelledby"], v = /* @__PURE__ */ n({
   __name: "popoverDialog",
   setup(u) {

package/dist/{tab.vue_vue_type_script_setup_true_lang-Y5OFGqMB.js → tab.vue_vue_type_script_setup_true_lang-BSckMUwj.js}

@@ -1,5 +1,5 @@
 import { defineComponent as u, useTemplateRef as b, useId as s, createElementBlock as f, openBlock as m, unref as e, renderSlot as _ } from "vue";
-import { useListOption as k } from "./composable-ui17.js";
+import { useListOption as k } from "./composable-ui18.js";
 const C = ["id", "aria-selected", "aria-controls", "tabindex"], v = /* @__PURE__ */ u({
   __name: "tab",
   props: {

package/dist/{tabContainer.vue_vue_type_script_setup_true_lang-fPpLno2Z.js → tabContainer.vue_vue_type_script_setup_true_lang-YfrBXoWm.js}

@@ -1,6 +1,6 @@
 import { defineComponent as c, useModel as u, provide as v, computed as p, createElementBlock as f, openBlock as I, renderSlot as _ } from "vue";
-import { useList as b } from "./composable-ui22.js";
-import { injectTabs as g } from "./composable-ui24.js";
+import { useList as b } from "./composable-ui23.js";
+import { injectTabs as g } from "./composable-ui25.js";
 const x = /* @__PURE__ */ c({
   __name: "tabContainer",
   props: {

package/dist/{tabList.vue_vue_type_script_setup_true_lang-CZyqGCuj.js → tabList.vue_vue_type_script_setup_true_lang-DLoNOwJ7.js}

@@ -1,5 +1,5 @@
 import { defineComponent as i, inject as n, createElementBlock as c, openBlock as s, renderSlot as u } from "vue";
-import { injectTabs as l } from "./composable-ui24.js";
+import { injectTabs as l } from "./composable-ui25.js";
 const f = ["aria-orientation"], b = /* @__PURE__ */ i({
   __name: "tabList",
   props: {

package/dist/{tabPanel.vue_vue_type_script_setup_true_lang-CGhP6SHR.js → tabPanel.vue_vue_type_script_setup_true_lang-DZfMk_Sn.js}

@@ -1,6 +1,6 @@
 import { defineComponent as c, inject as i, computed as d, withDirectives as p, createElementBlock as b, openBlock as u, unref as r, renderSlot as m, vShow as v } from "vue";
-import { injectList as f } from "./composable-ui22.js";
-import { injectTabs as _ } from "./composable-ui24.js";
+import { injectList as f } from "./composable-ui23.js";
+import { injectTabs as _ } from "./composable-ui25.js";
 const h = ["id", "aria-labelledby"], I = /* @__PURE__ */ c({
   __name: "tabPanel",
   props: {

package/dist/{tooltip.vue_vue_type_script_setup_true_lang-D4uAZmQb.js → tooltip.vue_vue_type_script_setup_true_lang-CXxwHtxF.js}

@@ -1,5 +1,5 @@
 import { defineComponent as g, useSlots as b, ref as E, useId as k, onMounted as w, onBeforeUnmount as $, createElementBlock as p, openBlock as a, Fragment as L, renderSlot as f, createBlock as T, Teleport as _, createCommentVNode as h, unref as m, mergeProps as B, createTextVNode as S, toDisplayString as A } from "vue";
-import { usePopover as C } from "./composable-ui21.js";
+import { usePopover as C } from "./composable-ui22.js";
 const I = ["id"], P = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "tooltip",

package/dist/types/main.d.ts

@@ -3,6 +3,7 @@ export { useList } from "./composables/list";
 export { useListOption } from "./composables/listOption";
 export { useFormControl } from "./composables/formControl";
 export { useHTMLElement } from "./utils/element";
+export { useValidation } from "./utils/validation";
 export * from "./components/injectionKeys";
 export { default as Listbox } from "./components/listbox/listbox.vue";
 export { default as ListboxOption } from "./components/listbox/listboxOption.vue";

package/dist/types/utils/validation.d.ts

@@ -0,0 +1,25 @@
+import type { MaybeRefOrGetter, Ref } from "vue";
+/**
+ * A validating function must return `true` or a string describing the error
+ */
+export type Validator = (value: string) => true | string;
+export interface useValidationReturn {
+    /**
+     * Whether the value is valid.
+     */
+    isValid: Readonly<Ref<boolean>>;
+    /**
+     * An array of strings representing messages that describe the validation constraints that the value does not satisfy (if any)
+     */
+    errors: Readonly<Ref<readonly string[]>>;
+}
+/**
+ * Utilizes Constraint Validation API to enable custom validation constrains for a form control
+ *
+ * @param el A template ref or a CSS selector
+ * @param validators An array of validating functions
+ * @param stopOnFirstError Whether to stop running validators on the first error (false by default)
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation}
+ */
+export declare function useValidation(value: MaybeRefOrGetter<any>, validators?: MaybeRefOrGetter<Validator[]>, stopOnFirstError?: MaybeRefOrGetter<boolean>): useValidationReturn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-composable-ui",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "type": "module",
   "repository": {
     "type": "git",