@scalar/components 0.16.20 → 0.16.22

package/dist/components/ScalarButton/ScalarButton.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as v, createBlock as n, openBlock as s, resolveDynamicComponent as l, mergeProps as p, unref as a, withCtx as f, createElementBlock as i, createCommentVNode as d, renderSlot as t, normalizeClass as o, createVNode as z } from "vue";
-import { cva as r, useBindCx as g } from "@scalar/use-hooks/useBindCx";
-import { BUTTON_VARIANT_STYLES as y } from "./constants.js";
-import h from "../ScalarLoading/ScalarLoading.vue.js";
-const k = {
+import { defineComponent as f, createBlock as r, openBlock as t, resolveDynamicComponent as d, mergeProps as z, unref as a, withCtx as g, createElementBlock as s, createCommentVNode as c, renderSlot as n, normalizeClass as o, createVNode as x } from "vue";
+import { cva as l, useBindCx as y } from "@scalar/use-hooks/useBindCx";
+import { BUTTON_VARIANT_STYLES as h } from "./constants.js";
+import k from "../ScalarLoading/ScalarLoading.vue.js";
+const A = {
   key: 3,
   class: "centered"
-}, A = {}, T = /* @__PURE__ */ v({
-  ...A,
+}, B = {}, T = /* @__PURE__ */ f({
+  ...B,
   inheritAttrs: !1,
   __name: "ScalarButton",
   props: {
@@ -17,8 +17,8 @@ const k = {
     icon: { type: [Object, Function] },
     loader: {}
   },
-  setup(B) {
-    const m = r({
+  setup(e) {
+    const m = l({
       base: "scalar-button flex cursor-pointer items-center justify-center rounded font-medium -outline-offset-1",
       variants: {
         disabled: { true: "bg-b-2 text-color-3 shadow-none" },
@@ -27,7 +27,7 @@ const k = {
           sm: "px-3.5 py-2 text-sm leading-5",
           md: "px-5 py-3 text-sm leading-5"
         },
-        variant: y
+        variant: h
       },
       compoundVariants: [
         {
@@ -41,7 +41,7 @@ const k = {
           class: "to-b-1.5 bg-linear-to-b hover:bg-linear-to-b dark:hover:bg-linear-to-t"
         }
       ]
-    }), c = r({
+    }), u = l({
       base: "shrink-0",
       variants: {
         size: {
@@ -50,7 +50,7 @@ const k = {
           md: "size-3.5 -ml-0.5 mr-1.5"
         }
       }
-    }), u = r({
+    }), b = l({
       variants: {
         size: {
           xs: "size-4",
@@ -58,37 +58,37 @@ const k = {
           md: "size-6"
         }
       }
-    }), { cx: b } = g();
-    return (e, V) => (s(), n(l(e.is), p(
+    }), { cx: v } = y();
+    return (i, V) => (t(), r(d(e.is), z(
       {
         "aria-disabled": e.disabled || void 0,
         type: e.is === "button" ? "button" : void 0
       },
-      a(b)(a(m)({ disabled: e.disabled, size: e.size, variant: e.variant }), {
+      a(v)(a(m)({ disabled: e.disabled, size: e.size, variant: e.variant }), {
         relative: e.loader?.isActive
       })
     ), {
-      default: f(() => [
-        e.$slots.icon || e.icon ? (s(), i("div", {
+      default: g(() => [
+        i.$slots.icon || e.icon ? (t(), s("div", {
           key: 0,
-          class: o([a(c)({ size: e.size }), { invisible: e.loader?.isActive }])
+          class: o([a(u)({ size: e.size }), { invisible: e.loader?.isActive }])
         }, [
-          t(e.$slots, "icon", {}, () => [
-            (s(), n(l(e.icon), { class: "size-full" }))
+          n(i.$slots, "icon", {}, () => [
+            (t(), r(d(e.icon), { class: "size-full" }))
           ])
-        ], 2)) : d("", !0),
-        e.loader ? (s(), i("span", {
+        ], 2)) : c("", !0),
+        e.loader ? (t(), s("span", {
           key: 1,
           class: o({ invisible: e.loader?.isActive })
         }, [
-          t(e.$slots, "default")
-        ], 2)) : t(e.$slots, "default", { key: 2 }),
-        e.loader?.isActive ? (s(), i("div", k, [
-          z(a(h), {
-            class: o(a(u)({ size: e.size })),
+          n(i.$slots, "default")
+        ], 2)) : n(i.$slots, "default", { key: 2 }),
+        e.loader?.isActive ? (t(), s("div", A, [
+          x(a(k), {
+            class: o(a(b)({ size: e.size })),
             loader: e.loader
           }, null, 8, ["class", "loader"])
-        ])) : d("", !0)
+        ])) : c("", !0)
       ]),
       _: 3
     }, 16, ["aria-disabled", "type"]));

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.js

@@ -1,20 +1,20 @@
-import { defineComponent as o, createElementBlock as c, openBlock as t, normalizeClass as r, createBlock as a, createCommentVNode as n, unref as s } from "vue";
-import { ScalarIconCheck as l } from "@scalar/icons";
-const d = {}, i = /* @__PURE__ */ o({
+import { defineComponent as c, createElementBlock as o, openBlock as t, normalizeClass as r, createBlock as a, createCommentVNode as n, unref as l } from "vue";
+import { ScalarIconCheck as s } from "@scalar/icons";
+const d = {}, p = /* @__PURE__ */ c({
   ...d,
   __name: "ScalarCheckbox",
   props: {
     selected: { type: Boolean },
     type: { default: "checkbox" }
   },
-  setup(p) {
-    return (e, m) => (t(), c("div", {
+  setup(e) {
+    return (m, u) => (t(), o("div", {
       class: r(["flex size-4 items-center justify-center p-0.75", [
         e.selected ? "bg-c-accent text-b-1" : "text-transparent shadow-border",
         e.type === "checkbox" ? "rounded" : "rounded-full"
       ]])
     }, [
-      e.selected ? (t(), a(s(l), {
+      e.selected ? (t(), a(l(s), {
         key: 0,
         class: "size-3",
         weight: "bold"
@@ -23,5 +23,5 @@ const d = {}, i = /* @__PURE__ */ o({
   }
 });
 export {
-  i as default
+  p as default
 };

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue.js

@@ -1,29 +1,29 @@
-import { defineComponent as c, mergeModels as f, useModel as _, useId as i, createBlock as t, openBlock as u, unref as o, withCtx as m, createElementBlock as p, Fragment as v, renderList as V, createTextVNode as k, toDisplayString as x } from "vue";
-import g from "./ScalarCheckboxInput.vue.js";
-import h from "../ScalarForm/ScalarFormInputGroup.vue.js";
-const B = {}, S = /* @__PURE__ */ c({
-  ...B,
+import { defineComponent as s, mergeModels as c, useModel as f, useId as _, createBlock as o, openBlock as u, unref as m, withCtx as r, createElementBlock as i, Fragment as v, renderList as p, createTextVNode as V, toDisplayString as k } from "vue";
+import x from "./ScalarCheckboxInput.vue.js";
+import g from "../ScalarForm/ScalarFormInputGroup.vue.js";
+const h = {}, S = /* @__PURE__ */ s({
+  ...h,
   __name: "ScalarCheckboxGroup",
-  props: /* @__PURE__ */ f({
+  props: /* @__PURE__ */ c({
     options: { default: () => [] }
   }, {
     modelValue: { default: [] },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(r) {
-    const l = _(r, "modelValue"), d = i();
-    return (n, C) => (u(), t(o(h), null, {
-      default: m(() => [
-        (u(!0), p(v, null, V(n.options, (e) => (u(), t(g, {
+  setup(t) {
+    const l = f(t, "modelValue"), d = _();
+    return (B, C) => (u(), o(m(g), null, {
+      default: r(() => [
+        (u(!0), i(v, null, p(t.options, (e) => (u(), o(x, {
           key: e.value,
           modelValue: l.value?.some(({ value: a }) => a === e.value),
-          name: o(d),
+          name: m(d),
           value: e.value,
-          "onUpdate:modelValue": (a) => l.value = a ? [...l.value, e] : l.value.filter(({ value: s }) => s !== e.value)
+          "onUpdate:modelValue": (a) => l.value = a ? [...l.value, e] : l.value.filter(({ value: n }) => n !== e.value)
         }, {
-          default: m(() => [
-            k(x(e.label), 1)
+          default: r(() => [
+            V(k(e.label), 1)
           ]),
           _: 2
         }, 1032, ["modelValue", "name", "value", "onUpdate:modelValue"]))), 128))

package/dist/components/ScalarCheckboxInput/ScalarCheckboxInput.vue.js

@@ -1,23 +1,23 @@
-import { defineComponent as u, mergeModels as m, useModel as p, createBlock as c, openBlock as f, unref as o, mergeProps as s, withCtx as _, createVNode as y, createElementVNode as r, withDirectives as h, renderSlot as v, vModelDynamic as x } from "vue";
+import { defineComponent as c, mergeModels as u, useModel as m, createBlock as p, openBlock as f, unref as o, mergeProps as s, withCtx as _, createVNode as y, createElementVNode as r, withDirectives as h, renderSlot as x, vModelDynamic as v } from "vue";
 import { useBindCx as V } from "@scalar/use-hooks/useBindCx";
 import b from "./ScalarCheckbox.vue.js";
 import g from "../ScalarForm/ScalarFormInput.vue.js";
-const k = { class: "flex-1 text-left min-w-0 truncate" }, C = ["type"], B = {}, D = /* @__PURE__ */ u({
+const k = { class: "flex-1 text-left min-w-0 truncate" }, C = ["type"], B = {}, D = /* @__PURE__ */ c({
   ...B,
   inheritAttrs: !1,
   __name: "ScalarCheckboxInput",
-  props: /* @__PURE__ */ m({
+  props: /* @__PURE__ */ u({
     type: { default: "checkbox" }
   }, {
     modelValue: { type: Boolean },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = p(n, "modelValue"), { stylingAttrsCx: a, otherAttrs: i } = V();
-    return (t, l) => (f(), c(o(g), s(
+  setup(t) {
+    const e = m(t, "modelValue"), { stylingAttrsCx: n, otherAttrs: a } = V();
+    return (i, l) => (f(), p(o(g), s(
       { is: "label" },
-      o(a)("cursor-pointer gap-2 hover:bg-b-2", { "text-c-1": e.value })
+      o(n)("cursor-pointer gap-2 hover:bg-b-2", { "text-c-1": e.value })
     ), {
       default: _(() => [
         y(b, {
@@ -26,14 +26,14 @@ const k = { class: "flex-1 text-left min-w-0 truncate" }, C = ["type"], B = {},
           type: t.type
         }, null, 8, ["selected", "type"]),
         r("div", k, [
-          v(t.$slots, "default")
+          x(i.$slots, "default")
         ]),
         h(r("input", s({
           "onUpdate:modelValue": l[0] || (l[0] = (d) => e.value = d),
           class: "sr-only",
           type: t.type
-        }, o(i)), null, 16, C), [
-          [x, e.value]
+        }, o(a)), null, 16, C), [
+          [v, e.value]
         ])
       ]),
       _: 3

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as s, mergeModels as c, useModel as i, useId as _, createBlock as o, openBlock as l, unref as t, withCtx as u, createElementBlock as f, Fragment as p, renderList as v, createTextVNode as V, toDisplayString as k } from "vue";
-import x from "./ScalarCheckboxInput.vue.js";
-import g from "../ScalarForm/ScalarFormInputGroup.vue.js";
-const h = {}, b = /* @__PURE__ */ s({
-  ...h,
+import { defineComponent as n, mergeModels as c, useModel as s, useId as i, createBlock as t, openBlock as l, unref as u, withCtx as d, createElementBlock as f, Fragment as _, renderList as p, createTextVNode as v, toDisplayString as V } from "vue";
+import k from "./ScalarCheckboxInput.vue.js";
+import x from "../ScalarForm/ScalarFormInputGroup.vue.js";
+const g = {}, b = /* @__PURE__ */ n({
+  ...g,
   __name: "ScalarCheckboxRadioGroup",
   props: /* @__PURE__ */ c({
     options: { default: () => [] }
@@ -11,20 +11,20 @@ const h = {}, b = /* @__PURE__ */ s({
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(r) {
-    const a = i(r, "modelValue"), d = _();
-    return (m, y) => (l(), o(t(g), null, {
-      default: u(() => [
-        (l(!0), f(p, null, v(m.options, (e) => (l(), o(x, {
+  setup(a) {
+    const o = s(a, "modelValue"), m = i();
+    return (h, y) => (l(), t(u(x), null, {
+      default: d(() => [
+        (l(!0), f(_, null, p(a.options, (e) => (l(), t(k, {
           key: e.value,
-          modelValue: a.value?.value === e.value,
-          name: t(d),
+          modelValue: o.value?.value === e.value,
+          name: u(m),
           type: "radio",
           value: e.value,
-          "onUpdate:modelValue": (n) => a.value = n ? e : void 0
+          "onUpdate:modelValue": (r) => o.value = r ? e : void 0
         }, {
-          default: u(() => [
-            V(k(e.label), 1)
+          default: d(() => [
+            v(V(e.label), 1)
           ]),
           _: 2
         }, 1032, ["modelValue", "name", "value", "onUpdate:modelValue"]))), 128))

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as s, useId as u, computed as n, createElementBlock as d, openBlock as r, createBlock as m, createCommentVNode as p, createElementVNode as f, unref as o } from "vue";
+import { defineComponent as s, useId as u, computed as n, createElementBlock as d, openBlock as a, createBlock as m, createCommentVNode as p, createElementVNode as f, unref as o } from "vue";
 import { syntaxHighlight as h, standardLanguages as C } from "@scalar/code-highlight";
 import { prettyPrintJson as g } from "@scalar/oas-utils/helpers";
 import y from "./ScalarCodeBlockCopy.vue.js";
@@ -18,14 +18,14 @@ const k = {
   setup(e) {
     const l = u(), t = n(
       () => e.prettyPrintedContent || g(e.content ?? "")
-    ), c = n(() => h(t.value, {
+    ), r = n(() => h(t.value, {
       lang: e.lang.trim(),
       languages: C,
       lineNumbers: e.lineNumbers,
       maskCredentials: e.hideCredentials
-    }).slice(5, -6)), i = n(() => t.value !== null && t.value !== "null" && t.value !== "404 Not Found");
-    return (a, b) => (r(), d("div", k, [
-      a.copy && i.value ? (r(), m(o(y), {
+    }).slice(5, -6)), c = n(() => t.value !== null && t.value !== "null" && t.value !== "404 Not Found");
+    return (i, b) => (a(), d("div", k, [
+      e.copy && c.value ? (a(), m(o(y), {
         key: 0,
         content: t.value,
         controls: o(l)
@@ -33,7 +33,7 @@ const k = {
       f("pre", {
         id: o(l),
         class: "scalar-codeblock-pre",
-        innerHTML: c.value
+        innerHTML: r.value
       }, null, 8, v)
     ]));
   }

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue2.js

@@ -1,28 +1,28 @@
-import { defineComponent as f, ref as d, createElementBlock as n, openBlock as l, normalizeClass as s, unref as o, createVNode as a, createCommentVNode as m, withCtx as y } from "vue";
+import { defineComponent as p, ref as d, createElementBlock as n, openBlock as l, normalizeClass as c, unref as t, createVNode as s, createCommentVNode as m, withCtx as y } from "vue";
 import { ScalarIconCopy as C, ScalarIconCheck as h } from "@scalar/icons";
 import { cva as v, cx as i } from "@scalar/use-hooks/useBindCx";
 import { useClipboard as b } from "@scalar/use-hooks/useClipboard";
 import k from "../ScalarButton/ScalarButton.vue.js";
-const g = {
+const x = {
   key: 0,
   class: "sr-only",
   role: "alert"
-}, N = /* @__PURE__ */ f({
+}, T = /* @__PURE__ */ p({
   __name: "ScalarCodeBlockCopy",
   props: {
     content: {},
     controls: {},
     class: {}
   },
-  setup(t) {
+  setup(o) {
     const { copyToClipboard: r } = b(), e = d(!1), u = async () => {
       if (e.value)
         return;
-      const c = typeof t.content == "string" ? t.content : JSON.stringify(t.content, null, 2);
-      await r(c), e.value = !0, setTimeout(() => {
+      const a = typeof o.content == "string" ? o.content : JSON.stringify(o.content, null, 2);
+      await r(a), e.value = !0, setTimeout(() => {
         e.value = !1;
       }, 1200);
-    }, p = v({
+    }, f = v({
       base: "absolute top-0 right-0 h-8 w-8 p-0 flex items-center justify-center brightness-lifted bg-inherit rounded focus-visible:opacity-100 -outline-offset-1",
       variants: {
         showCopied: {
@@ -31,36 +31,36 @@ const g = {
         }
       }
     });
-    return (c, x) => (l(), n("div", {
-      class: s(
-        o(i)(
+    return (a, g) => (l(), n("div", {
+      class: c(
+        t(i)(
           "scalar-code-copy opacity-0 group-hover/code-block:opacity-100 sticky flex inset-0 justify-end items-start bg-inherit",
-          t.class
+          o.class
         )
       )
     }, [
-      a(o(k), {
-        "aria-controls": c.controls,
+      s(t(k), {
+        "aria-controls": o.controls,
         "aria-label": "Copy",
-        class: s(o(i)(o(p)({ showCopied: e.value }))),
+        class: c(t(i)(t(f)({ showCopied: e.value }))),
         type: "button",
         variant: "ghost",
         onClick: u
       }, {
         default: y(() => [
-          a(o(C), {
-            class: s(["copy-icon size-4", { copied: e.value }])
+          s(t(C), {
+            class: c(["copy-icon size-4", { copied: e.value }])
           }, null, 8, ["class"]),
-          a(o(h), {
-            class: s(["check-icon size-4", { visible: e.value }])
+          s(t(h), {
+            class: c(["check-icon size-4", { visible: e.value }])
           }, null, 8, ["class"])
         ]),
         _: 1
       }, 8, ["aria-controls", "class"]),
-      e.value ? (l(), n("div", g, " Copied ")) : m("", !0)
+      e.value ? (l(), n("div", x, " Copied ")) : m("", !0)
     ], 2));
   }
 });
 export {
-  N as default
+  T as default
 };

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent as u, computed as c, createBlock as r, openBlock as t, unref as o, isRef as s } from "vue";
-import { useColorMode as p } from "@scalar/use-hooks/useColorMode";
-import f from "./ScalarColorModeToggleButton.vue.js";
+import { useColorMode as f } from "@scalar/use-hooks/useColorMode";
+import p from "./ScalarColorModeToggleButton.vue.js";
 import _ from "./ScalarColorModeToggleIcon.vue.js";
 const k = {}, S = /* @__PURE__ */ u({
   ...k,
@@ -8,11 +8,11 @@ const k = {}, S = /* @__PURE__ */ u({
   props: {
     variant: { default: "switch" }
   },
-  setup(g) {
-    const { isDarkMode: e, toggleColorMode: n, darkLightMode: i } = p(), l = c(
+  setup(n) {
+    const { isDarkMode: e, toggleColorMode: i, darkLightMode: d } = f(), l = c(
       () => e.value ? "Set light mode" : "Set dark mode"
     );
-    return (d, a) => d.variant === "switch" ? (t(), r(f, {
+    return (g, a) => n.variant === "switch" ? (t(), r(p, {
       key: 0,
       modelValue: o(e),
       "onUpdate:modelValue": a[0] || (a[0] = (m) => s(e) ? e.value = m : null),
@@ -20,8 +20,8 @@ const k = {}, S = /* @__PURE__ */ u({
     }, null, 8, ["modelValue", "aria-label"])) : (t(), r(_, {
       key: 1,
       "aria-label": l.value,
-      mode: o(i),
-      onClick: o(n)
+      mode: o(d),
+      onClick: o(i)
     }, null, 8, ["aria-label", "mode", "onClick"]));
   }
 });

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue2.js

@@ -1,23 +1,23 @@
-import { defineComponent as a, computed as r, createBlock as i, openBlock as c, resolveDynamicComponent as u, mergeProps as m, unref as p, withCtx as g, createElementVNode as e } from "vue";
+import { defineComponent as a, computed as s, createBlock as c, openBlock as i, resolveDynamicComponent as r, mergeProps as u, unref as m, withCtx as g, createElementVNode as e } from "vue";
 import { useBindCx as d } from "@scalar/use-hooks/useBindCx";
-const f = {}, _ = /* @__PURE__ */ a({
-  ...f,
+const p = {}, b = /* @__PURE__ */ a({
+  ...p,
   inheritAttrs: !1,
   __name: "ScalarColorModeToggleIcon",
   props: {
     is: { default: "button" },
     mode: { default: "light" }
   },
-  setup(l) {
-    const { cx: n } = d(), s = r(
-      () => l.mode === "dark" ? "Set light mode" : "Set dark mode"
+  setup(t) {
+    const { cx: l } = d(), n = s(
+      () => t.mode === "dark" ? "Set light mode" : "Set dark mode"
     );
-    return (o, t) => (c(), i(u(o.is), m({
-      "aria-label": s.value,
-      class: `toggle-icon-${o.mode}`,
-      type: o.is === "button" ? "button" : void 0
-    }, p(n)("size-3 flex items-center justify-center text-c-1")), {
-      default: g(() => [...t[0] || (t[0] = [
+    return (f, o) => (i(), c(r(t.is), u({
+      "aria-label": n.value,
+      class: `toggle-icon-${t.mode}`,
+      type: t.is === "button" ? "button" : void 0
+    }, m(l)("size-3 flex items-center justify-center text-c-1")), {
+      default: g(() => [...o[0] || (o[0] = [
         e("span", { class: "toggle-icon-sun-ray" }, null, -1),
         e("span", { class: "toggle-icon-sun-ray" }, null, -1),
         e("span", { class: "toggle-icon-sun-ray" }, null, -1),
@@ -31,5 +31,5 @@ const f = {}, _ = /* @__PURE__ */ a({
   }
 });
 export {
-  _ as default
+  b as default
 };

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

@@ -1,4 +1,4 @@
-import { defineComponent as f, mergeModels as s, useModel as c, createBlock as g, openBlock as $, withCtx as t, createVNode as v, createSlots as V, renderSlot as l, normalizeProps as r, guardReactiveProps as n } from "vue";
+import { defineComponent as f, mergeModels as s, useModel as c, createBlock as g, openBlock as $, withCtx as l, createVNode as v, createSlots as V, renderSlot as a, normalizeProps as n, guardReactiveProps as m } from "vue";
 import h from "./ScalarComboboxOptions.vue.js";
 import y from "./ScalarComboboxPopover.vue.js";
 const B = /* @__PURE__ */ f({
@@ -17,9 +17,9 @@ const B = /* @__PURE__ */ f({
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ s(["add"], ["update:modelValue"]),
-  setup(m, { emit: i }) {
-    const u = i, a = c(m, "modelValue");
-    return (e, b) => ($(), g(y, {
+  setup(e, { emit: p }) {
+    const u = p, d = c(e, "modelValue");
+    return (o, b) => ($(), g(y, {
       middleware: e.middleware,
       offset: e.offset,
       placement: e.placement ?? "bottom-start",
@@ -27,36 +27,36 @@ const B = /* @__PURE__ */ f({
       target: e.target,
       teleport: e.teleport
     }, {
-      default: t(({ open: d }) => [
-        l(e.$slots, "default", { open: d })
+      default: l(({ open: r }) => [
+        a(o.$slots, "default", { open: r })
       ]),
-      popover: t(({ open: d, close: p }) => [
+      popover: l(({ open: r, close: i }) => [
         v(h, {
-          modelValue: a.value ? [a.value] : [],
-          open: d,
+          modelValue: d.value ? [d.value] : [],
+          open: r,
           options: e.options,
           placeholder: e.placeholder,
-          onAdd: () => (p(), u("add")),
-          "onUpdate:modelValue": (o) => (p(), a.value = o[0])
+          onAdd: () => (i(), u("add")),
+          "onUpdate:modelValue": (t) => (i(), d.value = t[0])
         }, V({ _: 2 }, [
-          e.$slots.option ? {
+          o.$slots.option ? {
             name: "option",
-            fn: t((o) => [
-              l(e.$slots, "option", r(n(o)))
+            fn: l((t) => [
+              a(o.$slots, "option", n(m(t)))
             ]),
             key: "0"
           } : void 0,
-          e.$slots.group ? {
+          o.$slots.group ? {
             name: "group",
-            fn: t((o) => [
-              l(e.$slots, "group", r(n(o)))
+            fn: l((t) => [
+              a(o.$slots, "group", n(m(t)))
             ]),
             key: "1"
           } : void 0,
-          e.$slots.add ? {
+          o.$slots.add ? {
             name: "add",
-            fn: t((o) => [
-              l(e.$slots, "add", r(n(o)))
+            fn: l((t) => [
+              a(o.$slots, "add", n(m(t)))
             ]),
             key: "2"
           } : void 0

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