@scalar/components 0.22.5 → 0.23.0

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenu.vue"],"names":[],"mappings":"AA6GA,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,uCAAuC;eAC5B,qBAAqB,GAAG,OAAO;IAC1C,kCAAkC;iBACrB,mBAAmB,GAAG,OAAO;IAC1C,0DAA0D;gBAC9C,mBAAmB,GAAG,OAAO;IACzC,sCAAsC;iBACzB,mBAAmB,GAAG,OAAO;0BA+I1C,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenu.vue"],"names":[],"mappings":"AAkHA,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,uCAAuC;eAC5B,qBAAqB,GAAG,OAAO;IAC1C,kCAAkC;iBACrB,mBAAmB,GAAG,OAAO;IAC1C,0DAA0D;gBAC9C,mBAAmB,GAAG,OAAO;IACzC,sCAAsC;iBACzB,mBAAmB,GAAG,OAAO;0BAwJ1C,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarMenu/ScalarMenu.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenu.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu component\n *\n * A dropdown menu triggered by a logo button, containing product links,\n * team/workspace pickers, and resource sections.\n *\n * @example\n * <ScalarMenu>\n *   <template #products=\"{ close }\">Custom products</template>\n * </ScalarMenu>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { ref } from 'vue'\n\nimport { ScalarDropdownMenu } from '../ScalarDropdown'\nimport ScalarMenuButton from './ScalarMenuButton.vue'\nimport ScalarMenuProducts from './ScalarMenuProducts.vue'\nimport ScalarMenuResources from './ScalarMenuResources.vue'\nimport type {\n  ScalarMenuButtonProps,\n  ScalarMenuButtonSlots,\n  ScalarMenuSlotProps,\n} from './types'\n\ndefineSlots<\n  {\n    /** Overrides the entire menu button */\n    button?(p: ScalarMenuButtonProps): unknown\n    /** Overrides the products list */\n    products?(p: ScalarMenuSlotProps): unknown\n    /** Adds items the profile section (e.g. a team picker) */\n    profile?(p: ScalarMenuSlotProps): unknown\n    /** Overrides the resources section */\n    sections?(p: ScalarMenuSlotProps): unknown\n  } & ScalarMenuButtonSlots\n>()\n\ndefineOptions({ inheritAttrs: false })\n\n/** Whether the menu is open */\nconst open = ref(false)\n\n/** Close the menu */\nfunction close() {\n  open.value = false\n}\n</script>\n<template>\n  <DropdownMenu.Root v-model:open=\"open\">\n    <DropdownMenu.Trigger asChild>\n      <!-- Logo Button to open the popover -->\n      <slot\n        name=\"button\"\n        :open=\"open\">\n        <ScalarMenuButton\n          class=\"min-w-0\"\n          :open=\"open\">\n          <template\n            v-if=\"$slots.logo\"\n            #logo>\n            <slot name=\"logo\" />\n          </template>\n          <template\n            v-if=\"$slots.label\"\n            #label>\n            <slot name=\"label\" />\n          </template>\n        </ScalarMenuButton>\n      </slot>\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content\n      align=\"start\"\n      :as=\"ScalarDropdownMenu\"\n      class=\"max-h-radix-popper z-context\"\n      :sideOffset=\"5\"\n      v-bind=\"$attrs\">\n      <!-- Menu content -->\n      <!-- Base Product List (can be overridden by slot) -->\n      <slot\n        :close=\"close\"\n        name=\"products\">\n        <ScalarMenuProducts />\n      </slot>\n      <slot\n        :close=\"close\"\n        name=\"profile\" />\n      <slot\n        :close=\"close\"\n        name=\"sections\">\n        <ScalarMenuResources />\n      </slot>\n    </DropdownMenu.Content>\n  </DropdownMenu.Root>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarMenu.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu component\n *\n * A dropdown menu triggered by a logo button, containing product links,\n * team/workspace pickers, and resource sections.\n *\n * @example\n * <ScalarMenu>\n *   <template #products=\"{ close }\">Custom products</template>\n * </ScalarMenu>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { ref } from 'vue'\n\nimport { ScalarDropdownMenu } from '../ScalarDropdown'\nimport ScalarMenuButton from './ScalarMenuButton.vue'\nimport ScalarMenuProducts from './ScalarMenuProducts.vue'\nimport ScalarMenuResources from './ScalarMenuResources.vue'\nimport type {\n  ScalarMenuButtonProps,\n  ScalarMenuButtonSlots,\n  ScalarMenuSlotProps,\n} from './types'\n\ndefineSlots<\n  {\n    /** Overrides the entire menu button */\n    button?(p: ScalarMenuButtonProps): unknown\n    /** Overrides the products list */\n    products?(p: ScalarMenuSlotProps): unknown\n    /** Adds items the profile section (e.g. a team picker) */\n    profile?(p: ScalarMenuSlotProps): unknown\n    /** Overrides the resources section */\n    sections?(p: ScalarMenuSlotProps): unknown\n  } & ScalarMenuButtonSlots\n>()\n\ndefineOptions({ inheritAttrs: false })\n\n/** Whether the menu is open */\nconst open = ref(false)\n\n/** Close the menu */\nfunction close() {\n  open.value = false\n}\n</script>\n<template>\n  <DropdownMenu.Root v-model:open=\"open\">\n    <DropdownMenu.Trigger asChild>\n      <!-- Logo Button to open the popover -->\n      <slot\n        name=\"button\"\n        :open=\"open\">\n        <ScalarMenuButton\n          class=\"min-w-0\"\n          :open=\"open\">\n          <template\n            v-if=\"$slots.logo\"\n            #logo>\n            <slot name=\"logo\" />\n          </template>\n          <template\n            v-if=\"$slots.title\"\n            #title>\n            <slot name=\"title\" />\n          </template>\n          <template\n            v-if=\"$slots.label\"\n            #label>\n            <slot name=\"label\" />\n          </template>\n        </ScalarMenuButton>\n      </slot>\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content\n      align=\"start\"\n      :as=\"ScalarDropdownMenu\"\n      class=\"max-h-radix-popper z-context\"\n      :sideOffset=\"5\"\n      v-bind=\"$attrs\">\n      <!-- Menu content -->\n      <!-- Base Product List (can be overridden by slot) -->\n      <slot\n        :close=\"close\"\n        name=\"products\">\n        <ScalarMenuProducts />\n      </slot>\n      <slot\n        :close=\"close\"\n        name=\"profile\" />\n      <slot\n        :close=\"close\"\n        name=\"sections\">\n        <ScalarMenuResources />\n      </slot>\n    </DropdownMenu.Content>\n  </DropdownMenu.Root>\n</template>\n"],"mappings":""}

package/dist/components/ScalarMenu/ScalarMenu.vue.script.js

