@scalar/components 0.22.3 → 0.22.4

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

@@ -27,6 +27,7 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("./types").ScalarSidebarItemProps & {
     controlled?: boolean;
     discrete?: boolean;
+    loading?: boolean;
 } & {
     open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -37,6 +38,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
 }, string, import("vue").PublicProps, Readonly<import("./types").ScalarSidebarItemProps & {
     controlled?: boolean;
     discrete?: boolean;
+    loading?: boolean;
 } & {
     open?: boolean;
 }> & Readonly<{

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":"AAkLA,OAAO,KAAK,EAA2B,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAI/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;WAwDT,OAAO;;;;;;;;;;WAAP,OAAO;;;;;4GAyNZ,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":"ScalarSidebarGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"names":[],"mappings":"AAsLA,OAAO,KAAK,EAA2B,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAI/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;WAwDT,OAAO;;;;;;;;;;;WAAP,OAAO;;;;;4GAmOZ,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/ScalarSidebarGroup.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarGroup.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Group component\n *\n * A collapsible ScalarSidebarItem that can contain subitems.\n *\n * Classes applied to the component are passed to the inner list element.\n * Other attributes (like click event) are passed to the toggle button.\n *\n * @example\n * <ScalarSidebarGroup>\n *   <!-- Group toggle text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarGroup>\n *\n *\n * By default the component has it's own internal open state, but this can be\n * controlled by passing the `controlled` prop and using binding the :open prop.\n *\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarGroupToggle from './ScalarSidebarGroupToggle.vue'\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarGroupSlots } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst {\n  controlled,\n  discrete,\n  is = 'li',\n} = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the group label is clicked */\n  (e: 'click', event: MouseEvent): void\n  /**\n   * Emitted when _only_ the group toggle button (caret) is clicked\n   *\n   * Note: This is only emitted if the group is discrete\n   */\n  (e: 'toggle', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<ScalarSidebarGroupSlots>()\n\nconst { level } = useSidebarGroups({ increment: true })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Handle the click event for the group toggle */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled && !discrete) {\n    // Only toggle the open state if the group is uncontrolled and not discrete\n    open.value = !open.value\n  }\n}\n\n/** Handle the click event for the group toggle */\nconst handleToggle = (event: MouseEvent) => {\n  // Bubble up the toggle event\n  emit('toggle', event)\n  if (!controlled && discrete) {\n    // Only toggle the open state if the group is uncontrolled and not discrete\n    open.value = !open.value\n  }\n}\n</script>\n<template>\n  <component\n    v-bind=\"cx('group/item flex flex-col gap-px')\"\n    :is=\"is\">\n    <div class=\"group/group-button relative flex flex-col text-base\">\n      <slot\n        name=\"before\"\n        :open />\n      <slot\n        :level=\"level\"\n        name=\"button\"\n        :open>\n        <ScalarSidebarButton\n          is=\"button\"\n          :active\n          :aria-expanded=\"open\"\n          :disabled\n          :icon\n          :indent=\"level\"\n          :selected\n          @click=\"handleClick\">\n          <template #indent>\n            <ScalarSidebarIndent\n              class=\"mr-0 -my-2\"\n              :indent=\"level\"\n              :selected />\n          </template>\n          <template\n            v-if=\"$slots.icon\"\n            #icon>\n            <slot\n              name=\"icon\"\n              :open />\n          </template>\n          <template #aside>\n            <slot\n              name=\"aside\"\n              :open />\n            <div\n              v-if=\"discrete\"\n              class=\"size-4\">\n              <!-- Placeholder for discrete group toggle -->\n            </div>\n            <slot\n              v-else\n              name=\"toggle\"\n              :open>\n              <ScalarSidebarGroupToggle\n                class=\"text-sidebar-c-2\"\n                :open />\n            </slot>\n          </template>\n          <slot :open />\n        </ScalarSidebarButton>\n        <button\n          v-if=\"discrete\"\n          :aria-expanded=\"open\"\n          class=\"absolute top-[1lh] -translate-y-1/2 p-0.75 rounded right-1.25 text-sidebar-c-2\"\n          :class=\"\n            selected\n              ? 'hover:bg-sidebar-b-1 hover:text-sidebar-c-1'\n              : 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover'\n          \"\n          type=\"button\"\n          @click=\"handleToggle\">\n          <slot\n            name=\"toggle\"\n            :open>\n            <ScalarSidebarGroupToggle :open>\n              <template #label>\n                {{ open ? 'Close' : 'Open' }} <slot :open=\"open\" />\n              </template>\n            </ScalarSidebarGroupToggle>\n          </slot>\n        </button>\n      </slot>\n      <slot\n        name=\"after\"\n        :open />\n    </div>\n    <ul\n      v-if=\"open\"\n      class=\"group/items flex flex-col gap-px\">\n      <slot\n        name=\"items\"\n        :open />\n    </ul>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarGroup.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Group component\n *\n * A collapsible ScalarSidebarItem that can contain subitems.\n *\n * Classes applied to the component are passed to the inner list element.\n * Other attributes (like click event) are passed to the toggle button.\n *\n * @example\n * <ScalarSidebarGroup>\n *   <!-- Group toggle text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarGroup>\n *\n *\n * By default the component has it's own internal open state, but this can be\n * controlled by passing the `controlled` prop and using binding the :open prop.\n *\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarGroupToggle from './ScalarSidebarGroupToggle.vue'\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarGroupSlots } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst {\n  controlled,\n  discrete,\n  is = 'li',\n} = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the group label is clicked */\n  (e: 'click', event: MouseEvent): void\n  /**\n   * Emitted when _only_ the group toggle button (caret) is clicked\n   *\n   * Note: This is only emitted if the group is discrete\n   */\n  (e: 'toggle', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<ScalarSidebarGroupSlots>()\n\nconst { level } = useSidebarGroups({ increment: true })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Handle the click event for the group toggle */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled && !discrete) {\n    // Only toggle the open state if the group is uncontrolled and not discrete\n    open.value = !open.value\n  }\n}\n\n/** Handle the click event for the group toggle */\nconst handleToggle = (event: MouseEvent) => {\n  // Bubble up the toggle event\n  emit('toggle', event)\n  if (!controlled && discrete) {\n    // Only toggle the open state if the group is uncontrolled and not discrete\n    open.value = !open.value\n  }\n}\n</script>\n<template>\n  <component\n    v-bind=\"cx('group/item flex flex-col gap-px')\"\n    :is=\"is\">\n    <div class=\"group/group-button relative flex flex-col text-base\">\n      <slot\n        name=\"before\"\n        :open />\n      <slot\n        :level=\"level\"\n        name=\"button\"\n        :open>\n        <ScalarSidebarButton\n          is=\"button\"\n          :active\n          :aria-expanded=\"open\"\n          :disabled\n          :icon\n          :indent=\"level\"\n          :selected\n          @click=\"handleClick\">\n          <template #indent>\n            <ScalarSidebarIndent\n              class=\"mr-0 -my-2\"\n              :indent=\"level\"\n              :selected />\n          </template>\n          <template\n            v-if=\"$slots.icon\"\n            #icon>\n            <slot\n              name=\"icon\"\n              :open />\n          </template>\n          <template #aside>\n            <slot\n              name=\"aside\"\n              :open />\n            <div\n              v-if=\"discrete\"\n              class=\"size-4\">\n              <!-- Placeholder for discrete group toggle -->\n            </div>\n            <slot\n              v-else\n              name=\"toggle\"\n              :open>\n              <ScalarSidebarGroupToggle\n                class=\"text-sidebar-c-2\"\n                :open />\n            </slot>\n          </template>\n          <slot :open />\n        </ScalarSidebarButton>\n        <button\n          v-if=\"discrete\"\n          :aria-expanded=\"open\"\n          class=\"absolute top-[1lh] -translate-y-1/2 p-0.75 rounded right-1.25 text-sidebar-c-2\"\n          :class=\"\n            selected\n              ? 'hover:bg-sidebar-b-1 hover:text-sidebar-c-1'\n              : 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover'\n          \"\n          type=\"button\"\n          @click=\"handleToggle\">\n          <slot\n            name=\"toggle\"\n            :open>\n            <ScalarSidebarGroupToggle :open>\n              <template #label>\n                {{ open ? 'Close' : 'Open' }} <slot :open=\"open\" />\n              </template>\n            </ScalarSidebarGroupToggle>\n          </slot>\n        </button>\n      </slot>\n      <slot\n        name=\"after\"\n        :open />\n    </div>\n    <ul\n      v-if=\"open\"\n      class=\"group/items flex flex-col gap-px\">\n      <ScalarSidebarLoading v-if=\"loading\" />\n      <slot\n        v-else\n        name=\"items\"\n        :open />\n    </ul>\n  </component>\n</template>\n"],"mappings":""}

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

