@scalar/components 0.12.76 → 0.13.1

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/ScalarIcon.vue"],"names":[],"mappings":"AAuEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAIvC,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAoB,MAAM,SAAS,CAAA;AAIhE;;GAEG;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA;AAElD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAGF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgBb,CAAA;;AAqFF,wBAOG"}
+{"version":3,"file":"ScalarIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/ScalarIcon.vue"],"names":[],"mappings":"AA6EA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAKvC,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAoB,MAAM,SAAS,CAAA;AAIhE;;GAEG;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA;AAElD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAMF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgBb,CAAA;;AAyFF,wBAMG"}

package/dist/components/ScalarIcon/ScalarIcon.vue.js

@@ -1,7 +1,7 @@
 import o from "./ScalarIcon.vue2.js";
 /* empty css                */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-bcfed797"]]);
+const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f4f53d32"]]);
 export {
-  f as default
+  c as default
 };

package/dist/components/ScalarIcon/ScalarIcon.vue2.js

@@ -1,7 +1,9 @@
-import { defineComponent as c, useCssVars as u, computed as s, openBlock as p, createBlock as m, resolveDynamicComponent as f, mergeProps as z, unref as i } from "vue";
-import { cva as d, cx as g } from "../../cva.js";
-import { getIcon as v, getLogo as x } from "./utils/index.js";
-const C = /* @__PURE__ */ c({
+import { defineComponent as u, useCssVars as p, computed as s, openBlock as m, createBlock as f, resolveDynamicComponent as z, normalizeProps as d, guardReactiveProps as g, unref as i } from "vue";
+import { cva as v } from "../../cva.js";
+import { useBindCx as x } from "../../hooks/useBindCx.js";
+import { getIcon as _, getLogo as b } from "./utils/index.js";
+const y = /* @__PURE__ */ u({
+  inheritAttrs: !1,
   __name: "ScalarIcon",
   props: {
     icon: {},
@@ -11,10 +13,10 @@ const C = /* @__PURE__ */ c({
     label: {}
   },
   setup(r) {
-    u((o) => ({
-      "1fd08b42": n.value
+    p((o) => ({
+      ce5c5c8a: a.value
     }));
-    const e = r, l = d({
+    const e = r, { cx: t } = x(), n = v({
       variants: {
         size: {
           xs: "size-3",
@@ -30,20 +32,21 @@ const C = /* @__PURE__ */ c({
       defaultVariants: {
         size: "full"
       }
-    }), n = s(() => e.thickness ?? "2"), t = s(
+    }), a = s(() => e.thickness ?? "2"), l = s(
       () => e.label ? { ariaLabel: e.label } : {
         ariaHidden: !0,
         role: "presentation"
       }
-    ), a = s(() => {
-      if (e.icon) return v(e.icon);
-      if (e.logo) return x(e.logo);
+    ), c = s(() => {
+      if (e.icon) return _(e.icon);
+      if (e.logo) return b(e.logo);
     });
-    return (o, b) => (p(), m(f(a.value), z({
-      class: i(g)("scalar-icon", i(l)({ size: o.size }))
-    }, t.value), null, 16, ["class"]));
+    return (o, k) => (m(), f(z(c.value), d(g({
+      ...i(t)("scalar-icon", i(n)({ size: o.size })),
+      ...l.value
+    })), null, 16));
   }
 });
 export {
-  C as default
+  y as default
 };

package/dist/components/ScalarIcon/icons/Add.svg.js

@@ -1,16 +1,16 @@
 import { openBlock as o, createElementBlock as n, createElementVNode as r } from "vue";
 const t = {
   xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
   viewBox: "0 0 24 24"
 };
 function l(d, e) {
   return o(), n("svg", t, e[0] || (e[0] = [
     r("path", {
-      fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "M2 12h20M12 2v20"
+      d: "M5 11.988h14M12.006 5v14"
     }, null, -1)
   ]));
 }

package/dist/components/ScalarIcon/icons/ChevronDown.svg.js

@@ -10,7 +10,7 @@ function l(s, e) {
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "m4.5 8.25 7.5 7.5 7.5-7.5"
+      d: "m18 10-6 6-6-6"
     }, null, -1)
   ]));
 }

package/dist/components/ScalarIcon/icons/ChevronRight.svg.js

@@ -10,7 +10,7 @@ function l(s, e) {
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "m8.25 19.5 7.5-7.5-7.5-7.5"
+      d: "m9 18 6-6-6-6"
     }, null, -1)
   ]));
 }

package/dist/components/ScalarIcon/icons/ChevronUp.svg.js

@@ -10,7 +10,7 @@ function l(s, e) {
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "M19.5 15.75 12 8.25l-7.5 7.5"
+      d: "m18 15-6-6-6 6"
     }, null, -1)
   ]));
 }

