vue-composable-ui 1.2.0 → 1.3.0

package/dist/composable-ui23.js

@@ -1,120 +1,96 @@
-import { ref as D, watch as K, nextTick as P, onBeforeMount as U, onMounted as V, onBeforeUnmount as j, toValue as z } from "vue";
-import { useHTMLElement as A } from "./composable-ui24.js";
-function I(H, L, {
-  direction: c = "down",
+import { ref as A, computed as B, watch as C, onBeforeMount as K, onMounted as U, onBeforeUnmount as j, nextTick as q } from "vue";
+import { toElement as z } from "./composable-ui24.js";
+function J(F, O, {
+  direction: r = "down",
   align: u = "left",
-  position: k = "fixed",
-  closeOnOutsideClick: F = !0,
-  closeOnInsideClick: M = !1
+  position: L = "fixed",
+  closeOnOutsideClick: R = !0,
+  closeOnInsideClick: _ = !1
 } = {}) {
-  const s = D(!1);
-  function h() {
-    const e = A(H);
-    if (!e.value)
-      throw new Error(
-        "Activator element is undefined: " + z(H)
-      );
-    return e.value;
+  const f = A(!1), h = B(() => z(F)), c = B(() => z(O));
+  function k({ focus: e = !0 } = {}) {
+    f.value = !0, e && q(() => c.value?.focus());
   }
-  function g() {
-    const e = A(L);
-    if (!e.value)
-      throw new Error("Popover element is undefined: " + z(L));
-    return e.value;
+  function D() {
+    return !!c.value?.contains(document.activeElement);
   }
-  function B({ focus: e = !0 } = {}) {
-    s.value = !0, e && P(() => {
-      g().focus();
-    });
+  function g({ focus: e } = {}) {
+    const t = e ?? D();
+    f.value = !1, t && h.value?.focus();
   }
-  function O() {
-    try {
-      return g().contains(document.activeElement);
-    } catch {
-      return !1;
-    }
+  function M(e) {
+    f.value ? g(e) : k(e);
   }
-  function w({ focus: e } = {}) {
-    const i = e ?? O();
-    s.value = !1, i && h().focus();
-  }
-  function R(e) {
-    s.value ? w(e) : B(e);
-  }
-  function m() {
-    if (!s.value) return;
-    const e = h(), i = g();
-    i.style.position = k;
+  function w() {
+    const e = h.value, t = c.value;
+    if (!f.value || !e || !t) return;
+    t.style.position = L;
     const {
-      top: f,
-      right: l,
-      bottom: x,
+      top: l,
+      right: x,
+      bottom: b,
       left: p,
-      width: b,
-      height: y
-    } = e.getBoundingClientRect(), d = i.offsetHeight, v = i.offsetWidth, $ = document.documentElement.clientHeight, E = document.documentElement.clientWidth;
-    let n = c;
-    c == "up" ? f - d < 0 && (n = "down") : c == "down" ? x + d > $ && (n = "up") : c == "right" ? l + v > E && (n = "left") : c == "left" && p - v < 0 && (n = "right");
-    let o = u;
-    u == "left" ? p + v > E && (o = "right") : u == "right" ? l - v < 0 && (o = "left") : u == "top" ? f + d > $ && (o = "bottom") : u == "bottom" && x - d < 0 && (o = "top");
-    const t = {
+      width: $,
+      height: H
+    } = e.getBoundingClientRect(), d = t.offsetHeight, v = t.offsetWidth, E = document.documentElement.clientHeight, W = document.documentElement.clientWidth;
+    let n = r;
+    r == "up" ? l - d < 0 && (n = "down") : r == "down" ? b + d > E && (n = "up") : r == "right" ? x + v > W && (n = "left") : r == "left" && p - v < 0 && (n = "right");
+    let i = u;
+    u == "left" ? p + v > W && (i = "right") : u == "right" ? x - v < 0 && (i = "left") : u == "top" ? l + d > E && (i = "bottom") : u == "bottom" && b - d < 0 && (i = "top");
+    const o = {
       top: "auto",
       bottom: "auto",
       left: "auto",
       right: "auto",
       width: "auto"
-    }, r = k === "fixed";
-    n == "up" ? t.bottom = `${y + (r ? $ - x : 0)}px` : n == "down" ? t.top = `${y + (r ? f : 0)}px` : n == "right" ? t.left = `${b + (r ? p : 0)}px` : n == "left" && (t.right = `${b + (r ? E - l : 0)}px`), ["up", "down"].includes(n) ? o == "right" ? t.right = `${r ? E - l : 0}px` : o == "left" || o == "stretch" ? t.left = `${r ? p : 0}px` : o == "center" && (t.left = `${(r ? p : 0) - (v - b) / 2}px`) : o == "bottom" ? t.bottom = `${r ? $ - x : 0}px` : o == "top" ? t.top = `${r ? f : 0}px` : o == "center" && (t.top = `${(r ? f : 0) - (d - y) / 2}px`), ["up", "down"].includes(n) && o === "stretch" && (t.width = b + "px");
-    for (const C in t)
-      i.style[C] = t[C];
+    }, s = L === "fixed";
+    n == "up" ? o.bottom = `${H + (s ? E - b : 0)}px` : n == "down" ? o.top = `${H + (s ? l : 0)}px` : n == "right" ? o.left = `${$ + (s ? p : 0)}px` : n == "left" && (o.right = `${$ + (s ? W - x : 0)}px`), ["up", "down"].includes(n) ? i == "right" ? o.right = `${s ? W - x : 0}px` : i == "left" || i == "stretch" ? o.left = `${s ? p : 0}px` : i == "center" && (o.left = `${(s ? p : 0) - (v - $) / 2}px`) : i == "bottom" ? o.bottom = `${s ? E - b : 0}px` : i == "top" ? o.top = `${s ? l : 0}px` : i == "center" && (o.top = `${(s ? l : 0) - (d - H) / 2}px`), ["up", "down"].includes(n) && i === "stretch" && (o.width = $ + "px");
+    for (const y in o)
+      t.style[y] = o[y];
   }
-  K(
-    s,
-    (e) => {
-      e && P(() => {
-        m();
-      });
-    },
-    { flush: "pre" }
-  );
-  function T(e) {
-    const i = e.target;
-    if (!h().contains(i))
-      try {
-        g().contains(i) ? M && w() : F && (s.value = !1);
-      } catch {
-      }
+  C([f, c], () => w(), { flush: "post" });
+  function P(e) {
+    const t = e.target;
+    if (h.value?.contains(t)) return;
+    const l = c.value;
+    l && (l.contains(t) ? _ && g() : R && (f.value = !1));
   }
-  function _(e) {
-    !s.value || e.code !== "Escape" || (w(), e.preventDefault());
+  function T(e) {
+    !f.value || e.code !== "Escape" || (g(), e.preventDefault());
   }
-  let W;
+  let m;
   const a = new AbortController();
-  return U(() => {
-    W = new ResizeObserver(m);
-  }), V(() => {
-    window.addEventListener("resize", m, {
+  return K(() => {
+    m = new ResizeObserver(w);
+  }), U(() => {
+    window.addEventListener("resize", w, {
       passive: !0,
       signal: a.signal
-    }), window.addEventListener("scroll", m, {
+    }), window.addEventListener("scroll", w, {
       passive: !0,
       //capture: true,
       signal: a.signal
-    }), window.addEventListener("click", T, {
+    }), window.addEventListener("click", P, {
       passive: !0,
       signal: a.signal
-    }), window.addEventListener("keydown", _, {
+    }), window.addEventListener("keydown", T, {
       signal: a.signal
-    }), W.observe(h());
+    }), C(
+      h,
+      (e, t) => {
+        t && m.unobserve(t), e && m.observe(e);
+      },
+      { immediate: !0 }
+    );
   }), j(() => {
-    a.abort(), W.disconnect();
+    a.abort(), m.disconnect();
   }), {
-    isOpen: s,
-    open: B,
-    close: w,
-    toggle: R
+    isOpen: f,
+    open: k,
+    close: g,
+    toggle: M
   };
 }
 export {
-  I as usePopover
+  J as usePopover
 };

package/dist/composable-ui24.js

@@ -1,7 +1,10 @@
-import { ref as r } from "vue";
-function n(e) {
-  return typeof e == "string" ? r(document.querySelector(e)) : e instanceof HTMLElement ? r(e) : e;
+function l(t) {
+  const n = t.value;
+  if (!n) return null;
+  if (n instanceof HTMLElement) return n;
+  const e = n.$el;
+  return e instanceof HTMLElement ? e : null;
 }
 export {
-  n as useHTMLElement
+  l as toElement
 };

package/dist/composable-ui6.js

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

package/dist/composable-ui9.js

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

package/dist/menu.vue_vue_type_script_setup_true_lang-CXMH_Siw.js

@@ -0,0 +1,82 @@
+import { defineComponent as O, useId as p, useModel as h, shallowRef as A, ref as _, computed as f, provide as C, renderSlot as D, unref as V, mergeModels as y, nextTick as i } from "vue";
+import { usePopover as E } from "./composable-ui23.js";
+import { useList as L } from "./composable-ui22.js";
+import { injectMenu as P } from "./composable-ui19.js";
+const N = /* @__PURE__ */ O({
+  __name: "menu",
+  props: /* @__PURE__ */ y({
+    id: {},
+    activatorId: {},
+    direction: { default: "down" },
+    align: { default: "left" },
+    position: { default: "fixed" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const e = n, r = e.id ?? p(), s = e.activatorId ?? p(), v = h(n, "modelValue"), {
+      isMultiselectable: I,
+      activeItem: k,
+      activateFirstItem: a,
+      activateLastItem: c,
+      activateNextItem: w,
+      activatePrevItem: g
+    } = L(v), l = A(
+      null
+    ), d = _(null), { isOpen: t, toggle: u, open: m, close: x } = E(l, d, {
+      direction: e.direction,
+      align: e.align,
+      position: e.position,
+      closeOnOutsideClick: !0,
+      closeOnInsideClick: !1
+    });
+    function b(o) {
+      switch (o.code) {
+        case "Space":
+        case "Enter":
+          u(), t.value && i(a);
+          break;
+        case "ArrowUp":
+          m(), i(c);
+          break;
+        case "ArrowDown":
+          m(), i(a);
+          break;
+        default:
+          return;
+      }
+      o.preventDefault();
+    }
+    const M = f(() => ({
+      ref: l,
+      id: s,
+      "aria-controls": t.value ? r : void 0,
+      "aria-haspopup": "menu",
+      "aria-expanded": t.value,
+      onclick: () => u(),
+      onkeydown: b,
+      tabindex: 0
+    }));
+    return C(P, {
+      menuId: r,
+      activatorId: s,
+      menuRef: d,
+      isOpen: t,
+      close: x,
+      isMultiselectable: I,
+      activeItemId: f(() => k.value?.element.value?.id),
+      activateFirstItem: a,
+      activateLastItem: c,
+      activateNextItem: w,
+      activatePrevItem: g
+    }), (o, R) => D(o.$slots, "default", {
+      attrs: M.value,
+      isOpen: V(t)
+    });
+  }
+});
+export {
+  N as _
+};

package/dist/{menuItems.vue_vue_type_script_setup_true_lang-DQV-lU_A.js → menuItems.vue_vue_type_script_setup_true_lang-C7feROa2.js}

@@ -1,4 +1,4 @@
-import { defineComponent as n, inject as o, unref as a, openBlock as c, createElementBlock as s, renderSlot as i, createCommentVNode as u } from "vue";
+import { defineComponent as n, inject as o, unref as t, openBlock as c, createElementBlock as s, renderSlot as i, createCommentVNode as u } from "vue";
 import { injectMenu as l } from "./composable-ui19.js";
 const d = ["id", "aria-activedescendant", "aria-labelledby"], b = /* @__PURE__ */ n({
   __name: "menuItems",
@@ -6,8 +6,8 @@ const d = ["id", "aria-activedescendant", "aria-labelledby"], b = /* @__PURE__ *
     const e = o(l);
     if (!e)
       throw new Error("Menu injectable context is not provided");
-    function r(t) {
-      switch (t.code) {
+    function r(a) {
+      switch (a.code) {
         case "ArrowUp":
           e.activatePrevItem({ focus: !0, loop: !1 });
           break;
@@ -29,18 +29,19 @@ const d = ["id", "aria-activedescendant", "aria-labelledby"], b = /* @__PURE__ *
         default:
           return;
       }
-      t.preventDefault();
+      a.preventDefault();
     }
-    return (t, f) => a(e).isOpen.value ? (c(), s("div", {
+    return (a, f) => t(e).isOpen.value ? (c(), s("div", {
       key: 0,
       onKeydown: r,
-      id: a(e).menuId,
-      "aria-activedescendant": a(e).activeItemId.value,
-      "aria-labelledby": a(e).activatorId,
+      ref: t(e).menuRef,
+      id: t(e).menuId,
+      "aria-activedescendant": t(e).activeItemId.value,
+      "aria-labelledby": t(e).activatorId,
       role: "menu",
       tabindex: "-1"
     }, [
-      i(t.$slots, "default")
+      i(a.$slots, "default")
     ], 40, d)) : u("", !0);
   }
 });

package/dist/popover.vue_vue_type_script_setup_true_lang-2uGxM2x-.js

@@ -0,0 +1,64 @@
+import { defineComponent as O, useModel as g, useId as u, shallowRef as I, ref as C, watch as f, onMounted as k, computed as M, provide as h, renderSlot as _, unref as n, mergeModels as w } from "vue";
+import { usePopover as x } from "./composable-ui23.js";
+import { injectPopover as y } from "./composable-ui19.js";
+const A = /* @__PURE__ */ O({
+  __name: "popover",
+  props: /* @__PURE__ */ w({
+    id: {},
+    activatorId: {},
+    direction: { default: "down" },
+    align: { default: "left" },
+    position: { default: "fixed" },
+    closeOnOutsideClick: { type: Boolean, default: !0 },
+    closeOnInsideClick: { type: Boolean, default: !1 },
+    role: { default: "dialog" }
+  }, {
+    open: { type: Boolean },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(a) {
+    const e = a, i = g(a, "open"), r = e.id ?? u(), d = e.activatorId ?? u(), c = I(
+      null
+    ), p = C(null), { isOpen: t, toggle: v, open: l, close: s } = x(c, p, {
+      direction: e.direction,
+      align: e.align,
+      position: e.position,
+      closeOnOutsideClick: e.closeOnOutsideClick,
+      closeOnInsideClick: e.closeOnInsideClick
+    });
+    f(t, (o) => {
+      i.value !== o && (i.value = o);
+    }), f(i, (o) => {
+      o === void 0 || o === t.value || (o ? l({ focus: !1 }) : s());
+    }), k(() => {
+      i.value && !t.value && l({ focus: !1 });
+    });
+    const m = M(() => ({
+      ref: c,
+      id: d,
+      "aria-controls": t.value ? r : void 0,
+      // A disclosure is a plain expandable region: aria-haspopup would promise
+      // assistive technology a widget that is not there.
+      "aria-haspopup": e.role === "none" ? void 0 : e.role,
+      "aria-expanded": t.value
+    }));
+    return h(y, {
+      popoverId: r,
+      activatorId: d,
+      popoverRef: p,
+      role: e.role,
+      isOpen: t,
+      close: s
+    }), (o, B) => _(o.$slots, "default", {
+      attrs: m.value,
+      isOpen: n(t),
+      toggle: n(v),
+      open: n(l),
+      close: n(s)
+    });
+  }
+});
+export {
+  A as _
+};

package/dist/{popoverDialog.vue_vue_type_script_setup_true_lang-BbR_2G3W.js → popoverDialog.vue_vue_type_script_setup_true_lang-C_cJy27S.js}

@@ -1,4 +1,4 @@
-import { defineComponent as t, inject as n, unref as o, openBlock as i, createElementBlock as a, renderSlot as l, createCommentVNode as p } from "vue";
+import { defineComponent as t, inject as n, unref as o, openBlock as i, createElementBlock as p, renderSlot as a, createCommentVNode as l } from "vue";
 import { injectPopover as d } from "./composable-ui19.js";
 const c = ["id", "role", "aria-labelledby"], f = /* @__PURE__ */ t({
   __name: "popoverDialog",
@@ -6,15 +6,16 @@ const c = ["id", "role", "aria-labelledby"], f = /* @__PURE__ */ t({
     const e = n(d);
     if (!e)
       throw new Error("Popover injectable context is not provided");
-    return (r, m) => o(e).isOpen.value ? (i(), a("div", {
+    return (r, v) => o(e).isOpen.value ? (i(), p("div", {
       key: 0,
+      ref: o(e).popoverRef,
       id: o(e).popoverId,
       role: o(e).role === "none" ? void 0 : o(e).role,
       "aria-labelledby": o(e).activatorId,
       tabindex: "-1"
     }, [
-      l(r.$slots, "default")
-    ], 8, c)) : p("", !0);
+      a(r.$slots, "default")
+    ], 8, c)) : l("", !0);
   }
 });
 export {

package/dist/tabContainer.vue_vue_type_script_setup_true_lang-B65gXNdp.js

@@ -0,0 +1,42 @@
+import { defineComponent as v, useModel as p, provide as I, computed as l, openBlock as f, createElementBlock as _, renderSlot as b } from "vue";
+import { useList as g } from "./composable-ui22.js";
+import { injectTabs as A } from "./composable-ui19.js";
+const B = /* @__PURE__ */ v({
+  __name: "tabContainer",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(o) {
+    const a = p(o, "modelValue"), {
+      items: m,
+      selectedItem: i,
+      selectActiveItem: n,
+      activateFirstItem: r,
+      activateLastItem: s,
+      activateNextItem: d,
+      activatePrevItem: u
+    } = g(a);
+    return I(A, {
+      getIds: (e) => l(() => {
+        const t = m.value.find((c) => c.value === e);
+        return {
+          tabId: t?.element.value?.getAttribute("id") || void 0,
+          panelId: t?.element.value?.getAttribute("aria-controls") || void 0
+        };
+      }),
+      selectedItemEl: l(() => i.value?.element.value ?? null),
+      selectActiveItem: n,
+      activateFirstItem: r,
+      activateLastItem: s,
+      activateNextItem: d,
+      activatePrevItem: u
+    }), (e, t) => (f(), _("div", null, [
+      b(e.$slots, "default")
+    ]));
+  }
+});
+export {
+  B as _
+};

package/dist/tooltip.vue_vue_type_script_setup_true_lang-DX78jdaW.js

@@ -0,0 +1,81 @@
+import { defineComponent as b, useSlots as E, shallowRef as p, useId as h, onMounted as k, onBeforeUnmount as T, openBlock as i, createElementBlock as f, Fragment as _, renderSlot as m, createBlock as $, Teleport as w, unref as v, mergeProps as B, createTextVNode as L, toDisplayString as S, createCommentVNode as A } from "vue";
+import { usePopover as C } from "./composable-ui23.js";
+const I = ["id"], V = /* @__PURE__ */ b({
+  inheritAttrs: !1,
+  __name: "tooltip",
+  props: {
+    id: {},
+    text: {},
+    delay: {},
+    direction: { default: "up" }
+  },
+  setup(u) {
+    const t = u, g = E(), c = p(null), l = p(
+      null
+    );
+    let d;
+    const n = t.id ?? h(), { isOpen: a } = C(l, c, {
+      direction: t.direction,
+      align: "center"
+    });
+    function r() {
+      d = setTimeout(
+        () => {
+          a.value = !0;
+        },
+        typeof t.delay == "string" ? parseInt(t.delay) : t.delay
+      );
+    }
+    function s() {
+      a.value = !1, clearTimeout(d);
+    }
+    const y = {
+      ref: l,
+      "aria-describedby": n,
+      onmouseenter: r,
+      onmouseleave: s,
+      onfocus: r,
+      onblur: s
+    }, o = new AbortController();
+    return k(() => {
+      if (g.default) return;
+      const e = document.querySelector(
+        `[aria-describedby=${n}]`
+      );
+      if (!e)
+        throw new Error(`Tooltip activator not found: ${n}`);
+      l.value = e, e.addEventListener("mouseenter", r, {
+        signal: o.signal,
+        passive: !0
+      }), e.addEventListener("mouseleave", s, {
+        signal: o.signal,
+        passive: !0
+      }), e.addEventListener("focus", r, {
+        signal: o.signal,
+        passive: !0
+      }), e.addEventListener("blur", s, {
+        signal: o.signal,
+        passive: !0
+      });
+    }), T(() => {
+      o.abort();
+    }), (e, x) => (i(), f(_, null, [
+      m(e.$slots, "default", { attrs: y }),
+      (i(), $(w, { to: "body" }, [
+        v(a) ? (i(), f("div", B({
+          key: 0,
+          ref_key: "popupEl",
+          ref: c,
+          id: v(n)
+        }, e.$attrs, { role: "tooltip" }), [
+          m(e.$slots, "content", {}, () => [
+            L(S(u.text), 1)
+          ])
+        ], 16, I)) : A("", !0)
+      ]))
+    ], 64));
+  }
+});
+export {
+  V as _
+};

package/dist/types/components/combobox/combobox.vue.d.ts

@@ -1,7 +1,14 @@
+import { type ComponentPublicInstance } from "vue";
 type __VLS_Props = {
     displayValue?: (value: any) => string;
     id?: string;
-    activatorId?: string;
+    /**
+     * The element the options panel is anchored to and closes away from.
+     * Defaults to whatever carries `activatorAttrs`; pass an element to widen
+     * that — a tag field wants the panel to span the whole box of chips, not
+     * just the text input sitting in it.
+     */
+    activator?: HTMLElement | null;
     name?: string;
     formValue?: (item: any) => Record<string, string> | string;
 };
@@ -15,6 +22,7 @@ declare var __VLS_11: {
     toggle: () => void;
     displayValue: string;
     attrs: {
+        ref: import("vue").ShallowRef<HTMLElement | ComponentPublicInstance | null, HTMLElement | ComponentPublicInstance | null>;
         id: string;
         "aria-controls": string | undefined;
         "aria-expanded": boolean;

package/dist/types/components/injectionKeys.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, InjectionKey } from "vue";
+import type { ComputedRef, InjectionKey, Ref } from "vue";
 import type { UseListReturn } from "../composables/list";
 import type { UsePopoverReturn } from "../composables/popover";
 export declare const injectTabs: InjectionKey<{
@@ -6,6 +6,8 @@ export declare const injectTabs: InjectionKey<{
         tabId: string | undefined;
         panelId: string | undefined;
     }>;
+    /** The selected tab's element, for anything that has to measure it. */
+    selectedItemEl: ComputedRef<HTMLElement | null>;
     selectActiveItem: UseListReturn["selectActiveItem"];
     activateFirstItem: UseListReturn["activateFirstItem"];
     activateLastItem: UseListReturn["activateLastItem"];
@@ -15,6 +17,11 @@ export declare const injectTabs: InjectionKey<{
 export declare const injectPopover: InjectionKey<{
     popoverId: string;
     activatorId: string;
+    /**
+     * Bind to the popover element with `:ref`. The popover is positioned off
+     * this, so the element that carries it is the one that gets placed.
+     */
+    popoverRef: Ref<HTMLElement | null>;
     role: "dialog" | "listbox" | "menu" | "tree" | "grid" | "none";
     isOpen: UsePopoverReturn["isOpen"];
     close: UsePopoverReturn["close"];
@@ -22,6 +29,8 @@ export declare const injectPopover: InjectionKey<{
 export declare const injectMenu: InjectionKey<{
     menuId: string;
     activatorId: string;
+    /** Bind to the menu element with `:ref`. See {@link injectPopover}. */
+    menuRef: Ref<HTMLElement | null>;
     isOpen: UsePopoverReturn["isOpen"];
     close: UsePopoverReturn["close"];
     activeItemId: ComputedRef<string | undefined>;
@@ -34,6 +43,15 @@ export declare const injectMenu: InjectionKey<{
 export declare const injectCombobox: InjectionKey<{
     displayValue: ComputedRef<string | undefined>;
     popoverId: string;
+    /** Bind to the options element with `:ref`. See {@link injectPopover}. */
+    popoverRef: Ref<HTMLElement | null>;
+    /**
+     * The active option's element — the one `aria-activedescendant` names, handed
+     * over directly so nothing has to find it by that id.
+     */
+    activeItemEl: ComputedRef<HTMLElement | null>;
+    /** The first selected option's element. */
+    selectedItemEl: ComputedRef<HTMLElement | null>;
     isOpen: UsePopoverReturn["isOpen"];
     open: UsePopoverReturn["open"];
     close: UsePopoverReturn["close"];

package/dist/types/components/menu/menu.vue.d.ts

@@ -1,3 +1,4 @@
+import { type ComponentPublicInstance } from "vue";
 type __VLS_Props = {
     id?: string;
     activatorId?: string;
@@ -12,6 +13,7 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_1: {
     attrs: {
+        ref: import("vue").ShallowRef<HTMLElement | ComponentPublicInstance | null, HTMLElement | ComponentPublicInstance | null>;
         id: string;
         "aria-controls": string | undefined;
         "aria-haspopup": "menu";