@@ -2,6 +2,7 @@ import ScalarSidebarIndent_default from "./ScalarSidebarIndent.vue.js";
 import ScalarSidebarButton_default from "./ScalarSidebarButton.vue.js";
 import ScalarSidebarGroupToggle_default from "./ScalarSidebarGroupToggle.vue.js";
 import { useSidebarGroups } from "./useSidebarGroups.js";
+import ScalarSidebarLoading_default from "./ScalarSidebarLoading.vue.js";
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeClass, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useModel, withCtx } from "vue";
 //#region src/components/ScalarSidebar/ScalarSidebarGroup.vue?vue&type=script&setup=true&lang.ts
@@ -26,7 +27,8 @@ var ScalarSidebarGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		disabled: { type: Boolean },
 		indent: {},
 		controlled: { type: Boolean },
-		discrete: { type: Boolean }
+		discrete: { type: Boolean },
+		loading: { type: Boolean }
 	}, {
 		"open": {
 			type: Boolean,
@@ -103,7 +105,10 @@ var ScalarSidebarGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 						_: 3
 					}, 8, ["open"])])], 10, _hoisted_3)) : createCommentVNode("", true)]),
 					renderSlot(_ctx.$slots, "after", { open: open.value })
-				]), open.value ? (openBlock(), createElementBlock("ul", _hoisted_4, [renderSlot(_ctx.$slots, "items", { open: open.value })])) : createCommentVNode("", true)]),
+				]), open.value ? (openBlock(), createElementBlock("ul", _hoisted_4, [__props.loading ? (openBlock(), createBlock(ScalarSidebarLoading_default, { key: 0 })) : renderSlot(_ctx.$slots, "items", {
+					key: 1,
+					open: open.value
+				})])) : createCommentVNode("", true)]),
 				_: 3
 			}, 16);
 		};

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarGroup.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Group component\n *\n * A collapsible ScalarSidebarItem that can contain subitems.\n *\n * Classes applied to the component are passed to the inner list element.\n * Other attributes (like click event) are passed to the toggle button.\n *\n * @example\n * <ScalarSidebarGroup>\n *   <!-- Group toggle text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarGroup>\n *\n *\n * By default the component has it's own internal open state, but this can be\n * controlled by passing the `controlled` prop and using binding the :open prop.\n *\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarGroupToggle from './ScalarSidebarGroupToggle.vue'\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarGroupSlots } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst {\n  controlled,\n  discrete,\n  is = 'li',\n} = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the group label is clicked */\n  (e: 'click', event: MouseEvent): void\n  /**\n   * Emitted when _only_ the group toggle button (caret) is clicked\n   *\n   * Note: This is only emitted if the group is discrete\n   */\n  (e: 'toggle', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<ScalarSidebarGroupSlots>()\n\nconst { level } = useSidebarGroups({ increment: true })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Handle the click event for the group toggle */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled && !discrete) {\n    // Only toggle the open state if the group is uncontrolled and not discrete\n    open.value = !open.value\n  }\n}\n\n/** Handle the click event for the group toggle */\nconst handleToggle = (event: MouseEvent) => {\n  // Bubble up the toggle event\n  emit('toggle', event)\n  if (!controlled && discrete) {\n    // Only toggle the open state if the group is uncontrolled and not discrete\n    open.value = !open.value\n  }\n}\n</script>\n<template>\n  <component\n    v-bind=\"cx('group/item flex flex-col gap-px')\"\n    :is=\"is\">\n    <div class=\"group/group-button relative flex flex-col text-base\">\n      <slot\n        name=\"before\"\n        :open />\n      <slot\n        :level=\"level\"\n        name=\"button\"\n        :open>\n        <ScalarSidebarButton\n          is=\"button\"\n          :active\n          :aria-expanded=\"open\"\n          :disabled\n          :icon\n          :indent=\"level\"\n          :selected\n          @click=\"handleClick\">\n          <template #indent>\n            <ScalarSidebarIndent\n              class=\"mr-0 -my-2\"\n              :indent=\"level\"\n              :selected />\n          </template>\n          <template\n            v-if=\"$slots.icon\"\n            #icon>\n            <slot\n              name=\"icon\"\n              :open />\n          </template>\n          <template #aside>\n            <slot\n              name=\"aside\"\n              :open />\n            <div\n              v-if=\"discrete\"\n              class=\"size-4\">\n              <!-- Placeholder for discrete group toggle -->\n            </div>\n            <slot\n              v-else\n              name=\"toggle\"\n              :open>\n              <ScalarSidebarGroupToggle\n                class=\"text-sidebar-c-2\"\n                :open />\n            </slot>\n          </template>\n          <slot :open />\n        </ScalarSidebarButton>\n        <button\n          v-if=\"discrete\"\n          :aria-expanded=\"open\"\n          class=\"absolute top-[1lh] -translate-y-1/2 p-0.75 rounded right-1.25 text-sidebar-c-2\"\n          :class=\"\n            selected\n              ? 'hover:bg-sidebar-b-1 hover:text-sidebar-c-1'\n              : 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover'\n          \"\n          type=\"button\"\n          @click=\"handleToggle\">\n          <slot\n            name=\"toggle\"\n            :open>\n            <ScalarSidebarGroupToggle :open>\n              <template #label>\n                {{ open ? 'Close' : 'Open' }} <slot :open=\"open\" />\n              </template>\n            </ScalarSidebarGroupToggle>\n          </slot>\n        </button>\n      </slot>\n      <slot\n        name=\"after\"\n        :open />\n    </div>\n    <ul\n      v-if=\"open\"\n      class=\"group/items flex flex-col gap-px\">\n      <slot\n        name=\"items\"\n        :open />\n    </ul>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,OAAO;EAWb,MAAM,OAAO,SAAoB,SAAC,OAA0B;EAI5D,MAAM,EAAE,UAAU,iBAAiB,EAAE,WAAW,MAAM,CAAA;EAGtD,MAAM,EAAE,OAAO,WAAU;;EAGzB,MAAM,eAAe,UAAsB;AAEzC,QAAK,SAAS,MAAK;AACnB,OAAI,CAAC,QAAA,cAAc,CAAC,QAAA,SAElB,MAAK,QAAQ,CAAC,KAAK;;;EAKvB,MAAM,gBAAgB,UAAsB;AAE1C,QAAK,UAAU,MAAK;AACpB,OAAI,CAAC,QAAA,cAAc,QAAA,SAEjB,MAAK,QAAQ,CAAC,KAAK;;;uBAKrB,YAsFY,wBApFL,QAAA,GAAE,EAAA,eAAA,mBADC,MAAA,GAAE,CAAA,kCAAA,CAAA,CAAA,EAAA;2BA6EJ,CA3EN,mBA2EM,OA3EN,YA2EM;KA1EJ,WAEU,KAAA,QAAA,UAAA,EAAP,MAAA,KAAA,OAAI,CAAA;KACP,WAmEO,KAAA,QAAA,UAAA;MAlEJ,OAAO,MAAA,MAAK;MAEZ,MAAA,KAAA;cAgEI,CA/DL,YAyCsB,6BAAA;MAxCpB,IAAG;MACF,QAAA,QAAA;MACA,iBAAe,KAAA;MACf,UAAA,QAAA;MACA,MAAA,QAAA;MACA,QAAQ,MAAA,MAAK;MACb,UAAA,QAAA;MACA,SAAO;;MACG,QAAM,cAID,CAHd,YAGc,6BAAA;OAFZ,OAAM;OACL,QAAQ,MAAA,MAAK;OACb,UAAA,QAAA;;MASM,OAAK,cAGJ,CAFV,WAEU,KAAA,QAAA,SAAA,EAAP,MAAA,KAAA,OAAI,CAAA,EAEC,QAAA,YAAA,WAAA,EADR,mBAIM,OAJN,WAIM,IACN,WAOO,KAAA,QAAA,UAAA;;OAJJ,MAAA,KAAA;eAII,CAHL,YAEU,kCAAA;OADR,OAAM;OACL,MAAA,KAAA;;6BAGO,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,MAAA,KAAA,OAAI,CAAA,CAAA,CAAA;;SAxBHA,KAAAA,OAAO,OAAA;YACZ;wBAGS,CAFV,WAEU,KAAA,QAAA,QAAA,EAAP,MAAA,KAAA,OAAI,CAAA,CAAA,CAAA;;;;;;;;;SAuBH,QAAA,YAAA,WAAA,EADR,mBAoBS,UAAA;;MAlBN,iBAAe,KAAA;MAChB,OAAK,eAAA,CAAC,kFACe,QAAA,WAAA,gDAAA,sDAAA,CAAA;MAKrB,MAAK;MACJ,SAAO;SACR,WAQO,KAAA,QAAA,UAAA,EANJ,MAAA,KAAA,OAAI,QAMA,CALL,YAI2B,kCAAA,EAJA,MAAA,KAAA,OAAI,EAAA;MAClB,OAAK,cACe,CAAA,gBAAA,gBAA1B,KAAA,QAAI,UAAA,OAAA,GAAsB,KAAC,EAAA,EAAA,WAAqB,KAAA,QAAA,WAAA,EAAd,MAAM,KAAA,OAAI,CAAA,CAAA,CAAA;;;KAMzD,WAEU,KAAA,QAAA,SAAA,EAAP,MAAA,KAAA,OAAI,CAAA;QAGD,KAAA,SAAA,WAAA,EADR,mBAMK,MANL,YAMK,CAHH,WAEU,KAAA,QAAA,SAAA,EAAP,MAAA,KAAA,OAAI,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarSidebarGroup.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Group component\n *\n * A collapsible ScalarSidebarItem that can contain subitems.\n *\n * Classes applied to the component are passed to the inner list element.\n * Other attributes (like click event) are passed to the toggle button.\n *\n * @example\n * <ScalarSidebarGroup>\n *   <!-- Group toggle text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarGroup>\n *\n *\n * By default the component has it's own internal open state, but this can be\n * controlled by passing the `controlled` prop and using binding the :open prop.\n *\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarGroupToggle from './ScalarSidebarGroupToggle.vue'\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarGroupSlots } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst {\n  controlled,\n  discrete,\n  is = 'li',\n} = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the group label is clicked */\n  (e: 'click', event: MouseEvent): void\n  /**\n   * Emitted when _only_ the group toggle button (caret) is clicked\n   *\n   * Note: This is only emitted if the group is discrete\n   */\n  (e: 'toggle', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<ScalarSidebarGroupSlots>()\n\nconst { level } = useSidebarGroups({ increment: true })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Handle the click event for the group toggle */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled && !discrete) {\n    // Only toggle the open state if the group is uncontrolled and not discrete\n    open.value = !open.value\n  }\n}\n\n/** Handle the click event for the group toggle */\nconst handleToggle = (event: MouseEvent) => {\n  // Bubble up the toggle event\n  emit('toggle', event)\n  if (!controlled && discrete) {\n    // Only toggle the open state if the group is uncontrolled and not discrete\n    open.value = !open.value\n  }\n}\n</script>\n<template>\n  <component\n    v-bind=\"cx('group/item flex flex-col gap-px')\"\n    :is=\"is\">\n    <div class=\"group/group-button relative flex flex-col text-base\">\n      <slot\n        name=\"before\"\n        :open />\n      <slot\n        :level=\"level\"\n        name=\"button\"\n        :open>\n        <ScalarSidebarButton\n          is=\"button\"\n          :active\n          :aria-expanded=\"open\"\n          :disabled\n          :icon\n          :indent=\"level\"\n          :selected\n          @click=\"handleClick\">\n          <template #indent>\n            <ScalarSidebarIndent\n              class=\"mr-0 -my-2\"\n              :indent=\"level\"\n              :selected />\n          </template>\n          <template\n            v-if=\"$slots.icon\"\n            #icon>\n            <slot\n              name=\"icon\"\n              :open />\n          </template>\n          <template #aside>\n            <slot\n              name=\"aside\"\n              :open />\n            <div\n              v-if=\"discrete\"\n              class=\"size-4\">\n              <!-- Placeholder for discrete group toggle -->\n            </div>\n            <slot\n              v-else\n              name=\"toggle\"\n              :open>\n              <ScalarSidebarGroupToggle\n                class=\"text-sidebar-c-2\"\n                :open />\n            </slot>\n          </template>\n          <slot :open />\n        </ScalarSidebarButton>\n        <button\n          v-if=\"discrete\"\n          :aria-expanded=\"open\"\n          class=\"absolute top-[1lh] -translate-y-1/2 p-0.75 rounded right-1.25 text-sidebar-c-2\"\n          :class=\"\n            selected\n              ? 'hover:bg-sidebar-b-1 hover:text-sidebar-c-1'\n              : 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover'\n          \"\n          type=\"button\"\n          @click=\"handleToggle\">\n          <slot\n            name=\"toggle\"\n            :open>\n            <ScalarSidebarGroupToggle :open>\n              <template #label>\n                {{ open ? 'Close' : 'Open' }} <slot :open=\"open\" />\n              </template>\n            </ScalarSidebarGroupToggle>\n          </slot>\n        </button>\n      </slot>\n      <slot\n        name=\"after\"\n        :open />\n    </div>\n    <ul\n      v-if=\"open\"\n      class=\"group/items flex flex-col gap-px\">\n      <ScalarSidebarLoading v-if=\"loading\" />\n      <slot\n        v-else\n        name=\"items\"\n        :open />\n    </ul>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,MAAM,OAAO;EAWb,MAAM,OAAO,SAAoB,SAAC,OAA0B;EAI5D,MAAM,EAAE,UAAU,iBAAiB,EAAE,WAAW,MAAM,CAAA;EAGtD,MAAM,EAAE,OAAO,WAAU;;EAGzB,MAAM,eAAe,UAAsB;AAEzC,QAAK,SAAS,MAAK;AACnB,OAAI,CAAC,QAAA,cAAc,CAAC,QAAA,SAElB,MAAK,QAAQ,CAAC,KAAK;;;EAKvB,MAAM,gBAAgB,UAAsB;AAE1C,QAAK,UAAU,MAAK;AACpB,OAAI,CAAC,QAAA,cAAc,QAAA,SAEjB,MAAK,QAAQ,CAAC,KAAK;;;uBAKrB,YAwFY,wBAtFL,QAAA,GAAE,EAAA,eAAA,mBADC,MAAA,GAAE,CAAA,kCAAA,CAAA,CAAA,EAAA;2BA6EJ,CA3EN,mBA2EM,OA3EN,YA2EM;KA1EJ,WAEU,KAAA,QAAA,UAAA,EAAP,MAAA,KAAA,OAAI,CAAA;KACP,WAmEO,KAAA,QAAA,UAAA;MAlEJ,OAAO,MAAA,MAAK;MAEZ,MAAA,KAAA;cAgEI,CA/DL,YAyCsB,6BAAA;MAxCpB,IAAG;MACF,QAAA,QAAA;MACA,iBAAe,KAAA;MACf,UAAA,QAAA;MACA,MAAA,QAAA;MACA,QAAQ,MAAA,MAAK;MACb,UAAA,QAAA;MACA,SAAO;;MACG,QAAM,cAID,CAHd,YAGc,6BAAA;OAFZ,OAAM;OACL,QAAQ,MAAA,MAAK;OACb,UAAA,QAAA;;MASM,OAAK,cAGJ,CAFV,WAEU,KAAA,QAAA,SAAA,EAAP,MAAA,KAAA,OAAI,CAAA,EAEC,QAAA,YAAA,WAAA,EADR,mBAIM,OAJN,WAIM,IACN,WAOO,KAAA,QAAA,UAAA;;OAJJ,MAAA,KAAA;eAII,CAHL,YAEU,kCAAA;OADR,OAAM;OACL,MAAA,KAAA;;6BAGO,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,MAAA,KAAA,OAAI,CAAA,CAAA,CAAA;;SAxBHA,KAAAA,OAAO,OAAA;YACZ;wBAGS,CAFV,WAEU,KAAA,QAAA,QAAA,EAAP,MAAA,KAAA,OAAI,CAAA,CAAA,CAAA;;;;;;;;;SAuBH,QAAA,YAAA,WAAA,EADR,mBAoBS,UAAA;;MAlBN,iBAAe,KAAA;MAChB,OAAK,eAAA,CAAC,kFACe,QAAA,WAAA,gDAAA,sDAAA,CAAA;MAKrB,MAAK;MACJ,SAAO;SACR,WAQO,KAAA,QAAA,UAAA,EANJ,MAAA,KAAA,OAAI,QAMA,CALL,YAI2B,kCAAA,EAJA,MAAA,KAAA,OAAI,EAAA;MAClB,OAAK,cACe,CAAA,gBAAA,gBAA1B,KAAA,QAAI,UAAA,OAAA,GAAsB,KAAC,EAAA,EAAA,WAAqB,KAAA,QAAA,WAAA,EAAd,MAAM,KAAA,OAAI,CAAA,CAAA,CAAA;;;KAMzD,WAEU,KAAA,QAAA,SAAA,EAAP,MAAA,KAAA,OAAI,CAAA;QAGD,KAAA,SAAA,WAAA,EADR,mBAQK,MARL,YAQK,CALyB,QAAA,WAAA,WAAA,EAA5B,YAAuC,8BAAA,EAAA,KAAA,GAAA,CAAA,IACvC,WAGU,KAAA,QAAA,SAAA;;KAAP,MAAA,KAAA"}

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

