@scalar/components 0.13.25 → 0.13.26

package/dist/components/ScalarModal/ScalarModal.vue.js

@@ -1,9 +1,9 @@
 import o from "./ScalarModal.vue2.js";
-import { useModal as s } from "./ScalarModal.vue2.js";
+import { useModal as e } from "./ScalarModal.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0f8e0211"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-12dc7570"]]);
 export {
-  f as default,
-  s as useModal
+  p as default,
+  e as useModal
 };

package/dist/components/ScalarModal/ScalarModal.vue2.js

@@ -1,13 +1,13 @@
-import { defineComponent as v, openBlock as l, createBlock as r, unref as a, withCtx as t, createElementVNode as x, normalizeClass as o, createVNode as i, normalizeStyle as b, createTextVNode as y, toDisplayString as g, createCommentVNode as d, createElementBlock as m, renderSlot as n, reactive as w } from "vue";
+import { defineComponent as p, openBlock as l, createBlock as r, unref as a, withCtx as o, createElementVNode as x, normalizeClass as t, createVNode as i, normalizeStyle as w, createTextVNode as b, toDisplayString as y, createCommentVNode as m, createElementBlock as n, renderSlot as d, reactive as g } from "vue";
 import { Dialog as z, DialogPanel as k, DialogTitle as C, DialogDescription as D } from "@headlessui/vue";
