@scalar/components 0.14.12 → 0.14.13

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAyGA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;CAClC,CAAA;AAkCD,iBAAS,cAAc;WA8HT,OAAO,IAA6B;;QA9IhD,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;QAJP,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;;;EA+IR;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aApLR,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;kFAyLhB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAwGA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;CAClC,CAAA;AAkCD,iBAAS,cAAc;WA0HT,OAAO,IAA6B;;QA1IhD,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;QAJP,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;;;EA2IR;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAhLR,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;kFAqLhB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarListbox/ScalarListbox.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as c, createBlock as r, openBlock as o, unref as t, withCtx as l, createCommentVNode as m, createVNode as i, createTextVNode as b, toDisplayString as y, mergeProps as u, renderSlot as V, createElementBlock as p, createElementVNode as g, Fragment as B, renderList as _, normalizeStyle as k } from "vue";
+import { defineComponent as c, createBlock as i, openBlock as o, unref as t, withCtx as l, createCommentVNode as n, createVNode as r, createTextVNode as y, toDisplayString as b, mergeProps as p, renderSlot as V, createElementBlock as d, createElementVNode as B, Fragment as _, renderList as g, normalizeStyle as k } from "vue";
 import { Listbox as x, ListboxLabel as L, ListboxButton as h, ListboxOptions as $ } from "@headlessui/vue";