@@ -23,15 +23,23 @@ var ScalarMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					default: withCtx(() => [renderSlot(_ctx.$slots, "button", { open: open.value }, () => [createVNode(ScalarMenuButton_default, {
 						class: "min-w-0",
 						open: open.value
-					}, createSlots({ _: 2 }, [_ctx.$slots.logo ? {
-						name: "logo",
-						fn: withCtx(() => [renderSlot(_ctx.$slots, "logo")]),
-						key: "0"
-					} : void 0, _ctx.$slots.label ? {
-						name: "label",
-						fn: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
-						key: "1"
-					} : void 0]), 1032, ["open"])])]),
+					}, createSlots({ _: 2 }, [
+						_ctx.$slots.logo ? {
+							name: "logo",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "logo")]),
+							key: "0"
+						} : void 0,
+						_ctx.$slots.title ? {
+							name: "title",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
+							key: "1"
+						} : void 0,
+						_ctx.$slots.label ? {
+							name: "label",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
+							key: "2"
+						} : void 0
+					]), 1032, ["open"])])]),
 					_: 3
 				}), createVNode(unref(DropdownMenu).Content, mergeProps({
 					align: "start",

package/dist/components/ScalarMenu/ScalarMenu.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenu.vue.script.js","names":["$slots","$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu component\n *\n * A dropdown menu triggered by a logo button, containing product links,\n * team/workspace pickers, and resource sections.\n *\n * @example\n * <ScalarMenu>\n *   <template #products=\"{ close }\">Custom products</template>\n * </ScalarMenu>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { ref } from 'vue'\n\nimport { ScalarDropdownMenu } from '../ScalarDropdown'\nimport ScalarMenuButton from './ScalarMenuButton.vue'\nimport ScalarMenuProducts from './ScalarMenuProducts.vue'\nimport ScalarMenuResources from './ScalarMenuResources.vue'\nimport type {\n  ScalarMenuButtonProps,\n  ScalarMenuButtonSlots,\n  ScalarMenuSlotProps,\n} from './types'\n\ndefineSlots<\n  {\n    /** Overrides the entire menu button */\n    button?(p: ScalarMenuButtonProps): unknown\n    /** Overrides the products list */\n    products?(p: ScalarMenuSlotProps): unknown\n    /** Adds items the profile section (e.g. a team picker) */\n    profile?(p: ScalarMenuSlotProps): unknown\n    /** Overrides the resources section */\n    sections?(p: ScalarMenuSlotProps): unknown\n  } & ScalarMenuButtonSlots\n>()\n\ndefineOptions({ inheritAttrs: false })\n\n/** Whether the menu is open */\nconst open = ref(false)\n\n/** Close the menu */\nfunction close() {\n  open.value = false\n}\n</script>\n<template>\n  <DropdownMenu.Root v-model:open=\"open\">\n    <DropdownMenu.Trigger asChild>\n      <!-- Logo Button to open the popover -->\n      <slot\n        name=\"button\"\n        :open=\"open\">\n        <ScalarMenuButton\n          class=\"min-w-0\"\n          :open=\"open\">\n          <template\n            v-if=\"$slots.logo\"\n            #logo>\n            <slot name=\"logo\" />\n          </template>\n          <template\n            v-if=\"$slots.label\"\n            #label>\n            <slot name=\"label\" />\n          </template>\n        </ScalarMenuButton>\n      </slot>\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content\n      align=\"start\"\n      :as=\"ScalarDropdownMenu\"\n      class=\"max-h-radix-popper z-context\"\n      :sideOffset=\"5\"\n      v-bind=\"$attrs\">\n      <!-- Menu content -->\n      <!-- Base Product List (can be overridden by slot) -->\n      <slot\n        :close=\"close\"\n        name=\"products\">\n        <ScalarMenuProducts />\n      </slot>\n      <slot\n        :close=\"close\"\n        name=\"profile\" />\n      <slot\n        :close=\"close\"\n        name=\"sections\">\n        <ScalarMenuResources />\n      </slot>\n    </DropdownMenu.Content>\n  </DropdownMenu.Root>\n</template>\n"],"mappings":";;;;;;;;;;;EA6CA,MAAM,OAAO,IAAI,MAAK;;EAGtB,SAAS,QAAQ;AACf,QAAK,QAAQ;;;uBAIb,YA4CoB,MAAA,aAAA,CAAA,MAAA;IA5CO,MAAM,KAAA;gEAAI,QAAA;;2BAqBZ,CApBvB,YAoBuB,MAAA,aAAA,CAAA,SAAA,EApBD,SAAA,IAAO,EAAA;4BAmBpB,CAjBP,WAiBO,KAAA,QAAA,UAAA,EAfJ,MAAM,KAAA,OAAI,QAeN,CAdL,YAamB,0BAAA;MAZjB,OAAM;MACL,MAAM,KAAA;+BAECA,KAAAA,OAAO,OAAA;YACZ;wBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;iBAGdA,KAAAA,OAAO,QAAA;YACZ;wBACoB,CAArB,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA;;;;QAK7B,YAqBuB,MAAA,aAAA,CAAA,SArBvB,WAqBuB;KApBrB,OAAM;KACL,IAAI,MAAA,2BAAkB;KACvB,OAAM;KACL,YAAY;OACLC,KAAAA,OAAM,EAAA;4BAOP;MAJP,WAIO,KAAA,QAAA,YAAA,EAHG,OAAK,QAGR,CADL,YAAsB,2BAAA,CAAA,CAAA;MAExB,WAEmB,KAAA,QAAA,WAAA,EADT,OAAK,CAAA;MAEf,WAIO,KAAA,QAAA,YAAA,EAHG,OAAK,QAGR,CADL,YAAuB,4BAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarMenu.vue.script.js","names":["$slots","$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu component\n *\n * A dropdown menu triggered by a logo button, containing product links,\n * team/workspace pickers, and resource sections.\n *\n * @example\n * <ScalarMenu>\n *   <template #products=\"{ close }\">Custom products</template>\n * </ScalarMenu>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { ref } from 'vue'\n\nimport { ScalarDropdownMenu } from '../ScalarDropdown'\nimport ScalarMenuButton from './ScalarMenuButton.vue'\nimport ScalarMenuProducts from './ScalarMenuProducts.vue'\nimport ScalarMenuResources from './ScalarMenuResources.vue'\nimport type {\n  ScalarMenuButtonProps,\n  ScalarMenuButtonSlots,\n  ScalarMenuSlotProps,\n} from './types'\n\ndefineSlots<\n  {\n    /** Overrides the entire menu button */\n    button?(p: ScalarMenuButtonProps): unknown\n    /** Overrides the products list */\n    products?(p: ScalarMenuSlotProps): unknown\n    /** Adds items the profile section (e.g. a team picker) */\n    profile?(p: ScalarMenuSlotProps): unknown\n    /** Overrides the resources section */\n    sections?(p: ScalarMenuSlotProps): unknown\n  } & ScalarMenuButtonSlots\n>()\n\ndefineOptions({ inheritAttrs: false })\n\n/** Whether the menu is open */\nconst open = ref(false)\n\n/** Close the menu */\nfunction close() {\n  open.value = false\n}\n</script>\n<template>\n  <DropdownMenu.Root v-model:open=\"open\">\n    <DropdownMenu.Trigger asChild>\n      <!-- Logo Button to open the popover -->\n      <slot\n        name=\"button\"\n        :open=\"open\">\n        <ScalarMenuButton\n          class=\"min-w-0\"\n          :open=\"open\">\n          <template\n            v-if=\"$slots.logo\"\n            #logo>\n            <slot name=\"logo\" />\n          </template>\n          <template\n            v-if=\"$slots.title\"\n            #title>\n            <slot name=\"title\" />\n          </template>\n          <template\n            v-if=\"$slots.label\"\n            #label>\n            <slot name=\"label\" />\n          </template>\n        </ScalarMenuButton>\n      </slot>\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content\n      align=\"start\"\n      :as=\"ScalarDropdownMenu\"\n      class=\"max-h-radix-popper z-context\"\n      :sideOffset=\"5\"\n      v-bind=\"$attrs\">\n      <!-- Menu content -->\n      <!-- Base Product List (can be overridden by slot) -->\n      <slot\n        :close=\"close\"\n        name=\"products\">\n        <ScalarMenuProducts />\n      </slot>\n      <slot\n        :close=\"close\"\n        name=\"profile\" />\n      <slot\n        :close=\"close\"\n        name=\"sections\">\n        <ScalarMenuResources />\n      </slot>\n    </DropdownMenu.Content>\n  </DropdownMenu.Root>\n</template>\n"],"mappings":";;;;;;;;;;;EA6CA,MAAM,OAAO,IAAI,MAAK;;EAGtB,SAAS,QAAQ;AACf,QAAK,QAAQ;;;uBAIb,YAiDoB,MAAA,aAAA,CAAA,MAAA;IAjDO,MAAM,KAAA;gEAAI,QAAA;;2BA0BZ,CAzBvB,YAyBuB,MAAA,aAAA,CAAA,SAAA,EAzBD,SAAA,IAAO,EAAA;4BAwBpB,CAtBP,WAsBO,KAAA,QAAA,UAAA,EApBJ,MAAM,KAAA,OAAI,QAoBN,CAnBL,YAkBmB,0BAAA;MAjBjB,OAAM;MACL,MAAM,KAAA;;MAECA,KAAAA,OAAO,OAAA;aACZ;yBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;;MAGdA,KAAAA,OAAO,QAAA;aACZ;yBACoB,CAArB,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA;;;MAGfA,KAAAA,OAAO,QAAA;aACZ;yBACoB,CAArB,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA;;;;;QAK7B,YAqBuB,MAAA,aAAA,CAAA,SArBvB,WAqBuB;KApBrB,OAAM;KACL,IAAI,MAAA,2BAAkB;KACvB,OAAM;KACL,YAAY;OACLC,KAAAA,OAAM,EAAA;4BAOP;MAJP,WAIO,KAAA,QAAA,YAAA,EAHG,OAAK,QAGR,CADL,YAAsB,2BAAA,CAAA,CAAA;MAExB,WAEmB,KAAA,QAAA,WAAA,EADT,OAAK,CAAA;MAEf,WAIO,KAAA,QAAA,YAAA,EAHG,OAAK,QAGR,CADL,YAAuB,4BAAA,CAAA,CAAA"}

package/dist/components/ScalarMenu/ScalarMenuButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAG3E;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,8VAgGd,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarMenuButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAG3E;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,8VA2Gd,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarMenu/ScalarMenuButton.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuButton.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Button component\n *\n * The trigger button for the ScalarMenu dropdown.\n * Displays a logo icon and a caret indicator.\n *\n * @example\n * <ScalarMenuButton :open=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarHeaderButton } from '../ScalarHeader'\nimport { ScalarIcon } from '../ScalarIcon'\nimport type { ScalarMenuButtonProps, ScalarMenuButtonSlots } from './types'\n\ndefineProps<ScalarMenuButtonProps>()\n\ndefineSlots<ScalarMenuButtonSlots>()\n</script>\n<template>\n  <ScalarHeaderButton\n    class=\"gap-0.75 px-2 py-1.5 text-c-header-1 hover:bg-b-header-2\">\n    <div class=\"h-5 w-auto\">\n      <slot name=\"logo\">\n        <ScalarIcon icon=\"Logo\" />\n      </slot>\n    </div>\n    <span class=\"sr-only\">\n      <slot name=\"label\">{{ open ? 'Close Menu' : 'Open Menu' }}</slot>\n    </span>\n    <ScalarIconCaretDown\n      class=\"shrink-0 text-c-header-2 group-hover/button:text-c-header-1 size-3.5\"\n      :class=\"open ? 'rotate-180' : ''\"\n      weight=\"bold\" />\n  </ScalarHeaderButton>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarMenuButton.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Button component\n *\n * The trigger button for the ScalarMenu dropdown.\n * Displays a logo icon and a caret indicator.\n *\n * @example\n * <ScalarMenuButton :open=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarHeaderButton } from '../ScalarHeader'\nimport { ScalarIcon } from '../ScalarIcon'\nimport type { ScalarMenuButtonProps, ScalarMenuButtonSlots } from './types'\n\ndefineProps<ScalarMenuButtonProps>()\n\ndefineSlots<ScalarMenuButtonSlots>()\n</script>\n<template>\n  <ScalarHeaderButton\n    class=\"gap-0.75 px-2 py-1.5 text-c-header-1 hover:bg-b-header-2\">\n    <div class=\"h-5 w-auto\">\n      <slot name=\"logo\">\n        <ScalarIcon icon=\"Logo\" />\n      </slot>\n    </div>\n    <span\n      v-if=\"$slots.title\"\n      class=\"ml-1 truncate text-sm font-medium\">\n      <slot name=\"title\" />\n    </span>\n    <span class=\"sr-only\">\n      <slot name=\"label\">{{ open ? 'Close Menu' : 'Open Menu' }}</slot>\n    </span>\n    <ScalarIconCaretDown\n      class=\"shrink-0 text-c-header-2 group-hover/button:text-c-header-1 size-3.5\"\n      :class=\"open ? 'rotate-180' : ''\"\n      weight=\"bold\" />\n  </ScalarHeaderButton>\n</template>\n"],"mappings":""}