-import { cva as c, cx as u } from "../../cva.js";
+import { cva as f, cx as c } from "../../cva.js";
 import S from "../ScalarIconButton/ScalarIconButton.vue.js";
 const $ = {
   key: 0,
   class: "close-button z-10 fixed right-2 top-2"
 };
 function E() {
-  return w({
+  return g({
     open: !1,
     show() {
       this.open = !0;
@@ -17,7 +17,7 @@ function E() {
     }
   });
 }
-const M = /* @__PURE__ */ v({
+const M = /* @__PURE__ */ p({
   __name: "ScalarModal",
   props: {
     state: {},
@@ -28,48 +28,43 @@ const M = /* @__PURE__ */ v({
     variant: {}
   },
   setup(N) {
-    const f = c({
+    const u = f({
       base: [
         "scalar-modal",
-        "col relative mx-auto mb-0 rounded-lg bg-b-1 p-0 text-left leading-snug text-c-1 opacity-0 md:w-[calc(100vw-16px)] lg:w-[calc(100vw-32px)]"
+        "flex flex-col relative mx-auto mb-0 rounded-lg bg-b-1 p-0 text-left leading-snug text-c-1 opacity-0 w-[calc(100vw-12px)] md:w-[calc(100vw-16px)] lg:w-[calc(100vw-32px)]"
       ].join(" "),
       variants: {
         size: {
-          xxs: "mt-20 max-w-screen-xxs",
-          xs: "mt-20 max-w-screen-xs",
-          sm: "mt-20 max-w-screen-sm",
-          md: "mt-20 max-w-screen-md",
-          lg: "m-auto max-w-screen-lg",
-          xl: "m-auto max-w-screen-xl",
-          full: "full-size-styles mt-0 lg:w-full"
+          xxs: "mt-[20svh] max-h-[60svh] max-w-screen-xxs",
+          xs: "mt-[20svh] max-h-[60svh] max-w-screen-xs",
+          sm: "mt-[20svh] max-h-[60svh] max-w-screen-sm",
+          md: "mt-[20svh] max-h-[60svh] max-w-screen-md",
+          lg: "m-auto max-h-[80svh] max-w-screen-lg",
+          xl: "m-auto max-h-[90svh] max-w-screen-xl",
+          full: "full-size-styles max-h-dvh mt-0 lg:w-full"
         },
         variant: {
           form: "scalar-modal-form",
-          history: "scalar-modal-history bg-b-1",
-          search: "scalar-modal-search",
+          search: "scalar-modal-search mt-[15svh] max-h-[60svh] max-w-[540px]",
           error: "scalar-modal-error"
         }
       }
-    }), p = c({
-      base: [
-        "scalar-modal-body",
-        "relative max-h-[calc(100dvh-240px)] rounded-lg rounded-t-none border-t-1/2 bg-b-1 p-3"
-      ].join(" "),
+    }), v = f({
+      base: ["scalar-modal-body", "relative flex-1 min-h-0 p-3"].join(" "),
       variants: {
         variant: {
           form: "overflow-visible",
-          history: "pt-3",
-          search: "col !m-0 max-h-[440px] overflow-hidden p-0",
+          search: "col !m-0 overflow-hidden p-0",
           error: "overflow-y-scroll"
         },
         size: {
-          xxs: "max-h-[calc(100dvh-240px)]",
-          xs: "max-h-[calc(100dvh-240px)]",
-          sm: "max-h-[calc(100dvh-240px)]",
-          md: "max-h-[calc(100dvh-240px)]",
-          lg: "max-h-[calc(100dvh-180px)]",
-          xl: "m-0 max-h-[calc(100dvh-120px)] p-0",
-          full: "max-h-dvh rounded-none"
+          xxs: "",
+          xs: "",
+          sm: "",
+          md: "",
+          lg: "",
+          xl: "m-0 p-0",
+          full: " rounded-none"
         }
       }
     });
@@ -77,10 +72,10 @@ const M = /* @__PURE__ */ v({
       open: e.state.open,
       onClose: s[1] || (s[1] = (h) => e.state.hide())
     }, {
-      default: t(() => [
+      default: o(() => [
         x("div", {
-          class: o(
-            a(u)(
+          class: t(
+            a(c)(
               e.size === "full" ? "scalar-modal-layout-full" : "scalar-modal-layout",
               "fixed left-0 top-0 flex items-start justify-center",
               "z-[1001] h-[100dvh] w-[100dvw]",
@@ -90,44 +85,44 @@ const M = /* @__PURE__ */ v({
           )
         }, [
           i(a(k), {
-            class: o(a(f)({ size: e.size, variant: e.variant })),
-            style: b({ maxWidth: e.maxWidth })
+            class: t(a(u)({ size: e.size, variant: e.variant })),
+            style: w({ maxWidth: e.maxWidth })
           }, {
-            default: t(() => [
+            default: o(() => [
               e.title ? (l(), r(a(C), {
                 key: 0,
-                class: o(["scalar-modal-header m-0 -mb-1 rounded-lg p-3 text-left text-sm font-medium text-c-1", { "pb-0 pt-6": e.variant === "history" }])
+                class: "scalar-modal-header m-0 -mb-1 rounded-lg pt-3 px-3 text-left text-sm font-medium text-c-1"
               }, {
-                default: t(() => [
-                  y(g(e.title), 1)
+                default: o(() => [
+                  b(y(e.title), 1)
                 ]),
                 _: 1
-              }, 8, ["class"])) : d("", !0),
-              e.size === "full" ? (l(), m("div", {
+              })) : m("", !0),
+              e.size === "full" ? (l(), n("div", {
                 key: 1,
-                class: o(e.bodyClass)
+                class: t(e.bodyClass)
               }, [
-                n(e.$slots, "default", {}, void 0, !0)
+                d(e.$slots, "default", {}, void 0, !0)
               ], 2)) : (l(), r(a(D), {
                 key: 2,
-                class: o(a(u)(a(p)({ size: e.size, variant: e.variant }), e.bodyClass))
+                class: t(a(c)(a(v)({ size: e.size, variant: e.variant }), e.bodyClass))
               }, {
-                default: t(() => [
-                  n(e.$slots, "default", {}, void 0, !0)
+                default: o(() => [
+                  d(e.$slots, "default", {}, void 0, !0)
                 ]),
                 _: 3
               }, 8, ["class"]))
             ]),
             _: 3
           }, 8, ["class", "style"]),
-          e.size === "full" ? (l(), m("div", $, [
+          e.size === "full" ? (l(), n("div", $, [
             i(a(S), {
               class: "hover:bg-b-3 focus:outline-none",
               icon: "Close",
               label: "Clear Search",
               onClose: s[0] || (s[0] = (h) => e.state.hide())
             })
-          ])) : d("", !0)
+          ])) : m("", !0)
         ], 2)
       ]),
       _: 3

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AA0GA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAInE,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;;;;;;;;;AA0KF,wBAQG"}
+{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAgHA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAInE,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;;;;;;;;;AA4KF,wBAQG"}

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.js

@@ -1,7 +1,7 @@
 import o from "./ScalarSearchInput.vue2.js";
 /* empty css                       */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-2f2316c6"]]);
+const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-080483f0"]]);
 export {
-  p as default
+  c as default
 };

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as b, ref as h, computed as g, useAttrs as k, openBlock as s, createElementBlock as v, normalizeClass as i, unref as a, createBlock as o, createCommentVNode as u, createElementVNode as S, mergeProps as V } from "vue";
-import { cva as y, cx as c } from "../../cva.js";
-import C from "../ScalarIcon/ScalarIcon.vue.js";
-import z from "../ScalarLoading/ScalarLoading.vue.js";
-import B from "../ScalarIconButton/ScalarIconButton.vue.js";
-const I = ["aria-label", "value"], q = /* @__PURE__ */ b({
+import { defineComponent as h, ref as v, computed as g, useAttrs as k, openBlock as s, createElementBlock as S, normalizeClass as i, unref as a, createBlock as o, createCommentVNode as c, createElementVNode as V, mergeProps as y, withModifiers as C } from "vue";
+import { cva as z, cx as u } from "../../cva.js";
+import B from "../ScalarIcon/ScalarIcon.vue.js";
+import I from "../ScalarLoading/ScalarLoading.vue.js";
+import w from "../ScalarIconButton/ScalarIconButton.vue.js";
+const E = ["aria-label", "value"], M = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "ScalarSearchInput",
   props: {
@@ -13,15 +13,18 @@ const I = ["aria-label", "value"], q = /* @__PURE__ */ b({
     label: {}
   },
   emits: ["update:modelValue"],
-  setup(E, { expose: d, emit: m }) {
-    const t = m, r = h(null);
-    function p(e) {
-      t("update:modelValue", e.target.value);
+  setup(N, { expose: d, emit: p }) {
+    const r = p, l = v(null);
+    function m(e) {
+      r("update:modelValue", e.target.value);
     }
-    const n = g(() => {
-      const { class: e, ...l } = k();
-      return { class: e || "", rest: l };
-    }), f = y({
+    function f() {
+      r("update:modelValue", ""), l.value && l.value.focus();
+    }
+    const t = g(() => {
+      const { class: e, ...n } = k();
+      return { class: e || "", rest: n };
+    }), b = z({
       base: "search-background flex items-center rounded border text-sm font-medium has-[:focus-visible]:bg-b-1 has-[:focus-visible]:outline",
       variants: {
         sidebar: {
@@ -33,26 +36,26 @@ const I = ["aria-label", "value"], q = /* @__PURE__ */ b({
     return d({
       focus: () => {
         var e;
-        (e = r.value) == null || e.focus();
+        (e = l.value) == null || e.focus();
       },
       blur: () => {
         var e;
-        (e = r.value) == null || e.blur();
+        (e = l.value) == null || e.blur();
       }
-    }), (e, l) => (s(), v("label", {
-      class: i(a(c)(a(f)({ sidebar: e.sidebar }), n.value.class))
+    }), (e, n) => (s(), S("label", {
+      class: i(a(u)(a(b)({ sidebar: e.sidebar }), t.value.class))
     }, [
-      e.sidebar ? (s(), o(a(C), {
+      e.sidebar ? (s(), o(a(B), {
         key: 0,
         class: "text-c-2",
         icon: "Search",
         size: "xs",
         thickness: "2.5"
-      })) : u("", !0),
-      S("input", V({
+      })) : c("", !0),
+      V("input", y({
         ref_key: "inputRef",
-        ref: r
-      }, n.value.rest, {
+        ref: l
+      }, t.value.rest, {
         "aria-label": e.label ?? "Enter search query",
         autocapitalize: "off",
         autocomplete: "off",
@@ -62,24 +65,24 @@ const I = ["aria-label", "value"], q = /* @__PURE__ */ b({
         spellcheck: "false",
         type: "search",
         value: e.modelValue,
-        onInput: p
-      }), null, 16, I),
-      e.loading && e.loading.isLoading ? (s(), o(a(z), {
+        onInput: m
+      }), null, 16, E),
+      e.loading && e.loading.isLoading ? (s(), o(a(I), {
         key: 1,
         class: "mr-3 self-center",
         loadingState: e.loading,
         size: "md"
-      }, null, 8, ["loadingState"])) : e.modelValue ? (s(), o(a(B), {
+      }, null, 8, ["loadingState"])) : e.modelValue ? (s(), o(a(w), {
         key: 2,
-        class: i(a(c)("p-0", e.sidebar ? "h-4 w-4" : "h-5 w-5")),
+        class: i(a(u)("p-0", e.sidebar ? "h-4 w-4" : "h-5 w-5")),
         icon: "Close",
         label: "Clear Search",
         thickness: e.sidebar ? "1.75" : "1.5",
-        onClick: l[0] || (l[0] = (N) => t("update:modelValue", ""))
-      }, null, 8, ["class", "thickness"])) : u("", !0)
+        onClick: C(f, ["stop", "prevent"])
+      }, null, 8, ["class", "thickness"])) : c("", !0)
     ], 2));
   }
 });
 export {
-  q as default
+  M as default
 };

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"names":[],"mappings":"AA6DA,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,eAAe,CAAA;AAIrD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAWF,iBAAS,cAAc;WAiGT,OAAO,IAA6B;;sBAXxB,GAAG;yBACA,GAAG;uBACL,GAAG;6BACG,GAAG;;;;EAanC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,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":"ScalarSearchResultItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"names":[],"mappings":"AA2DA,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,eAAe,CAAA;AAIrD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAWF,iBAAS,cAAc;WAiGT,OAAO,IAA6B;;sBAXxB,GAAG;yBACA,GAAG;uBACL,GAAG;6BACG,GAAG;;;;EAanC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,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/ScalarSearchResults/ScalarSearchResultItem.vue.js

@@ -1,10 +1,7 @@
-import { defineComponent as a, openBlock as t, createElementBlock as s, createElementVNode as o, normalizeProps as d, guardReactiveProps as m, unref as l, renderSlot as n, createBlock as p, createCommentVNode as r } from "vue";
+import { defineComponent as a, openBlock as t, createElementBlock as s, createElementVNode as o, normalizeProps as d, guardReactiveProps as m, unref as c, renderSlot as n, createBlock as p, createCommentVNode as r } from "vue";
 import { useBindCx as u } from "../../hooks/useBindCx.js";
 import f from "../ScalarIcon/ScalarIcon.vue.js";
-const h = {
-  class: "contents",
-  role: "option"
-}, v = {
+const h = { class: "contents" }, v = {
   key: 0,
   class: "flex h-fit items-center text-sm font-medium text-c-3 group-hover:text-c-1"
 }, x = { class: "flex min-w-0 flex-1 flex-col gap-0.75" }, _ = { class: "flex items-center gap-1" }, g = { class: "flex-1 truncate text-sm font-medium" }, k = {
@@ -21,10 +18,10 @@ const h = {
     active: { type: Boolean }
   },
   setup($) {
-    const { cx: c } = u();
+    const { cx: l } = u();
     return (e, i) => (t(), s("li", h, [
       o("a", d(m(
-        l(c)(
+        c(l)(
           "group flex cursor-pointer gap-2.5 rounded px-3 py-1.5 no-underline hover:bg-b-2",
           {
             "bg-b-2": e.active
@@ -33,7 +30,7 @@ const h = {
       )), [
         e.icon ? (t(), s("div", v, [
           n(e.$slots, "icon", {}, () => [
-            e.icon ? (t(), p(l(f), {
+            e.icon ? (t(), p(c(f), {
               key: 0,
               icon: e.icon,
               size: "sm"

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAUrD,QAAA,MAAM,IAAI,EAAE,IAwBX,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,KAqC1B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA6D9B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAA"}
+{"version":3,"file":"ScalarSidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAUrD,QAAA,MAAM,IAAI,EAAE,IAsBX,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,KAqC1B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAqF9B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"names":[],"mappings":"AAoFA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI7E;;;;;;;;;;;;;;;;;;;;;GAqBG;;AACH,wBAyHC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"names":[],"mappings":"AAmFA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI7E;;;;;;;;;;;;;;;;;;;;;GAqBG;;AACH,wBA4HC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarSidebar/ScalarSidebarButton.vue.js

@@ -1,12 +1,13 @@
-import { defineComponent as d, openBlock as t, createBlock as r, resolveDynamicComponent as p, mergeProps as c, unref as o, withCtx as u, createElementVNode as f, createElementBlock as n, renderSlot as s, createVNode as m, createCommentVNode as l } from "vue";
+import { defineComponent as r, openBlock as s, createBlock as c, resolveDynamicComponent as u, mergeProps as f, unref as o, withCtx as m, renderSlot as t, createVNode as n, createElementVNode as p, createElementBlock as a, createCommentVNode as l } from "vue";
 import { cva as b } from "../../cva.js";
 import { useBindCx as v } from "../../hooks/useBindCx.js";
+import y from "./ScalarSidebarIndent.vue.js";
 import h from "../ScalarIcon/ScalarIcon.vue.js";
-const y = { class: "flex items-center gap-1 flex-1" }, B = {
+const B = { class: "flex items-center gap-1 flex-1 py-2 leading-5" }, g = {
   key: 0,
   class: "size-3.5"
-}, _ = { key: 0 }, k = {}, N = /* @__PURE__ */ d({
-  ...k,
+}, S = { key: 0 }, $ = {}, w = /* @__PURE__ */ r({
+  ...$,
   inheritAttrs: !1,
   __name: "ScalarSidebarButton",
   props: {
@@ -16,48 +17,46 @@ const y = { class: "flex items-center gap-1 flex-1" }, B = {
     disabled: { type: Boolean },
     indent: { default: 0 }
   },
-  setup(C) {
-    const a = b({
-      base: ["rounded p-1.5 font-medium text-c-2 no-underline"],
+  setup(k) {
+    const d = b({
+      base: ["group/button flex rounded px-1.5 font-medium text-c-2 no-underline"],
       variants: {
         selected: { true: "cursor-auto bg-b-2 text-c-1" },
-        disabled: { true: "cursor-auto" },
-        indent: {
-          0: "pl-[6px]",
-          1: "pl-[24px]",
-          2: "pl-[42px]",
-          3: "pl-[60px]",
-          4: "pl-[78px]",
-          5: "pl-[96px]",
-          6: "pl-[114px]"
-        }
+        disabled: { true: "cursor-auto" }
       },
       compoundVariants: [
         { selected: !1, disabled: !1, class: "hover:bg-b-2" }
       ],
-      defaultVariants: { selected: !1, disabled: !1, indent: 0 }
+      defaultVariants: { selected: !1, disabled: !1 }
     }), { cx: i } = v();
-    return (e, V) => (t(), r(p(e.is), c({
+    return (e, C) => (s(), c(u(e.is), f({
       "aria-level": e.indent,
+      "aria-selected": e.selected,
       type: e.is === "button" ? "button" : void 0
-    }, o(i)(o(a)({ selected: e.selected, disabled: e.disabled, indent: e.indent }))), {
-      default: u(() => [
-        f("div", y, [
-          e.icon || e.$slots.icon ? (t(), n("div", B, [
-            s(e.$slots, "icon", {}, () => [
-              m(o(h), { icon: e.icon }, null, 8, ["icon"])
+    }, o(i)(o(d)({ selected: e.selected, disabled: e.disabled }))), {
+      default: m(() => [
+        t(e.$slots, "indent", {}, () => [
+          n(y, {
+            indent: e.indent,
+            selected: e.selected
+          }, null, 8, ["indent", "selected"])
+        ]),
+        p("div", B, [
+          e.icon || e.$slots.icon ? (s(), a("div", g, [
+            t(e.$slots, "icon", {}, () => [
+              n(o(h), { icon: e.icon }, null, 8, ["icon"])
             ])
           ])) : l("", !0),
-          s(e.$slots, "default")
+          t(e.$slots, "default")
         ]),
-        e.$slots.aside ? (t(), n("div", _, [
-          s(e.$slots, "aside")
+        e.$slots.aside ? (s(), a("div", S, [
+          t(e.$slots, "aside")
         ])) : l("", !0)
       ]),
       _: 3
-    }, 16, ["aria-level", "type"]));
+    }, 16, ["aria-level", "aria-selected", "type"]));
   }
 });
 export {
-  N as default
+  w as default
 };

package/dist/components/ScalarSidebar/ScalarSidebarGroup.vue.d.ts

@@ -1,4 +1,5 @@
 import type { Component } from 'vue';
+import { type SidebarGroupLevel } from './useSidebarGroups.js';
 /**
  * Scalar Sidebar Group component
  *
@@ -17,29 +18,45 @@ import type { Component } from 'vue';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue?: boolean;
 } & {
+    /** Override the element tag */
     is?: Component | string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<{
     modelValue?: boolean;
 } & {
+    /** Override the element tag */
     is?: Component | string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Readonly<{
     /** The text content of the toggle */
-    default?: () => any;
+    default?: (props: {
+        open: boolean;
+    }) => any;
     /** Override the entire toggle button */
-    button?: () => any;
+    button?: (props: {
+        open: boolean;
+        level: SidebarGroupLevel;
+    }) => any;
     /** The list of sidebar subitems */
-    items?: () => any;
+    items?: (props: {
+        open: boolean;
+    }) => any;
 }> & {
     /** The text content of the toggle */
-    default?: () => any;
+    default?: (props: {
+        open: boolean;
+    }) => any;
     /** Override the entire toggle button */
-    button?: () => any;
+    button?: (props: {
+        open: boolean;
+        level: SidebarGroupLevel;
+    }) => any;
     /** The list of sidebar subitems */
-    items?: () => any;
+    items?: (props: {
+        open: boolean;
+    }) => any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/ScalarSidebar/ScalarSidebarGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"names":[],"mappings":"AA0EA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AASpC;;;;;;;;;;;;;;GAcG;;iBAiCU,OAAO;;SA7Bb,SAAS,GAAG,MAAM;;;;iBA6BZ,OAAO;;SA7Bb,SAAS,GAAG,MAAM;;;;IAQvB,qCAAqC;cAC3B,MAAM,GAAG;IACnB,wCAAwC;aAC/B,MAAM,GAAG;IAClB,mCAAmC;YAC3B,MAAM,GAAG;;IALjB,qCAAqC;cAC3B,MAAM,GAAG;IACnB,wCAAwC;aAC/B,MAAM,GAAG;IAClB,mCAAmC;YAC3B,MAAM,GAAG;;AAhBnB,wBAiJC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"names":[],"mappings":"AAqFA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAMpC,OAAO,EAAE,KAAK,iBAAiB,EAAoB,MAAM,oBAAoB,CAAA;AAI7E;;;;;;;;;;;;;;GAcG;;iBAkCU,OAAO;;IA9BlB,+BAA+B;SAC1B,SAAS,GAAG,MAAM;;;;iBA6BZ,OAAO;;IA9BlB,+BAA+B;SAC1B,SAAS,GAAG,MAAM;;;;IAQvB,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;IALzC,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;AAjB3C,wBAkKC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarSidebar/ScalarSidebarGroup.vue.js

@@ -1,9 +1,10 @@
-import { defineComponent as d, mergeModels as p, useModel as c, openBlock as r, createElementBlock as f, renderSlot as t, createVNode as a, unref as s, withCtx as n, createBlock as _, resolveDynamicComponent as v, normalizeProps as C, mergeProps as $, createCommentVNode as k } from "vue";
-import { useBindCx as x } from "../../hooks/useBindCx.js";
-import B from "./ScalarSidebarButton.vue.js";
-import V from "./ScalarSidebarGroupToggle.vue.js";
-import { useSidebarGroups as b } from "./useSidebarGroups.js";
-const S = { class: "contents" }, y = {}, w = /* @__PURE__ */ d({
+import { defineComponent as d, mergeModels as p, useModel as c, openBlock as i, createElementBlock as f, renderSlot as a, unref as t, createVNode as r, withCtx as n, createBlock as v, resolveDynamicComponent as _, normalizeProps as x, mergeProps as b, createCommentVNode as C } from "vue";
+import { useBindCx as S } from "../../hooks/useBindCx.js";
+import $ from "./ScalarSidebarButton.vue.js";
+import g from "./ScalarSidebarGroupToggle.vue.js";
+import k from "./ScalarSidebarIndent.vue.js";
+import { useSidebarGroups as B } from "./useSidebarGroups.js";
+const V = { class: "group/item contents" }, y = {}, A = /* @__PURE__ */ d({
   ...y,
   inheritAttrs: !1,
   __name: "ScalarSidebarGroup",
@@ -14,34 +15,51 @@ const S = { class: "contents" }, y = {}, w = /* @__PURE__ */ d({
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(i) {
-    const e = c(i, "modelValue"), { level: u } = b({ increment: !0 }), { cx: m } = x();
-    return (o, l) => (r(), f("li", S, [
-      t(o.$slots, "button", { open: e.value }, () => [
-        a(B, {
+  setup(u) {
+    const e = c(u, "modelValue"), { level: l } = B({ increment: !0 }), { cx: m } = S();
+    return (o, s) => (i(), f("li", V, [
+      a(o.$slots, "button", {
+        level: t(l),
+        open: !!e.value
+      }, () => [
+        r($, {
           is: "button",
           "aria-expanded": e.value,
-          indent: s(u),
-          onClick: l[0] || (l[0] = (M) => e.value = !e.value)
+          class: "text-c-1 bg-b-1",
+          indent: t(l),
+          onClick: s[0] || (s[0] = (M) => e.value = !e.value)
         }, {
+          indent: n(() => [
+            r(k, {
+              class: "mr-0",
+              indent: t(l)
+            }, null, 8, ["indent"])
+          ]),
           icon: n(() => [
-            a(V, { open: e.value }, null, 8, ["open"])
+            r(g, {
+              class: "text-c-3",
+              open: e.value
+            }, null, 8, ["open"])
           ]),
           default: n(() => [
-            t(o.$slots, "default", { open: e.value })
+            a(o.$slots, "default", {
+              open: !!e.value
+            })
           ]),
           _: 3
         }, 8, ["aria-expanded", "indent"])
       ]),
-      e.value ? (r(), _(v(o.is), C($({ key: 0 }, s(m)("flex flex-col"))), {
+      e.value ? (i(), v(_(o.is), x(b({ key: 0 }, t(m)("flex flex-col gap-px"))), {
         default: n(() => [
-          t(o.$slots, "items", { open: e.value })
+          a(o.$slots, "items", {
+            open: !!e.value
+          })
         ]),
         _: 3
-      }, 16)) : k("", !0)
+      }, 16)) : C("", !0)
     ]));
   }
 });
 export {
-  w as default
+  A as default
 };

package/dist/components/ScalarSidebar/ScalarSidebarIndent.vue.d.ts

@@ -0,0 +1,20 @@
+import type { SidebarGroupLevel } from './useSidebarGroups.js';
+/**
+ * Scalar Sidebar Indent component
+ *
+ * @example
+ *   <ScalarSidebarIndent :indent="1" />
+ */
+declare const _default: import("vue").DefineComponent<{
+    /** The number of indents to render @default 0 */
+    indent?: SidebarGroupLevel;
+    /** Whether the indent is selected @default false */
+    selected?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The number of indents to render @default 0 */
+    indent?: SidebarGroupLevel;
+    /** Whether the indent is selected @default false */
+    selected?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarSidebarIndent.vue.d.ts.map

package/dist/components/ScalarSidebar/ScalarSidebarIndent.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarIndent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarIndent.vue"],"names":[],"mappings":"AAiFA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAI3D;;;;;GAKG;;IAID,iDAAiD;aACxC,iBAAiB;IAC1B,oDAAoD;eACzC,OAAO;;IAHlB,iDAAiD;aACxC,iBAAiB;IAC1B,oDAAoD;eACzC,OAAO;;AANpB,wBAkHC"}

package/dist/components/ScalarSidebar/ScalarSidebarIndent.vue.js

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