package/dist/components/ScalarIcon/icons/Hide.svg.js

@@ -1,16 +1,17 @@
-import { openBlock as n, createElementBlock as t, createElementVNode as o } from "vue";
-const r = {
+import { openBlock as o, createElementBlock as n, createElementVNode as r } from "vue";
+const t = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
-  stroke: "currentColor",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
   viewBox: "0 0 24 24"
 };
-function l(a, e) {
-  return n(), t("svg", r, e[0] || (e[0] = [
-    o("path", { d: "M2.78 21 21.53 3M9 19.05a9.9 9.9 0 0 0 3 .45c4.1.07 8.26-2.81 10.82-5.64a1.65 1.65 0 0 0 0-2.22 20 20 0 0 0-3.07-2.76m-2.66-1.61A11.3 11.3 0 0 0 12 6c-4-.07-8.2 2.75-10.82 5.64a1.65 1.65 0 0 0 0 2.22 20 20 0 0 0 4.93 4M9 15.07a3.85 3.85 0 0 1 5.5-5.28" }, null, -1),
-    o("path", { d: "M15.75 12.75A3.75 3.75 0 0 1 12 16.5" }, null, -1)
+function l(s, e) {
+  return o(), n("svg", t, e[0] || (e[0] = [
+    r("path", {
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M9.88 14.12a3 3 0 1 1 4.24-4.24m-3.39 9.04q.632.079 1.27.08c7 0 10-7 10-7a13.2 13.2 0 0 0-1.67-2.68M6.61 17.39A13.5 13.5 0 0 1 2 12s3-7 10-7a9.74 9.74 0 0 1 5.39 1.61M2 22 22 2"
+    }, null, -1)
   ]));
 }
 const d = { render: l };

package/dist/components/ScalarIcon/icons/Show.svg.js

@@ -1,28 +1,27 @@
-import { openBlock as n, createElementBlock as r, createElementVNode as o } from "vue";
+import { openBlock as r, createElementBlock as n, createElementVNode as o } from "vue";
 const t = {
   xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
   viewBox: "0 0 24 24"
 };
 function l(s, e) {
-  return n(), r("svg", t, e[0] || (e[0] = [
+  return r(), n("svg", t, e[0] || (e[0] = [
     o("path", {
-      fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "M12 5.251C7.969 5.183 3.8 8 1.179 10.885a1.663 1.663 0 0 0 0 2.226C3.743 15.935 7.9 18.817 12 18.748c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 0 0 0-2.226C20.2 8 16.031 5.183 12 5.251"
+      d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7"
     }, null, -1),
     o("path", {
-      fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "M15.75 12A3.75 3.75 0 1 1 12 8.249 3.75 3.75 0 0 1 15.75 12"
+      d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6"
     }, null, -1)
   ]));
 }
-const c = { render: l };
+const i = { render: l };
 export {
-  c as default,
+  i as default,
   l as render
 };

package/dist/components/ScalarIconButton/ScalarIconButton.stories.d.ts

@@ -1,23 +1,26 @@
 import type { StoryObj } from '@storybook/vue3';
+/**
+ * A helper wrapper around the icon only ScalarButton
+ */
 declare const meta: {
     component: import("vue").DefineComponent<{
         label: string;
         icon: import("../ScalarIcon").Icon;
         disabled?: boolean;
         variant?: string | undefined;
-        size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
+        size?: "sm" | "xs" | "md" | "full" | "xxs" | undefined;
         thickness?: string;
     }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
         label: string;
         icon: import("../ScalarIcon").Icon;
         disabled?: boolean;
         variant?: string | undefined;
-        size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
+        size?: "sm" | "xs" | "md" | "full" | "xxs" | undefined;
         thickness?: string;
     }> & Readonly<{}>, {
-        size: "xs" | "sm" | "md" | "full" | "xxs";
+        size: "sm" | "xs" | "md" | "full" | "xxs";
         variant: string;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
     tags: string[];
     argTypes: {
         icon: {
@@ -35,12 +38,11 @@ declare const meta: {
             control: "select";
             options: string[];
         };
-    };
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
+        disabled: {
+            control: "boolean";
+        };
+        class: {
+            control: "text";
         };
     };
 };
@@ -48,4 +50,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const Disabled: Story;
+export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarIconButton.stories.d.ts.map

package/dist/components/ScalarIconButton/ScalarIconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarIconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAA"}
+{"version":3,"file":"ScalarIconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD;;GAEG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA"}

package/dist/components/ScalarIconButton/ScalarIconButton.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ScalarIconButton.test.d.ts.map

package/dist/components/ScalarIconButton/ScalarIconButton.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarIconButton.test.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.test.ts"],"names":[],"mappings":""}

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

@@ -10,7 +10,7 @@ type __VLS_Props = {
     thickness?: string;
 };
 declare const variants: (props?: ({
-    size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
+    size?: "sm" | "xs" | "md" | "full" | "xxs" | undefined;
     disabled?: boolean | undefined;
     variant?: string | undefined;
 } & ({
@@ -69,8 +69,8 @@ declare const variants: (props?: ({
     } | null | undefined;
 })) | undefined) => string;
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: "xs" | "sm" | "md" | "full" | "xxs";
+    size: "sm" | "xs" | "md" | "full" | "xxs";
     variant: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=ScalarIconButton.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarIconButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAKvC,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,eAAe,CAAA;AAIrD,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AASJ,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAeZ,CAAA;;;;;AA4EF,wBAQG"}
+{"version":3,"file":"ScalarIconButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAKvC,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,eAAe,CAAA;AAIrD,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AAYJ,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAeZ,CACD;;;;;AAoED,wBAOG"}

package/dist/components/ScalarIconButton/ScalarIconButton.vue.js

@@ -1,8 +1,10 @@
-import { defineComponent as n, computed as r, useAttrs as i, openBlock as l, createElementBlock as c, mergeProps as d, unref as e, createVNode as u, createElementVNode as p, toDisplayString as m } from "vue";
-import { cva as b, cx as f } from "../../cva.js";
-import { styles as h } from "../ScalarButton/variants.js";
-import v from "../ScalarIcon/ScalarIcon.vue.js";
-const z = ["ariaDisabled"], k = { class: "sr-only" }, D = /* @__PURE__ */ n({
+import { defineComponent as t, openBlock as i, createElementBlock as n, mergeProps as r, unref as s, createVNode as l, createElementVNode as d, toDisplayString as c } from "vue";
+import { cva as p } from "../../cva.js";
+import { useBindCx as u } from "../../hooks/useBindCx.js";
+import { styles as m } from "../ScalarButton/variants.js";
+import f from "../ScalarIcon/ScalarIcon.vue.js";
+const b = ["ariaDisabled"], h = { class: "sr-only" }, w = /* @__PURE__ */ t({
+  inheritAttrs: !1,
   __name: "ScalarIconButton",
   props: {
     label: {},
@@ -12,8 +14,8 @@ const z = ["ariaDisabled"], k = { class: "sr-only" }, D = /* @__PURE__ */ n({
     size: { default: "md" },
     thickness: {}
   },
-  setup(y) {
-    const o = b({
+  setup(v) {
+    const { cx: o } = u(), a = p({
       base: "scalar-icon-button grid aspect-square cursor-pointer rounded",
       variants: {
         size: {
@@ -26,25 +28,21 @@ const z = ["ariaDisabled"], k = { class: "sr-only" }, D = /* @__PURE__ */ n({
         disabled: {
           true: "cursor-not-allowed shadow-none"
         },
-        variant: h
+        variant: m
       }
-    }), a = r(() => {
-      const { class: s, ...t } = i();
-      return { class: s || "", rest: t };
     });
-    return (s, t) => (l(), c("button", d(a.value.rest, {
-      ariaDisabled: s.disabled || void 0,
-      class: e(f)(e(o)({ size: s.size, variant: s.variant, disabled: s.disabled }), a.value.class),
+    return (e, z) => (i(), n("button", r({
+      ariaDisabled: e.disabled || void 0,
       type: "button"
-    }), [
-      u(e(v), {
-        icon: s.icon,
-        thickness: s.thickness
+    }, s(o)(s(a)({ size: e.size, variant: e.variant, disabled: e.disabled }))), [
+      l(s(f), {
+        icon: e.icon,
+        thickness: e.thickness
       }, null, 8, ["icon", "thickness"]),
-      p("span", k, m(s.label), 1)
-    ], 16, z));
+      d("span", h, c(e.label), 1)
+    ], 16, b));
   }
 });
 export {
-  D as default
+  w as default
 };

package/dist/components/ScalarListbox/ScalarListbox.stories.d.ts

@@ -2,56 +2,78 @@ import type { StoryObj } from '@storybook/vue3';
 import type { Option } from './types';
 declare const meta: {
     component: {
-        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
-            multiple?: boolean;
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<({
             options: Option[];
-            modelValue?: Option | Option[];
             id?: string;
             label?: string;
-        } & Omit<import("../ScalarFloating").FloatingOptions, "targetRef" | "middleware" | "offset">> & Readonly<{
+        } & {
+            multiple?: false;
+            modelValue?: Option;
+        } & import("../ScalarFloating").ScalarFloatingOptions) | ({
+            options: Option[];
+            id?: string;
+            label?: string;
+        } & {
+            multiple: true;
+            modelValue?: Option[];
+        } & import("../ScalarFloating").ScalarFloatingOptions)> & Readonly<{
             "onUpdate:modelValue"?: ((v: Option) => any) | undefined;
         }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
             "update:modelValue": (v: Option) => any;
-        }, import("vue").PublicProps, {
-            multiple: boolean;
-        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<{
-            multiple?: boolean;
+        }, {} & (Readonly<({
+            options: Option[];
+            id?: string;
+            label?: string;
+        } & {
+            multiple?: false;
+            modelValue?: Option;
+        } & import("../ScalarFloating").ScalarFloatingOptions) | ({
             options: Option[];
-            modelValue?: Option | Option[];
             id?: string;
             label?: string;
-        } & Omit<import("../ScalarFloating").FloatingOptions, "targetRef" | "middleware" | "offset">> & Readonly<{
+        } & {
+            multiple: true;
+            modelValue?: Option[];
+        } & import("../ScalarFloating").ScalarFloatingOptions)> & Readonly<{
             "onUpdate:modelValue"?: ((v: Option) => any) | undefined;
-        }>, {}, {}, {}, {}, {
-            multiple: boolean;
-        }>;
+        }>), {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & import("vue").ComponentOptionsBase<Readonly<{
-        multiple?: boolean;
+    } & import("vue").ComponentOptionsBase<Readonly<({
         options: Option[];
-        modelValue?: Option | Option[];
         id?: string;
         label?: string;
-    } & Omit<import("../ScalarFloating").FloatingOptions, "targetRef" | "middleware" | "offset">> & Readonly<{
+    } & {
+        multiple?: false;
+        modelValue?: Option;
+    } & import("../ScalarFloating").ScalarFloatingOptions) | ({
+        options: Option[];
+        id?: string;
+        label?: string;
+    } & {
+        multiple: true;
+        modelValue?: Option[];
+    } & import("../ScalarFloating").ScalarFloatingOptions)> & Readonly<{
         "onUpdate:modelValue"?: ((v: Option) => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
         "update:modelValue": (v: Option) => any;
-    }, string, {
-        multiple: boolean;
-    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {
-                open: any;
-            }): any;
+    }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            default(props: {
+                open: boolean;
+            }): import("vue").Slot;
+        }> & {
+            default(props: {
+                open: boolean;
+            }): import("vue").Slot;
         };
     });
     tags: string[];
@@ -63,9 +85,14 @@ declare const meta: {
             control: "select";
             options: import("@floating-ui/utils").Placement[];
         };
+        class: {
+            control: "text";
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
+export declare const Multiselect: Story;
+export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarListbox.stories.d.ts.map

package/dist/components/ScalarListbox/ScalarListbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAO4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAkClB,CAAA"}
+{"version":3,"file":"ScalarListbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQ4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAkClB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAkCzB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkC3B,CAAA"}

package/dist/components/ScalarListbox/ScalarListbox.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ScalarListbox.test.d.ts.map

package/dist/components/ScalarListbox/ScalarListbox.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarListbox.test.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.test.ts"],"names":[],"mappings":""}

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

@@ -1,35 +1,54 @@
-import { type FloatingOptions } from '../ScalarFloating';
+import type { Slot } from 'vue';
+import { type ScalarFloatingOptions } from '../ScalarFloating';
 import type { Option } from './types';
-type __VLS_Props = {
-    /**
-     * Allow selecting multiple values
-     *
-     * @default false
-     */
-    multiple?: boolean;
-    options: Option[];
-    modelValue?: Option | Option[];
-    id?: string;
-    label?: string;
-} & Omit<FloatingOptions, 'middleware' | 'offset' | 'targetRef'>;
+type SingleSelectListboxProps = {
+    multiple?: false;
+    modelValue?: Option;
+};
+type MultipleSelectListboxProps = {
+    multiple: true;
+    modelValue?: Option[];
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            open: any;
-        }): any;
+    slots: Readonly<{
+        /** The reference element for the listbox */
+        default(props: {
+            /** Whether or not the listbox is open */
+            open: boolean;
+        }): Slot;
+    }> & {
+        /** The reference element for the listbox */
+        default(props: {
+            /** Whether or not the listbox is open */
+            open: boolean;
+        }): Slot;
     };
     refs: {};
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_component: import("vue").DefineComponent<({
+    options: Option[];
+    id?: string;
+    label?: string;
+} & SingleSelectListboxProps & ScalarFloatingOptions) | ({
+    options: Option[];
+    id?: string;
+    label?: string;
+} & MultipleSelectListboxProps & ScalarFloatingOptions), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (v: Option) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<({
+    options: Option[];
+    id?: string;
+    label?: string;
+} & SingleSelectListboxProps & ScalarFloatingOptions) | ({
+    options: Option[];
+    id?: string;
+    label?: string;
+} & MultipleSelectListboxProps & ScalarFloatingOptions)> & Readonly<{
     "onUpdate:modelValue"?: ((v: Option) => any) | undefined;
-}>, {
-    multiple: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AA6IA,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,mBAAmB,CAAA;AAExE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,WAAW,GAAG;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,QAAQ,GAAG,WAAW,CAAC,CAAC;AAwCrE,iBAAS,cAAc;WA2KT,OAAO,IAA6B;;;;YARpB,GAAG;;;;EAahC;AAmBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;cAjPJ,OAAO;6EAyPtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAyGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG/B,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAE9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB,CAAA;AAkCD,iBAAS,cAAc;WAgIT,OAAO,IAA6B;;QAhJhD,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,IAAI;;QAJR,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,IAAI;;;;EAiJT;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aArLR,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;kFA0LhB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}