@scalar/components 0.15.1 → 0.16.0

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"}

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

@@ -1,7 +1,7 @@
+import type { ScalarIconComponent } from '@scalar/icons/types';
 import type { Component } from 'vue';
 import type { Icon } from '../ScalarIcon';
 import type { SidebarGroupLevel } from './useSidebarGroups.js';
-import type { ScalarIconComponent } from '@scalar/icons/types';
 /** Scalar Sidebar Item Props */
 export type ScalarSidebarItemProps = {
     /** Overrides the rendered element */
@@ -25,6 +25,29 @@ export type ScalarSidebarItemProps = {
     /** The level of the sidebar group */
     indent?: SidebarGroupLevel;
 };
+export type ScalarSidebarGroupProps = ScalarSidebarItemProps & {
+    /**
+     * Disables the internal open state for the group
+     *
+     *
+     * @example
+     * <script setup lang="ts">
+     * import { ref } from 'vue'
+     *
+     * // External state to control the group
+     * const myRef = ref(false)
+     * </script>
+     * <template>
+     *   <ScalarSidebarGroup
+     *     :open="myRef"
+     *     controlled
+     *     @click="myRef = !myRef">
+     *     ...
+     *   </ScalarSidebarGroup>
+     * </template>
+     */
+    controlled?: boolean;
+};
 /** Scalar Sidebar Item Slots */
 export type ScalarSidebarItemSlots = {
     /** The main text content of the button */
@@ -36,4 +59,33 @@ export type ScalarSidebarItemSlots = {
     /** The indent to display before content */
     indent?(): unknown;
 };
+/** Scalar Sidebar Item Slots */
+export type ScalarSidebarGroupSlots = {
+    /** The text content of the toggle */
+    default?(props: {
+        open: boolean;
+    }): unknown;
+    /** Override the entire toggle button */
+    button?(props: {
+        open: boolean;
+        level: SidebarGroupLevel;
+    }): unknown;
+    /** Icon for the sidebar group */
+    icon?(props: {
+        open: boolean;
+    }): unknown;
+    /** Override the entire toggle button */
+    button?(props: {
+        open: boolean;
+        level: SidebarGroupLevel;
+    }): unknown;
+    /** The content to display to the right of the text content */
+    aside?(props: {
+        open: boolean;
+    }): unknown;
+    /** The list of sidebar subitems */
+    items?(props: {
+        open: boolean;
+    }): unknown;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAE9D,gCAAgC;AAChC,MAAM,MAAM,sBAAsB,GAAG;IACnC,qCAAqC;IACrC,EAAE,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACvB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,mBAAmB,CAAA;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qCAAqC;IACrC,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAC3B,CAAA;AAED,gCAAgC;AAChC,MAAM,MAAM,sBAAsB,GAAG;IACnC,0CAA0C;IAC1C,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,wBAAwB;IACxB,IAAI,CAAC,IAAI,OAAO,CAAA;IAChB,8DAA8D;IAC9D,KAAK,CAAC,IAAI,OAAO,CAAA;IACjB,2CAA2C;IAC3C,MAAM,CAAC,IAAI,OAAO,CAAA;CACnB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAE3D,gCAAgC;AAChC,MAAM,MAAM,sBAAsB,GAAG;IACnC,qCAAqC;IACrC,EAAE,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACvB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,mBAAmB,CAAA;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qCAAqC;IACrC,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,sBAAsB,GAAG;IAC7D;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,gCAAgC;AAChC,MAAM,MAAM,sBAAsB,GAAG;IACnC,0CAA0C;IAC1C,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,wBAAwB;IACxB,IAAI,CAAC,IAAI,OAAO,CAAA;IAChB,8DAA8D;IAC9D,KAAK,CAAC,IAAI,OAAO,CAAA;IACjB,2CAA2C;IAC3C,MAAM,CAAC,IAAI,OAAO,CAAA;CACnB,CAAA;AACD,gCAAgC;AAChC,MAAM,MAAM,uBAAuB,GAAG;IACpC,qCAAqC;IACrC,OAAO,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;IAC3C,wCAAwC;IACxC,MAAM,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,GAAG,OAAO,CAAA;IACpE,iCAAiC;IACjC,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;IACxC,wCAAwC;IACxC,MAAM,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,GAAG,OAAO,CAAA;IACpE,8DAA8D;IAC9D,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;IACzC,mCAAmC;IACnC,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAC1C,CAAA"}

package/dist/components/ScalarSidebar/useSidebarNestedItems.js

@@ -1,12 +1,18 @@
-import { ref as r, computed as s, provide as n } from "vue";
-const c = Symbol(), S = () => {
-  const e = r([]), o = s(() => e.value.some((t) => t.value));
-  return n(c, e), {
+import { ref as n, computed as r, provide as u, inject as c, onBeforeUnmount as i } from "vue";
+const s = Symbol(), l = (t) => {
+  const e = c(s);
+  e && (e.value.push(t), i(() => {
+    e.value = e.value.filter((o) => o !== t);
+  }));
+}, m = () => {
+  const t = n([]), e = r(() => t.value.some((o) => o.value));
+  return u(s, t), {
     /** Whether or not any nested child items are open */
-    open: o
+    open: e
   };
 };
 export {
-  c as SIDEBAR_NESTED_ITEMS_SYMBOL,
-  S as useSidebarNestedItems
+  s as SIDEBAR_NESTED_ITEMS_SYMBOL,
+  l as useSidebarNestedItem,
+  m as useSidebarNestedItems
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"names":[],"mappings":"AAuDA;;;;;;;GAOG;;iBAuBU,MAAM;;;;iBAAN,MAAM;;;;AAtBnB,wBAwGC"}
+{"version":3,"file":"ScalarTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"names":[],"mappings":"AAyDA;;;;;;;GAOG;;iBAuBU,MAAM;;;;iBAAN,MAAM;;;;AAtBnB,wBA4GC"}

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

@@ -1,9 +1,9 @@
 import { defineComponent as u, useModel as m, onMounted as f, createBlock as d, openBlock as c, unref as t, mergeProps as l, withCtx as p, withDirectives as x, createElementVNode as _, vModelText as v } from "vue";
 import { useBindCx as h } from "@scalar/use-hooks/useBindCx";
 import { useTextareaAutosize as k } from "@vueuse/core";
-import C from "../ScalarForm/ScalarFormInput.vue.js";
-const V = {}, T = /* @__PURE__ */ u({
-  ...V,
+import A from "../ScalarForm/ScalarFormInput.vue.js";
+const C = {}, B = /* @__PURE__ */ u({
+  ...C,
   inheritAttrs: !1,
   __name: "ScalarTextArea",
   props: {
@@ -11,17 +11,21 @@ const V = {}, T = /* @__PURE__ */ u({
     modelModifiers: {}
   },
   emits: ["update:modelValue"],
-  setup(a) {
-    const o = m(a, "modelValue"), { textarea: r } = k({
+  setup(i) {
+    const o = m(i, "modelValue"), { textarea: r } = k({
       // @ts-expect-error - unexpected type mismatch
       input: o,
       styleProp: "minHeight"
-    }), { classCx: i, otherAttrs: n } = h();
+    }), { stylingAttrsCx: a, otherAttrs: n } = h();
     return f(() => {
       "autofocus" in n.value && r.value?.focus();
-    }), (w, e) => (c(), d(t(C), l({ is: "div" }, t(i)("custom-scroll flex text-c-1 min-h-0 shrink cursor-text"), {
-      onClick: e[1] || (e[1] = (s) => t(r)?.focus())
-    }), {
+    }), (V, e) => (c(), d(t(A), l(
+      { is: "div" },
+      t(a)("custom-scroll flex text-c-1 min-h-0 shrink cursor-text"),
+      {
+        onClick: e[1] || (e[1] = (s) => t(r)?.focus())
+      }
+    ), {
       default: p(() => [
         x(_("textarea", l({
           ref_key: "textarea",
@@ -36,5 +40,5 @@ const V = {}, T = /* @__PURE__ */ u({
   }
 });
 export {
-  T as default
+  B as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"names":[],"mappings":"AAwFA;;;;;;;GAOG;;eAGU,OAAO;;iBA6BP,MAAM;;;;eA7BN,OAAO;;iBA6BP,MAAM;;;;aA2GN,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;YAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;;AA7I3C,wBAkLC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarTextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"names":[],"mappings":"AA2FA;;;;;;;GAOG;;eAGU,OAAO;;iBA6BP,MAAM;;;;eA7BN,OAAO;;iBA6BP,MAAM;;;;aAiHN,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;YAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;;AAnJ3C,wBAwLC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarTextInput/ScalarTextInput.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as y, mergeModels as v, useModel as x, ref as _, onMounted as $, createBlock as k, openBlock as t, unref as r, mergeProps as c, withCtx as w, createElementVNode as i, renderSlot as o, createElementBlock as n, createCommentVNode as l, withDirectives as C, vModelDynamic as V, toDisplayString as b } from "vue";
-import { useBindCx as g } from "@scalar/use-hooks/useBindCx";
+import { defineComponent as y, mergeModels as v, useModel as x, ref as _, onMounted as $, createBlock as k, openBlock as t, unref as r, mergeProps as c, withCtx as w, createElementVNode as i, renderSlot as o, createElementBlock as n, createCommentVNode as l, withDirectives as C, vModelDynamic as g, toDisplayString as V } from "vue";
+import { useBindCx as b } from "@scalar/use-hooks/useBindCx";
 import B from "../ScalarForm/ScalarFormInput.vue.js";
-const M = { class: "flex flex-1 relative" }, D = {
+const M = { class: "flex flex-1 relative" }, A = {
   key: 0,
   class: "select-none whitespace-nowrap text-sm text-transparent"
-}, S = ["readonly", "aria-readonly"], A = {
+}, D = ["readonly", "aria-readonly"], S = {
   key: 1,
   class: "absolute inset-0 select-none overflow-hidden whitespace-nowrap text-sm"
 }, E = {
@@ -25,7 +25,7 @@ const M = { class: "flex flex-1 relative" }, D = {
   }),
   emits: ["update:modelValue"],
   setup(d) {
-    const a = x(d, "modelValue"), s = _(), { classCx: p, otherAttrs: u } = g();
+    const a = x(d, "modelValue"), s = _(), { stylingAttrsCx: p, otherAttrs: u } = b();
     $(() => {
       "autofocus" in u.value && s.value?.focus();
     });
@@ -34,12 +34,15 @@ const M = { class: "flex flex-1 relative" }, D = {
     }
     return (e, f) => (t(), k(r(B), c(
       { is: "div" },
-      r(p)("cursor-text text-c-1", e.readonly ? "" : "focus-within:bg-b-1"),
+      r(p)(
+        "cursor-text text-c-1",
+        e.readonly ? "" : "focus-within:bg-b-1"
+      ),
       { onClick: m }
     ), {
       default: w(() => [
         i("div", M, [
-          e.$slots.prefix ? (t(), n("span", D, [
+          e.$slots.prefix ? (t(), n("span", A, [
             o(e.$slots, "prefix")
           ])) : l("", !0),
           C(i("input", c({
@@ -49,14 +52,14 @@ const M = { class: "flex flex-1 relative" }, D = {
             readonly: e.readonly,
             "aria-readonly": e.readonly || void 0,
             class: "z-1 min-w-0 flex-1 border-none bg-transparent text-sm placeholder:font-[inherit] focus-within:outline-none"
-          }, r(u)), null, 16, S), [
-            [V, a.value]
+          }, r(u)), null, 16, D), [
+            [g, a.value]
           ]),
-          e.$slots.prefix || e.$slots.suffix ? (t(), n("div", A, [
+          e.$slots.prefix || e.$slots.suffix ? (t(), n("div", S, [
             e.$slots.prefix ? (t(), n("span", E, [
               o(e.$slots, "prefix")
             ])) : l("", !0),
-            i("span", N, b(a.value || e.$attrs.placeholder), 1),
+            i("span", N, V(a.value || e.$attrs.placeholder), 1),
             e.$slots.suffix ? (t(), n("span", z, [
               o(e.$slots, "suffix")
             ])) : l("", !0)

package/dist/components/ScalarToggle/ScalarToggleInput.vue.js

@@ -2,7 +2,7 @@ import { defineComponent as u, useModel as d, createBlock as i, openBlock as c,
 import { useBindCx as x } from "@scalar/use-hooks/useBindCx";
 import g from "./ScalarToggle.vue.js";
 import h from "../ScalarForm/ScalarFormInput.vue.js";
-const v = { class: "flex-1 text-left min-w-0 truncate" }, B = {}, w = /* @__PURE__ */ u({
+const v = { class: "flex-1 text-left min-w-0 truncate" }, B = {}, $ = /* @__PURE__ */ u({
   ...B,
   inheritAttrs: !1,
   __name: "ScalarToggleInput",
@@ -12,7 +12,7 @@ const v = { class: "flex-1 text-left min-w-0 truncate" }, B = {}, w = /* @__PURE
   },
   emits: ["update:modelValue"],
   setup(r) {
-    const e = d(r, "modelValue"), { classCx: a, otherAttrs: s } = x();
+    const e = d(r, "modelValue"), { stylingAttrsCx: a, otherAttrs: s } = x();
     return (n, o) => (c(), i(t(h), l(
       { is: "label" },
       t(a)("cursor-pointer gap-2 hover:bg-b-2", { "text-c-1": e.value })
@@ -32,5 +32,5 @@ const v = { class: "flex-1 text-left min-w-0 truncate" }, B = {}, w = /* @__PURE
   }
 });
 export {
-  w as default
+  $ as default
 };