package/dist/components/ScalarMenu/ScalarMenuButton.vue.script.js

@@ -1,10 +1,14 @@
 import ScalarHeaderButton_default from "../ScalarHeader/ScalarHeaderButton.vue.js";
 import ScalarIcon_default from "../ScalarIcon/ScalarIcon.vue.js";
-import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 import { ScalarIconCaretDown } from "@scalar/icons";
 //#region src/components/ScalarMenu/ScalarMenuButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "h-5 w-auto" };
-var _hoisted_2 = { class: "sr-only" };
+var _hoisted_2 = {
+	key: 0,
+	class: "ml-1 truncate text-sm font-medium"
+};
+var _hoisted_3 = { class: "sr-only" };
 var ScalarMenuButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ScalarMenuButton",
 	props: { open: { type: Boolean } },
@@ -13,7 +17,8 @@ var ScalarMenuButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			return openBlock(), createBlock(unref(ScalarHeaderButton_default), { class: "gap-0.75 px-2 py-1.5 text-c-header-1 hover:bg-b-header-2" }, {
 				default: withCtx(() => [
 					createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "logo", {}, () => [createVNode(unref(ScalarIcon_default), { icon: "Logo" })])]),
-					createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.open ? "Close Menu" : "Open Menu"), 1)])]),
+					_ctx.$slots.title ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.open ? "Close Menu" : "Open Menu"), 1)])]),
 					createVNode(unref(ScalarIconCaretDown), {
 						class: normalizeClass(["shrink-0 text-c-header-2 group-hover/button:text-c-header-1 size-3.5", __props.open ? "rotate-180" : ""]),
 						weight: "bold"

package/dist/components/ScalarMenu/ScalarMenuButton.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Button component\n *\n * The trigger button for the ScalarMenu dropdown.\n * Displays a logo icon and a caret indicator.\n *\n * @example\n * <ScalarMenuButton :open=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarHeaderButton } from '../ScalarHeader'\nimport { ScalarIcon } from '../ScalarIcon'\nimport type { ScalarMenuButtonProps, ScalarMenuButtonSlots } from './types'\n\ndefineProps<ScalarMenuButtonProps>()\n\ndefineSlots<ScalarMenuButtonSlots>()\n</script>\n<template>\n  <ScalarHeaderButton\n    class=\"gap-0.75 px-2 py-1.5 text-c-header-1 hover:bg-b-header-2\">\n    <div class=\"h-5 w-auto\">\n      <slot name=\"logo\">\n        <ScalarIcon icon=\"Logo\" />\n      </slot>\n    </div>\n    <span class=\"sr-only\">\n      <slot name=\"label\">{{ open ? 'Close Menu' : 'Open Menu' }}</slot>\n    </span>\n    <ScalarIconCaretDown\n      class=\"shrink-0 text-c-header-2 group-hover/button:text-c-header-1 size-3.5\"\n      :class=\"open ? 'rotate-180' : ''\"\n      weight=\"bold\" />\n  </ScalarHeaderButton>\n</template>\n"],"mappings":";;;;;;;;;;;;uBAyBE,YAcqB,MAAA,2BAAA,EAAA,EAbnB,OAAM,4DAA0D,EAAA;2BAK1D;KAJN,mBAIM,OAJN,YAIM,CAHJ,WAEO,KAAA,QAAA,QAAA,EAAA,QAAA,CADL,YAA0B,MAAA,mBAAA,EAAA,EAAd,MAAK,QAAM,CAAA,CAAA,CAAA,CAAA,CAAA;KAG3B,mBAEO,QAFP,YAEO,CADL,WAAiE,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,gBAAA,gBAA3C,QAAA,OAAI,eAAA,YAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;KAE5B,YAGkB,MAAA,oBAAA,EAAA;MAFhB,OAAK,eAAA,CAAC,wEACE,QAAA,OAAI,eAAA,GAAA,CAAA;MACZ,QAAO"}
+{"version":3,"file":"ScalarMenuButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Button component\n *\n * The trigger button for the ScalarMenu dropdown.\n * Displays a logo icon and a caret indicator.\n *\n * @example\n * <ScalarMenuButton :open=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarHeaderButton } from '../ScalarHeader'\nimport { ScalarIcon } from '../ScalarIcon'\nimport type { ScalarMenuButtonProps, ScalarMenuButtonSlots } from './types'\n\ndefineProps<ScalarMenuButtonProps>()\n\ndefineSlots<ScalarMenuButtonSlots>()\n</script>\n<template>\n  <ScalarHeaderButton\n    class=\"gap-0.75 px-2 py-1.5 text-c-header-1 hover:bg-b-header-2\">\n    <div class=\"h-5 w-auto\">\n      <slot name=\"logo\">\n        <ScalarIcon icon=\"Logo\" />\n      </slot>\n    </div>\n    <span\n      v-if=\"$slots.title\"\n      class=\"ml-1 truncate text-sm font-medium\">\n      <slot name=\"title\" />\n    </span>\n    <span class=\"sr-only\">\n      <slot name=\"label\">{{ open ? 'Close Menu' : 'Open Menu' }}</slot>\n    </span>\n    <ScalarIconCaretDown\n      class=\"shrink-0 text-c-header-2 group-hover/button:text-c-header-1 size-3.5\"\n      :class=\"open ? 'rotate-180' : ''\"\n      weight=\"bold\" />\n  </ScalarHeaderButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;uBAyBE,YAmBqB,MAAA,2BAAA,EAAA,EAlBnB,OAAM,4DAA0D,EAAA;2BAK1D;KAJN,mBAIM,OAJN,YAIM,CAHJ,WAEO,KAAA,QAAA,QAAA,EAAA,QAAA,CADL,YAA0B,MAAA,mBAAA,EAAA,EAAd,MAAK,QAAM,CAAA,CAAA,CAAA,CAAA,CAAA;KAInBA,KAAAA,OAAO,SAAA,WAAA,EADf,mBAIO,QAJP,YAIO,CADL,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;KAEvB,mBAEO,QAFP,YAEO,CADL,WAAiE,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,gBAAA,gBAA3C,QAAA,OAAI,eAAA,YAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;KAE5B,YAGkB,MAAA,oBAAA,EAAA;MAFhB,OAAK,eAAA,CAAC,wEACE,QAAA,OAAI,eAAA,GAAA,CAAA;MACZ,QAAO"}

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

