@scalar/components 0.15.0 → 0.16.0

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));
   }

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":"AAmDA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI7E;;;;;;;;;;;;;;;;;GAiBG;;AACH,wBAwEC;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":"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"}

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

@@ -1,29 +1,29 @@
-import { defineComponent as r, useSlots as s, createElementBlock as i, openBlock as a, createVNode as l, mergeProps as p, unref as d, createSlots as c, renderList as _, withCtx as m, renderSlot as f } from "vue";
-import u from "./ScalarSidebarButton.vue.js";
+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" }, h = {}, C = /* @__PURE__ */ r({
-  ...h,
+const B = { class: "group/item contents" }, b = {}, C = /* @__PURE__ */ r({
+  ...b,
   inheritAttrs: !1,
   __name: "ScalarSidebarItem",
   props: {
     is: {},
-    icon: {},
+    icon: { type: [Object, Function] },
     active: { type: Boolean },
     selected: { type: Boolean },
     disabled: { type: Boolean },
     indent: { default: () => {
     } }
   },
-  setup($) {
+  setup(h) {
     const o = s(), { level: n } = S();
-    return (e, b) => (a(), i("li", B, [
-      l(u, p({ ...e.$attrs, ...e.$props }, {
-        indent: e.indent ?? d(n)
-      }), c({ _: 2 }, [
-        _(o, (v, t) => ({
+    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(() => [
-            f(e.$slots, t)
+            u(e.$slots, t)
           ])
         }))
       ]), 1040, ["indent"])

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

@@ -1,4 +1,3 @@
-import type { ScalarSidebarItemProps } from './types';
 /**
  * Scalar Sidebar Nested Items component
  *
@@ -15,14 +14,18 @@ import type { ScalarSidebarItemProps } from './types';
  *   </template>
  * </ScalarSidebarNestedItems>
  */
-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;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** The text content of the button */
     default?: () => unknown;

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":"AAmKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAKrD;;;;;;;;;;;;;;;GAeG;;iBAgEU,OAAO;;;;iBAAP,OAAO;;;;IAvDlB,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;;AArBzB,wBAkSC;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":"AAyKA;;;;;;;;;;;;;;;GAeG;;;;WAgEM,OAAO;;;;;;WAAP,OAAO;;;;IAvDd,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;;AArBzB,wBAkSC;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/ScalarSidebarNestedItems.vue.js

@@ -0,0 +1,123 @@
+import { defineComponent as y, mergeModels as C, useModel as k, useTemplateRef as g, ref as B, createElementBlock as d, openBlock as u, normalizeStyle as T, normalizeClass as z, renderSlot as o, createVNode as t, mergeProps as I, unref as r, withCtx as s, Transition as N, createCommentVNode as _, normalizeProps as A, guardReactiveProps as w, createTextVNode as L, nextTick as c } from "vue";
+import { ScalarIconArrowRight as M, ScalarIconCaretLeft as P, ScalarIconListDashes as R } from "@scalar/icons";
+import f from "./ScalarSidebarButton.vue.js";
+import V from "./ScalarSidebarItems.vue.js";
+/* empty css                        */
+import h from "./ScalarSidebarSpacer.vue.js";
+import { findScrollContainer as p } from "./findScrollContainer.js";
+import { useSidebarGroups as q } from "./useSidebarGroups.js";
+import { useSidebarNestedItem as E } from "./useSidebarNestedItems.js";
+import O from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
+const j = {
+  key: 0,
+  class: "absolute inset-0 translate-x-full"
+}, x = {}, Y = /* @__PURE__ */ y({
+  ...x,
+  inheritAttrs: !1,
+  __name: "ScalarSidebarNestedItems",
+  props: /* @__PURE__ */ C({
+    is: {},
+    icon: { type: [Object, Function], default: R },
+    active: { type: Boolean },
+    selected: { type: Boolean },
+    disabled: { type: Boolean },
+    indent: {},
+    controlled: { type: Boolean }
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(m) {
+    const l = k(m, "open");
+    E(l);
+    const { level: v } = q({ reset: !0 }), a = g("el"), i = B(0);
+    function b() {
+      i.value = p(a.value).scrollTop ?? 0, c(
+        () => a.value?.querySelector('button:not([aria-expanded="true"])')?.focus({ preventScroll: !0 })
+      );
+    }
+    function $() {
+      c(() => {
+        a.value?.querySelector("button")?.focus({ preventScroll: !0 }), p(a.value).scrollTop = i.value;
+      });
+    }
+    return (e, n) => (u(), d("li", {
+      ref_key: "el",
+      ref: a,
+      class: z(["group/item group/nested-items contents", { "group/nested-items-open": l.value }]),
+      style: T({ "--nested-items-offset": `${i.value}px` })
+    }, [
+      o(e.$slots, "button", {}, () => [
+        t(f, I({
+          is: "button",
+          "aria-expanded": l.value,
+          class: "text-c-1 font-sidebar-active",
+          disabled: e.disabled,
+          indent: r(v),
+          selected: e.selected
+        }, e.$attrs, {
+          onClick: n[0] || (n[0] = (S) => !e.controlled && (l.value = !0))
+        }), {
+          icon: s(() => [
+            o(e.$slots, "icon", {}, () => [
+              t(r(O), {
+                icon: e.icon,
+                weight: "bold"
+              }, null, 8, ["icon"])
+            ])
+          ]),
+          aside: s(() => [
+            o(e.$slots, "aside", {}, () => [
+              t(r(M), { class: "size-4 text-c-2" })
+            ])
+          ]),
+          default: s(() => [
+            o(e.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["aria-expanded", "disabled", "indent", "selected"])
+      ]),
+      t(N, {
+        duration: 300,
+        enterActiveClass: "top-(--nested-items-offset)",
+        leaveActiveClass: "top-(--nested-items-offset)",
+        onEnter: b,
+        onLeave: $
+      }, {
+        default: s(() => [
+          l.value ? (u(), d("div", j, [
+            t(V, A(w(e.$attrs)), {
+              default: s(() => [
+                o(e.$slots, "back", {}, () => [
+                  t(f, {
+                    is: "button",
+                    class: "text-c-1 font-sidebar-active",
+                    onClick: n[1] || (n[1] = (S) => !e.controlled && (l.value = !1))
+                  }, {
+                    icon: s(() => [
+                      t(r(P), { class: "size-4 -m-px text-c-2" })
+                    ]),
+                    default: s(() => [
+                      o(e.$slots, "back-label", {}, () => [
+                        n[2] || (n[2] = L("Back", -1))
+                      ])
+                    ]),
+                    _: 3
+                  })
+                ]),
+                t(h, { class: "h-3" }),
+                o(e.$slots, "items")
+              ]),
+              _: 3
+            }, 16)
+          ])) : _("", !0)
+        ]),
+        _: 3
+      })
+    ], 6));
+  }
+});
+export {
+  Y as default
+};

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

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

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

@@ -25,7 +25,7 @@ const f = { class: "flex-1 text-left leading-none" }, h = {
       p(n(b), { class: "size-4" }),
       t("span", f, [
         a(r.$slots, "default", {}, () => [
-          e[0] || (e[0] = u("Search..."))
+          e[0] || (e[0] = u("Search...", -1))
         ])
       ]),
       r.$slots.shortcut ? (o(), s("span", h, [

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

@@ -1,9 +1,9 @@
-import { defineComponent as f, mergeModels as p, ref as m, useModel as b, onMounted as h, createElementBlock as g, openBlock as r, normalizeProps as v, guardReactiveProps as S, unref as e, createVNode as k, withDirectives as x, createBlock as s, createCommentVNode as y, createElementVNode as C, mergeProps as M, vModelText as V, withModifiers as z } from "vue";
+import { defineComponent as f, mergeModels as p, ref as m, useModel as b, onMounted as h, createElementBlock as g, openBlock as r, normalizeProps as v, guardReactiveProps as S, unref as e, createVNode as k, withDirectives as y, createBlock as s, createCommentVNode as x, createElementVNode as C, mergeProps as M, vModelText as V, withModifiers as z } from "vue";
 import { ScalarIconMagnifyingGlass as B, ScalarIconX as w } from "@scalar/icons";
-import { useBindCx as E } from "@scalar/use-hooks/useBindCx";
-import I from "../ScalarLoading/ScalarLoading.vue.js";
-import N from "../ScalarIconButton/ScalarIconButton.vue.js";
-const P = ["aria-label"], D = /* @__PURE__ */ f({
+import { useBindCx as A } from "@scalar/use-hooks/useBindCx";
+import E from "../ScalarLoading/ScalarLoading.vue.js";
+import I from "../ScalarIconButton/ScalarIconButton.vue.js";
+const N = ["aria-label"], D = /* @__PURE__ */ f({
   inheritAttrs: !1,
   __name: "ScalarSidebarSearchInput",
   props: /* @__PURE__ */ p({
@@ -20,7 +20,7 @@ const P = ["aria-label"], D = /* @__PURE__ */ f({
     function i() {
       a.value = "", o.value && o.value.focus();
     }
-    const { classCx: c, otherAttrs: u } = E();
+    const { stylingAttrsCx: c, otherAttrs: u } = A();
     return h(() => t.autofocus && o.value?.focus()), (l, n) => (r(), g("label", v(S(
       e(c)(
         "flex items-center rounded border text-base has-[:focus-visible]:bg-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5",
@@ -29,7 +29,7 @@ const P = ["aria-label"], D = /* @__PURE__ */ f({
       )
     )), [
       k(e(B), { class: "text-sidebar-c-search size-4" }),
-      x(C("input", M({
+      y(C("input", M({
         ref_key: "inputRef",
         ref: o,
         "aria-label": l.label ?? "Enter search query",
@@ -42,22 +42,22 @@ const P = ["aria-label"], D = /* @__PURE__ */ f({
         type: "search"
       }, e(u), {
         "onUpdate:modelValue": n[0] || (n[0] = (d) => a.value = d)
-      }), null, 16, P), [
+      }), null, 16, N), [
         [V, a.value]
       ]),
-      l.loading && l.loading.isLoading ? (r(), s(e(I), {
+      l.loading && l.loading.isLoading ? (r(), s(e(E), {
         key: 0,
         class: "mr-3 self-center",
         loadingState: l.loading,
         size: "md"
-      }, null, 8, ["loadingState"])) : a.value ? (r(), s(e(N), {
+      }, null, 8, ["loadingState"])) : a.value ? (r(), s(e(I), {
         key: 1,
         class: "p-0.25 size-4",
         icon: e(w),
         weight: "bold",
         label: "Clear Search",
         onClick: z(i, ["stop", "prevent"])
-      }, null, 8, ["icon"])) : y("", !0)
+      }, null, 8, ["icon"])) : x("", !0)
     ], 16));
   }
 });

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

@@ -1,4 +1,4 @@
-import { defineComponent as c, createElementBlock as d, openBlock as s, createVNode as n, createBlock as p, unref as o, withCtx as i, renderSlot as r, resolveDynamicComponent as f, normalizeProps as m, guardReactiveProps as u } from "vue";
+import { defineComponent as c, createElementBlock as d, openBlock as s, createVNode as n, createBlock as p, unref as t, withCtx as i, renderSlot as r, resolveDynamicComponent as f, normalizeProps as m, guardReactiveProps as u } from "vue";
 import { useBindCx as _ } from "@scalar/use-hooks/useBindCx";
 import b from "./ScalarSidebarButton.vue.js";
 import a from "./ScalarSidebarSpacer.vue.js";
@@ -9,32 +9,32 @@ const g = { class: "group/item group/sidebar-section contents" }, h = {}, P = /*
   __name: "ScalarSidebarSection",
   props: {
     is: { default: "ul" },
-    icon: {},
+    icon: { type: [Object, Function] },
     active: { type: Boolean },
     selected: { type: Boolean },
     disabled: { type: Boolean },
     indent: {}
   },
   setup(v) {
-    const { level: t } = B({ increment: !1 }), { cx: l } = _();
+    const { level: o } = B({ increment: !1 }), { cx: l } = _();
     return (e, x) => (s(), d("li", g, [
       n(a, {
         class: "group/spacer-before h-3",
-        indent: o(t)
+        indent: t(o)
       }, null, 8, ["indent"]),
       n(b, {
         is: "div",
         class: "text-sm font-bold",
-        indent: o(t),
+        disabled: "",
         icon: e.icon,
-        disabled: ""
+        indent: t(o)
       }, {
         default: i(() => [
           r(e.$slots, "default")
         ]),
         _: 3
-      }, 8, ["indent", "icon"]),
-      (s(), p(f(e.is), m(u(o(l)("flex flex-col gap-px"))), {
+      }, 8, ["icon", "indent"]),
+      (s(), p(f(e.is), m(u(t(l)("flex flex-col gap-px"))), {
         default: i(() => [
           r(e.$slots, "items")
         ]),
@@ -42,7 +42,7 @@ const g = { class: "group/item group/sidebar-section contents" }, h = {}, P = /*
       }, 16)),
       n(a, {
         class: "group/spacer-after h-3",
-        indent: o(t)
+        indent: t(o)
       }, null, 8, ["indent"])
     ]));
   }

package/dist/components/ScalarSidebar/findScrollContainer.js

@@ -0,0 +1,22 @@
+function r(o) {
+  const t = window.getComputedStyle(o), [e, n] = t.overflow.split(" ");
+  return {
+    x: t.overflowX || e,
+    y: t.overflowY || n || e
+  };
+}
+function u(o, t = "y") {
+  if (!o)
+    return document.documentElement;
+  let e = o.parentElement;
+  for (; e; ) {
+    const l = r(e)[t];
+    if (l === "auto" || l === "scroll")
+      return e;
+    e = e.parentElement;
+  }
+  return document.documentElement;
+}
+export {
+  u as findScrollContainer
+};

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

@@ -3,9 +3,12 @@ export { default as ScalarSidebarButton } from './ScalarSidebarButton.vue.js';
 export { default as ScalarSidebarFooter } from './ScalarSidebarFooter.vue.js';
 export { default as ScalarSidebarGroup } from './ScalarSidebarGroup.vue.js';
 export { default as ScalarSidebarGroupToggle } from './ScalarSidebarGroupToggle.vue.js';
+export { default as ScalarSidebarIndent } from './ScalarSidebarIndent.vue.js';
 export { default as ScalarSidebarItem } from './ScalarSidebarItem.vue.js';
 export { default as ScalarSidebarItems } from './ScalarSidebarItems.vue.js';
+export { default as ScalarSidebarNestedItems } from './ScalarSidebarNestedItems.vue.js';
 export { default as ScalarSidebarSearchButton } from './ScalarSidebarSearchButton.vue.js';
 export { default as ScalarSidebarSearchInput } from './ScalarSidebarSearchInput.vue.js';
 export { default as ScalarSidebarSection } from './ScalarSidebarSection.vue.js';
+export { default as ScalarSidebarSpacer } from './ScalarSidebarSpacer.vue.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AACpF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AACtF,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AACpF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AACpF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AACpF,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AACtF,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AACpF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA"}