-import { useBindCx as v } from "@scalar/use-hooks/useBindCx";
-import S from "./ScalarListboxItem.vue.js";
-import C from "../ScalarFloating/ScalarFloating.vue.js";
-import N from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
-const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
+import { useBindCx as S } from "@scalar/use-hooks/useBindCx";
+import C from "./ScalarListboxItem.vue.js";
+import N from "../ScalarFloating/ScalarFloating.vue.js";
+import v from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
+const w = { class: "custom-scroll min-h-0 flex-1" }, T = /* @__PURE__ */ c({
   inheritAttrs: !1,
   __name: "ScalarListbox",
   props: {
@@ -22,50 +22,49 @@ const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
   },
   emits: ["update:modelValue"],
   setup(z) {
-    const { cx: d } = v();
-    return (e, s) => (o(), r(t(x), {
+    const { cx: u } = S();
+    return (e, m) => (o(), i(t(x), {
       modelValue: e.modelValue,
       multiple: e.multiple,
-      "onUpdate:modelValue": s[0] || (s[0] = (a) => e.$emit("update:modelValue", a))
+      "onUpdate:modelValue": m[0] || (m[0] = (a) => e.$emit("update:modelValue", a))
     }, {
       default: l(({ open: a }) => [
-        e.label ? (o(), r(t(L), {
+        e.label ? (o(), i(t(L), {
           key: 0,
           class: "sr-only"
         }, {
           default: l(() => [
-            b(y(e.label), 1)
+            y(b(e.label), 1)
           ]),
           _: 1
-        })) : m("", !0),
-        i(t(C), u(e.$props, {
+        })) : n("", !0),
+        r(t(N), p(e.$props, {
           placement: e.placement ?? "bottom-start"
         }), {
           floating: l(({ width: f }) => [
-            a ? (o(), p("div", u({
+            a ? (o(), d("div", p({
               key: 0,
               style: { width: f }
-            }, t(d)("relative flex max-h-[inherit] w-40 rounded text-sm")), [
-              g("div", w, [
-                i(t($), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
+            }, t(u)("relative flex max-h-[inherit] w-40 rounded text-sm")), [
+              B("div", w, [
+                r(t($), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
                   default: l(() => [
-                    (o(!0), p(B, null, _(e.options, (n) => (o(), r(S, {
-                      key: n.id,
-                      option: n,
+                    (o(!0), d(_, null, g(e.options, (s) => (o(), i(C, {
+                      key: s.id,
+                      option: s,
                       style: k(e.multiple ? "checkbox" : "radio")
                     }, null, 8, ["option", "style"]))), 128))
                   ]),
                   _: 1
                 })
               ]),
-              i(t(N))
-            ], 16)) : m("", !0)
+              r(t(v))
+            ], 16)) : n("", !0)
           ]),
           default: l(() => [
-            i(t(h), {
+            r(t(h), {
               id: e.id,
-              as: "template",
-              class: "justify-start focus:outline-none focus-visible:ring-1 focus-visible:ring-c-accent"
+              as: "template"
             }, {
               default: l(() => [
                 V(e.$slots, "default", { open: a })
@@ -81,5 +80,5 @@ const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
   }
 });
 export {
-  P as default
+  T as default
 };

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

@@ -3,9 +3,8 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
-export declare const WithNavItems: Story;
 export declare const WithNestedGroups: Story;
-export declare const WithFooter: Story;
-export declare const WithSearchInput: Story;
+export declare const WithSections: Story;
+export declare const WithFooterContent: Story;
 export declare const WithSearchButton: Story;
 //# sourceMappingURL=ScalarSidebar.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAWrD,QAAA,MAAM,IAAI,EAAE,IA8BX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,YAAY,EAAE,KAqC1B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAqF9B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAA"}
+{"version":3,"file":"ScalarSidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAYrD,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,gBAAgB,EAAE,KAkE9B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAqD1B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAA"}

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import type { ScalarSidebarItemProps } from '../../components/ScalarSidebar/types';
 import { type SidebarGroupLevel } from './useSidebarGroups.js';
 /**
  * Scalar Sidebar Group component
@@ -17,17 +17,11 @@ import { type SidebarGroupLevel } from './useSidebarGroups.js';
  */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue?: boolean;
-} & {
-    /** Override the element tag */
-    is?: Component | string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+} & ScalarSidebarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<{
     modelValue?: boolean;
-} & {
-    /** Override the element tag */
-    is?: Component | string;
-}> & Readonly<{
+} & ScalarSidebarItemProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Readonly<{
     /** The text content of the toggle */

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":"AAsFA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC,OAAO,EAAE,KAAK,iBAAiB,EAAoB,MAAM,oBAAoB,CAAA;AAI7E;;;;;;;;;;;;;;GAcG;;iBAkCU,OAAO;;IA9BlB,+BAA+B;SAC1B,SAAS,GAAG,MAAM;;;;iBA6BZ,OAAO;;IA9BlB,+BAA+B;SAC1B,SAAS,GAAG,MAAM;;;;IAQvB,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;IALzC,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;AAjB3C,wBAkKC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"names":[],"mappings":"AA8FA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AAO9E,OAAO,EAAE,KAAK,iBAAiB,EAAoB,MAAM,oBAAoB,CAAA;AAI7E;;;;;;;;;;;;;;GAcG;;iBA+BU,OAAO;;;;iBAAP,OAAO;;;;IArBlB,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;IALzC,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;AAd3C,wBAgKC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

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

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

@@ -0,0 +1,5 @@
+import o from "./ScalarSidebarGroup.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

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

@@ -10,11 +10,15 @@ declare const _default: import("vue").DefineComponent<{
     indent?: SidebarGroupLevel;
     /** Whether the indent is selected @default false */
     selected?: boolean;
+    /** Whether the indent hover is disabled @default false */
+    disabled?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** The number of indents to render @default 0 */
     indent?: SidebarGroupLevel;
     /** Whether the indent is selected @default false */
     selected?: boolean;
+    /** Whether the indent hover is disabled @default false */
+    disabled?: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=ScalarSidebarIndent.vue.d.ts.map

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

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

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

@@ -1,7 +1,7 @@
 import a from "./ScalarSidebarIndent.vue2.js";
 /* empty css                         */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ o(a, [["__scopeId", "data-v-88b1a676"]]);
+const e = /* @__PURE__ */ o(a, [["__scopeId", "data-v-0ac3341b"]]);
 export {
-  m as default
+  e as default
 };

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

@@ -1,18 +1,19 @@
 import { defineComponent as o, computed as c, createElementBlock as t, openBlock as n, normalizeProps as u, guardReactiveProps as b, unref as m, Fragment as f, renderList as p, createElementVNode as v, createCommentVNode as g, normalizeClass as y } from "vue";
-import { useBindCx as _ } from "@scalar/use-hooks/useBindCx";
-const h = {}, C = /* @__PURE__ */ o({
-  ...h,
+import { useBindCx as B } from "@scalar/use-hooks/useBindCx";
+const _ = {}, C = /* @__PURE__ */ o({
+  ..._,
   inheritAttrs: !1,
   __name: "ScalarSidebarIndent",
   props: {
     indent: { default: 0 },
-    selected: { type: Boolean, default: !1 }
+    selected: { type: Boolean, default: !1 },
+    disabled: { type: Boolean }
   },
-  setup(s) {
-    const a = c(() => Array.from({ length: s.indent }, (e, r) => r)), { cx: d } = _();
+  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(d)("scalar-sidebar-indent flex justify-center", {
-        "mr-[calc(18px-var(--scalar-sidebar-indent))]": e.indent > 0,
+      m(s)("scalar-sidebar-indent flex justify-center", {
+        "mr-[calc(20px-var(--scalar-sidebar-indent))]": e.indent > 0,
         "scalar-sidebar-indent-selected": e.selected
       })
     )), [
@@ -20,12 +21,12 @@ const h = {}, C = /* @__PURE__ */ o({
         key: l,
         class: "relative w-[var(--scalar-sidebar-indent)]"
       }, [
-        r[0] || (r[0] = v("div", { class: "scalar-sidebar-indent-border absolute left-1.75 inset-y-0 w-border bg-sidebar-indent-border" }, null, -1)),
+        r[0] || (r[0] = v("div", { class: "scalar-sidebar-indent-border absolute left-1.5 inset-y-0 w-border bg-sidebar-indent-border" }, null, -1)),
         i === a.value.length - 1 ? (n(), t("div", {
           key: 0,
           class: y([
-            "absolute left-1.75 inset-y-0 w-border",
-            e.selected ? "bg-sidebar-indent-active" : "group-hover/button:bg-sidebar-indent-hover"
+            "absolute left-1.5 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)
       ]))), 128))

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

@@ -1,4 +1,4 @@
-import { defineComponent as o, createBlock as r, openBlock as a, resolveDynamicComponent as n, normalizeProps as s, guardReactiveProps as l, unref as p, withCtx as i, renderSlot as c } from "vue";
+import { defineComponent as o, createBlock as r, openBlock as a, resolveDynamicComponent as s, normalizeProps as n, guardReactiveProps as l, unref as p, withCtx as i, renderSlot as c } from "vue";
 import { useBindCx as f } from "@scalar/use-hooks/useBindCx";
 const u = {}, C = /* @__PURE__ */ o({
   ...u,
@@ -9,7 +9,7 @@ const u = {}, C = /* @__PURE__ */ o({
   },
   setup(m) {
     const { cx: t } = f();
-    return (e, _) => (a(), r(n(e.is), s(l(p(t)("flex flex-col p-3 gap-px"))), {
+    return (e, _) => (a(), r(s(e.is), n(l(p(t)("flex flex-col text-base p-3 gap-px"))), {
       default: i(() => [
         c(e.$slots, "default")
       ]),

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    indent: number;
+};
+type __VLS_PublicProps = {
+    'selected'?: string;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        search?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarSidebarPlayground.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarPlayground.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarPlayground.vue"],"names":[],"mappings":"AAkDA,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,CAAA;CACf,CAAC;AAaF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAwGT,OAAO,IAA6B;;wBAVtB,GAAG;yBACD,GAAG;wBACJ,GAAG;;;;EAa/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;6FAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"names":[],"mappings":"AA0CA,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC;AAYF,iBAAS,cAAc;WAiET,OAAO,IAA6B;;yBATrB,GAAG;0BACF,GAAG;;;;EAahC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarSearchButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"names":[],"mappings":"AA0CA,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC;AAYF,iBAAS,cAAc;WAkET,OAAO,IAA6B;;yBATrB,GAAG;0BACF,GAAG;;;;EAahC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -1,9 +1,9 @@
-import { defineComponent as d, createElementBlock as s, openBlock as o, mergeProps as c, unref as a, createVNode as p, createElementVNode as t, createCommentVNode as i, renderSlot as n, createTextVNode as u } from "vue";
+import { defineComponent as d, createElementBlock as s, openBlock as o, mergeProps as c, unref as n, createVNode as p, createElementVNode as t, createCommentVNode as i, renderSlot as a, createTextVNode as u } from "vue";
 import { ScalarIconMagnifyingGlass as b } from "@scalar/icons";
 import { useBindCx as m } from "@scalar/use-hooks/useBindCx";
 const f = { class: "flex-1 text-left leading-none" }, h = {
   key: 0,
-  class: "uppercase text-sidebar-c-2 bg-b-2 py-0.75 px-1.25 rounded"
+  class: "uppercase text-sidebar-c-2 bg-b-2 leading-none py-1 px-1.25 rounded"
 }, _ = /* @__PURE__ */ d({
   inheritAttrs: !1,
   __name: "ScalarSidebarSearchButton",
@@ -17,21 +17,21 @@ const f = { class: "flex-1 text-left leading-none" }, h = {
         type: "button",
         role: "search"
       },
-      a(l)(
+      n(l)(
         "flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1",
         "bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search"
       )
     ), [
-      p(a(b), { class: "size-4" }),
+      p(n(b), { class: "size-4" }),
       t("span", f, [
-        n(r.$slots, "default", {}, () => [
+        a(r.$slots, "default", {}, () => [
           e[0] || (e[0] = u("Search..."))
         ])
       ]),
       r.$slots.shortcut ? (o(), s("span", h, [
         e[1] || (e[1] = t("span", { class: "sr-only" }, "Keyboard Shortcut:", -1)),
         t("kbd", null, [
-          n(r.$slots, "shortcut")
+          a(r.$slots, "shortcut")
         ])
       ])) : i("", !0)
     ], 16));

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

@@ -0,0 +1,37 @@
+import type { ScalarSidebarItemProps } from './types';
+/**
+ * Scalar Sidebar Section component
+ *
+ * A section of the sidebar that can contain subitems
+ *
+ * @example
+ * <ScalarSidebarSection>
+ *   <!-- Section title -->
+ *   <template #title>
+ *     My Section
+ *   </template>
+ *   <!-- Section items -->
+ *   <template #items>
+ *     <ScalarSidebarItem>...</ScalarSidebarItem>
+ *     <ScalarSidebarItem>...</ScalarSidebarItem>
+ *   </template>
+ * </ScalarSidebarSection>
+ */
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<ScalarSidebarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarSidebarItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Readonly<{
+    /** The text content of the toggle */
+    default?: () => any;
+    /** The list of sidebar subitems */
+    items?: () => any;
+}> & {
+    /** The text content of the toggle */
+    default?: () => any;
+    /** The list of sidebar subitems */
+    items?: () => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarSidebarSection.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"names":[],"mappings":"AA0FA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAKrD;;;;;;;;;;;;;;;;;GAiBG;;IAQD,qCAAqC;cAC3B,MAAM,GAAG;IACnB,mCAAmC;YAC3B,MAAM,GAAG;;IAHjB,qCAAqC;cAC3B,MAAM,GAAG;IACnB,mCAAmC;YAC3B,MAAM,GAAG;;AAVnB,wBAsHC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,18 @@
+import type { SidebarGroupLevel } from './useSidebarGroups.js';
+/**
+ * Scalar Sidebar Spacer component
+ *
+ * Provide a styled spacer for the ScalarSidebar, handles the indent lines for nested groups
+ *
+ *
+ *
+ * @example
+ *   <ScalarSidebarSpacer />
+ */
+declare const _default: import("vue").DefineComponent<{
+    indent: SidebarGroupLevel;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    indent: SidebarGroupLevel;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarSidebarSpacer.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSpacer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSpacer.vue"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAI3D;;;;;;;;;GASG;;YAG0B,iBAAiB;;YAAjB,iBAAiB;;AAF9C,wBA2EC"}