@scalar/components 0.16.8 → 0.16.12

package/dist/components/ScalarDropdown/ScalarDropdown.vue.d.ts

@@ -2,9 +2,6 @@ import { type ScalarFloatingOptions } from '../ScalarFloating';
 /**
  * Scalar dropdown component
  *
- * Uses the headlessui Menu component under the hood
- * @see https://headlessui.com/v1/vue/menu
- *
  * @example
  * <ScalarDropdown>
  *   <ScalarButton>Click Me</ScalarButton>
@@ -14,14 +11,24 @@ import { type ScalarFloatingOptions } from '../ScalarFloating';
  *   </template>
  * </ScalarDropdown>
  */
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ScalarFloatingOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ScalarFloatingOptions & {
+    /** Whether or not the dropdown is open */
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ScalarFloatingOptions & {
+    /** Whether or not the dropdown is open */
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** The reference element for the element in the #floating slot */
-    default(props: {
+    default?(props: {
         /** Whether or not the dropdown is open */
         open: boolean;
     }): unknown;
     /** The list of dropdown items */
-    items(props: {
+    items?(props: {
         /** Whether or not the dropdown is open */
         open: boolean;
     }): unknown;

package/dist/components/ScalarDropdown/ScalarDropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"names":[],"mappings":"AAsEA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAI9E;;;;;;;;;;;;;;GAcG;;IAMD,kEAAkE;mBACnD;QACb,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;IACX,iCAAiC;iBACpB;QACX,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;;AAdb,wBA4HC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"names":[],"mappings":"AA8OA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAI9E;;;;;;;;;;;GAWG;;IAmLH,0CAA0C;WACjC,OAAO;;;;IADhB,0CAA0C;WACjC,OAAO;;;;IA9Kd,kEAAkE;oBAClD;QACd,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;IACX,iCAAiC;kBACnB;QACZ,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;;AAdb,wBAkTC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarDropdown/ScalarDropdown.vue.js

@@ -1,53 +1,132 @@
-import { defineComponent as i, createBlock as p, openBlock as f, unref as e, withCtx as t, createVNode as r, mergeProps as a, renderSlot as s } from "vue";
-import { Menu as u, MenuButton as c, MenuItems as _ } from "@headlessui/vue";
-import { useBindCx as d } from "@scalar/use-hooks/useBindCx";
-import h from "./ScalarDropdownMenu.vue.js";
-import B from "../ScalarFloating/ScalarFloating.vue.js";
-const y = {}, S = /* @__PURE__ */ i({
-  ...y,
+import { defineComponent as B, mergeModels as D, ref as b, useModel as g, useId as _, watch as $, computed as K, createBlock as L, openBlock as M, unref as m, mergeProps as I, createSlots as N, withCtx as A, renderSlot as R, createVNode as q, createElementVNode as O, withKeys as a, withModifiers as i, nextTick as C } from "vue";
+import { useDropdown as U } from "./useDropdown.js";
+import { useBindCx as V } from "@scalar/use-hooks/useBindCx";
+import { onClickOutside as j } from "@vueuse/core";
+import z from "./ScalarDropdownMenu.vue.js";
+import F from "../ScalarFloating/ScalarFloating.vue.js";
+const P = ["id", "aria-activedescendant", "aria-labelledby", "onKeydown"], G = {}, Z = /* @__PURE__ */ B({
+  ...G,
   inheritAttrs: !1,
   __name: "ScalarDropdown",
-  props: {
+  props: /* @__PURE__ */ D({
     placement: {},
     offset: { type: [Number, Object, Function] },
     resize: { type: Boolean },
     target: {},
     middleware: {},
     teleport: { type: [Boolean, String] }
-  },
-  setup($) {
-    const { cx: l } = d();
-    return (o, g) => (f(), p(e(u), null, {
-      default: t(({ open: n }) => [
-        r(e(B), a(o.$props, {
-          placement: o.placement ?? "bottom-start"
-        }), {
-          floating: t(({ width: m }) => [
-            r(h, a({
-              is: e(_),
-              style: { width: m }
-            }, e(l)("max-h-[inherit] max-w-[inherit]")), {
-              default: t(() => [
-                s(o.$slots, "items", { open: n })
-              ]),
-              _: 2
-            }, 1040, ["is", "style"])
-          ]),
-          default: t(() => [
-            r(e(c), { as: "template" }, {
-              default: t(() => [
-                s(o.$slots, "default", { open: n })
-              ]),
-              _: 2
-            }, 1024)
-          ]),
-          _: 2
-        }, 1040, ["placement"])
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(E) {
+    const l = b(), r = b(), n = g(E, "open"), { active: o } = U(), v = _(), f = b(v), y = _();
+    async function k() {
+      n.value = !n.value, await C(), n.value && r.value?.focus();
+    }
+    async function h(e) {
+      if (["ArrowDown", "ArrowUp", " ", "Enter"].includes(e.key))
+        e.preventDefault();
+      else return;
+      n.value || (n.value = !0), await C(), r.value?.focus(), ["ArrowDown", " ", "Enter"].includes(e.key) ? d(1) : e.key === "ArrowUp" && d(-1);
+    }
+    $(
+      () => l.value?.targetRef,
+      (e, t) => {
+        e && (e.id ? f.value = e.id : (f.value = v, e.setAttribute("id", f.value)), e.setAttribute("aria-haspopup", "menu"), e.setAttribute("aria-expanded", `${n.value}`), n.value && e.setAttribute("aria-controls", y), e.addEventListener("click", k), e.addEventListener("keydown", h)), t && t !== e && (t.id === v && t.removeAttribute("id"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-expanded"), t.removeEventListener("click", k), t.removeEventListener("keydown", h));
+      },
+      { immediate: !0 }
+    ), $(
+      n,
+      (e) => {
+        const t = l.value?.targetRef;
+        t && (t.setAttribute("aria-expanded", `${e}`), e ? t.setAttribute("aria-controls", y) : t.removeAttribute("aria-controls"));
+      },
+      { immediate: !0 }
+    );
+    async function u() {
+      l.value?.targetRef?.focus(), n.value = !1;
+    }
+    function x() {
+      if (!o.value || !r.value) return;
+      const e = r.value.querySelector(
+        `#${o.value}[role="menuitem"]:not([aria-disabled="true"])`
+      );
+      e && (e.click(), u());
+    }
+    function d(e) {
+      if (!n.value || !r.value) return;
+      const t = Array.from(
+        r.value.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        )
+      );
+      if (t.length === 0) return;
+      const c = t.findIndex((p) => p.id === o.value);
+      if (c === -1) {
+        const p = t[e > 0 ? 0 : t.length - 1];
+        p?.id && (o.value = p.id);
+        return;
+      }
+      const s = c + e;
+      if (s < 0 || s > t.length - 1)
+        return;
+      const w = t[s];
+      w?.id && (o.value = w.id);
+    }
+    j(r, u, {
+      ignore: [K(() => l.value?.targetRef)]
+    });
+    const { cx: S } = V();
+    return (e, t) => (M(), L(m(F), I({
+      ref_key: "floatingRef",
+      ref: l
+    }, e.$props, {
+      placement: e.placement ?? "bottom-start"
+    }), N({
+      default: A(() => [
+        R(e.$slots, "default", { open: n.value })
       ]),
-      _: 3
-    }));
+      _: 2
+    }, [
+      n.value ? {
+        name: "floating",
+        fn: A(({ width: c }) => [
+          q(z, I({
+            style: { width: c }
+          }, m(S)("max-h-[inherit] max-w-[inherit]")), {
+            menu: A(() => [
+              O("div", {
+                class: "flex flex-col p-0.75 outline-none",
+                ref_key: "menuRef",
+                ref: r,
+                role: "menu",
+                id: m(y),
+                "aria-activedescendant": m(o),
+                "aria-labelledby": f.value,
+                onClick: i(u, ["stop"]),
+                onKeydown: [
+                  a(i(x, ["prevent", "stop"]), ["enter"]),
+                  a(i(x, ["prevent", "stop"]), ["space"]),
+                  a(i(u, ["prevent", "stop"]), ["escape"]),
+                  a(i(u, ["prevent", "stop"]), ["tab"]),
+                  t[0] || (t[0] = a(i((s) => d(1), ["prevent", "stop"]), ["down"])),
+                  t[1] || (t[1] = a(i((s) => d(-1), ["prevent", "stop"]), ["up"]))
+                ],
+                tabindex: "-1"
+              }, [
+                R(e.$slots, "items", { open: n.value })
+              ], 40, P)
+            ]),
+            _: 3
+          }, 16, ["style"])
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["placement"]));
   }
 });
 export {
-  S as default
+  Z as default
 };

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC;;;;;;;;;;;;;;GAcG;;SAGI,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;SAFb,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;cAqDN,CAAC,KAAK,IAAgB,KAAK,GAAG;;AAzD5C,wBAuFC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarDropdownButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC;;;;;;;;;;;;;;GAcG;;SAGI,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;SAFb,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;cAwDN,CAAC,KAAK,IAAgB,KAAK,GAAG;;AA5D5C,wBA0FC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.js

@@ -1,7 +1,7 @@
 import o from "./ScalarDropdownButton.vue2.js";
 /* empty css                          */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7e7bf818"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-12a6b6d1"]]);
 export {
-  f as default
+  m as default
 };

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent as n, createBlock as a, openBlock as r, resolveDynamicComponent as s, normalizeClass as i, unref as t, withCtx as l, renderSlot as c } from "vue";
-import { cva as d, cx as p } from "@scalar/use-hooks/useBindCx";
-const u = {}, _ = /* @__PURE__ */ n({
+import { defineComponent as o, createBlock as n, openBlock as s, resolveDynamicComponent as r, normalizeClass as i, unref as t, withCtx as d, renderSlot as l } from "vue";
+import { cva as c, cx as p } from "@scalar/use-hooks/useBindCx";
+const u = {}, _ = /* @__PURE__ */ o({
   ...u,
   __name: "ScalarDropdownButton",
   props: {
@@ -8,30 +8,32 @@ const u = {}, _ = /* @__PURE__ */ n({
     active: { type: Boolean },
     disabled: { type: Boolean }
   },
-  setup(m) {
-    const o = d({
+  setup(b) {
+    const a = c({
       base: [
         // Layout
         "block h-8 min-w-0 gap-1.5 rounded px-2.5 py-1.5 text-left",
         // Text / background style
         "truncate  no-underline text-sm text-c-1",
         // Interaction
-        "cursor-pointer hover:bg-b-2 hover:text-c-1"
+        "cursor-pointer hover:bg-b-2"
       ],
       variants: {
         disabled: { true: "pointer-events-none text-c-3" },
-        active: { true: "bg-b-2 text-c-1" }
-      }
+        active: { true: "" }
+      },
+      compoundVariants: [{ disabled: !1, active: !0, class: "bg-b-2" }]
     });
-    return (e, b) => (r(), a(s(e.is), {
-      class: i(["item", t(p)("scalar-dropdown-item", t(o)({ active: e.active, disabled: e.disabled }))]),
+    return (e, m) => (s(), n(r(e.is), {
+      class: i(["item", t(p)("scalar-dropdown-item", t(a)({ active: e.active, disabled: e.disabled }))]),
+      "aria-disabled": e.disabled,
       type: e.is === "button" ? "button" : void 0
     }, {
-      default: l(() => [
-        c(e.$slots, "default", {}, void 0, !0)
+      default: d(() => [
+        l(e.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
-    }, 8, ["class", "type"]));
+    }, 8, ["aria-disabled", "class", "type"]));
   }
 });
 export {

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue.d.ts

@@ -9,10 +9,12 @@
  * </ScalarDropdownItem>
  */
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id?: string;
     disabled?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<{
+    id?: string;
     disabled?: boolean;
 }> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownItem.vue"],"names":[],"mappings":"AAkDA;;;;;;;;;GASG;;eAGU,OAAO;;;;eAAP,OAAO;;;;cA8DN,CAAC,KAAK,IAAiB,KAAK,GAAG;;AAhE7C,wBAgGC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarDropdownItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownItem.vue"],"names":[],"mappings":"AAuDA;;;;;;;;;GASG;;SAGI,MAAM;eACA,OAAO;;;;SADb,MAAM;eACA,OAAO;;;;cA6DN,CAAC,KAAK,IAAiB,KAAK,GAAG;;AAhE7C,wBAgGC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue.js

@@ -1,7 +1,7 @@
 import o from "./ScalarDropdownItem.vue2.js";
 /* empty css                        */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-788cdfbc"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-ab7c0c49"]]);
 export {
   m as default
 };

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue2.js

@@ -1,31 +1,32 @@
-import { defineComponent as a, createBlock as l, openBlock as i, unref as n, withCtx as t, createVNode as s, renderSlot as p } from "vue";
-import { MenuItem as m } from "@headlessui/vue";
-import u from "./ScalarDropdownButton.vue.js";
-const f = {}, B = /* @__PURE__ */ a({
+import { defineComponent as i, useId as r, createBlock as n, openBlock as l, unref as a, withCtx as s, renderSlot as u } from "vue";
+import { useDropdownItem as m } from "./useDropdown.js";
+import p from "./ScalarDropdownButton.vue.js";
+const f = {}, w = /* @__PURE__ */ i({
   ...f,
   __name: "ScalarDropdownItem",
   props: {
+    id: { default: () => r() },
     disabled: { type: Boolean }
   },
   emits: ["click"],
   setup(c) {
-    return (e, o) => (i(), l(n(m), { disabled: e.disabled }, {
-      default: t(({ active: d }) => [
-        s(u, {
-          active: d,
-          disabled: e.disabled,
-          onClick: o[0] || (o[0] = (r) => e.$emit("click", r))
-        }, {
-          default: t(() => [
-            p(e.$slots, "default", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["active", "disabled"])
+    const { active: t } = m();
+    return (e, o) => (l(), n(p, {
+      active: a(t) === e.id,
+      tabindex: "-1",
+      disabled: e.disabled,
+      role: "menuitem",
+      id: e.id,
+      onMouseenter: o[0] || (o[0] = (d) => t.value = e.id),
+      onClick: o[1] || (o[1] = (d) => e.$emit("click", d))
+    }, {
+      default: s(() => [
+        u(e.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
-    }, 8, ["disabled"]));
+    }, 8, ["active", "disabled", "id"]));
   }
 });
 export {
-  B as default
+  w as default
 };

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import { type Component } from 'vue';
 /**
  * Scalar dropdown menu component
  *
@@ -22,7 +22,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     is?: string | Component;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** The menu contents */
-    default(): unknown;
+    default?(): unknown;
+    /** Overrides the normal menu list element */
+    menu?(): unknown;
     /** Overrides the backdrop for the dropdown */
     backdrop?(): unknown;
 }>;

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;GAcG;;IAGD,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IAKvB,wBAAwB;eACb,OAAO;IAClB,8CAA8C;iBACjC,OAAO;;AAXtB,wBA2FC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AA+DA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;GAcG;;IAGD,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IAKvB,wBAAwB;gBACZ,OAAO;IACnB,6CAA6C;aACpC,OAAO;IAChB,8CAA8C;iBACjC,OAAO;;AAbtB,wBA2FC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.js

@@ -1,26 +1,25 @@
-import { defineComponent as n, createBlock as l, openBlock as a, resolveDynamicComponent as c, mergeProps as i, unref as o, withCtx as d, createElementVNode as t, renderSlot as r, createVNode as m } from "vue";
+import { defineComponent as n, createBlock as l, openBlock as a, resolveDynamicComponent as i, normalizeProps as c, guardReactiveProps as d, unref as s, withCtx as m, createElementVNode as t, renderSlot as o, createVNode as p } from "vue";
 import { useBindCx as f } from "@scalar/use-hooks/useBindCx";
-import p from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
-const _ = { class: "custom-scroll min-h-0 flex-1" }, u = { class: "flex flex-col p-0.75" }, x = {}, B = /* @__PURE__ */ n({
-  ...x,
+import _ from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
+const u = { class: "custom-scroll min-h-0 flex-1" }, h = { class: "flex flex-col p-0.75" }, v = {}, B = /* @__PURE__ */ n({
+  ...v,
   inheritAttrs: !1,
   __name: "ScalarDropdownMenu",
   props: {
     is: {}
   },
-  setup(h) {
-    const { cx: s } = f();
-    return (e, v) => (a(), l(c(e.is ?? "div"), i({
-      role: "menu",
-      tabindex: "0"
-    }, o(s)("relative flex w-56")), {
-      default: d(() => [
-        t("div", _, [
-          t("div", u, [
-            r(e.$slots, "default")
+  setup(x) {
+    const { cx: r } = f();
+    return (e, C) => (a(), l(i(e.is ?? "div"), c(d(s(r)("relative flex w-56"))), {
+      default: m(() => [
+        t("div", u, [
+          o(e.$slots, "menu", {}, () => [
+            t("div", h, [
+              o(e.$slots, "default")
+            ])
           ]),
-          r(e.$slots, "backdrop", {}, () => [
-            m(o(p))
+          o(e.$slots, "backdrop", {}, () => [
+            p(s(_))
           ])
         ])
       ]),

package/dist/components/ScalarDropdown/useDropdown.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+/** Provides a ref for the currently active dropdown item */
+export declare function useDropdown(): {
+    active: Ref<string | undefined, string | undefined>;
+};
+/** Injects the ref for the currently active dropdown item */
+export declare function useDropdownItem(): {
+    active: Ref<string | undefined, string | undefined> | undefined;
+};
+//# sourceMappingURL=useDropdown.d.ts.map

package/dist/components/ScalarDropdown/useDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/useDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,GAAG,EAAwB,MAAM,KAAK,CAAA;AAKvE,4DAA4D;AAC5D,wBAAgB,WAAW;;EAK1B;AAED,6DAA6D;AAC7D,wBAAgB,eAAe;;EAM9B"}

package/dist/components/ScalarDropdown/useDropdown.js

@@ -0,0 +1,14 @@
+import { ref as e, provide as t, inject as r } from "vue";
+const n = Symbol();
+function i() {
+  const o = e();
+  return t(n, o), { active: o };
+}
+function s() {
+  const o = r(n);
+  return o || console.warn("useDropdownItem must be used within a ScalarDropdown"), { active: o };
+}
+export {
+  i as useDropdown,
+  s as useDropdownItem
+};

package/dist/components/ScalarFloating/ScalarFloating.vue.d.ts

@@ -13,7 +13,10 @@ type __VLS_Slots = {
         data?: MiddlewareData;
     }): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<FloatingOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<FloatingOptions, {
+    /** The resolved target element */
+    targetRef: import("vue").ComputedRef<HTMLElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/ScalarFloating/ScalarFloating.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AA+HA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAa9C,KAAK,WAAW,GAAG;IACjB,kEAAkE;IAClE,OAAO,IAAI,OAAO,CAAA;IAClB,2BAA2B;IAC3B,QAAQ,CAAC,CAAC,KAAK,EAAE;QACf,4FAA4F;QAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,6FAA6F;QAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gDAAgD;QAChD,IAAI,CAAC,EAAE,cAAc,CAAA;KACtB,GAAG,OAAO,CAAA;CACZ,CAAC;AAuIF,QAAA,MAAM,eAAe,0SAMnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AAwIA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAa9C,KAAK,WAAW,GAAG;IACjB,kEAAkE;IAClE,OAAO,IAAI,OAAO,CAAA;IAClB,2BAA2B;IAC3B,QAAQ,CAAC,CAAC,KAAK,EAAE;QACf,4FAA4F;QAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,6FAA6F;QAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gDAAgD;QAChD,IAAI,CAAC,EAAE,cAAc,CAAA;KACtB,GAAG,OAAO,CAAA;CACZ,CAAC;AAiJF,QAAA,MAAM,eAAe;IA3EnB,kCAAkC;;wPAkFlC,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarFloating/ScalarFloating.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as w, ref as d, computed as a, createElementBlock as b, openBlock as s, Fragment as z, createElementVNode as m, createBlock as S, createCommentVNode as $, normalizeClass as k, renderSlot as u, unref as n, withCtx as B, normalizeStyle as R } from "vue";
+import { defineComponent as b, ref as d, computed as a, createElementBlock as z, openBlock as s, Fragment as S, createElementVNode as m, createBlock as $, createCommentVNode as k, normalizeClass as x, renderSlot as u, unref as i, withCtx as B, normalizeStyle as E } from "vue";
 import { getSideAxis as c } from "@floating-ui/utils";
-import { useFloating as x, autoUpdate as E, offset as F, flip as C, shift as M, size as H } from "@floating-ui/vue";
+import { useFloating as R, autoUpdate as C, offset as F, flip as M, shift as H, size as T } from "@floating-ui/vue";
 import { useResizeWithTarget as N } from "./useResizeWithTarget.js";
-import T from "../ScalarTeleport/ScalarTeleport.vue.js";
-const D = /* @__PURE__ */ w({
+import W from "../ScalarTeleport/ScalarTeleport.vue.js";
+const D = /* @__PURE__ */ b({
   inheritAttrs: !1,
   __name: "ScalarFloating",
   props: {
@@ -14,51 +14,55 @@ const D = /* @__PURE__ */ w({
     middleware: { default: () => [] },
     teleport: { type: [Boolean, String] }
   },
-  setup(t) {
-    const o = d(null), l = d(null), i = a(() => {
-      if (typeof window < "u" && l.value) {
+  setup(t, { expose: g }) {
+    const r = d(null), n = d(null), o = a(() => {
+      if (typeof window < "u" && n.value) {
         if (typeof t.target == "string") {
-          const e = document.getElementById(t.target);
-          if (e)
-            return e;
+          const l = document.getElementById(t.target);
+          if (l)
+            return l;
           console.warn(`ScalarFloating: Target with id="${t.target}" not found`);
         } else if (t.target instanceof HTMLElement)
           return t.target;
-        return l.value.children?.[0] || l.value;
+        const e = n.value.children?.[0];
+        return e instanceof HTMLElement ? e : n.value;
       }
-    }), r = N(i, {
+    }), f = N(o, {
       enabled: a(() => t.resize)
-    }), g = a(
-      () => c(t.placement ?? "bottom") === "y" ? r.width.value : void 0
-    ), h = a(
-      () => c(t.placement ?? "bottom") === "x" ? r.height.value : void 0
-    ), { floatingStyles: p, middlewareData: y } = x(i, o, {
+    }), h = a(
+      () => c(t.placement ?? "bottom") === "y" ? f.width.value : void 0
+    ), p = a(
+      () => c(t.placement ?? "bottom") === "x" ? f.height.value : void 0
+    ), { floatingStyles: y, middlewareData: v } = R(o, r, {
       placement: a(() => t.placement ?? "bottom"),
-      whileElementsMounted: E,
+      whileElementsMounted: C,
       middleware: a(() => [
         F(t.offset),
-        C(),
-        M({ padding: 10 }),
-        H({
-          apply({ availableWidth: e, availableHeight: f, elements: v }) {
-            Object.assign(v.floating.style, {
+        M(),
+        H({ padding: 10 }),
+        T({
+          apply({ availableWidth: e, availableHeight: l, elements: w }) {
+            Object.assign(w.floating.style, {
               maxWidth: `${Math.max(0, e) - 20}px`,
-              maxHeight: `${Math.max(0, f) - 20}px`
+              maxHeight: `${Math.max(0, l) - 20}px`
             });
           }
         }),
         ...t.middleware
       ])
     });
-    return (e, f) => (s(), b(z, null, [
+    return g({
+      /** The resolved target element */
+      targetRef: o
+    }), (e, l) => (s(), z(S, null, [
       m("div", {
         ref_key: "wrapperRef",
-        ref: l,
-        class: k({ contents: !!e.$slots.default })
+        ref: n,
+        class: x({ contents: !!e.$slots.default })
       }, [
         u(e.$slots, "default")
       ], 2),
-      e.$slots.floating ? (s(), S(n(T), {
+      e.$slots.floating ? (s(), $(i(W), {
         key: 0,
         disabled: !e.teleport,
         to: typeof e.teleport == "string" ? e.teleport : void 0
@@ -66,19 +70,19 @@ const D = /* @__PURE__ */ w({
         default: B(() => [
           m("div", {
             ref_key: "floatingRef",
-            ref: o,
+            ref: r,
             class: "relative z-context",
-            style: R(n(p))
+            style: E(i(y))
           }, [
             u(e.$slots, "floating", {
-              data: n(y),
-              height: h.value,
-              width: g.value
+              data: i(v),
+              height: p.value,
+              width: h.value
             })
           ], 4)
         ]),
         _: 3
-      }, 8, ["disabled", "to"])) : $("", !0)
+      }, 8, ["disabled", "to"])) : k("", !0)
     ], 64));
   }
 });

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

@@ -1,4 +1,5 @@
-import type { Middleware, OffsetOptions, Placement } from '@floating-ui/vue';
+import type { AlignedPlacement, Middleware, OffsetOptions, Side } from '@floating-ui/vue';
+import type { MaybeRefOrGetter } from 'vue';
 /** The props for the ScalarFloating component */
 export type FloatingOptions = {
     /**
@@ -7,7 +8,7 @@ export type FloatingOptions = {
      *
      * @see https://floating-ui.com/docs/computePosition#placement
      */
-    placement?: Placement;
+    placement?: Side | AlignedPlacement;
     /**
      * The offset of the floating element relative to its reference element.
      * @default 5 (5px)
@@ -28,7 +29,7 @@ export type FloatingOptions = {
      *
      * Can be a string id or a reference to an element
      */
-    target?: string | HTMLElement;
+    target?: MaybeRefOrGetter<HTMLElement | string>;
     /**
      * Floating UI Middleware to be passed to Floating UI
      *