@@ -0,0 +1,19 @@
+/**
+ * Skeleton loading UI for the sidebar. Renders animated pulse bars inside
+ * `ScalarSidebarItem` rows so spacing and hierarchy match real navigation while content loads.
+ *
+ * @example
+ * ```vue
+ * <ScalarSidebarLoading :items="6" />
+ * ```
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The number of items to display */
+    items?: number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The number of items to display */
+    items?: number;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=ScalarSidebarLoading.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarLoading.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarLoading.vue"],"names":[],"mappings":"AA6CA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,qCAAqC;YAC7B,MAAM;;IADd,qCAAqC;YAC7B,MAAM;iGAgDZ,CAAC"}

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

@@ -0,0 +1,8 @@
+import ScalarSidebarLoading_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarLoading.vue.script.js";
+/* empty css                                   */
+//#region src/components/ScalarSidebar/ScalarSidebarLoading.vue
+var ScalarSidebarLoading_default = ScalarSidebarLoading_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarSidebarLoading_default as default };
+
+//# sourceMappingURL=ScalarSidebarLoading.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarLoading.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarLoading.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Skeleton loading UI for the sidebar. Renders animated pulse bars inside\n * `ScalarSidebarItem` rows so spacing and hierarchy match real navigation while content loads.\n *\n * @example\n * ```vue\n * <ScalarSidebarLoading :items=\"6\" />\n * ```\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarSidebarItem from '@/components/ScalarSidebar/ScalarSidebarItem.vue'\n\nconst { items = 4 } = defineProps<{\n  /** The number of items to display */\n  items?: number\n}>()\n</script>\n<template>\n  <ScalarSidebarItem\n    v-for=\"idx in items\"\n    :key=\"idx\"\n    class=\"pointer-events-none\">\n    <div\n      class=\"group/button-loading bg-sidebar-c-2/15 rounded-lg animate-pulse h-lh w-full box-content py-px -my-px\" />\n  </ScalarSidebarItem>\n</template>\n<style>\n@reference \"../../style.css\";\n\n.group\\/item:last-of-type\n  > .group\\/button\n  > .group\\/button-label\n  > .group\\/button-loading {\n  @apply w-2/3;\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,23 @@
+import ScalarSidebarItem_default from "./ScalarSidebarItem.vue.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, withCtx } from "vue";
+var ScalarSidebarLoading_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarSidebarLoading",
+	props: { items: { default: 4 } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (idx) => {
+				return openBlock(), createBlock(ScalarSidebarItem_default, {
+					key: idx,
+					class: "pointer-events-none"
+				}, {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "group/button-loading bg-sidebar-c-2/15 rounded-lg animate-pulse h-lh w-full box-content py-px -my-px" }, null, -1)])]),
+					_: 1
+				});
+			}), 128);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarLoading_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarLoading.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarLoading.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarLoading.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Skeleton loading UI for the sidebar. Renders animated pulse bars inside\n * `ScalarSidebarItem` rows so spacing and hierarchy match real navigation while content loads.\n *\n * @example\n * ```vue\n * <ScalarSidebarLoading :items=\"6\" />\n * ```\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarSidebarItem from '@/components/ScalarSidebar/ScalarSidebarItem.vue'\n\nconst { items = 4 } = defineProps<{\n  /** The number of items to display */\n  items?: number\n}>()\n</script>\n<template>\n  <ScalarSidebarItem\n    v-for=\"idx in items\"\n    :key=\"idx\"\n    class=\"pointer-events-none\">\n    <div\n      class=\"group/button-loading bg-sidebar-c-2/15 rounded-lg animate-pulse h-lh w-full box-content py-px -my-px\" />\n  </ScalarSidebarItem>\n</template>\n<style>\n@reference \"../../style.css\";\n\n.group\\/item:last-of-type\n  > .group\\/button\n  > .group\\/button-label\n  > .group\\/button-loading {\n  @apply w-2/3;\n}\n</style>\n"],"mappings":";;;;;;;2BAqBE,mBAMoB,UAAA,MAAA,WALJ,QAAA,QAAP,QAAG;wBADZ,YAMoB,2BAAA;KAJjB,KAAK;KACN,OAAM;;4BAE2G,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADjH,mBACiH,OAAA,EAA/G,OAAM,wGAAsG,EAAA,MAAA,GAAA,CAAA,EAAA,CAAA"}

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

