@scalar/components 0.15.1 → 0.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarModal/ScalarModal.vue"],"names":[],"mappings":"AAgNA,+CAA+C;AAC/C,wBAAgB,QAAQ;;;;EAUvB;;WAMQ,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;WAHV,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;cA+LL,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;AAvM7C,wBAyOK;AAOL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarModal/ScalarModal.vue"],"names":[],"mappings":"AAyNA,+CAA+C;AAC/C,wBAAgB,QAAQ;;;;EAUvB;;WAMQ,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;;;WAHV,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;;;cAuML,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;AA/M7C,wBAoPK;AAOL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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 f } from "./ScalarModal.vue2.js";
 /* empty css                 */
-import a from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-589f8aa0"]]);
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1319c63c"]]);
 export {
   m as default,
-  s as useModal
+  f as useModal
 };

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

@@ -1,13 +1,13 @@
-import { defineComponent as x, createBlock as i, openBlock as l, unref as a, withCtx as t, createElementVNode as c, normalizeClass as o, createVNode as m, createElementBlock as r, createCommentVNode as d, normalizeStyle as w, createTextVNode as b, toDisplayString as y, renderSlot as n, reactive as g } from "vue";
-import { Dialog as z, DialogPanel as k, DialogTitle as C } from "@headlessui/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 b, createTextVNode as y, 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 S from "../ScalarIconButton/ScalarIconButton.vue.js";
-const $ = {
+import D from "../ScalarIconButton/ScalarIconButton.vue.js";
+const N = {
   key: 0,
   class: "close-button z-10 fixed right-2 top-2"
 };
-function W() {
-  return g({
+function M() {
+  return z({
     open: !1,
     show() {
       this.open = !0;
@@ -17,7 +17,7 @@ function W() {
     }
   });
 }
-const E = /* @__PURE__ */ x({
+const T = /* @__PURE__ */ x({
   __name: "ScalarModal",
   props: {
     state: {},
@@ -27,8 +27,9 @@ const E = /* @__PURE__ */ x({
     size: { default: "md" },
     variant: {}
   },
-  setup(D) {
-    const p = f({
+  emits: ["close"],
+  setup(V, { emit: p }) {
+    const u = p, h = f({
       base: [
         "scalar-modal",
         "flex flex-col relative 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)]"
@@ -49,7 +50,7 @@ const E = /* @__PURE__ */ x({
           error: "scalar-modal-error"
         }
       }
-    }), u = f({
+    }), c = f({
       base: ["scalar-modal-body", "relative flex-1 min-h-0 p-3"].join(" "),
       variants: {
         variant: {
@@ -68,12 +69,14 @@ const E = /* @__PURE__ */ x({
         }
       }
     });
-    return (e, s) => (l(), i(a(z), {
+    return (e, s) => (l(), i(a(k), {
       open: e.state.open,
-      onClose: s[1] || (s[1] = (h) => e.state.hide())
+      onClose: s[1] || (s[1] = () => {
+        e.state.hide(), u("close");
+      })
     }, {
       default: t(() => [
-        c("div", {
+        w("div", {
           class: o(
             a(v)(
               e.size === "full" ? "scalar-modal-layout-full" : "scalar-modal-layout",
@@ -84,17 +87,17 @@ const E = /* @__PURE__ */ x({
             )
           )
         }, [
-          m(a(k), {
-            class: o(a(p)({ size: e.size, variant: e.variant })),
-            style: w({ maxWidth: e.maxWidth })
+          m(a(C), {
+            class: o(a(h)({ size: e.size, variant: e.variant })),
+            style: b({ maxWidth: e.maxWidth })
           }, {
             default: t(() => [
-              e.title ? (l(), i(a(C), {
+              e.title ? (l(), i(a(S), {
                 key: 0,
                 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(() => [
-                  b(y(e.title), 1)
+                  y(g(e.title), 1)
                 ]),
                 _: 1
               })) : d("", !0),
@@ -105,19 +108,19 @@ const E = /* @__PURE__ */ x({
                 n(e.$slots, "default", {}, void 0, !0)
               ], 2)) : (l(), r("div", {
                 key: 2,
-                class: o(a(v)(a(u)({ size: e.size, variant: e.variant }), e.bodyClass))
+                class: o(a(v)(a(c)({ size: e.size, variant: e.variant }), e.bodyClass))
               }, [
                 n(e.$slots, "default", {}, void 0, !0)
               ], 2))
             ]),
             _: 3
           }, 8, ["class", "style"]),
-          e.size === "full" ? (l(), r("div", $, [
-            m(a(S), {
+          e.size === "full" ? (l(), r("div", N, [
+            m(a(D), {
               class: "hover:bg-b-3 focus:outline-none",
               icon: "Close",
               label: "Clear Search",
-              onClose: s[0] || (s[0] = (h) => e.state.hide())
+              onClose: s[0] || (s[0] = ($) => e.state.hide())
             })
           ])) : d("", !0)
         ], 2)
@@ -127,6 +130,6 @@ const E = /* @__PURE__ */ x({
   }
 });
 export {
-  E as default,
-  W as useModal
+  T as default,
+  M as useModal
 };

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

@@ -1,10 +1,10 @@
-import { defineComponent as p, mergeModels as f, useModel as m, ref as g, createElementBlock as h, openBlock as t, normalizeProps as v, guardReactiveProps as b, unref as e, createVNode as k, withDirectives as _, createBlock as n, createCommentVNode as C, createElementVNode as S, mergeProps as y, vModelText as V, withModifiers as M } from "vue";
+import { defineComponent as p, mergeModels as f, useModel as m, ref as g, createElementBlock as h, openBlock as t, normalizeProps as v, guardReactiveProps as b, unref as e, createVNode as k, withDirectives as _, createBlock as n, createCommentVNode as y, createElementVNode as C, mergeProps as S, vModelText as V, withModifiers as M } from "vue";
 import { ScalarIconMagnifyingGlass as x } from "@scalar/icons";
 import { useBindCx as z } from "@scalar/use-hooks/useBindCx";
 import B from "../ScalarLoading/ScalarLoading.vue.js";
-import E from "../ScalarIconButton/ScalarIconButton.vue.js";
-const N = ["aria-label"], P = {}, q = /* @__PURE__ */ p({
-  ...P,
+import A from "../ScalarIconButton/ScalarIconButton.vue.js";
+const E = ["aria-label"], N = {}, q = /* @__PURE__ */ p({
+  ...N,
   inheritAttrs: !1,
   __name: "ScalarSearchInput",
   props: /* @__PURE__ */ f({
@@ -20,14 +20,14 @@ const N = ["aria-label"], P = {}, q = /* @__PURE__ */ p({
     function i() {
       a.value = "", o.value && o.value.focus();
     }
-    const { classCx: c, otherAttrs: d } = z();
+    const { stylingAttrsCx: c, otherAttrs: d } = z();
     return (l, r) => (t(), h("label", v(b(
       e(c)(
         "flex items-center text-lg font-medium h-10 pl-3 pr-1 py-2 gap-2.25"
       )
     )), [
       k(e(x), { class: "text-sidebar-c-search size-4" }),
-      _(S("input", y({
+      _(C("input", S({
         ref_key: "inputRef",
         ref: o,
         "aria-label": l.label ?? "Enter search query",
@@ -40,7 +40,7 @@ const N = ["aria-label"], P = {}, q = /* @__PURE__ */ p({
         type: "search"
       }, e(d), {
         "onUpdate:modelValue": r[0] || (r[0] = (u) => a.value = u)
-      }), null, 16, N), [
+      }), null, 16, E), [
         [V, a.value]
       ]),
       l.loading && l.loading.isLoading ? (t(), n(e(B), {
@@ -48,14 +48,14 @@ const N = ["aria-label"], P = {}, q = /* @__PURE__ */ p({
         class: "self-center",
         loadingState: l.loading,
         size: "md"
-      }, null, 8, ["loadingState"])) : a.value ? (t(), n(e(E), {
+      }, null, 8, ["loadingState"])) : a.value ? (t(), n(e(A), {
         key: 1,
         class: "p-0 size-5",
         icon: "Close",
         label: "Clear Search",
         thickness: "1.5",
         onClick: M(i, ["stop", "prevent"])
-      })) : C("", !0)
+      })) : y("", !0)
     ], 16));
   }
 });

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.js

@@ -4,7 +4,7 @@ import u from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
 const f = ["aria-selected"], h = {
   key: 0,
   class: "flex h-fit items-center text-sm font-medium text-c-3 group-hover:text-c-1"
-}, _ = { class: "flex min-w-0 flex-1 flex-col gap-0.75" }, b = { class: "flex items-center gap-1" }, x = { class: "flex-1 truncate zoomed:!whitespace-normal break-words text-base font-medium" }, k = {
+}, b = { class: "flex min-w-0 flex-1 flex-col gap-0.75" }, _ = { class: "flex items-center gap-1" }, x = { class: "flex-1 truncate zoomed:!whitespace-normal break-words text-base font-medium" }, k = {
   key: 0,
   class: "text-base text-c-2"
 }, g = {
@@ -14,7 +14,7 @@ const f = ["aria-selected"], h = {
   inheritAttrs: !1,
   __name: "ScalarSearchResultItem",
   props: {
-    icon: {},
+    icon: { type: [Object, Function] },
     selected: { type: Boolean }
   },
   setup(v) {
@@ -34,14 +34,14 @@ const f = ["aria-selected"], h = {
         r(e.$slots, "icon", {}, () => [
           e.icon ? (t(), m(l(u), {
             key: 0,
-            icon: e.icon,
-            class: "size-4"
+            class: "size-4",
+            icon: e.icon
           }, null, 8, ["icon"])) : s("", !0)
         ]),
         i[0] || (i[0] = n("span", null, " ", -1))
       ])) : s("", !0),
-      n("div", _, [
-        n("div", b, [
+      n("div", b, [
+        n("div", _, [
           n("div", x, [
             r(e.$slots, "default")
           ]),

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":"AA4FA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAG7E;;;;;;;;;;;;;;;;;;;;;GAqBG;;AACH,wBAmIC;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":"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"}

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

@@ -1,29 +1,27 @@
-import { defineComponent as r, createBlock as i, openBlock as t, resolveDynamicComponent as c, mergeProps as u, unref as a, withCtx as f, renderSlot as s, createElementVNode as p, createElementBlock as n, createCommentVNode as o, createVNode as m } from "vue";
-import { cva as b, useBindCx as v } from "@scalar/use-hooks/useBindCx";
-import y from "./ScalarSidebarIndent.vue.js";
-import h from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
-const B = { class: "flex items-center gap-1 flex-1 py-2 leading-5" }, $ = {
+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 { 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: "size-4"
-}, g = {
-  key: 0,
-  class: "flex items-center"
-}, k = {}, w = /* @__PURE__ */ r({
-  ...k,
+  class: "h-[1lh] *:size-4 mr-1"
+}, k = { class: "flex-1 min-w-0" }, $ = {}, E = /* @__PURE__ */ l({
+  ...$,
   inheritAttrs: !1,
   __name: "ScalarSidebarButton",
   props: {
     is: { default: "a" },
-    icon: {},
+    icon: { type: [Object, Function] },
     active: { type: Boolean },
     selected: { type: Boolean },
     disabled: { type: Boolean },
     indent: { default: 0 }
   },
-  setup(C) {
-    const d = b({
+  setup(g) {
+    const i = m({
       base: [
-        "group/button flex items-stretch rounded px-2 font-sidebar text-c-2 no-underline"
+        "group/button flex items-stretch rounded p-2 ",
+        "font-sidebar leading-5 text-c-2 no-underline wrap-break-word"
       ],
       variants: {
         active: { true: "text-c-1 font-sidebar-active" },
@@ -34,38 +32,36 @@ const B = { class: "flex items-center gap-1 flex-1 py-2 leading-5" }, $ = {
         { selected: !1, disabled: !1, class: "hover:bg-b-2" }
       ],
       defaultVariants: { selected: !1, disabled: !1, active: !1 }
-    }), { cx: l } = v();
-    return (e, S) => (t(), i(c(e.is), u({
+    }), { cx: d } = v();
+    return (e, C) => (s(), o(r(e.is), c({
       "aria-selected": e.selected,
       type: e.is === "button" ? "button" : void 0
-    }, a(l)(a(d)({ selected: e.selected, disabled: e.disabled, active: e.active }))), {
-      default: f(() => [
-        s(e.$slots, "indent", {}, () => [
-          m(y, {
+    }, a(d)(a(i)({ selected: e.selected, disabled: e.disabled, active: e.active }))), {
+      default: u(() => [
+        t(e.$slots, "indent", {}, () => [
+          p(h, {
+            disabled: e.disabled,
             indent: e.indent,
-            selected: e.selected,
-            disabled: e.disabled
-          }, null, 8, ["indent", "selected", "disabled"])
+            selected: e.selected
+          }, null, 8, ["disabled", "indent", "selected"])
         ]),
-        p("div", B, [
-          e.icon || e.$slots.icon ? (t(), n("div", $, [
-            s(e.$slots, "icon", {}, () => [
-              e.icon ? (t(), i(a(h), {
-                key: 0,
-                icon: e.icon
-              }, null, 8, ["icon"])) : o("", !0)
-            ])
-          ])) : o("", !0),
-          s(e.$slots, "default")
+        e.icon || e.$slots.icon ? (s(), f("div", B, [
+          t(e.$slots, "icon", {}, () => [
+            e.icon ? (s(), o(a(y), {
+              key: 0,
+              icon: e.icon
+            }, null, 8, ["icon"])) : n("", !0)
+          ])
+        ])) : n("", !0),
+        b("div", k, [
+          t(e.$slots, "default")
         ]),
-        e.$slots.aside ? (t(), n("div", g, [
-          s(e.$slots, "aside")
-        ])) : o("", !0)
+        t(e.$slots, "aside")
       ]),
       _: 3
     }, 16, ["aria-selected", "type"]));
   }
 });
 export {
-  w as default
+  E as default
 };

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

@@ -1,12 +1,14 @@
-import type { ScalarSidebarItemProps } from '../../components/ScalarSidebar/types';
-import { type SidebarGroupLevel } from './useSidebarGroups.js';
+import type { ScalarSidebarGroupSlots } from './types';
 /**
  * Scalar Sidebar Group component
  *
- * A collapsible ScalarSidebarItem that can contain subitems
+ * A collapsible ScalarSidebarItem that can contain subitems.
+ *
+ * Classes applied to the component are passed to the inner list element.
+ * Other attributes (like click event) are passed to the toggle button.
  *
  * @example
- * <ScalarSidebarGroup v-model="open">
+ * <ScalarSidebarGroup>
  *   <!-- Group toggle text -->
  *   <template #items>
  *     <ScalarSidebarItem>...</ScalarSidebarItem>
@@ -14,34 +16,25 @@ import { type SidebarGroupLevel } from './useSidebarGroups.js';
  *     <ScalarSidebarItem>...</ScalarSidebarItem>
  *   </template>
  * </ScalarSidebarGroup>
+ *
+ *
+ * By default the component has it's own internal open state, but this can be
+ * controlled by passing the `controlled` prop and using binding the :open prop.
+ *
  */
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ScalarSidebarItemProps & {
-    modelValue?: boolean;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("./types").ScalarSidebarItemProps & {
+    controlled?: boolean;
+} & {
+    open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<ScalarSidebarItemProps & {
-    modelValue?: boolean;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("./types").ScalarSidebarItemProps & {
+    controlled?: boolean;
+} & {
+    open?: boolean;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    /** The text content of the toggle */
-    default?(props: {
-        open: boolean;
-    }): unknown;
-    /** Override the entire toggle button */
-    button?(props: {
-        open: boolean;
-        level: SidebarGroupLevel;
-    }): unknown;
-    /** The list of sidebar subitems */
-    items?(props: {
-        open: boolean;
-    }): unknown;
-    /** Side icon for the sidebar group */
-    icon?(props: {
-        open: boolean;
-    }): unknown;
-}>;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScalarSidebarGroupSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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":"AA2FA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AAM9E,OAAO,EAAE,KAAK,iBAAiB,EAAoB,MAAM,oBAAoB,CAAA;AAG7E;;;;;;;;;;;;;;GAcG;;iBA8BU,OAAO;;;;iBAAP,OAAO;;;;IAtBlB,qCAAqC;oBACrB;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO;IAC3C,wCAAwC;mBACzB;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,GAAG,OAAO;IACpE,mCAAmC;kBACrB;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO;IACzC,sCAAsC;iBACzB;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO;;AAd1C,wBAqKC;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":"AAuGA,OAAO,KAAK,EAA2B,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAI/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;WAqBM,OAAO;;;;;;WAAP,OAAO;;;;AApBhB,wBAyKC;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,75 +1,81 @@
-import { defineComponent as p, mergeModels as m, useModel as c, createElementBlock as f, openBlock as r, renderSlot as t, createBlock as v, createCommentVNode as b, unref as l, createVNode as s, withCtx as n, resolveDynamicComponent as B, normalizeProps as _, mergeProps as g } from "vue";
-import { useBindCx as $ } from "@scalar/use-hooks/useBindCx";
-import y from "./ScalarSidebarButton.vue.js";
-import C from "./ScalarSidebarGroupToggle.vue.js";
-import S from "./ScalarSidebarIndent.vue.js";
-import { useSidebarGroups as k } from "./useSidebarGroups.js";
-const V = { class: "group/item contents" }, x = {}, A = /* @__PURE__ */ p({
-  ...x,
+import { defineComponent as c, mergeModels as f, useModel as v, createElementBlock as b, openBlock as r, renderSlot as t, createBlock as y, createCommentVNode as g, unref as l, createVNode as s, mergeProps as d, createSlots as B, withCtx as n, resolveDynamicComponent as $, normalizeProps as C } from "vue";
+import { useBindCx as S } from "@scalar/use-hooks/useBindCx";
+import k from "./ScalarSidebarButton.vue.js";
+import _ from "./ScalarSidebarGroupToggle.vue.js";
+import h from "./ScalarSidebarIndent.vue.js";
+import { useSidebarGroups as x } from "./useSidebarGroups.js";
+const A = { class: "group/item flex flex-col gap-px" }, M = {}, D = /* @__PURE__ */ c({
+  ...M,
   inheritAttrs: !1,
   __name: "ScalarSidebarGroup",
-  props: /* @__PURE__ */ m({
+  props: /* @__PURE__ */ f({
     is: { default: "ul" },
-    icon: {},
+    icon: { type: [Object, Function] },
     active: { type: Boolean },
     selected: { type: Boolean },
     disabled: { type: Boolean },
-    indent: {}
+    indent: {},
+    controlled: { type: Boolean }
   }, {
-    modelValue: { type: Boolean, default: !1 },
-    modelModifiers: {}
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
   }),
-  emits: ["update:modelValue"],
-  setup(d) {
-    const e = c(d, "modelValue"), { level: a } = k({ increment: !0 }), { cx: u } = $();
-    return (o, i) => (r(), f("li", V, [
-      t(o.$slots, "button", {
+  emits: ["update:open"],
+  setup(p) {
+    const o = v(p, "open"), { level: a } = x({ increment: !0 }), { stylingAttrsCx: u, otherAttrs: m } = S();
+    return (e, i) => (r(), b("li", A, [
+      t(e.$slots, "button", {
         level: l(a),
-        open: !!e.value
+        open: o.value
       }, () => [
-        s(y, {
+        s(k, d({
           is: "button",
-          active: o.active,
-          "aria-expanded": e.value,
+          active: e.active,
+          "aria-expanded": o.value,
           class: "group/group-button",
-          disabled: o.disabled,
+          disabled: e.disabled,
           indent: l(a),
-          selected: o.selected,
-          onClick: i[0] || (i[0] = (M) => e.value = !e.value)
-        }, {
+          selected: e.selected
+        }, l(m), {
+          onClick: i[0] || (i[0] = (G) => !e.controlled && (o.value = !o.value))
+        }), B({
           indent: n(() => [
-            s(S, {
+            s(h, {
               class: "mr-0",
               indent: l(a)
             }, null, 8, ["indent"])
           ]),
           icon: n(() => [
-            t(o.$slots, "icon", { open: e.value }, () => [
-              s(C, {
+            t(e.$slots, "icon", { open: o.value }, () => [
+              s(_, {
                 class: "text-c-3",
-                open: e.value
+                open: o.value
               }, null, 8, ["open"])
             ])
           ]),
           default: n(() => [
-            t(o.$slots, "default", {
-              open: !!e.value
-            })
+            t(e.$slots, "default", { open: o.value })
           ]),
-          _: 3
-        }, 8, ["active", "aria-expanded", "disabled", "indent", "selected"])
+          _: 2
+        }, [
+          e.$slots.aside ? {
+            name: "aside",
+            fn: n(() => [
+              t(e.$slots, "aside", { open: o.value })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["active", "aria-expanded", "disabled", "indent", "selected"])
       ]),
-      e.value ? (r(), v(B(o.is), _(g({ key: 0 }, l(u)("group/items flex flex-col gap-px"))), {
+      o.value ? (r(), y($(e.is), C(d({ key: 0 }, l(u)("group/items flex flex-col gap-px"))), {
         default: n(() => [
-          t(o.$slots, "items", {
-            open: !!e.value
-          })
+          t(e.$slots, "items", { open: o.value })
         ]),
         _: 3
-      }, 16)) : b("", !0)
+      }, 16)) : g("", !0)
     ]));
   }
 });
 export {
-  A as default
+  D as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarGroupToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroupToggle.vue"],"names":[],"mappings":"AAsEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAG9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAGlE;;;;;;;GAOG;;IAGD,+BAA+B;SAC1B,SAAS,GAAG,MAAM;IACvB,wCAAwC;WACjC,OAAO;IACd,yBAAyB;WAClB,IAAI,GAAG,mBAAmB;;IALjC,+BAA+B;SAC1B,SAAS,GAAG,MAAM;IACvB,wCAAwC;WACjC,OAAO;IACd,yBAAyB;WAClB,IAAI,GAAG,mBAAmB;;IAKjC,+BAA+B;oBACf;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO;IAC3C,uCAAuC;kBACzB;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO;;AAf3C,wBAmHC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarGroupToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroupToggle.vue"],"names":[],"mappings":"AAqEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAGlE;;;;;;;GAOG;;IAGD,+BAA+B;SAC1B,SAAS,GAAG,MAAM;IACvB,wCAAwC;WACjC,OAAO;IACd,yBAAyB;WAClB,IAAI,GAAG,mBAAmB;;IALjC,+BAA+B;SAC1B,SAAS,GAAG,MAAM;IACvB,wCAAwC;WACjC,OAAO;IACd,yBAAyB;WAClB,IAAI,GAAG,mBAAmB;;IAKjC,+BAA+B;oBACf;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO;IAC3C,uCAAuC;kBACzB;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO;;AAf3C,wBAmHC;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/ScalarSidebarGroupToggle.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as i, createBlock as n, openBlock as t, resolveDynamicComponent as l, mergeProps as p, unref as o, withCtx as f, renderSlot as r, createElementVNode as c, createTextVNode as u, toDisplayString as d } from "vue";
+import { defineComponent as i, createBlock as n, openBlock as t, resolveDynamicComponent as p, mergeProps as l, unref as o, withCtx as c, renderSlot as r, createElementVNode as f, createTextVNode as u, toDisplayString as d } from "vue";
 import { ScalarIconCaretRight as m } from "@scalar/icons";
-import { cva as y, useBindCx as _ } from "@scalar/use-hooks/useBindCx";
-import b from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
+import { cva as y, useBindCx as b } from "@scalar/use-hooks/useBindCx";
+import _ from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
 const g = { class: "sr-only" }, h = {}, $ = /* @__PURE__ */ i({
   ...h,
   inheritAttrs: !1,
@@ -9,20 +9,20 @@ const g = { class: "sr-only" }, h = {}, $ = /* @__PURE__ */ i({
   props: {
     is: { default: "div" },
     open: { type: Boolean, default: !1 },
-    icon: {}
+    icon: { type: [Object, Function] }
   },
   setup(v) {
     const s = y({
       base: "size-4 flex items-center justify-center transition-transform duration-100",
       variants: { open: { true: "rotate-90" } },
       defaultVariants: { open: !1 }
-    }), { cx: a } = _();
-    return (e, C) => (t(), n(l(e.is), p({
+    }), { cx: a } = b();
+    return (e, C) => (t(), n(p(e.is), l({
       type: e.is === "button" ? "button" : void 0
     }, o(a)(o(s)({ open: e.open }))), {
-      default: f(() => [
+      default: c(() => [
         r(e.$slots, "default", { open: e.open }, () => [
-          e.icon ? (t(), n(o(b), {
+          e.icon ? (t(), n(o(_), {
             key: 0,
             icon: e.icon
           }, null, 8, ["icon"])) : (t(), n(o(m), {
@@ -31,7 +31,7 @@ const g = { class: "sr-only" }, h = {}, $ = /* @__PURE__ */ i({
             weight: "bold"
           }))
         ]),
-        c("span", g, [
+        f("span", g, [
           r(e.$slots, "label", { open: e.open }, () => [
             u(d(e.open ? "Close" : "Open") + " Group ", 1)
           ])

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

@@ -1,7 +1,7 @@
-import o from "./ScalarSidebarIndent.vue2.js";
+import a from "./ScalarSidebarIndent.vue2.js";
 /* empty css                         */
-import r from "../../_virtual/_plugin-vue_export-helper.js";
-const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-3e080c68"]]);
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ o(a, [["__scopeId", "data-v-48a21042"]]);
 export {
-  c as default
+  m 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 g, normalizeClass as y } 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 y, normalizeClass as g } 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 flex justify-center", {
+      m(s)("scalar-sidebar-indent -my-2 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: y([
+          class: g([
             "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)) : g("", !0)
+        }, null, 2)) : y("", !0)
       ]))), 128))
     ], 16));
   }