@scalar/components 0.13.16 → 0.13.18

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * Scalar floating backdrop component
+ *
+ * Provides an absolutely positioned backdrop for the floating element
+ * This is used internally by a number of the Scalar floating components
+ * (e.g. Dropdown, Popover, Listbox)
+ *
+ * You can use this component directly if you need to customize the backdrop
+ * for a floating component
+ *
+ * @example
+ * <ScalarDropdown>
+ *   <!-- Menu stuff -->
+ *   <template #backdrop>
+ *     <ScalarFloatingBackdrop />
+ *   </template>
+ * </ScalarDropdown>
+ */
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarFloatingBackdrop.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFloatingBackdrop.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"names":[],"mappings":"AAyCA;;;;;;;;;;;;;;;;;GAiBG;;qBAuC0B,GAAG;;AAtChC,wBAoEC;AAKD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,18 @@
+import { defineComponent as o, openBlock as r, createElementBlock as n, normalizeProps as s, guardReactiveProps as a, unref as l, renderSlot as i } from "vue";
+import { useBindCx as c } from "../../hooks/useBindCx.js";
+const d = {}, m = /* @__PURE__ */ o({
+  ...d,
+  inheritAttrs: !1,
+  __name: "ScalarFloatingBackdrop",
+  setup(p) {
+    const { cx: e } = c();
+    return (t, u) => (r(), n("div", s(a(
+      l(e)("absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted")
+    )), [
+      i(t.$slots, "default")
+    ], 16));
+  }
+});
+export {
+  m as default
+};

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarFloatingBackdrop.vue.js";
+export {
+  f as default
+};

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

@@ -1,3 +1,4 @@
 export { default as ScalarFloating } from './ScalarFloating.vue.js';
+export { default as ScalarFloatingBackdrop } from './ScalarFloatingBackdrop.vue.js';
 export type { FloatingOptions as ScalarFloatingOptions } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAEhE,YAAY,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AAEhF,YAAY,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,SAAS,CAAA"}

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