@@ -19,6 +19,7 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("./types").ScalarSidebarItemProps & {
     controlled?: boolean;
     discrete?: boolean;
+    loading?: boolean;
 } & {
     open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -29,6 +30,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
 }, string, import("vue").PublicProps, Readonly<import("./types").ScalarSidebarItemProps & {
     controlled?: boolean;
     discrete?: boolean;
+    loading?: boolean;
 } & {
     open?: boolean;
 }> & Readonly<{

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarNestedItems.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"names":[],"mappings":"AAoNA;;;;;;;;;;;;;;;GAeG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;WA+FT,OAAO;;;;;;;;;;WAAP,OAAO;;;;;;IA9Ed,qCAAqC;cACzB,MAAM,OAAO;IACzB,iCAAiC;aACtB,MAAM,OAAO;IACxB,wBAAwB;WACf,MAAM,OAAO;IACtB,8BAA8B;YACpB,MAAM,OAAO;IACvB,+BAA+B;WACtB,MAAM,OAAO;IACtB,qCAAqC;mBACtB,MAAM,OAAO;IAC5B,mCAAmC;YACzB,MAAM,OAAO;EAoTrB,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":"ScalarSidebarNestedItems.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"names":[],"mappings":"AAyNA;;;;;;;;;;;;;;;GAeG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;WA+FT,OAAO;;;;;;;;;;;WAAP,OAAO;;;;;;IA9Ed,qCAAqC;cACzB,MAAM,OAAO;IACzB,iCAAiC;aACtB,MAAM,OAAO;IACxB,wBAAwB;WACf,MAAM,OAAO;IACtB,8BAA8B;YACpB,MAAM,OAAO;IACvB,+BAA+B;WACtB,MAAM,OAAO;IACtB,qCAAqC;mBACtB,MAAM,OAAO;IAC5B,mCAAmC;YACzB,MAAM,OAAO;EA8TrB,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/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 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          <slot 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) 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":""}

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