@@ -18,6 +18,14 @@ export type ScalarMenuButtonSlots = {
      * @example <img class="h-full aspect-square bg-b-3 rounded" :src="..." />
      */
     logo?(): unknown;
+    /**
+     * Renders an optional, visible label inside the menu button between the
+     * logo and the caret. Useful for surfacing the active workspace or team
+     * name as part of the menu trigger so the user can read the current
+     * context without opening the dropdown. Distinct from `label`, which is
+     * a screen-reader-only string.
+     */
+    title?(): unknown;
     /**
      * Overrides the screen reader label in the menu button
      * @default open ? 'Close Menu' : 'Open Menu'

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEhD;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;;OAIG;IACH,IAAI,CAAC,IAAI,OAAO,CAAA;IAChB;;;OAGG;IACH,KAAK,CAAC,IAAI,OAAO,CAAA;CAClB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,+BAA+B;IAC/B,IAAI,EAAE,OAAO,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,mCAAmC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEhD;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;;OAIG;IACH,IAAI,CAAC,IAAI,OAAO,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,CAAC,IAAI,OAAO,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,IAAI,OAAO,CAAA;CAClB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,+BAA+B;IAC/B,IAAI,EAAE,OAAO,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,mCAAmC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarNestedItems.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarNestedItems.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Nested Items component\n *\n * A provides list of items thats presented over the parent list\n * Needs to be nested inside a ScalarSidebarItems component\n *\n * @example\n * <ScalarSidebarNestedItems v-model=\"open\">\n *   <!-- Item text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarNestedItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconArrowRight, ScalarIconCaretLeft } from '@scalar/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport { findScrollContainer } from './findScrollContainer'\nimport type { ScalarSidebarGroupProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\nimport { useSidebarNestedItem } from './useSidebarNestedItems'\n\nconst { controlled } = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the nested item button is clicked */\n  (e: 'click', event: MouseEvent): void\n  /** Emitted when the back button is clicked */\n  (e: 'back', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\nuseSidebarNestedItem(open)\n\ndefineSlots<{\n  /** The text content of the button */\n  'default'?: () => unknown\n  /** Override the entire button */\n  'button'?: () => unknown\n  /** Override the icon */\n  'icon'?: () => unknown\n  /** Override the aside slot */\n  'aside'?: () => unknown\n  /** Override the back button */\n  'back'?: () => unknown\n  /** Override the back button label */\n  'back-label'?: () => unknown\n  /** The list of sidebar subitems */\n  'items'?: () => unknown\n}>()\n\nconst { level } = useSidebarGroups({ reset: true })\n\n/** The root element ref */\nconst el = useTemplateRef('el')\n\n/** How far down to offset the nested items by when animating them in */\nconst offset = ref(0)\n\n// Transition hooks\n\nfunction onOpen() {\n  // Calculate how far down the nearest scroll container is scrolled\n  // We offset the nested items by this amount when animating them\n  // in so they appear in line with the parent items list.\n  offset.value = findScrollContainer(el.value).scrollTop ?? 0\n\n  // Focus the first button in the nested items\n  nextTick(() =>\n    el.value\n      ?.querySelector<HTMLButtonElement>('button:not([aria-expanded=\"true\"])')\n      ?.focus({ preventScroll: true }),\n  )\n}\nfunction onOpened() {\n  /** Reset the scroll position of the scroll container after opening */\n  findScrollContainer(el.value).scrollTop = 0\n}\nfunction onClose() {\n  nextTick(() => {\n    el.value?.querySelector('button')?.focus({ preventScroll: true })\n    findScrollContainer(el.value).scrollTop = offset.value\n  })\n}\n\ndefineOptions({ inheritAttrs: false })\n\n/** Handle the click event for the nested items button */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = true\n  }\n}\n\n/** Handle the back button click event */\nconst handleBack = (event: MouseEvent) => {\n  // Bubble up the back event\n  emit('back', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = false\n  }\n}\n</script>\n<template>\n  <li\n    ref=\"el\"\n    class=\"group/item group/nested-items contents\"\n    :class=\"{ 'group/nested-items-open': open }\"\n    :style=\"{ '--nested-items-offset': `${offset}px` }\">\n    <slot name=\"button\">\n      <ScalarSidebarButton\n        is=\"button\"\n        :aria-expanded=\"open\"\n        :disabled\n        :icon\n        :indent=\"level\"\n        :selected\n        v-bind=\"$attrs\"\n        @click=\"handleClick\">\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <slot />\n        <template #aside>\n          <slot name=\"aside\">\n            <ScalarIconArrowRight class=\"size-4 text-sidebar-c-2\" />\n          </slot>\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <!-- Make sure the div is around for the entire transition -->\n    <Transition\n      :duration=\"300\"\n      enterActiveClass=\"top-(--nested-items-offset)!\"\n      leaveActiveClass=\"top-(--nested-items-offset)!\"\n      @afterEnter=\"onOpened\"\n      @enter=\"onOpen\"\n      @leave=\"onClose\">\n      <div\n        v-if=\"open\"\n        class=\"absolute inset-0 translate-x-full\">\n        <ScalarSidebarItems v-bind=\"$attrs\">\n          <div\n            class=\"flex flex-col gap-px sticky top-(--scalar-sidebar-sticky-offset,0) p-(--scalar-sidebar-padding) -m-(--scalar-sidebar-padding) mb-0 pb-0 bg-sidebar-b-1 z-1 animate-sidebar-border-bottom border-b-sidebar-border\">\n            <slot name=\"back\">\n              <ScalarSidebarButton\n                is=\"button\"\n                class=\"text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1\"\n                @click=\"handleBack\">\n                <template #icon>\n                  <ScalarIconCaretLeft class=\"size-4 -m-px text-sidebar-c-2\" />\n                </template>\n                <slot name=\"back-label\">Back</slot>\n              </ScalarSidebarButton>\n            </slot>\n            <ScalarSidebarSpacer class=\"h-3\" />\n          </div>\n          <ScalarSidebarLoading v-if=\"loading\" />\n          <slot\n            v-else\n            name=\"items\" />\n        </ScalarSidebarItems>\n      </div>\n    </Transition>\n  </li>\n</template>\n\n<style>\n@reference \"../../style.css\";\n\n.animate-sidebar-border-bottom {\n  animation: border-bottom forwards;\n  animation-timeline: scroll();\n  animation-range-end: 1px;\n}\n\n@keyframes border-bottom {\n  from {\n    border-bottom-width: 0;\n  }\n  to {\n    border-bottom-width: var(--scalar-border-width);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarNestedItems.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Nested Items component\n *\n * A provides list of items thats presented over the parent list\n * Needs to be nested inside a ScalarSidebarItems component\n *\n * @example\n * <ScalarSidebarNestedItems v-model=\"open\">\n *   <!-- Item text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarNestedItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconArrowRight, ScalarIconCaretLeft } from '@scalar/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport { findScrollContainer } from './findScrollContainer'\nimport type { ScalarSidebarGroupProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\nimport { useSidebarNestedItem } from './useSidebarNestedItems'\n\nconst { controlled } = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the nested item button is clicked */\n  (e: 'click', event: MouseEvent): void\n  /** Emitted when the back button is clicked */\n  (e: 'back', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\nuseSidebarNestedItem(open)\n\ndefineSlots<{\n  /** The text content of the button */\n  'default'?: () => unknown\n  /** Override the entire button */\n  'button'?: () => unknown\n  /** Override the icon */\n  'icon'?: () => unknown\n  /** Override the aside slot */\n  'aside'?: () => unknown\n  /** Override the back button */\n  'back'?: () => unknown\n  /** Override the back button label */\n  'back-label'?: () => unknown\n  /** The list of sidebar subitems */\n  'items'?: () => unknown\n}>()\n\nconst { level } = useSidebarGroups({ reset: true })\n\n/** The root element ref */\nconst el = useTemplateRef('el')\n\n/** How far down to offset the nested items by when animating them in */\nconst offset = ref(0)\n\n// Transition hooks\n\nfunction onOpen() {\n  // Calculate how far down the nearest scroll container is scrolled\n  // We offset the nested items by this amount when animating them\n  // in so they appear in line with the parent items list.\n  offset.value = findScrollContainer(el.value).scrollTop ?? 0\n\n  // Focus the first button in the nested items\n  nextTick(() =>\n    el.value\n      ?.querySelector<HTMLButtonElement>('button:not([aria-expanded=\"true\"])')\n      ?.focus({ preventScroll: true }),\n  )\n}\nfunction onOpened() {\n  /** Reset the scroll position of the scroll container after opening */\n  findScrollContainer(el.value).scrollTop = 0\n}\nfunction onClose() {\n  nextTick(() => {\n    el.value?.querySelector('button')?.focus({ preventScroll: true })\n    findScrollContainer(el.value).scrollTop = offset.value\n  })\n}\n\ndefineOptions({ inheritAttrs: false })\n\n/** Handle the click event for the nested items button */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = true\n  }\n}\n\n/** Handle the back button click event */\nconst handleBack = (event: MouseEvent) => {\n  // Bubble up the back event\n  emit('back', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = false\n  }\n}\n</script>\n<template>\n  <li\n    ref=\"el\"\n    class=\"group/item group/nested-items contents\"\n    :class=\"{ 'group/nested-items-open': open }\"\n    :style=\"{ '--nested-items-offset': `${offset}px` }\">\n    <slot name=\"button\">\n      <ScalarSidebarButton\n        is=\"button\"\n        :aria-expanded=\"open\"\n        :disabled\n        :icon\n        :indent=\"level\"\n        :selected\n        v-bind=\"$attrs\"\n        @click=\"handleClick\">\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <slot />\n        <template #aside>\n          <slot name=\"aside\">\n            <ScalarIconArrowRight class=\"size-4 text-sidebar-c-2\" />\n          </slot>\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <!-- Make sure the div is around for the entire transition -->\n    <Transition\n      :duration=\"300\"\n      enterActiveClass=\"top-(--nested-items-offset)!\"\n      leaveActiveClass=\"top-(--nested-items-offset)!\"\n      @afterEnter=\"onOpened\"\n      @enter=\"onOpen\"\n      @leave=\"onClose\">\n      <div\n        v-if=\"open\"\n        class=\"absolute inset-0 translate-x-full\">\n        <ScalarSidebarItems v-bind=\"$attrs\">\n          <div\n            class=\"flex flex-col gap-px sticky top-(--scalar-sidebar-sticky-offset,0) pt-(--scalar-sidebar-padding) -mt-(--scalar-sidebar-padding) px-(--scalar-sidebar-padding) -mx-(--scalar-sidebar-padding) bg-sidebar-b-1 z-1 animate-sidebar-border-bottom border-b-sidebar-border\">\n            <slot name=\"back\">\n              <ScalarSidebarButton\n                is=\"button\"\n                class=\"text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1\"\n                @click=\"handleBack\">\n                <template #icon>\n                  <ScalarIconCaretLeft class=\"size-4 -m-px text-sidebar-c-2\" />\n                </template>\n                <slot name=\"back-label\">Back</slot>\n              </ScalarSidebarButton>\n            </slot>\n            <ScalarSidebarSpacer class=\"h-3\" />\n          </div>\n          <ScalarSidebarLoading v-if=\"loading\" />\n          <slot\n            v-else\n            name=\"items\" />\n        </ScalarSidebarItems>\n      </div>\n    </Transition>\n  </li>\n</template>\n\n<style>\n@reference \"../../style.css\";\n\n.animate-sidebar-border-bottom {\n  animation: border-bottom forwards;\n  animation-timeline: scroll();\n  animation-range-end: 1px;\n}\n\n@keyframes border-bottom {\n  from {\n    border-bottom-width: 0;\n  }\n  to {\n    border-bottom-width: var(--scalar-border-width);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarNestedItems.vue.script.js

@@ -12,7 +12,7 @@ var _hoisted_1 = {
 	key: 0,
 	class: "absolute inset-0 translate-x-full"
 };
-var _hoisted_2 = { class: "flex flex-col gap-px sticky top-(--scalar-sidebar-sticky-offset,0) p-(--scalar-sidebar-padding) -m-(--scalar-sidebar-padding) mb-0 pb-0 bg-sidebar-b-1 z-1 animate-sidebar-border-bottom border-b-sidebar-border" };
+var _hoisted_2 = { class: "flex flex-col gap-px sticky top-(--scalar-sidebar-sticky-offset,0) pt-(--scalar-sidebar-padding) -mt-(--scalar-sidebar-padding) px-(--scalar-sidebar-padding) -mx-(--scalar-sidebar-padding) bg-sidebar-b-1 z-1 animate-sidebar-border-bottom border-b-sidebar-border" };
 var ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSidebarNestedItems",

package/dist/components/ScalarSidebar/ScalarSidebarNestedItems.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarNestedItems.vue.script.js","names":["$attrs","$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Nested Items component\n *\n * A provides list of items thats presented over the parent list\n * Needs to be nested inside a ScalarSidebarItems component\n *\n * @example\n * <ScalarSidebarNestedItems v-model=\"open\">\n *   <!-- Item text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarNestedItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconArrowRight, ScalarIconCaretLeft } from '@scalar/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport { findScrollContainer } from './findScrollContainer'\nimport type { ScalarSidebarGroupProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\nimport { useSidebarNestedItem } from './useSidebarNestedItems'\n\nconst { controlled } = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the nested item button is clicked */\n  (e: 'click', event: MouseEvent): void\n  /** Emitted when the back button is clicked */\n  (e: 'back', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\nuseSidebarNestedItem(open)\n\ndefineSlots<{\n  /** The text content of the button */\n  'default'?: () => unknown\n  /** Override the entire button */\n  'button'?: () => unknown\n  /** Override the icon */\n  'icon'?: () => unknown\n  /** Override the aside slot */\n  'aside'?: () => unknown\n  /** Override the back button */\n  'back'?: () => unknown\n  /** Override the back button label */\n  'back-label'?: () => unknown\n  /** The list of sidebar subitems */\n  'items'?: () => unknown\n}>()\n\nconst { level } = useSidebarGroups({ reset: true })\n\n/** The root element ref */\nconst el = useTemplateRef('el')\n\n/** How far down to offset the nested items by when animating them in */\nconst offset = ref(0)\n\n// Transition hooks\n\nfunction onOpen() {\n  // Calculate how far down the nearest scroll container is scrolled\n  // We offset the nested items by this amount when animating them\n  // in so they appear in line with the parent items list.\n  offset.value = findScrollContainer(el.value).scrollTop ?? 0\n\n  // Focus the first button in the nested items\n  nextTick(() =>\n    el.value\n      ?.querySelector<HTMLButtonElement>('button:not([aria-expanded=\"true\"])')\n      ?.focus({ preventScroll: true }),\n  )\n}\nfunction onOpened() {\n  /** Reset the scroll position of the scroll container after opening */\n  findScrollContainer(el.value).scrollTop = 0\n}\nfunction onClose() {\n  nextTick(() => {\n    el.value?.querySelector('button')?.focus({ preventScroll: true })\n    findScrollContainer(el.value).scrollTop = offset.value\n  })\n}\n\ndefineOptions({ inheritAttrs: false })\n\n/** Handle the click event for the nested items button */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = true\n  }\n}\n\n/** Handle the back button click event */\nconst handleBack = (event: MouseEvent) => {\n  // Bubble up the back event\n  emit('back', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = false\n  }\n}\n</script>\n<template>\n  <li\n    ref=\"el\"\n    class=\"group/item group/nested-items contents\"\n    :class=\"{ 'group/nested-items-open': open }\"\n    :style=\"{ '--nested-items-offset': `${offset}px` }\">\n    <slot name=\"button\">\n      <ScalarSidebarButton\n        is=\"button\"\n        :aria-expanded=\"open\"\n        :disabled\n        :icon\n        :indent=\"level\"\n        :selected\n        v-bind=\"$attrs\"\n        @click=\"handleClick\">\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <slot />\n        <template #aside>\n          <slot name=\"aside\">\n            <ScalarIconArrowRight class=\"size-4 text-sidebar-c-2\" />\n          </slot>\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <!-- Make sure the div is around for the entire transition -->\n    <Transition\n      :duration=\"300\"\n      enterActiveClass=\"top-(--nested-items-offset)!\"\n      leaveActiveClass=\"top-(--nested-items-offset)!\"\n      @afterEnter=\"onOpened\"\n      @enter=\"onOpen\"\n      @leave=\"onClose\">\n      <div\n        v-if=\"open\"\n        class=\"absolute inset-0 translate-x-full\">\n        <ScalarSidebarItems v-bind=\"$attrs\">\n          <div\n            class=\"flex flex-col gap-px sticky top-(--scalar-sidebar-sticky-offset,0) p-(--scalar-sidebar-padding) -m-(--scalar-sidebar-padding) mb-0 pb-0 bg-sidebar-b-1 z-1 animate-sidebar-border-bottom border-b-sidebar-border\">\n            <slot name=\"back\">\n              <ScalarSidebarButton\n                is=\"button\"\n                class=\"text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1\"\n                @click=\"handleBack\">\n                <template #icon>\n                  <ScalarIconCaretLeft class=\"size-4 -m-px text-sidebar-c-2\" />\n                </template>\n                <slot name=\"back-label\">Back</slot>\n              </ScalarSidebarButton>\n            </slot>\n            <ScalarSidebarSpacer class=\"h-3\" />\n          </div>\n          <ScalarSidebarLoading v-if=\"loading\" />\n          <slot\n            v-else\n            name=\"items\" />\n        </ScalarSidebarItems>\n      </div>\n    </Transition>\n  </li>\n</template>\n\n<style>\n@reference \"../../style.css\";\n\n.animate-sidebar-border-bottom {\n  animation: border-bottom forwards;\n  animation-timeline: scroll();\n  animation-range-end: 1px;\n}\n\n@keyframes border-bottom {\n  from {\n    border-bottom-width: 0;\n  }\n  to {\n    border-bottom-width: var(--scalar-border-width);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,OAAO;EAOb,MAAM,OAAO,SAAoB,SAAC,OAA0B;AAC5D,uBAAqB,KAAI;EAmBzB,MAAM,EAAE,UAAU,iBAAiB,EAAE,OAAO,MAAM,CAAA;;EAGlD,MAAM,KAAK,eAAe,KAAI;;EAG9B,MAAM,SAAS,IAAI,EAAC;EAIpB,SAAS,SAAS;AAIhB,UAAO,QAAQ,oBAAoB,GAAG,MAAM,CAAC,aAAa;AAG1D,kBACE,GAAG,OACC,cAAiC,uCAAoC,EACrE,MAAM,EAAE,eAAe,MAAM,CAAC,CACpC;;EAEF,SAAS,WAAW;;AAElB,uBAAoB,GAAG,MAAM,CAAC,YAAY;;EAE5C,SAAS,UAAU;AACjB,kBAAe;AACb,OAAG,OAAO,cAAc,SAAS,EAAE,MAAM,EAAE,eAAe,MAAM,CAAA;AAChE,wBAAoB,GAAG,MAAM,CAAC,YAAY,OAAO;KAClD;;;EAMH,MAAM,eAAe,UAAsB;AAEzC,QAAK,SAAS,MAAK;AACnB,OAAI,CAAC,QAAA,WAEH,MAAK,QAAQ;;;EAKjB,MAAM,cAAc,UAAsB;AAExC,QAAK,QAAQ,MAAK;AAClB,OAAI,CAAC,QAAA,WAEH,MAAK,QAAQ;;;uBAKf,mBA8DK,MAAA;aA7DC;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,0CAAwC,EAAA,2BACT,KAAA,OAAI,CAAA,CAAA;IACxC,OAAK,eAAA,EAAA,yBAAA,GAAgC,OAAA,MAAM,KAAA,CAAA;OAC5C,WAsBO,KAAA,QAAA,UAAA,EAAA,QAAA,CArBL,YAoBsB,6BApBtB,WAoBsB;IAnBpB,IAAG;IACF,iBAAe,KAAA;IACf,UAAA,QAAA;IACA,MAAA,QAAA;IACA,QAAQ,MAAA,MAAK;IACb,UAAA,QAAA;MACOA,KAAAA,QAAM,EACb,SAAO,aAAW,CAAA,EAAA,YAAA;IAOR,OAAK,cAGP,CAFP,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CADL,YAAwD,MAAA,qBAAA,EAAA,EAAlC,OAAM,2BAAyB,CAAA,CAAA,CAAA,CAAA,CAAA;2BAHjD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;OAJAC,KAAAA,OAAO,OAAA;UACZ;sBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;;;;;;;SAW1B,YAgCa,YAAA;IA/BV,UAAU;IACX,kBAAiB;IACjB,kBAAiB;IAChB,cAAY;IACZ,SAAO;IACP,SAAO;;2BAyBF,CAvBE,KAAA,SAAA,WAAA,EADR,mBAwBM,OAxBN,YAwBM,CArBJ,YAoBqB,4BAAA,eAAA,mBApBOD,KAAAA,OAAM,CAAA,EAAA;4BAe1B,CAdN,mBAcM,OAdN,YAcM,CAZJ,WAUO,KAAA,QAAA,QAAA,EAAA,QAAA,CATL,YAQsB,6BAAA;MAPpB,IAAG;MACH,OAAM;MACL,SAAO;;MACG,MAAI,cACgD,CAA7D,YAA6D,MAAA,oBAAA,EAAA,EAAxC,OAAM,iCAA+B,CAAA,CAAA,CAAA;6BAEzB,CAAnC,WAAmC,KAAA,QAAA,cAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAX,QAAI,GAAA,EAAA,CAAA,CAAA,CAAA;;WAGhC,YAAmC,6BAAA,EAAd,OAAM,OAAK,CAAA,CAAA,CAAA,EAEN,QAAA,WAAA,WAAA,EAA5B,YAAuC,8BAAA,EAAA,KAAA,GAAA,CAAA,IACvC,WAEiB,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarSidebarNestedItems.vue.script.js","names":["$attrs","$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Nested Items component\n *\n * A provides list of items thats presented over the parent list\n * Needs to be nested inside a ScalarSidebarItems component\n *\n * @example\n * <ScalarSidebarNestedItems v-model=\"open\">\n *   <!-- Item text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarNestedItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconArrowRight, ScalarIconCaretLeft } from '@scalar/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport { findScrollContainer } from './findScrollContainer'\nimport type { ScalarSidebarGroupProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\nimport { useSidebarNestedItem } from './useSidebarNestedItems'\n\nconst { controlled } = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the nested item button is clicked */\n  (e: 'click', event: MouseEvent): void\n  /** Emitted when the back button is clicked */\n  (e: 'back', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\nuseSidebarNestedItem(open)\n\ndefineSlots<{\n  /** The text content of the button */\n  'default'?: () => unknown\n  /** Override the entire button */\n  'button'?: () => unknown\n  /** Override the icon */\n  'icon'?: () => unknown\n  /** Override the aside slot */\n  'aside'?: () => unknown\n  /** Override the back button */\n  'back'?: () => unknown\n  /** Override the back button label */\n  'back-label'?: () => unknown\n  /** The list of sidebar subitems */\n  'items'?: () => unknown\n}>()\n\nconst { level } = useSidebarGroups({ reset: true })\n\n/** The root element ref */\nconst el = useTemplateRef('el')\n\n/** How far down to offset the nested items by when animating them in */\nconst offset = ref(0)\n\n// Transition hooks\n\nfunction onOpen() {\n  // Calculate how far down the nearest scroll container is scrolled\n  // We offset the nested items by this amount when animating them\n  // in so they appear in line with the parent items list.\n  offset.value = findScrollContainer(el.value).scrollTop ?? 0\n\n  // Focus the first button in the nested items\n  nextTick(() =>\n    el.value\n      ?.querySelector<HTMLButtonElement>('button:not([aria-expanded=\"true\"])')\n      ?.focus({ preventScroll: true }),\n  )\n}\nfunction onOpened() {\n  /** Reset the scroll position of the scroll container after opening */\n  findScrollContainer(el.value).scrollTop = 0\n}\nfunction onClose() {\n  nextTick(() => {\n    el.value?.querySelector('button')?.focus({ preventScroll: true })\n    findScrollContainer(el.value).scrollTop = offset.value\n  })\n}\n\ndefineOptions({ inheritAttrs: false })\n\n/** Handle the click event for the nested items button */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = true\n  }\n}\n\n/** Handle the back button click event */\nconst handleBack = (event: MouseEvent) => {\n  // Bubble up the back event\n  emit('back', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = false\n  }\n}\n</script>\n<template>\n  <li\n    ref=\"el\"\n    class=\"group/item group/nested-items contents\"\n    :class=\"{ 'group/nested-items-open': open }\"\n    :style=\"{ '--nested-items-offset': `${offset}px` }\">\n    <slot name=\"button\">\n      <ScalarSidebarButton\n        is=\"button\"\n        :aria-expanded=\"open\"\n        :disabled\n        :icon\n        :indent=\"level\"\n        :selected\n        v-bind=\"$attrs\"\n        @click=\"handleClick\">\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <slot />\n        <template #aside>\n          <slot name=\"aside\">\n            <ScalarIconArrowRight class=\"size-4 text-sidebar-c-2\" />\n          </slot>\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <!-- Make sure the div is around for the entire transition -->\n    <Transition\n      :duration=\"300\"\n      enterActiveClass=\"top-(--nested-items-offset)!\"\n      leaveActiveClass=\"top-(--nested-items-offset)!\"\n      @afterEnter=\"onOpened\"\n      @enter=\"onOpen\"\n      @leave=\"onClose\">\n      <div\n        v-if=\"open\"\n        class=\"absolute inset-0 translate-x-full\">\n        <ScalarSidebarItems v-bind=\"$attrs\">\n          <div\n            class=\"flex flex-col gap-px sticky top-(--scalar-sidebar-sticky-offset,0) pt-(--scalar-sidebar-padding) -mt-(--scalar-sidebar-padding) px-(--scalar-sidebar-padding) -mx-(--scalar-sidebar-padding) bg-sidebar-b-1 z-1 animate-sidebar-border-bottom border-b-sidebar-border\">\n            <slot name=\"back\">\n              <ScalarSidebarButton\n                is=\"button\"\n                class=\"text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1\"\n                @click=\"handleBack\">\n                <template #icon>\n                  <ScalarIconCaretLeft class=\"size-4 -m-px text-sidebar-c-2\" />\n                </template>\n                <slot name=\"back-label\">Back</slot>\n              </ScalarSidebarButton>\n            </slot>\n            <ScalarSidebarSpacer class=\"h-3\" />\n          </div>\n          <ScalarSidebarLoading v-if=\"loading\" />\n          <slot\n            v-else\n            name=\"items\" />\n        </ScalarSidebarItems>\n      </div>\n    </Transition>\n  </li>\n</template>\n\n<style>\n@reference \"../../style.css\";\n\n.animate-sidebar-border-bottom {\n  animation: border-bottom forwards;\n  animation-timeline: scroll();\n  animation-range-end: 1px;\n}\n\n@keyframes border-bottom {\n  from {\n    border-bottom-width: 0;\n  }\n  to {\n    border-bottom-width: var(--scalar-border-width);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,OAAO;EAOb,MAAM,OAAO,SAAoB,SAAC,OAA0B;AAC5D,uBAAqB,KAAI;EAmBzB,MAAM,EAAE,UAAU,iBAAiB,EAAE,OAAO,MAAM,CAAA;;EAGlD,MAAM,KAAK,eAAe,KAAI;;EAG9B,MAAM,SAAS,IAAI,EAAC;EAIpB,SAAS,SAAS;AAIhB,UAAO,QAAQ,oBAAoB,GAAG,MAAM,CAAC,aAAa;AAG1D,kBACE,GAAG,OACC,cAAiC,uCAAoC,EACrE,MAAM,EAAE,eAAe,MAAM,CAAC,CACpC;;EAEF,SAAS,WAAW;;AAElB,uBAAoB,GAAG,MAAM,CAAC,YAAY;;EAE5C,SAAS,UAAU;AACjB,kBAAe;AACb,OAAG,OAAO,cAAc,SAAS,EAAE,MAAM,EAAE,eAAe,MAAM,CAAA;AAChE,wBAAoB,GAAG,MAAM,CAAC,YAAY,OAAO;KAClD;;;EAMH,MAAM,eAAe,UAAsB;AAEzC,QAAK,SAAS,MAAK;AACnB,OAAI,CAAC,QAAA,WAEH,MAAK,QAAQ;;;EAKjB,MAAM,cAAc,UAAsB;AAExC,QAAK,QAAQ,MAAK;AAClB,OAAI,CAAC,QAAA,WAEH,MAAK,QAAQ;;;uBAKf,mBA8DK,MAAA;aA7DC;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,0CAAwC,EAAA,2BACT,KAAA,OAAI,CAAA,CAAA;IACxC,OAAK,eAAA,EAAA,yBAAA,GAAgC,OAAA,MAAM,KAAA,CAAA;OAC5C,WAsBO,KAAA,QAAA,UAAA,EAAA,QAAA,CArBL,YAoBsB,6BApBtB,WAoBsB;IAnBpB,IAAG;IACF,iBAAe,KAAA;IACf,UAAA,QAAA;IACA,MAAA,QAAA;IACA,QAAQ,MAAA,MAAK;IACb,UAAA,QAAA;MACOA,KAAAA,QAAM,EACb,SAAO,aAAW,CAAA,EAAA,YAAA;IAOR,OAAK,cAGP,CAFP,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CADL,YAAwD,MAAA,qBAAA,EAAA,EAAlC,OAAM,2BAAyB,CAAA,CAAA,CAAA,CAAA,CAAA;2BAHjD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;OAJAC,KAAAA,OAAO,OAAA;UACZ;sBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;;;;;;;SAW1B,YAgCa,YAAA;IA/BV,UAAU;IACX,kBAAiB;IACjB,kBAAiB;IAChB,cAAY;IACZ,SAAO;IACP,SAAO;;2BAyBF,CAvBE,KAAA,SAAA,WAAA,EADR,mBAwBM,OAxBN,YAwBM,CArBJ,YAoBqB,4BAAA,eAAA,mBApBOD,KAAAA,OAAM,CAAA,EAAA;4BAe1B,CAdN,mBAcM,OAdN,YAcM,CAZJ,WAUO,KAAA,QAAA,QAAA,EAAA,QAAA,CATL,YAQsB,6BAAA;MAPpB,IAAG;MACH,OAAM;MACL,SAAO;;MACG,MAAI,cACgD,CAA7D,YAA6D,MAAA,oBAAA,EAAA,EAAxC,OAAM,iCAA+B,CAAA,CAAA,CAAA;6BAEzB,CAAnC,WAAmC,KAAA,QAAA,cAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAX,QAAI,GAAA,EAAA,CAAA,CAAA,CAAA;;WAGhC,YAAmC,6BAAA,EAAd,OAAM,OAAK,CAAA,CAAA,CAAA,EAEN,QAAA,WAAA,WAAA,EAA5B,YAAuC,8BAAA,EAAA,KAAA,GAAA,CAAA,IACvC,WAEiB,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"names":[],"mappings":"AAkGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI9E;;;;;;;;;;;;;;;;;GAiBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAQhB,qCAAqC;gBACzB,OAAO;IACnB,mCAAmC;cACzB,OAAO;EAmHf,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"names":[],"mappings":"AAmGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI9E;;;;;;;;;;;;;;;;;GAiBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAQhB,qCAAqC;gBACzB,OAAO;IACnB,mCAAmC;cACzB,OAAO;EAqHf,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSection.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Section component\n *\n * A section of the sidebar that can contain subitems\n *\n * @example\n * <ScalarSidebarSection>\n *   <!-- Section title -->\n *   <template #title>\n *     My Section\n *   </template>\n *   <!-- Section items -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarSection>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<\n  ScalarSidebarItemProps & Pick<ScalarSidebarGroupProps, 'loading'>\n>()\n\ndefineSlots<{\n  /** The text content of the toggle */\n  default?(): unknown\n  /** The list of sidebar subitems */\n  items?(): unknown\n}>()\n\nconst { level } = useSidebarGroups({ increment: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('group/item group/sidebar-section contents')\">\n    <ScalarSidebarSpacer\n      class=\"group/spacer-before h-3\"\n      :indent=\"level\" />\n    <ScalarSidebarButton\n      is=\"div\"\n      class=\"text-sm/4 py-1.75 font-bold\"\n      disabled\n      :icon=\"icon\"\n      :indent=\"level\">\n      <slot />\n    </ScalarSidebarButton>\n    <ul class=\"flex flex-col gap-px\">\n      <ScalarSidebarLoading v-if=\"loading\" />\n      <slot\n        v-else\n        name=\"items\" />\n    </ul>\n    <ScalarSidebarSpacer\n      class=\"group/spacer-after h-3\"\n      :indent=\"level\" />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Don't add a spacer before the first section */\n.group\\/sidebar-section:first-of-type > .group\\/spacer-before {\n  @apply h-0;\n}\n\n/* Don't add a spacer after the last section */\n.group\\/sidebar-section:last-of-type > .group\\/spacer-after {\n  @apply h-0;\n}\n\n/* Only one spacer between sections */\n.group\\/sidebar-section:has(+ .group\\/sidebar-section) > .group\\/spacer-after {\n  @apply h-0 -mb-px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarSection.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Section component\n *\n * A section of the sidebar that can contain subitems\n *\n * @example\n * <ScalarSidebarSection>\n *   <!-- Section title -->\n *   <template #title>\n *     My Section\n *   </template>\n *   <!-- Section items -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarSection>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<\n  ScalarSidebarItemProps & Pick<ScalarSidebarGroupProps, 'loading'>\n>()\n\ndefineSlots<{\n  /** The text content of the toggle */\n  default?(): unknown\n  /** The list of sidebar subitems */\n  items?(): unknown\n}>()\n\nconst { level } = useSidebarGroups({ increment: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('group/item group/sidebar-section contents')\">\n    <ScalarSidebarSpacer\n      class=\"group/spacer-before h-3\"\n      :indent=\"level\" />\n    <ScalarSidebarButton\n      is=\"div\"\n      v-if=\"$slots.default\"\n      class=\"text-sm/4 py-1.75 font-bold\"\n      disabled\n      :icon=\"icon\"\n      :indent=\"level\">\n      <slot />\n    </ScalarSidebarButton>\n    <ul class=\"flex flex-col gap-px\">\n      <ScalarSidebarLoading v-if=\"loading\" />\n      <slot\n        v-else\n        name=\"items\" />\n    </ul>\n    <ScalarSidebarSpacer\n      class=\"group/spacer-after h-3\"\n      :indent=\"level\" />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Don't add a spacer before the first section */\n.group\\/sidebar-section:first-of-type > .group\\/spacer-before {\n  @apply h-0;\n}\n\n/* Don't add a spacer after the last section */\n.group\\/sidebar-section:last-of-type > .group\\/spacer-after {\n  @apply h-0;\n}\n\n/* Only one spacer between sections */\n.group\\/sidebar-section:has(+ .group\\/sidebar-section) > .group\\/spacer-after {\n  @apply h-0 -mb-px;\n}\n</style>\n"],"mappings":""}

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

@@ -3,7 +3,7 @@ import { useSidebarGroups } from "./useSidebarGroups.js";
 import ScalarSidebarLoading_default from "./ScalarSidebarLoading.vue.js";
 import ScalarSidebarSpacer_default from "./ScalarSidebarSpacer.vue.js";
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+import { createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
 //#region src/components/ScalarSidebar/ScalarSidebarSection.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col gap-px" };
 var ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -28,7 +28,8 @@ var ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 						class: "group/spacer-before h-3",
 						indent: unref(level)
 					}, null, 8, ["indent"]),
