@scalar/components 0.13.33 → 0.13.36

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarColorModeToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"names":[],"mappings":"AAyDA;;;;;;;;;;GAUG;;iBAiBU,OAAO;;;;iBAAP,OAAO;;;;AAhBpB,wBAoHC"}
+{"version":3,"file":"ScalarColorModeToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"names":[],"mappings":"AA2DA;;;;;;;;;;GAUG;;iBAiBU,OAAO;;;;iBAAP,OAAO;;;;AAhBpB,wBAoHC"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarColorModeToggleIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"names":[],"mappings":"AAmHA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAK9C;;;;;;;;;;GAUG;;IAID,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;;IAHvB,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;;AANzB,wBA6GC"}
+{"version":3,"file":"ScalarColorModeToggleIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"names":[],"mappings":"AAoHA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAM9C;;;;;;;;;;GAUG;;IAID,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;;IAHvB,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;;AANzB,wBA6GC"}

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

@@ -1,7 +1,7 @@
 import o from "./ScalarColorModeToggleIcon.vue2.js";
 /* empty css                               */
-import a from "../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ a(o, [["__scopeId", "data-v-b4a2484a"]]);
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c62615cd"]]);
 export {
   e as default
 };

package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOption.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"names":[],"mappings":"AAuDA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,kBAAkB,CAAA;AAIzB,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,wBAAwB,CAAA;IAChC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AA+BF,iBAAS,cAAc;WA2ET,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;4FAQnB,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":"ScalarComboboxOption.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"names":[],"mappings":"AA4DA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,kBAAkB,CAAA;AAIzB,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,wBAAwB,CAAA;IAChC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AA+BF,iBAAS,cAAc;WA2ET,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;4FAQnB,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/ScalarCombobox/ScalarComboboxOption.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as s, openBlock as l, createElementBlock as a, normalizeClass as n, unref as t, createVNode as i, normalizeStyle as c, createElementVNode as m, renderSlot as p, createBlock as d, withModifiers as u, createCommentVNode as f } from "vue";
-import { cva as y, cx as b } from "../../cva.js";
+import { defineComponent as s, openBlock as l, createElementBlock as r, normalizeClass as n, unref as t, createVNode as i, normalizeStyle as c, createElementVNode as p, renderSlot as m, createBlock as d, withModifiers as u, createCommentVNode as f } from "vue";
+import { cva as b, cx as y } from "../../cva.js";
 import v from "../ScalarListbox/ScalarListboxCheckbox.vue.js";
 import k from "../ScalarIcon/ScalarIcon.vue.js";
-const g = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, w = /* @__PURE__ */ s({
+const g = ["aria-selected"], B = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, $ = /* @__PURE__ */ s({
   __name: "ScalarComboboxOption",
   props: {
     active: { type: Boolean },
@@ -11,8 +11,8 @@ const g = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, w = /* @__
     isDeletable: { type: Boolean }
   },
   emits: ["delete"],
-  setup(B) {
-    const r = y({
+  setup(h) {
+    const a = b({
       base: [
         // Group
         "group/item",
@@ -28,27 +28,31 @@ const g = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, w = /* @__
         active: { true: "bg-b-2" }
       }
     });
-    return (e, o) => (l(), a("li", {
-      class: n(t(b)(t(r)({ active: e.active, selected: e.selected })))
+    return (e, o) => (l(), r("li", {
+      "aria-selected": e.selected,
+      class: n(t(y)(t(a)({ active: e.active, selected: e.selected }))),
+      role: "option",
+      tabindex: "-1"
     }, [
       i(t(v), {
         selected: e.selected,
         style: c(e.style)
       }, null, 8, ["selected", "style"]),
-      m("span", g, [
-        p(e.$slots, "default")
+      p("span", B, [
+        m(e.$slots, "default")
       ]),
       e.isDeletable ? (l(), d(t(k), {
         key: 0,
+        "aria-label": "Delete",
         class: "text-c-2 opacity-0 group-hover/item:opacity-100",
         icon: "Delete",
         size: "md",
         thickness: "1.5",
         onClick: o[0] || (o[0] = u((x) => e.$emit("delete"), ["stop"]))
       })) : f("", !0)
-    ], 2));
+    ], 10, g));
   }
 });
 export {
-  w as default
+  $ as default
 };

package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    id?: string;
+    hidden?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        label?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarComboboxOptionGroup.vue.d.ts.map

package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarComboboxOptionGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue"],"names":[],"mappings":"AA6BA,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AASF,iBAAS,cAAc;WA+CT,OAAO,IAA6B;;uBATvB,GAAG;yBACD,GAAG;;;;EAa/B;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,6SAOnB,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/ScalarCombobox/ScalarComboboxOptionGroup.vue.js

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

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

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

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AA6LA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,MAAM,EACX,KAAK,WAAW,EAEjB,MAAM,SAAS,CAAA;AAIhB,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AAiHF,iBAAS,cAAc;WA+JT,OAAO,IAA6B;;;;EAKjD;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;kFAOnB,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":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAkMA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,MAAM,EACX,KAAK,WAAW,EAEjB,MAAM,SAAS,CAAA;AAIhB,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AAiHF,iBAAS,cAAc;WAsKT,OAAO,IAA6B;;;;EAKjD;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;kFAOnB,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/ScalarCombobox/ScalarComboboxOptions.vue.js

@@ -1,12 +1,9 @@
-import { defineComponent as A, computed as b, ref as I, onMounted as K, watch as O, openBlock as i, createElementBlock as c, Fragment as p, createElementVNode as $, createVNode as q, unref as F, withDirectives as D, withKeys as h, withModifiers as y, vModelText as G, renderSlot as C, renderList as S, toDisplayString as B, createCommentVNode as M, createBlock as U, normalizeStyle as j, withCtx as H, createTextVNode as J, vShow as P } from "vue";
-import { nanoid as Q } from "nanoid";
+import { defineComponent as O, useId as q, computed as b, ref as D, onMounted as F, watch as G, openBlock as c, createElementBlock as y, Fragment as $, createElementVNode as w, createVNode as U, unref as j, withDirectives as C, withKeys as x, withModifiers as h, vModelText as H, renderSlot as S, renderList as B, createBlock as M, withCtx as V, createTextVNode as E, toDisplayString as N, normalizeStyle as J, createCommentVNode as P, vShow as Q } from "vue";
 import R from "./ScalarComboboxOption.vue.js";
-import { isGroups as E } from "./types.js";
-import W from "../ScalarIcon/ScalarIcon.vue.js";
-const X = { class: "relative flex" }, Y = ["placeholder"], Z = {
-  key: 0,
-  class: "min-w-0 truncate px-2.5 py-1.5 text-left text-c-2"
-}, ne = /* @__PURE__ */ A({
+import W from "./ScalarComboboxOptionGroup.vue.js";
+import { isGroups as L } from "./types.js";
+import X from "../ScalarIcon/ScalarIcon.vue.js";
+const Y = { class: "relative flex" }, Z = ["aria-activedescendant", "placeholder"], _ = ["aria-multiselectable"], ne = /* @__PURE__ */ O({
   inheritAttrs: !1,
   __name: "ScalarComboboxOptions",
   props: {
@@ -17,107 +14,123 @@ const X = { class: "relative flex" }, Y = ["placeholder"], Z = {
     isDeletable: { type: Boolean }
   },
   emits: ["update:modelValue", "delete"],
-  setup(N, { emit: L }) {
-    var g;
-    const o = N, T = L, x = `scalar-combobox-items-${Q()}`;
-    function w(e) {
-      return `${x}-${e.id}`;
+  setup(T, { emit: z }) {
+    var I;
+    const o = T, A = z, m = `scalar-combobox-items-${q()}`;
+    function p(e) {
+      return `${m}-${e.id}`;
     }
     const f = b(
-      () => E(o.options) ? o.options.flatMap((e) => e.options) : o.options
-    ), z = b(
-      () => E(o.options) ? o.options : [{ label: "", options: o.options }]
-    ), r = I(""), a = I(((g = o.modelValue) == null ? void 0 : g[0]) ?? f.value[0]);
-    K(async () => {
+      () => L(o.options) ? o.options.flatMap((e) => e.options) : o.options
+    ), K = b(
+      () => L(o.options) ? o.options : [{ label: "", options: o.options }]
+    ), i = D(""), a = D(((I = o.modelValue) == null ? void 0 : I[0]) ?? f.value[0]);
+    F(async () => {
       var e;
-      r.value = "", a.value = ((e = o.modelValue) == null ? void 0 : e[0]) ?? f.value[0], s.value.length !== 0 && setTimeout(() => {
+      i.value = "", a.value = ((e = o.modelValue) == null ? void 0 : e[0]) ?? f.value[0], s.value.length !== 0 && setTimeout(() => {
         var t;
-        (t = document == null ? void 0 : document.getElementById(w(s.value[0]))) == null || t.scrollIntoView({ block: "center" });
+        (t = document == null ? void 0 : document.getElementById(p(s.value[0]))) == null || t.scrollIntoView({ block: "center" });
       }, 10);
-    }), O(
-      () => r.value,
+    }), G(
+      () => i.value,
       () => a.value = v.value[0]
     );
     const v = b(
-      () => r.value === "" ? f.value : f.value.filter((e) => e.label.toLowerCase().includes(r.value.toLowerCase()))
+      () => i.value === "" ? f.value : f.value.filter((e) => e.label.toLowerCase().includes(i.value.toLowerCase()))
     ), s = b({
       get: () => o.modelValue ?? [],
-      set: (e) => e && T("update:modelValue", e)
+      set: (e) => e && A("update:modelValue", e)
     });
-    function V(e) {
+    function g(e) {
       o.multiselect ? s.value.some((t) => t.id === e.id) ? s.value = s.value.filter((t) => t.id !== e.id) : s.value = [...s.value, e] : s.value = [e];
     }
     function k(e) {
       var l;
-      const t = v.value, m = t.findIndex((u) => u.id === a.value.id) + e;
-      m < 0 || m > t.length - 1 || (a.value = t[m], (l = document == null ? void 0 : document.getElementById(w(a.value))) == null || l.scrollIntoView({
+      const t = v.value, r = t.findIndex((d) => d.id === a.value.id) + e;
+      r < 0 || r > t.length - 1 || (a.value = t[r], (l = document == null ? void 0 : document.getElementById(p(a.value))) == null || l.scrollIntoView({
         behavior: "smooth",
         block: "nearest"
       }));
     }
-    return (e, t) => (i(), c(p, null, [
-      $("div", X, [
-        q(F(W), {
+    return (e, t) => (c(), y($, null, [
+      w("div", Y, [
+        U(j(X), {
           class: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3",
           icon: "Search",
           size: "md"
         }),
-        D($("input", {
-          "onUpdate:modelValue": t[0] || (t[0] = (n) => r.value = n),
+        C(w("input", {
+          "onUpdate:modelValue": t[0] || (t[0] = (n) => i.value = n),
+          "aria-activedescendant": a.value ? p(a.value) : void 0,
           "aria-autocomplete": "list",
-          "aria-controls": x,
-          class: "min-w-0 flex-1 rounded-none border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 outline-none",
+          "aria-controls": m,
+          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: e.placeholder,
           role: "combobox",
           tabindex: "0",
           type: "text",
           onKeydown: [
-            t[1] || (t[1] = h(y((n) => k(1), ["prevent"]), ["down"])),
-            t[2] || (t[2] = h(y((n) => V(a.value), ["prevent"]), ["enter"])),
-            t[3] || (t[3] = h(y((n) => k(-1), ["prevent"]), ["up"]))
+            t[1] || (t[1] = x(h((n) => k(1), ["prevent"]), ["down"])),
+            t[2] || (t[2] = x(h((n) => g(a.value), ["prevent"]), ["enter"])),
+            t[3] || (t[3] = x(h((n) => k(-1), ["prevent"]), ["up"]))
           ]
-        }, null, 40, Y), [
-          [G, r.value]
+        }, null, 40, Z), [
+          [H, i.value]
         ])
       ]),
-      D($("ul", {
-        id: x,
-        class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0"
+      C(w("ul", {
+        id: m,
+        "aria-multiselectable": e.multiselect,
+        class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0",
+        role: "listbox",
+        tabindex: "-1"
       }, [
-        C(e.$slots, "before"),
-        (i(!0), c(p, null, S(z.value, (n, m) => (i(), c(p, { key: m }, [
-          n.label && // Only show the group label if there are some results
-          n.options.some((l) => v.value.some((u) => u.id === l.id)) ? (i(), c("div", Z, B(n.label), 1)) : M("", !0),
-          (i(!0), c(p, null, S(v.value, (l) => {
-            var u;
-            return i(), c(p, {
-              key: l.id
-            }, [
-              n.options.some((d) => d.id === l.id) ? (i(), U(R, {
-                key: 0,
-                id: w(l),
-                active: ((u = a.value) == null ? void 0 : u.id) === l.id,
-                isDeletable: l.isDeletable ?? e.isDeletable,
-                selected: s.value.some((d) => d.id === l.id),
-                style: j(e.multiselect ? "checkbox" : "radio"),
-                onClick: (d) => V(l),
-                onDelete: (d) => e.$emit("delete", l),
-                onMousedown: t[4] || (t[4] = y(() => {
-                }, ["prevent"])),
-                onMouseenter: (d) => a.value = l
-              }, {
-                default: H(() => [
-                  J(B(l.label), 1)
-                ]),
-                _: 2
-              }, 1032, ["id", "active", "isDeletable", "selected", "style", "onClick", "onDelete", "onMouseenter"])) : M("", !0)
-            ], 64);
-          }), 128))
-        ], 64))), 128)),
-        C(e.$slots, "after")
-      ], 512), [
-        [P, v.value.length || e.$slots.before || e.$slots.after]
+        S(e.$slots, "before"),
+        (c(!0), y($, null, B(K.value, (n, r) => (c(), M(W, {
+          id: `${m}-group-${r}`,
+          key: r,
+          hidden: (
+            // Only show the group label if there are some results
+            !n.options.some((l) => v.value.some((d) => d.id === l.id)) || // And it has a label
+            !n.label
+          )
+        }, {
+          label: V(() => [
+            E(N(n.label), 1)
+          ]),
+          default: V(() => [
+            (c(!0), y($, null, B(v.value, (l) => {
+              var d;
+              return c(), y($, {
+                key: l.id
+              }, [
+                n.options.some((u) => u.id === l.id) ? (c(), M(R, {
+                  key: 0,
+                  id: p(l),
+                  active: ((d = a.value) == null ? void 0 : d.id) === l.id,
+                  isDeletable: l.isDeletable ?? e.isDeletable,
+                  selected: s.value.some((u) => u.id === l.id),
+                  style: J(e.multiselect ? "checkbox" : "radio"),
+                  onClick: (u) => g(l),
+                  onDelete: (u) => e.$emit("delete", l),
+                  onMousedown: t[4] || (t[4] = h(() => {
+                  }, ["prevent"])),
+                  onMouseenter: (u) => a.value = l
+                }, {
+                  default: V(() => [
+                    E(N(l.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["id", "active", "isDeletable", "selected", "style", "onClick", "onDelete", "onMouseenter"])) : P("", !0)
+              ], 64);
+            }), 128))
+          ]),
+          _: 2
+        }, 1032, ["id", "hidden"]))), 128)),
+        S(e.$slots, "after")
+      ], 8, _), [
+        [Q, v.value.length || e.$slots.before || e.$slots.after]
       ])
     ], 64));
   }

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const WithSections: Story;
+export declare const WithFields: Story;
+//# sourceMappingURL=ScalarForm.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarForm.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarForm.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AASrD,QAAA,MAAM,IAAI,EAAE,IAqBX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,YAAY,EAAE,KAsB1B,CAAA;AACD,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAA"}

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

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

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

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

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

@@ -0,0 +1,26 @@
+/**
+ * Scalar Form component
+ *
+ * A form for creating and editing data.
+ *
+ * Automatically calls preventDefault on the form submit event.
+ *
+ * @example
+ *   <ScalarForm>
+ *     <!-- Form content -->
+ *   </ScalarForm>
+ */
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    submit: (event: SubmitEvent) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onSubmit?: ((event: SubmitEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarForm.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarForm.vue"],"names":[],"mappings":"AAuCA;;;;;;;;;;;GAWG;;;;;;qBA8C0B,GAAG;;AA7ChC,wBA6EC;AAKD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarForm/ScalarForm.vue.js

@@ -0,0 +1,19 @@
+import { defineComponent as n, openBlock as s, createElementBlock as m, mergeProps as i, unref as f, withModifiers as l, renderSlot as u } from "vue";
+import { useBindCx as p } from "../../hooks/useBindCx.js";
+const a = {}, x = /* @__PURE__ */ n({
+  ...a,
+  inheritAttrs: !1,
+  __name: "ScalarForm",
+  emits: ["submit"],
+  setup(_) {
+    const { cx: r } = p();
+    return (e, t) => (s(), m("form", i(f(r)("flex flex-col"), {
+      onSubmit: t[0] || (t[0] = l((o) => e.$emit("submit", o), ["prevent"]))
+    }), [
+      u(e.$slots, "default")
+    ], 16));
+  }
+});
+export {
+  x as default
+};

package/dist/components/ScalarForm/ScalarForm.vue2.js

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

package/dist/components/ScalarForm/ScalarFormField.vue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Scalar Form Field component
+ *
+ * A single form input field with a label.
+ *
+ * @example
+ *   <ScalarFormField>
+ *     <template #label>Input Label</template>
+ *     <ScalarTextInput ... />
+ *   </ScalarFormField>
+ */
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    error?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    error?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarFormField.vue.d.ts.map

package/dist/components/ScalarForm/ScalarFormField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormField.vue"],"names":[],"mappings":"AA8CA;;;;;;;;;;GAUG;;YAIO,OAAO;;YAAP,OAAO;;mBAuDU,GAAG;qBACD,GAAG;;AA3DhC,wBA2FC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarForm/ScalarFormSection.vue.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Scalar Form Section component
+ *
+ * A collection of form fields grouped together with a title.
+ *
+ * @example
+ *   <ScalarFormSection>
+ *     <template #label>Section Label</template>
+ *     <!-- Section content -->
+ *   </ScalarFormSection>
+ */
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarFormSection.vue.d.ts.map

package/dist/components/ScalarForm/ScalarFormSection.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormSection.vue"],"names":[],"mappings":"AA2BA;;;;;;;;;;GAUG;;AACH,wBACC"}

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

@@ -0,0 +1,2 @@
+export { default as ScalarForm } from './ScalarForm.vue.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA"}

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":"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,GAAG,SAAS,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;CAClC,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"}
+{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAyGA,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,GAAG,SAAS,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;CAClC,CAAA;AAkCD,iBAAS,cAAc;WA8HT,OAAO,IAA6B;;QA9IhD,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;;;;EA+IR;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aApLR,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;;;kFAyLhB,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

@@ -47,7 +47,7 @@ const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
               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" }, {
+                i(t(h), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
                   default: l(() => [
                     (o(!0), p(g, null, B(e.options, (n) => (o(), r(S, {
                       key: n.id,

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const WithMaxHeight: Story;
+//# sourceMappingURL=ScalarTextArea.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI,EAAE,IAeX,CAAA;AAED,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,KAI3B,CAAA"}

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

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

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

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

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

@@ -0,0 +1,19 @@
+/**
+ * Scalar Text Area component
+ *
+ * A wrapper around the HTML textarea element with a focusable container.
+ *
+ * @example
+ *   <ScalarTextArea v-model="model" />
+ */
+declare const _default: import("vue").DefineComponent<{
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarTextArea.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"names":[],"mappings":"AAwDA;;;;;;;GAOG;;iBA0BU,MAAM;;;;iBAAN,MAAM;;;;AAzBnB,wBA0GC"}

package/dist/components/ScalarTextArea/ScalarTextArea.vue.js

@@ -0,0 +1,44 @@
+import { defineComponent as d, useModel as f, onMounted as c, openBlock as p, createElementBlock as x, mergeProps as i, unref as r, withDirectives as v, createElementVNode as b, vModelText as _ } from "vue";
+import { useTextareaAutosize as g } from "@vueuse/core";
+import { useBindCx as h } from "../../hooks/useBindCx.js";
+const k = {}, C = /* @__PURE__ */ d({
+  ...k,
+  inheritAttrs: !1,
+  __name: "ScalarTextArea",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(a) {
+    const t = f(a, "modelValue"), { textarea: o } = g({
+      input: t,
+      styleProp: "minHeight"
+    }), { classCx: m, otherAttrs: s } = h();
+    return c(() => {
+      var n;
+      "autofocus" in s.value && ((n = o.value) == null || n.focus());
+    }), (n, e) => (p(), x("div", i(
+      r(m)(
+        "bg-b-1.5 custom-scroll flex min-h-0 shrink cursor-text items-center gap-0.75 rounded-md border px-3 py-2.5 outline-offset-[-1px] focus-within:bg-b-1 has-[input:focus-visible]:outline"
+      ),
+      {
+        onClick: e[1] || (e[1] = (l) => {
+          var u;
+          return (u = r(o)) == null ? void 0 : u.focus();
+        })
+      }
+    ), [
+      v(b("textarea", i({
+        ref_key: "textarea",
+        ref: o,
+        "onUpdate:modelValue": e[0] || (e[0] = (l) => t.value = l)
+      }, r(s), { class: "w-full resize-none border-none bg-transparent text-sm focus-within:outline-none" }), null, 16), [
+        [_, t.value]
+      ])
+    ], 16));
+  }
+});
+export {
+  C as default
+};

package/dist/components/ScalarTextArea/ScalarTextArea.vue2.js

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