@scalar/components 0.16.7 → 0.16.11

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

@@ -2,7 +2,7 @@ import o from "./ScalarModal.vue2.js";
 import { useModal as f } from "./ScalarModal.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1319c63c"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c1e93776"]]);
 export {
   m as default,
   f as useModal

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

@@ -1,4 +1,4 @@
-import { defineComponent as x, createBlock as i, openBlock as l, unref as a, withCtx as t, createElementVNode as w, normalizeClass as o, createVNode as m, createElementBlock as r, createCommentVNode as d, normalizeStyle as b, createTextVNode as y, toDisplayString as g, renderSlot as n, reactive as z } from "vue";
+import { defineComponent as x, createBlock as i, openBlock as l, unref as a, withCtx as t, createElementVNode as w, normalizeClass as o, createVNode as m, createElementBlock as r, createCommentVNode as d, normalizeStyle as y, createTextVNode as b, toDisplayString as g, renderSlot as n, reactive as z } from "vue";
 import { Dialog as k, DialogPanel as C, DialogTitle as S } from "@headlessui/vue";
 import { cva as f, cx as v } from "@scalar/use-hooks/useBindCx";
 import D from "../ScalarIconButton/ScalarIconButton.vue.js";
@@ -81,7 +81,7 @@ const T = /* @__PURE__ */ x({
             a(v)(
               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]",
+              "z-overlay h-dvh w-dvw",
               "bg-backdrop opacity-0 dark:bg-backdrop-dark",
               e.size === "full" && "flex"
             )
@@ -89,7 +89,7 @@ const T = /* @__PURE__ */ x({
         }, [
           m(a(C), {
             class: o(a(h)({ size: e.size, variant: e.variant })),
-            style: b({ maxWidth: e.maxWidth })
+            style: y({ maxWidth: e.maxWidth })
           }, {
             default: t(() => [
               e.title ? (l(), i(a(S), {
@@ -97,7 +97,7 @@ const T = /* @__PURE__ */ x({
                 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)
+                  b(g(e.title), 1)
                 ]),
                 _: 1
               })) : d("", !0),

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

@@ -1,4 +1,4 @@
-import type { ScalarSidebarItemProps, ScalarSidebarItemSlots } from './types';
+import type { ScalarSidebarButtonSlots, ScalarSidebarItemProps } from './types';
 /**
  * Scalar Sidebar Button component
  *
@@ -21,7 +21,7 @@ import type { ScalarSidebarItemProps, ScalarSidebarItemSlots } from './types';
  *     </template>
  *   </ScalarSidebarButton>
  */
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ScalarSidebarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarSidebarItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScalarSidebarItemSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ScalarSidebarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarSidebarItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScalarSidebarButtonSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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":"AAuFA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAG7E;;;;;;;;;;;;;;;;;;;;;GAqBG;;AACH,wBA2HC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,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":"AA8FA,OAAO,KAAK,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAG/E;;;;;;;;;;;;;;;;;;;;;GAqBG;;AACH,wBAoIC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -1,11 +1,11 @@
-import { defineComponent as l, createBlock as o, openBlock as s, resolveDynamicComponent as r, mergeProps as c, unref as a, withCtx as u, renderSlot as t, createElementBlock as f, createCommentVNode as n, createElementVNode as b, createVNode as p } from "vue";
+import { defineComponent as r, createBlock as o, openBlock as a, resolveDynamicComponent as l, mergeProps as c, unref as s, withCtx as u, renderSlot as t, createElementBlock as b, createCommentVNode as i, createElementVNode as f, createVNode as p } from "vue";
 import { cva as m, useBindCx as v } from "@scalar/use-hooks/useBindCx";
 import h from "./ScalarSidebarIndent.vue.js";
 import y from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
 const B = {
   key: 0,
   class: "h-[1lh] *:size-4 mr-1"
-}, k = { class: "flex-1 min-w-0" }, $ = {}, E = /* @__PURE__ */ l({
+}, k = { class: "flex-1 min-w-0" }, $ = {}, E = /* @__PURE__ */ r({
   ...$,
   inheritAttrs: !1,
   __name: "ScalarSidebarButton",
@@ -18,42 +18,49 @@ const B = {
     indent: { default: 0 }
   },
   setup(g) {
-    const i = m({
+    const d = m({
       base: [
-        "group/button flex items-stretch rounded p-2 ",
-        "font-sidebar leading-5 text-c-2 no-underline wrap-break-word"
+        "group/button peer/button flex items-stretch rounded p-2 ",
+        "font-sidebar leading-5 text-sidebar-c-2 no-underline wrap-break-word"
       ],
       variants: {
-        active: { true: "text-c-1 font-sidebar-active" },
+        active: { true: "text-sidebar-c-active font-sidebar-active" },
         disabled: { true: "cursor-auto" },
-        selected: { true: "cursor-auto bg-b-2 text-c-1 font-sidebar-active" }
+        selected: {
+          true: "cursor-auto bg-sidebar-b-active text-sidebar-c-active font-sidebar-active"
+        }
       },
       compoundVariants: [
-        { selected: !1, disabled: !1, class: "hover:bg-b-2" }
+        {
+          selected: !1,
+          disabled: !1,
+          class: "hover:bg-sidebar-b-hover hover:text-sidebar-c-hover"
+        }
       ],
       defaultVariants: { selected: !1, disabled: !1, active: !1 }
-    }), { cx: d } = v();
-    return (e, C) => (s(), o(r(e.is), c({
+    }), { cx: n } = v();
+    return (e, C) => (a(), o(l(e.is), c({
       "aria-selected": e.selected,
       type: e.is === "button" ? "button" : void 0
-    }, a(d)(a(i)({ selected: e.selected, disabled: e.disabled, active: e.active }))), {
+    }, s(n)(s(d)({ selected: e.selected, disabled: e.disabled, active: e.active }))), {
       default: u(() => [
         t(e.$slots, "indent", {}, () => [
           p(h, {
+            class: "-my-2",
             disabled: e.disabled,
             indent: e.indent,
             selected: e.selected
           }, null, 8, ["disabled", "indent", "selected"])
         ]),
-        e.icon || e.$slots.icon ? (s(), f("div", B, [
+        e.icon || e.$slots.icon ? (a(), b("div", B, [
           t(e.$slots, "icon", {}, () => [
-            e.icon ? (s(), o(a(y), {
+            e.icon ? (a(), o(s(y), {
               key: 0,
               icon: e.icon
-            }, null, 8, ["icon"])) : n("", !0)
+            }, null, 8, ["icon"])) : i("", !0)
           ])
-        ])) : n("", !0),
-        b("div", k, [
+        ])) : i("", !0),
+        f("div", k, [
           t(e.$slots, "default")
         ]),
         t(e.$slots, "aside")

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

@@ -1,25 +1,25 @@
-import { defineComponent as l, createElementBlock as a, openBlock as i, normalizeProps as c, guardReactiveProps as d, unref as s, renderSlot as t, createElementVNode as r, createVNode as m } from "vue";
+import { defineComponent as a, createElementBlock as l, openBlock as i, normalizeProps as d, guardReactiveProps as c, unref as s, renderSlot as r, createElementVNode as t, createVNode as m } from "vue";
 import { useBindCx as f } from "@scalar/use-hooks/useBindCx";
 import p from "../ScalarColorModeToggle/ScalarColorModeToggle.vue.js";
-const _ = { class: "flex items-center" }, u = { class: "flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2" }, x = {}, w = /* @__PURE__ */ l({
-  ...x,
+const _ = { class: "flex items-center" }, u = { class: "flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2" }, b = {}, w = /* @__PURE__ */ a({
+  ...b,
   inheritAttrs: !1,
   __name: "ScalarSidebarFooter",
-  setup(b) {
+  setup(x) {
     const { cx: n } = f();
-    return (e, o) => (i(), a("div", c(d(s(n)("flex flex-col gap-3 p-3 border-t"))), [
-      t(e.$slots, "default"),
-      r("div", _, [
-        r("div", u, [
-          t(e.$slots, "description", {}, () => [
-            o[0] || (o[0] = r("a", {
+    return (e, o) => (i(), l("div", d(c(s(n)("flex flex-col gap-3 p-3 border-t border-sidebar-border"))), [
+      r(e.$slots, "default"),
+      t("div", _, [
+        t("div", u, [
+          r(e.$slots, "description", {}, () => [
+            o[0] || (o[0] = t("a", {
               class: "no-underline hover:underline",
               href: "https://www.scalar.com",
               target: "_blank"
             }, " Powered by Scalar ", -1))
           ])
         ]),
-        t(e.$slots, "toggle", {}, () => [
+        r(e.$slots, "toggle", {}, () => [
           m(s(p))
         ])
       ])

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

@@ -24,18 +24,22 @@ import type { ScalarSidebarGroupSlots } from './types';
  */
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("./types").ScalarSidebarItemProps & {
     controlled?: boolean;
+    discrete?: boolean;
 } & {
     open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 } & {
     click: (event: MouseEvent) => any;
+    toggle: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<import("./types").ScalarSidebarItemProps & {
     controlled?: boolean;
+    discrete?: boolean;
 } & {
     open?: boolean;
 }> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
+    onToggle?: ((event: MouseEvent) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScalarSidebarGroupSlots>;
 export default _default;

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":"AAsHA,OAAO,KAAK,EAA2B,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAI/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;WAqCM,OAAO;;;;;;;;WAAP,OAAO;;;;;AApChB,wBAsLC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,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":"AAyKA,OAAO,KAAK,EAA2B,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAI/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;;WAwDM,OAAO;;;;;;;;;;WAAP,OAAO;;;;;;AAvDhB,wBAyQC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -1,85 +1,120 @@
-import { defineComponent as f, mergeModels as r, useModel as v, createBlock as b, openBlock as d, resolveDynamicComponent as k, normalizeProps as y, guardReactiveProps as B, unref as n, withCtx as t, renderSlot as l, createElementBlock as g, createCommentVNode as $, createVNode as s, createSlots as C } from "vue";
-import { useBindCx as S } from "@scalar/use-hooks/useBindCx";
-import _ from "./ScalarSidebarButton.vue.js";
-import h from "./ScalarSidebarGroupToggle.vue.js";
-import x from "./ScalarSidebarIndent.vue.js";
-import { useSidebarGroups as M } from "./useSidebarGroups.js";
-const G = {
+import { defineComponent as g, mergeModels as u, useModel as h, createBlock as k, openBlock as i, resolveDynamicComponent as $, normalizeProps as B, guardReactiveProps as C, unref as n, withCtx as t, createElementVNode as S, createElementBlock as r, createCommentVNode as p, renderSlot as l, createVNode as d, createSlots as N, normalizeStyle as V, createTextVNode as x, toDisplayString as z } from "vue";
+import { useBindCx as M } from "@scalar/use-hooks/useBindCx";
+import D from "./ScalarSidebarButton.vue.js";
+import v from "./ScalarSidebarGroupToggle.vue.js";
+import E from "./ScalarSidebarIndent.vue.js";
+import { useSidebarGroups as G } from "./useSidebarGroups.js";
+const O = { class: "group/group-button relative flex flex-col" }, P = {
+  key: 0,
+  class: "size-4"
+}, T = ["aria-expanded"], j = {
   key: 0,
   class: "group/items flex flex-col gap-px"
-}, N = {}, E = /* @__PURE__ */ f({
-  ...N,
+}, w = {}, K = /* @__PURE__ */ g({
+  ...w,
   inheritAttrs: !1,
   __name: "ScalarSidebarGroup",
-  props: /* @__PURE__ */ r({
+  props: /* @__PURE__ */ u({
     is: { default: "li" },
     icon: { type: [Object, Function] },
     active: { type: Boolean },
     selected: { type: Boolean },
     disabled: { type: Boolean },
     indent: {},
-    controlled: { type: Boolean }
+    controlled: { type: Boolean },
+    discrete: { type: Boolean }
   }, {
     open: { type: Boolean, default: !1 },
     openModifiers: {}
   }),
-  emits: /* @__PURE__ */ r(["click"], ["update:open"]),
-  setup(i, { emit: c }) {
-    const p = c, o = v(i, "open"), { level: a } = M({ increment: !0 }), { cx: u } = S(), m = (e) => {
-      p("click", e), i.controlled || (o.value = !o.value);
+  emits: /* @__PURE__ */ u(["click", "toggle"], ["update:open"]),
+  setup(a, { emit: m }) {
+    const c = m, o = h(a, "open"), { level: s } = G({ increment: !0 }), { cx: f } = M(), b = (e) => {
+      c("click", e), !a.controlled && !a.discrete && (o.value = !o.value);
+    }, y = (e) => {
+      c("toggle", e), !a.controlled && a.discrete && (o.value = !o.value);
     };
-    return (e, P) => (d(), b(k(e.is), y(B(n(u)("group/item flex flex-col gap-px"))), {
+    return (e, A) => (i(), k($(e.is), B(C(n(f)("group/item flex flex-col gap-px"))), {
       default: t(() => [
-        l(e.$slots, "button", {
-          level: n(a),
-          open: o.value
-        }, () => [
-          s(_, {
-            is: "button",
-            active: e.active,
-            "aria-expanded": o.value,
-            class: "group/group-button",
-            disabled: e.disabled,
-            indent: n(a),
-            selected: e.selected,
-            onClick: m
-          }, C({
-            indent: t(() => [
-              s(x, {
-                class: "mr-0",
-                indent: n(a)
-              }, null, 8, ["indent"])
-            ]),
-            icon: t(() => [
+        S("div", O, [
+          l(e.$slots, "before", { open: o.value }),
+          l(e.$slots, "button", {
+            level: n(s),
+            open: o.value
+          }, () => [
+            d(D, {
+              is: "button",
+              active: e.active,
+              "aria-expanded": o.value,
+              disabled: e.disabled,
+              indent: n(s),
+              selected: e.selected,
+              onClick: b
+            }, N({
+              indent: t(() => [
+                d(E, {
+                  class: "mr-0 -my-2",
+                  indent: n(s),
+                  selected: e.selected
+                }, null, 8, ["indent", "selected"])
+              ]),
+              icon: t(() => [
+                e.discrete ? (i(), r("div", P)) : l(e.$slots, "icon", {
+                  key: 1,
+                  open: o.value
+                }, () => [
+                  d(v, {
+                    icon: e.icon,
+                    class: "text-c-3",
+                    open: o.value
+                  }, null, 8, ["icon", "open"])
+                ])
+              ]),
+              default: t(() => [
+                l(e.$slots, "default", { open: o.value })
+              ]),
+              _: 2
+            }, [
+              e.$slots.aside ? {
+                name: "aside",
+                fn: t(() => [
+                  l(e.$slots, "aside", { open: o.value })
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["active", "aria-expanded", "disabled", "indent", "selected"]),
+            e.discrete ? (i(), r("button", {
+              key: 0,
+              type: "button",
+              "aria-expanded": o.value,
+              class: "absolute top-[1lh] -translate-y-1/2 p-0.75 rounded hover:bg-sidebar-b-hover left-[calc(4px+var(--scalar-sidebar-indent)*var(--scalar-sidebar-level))] text-c-3 hover:text-sidebar-c-1",
+              style: V({ "--scalar-sidebar-level": n(s) }),
+              onClick: y
+            }, [
               l(e.$slots, "icon", { open: o.value }, () => [
-                s(h, {
-                  class: "text-c-3",
+                d(v, {
+                  icon: e.icon,
                   open: o.value
-                }, null, 8, ["open"])
+                }, {
+                  label: t(() => [
+                    x(z(o.value ? "Close" : "Open") + " ", 1),
+                    l(e.$slots, "default", { open: o.value })
+                  ]),
+                  _: 3
+                }, 8, ["icon", "open"])
               ])
-            ]),
-            default: t(() => [
-              l(e.$slots, "default", { open: o.value })
-            ]),
-            _: 2
-          }, [
-            e.$slots.aside ? {
-              name: "aside",
-              fn: t(() => [
-                l(e.$slots, "aside", { open: o.value })
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["active", "aria-expanded", "disabled", "indent", "selected"])
+            ], 12, T)) : p("", !0)
+          ]),
+          l(e.$slots, "after", { open: o.value })
         ]),
-        o.value ? (d(), g("ul", G, [
+        o.value ? (i(), r("ul", j, [
           l(e.$slots, "items", { open: o.value })
-        ])) : $("", !0)
+        ])) : p("", !0)
       ]),
       _: 3
     }, 16));
   }
 });
 export {
-  E as default
+  K as default
 };

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

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

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

@@ -1,4 +1,4 @@
-import { defineComponent as o, computed as c, createElementBlock as t, openBlock as n, normalizeProps as u, guardReactiveProps as b, unref as m, Fragment as f, renderList as p, createElementVNode as v, createCommentVNode as y, normalizeClass as g } from "vue";
+import { defineComponent as o, computed as c, createElementBlock as t, openBlock as n, normalizeProps as u, guardReactiveProps as b, unref as m, Fragment as f, renderList as p, createElementVNode as v, createCommentVNode as g, normalizeClass as y } from "vue";
 import { useBindCx as B } from "@scalar/use-hooks/useBindCx";
 const _ = {}, C = /* @__PURE__ */ o({
   ..._,
@@ -12,7 +12,7 @@ const _ = {}, C = /* @__PURE__ */ o({
   setup(d) {
     const a = c(() => Array.from({ length: d.indent }, (e, r) => r)), { cx: s } = B();
     return (e, r) => (n(), t("div", u(b(
-      m(s)("scalar-sidebar-indent -my-2 flex justify-center", {
+      m(s)("scalar-sidebar-indent flex justify-center", {
         "mr-[calc(20px-var(--scalar-sidebar-indent))]": e.indent > 0,
         "scalar-sidebar-indent-selected": e.selected
       })
@@ -24,11 +24,11 @@ const _ = {}, C = /* @__PURE__ */ o({
         r[0] || (r[0] = v("div", { class: "scalar-sidebar-indent-border absolute left-2 inset-y-0 w-border bg-sidebar-indent-border" }, null, -1)),
         i === a.value.length - 1 ? (n(), t("div", {
           key: 0,
-          class: g([
+          class: y([
             "absolute left-2 inset-y-0 w-border",
             e.disabled ? "" : e.selected ? "bg-sidebar-indent-border-active" : "group-hover/button:bg-sidebar-indent-border-hover"
           ])
-        }, null, 2)) : y("", !0)
+        }, null, 2)) : g("", !0)
       ]))), 128))
     ], 16));
   }

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

@@ -15,6 +15,14 @@ import type { ScalarSidebarItemProps, ScalarSidebarItemSlots } from './types';
  *   <template #aside>
  *     <!-- After the button text -->
  *   </template>
+ *   <!-- Content to display before the button but inside the list item -->
+ *   <template #before>
+ *     <!-- Before the button -->
+ *   </template>
+ *   <!-- Content to display after the button but inside the list item -->
+ *   <template #after>
+ *     <!-- After the button -->
+ *   </template>
  * </ScalarSidebarItem>
  */
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ScalarSidebarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarSidebarItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScalarSidebarItemSlots>;

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarItem.vue"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI7E;;;;;;;;;;;;;;;;;GAiBG;;AACH,wBAyEC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarItem.vue"],"names":[],"mappings":"AAgFA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI7E;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;AACH,wBA6FC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -1,8 +1,9 @@
-import { defineComponent as r, useSlots as s, createElementBlock as i, openBlock as a, createVNode as l, mergeProps as p, unref as c, createSlots as d, renderList as _, withCtx as m, renderSlot as u } from "vue";
-import f from "./ScalarSidebarButton.vue.js";
-import { useSidebarGroups as S } from "./useSidebarGroups.js";
-const B = { class: "group/item contents" }, b = {}, C = /* @__PURE__ */ r({
-  ...b,
+import { defineComponent as a, createElementBlock as d, openBlock as f, normalizeProps as p, guardReactiveProps as m, unref as t, renderSlot as o, createVNode as c, mergeProps as u, createSlots as $, withCtx as n } from "vue";
+import { useBindCx as v } from "@scalar/use-hooks/useBindCx";
+import y from "./ScalarSidebarButton.vue.js";
+import { useSidebarGroups as b } from "./useSidebarGroups.js";
+const B = {}, P = /* @__PURE__ */ a({
+  ...B,
   inheritAttrs: !1,
   __name: "ScalarSidebarItem",
   props: {
@@ -11,25 +12,43 @@ const B = { class: "group/item contents" }, b = {}, C = /* @__PURE__ */ r({
     active: { type: Boolean },
     selected: { type: Boolean },
     disabled: { type: Boolean },
-    indent: { default: () => {
-    } }
+    indent: {}
   },
-  setup(h) {
-    const o = s(), { level: n } = S();
-    return (e, y) => (a(), i("li", B, [
-      l(f, p({ ...e.$attrs, ...e.$props }, {
-        indent: e.indent ?? c(n)
-      }), d({ _: 2 }, [
-        _(o, ($, t) => ({
-          name: t,
-          fn: m(() => [
-            u(e.$slots, t)
-          ])
-        }))
-      ]), 1040, ["indent"])
-    ]));
+  setup(r) {
+    const i = r, { level: s } = b(), { cx: l } = v();
+    return (e, k) => (f(), d("li", p(m(t(l)("group/item flex flex-col"))), [
+      o(e.$slots, "before"),
+      o(e.$slots, "button", { level: t(s) }, () => [
+        c(y, u(i, {
+          indent: e.indent ?? t(s)
+        }), $({ _: 2 }, [
+          e.$slots.default ? {
+            name: "default",
+            fn: n(() => [
+              o(e.$slots, "default")
+            ]),
+            key: "0"
+          } : void 0,
+          e.$slots.icon ? {
+            name: "icon",
+            fn: n(() => [
+              o(e.$slots, "icon")
+            ]),
+            key: "1"
+          } : void 0,
+          e.$slots.aside ? {
+            name: "aside",
+            fn: n(() => [
+              o(e.$slots, "aside")
+            ]),
+            key: "2"
+          } : void 0
+        ]), 1040, ["indent"])
+      ]),
+      o(e.$slots, "after")
+    ], 16));
   }
 });
 export {
-  C as default
+  P as default
 };

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

@@ -16,6 +16,7 @@
  */
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("./types").ScalarSidebarItemProps & {
     controlled?: boolean;
+    discrete?: boolean;
 } & {
     open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -24,6 +25,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("./
     click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<import("./types").ScalarSidebarItemProps & {
     controlled?: boolean;
+    discrete?: boolean;
 } & {
     open?: boolean;
 }> & Readonly<{

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarNestedItems.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"names":[],"mappings":"AAyLA;;;;;;;;;;;;;;;GAeG;;;;WAiFM,OAAO;;;;;;;;WAAP,OAAO;;;;;IAjEd,qCAAqC;cACzB,MAAM,OAAO;IACzB,iCAAiC;aACtB,MAAM,OAAO;IACxB,wBAAwB;WACf,MAAM,OAAO;IACtB,8BAA8B;YACpB,MAAM,OAAO;IACvB,+BAA+B;WACtB,MAAM,OAAO;IACtB,qCAAqC;mBACtB,MAAM,OAAO;IAC5B,mCAAmC;YACzB,MAAM,OAAO;;AA5BzB,wBAkTC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarNestedItems.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"names":[],"mappings":"AAyLA;;;;;;;;;;;;;;;GAeG;;;;;WAiFM,OAAO;;;;;;;;;WAAP,OAAO;;;;;IAjEd,qCAAqC;cACzB,MAAM,OAAO;IACzB,iCAAiC;aACtB,MAAM,OAAO;IACxB,wBAAwB;WACf,MAAM,OAAO;IACtB,8BAA8B;YACpB,MAAM,OAAO;IACvB,+BAA+B;WACtB,MAAM,OAAO;IACtB,qCAAqC;mBACtB,MAAM,OAAO;IAC5B,mCAAmC;YACzB,MAAM,OAAO;;AA5BzB,wBAmTC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}