-					createVNode(ScalarSidebarButton_default, {
+					_ctx.$slots.default ? (openBlock(), createBlock(ScalarSidebarButton_default, {
+						key: 0,
 						is: "div",
 						class: "text-sm/4 py-1.75 font-bold",
 						disabled: "",
@@ -37,7 +38,7 @@ var ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 					}, {
 						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 						_: 3
-					}, 8, ["icon", "indent"]),
+					}, 8, ["icon", "indent"])) : createCommentVNode("", true),
 					createElementVNode("ul", _hoisted_1, [__props.loading ? (openBlock(), createBlock(ScalarSidebarLoading_default, { key: 0 })) : renderSlot(_ctx.$slots, "items", { key: 1 })]),
 					createVNode(ScalarSidebarSpacer_default, {
 						class: "group/spacer-after h-3",

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSection.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Section component\n *\n * A section of the sidebar that can contain subitems\n *\n * @example\n * <ScalarSidebarSection>\n *   <!-- Section title -->\n *   <template #title>\n *     My Section\n *   </template>\n *   <!-- Section items -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarSection>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<\n  ScalarSidebarItemProps & Pick<ScalarSidebarGroupProps, 'loading'>\n>()\n\ndefineSlots<{\n  /** The text content of the toggle */\n  default?(): unknown\n  /** The list of sidebar subitems */\n  items?(): unknown\n}>()\n\nconst { level } = useSidebarGroups({ increment: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('group/item group/sidebar-section contents')\">\n    <ScalarSidebarSpacer\n      class=\"group/spacer-before h-3\"\n      :indent=\"level\" />\n    <ScalarSidebarButton\n      is=\"div\"\n      class=\"text-sm/4 py-1.75 font-bold\"\n      disabled\n      :icon=\"icon\"\n      :indent=\"level\">\n      <slot />\n    </ScalarSidebarButton>\n    <ul class=\"flex flex-col gap-px\">\n      <ScalarSidebarLoading v-if=\"loading\" />\n      <slot\n        v-else\n        name=\"items\" />\n    </ul>\n    <ScalarSidebarSpacer\n      class=\"group/spacer-after h-3\"\n      :indent=\"level\" />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Don't add a spacer before the first section */\n.group\\/sidebar-section:first-of-type > .group\\/spacer-before {\n  @apply h-0;\n}\n\n/* Don't add a spacer after the last section */\n.group\\/sidebar-section:last-of-type > .group\\/spacer-after {\n  @apply h-0;\n}\n\n/* Only one spacer between sections */\n.group\\/sidebar-section:has(+ .group\\/sidebar-section) > .group\\/spacer-after {\n  @apply h-0 -mb-px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,EAAE,UAAU,iBAAiB,EAAE,WAAW,OAAO,CAAA;EAGvD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAuBY,wBAtBL,QAAA,GAAE,EAAA,eAAA,mBACC,MAAA,GAAE,CAAA,4CAAA,CAAA,CAAA,EAAA;2BAGU;KAFpB,YAEoB,6BAAA;MADlB,OAAM;MACL,QAAQ,MAAA,MAAK;;KAChB,YAOsB,6BAAA;MANpB,IAAG;MACH,OAAM;MACN,UAAA;MACC,MAAM,QAAA;MACN,QAAQ,MAAA,MAAK;;6BACN,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAEV,mBAKK,MALL,YAKK,CAJyB,QAAA,WAAA,WAAA,EAA5B,YAAuC,8BAAA,EAAA,KAAA,GAAA,CAAA,IACvC,WAEiB,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA;KAEnB,YAEoB,6BAAA;MADlB,OAAM;MACL,QAAQ,MAAA,MAAK"}
+{"version":3,"file":"ScalarSidebarSection.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Section component\n *\n * A section of the sidebar that can contain subitems\n *\n * @example\n * <ScalarSidebarSection>\n *   <!-- Section title -->\n *   <template #title>\n *     My Section\n *   </template>\n *   <!-- Section items -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarSection>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<\n  ScalarSidebarItemProps & Pick<ScalarSidebarGroupProps, 'loading'>\n>()\n\ndefineSlots<{\n  /** The text content of the toggle */\n  default?(): unknown\n  /** The list of sidebar subitems */\n  items?(): unknown\n}>()\n\nconst { level } = useSidebarGroups({ increment: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('group/item group/sidebar-section contents')\">\n    <ScalarSidebarSpacer\n      class=\"group/spacer-before h-3\"\n      :indent=\"level\" />\n    <ScalarSidebarButton\n      is=\"div\"\n      v-if=\"$slots.default\"\n      class=\"text-sm/4 py-1.75 font-bold\"\n      disabled\n      :icon=\"icon\"\n      :indent=\"level\">\n      <slot />\n    </ScalarSidebarButton>\n    <ul class=\"flex flex-col gap-px\">\n      <ScalarSidebarLoading v-if=\"loading\" />\n      <slot\n        v-else\n        name=\"items\" />\n    </ul>\n    <ScalarSidebarSpacer\n      class=\"group/spacer-after h-3\"\n      :indent=\"level\" />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Don't add a spacer before the first section */\n.group\\/sidebar-section:first-of-type > .group\\/spacer-before {\n  @apply h-0;\n}\n\n/* Don't add a spacer after the last section */\n.group\\/sidebar-section:last-of-type > .group\\/spacer-after {\n  @apply h-0;\n}\n\n/* Only one spacer between sections */\n.group\\/sidebar-section:has(+ .group\\/sidebar-section) > .group\\/spacer-after {\n  @apply h-0 -mb-px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,EAAE,UAAU,iBAAiB,EAAE,WAAW,OAAO,CAAA;EAGvD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAwBY,wBAvBL,QAAA,GAAE,EAAA,eAAA,mBACC,MAAA,GAAE,CAAA,4CAAA,CAAA,CAAA,EAAA;2BAGU;KAFpB,YAEoB,6BAAA;MADlB,OAAM;MACL,QAAQ,MAAA,MAAK;;KAGRA,KAAAA,OAAO,WAAA,WAAA,EAFf,YAQsB,6BAAA;;MAPpB,IAAG;MAEH,OAAM;MACN,UAAA;MACC,MAAM,QAAA;MACN,QAAQ,MAAA,MAAK;;6BACN,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAEV,mBAKK,MALL,YAKK,CAJyB,QAAA,WAAA,WAAA,EAA5B,YAAuC,8BAAA,EAAA,KAAA,GAAA,CAAA,IACvC,WAEiB,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA;KAEnB,YAEoB,6BAAA;MADlB,OAAM;MACL,QAAQ,MAAA,MAAK"}

package/dist/style.css

@@ -2167,10 +2167,6 @@ to {
   margin: 0 !important;
 }
 
-.scalar-app .-m-\(--scalar-sidebar-padding\) {
-  margin: calc(var(--scalar-sidebar-padding) * -1);
-}
-
 .scalar-app .-m-0\.5 {
   margin: -2px;
 }
@@ -2203,6 +2199,10 @@ to {
   margin: auto;
 }
 
+.scalar-app .-mx-\(--scalar-sidebar-padding\) {
+  margin-inline: calc(var(--scalar-sidebar-padding) * -1);
+}
+
 .scalar-app .-mx-0\.75 {
   margin-inline: -3px;
 }
@@ -2243,6 +2243,10 @@ to {
   margin-block: 6px;
 }
 
+.scalar-app .-mt-\(--scalar-sidebar-padding\) {
+  margin-top: calc(var(--scalar-sidebar-padding) * -1);
+}
+
 .scalar-app .-mt-1\.5 {
   margin-top: -6px;
 }
@@ -2319,6 +2323,10 @@ to {
   margin-left: -3px;
 }
 
+.scalar-app .ml-1 {
+  margin-left: 4px;
+}
+
 .scalar-app .ml-auto {
   margin-left: auto;
 }
@@ -3329,6 +3337,10 @@ to {
   padding: 1px;
 }
 
+.scalar-app .px-\(--scalar-sidebar-padding\) {
+  padding-inline: var(--scalar-sidebar-padding);
+}
+
 .scalar-app .px-1 {
   padding-inline: 4px;
 }
@@ -3413,6 +3425,10 @@ to {
   padding-block: 1px;
 }
 
+.scalar-app .pt-\(--scalar-sidebar-padding\) {
+  padding-top: var(--scalar-sidebar-padding);
+}
+
 .scalar-app .pt-3 {
   padding-top: 12px;
 }

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.22.5",
+  "version": "0.23.0",
   "engines": {
     "node": ">=22"
   },