@@ -1,4 +1,4 @@
-import type { Middleware, Placement } from '@floating-ui/vue';
+import type { Middleware, OffsetOptions, Placement } from '@floating-ui/vue';
 /** The props for the ScalarFloating component */
 export type FloatingOptions = {
     /**
@@ -8,6 +8,13 @@ export type FloatingOptions = {
      * @see https://floating-ui.com/docs/computePosition#placement
      */
     placement?: Placement;
+    /**
+     * The offset of the floating element relative to its reference element.
+     * @default 5 (5px)
+     *
+     * @see https://floating-ui.com/docs/offset
+     */
+    offset?: OffsetOptions;
     /**
      * Whether or not track the reference element's width
      * If enabled it will set `width` slot prop of the floating slot

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAI7D,iDAAiD;AACjD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAC7B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,UAAU,EAAE,CAAA;IACzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC5B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAI5E,iDAAiD;AACjD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAC7B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,UAAU,EAAE,CAAA;IACzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC5B,CAAA"}

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

@@ -69,11 +69,11 @@ declare const meta: {
         $slots: Readonly<{
             default(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
         }> & {
             default(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
         };
     });
     tags: string[];

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

@@ -1,4 +1,3 @@
-import type { Slot } from 'vue';
 import { type ScalarFloatingOptions } from '../ScalarFloating';
 import type { Option } from './types';
 type SingleSelectListboxProps = {
@@ -16,13 +15,13 @@ declare function __VLS_template(): {
         default(props: {
             /** Whether or not the listbox is open */
             open: boolean;
-        }): Slot;
+        }): any;
     }> & {
         /** The reference element for the listbox */
         default(props: {
             /** Whether or not the listbox is open */
             open: boolean;
-        }): Slot;
+        }): any;
     };
     refs: {};
     rootEl: any;

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":"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"}
+{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAwGA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,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;WA6HT,OAAO,IAA6B;;QA7IhD,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;QAJP,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;;;EA8IR;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAnLR,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;;;kFAwLhB,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"}

package/dist/components/ScalarListbox/ScalarListbox.vue.js

@@ -1,9 +1,10 @@
-import { defineComponent as b, openBlock as o, createBlock as a, unref as t, withCtx as l, createTextVNode as c, toDisplayString as g, createCommentVNode as d, createVNode as s, createElementBlock as m, mergeProps as y, createElementVNode as u, Fragment as V, renderList as B, normalizeStyle as k, renderSlot as w } from "vue";
-import { Listbox as L, ListboxLabel as h, ListboxOptions as v, ListboxButton as z } from "@headlessui/vue";
-import { useBindCx as S } from "../../hooks/useBindCx.js";
-import x from "./ScalarListboxItem.vue.js";
+import { defineComponent as c, openBlock as o, createBlock as r, unref as t, withCtx as l, createTextVNode as b, toDisplayString as y, createCommentVNode as m, createVNode as i, mergeProps as u, createElementBlock as p, createElementVNode as V, Fragment as g, renderList as B, normalizeStyle as _, renderSlot as k } from "vue";
+import { Listbox as x, ListboxLabel as L, ListboxOptions as h, ListboxButton as $ } from "@headlessui/vue";
+import { useBindCx as v } from "../../hooks/useBindCx.js";
+import S from "./ScalarListboxItem.vue.js";
 import C from "../ScalarFloating/ScalarFloating.vue.js";
-const N = { class: "custom-scroll min-h-0 flex-1" }, O = /* @__PURE__ */ b({
+import N from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
+const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
   inheritAttrs: !1,
   __name: "ScalarListbox",
   props: {
@@ -13,78 +14,72 @@ const N = { class: "custom-scroll min-h-0 flex-1" }, O = /* @__PURE__ */ b({
     multiple: { type: Boolean },
     modelValue: {},
     placement: {},
+    offset: {},
     resize: { type: Boolean },
     target: {},
     middleware: {},
     teleport: { type: [Boolean, String] }
   },
   emits: ["update:modelValue"],
-  setup($) {
-    const { cx: p } = S();
-    return (e, r) => (o(), a(t(L), {
+  setup(z) {
+    const { cx: d } = v();
+    return (e, s) => (o(), r(t(x), {
       modelValue: e.modelValue,
       multiple: e.multiple,
-      "onUpdate:modelValue": r[0] || (r[0] = (i) => e.$emit("update:modelValue", i))
+      "onUpdate:modelValue": s[0] || (s[0] = (a) => e.$emit("update:modelValue", a))
     }, {
-      default: l(({ open: i }) => [
-        e.label ? (o(), a(t(h), {
+      default: l(({ open: a }) => [
+        e.label ? (o(), r(t(L), {
           key: 0,
           class: "sr-only"
         }, {
           default: l(() => [
-            c(g(e.label), 1)
+            b(y(e.label), 1)
           ]),
           _: 1
-        })) : d("", !0),
-        s(t(C), {
-          middleware: e.middleware,
-          placement: e.placement ?? "bottom-start",
-          resize: e.resize,
-          target: e.target,
-          teleport: e.teleport
-        }, {
+        })) : m("", !0),
+        i(t(C), u(e.$props, {
+          placement: e.placement ?? "bottom-start"
+        }), {
           floating: l(({ width: f }) => [
-            i ? (o(), m("div", y(
-              {
-                key: 0,
-                style: { width: f }
-              },
-              t(p)("relative flex max-h-[inherit] w-40 rounded border text-sm")
-            ), [
-              u("div", N, [
-                s(t(v), { class: "flex flex-col p-0.75" }, {
+            a ? (o(), p("div", u({
+              key: 0,
+              style: { width: f }
+            }, t(d)("relative flex max-h-[inherit] w-40 rounded text-sm")), [
+              V("div", w, [
+                i(t(h), { class: "flex flex-col gap-0.75 p-0.75" }, {
                   default: l(() => [
-                    (o(!0), m(V, null, B(e.options, (n) => (o(), a(x, {
+                    (o(!0), p(g, null, B(e.options, (n) => (o(), r(S, {
                       key: n.id,
                       option: n,
-                      style: k(e.multiple ? "checkbox" : "radio")
+                      style: _(e.multiple ? "checkbox" : "radio")
                     }, null, 8, ["option", "style"]))), 128))
                   ]),
                   _: 1
                 })
               ]),
-              r[1] || (r[1] = u("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-md brightness-lifted" }, null, -1))
-            ], 16)) : d("", !0)
+              i(t(N))
+            ], 16)) : m("", !0)
           ]),
           default: l(() => [
-            s(t(z), {
+            i(t($), {
               id: e.id,
               as: "template",
               class: "justify-start focus:outline-none focus-visible:ring-1 focus-visible:ring-c-accent"
             }, {
               default: l(() => [
-                w(e.$slots, "default", { open: i })
+                k(e.$slots, "default", { open: a })
               ]),
               _: 2
             }, 1032, ["id"])
           ]),
           _: 2
-        }, 1032, ["middleware", "placement", "resize", "target", "teleport"])
+        }, 1040, ["placement"])
       ]),
       _: 3
     }, 8, ["modelValue", "multiple"]));
   }
 });
 export {
-  O as default
+  P as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListboxCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxCheckbox.vue"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAC;;AAyEF,wBAOG"}
+{"version":3,"file":"ScalarListboxCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxCheckbox.vue"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAC;;AAyEF,wBAOG"}

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue.js

@@ -1,26 +1,27 @@
-import { defineComponent as t, openBlock as o, createElementBlock as r, normalizeClass as c, createVNode as s, unref as n } from "vue";
-import a from "../ScalarIcon/ScalarIcon.vue.js";
-const m = /* @__PURE__ */ t({
+import { defineComponent as o, openBlock as t, createElementBlock as r, normalizeClass as c, createBlock as s, unref as n, createCommentVNode as a } from "vue";
+import l from "../ScalarIcon/ScalarIcon.vue.js";
+const u = /* @__PURE__ */ o({
   __name: "ScalarListboxCheckbox",
   props: {
     selected: { type: Boolean },
     style: {}
   },
-  setup(l) {
-    return (e, p) => (o(), r("div", {
+  setup(p) {
+    return (e, i) => (t(), r("div", {
       class: c(["flex size-4 items-center justify-center p-0.75", [
-        e.selected ? "bg-c-accent text-b-1" : "text-transparent group-hover/item:shadow-border",
+        e.selected ? "bg-c-accent text-b-1" : "text-transparent shadow-border",
         e.style === "checkbox" ? "rounded" : "rounded-full"
       ]])
     }, [
-      s(n(a), {
-        class: "relative top-[0.5px] size-2.5",
+      e.selected ? (t(), s(n(l), {
+        key: 0,
+        class: "relative top-[0.5px] size-3",
         icon: "Checkmark",
-        thickness: "2.5"
-      })
+        thickness: "3"
+      })) : a("", !0)
     ], 2));
   }
 });
 export {
-  m as default
+  u as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListboxItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxItem.vue"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIlD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAC;;AAoGF,wBAOG"}
+{"version":3,"file":"ScalarListboxItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxItem.vue"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIlD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAC;;AAmGF,wBAOG"}

package/dist/components/ScalarListbox/ScalarListboxItem.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as l, openBlock as s, createBlock as p, unref as t, withCtx as c, createElementVNode as a, normalizeClass as n, createVNode as m, normalizeStyle as d, toDisplayString as b } from "vue";
-import { ListboxOption as u } from "@headlessui/vue";
-import { cva as f, cx as y } from "../../cva.js";
-import v from "./ScalarListboxCheckbox.vue.js";
+import { defineComponent as l, openBlock as s, createBlock as p, unref as t, withCtx as c, createElementVNode as a, normalizeClass as n, createVNode as m, normalizeStyle as d, toDisplayString as u } from "vue";
+import { ListboxOption as b } from "@headlessui/vue";
+import { cva as f, cx as v } from "../../cva.js";
+import y from "./ScalarListboxCheckbox.vue.js";
 const C = /* @__PURE__ */ l({
   __name: "ScalarListboxItem",
   props: {
@@ -14,7 +14,6 @@ const C = /* @__PURE__ */ l({
         // Layout
         "group/item",
         "flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5 text-left",
-        "first-of-type:mt-0.75 last-of-type:mb-0.75",
         // Text / background style
         "truncate bg-transparent text-c-1",
         // Interaction
@@ -26,22 +25,22 @@ const C = /* @__PURE__ */ l({
         disabled: { true: "pointer-events-none opacity-50" }
       }
     });
-    return (e, x) => (s(), p(t(u), {
+    return (e, x) => (s(), p(t(b), {
       as: "template",
       disabled: e.option.disabled,
       value: e.option
     }, {
       default: c(({ active: i, selected: o }) => [
         a("li", {
-          class: n(t(y)(t(r)({ active: i, selected: o, disabled: e.option.disabled })))
+          class: n(t(v)(t(r)({ active: i, selected: o, disabled: e.option.disabled })))
         }, [
-          m(v, {
+          m(y, {
             selected: o,
             style: d(e.style)
           }, null, 8, ["selected", "style"]),
           a("span", {
             class: n(["inline-block min-w-0 flex-1 truncate", e.option.color ? e.option.color : "text-c-1"])
-          }, b(e.option.label), 3)
+          }, u(e.option.label), 3)
         ], 2)
       ]),
       _: 1

package/dist/components/ScalarMenu/ScalarMenuResources.vue.js

@@ -1,16 +1,16 @@
-import { defineComponent as n, openBlock as l, createBlock as i, withCtx as o, createTextVNode as e, createVNode as r } from "vue";
+import { defineComponent as n, openBlock as l, createBlock as s, withCtx as o, createTextVNode as e, createVNode as r } from "vue";
 import a from "./ScalarMenuLink.vue.js";
-import s from "./ScalarMenuSection.vue.js";
+import i from "./ScalarMenuSection.vue.js";
 const d = /* @__PURE__ */ n({
   __name: "ScalarMenuResources",
   setup(m) {
-    return (c, t) => (l(), i(s, null, {
+    return (p, t) => (l(), s(i, null, {
       title: o(() => t[0] || (t[0] = [
         e("Resources")
       ])),
       default: o(() => [
         r(a, {
-          href: "mailto:marc@scalar.com",
+          href: "mailto:support@scalar.com",
           icon: "Email",
           target: "_blank"
         }, {

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

@@ -139,4 +139,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const CustomClasses: Story;
+export declare const CustomBackdrop: Story;
 //# sourceMappingURL=ScalarPopover.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarPopover.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA"}
+{"version":3,"file":"ScalarPopover.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"names":[],"mappings":"AA2CA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAiBpC,iBAAS,cAAc;WAoFT,OAAO,IAA6B;;;;EAKjD;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,sTAMnB,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"}
+{"version":3,"file":"ScalarPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"names":[],"mappings":"AAkDA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAiBpC,iBAAS,cAAc;WAqFT,OAAO,IAA6B;;;;EAKjD;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,sTAMnB,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"}

package/dist/components/ScalarPopover/ScalarPopover.vue.js

@@ -1,40 +1,44 @@
-import { defineComponent as f, openBlock as m, createBlock as u, unref as e, withCtx as t, createVNode as r, normalizeProps as c, guardReactiveProps as _, mergeProps as g, renderSlot as s, createElementVNode as v } from "vue";
-import { Popover as P, PopoverPanel as B, PopoverButton as b } from "@headlessui/vue";
-import { useBindCx as x } from "../../hooks/useBindCx.js";
-import y from "../ScalarFloating/ScalarFloating.vue.js";
-const S = /* @__PURE__ */ f({
+import { defineComponent as m, openBlock as i, createBlock as c, unref as e, withCtx as o, createVNode as r, normalizeProps as d, guardReactiveProps as u, mergeProps as _, renderSlot as l } from "vue";
+import { Popover as P, PopoverPanel as v, PopoverButton as B } from "@headlessui/vue";
+import { useBindCx as $ } from "../../hooks/useBindCx.js";
+import g from "../ScalarFloating/ScalarFloating.vue.js";
+import y from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
+const b = /* @__PURE__ */ m({
   inheritAttrs: !1,
   __name: "ScalarPopover",
   props: {
     placement: {},
+    offset: {},
     resize: { type: Boolean },
     target: {},
     middleware: {},
     teleport: { type: [Boolean, String] }
   },
-  setup($) {
-    const { cx: p } = x();
-    return (o, l) => (m(), u(e(P), { as: "template" }, {
-      default: t(({ open: a }) => [
-        r(e(y), c(_(o.$props)), {
-          floating: t(({ width: n, height: i }) => [
-            r(e(B), g({
-              style: { width: n, height: i }
+  setup(h) {
+    const { cx: p } = $();
+    return (t, k) => (i(), c(e(P), { as: "template" }, {
+      default: o(({ open: a }) => [
+        r(e(g), d(u(t.$props)), {
+          floating: o(({ width: s, height: f }) => [
+            r(e(v), _({
+              style: { width: s, height: f }
             }, e(p)("relative flex flex-col p-0.75")), {
-              default: t(({ close: d }) => [
-                s(o.$slots, "popover", {
-                  close: () => d(),
+              default: o(({ close: n }) => [
+                l(t.$slots, "popover", {
+                  close: () => n(),
                   open: a
                 }),
-                l[0] || (l[0] = v("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1))
+                l(t.$slots, "backdrop", { open: a }, () => [
+                  r(e(y))
+                ])
               ]),
               _: 2
             }, 1040, ["style"])
           ]),
-          default: t(() => [
-            r(e(b), { as: "template" }, {
-              default: t(() => [
-                s(o.$slots, "default", { open: a })
+          default: o(() => [
+            r(e(B), { as: "template" }, {
+              default: o(() => [
+                l(t.$slots, "default", { open: a })
               ]),
               _: 2
             }, 1024)
@@ -47,5 +51,5 @@ const S = /* @__PURE__ */ f({
   }
 });
 export {
-  S as default
+  b as default
 };

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

@@ -1,15 +1,19 @@
-import type { Slot } from 'vue';
 export type Slots = {
     default(props: {
         /** Whether or not the popover is open */
         open: boolean;
-    }): Slot;
+    }): any;
     /** The popover contents */
     popover(props: {
         /** Whether or not the popover is open */
         open: boolean;
         /** A callback to close the popover */
         close: () => void;
-    }): Slot;
+    }): any;
+    /** Overrides the popover backdrop */
+    backdrop?(props: {
+        /** Whether or not the popover is open */
+        open: boolean;
+    }): any;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ScalarPopover/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE/B,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,IAAI,CAAA;IACR,2BAA2B;IAC3B,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;QACb,sCAAsC;QACtC,KAAK,EAAE,MAAM,IAAI,CAAA;KAClB,GAAG,IAAI,CAAA;CACT,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,GAAG,CAAA;IACP,2BAA2B;IAC3B,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;QACb,sCAAsC;QACtC,KAAK,EAAE,MAAM,IAAI,CAAA;KAClB,GAAG,GAAG,CAAA;IACP,qCAAqC;IACrC,QAAQ,CAAC,CAAC,KAAK,EAAE;QACf,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,GAAG,CAAA;CACR,CAAA"}