@@ -1,10 +1,11 @@
 import ScalarSidebarButton_default from "./ScalarSidebarButton.vue.js";
 import { useSidebarGroups } from "./useSidebarGroups.js";
+import ScalarSidebarLoading_default from "./ScalarSidebarLoading.vue.js";
 import { useSidebarNestedItem } from "./useSidebarNestedItems.js";
 import ScalarSidebarItems_default from "./ScalarSidebarItems.vue.js";
 import ScalarSidebarSpacer_default from "./ScalarSidebarSpacer.vue.js";
 import { findScrollContainer } from "./findScrollContainer.js";
-import { Transition, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, withCtx } from "vue";
+import { Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, withCtx } from "vue";
 import { ScalarIconArrowRight, ScalarIconCaretLeft } from "@scalar/icons";
 //#region src/components/ScalarSidebar/ScalarSidebarNestedItems.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -23,7 +24,8 @@ var ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default = /* @_
 		disabled: { type: Boolean },
 		indent: {},
 		controlled: { type: Boolean },
-		discrete: { type: Boolean }
+		discrete: { type: Boolean },
+		loading: { type: Boolean }
 	}, {
 		"open": {
 			type: Boolean,
@@ -109,7 +111,7 @@ var ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default = /* @_
 						icon: withCtx(() => [createVNode(unref(ScalarIconCaretLeft), { class: "size-4 -m-px text-sidebar-c-2" })]),
 						default: withCtx(() => [renderSlot(_ctx.$slots, "back-label", {}, () => [_cache[0] || (_cache[0] = createTextVNode("Back", -1))])]),
 						_: 3
-					})]), createVNode(ScalarSidebarSpacer_default, { class: "h-3" })]), renderSlot(_ctx.$slots, "items")]),
+					})]), createVNode(ScalarSidebarSpacer_default, { class: "h-3" })]), __props.loading ? (openBlock(), createBlock(ScalarSidebarLoading_default, { key: 0 })) : renderSlot(_ctx.$slots, "items", { key: 1 })]),
 					_: 3
 				}, 16)])) : createCommentVNode("", true)]),
 				_: 3

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 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          <slot 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,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,mBA2DK,MAAA;aA1DC;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,YA6Ba,YAAA;IA5BV,UAAU;IACX,kBAAiB;IACjB,kBAAiB;IAChB,cAAY;IACZ,SAAO;IACP,SAAO;;2BAsBF,CApBE,KAAA,SAAA,WAAA,EADR,mBAqBM,OArBN,YAqBM,CAlBJ,YAiBqB,4BAAA,eAAA,mBAjBOD,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,EAElC,WAAqB,KAAA,QAAA,QAAA,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) 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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-0.25 size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-px size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}

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

@@ -50,7 +50,7 @@ var ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @_
 					size: "md"
 				}, null, 8, ["loader"])) : model.value ? (openBlock(), createBlock(unref(ScalarIconButton_default), {
 					key: 1,
-					class: "p-0.25 size-4",
+					class: "p-px size-4",
 					icon: unref(ScalarIconX),
 					label: "Clear Search",
 					weight: "bold",

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-0.25 size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,WAAW,IAA6B,KAAI;EAElD,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB,QAAA,aAAa,SAAS,OAAO,OAAO,CAAA;;uBAGlD,mBAiCQ,SAAA,eAAA,mBAhCS,MAAA,eAAc,CAAA,qIAAA,oDAAmN,MAAA,QAAK,qBAAA,wBAAA,CAAA,CAAA,EAAA;IAOrP,YAAkE,MAAA,0BAAA,EAAA,EAAvC,OAAM,gCAA8B,CAAA;mBAC/D,mBAWkB,SAXlB,WAWkB;cAVZ;KAAJ,KAAI;OACI,MAAA,WAAU,EAAA;wEACJ,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;6CARI,MAAA,MAAK,CAAA,CAAA;IAUR,QAAA,UAAU,QAAA,OAAO,YAAA,WAAA,EADzB,YAIc,MAAA,sBAAA,EAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,WAAA,EADb,YAMsC,MAAA,yBAAA,EAAA;;KAJpC,OAAM;KACL,MAAM,MAAA,YAAW;KAClB,OAAM;KACN,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}
+{"version":3,"file":"ScalarSidebarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-px size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,WAAW,IAA6B,KAAI;EAElD,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB,QAAA,aAAa,SAAS,OAAO,OAAO,CAAA;;uBAGlD,mBAiCQ,SAAA,eAAA,mBAhCS,MAAA,eAAc,CAAA,qIAAA,oDAAmN,MAAA,QAAK,qBAAA,wBAAA,CAAA,CAAA,EAAA;IAOrP,YAAkE,MAAA,0BAAA,EAAA,EAAvC,OAAM,gCAA8B,CAAA;mBAC/D,mBAWkB,SAXlB,WAWkB;cAVZ;KAAJ,KAAI;OACI,MAAA,WAAU,EAAA;wEACJ,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;6CARI,MAAA,MAAK,CAAA,CAAA;IAUR,QAAA,UAAU,QAAA,OAAO,YAAA,WAAA,EADzB,YAIc,MAAA,sBAAA,EAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,WAAA,EADb,YAMsC,MAAA,yBAAA,EAAA;;KAJpC,OAAM;KACL,MAAM,MAAA,YAAW;KAClB,OAAM;KACN,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}

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

@@ -1,4 +1,4 @@
-import type { ScalarSidebarItemProps } from './types';
+import type { ScalarSidebarGroupProps, ScalarSidebarItemProps } from './types';
 /**
  * Scalar Sidebar Section component
  *
@@ -19,7 +19,7 @@ import type { ScalarSidebarItemProps } from './types';
  */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScalarSidebarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarSidebarItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScalarSidebarItemProps & Pick<ScalarSidebarGroupProps, "loading">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarSidebarItemProps & Pick<ScalarSidebarGroupProps, "loading">> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** The text content of the toggle */
     default?(): unknown;
     /** The list of sidebar subitems */

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":"AA2FA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAIrD;;;;;;;;;;;;;;;;;GAiBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAMhB,qCAAqC;gBACzB,OAAO;IACnB,mCAAmC;cACzB,OAAO;EAyGf,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":"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"}

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 ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<ScalarSidebarItemProps>()\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      <slot 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      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

@@ -1,5 +1,6 @@
 import ScalarSidebarButton_default from "./ScalarSidebarButton.vue.js";
 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";
@@ -14,7 +15,8 @@ var ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 		active: { type: Boolean },
 		selected: { type: Boolean },
 		disabled: { type: Boolean },
-		indent: {}
+		indent: {},
+		loading: { type: Boolean }
 	},
 	setup(__props) {
 		const { level } = useSidebarGroups({ increment: false });
@@ -36,7 +38,7 @@ var ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 						_: 3
 					}, 8, ["icon", "indent"]),
