@scalar/components 0.16.19 → 0.16.22

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as b, mergeModels as m, useModel as y, ref as c, createBlock as i, openBlock as f, withCtx as t, createCommentVNode as k, createSlots as V, renderSlot as r, normalizeProps as d, guardReactiveProps as s } from "vue";
+import { defineComponent as $, mergeModels as f, useModel as b, ref as y, createBlock as p, openBlock as u, withCtx as l, createCommentVNode as k, createSlots as V, renderSlot as d, normalizeProps as n, guardReactiveProps as m } from "vue";
 import w from "./ScalarComboboxOptions.vue.js";
 import z from "./ScalarComboboxPopover.vue.js";
-const P = /* @__PURE__ */ b({
+const P = /* @__PURE__ */ $({
   __name: "ScalarComboboxMultiselect",
-  props: /* @__PURE__ */ m({
+  props: /* @__PURE__ */ f({
     options: {},
     placeholder: {},
     placement: {},
@@ -16,12 +16,12 @@ const P = /* @__PURE__ */ b({
     modelValue: { default: [] },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ m(["add"], ["update:modelValue"]),
-  setup(u, { expose: g, emit: v }) {
-    const $ = v, n = y(u, "modelValue"), p = c(null);
-    return g({ comboboxPopoverRef: p }), (e, l) => (f(), i(z, {
+  emits: /* @__PURE__ */ f(["add"], ["update:modelValue"]),
+  setup(e, { expose: c, emit: g }) {
+    const v = g, s = b(e, "modelValue"), i = y(null);
+    return c({ comboboxPopoverRef: i }), (t, a) => (u(), p(z, {
       ref_key: "comboboxPopoverRef",
-      ref: p,
+      ref: i,
       middleware: e.middleware,
       offset: e.offset,
       placement: e.placement ?? "bottom-start",
@@ -29,38 +29,38 @@ const P = /* @__PURE__ */ b({
       target: e.target,
       teleport: e.teleport
     }, {
-      default: t(({ open: a }) => [
-        r(e.$slots, "default", { open: a })
+      default: l(({ open: r }) => [
+        d(t.$slots, "default", { open: r })
       ]),
-      popover: t(({ open: a }) => [
-        e.options?.length ? (f(), i(w, {
+      popover: l(({ open: r }) => [
+        e.options?.length ? (u(), p(w, {
           key: 0,
-          modelValue: n.value,
-          "onUpdate:modelValue": l[0] || (l[0] = (o) => n.value = o),
+          modelValue: s.value,
+          "onUpdate:modelValue": a[0] || (a[0] = (o) => s.value = o),
           multiselect: "",
-          open: a,
+          open: r,
           options: e.options,
           placeholder: e.placeholder,
-          onAdd: l[1] || (l[1] = (o) => $("add"))
+          onAdd: a[1] || (a[1] = (o) => v("add"))
         }, V({ _: 2 }, [
-          e.$slots.option ? {
+          t.$slots.option ? {
             name: "option",
-            fn: t((o) => [
-              r(e.$slots, "option", d(s(o)))
+            fn: l((o) => [
+              d(t.$slots, "option", n(m(o)))
             ]),
             key: "0"
           } : void 0,
-          e.$slots.group ? {
+          t.$slots.group ? {
             name: "group",
-            fn: t((o) => [
-              r(e.$slots, "group", d(s(o)))
+            fn: l((o) => [
+              d(t.$slots, "group", n(m(o)))
             ]),
             key: "1"
           } : void 0,
-          e.$slots.add ? {
+          t.$slots.add ? {
             name: "add",
-            fn: t((o) => [
-              r(e.$slots, "add", d(s(o)))
+            fn: l((o) => [
+              d(t.$slots, "add", n(m(o)))
             ]),
             key: "2"
           } : void 0

package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as o, createElementBlock as r, openBlock as s, normalizeClass as n, unref as t, renderSlot as c } from "vue";
-import { cva as l, cx as i } from "@scalar/use-hooks/useBindCx";
-const p = ["aria-selected"], b = /* @__PURE__ */ o({
+import { defineComponent as o, createElementBlock as n, openBlock as r, normalizeClass as l, unref as t, renderSlot as s } from "vue";
+import { cva as i, cx as d } from "@scalar/use-hooks/useBindCx";
+const m = ["aria-selected"], b = /* @__PURE__ */ o({
   __name: "ScalarComboboxOption",
   props: {
     active: { type: Boolean },
     selected: { type: Boolean }
   },
-  setup(d) {
-    const a = l({
+  setup(e) {
+    const a = i({
       base: [
         // Group
         "group/item",
@@ -23,17 +23,17 @@ const p = ["aria-selected"], b = /* @__PURE__ */ o({
         active: { true: "bg-b-2" }
       }
     });
-    return (e, m) => (s(), r("li", {
+    return (c, u) => (r(), n("li", {
       "aria-selected": e.selected,
-      class: n(t(i)(t(a)({ active: e.active, selected: e.selected }))),
+      class: l(t(d)(t(a)({ active: e.active, selected: e.selected }))),
       role: "option",
       tabindex: "-1"
     }, [
-      c(e.$slots, "default", {
+      s(c.$slots, "default", {
         active: e.active,
         selected: e.selected
       })
-    ], 10, p));
+    ], 10, m));
   }
 });
 export {

package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.js

@@ -1,26 +1,26 @@
-import { defineComponent as a, useId as i, createElementBlock as o, openBlock as d, createCommentVNode as t, renderSlot as l } from "vue";
-const n = ["id", "aria-labelledby", "role"], r = ["id"], m = /* @__PURE__ */ a({
+import { defineComponent as a, useId as i, createElementBlock as t, openBlock as l, createCommentVNode as n, renderSlot as o } from "vue";
+const r = ["id", "aria-labelledby", "role"], c = ["id"], m = /* @__PURE__ */ a({
   __name: "ScalarComboboxOptionGroup",
   props: {
     id: { default: () => i() },
     hidden: { type: Boolean, default: !1 }
   },
-  setup(s) {
-    return (e, p) => (d(), o("div", {
+  setup(e) {
+    return (d, s) => (l(), t("div", {
       id: e.id,
       "aria-labelledby": e.id ? `${e.id}-label` : void 0,
       class: "contents",
       role: e.hidden ? void 0 : "group"
     }, [
-      e.hidden ? t("", !0) : (d(), o("div", {
+      e.hidden ? n("", !0) : (l(), t("div", {
         key: 0,
         id: `${e.id}-label`,
         class: "min-w-0 truncate px-2.5 py-1.5 text-c-2"
       }, [
-        l(e.$slots, "label")
-      ], 8, r)),
-      l(e.$slots, "default")
-    ], 8, n));
+        o(d.$slots, "label")
+      ], 8, c)),
+      o(d.$slots, "default")
+    ], 8, r));
   }
 });
 export {

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as W, mergeModels as O, useModel as X, useSlots as Y, useId as z, computed as w, ref as M, onMounted as D, watch as Z, createElementBlock as c, openBlock as a, Fragment as m, createElementVNode as k, withDirectives as G, createVNode as I, unref as h, withKeys as V, withModifiers as y, vModelText as _, createBlock as C, createCommentVNode as K, renderList as q, withCtx as x, renderSlot as S, toDisplayString as F, createTextVNode as ee, vShow as te } from "vue";
+import { defineComponent as W, mergeModels as O, useModel as X, useSlots as Y, useId as z, computed as w, ref as I, onMounted as D, watch as Z, createElementBlock as v, openBlock as s, Fragment as m, createElementVNode as k, withDirectives as G, createVNode as h, unref as V, withKeys as C, withModifiers as y, vModelText as _, createBlock as S, createCommentVNode as K, renderList as q, withCtx as g, renderSlot as B, toDisplayString as F, createTextVNode as ee, vShow as te } from "vue";
 import { ScalarIconMagnifyingGlass as le, ScalarIconPlus as oe } from "@scalar/icons";
 import P from "./ScalarComboboxOption.vue.js";
 import ne from "./ScalarComboboxOptionGroup.vue.js";
 import { isGroups as R } from "./types.js";
 import ie from "../ScalarListbox/ScalarListboxCheckbox.vue.js";
-const se = { class: "relative flex" }, ae = ["aria-activedescendant", "placeholder"], de = ["aria-multiselectable"], ue = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, be = /* @__PURE__ */ W({
+const ae = { class: "relative flex" }, se = ["aria-activedescendant", "placeholder"], de = ["aria-multiselectable"], ue = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, be = /* @__PURE__ */ W({
   inheritAttrs: !1,
   __name: "ScalarComboboxOptions",
   props: /* @__PURE__ */ O({
@@ -16,9 +16,9 @@ const se = { class: "relative flex" }, ae = ["aria-activedescendant", "placehold
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ O(["add"], ["update:modelValue"]),
-  setup(B, { emit: U }) {
-    const d = B, j = U, i = X(B, "modelValue"), g = Y(), $ = `scalar-combobox-items-${z()}`, f = { id: `${z()}-add`, label: "Add a new option" };
-    function p(t) {
+  setup(f, { emit: U }) {
+    const d = f, j = U, i = X(f, "modelValue"), M = Y(), $ = `scalar-combobox-items-${z()}`, p = { id: `${z()}-add`, label: "Add a new option" };
+    function b(t) {
       return `${$}-${t.id}`;
     }
     const r = w(
@@ -32,24 +32,24 @@ const se = { class: "relative flex" }, ae = ["aria-activedescendant", "placehold
         [{ label: "", options: d.options }]
       )
       // G is OptionGroup<O>
-    ), u = M(""), l = M(i.value?.[0] ?? r.value[0]);
+    ), u = I(""), l = I(i.value?.[0] ?? r.value[0]);
     D(() => {
       u.value = "", l.value = i.value?.[0] ?? r.value[0], i.value[0] && setTimeout(() => {
         const e = i.value[0];
-        e && document?.getElementById(p(e))?.scrollIntoView({ block: "nearest" });
+        e && document?.getElementById(b(e))?.scrollIntoView({ block: "nearest" });
       }, 10);
     }), Z(
       () => u.value,
       () => l.value = N.value[0]
     );
-    const b = w(
+    const x = w(
       () => u.value === "" ? r.value : r.value.filter((t) => t.label.toLowerCase().includes(u.value.toLowerCase()))
     ), N = w(
-      () => g.add ? [...b.value, f] : b.value
+      () => M.add ? [...x.value, p] : x.value
     );
     function A(t) {
       if (t) {
-        if (t.id === f.id) {
+        if (t.id === p.id) {
           T();
           return;
         }
@@ -60,10 +60,10 @@ const se = { class: "relative flex" }, ae = ["aria-activedescendant", "placehold
       }
     }
     function E(t) {
-      const e = N.value, v = e.findIndex(
+      const e = N.value, c = e.findIndex(
         (n) => n.id === l.value?.id
       ) + t;
-      v < 0 || v > e.length - 1 || (l.value = e[v], l.value && document?.getElementById(p(l.value))?.scrollIntoView({
+      c < 0 || c > e.length - 1 || (l.value = e[c], l.value && document?.getElementById(b(l.value))?.scrollIntoView({
         behavior: "smooth",
         block: "nearest"
       }));
@@ -71,79 +71,79 @@ const se = { class: "relative flex" }, ae = ["aria-activedescendant", "placehold
     function T() {
       j("add"), u.value = "";
     }
-    const L = M(null);
-    return D(() => setTimeout(() => L.value?.focus(), 0)), (t, e) => (a(), c(m, null, [
-      k("div", se, [
-        I(h(le), { class: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3 size-4" }),
+    const L = I(null);
+    return D(() => setTimeout(() => L.value?.focus(), 0)), (t, e) => (s(), v(m, null, [
+      k("div", ae, [
+        h(V(le), { class: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3 size-4" }),
         G(k("input", {
           ref_key: "input",
           ref: L,
           "onUpdate:modelValue": e[0] || (e[0] = (o) => u.value = o),
-          "aria-activedescendant": l.value ? p(l.value) : void 0,
+          "aria-activedescendant": l.value ? b(l.value) : void 0,
           "aria-autocomplete": "list",
           "aria-controls": $,
           class: "min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1",
           "data-1p-ignore": "",
-          placeholder: t.placeholder,
+          placeholder: f.placeholder,
           role: "combobox",
           tabindex: "0",
           type: "text",
           onKeydown: [
-            e[1] || (e[1] = V(y((o) => E(1), ["prevent"]), ["down"])),
-            e[2] || (e[2] = V(y((o) => l.value && A(l.value), ["prevent"]), ["enter"])),
-            e[3] || (e[3] = V(y((o) => E(-1), ["prevent"]), ["up"]))
+            e[1] || (e[1] = C(y((o) => E(1), ["prevent"]), ["down"])),
+            e[2] || (e[2] = C(y((o) => l.value && A(l.value), ["prevent"]), ["enter"])),
+            e[3] || (e[3] = C(y((o) => E(-1), ["prevent"]), ["up"]))
           ]
-        }, null, 40, ae), [
+        }, null, 40, se), [
           [_, u.value]
         ])
       ]),
       G(k("ul", {
         id: $,
-        "aria-multiselectable": t.multiselect,
+        "aria-multiselectable": f.multiselect,
         class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0",
         role: "listbox",
         tabindex: "-1"
       }, [
-        (a(!0), c(m, null, q(H.value, (o, v) => (a(), C(ne, {
-          id: `${$}-group-${v}`,
-          key: v,
+        (s(!0), v(m, null, q(H.value, (o, c) => (s(), S(ne, {
+          id: `${$}-group-${c}`,
+          key: c,
           hidden: (
             // Only show the group label if there are some results
-            !o.options.some((n) => b.value.some((s) => s.id === n.id)) || // And it has a label
+            !o.options.some((n) => x.value.some((a) => a.id === n.id)) || // And it has a label
             !o.label
           )
         }, {
-          label: x(() => [
-            t.$slots.group ? S(t.$slots, "group", {
+          label: g(() => [
+            t.$slots.group ? B(t.$slots, "group", {
               key: 0,
               group: o
-            }) : (a(), c(m, { key: 1 }, [
+            }) : (s(), v(m, { key: 1 }, [
               ee(F(o.label), 1)
             ], 64))
           ]),
-          default: x(() => [
-            (a(!0), c(m, null, q(b.value, (n) => (a(), c(m, {
+          default: g(() => [
+            (s(!0), v(m, null, q(x.value, (n) => (s(), v(m, {
               key: n.id
             }, [
-              o.options.some((s) => s.id === n.id) ? (a(), C(P, {
+              o.options.some((a) => a.id === n.id) ? (s(), S(P, {
                 key: 0,
-                id: p(n),
+                id: b(n),
                 active: l.value?.id === n.id,
-                selected: i.value.some((s) => s.id === n.id),
-                onClick: (s) => A(n),
+                selected: i.value.some((a) => a.id === n.id),
+                onClick: (a) => A(n),
                 onMousedown: e[4] || (e[4] = y(() => {
                 }, ["prevent"])),
-                onMouseenter: (s) => l.value = n
+                onMouseenter: (a) => l.value = n
               }, {
-                default: x(({ active: s, selected: J }) => [
-                  t.$slots.option ? S(t.$slots, "option", {
+                default: g(({ active: a, selected: J }) => [
+                  t.$slots.option ? B(t.$slots, "option", {
                     key: 0,
-                    active: s,
+                    active: a,
                     option: n,
                     selected: J
-                  }) : (a(), c(m, { key: 1 }, [
-                    I(h(ie), {
-                      multiselect: t.multiselect,
+                  }) : (s(), v(m, { key: 1 }, [
+                    h(V(ie), {
+                      multiselect: f.multiselect,
                       selected: i.value.some((Q) => Q.id === n.id)
                     }, null, 8, ["multiselect", "selected"]),
                     k("span", ue, F(n.label), 1)
@@ -155,23 +155,23 @@ const se = { class: "relative flex" }, ae = ["aria-activedescendant", "placehold
           ]),
           _: 2
         }, 1032, ["id", "hidden"]))), 128)),
-        g.add ? (a(), C(P, {
+        M.add ? (s(), S(P, {
           key: 0,
-          id: p(f),
-          active: l.value?.id === f.id,
+          id: b(p),
+          active: l.value?.id === p.id,
           onClick: T,
           onMousedown: e[5] || (e[5] = y(() => {
           }, ["prevent"])),
-          onMouseenter: e[6] || (e[6] = (o) => l.value = f)
+          onMouseenter: e[6] || (e[6] = (o) => l.value = p)
         }, {
-          default: x(({ active: o }) => [
-            I(h(oe), { class: "size-4 p-px" }),
-            S(t.$slots, "add", { active: o })
+          default: g(({ active: o }) => [
+            h(V(oe), { class: "size-4 p-px" }),
+            B(t.$slots, "add", { active: o })
           ]),
           _: 3
         }, 8, ["id", "active"])) : K("", !0)
       ], 8, de), [
-        [te, b.value.length || g.add]
+        [te, x.value.length || M.add]
       ])
     ], 64));
   }

package/dist/components/ScalarContextMenu/ScalarContextMenu.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as d, createBlock as r, openBlock as i, unref as e, withCtx as t, createVNode as n, normalizeClass as f, renderSlot as a } from "vue";
-import { ContextMenuRoot as u, ContextMenuTrigger as c, ContextMenuPortal as g, ContextMenuContent as C, ContextMenuItem as p } from "radix-vue";
+import { defineComponent as d, createBlock as r, openBlock as i, unref as e, withCtx as t, createVNode as n, normalizeClass as f, renderSlot as o } from "vue";
+import { ContextMenuRoot as u, ContextMenuTrigger as c, ContextMenuPortal as g, ContextMenuContent as C, ContextMenuItem as m } from "radix-vue";
 const M = /* @__PURE__ */ d({
   __name: "ScalarContextMenu",
   props: {
@@ -9,16 +9,16 @@ const M = /* @__PURE__ */ d({
     disabled: { type: Boolean, default: !1 },
     triggerClass: {}
   },
-  setup(o) {
-    const l = o;
-    return (s, m) => (i(), r(e(u), null, {
+  setup(s) {
+    const l = s;
+    return (a, p) => (i(), r(e(u), null, {
       default: t(() => [
         n(e(c), {
           class: f(s.triggerClass),
           disabled: l.disabled
         }, {
           default: t(() => [
-            a(s.$slots, "trigger")
+            o(a.$slots, "trigger")
           ]),
           _: 3
         }, 8, ["class", "disabled"]),
@@ -30,9 +30,9 @@ const M = /* @__PURE__ */ d({
               sideOffset: l.sideOffset
             }, {
               default: t(() => [
-                n(e(p), null, {
+                n(e(m), null, {
                   default: t(() => [
-                    a(s.$slots, "content")
+                    o(a.$slots, "content")
                   ]),
                   _: 3
                 })

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

@@ -1,4 +1,4 @@
-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 { defineComponent as B, mergeModels as D, ref as b, useModel as g, useId as $, watch as I, computed as K, createBlock as L, openBlock as M, unref as m, mergeProps as R, createSlots as N, withCtx as A, renderSlot as C, createVNode as q, createElementVNode as O, withKeys as a, withModifiers as r, nextTick as E } from "vue";
 import { useBindCx as U } from "@scalar/use-hooks/useBindCx";
 import { onClickOutside as V } from "@vueuse/core";
 import j from "./ScalarDropdownMenu.vue.js";
@@ -20,24 +20,24 @@ const P = ["id", "aria-activedescendant", "aria-labelledby", "onKeydown"], G = {
     openModifiers: {}
   }),
   emits: ["update:open"],
-  setup(E) {
-    const l = b(), r = b(), n = g(E, "open"), { active: o } = z(), v = _(), f = b(v), y = _();
-    async function k() {
-      n.value = !n.value, await C(), n.value && r.value?.focus();
+  setup(k) {
+    const l = b(), i = b(), n = g(k, "open"), { active: o } = z(), v = $(), f = b(v), y = $();
+    async function x() {
+      n.value = !n.value, await E(), n.value && i.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);
+      n.value || (n.value = !0), await E(), i.value?.focus(), ["ArrowDown", " ", "Enter"].includes(e.key) ? c(1) : e.key === "ArrowUp" && c(-1);
     }
-    $(
+    I(
       () => 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));
+        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", x), 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", x), t.removeEventListener("keydown", h));
       },
       { immediate: !0 }
-    ), $(
+    ), I(
       n,
       (e) => {
         const t = l.value?.targetRef;
@@ -48,75 +48,75 @@ const P = ["id", "aria-activedescendant", "aria-labelledby", "onKeydown"], G = {
     async function u() {
       l.value?.targetRef?.focus(), n.value = !1;
     }
-    function x() {
-      if (!o.value || !r.value) return;
-      const e = r.value.querySelector(
+    function w() {
+      if (!o.value || !i.value) return;
+      const e = i.value.querySelector(
         `#${o.value}[role="menuitem"]:not([aria-disabled="true"])`
       );
       e && (e.click(), u());
     }
-    function d(e) {
-      if (!n.value || !r.value) return;
+    function c(e) {
+      if (!n.value || !i.value) return;
       const t = Array.from(
-        r.value.querySelectorAll(
+        i.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 d = t.findIndex((p) => p.id === o.value);
+      if (d === -1) {
         const p = t[e > 0 ? 0 : t.length - 1];
         p?.id && (o.value = p.id);
         return;
       }
-      const s = c + e;
+      const s = d + e;
       if (s < 0 || s > t.length - 1)
         return;
-      const w = t[s];
-      w?.id && (o.value = w.id);
+      const _ = t[s];
+      _?.id && (o.value = _.id);
     }
-    V(r, u, {
+    V(i, u, {
       ignore: [K(() => l.value?.targetRef)]
     });
     const { cx: S } = U();
-    return (e, t) => (M(), L(m(F), I({
+    return (e, t) => (M(), L(m(F), R({
       ref_key: "floatingRef",
       ref: l
     }, e.$props, {
-      placement: e.placement ?? "bottom-start"
+      placement: k.placement ?? "bottom-start"
     }), N({
       default: A(() => [
-        R(e.$slots, "default", { open: n.value })
+        C(e.$slots, "default", { open: n.value })
       ]),
       _: 2
     }, [
       n.value ? {
         name: "floating",
-        fn: A(({ width: c }) => [
-          q(j, I({
-            style: { width: c }
+        fn: A(({ width: d }) => [
+          q(j, R({
+            style: { width: d }
           }, m(S)("max-h-[inherit] max-w-[inherit]")), {
             menu: A(() => [
               O("div", {
                 id: m(y),
                 ref_key: "menuRef",
-                ref: r,
+                ref: i,
                 "aria-activedescendant": m(o),
                 "aria-labelledby": f.value,
                 class: "flex flex-col p-0.75 outline-none",
                 role: "menu",
                 tabindex: "-1",
-                onClick: i(u, ["stop"]),
+                onClick: r(u, ["stop"]),
                 onKeydown: [
-                  t[0] || (t[0] = a(i((s) => d(1), ["prevent", "stop"]), ["down"])),
-                  a(i(x, ["prevent", "stop"]), ["enter"]),
-                  a(i(u, ["prevent", "stop"]), ["escape"]),
-                  a(i(x, ["prevent", "stop"]), ["space"]),
-                  a(i(u, ["prevent", "stop"]), ["tab"]),
-                  t[1] || (t[1] = a(i((s) => d(-1), ["prevent", "stop"]), ["up"]))
+                  t[0] || (t[0] = a(r((s) => c(1), ["prevent", "stop"]), ["down"])),
+                  a(r(w, ["prevent", "stop"]), ["enter"]),
+                  a(r(u, ["prevent", "stop"]), ["escape"]),
+                  a(r(w, ["prevent", "stop"]), ["space"]),
+                  a(r(u, ["prevent", "stop"]), ["tab"]),
+                  t[1] || (t[1] = a(r((s) => c(-1), ["prevent", "stop"]), ["up"]))
                 ]
               }, [
-                R(e.$slots, "items", { open: n.value })
+                C(e.$slots, "items", { open: n.value })
               ], 40, P)
             ]),
             _: 3

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

@@ -1,15 +1,15 @@
-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,
+import { defineComponent as o, createBlock as i, openBlock as s, resolveDynamicComponent as r, normalizeClass as d, unref as t, withCtx as l, renderSlot as c } from "vue";
+import { cva as u, cx as b } from "@scalar/use-hooks/useBindCx";
+const m = {}, x = /* @__PURE__ */ o({
+  ...m,
   __name: "ScalarDropdownButton",
   props: {
     is: { default: "button" },
     active: { type: Boolean },
     disabled: { type: Boolean }
   },
-  setup(b) {
-    const a = c({
+  setup(e) {
+    const a = u({
       base: [
         // Layout
         "block h-8 min-w-0 gap-1.5 rounded px-2.5 py-1.5 text-left",
@@ -24,18 +24,18 @@ const u = {}, _ = /* @__PURE__ */ o({
       },
       compoundVariants: [{ disabled: !1, active: !0, class: "bg-b-2" }]
     });
-    return (e, m) => (s(), n(r(e.is), {
+    return (n, p) => (s(), i(r(e.is), {
       "aria-disabled": e.disabled,
-      class: i(["item", t(p)("scalar-dropdown-item", t(a)({ active: e.active, disabled: e.disabled }))]),
+      class: d(["item", t(b)("scalar-dropdown-item", t(a)({ active: e.active, disabled: e.disabled }))]),
       type: e.is === "button" ? "button" : void 0
     }, {
-      default: d(() => [
-        l(e.$slots, "default", {}, void 0, !0)
+      default: l(() => [
+        c(n.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
     }, 8, ["aria-disabled", "class", "type"]));
   }
 });
 export {
-  _ as default
+  x as default
 };