-					createElementVNode("ul", _hoisted_1, [renderSlot(_ctx.$slots, "items")]),
+					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",
 						indent: unref(level)

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 ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<ScalarSidebarItemProps>()\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      <slot 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":";;;;;;;;;;;;;;;;;;;EAsCA,MAAM,EAAE,UAAU,iBAAiB,EAAE,WAAW,OAAO,CAAA;EAGvD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAoBY,wBAnBL,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,mBAEK,MAFL,YAEK,CADH,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA;KAEvB,YAEoB,6BAAA;MADlB,OAAM;MACL,QAAQ,MAAA,MAAK"}
+{"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"}

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

@@ -56,6 +56,12 @@ export type ScalarSidebarGroupProps = ScalarSidebarItemProps & {
      * </ScalarSidebarGroup>
      */
     discrete?: boolean;
+    /**
+     * Whether the group items are loading
+     *
+     * Will render a loading skeleton for the contents of the group
+     */
+    loading?: boolean;
 };
 /** Scalar Sidebar Item Slots */
 export type ScalarSidebarButtonSlots = {

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

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

package/dist/index.js

@@ -84,8 +84,8 @@ import ScalarSidebarIndent_default from "./components/ScalarSidebar/ScalarSideba
 import ScalarSidebarButton_default from "./components/ScalarSidebar/ScalarSidebarButton.vue.js";
 import ScalarSidebarFooter_default from "./components/ScalarSidebar/ScalarSidebarFooter.vue.js";
 import ScalarSidebarGroupToggle_default from "./components/ScalarSidebar/ScalarSidebarGroupToggle.vue.js";
-import ScalarSidebarGroup_default from "./components/ScalarSidebar/ScalarSidebarGroup.vue.js";
 import ScalarSidebarItem_default from "./components/ScalarSidebar/ScalarSidebarItem.vue.js";
+import ScalarSidebarGroup_default from "./components/ScalarSidebar/ScalarSidebarGroup.vue.js";
 import ScalarSidebarItems_default from "./components/ScalarSidebar/ScalarSidebarItems.vue.js";
 import ScalarSidebarSpacer_default from "./components/ScalarSidebar/ScalarSidebarSpacer.vue.js";
 import ScalarSidebarNestedItems_default from "./components/ScalarSidebar/ScalarSidebarNestedItems.vue.js";

package/dist/style.css

@@ -1085,6 +1085,10 @@ img,
   bottom: 0;
 }
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+.group\/item:last-of-type > .group\/button > .group\/button-label > .group\/button-loading {
+  width: 66.6667%;
+}
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
 .group\/items.-translate-x-full .group\/button {
   transition-behavior: allow-discrete;
   max-height: 0;
@@ -1682,6 +1686,7 @@ to {
     --ease-in: cubic-bezier(.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   }
@@ -2226,6 +2231,10 @@ to {
   margin-block: -8px;
 }
 
+.scalar-app .-my-px {
+  margin-block: -1px;
+}
+
 .scalar-app .my-0\.75 {
   margin-block: 3px;
 }
@@ -2314,6 +2323,10 @@ to {
   margin-left: auto;
 }
 
+.scalar-app .box-content {
+  box-sizing: content-box;
+}
+
 .scalar-app .line-clamp-\(--markdown-clamp\) {
   -webkit-line-clamp: var(--markdown-clamp);
   -webkit-box-orient: vertical;
@@ -2782,6 +2795,10 @@ to {
   transform: var(--tw-rotate-x,  ) var(--tw-rotate-y,  ) var(--tw-rotate-z,  ) var(--tw-skew-x,  ) var(--tw-skew-y,  );
 }
 
+.scalar-app .animate-pulse {
+  animation: var(--animate-pulse);
+}
+
 .scalar-app .cursor-auto {
   cursor: auto;
 }
@@ -3175,6 +3192,16 @@ to {
   background-color: var(--scalar-sidebar-search-background, var(--scalar-background-2));
 }
 
+.scalar-app .bg-sidebar-c-2\/15 {
+  background-color: var(--scalar-sidebar-color-2, var(--scalar-color-2));
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .scalar-app .bg-sidebar-c-2\/15 {
+    background-color: color-mix(in oklab, var(--scalar-sidebar-color-2, var(--scalar-color-2)) 15%, transparent);
+  }
+}
+
 .scalar-app .bg-sidebar-indent-border {
   background-color: var(--scalar-sidebar-indent-border, var(--scalar-border-color));
 }
@@ -3270,10 +3297,6 @@ to {
   padding: 2px;
 }
 
-.scalar-app .p-0\.25 {
-  padding: 1px;
-}
-
 .scalar-app .p-0\.75 {
   padding: 3px;
 }
@@ -3386,6 +3409,10 @@ to {
   padding-block: 6.75px;
 }
 
+.scalar-app .py-px {
+  padding-block: 1px;
+}
+
 .scalar-app .pt-3 {
   padding-top: 12px;
 }
@@ -4646,4 +4673,10 @@ to {
   syntax: "*";
   inherits: false
 }
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
 /*$vite$:1*/

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.22.3",
+  "version": "0.22.4",
   "engines": {
     "node": ">=22"
   },
@@ -39,11 +39,11 @@
     "radix-vue": "^1.9.17",
     "vue": "^3.5.30",
     "vue-component-type-helpers": "^3.2.6",
-    "@scalar/helpers": "0.5.2",
-    "@scalar/code-highlight": "0.3.3",
+    "@scalar/code-highlight": "0.3.4",
     "@scalar/themes": "0.15.3",
-    "@scalar/use-hooks": "0.4.3",
-    "@scalar/icons": "0.7.2"
+    "@scalar/icons": "0.7.2",
+    "@scalar/helpers": "0.5.2",
+    "@scalar/use-hooks": "0.4.3"
   },
   "devDependencies": {
     "@headlessui/tailwindcss": "^0.2.2",