@scalar/components 0.27.10 → 0.28.1

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n  label?: string\n  placeholder?: string\n  clearLabel?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\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</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\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=\"placeholder ?? 'Search...'\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-1\"\n      :loader\n      size=\"lg\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"-my-1\"\n      :icon=\"ScalarIconX\"\n      :label=\"clearLabel ?? 'Clear Search'\"\n      size=\"sm\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,WAAW,IAA6B,KAAI;EAElD,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;;uBAG/C,mBAgCQ,SAAA,eAAA,mBA/BS,MAAA,eAAc,CAAA,uEAAA,CAAA,CAAA,EAAA;IAK7B,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;KACL,aAAa,QAAA,eAAW;KACzB,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,YAOsC,MAAA,yBAAA,EAAA;;KALpC,OAAM;KACL,MAAM,MAAA,YAAW;KACjB,OAAO,QAAA,cAAU;KAClB,MAAK;KACL,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}
+{"version":3,"file":"ScalarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n  label?: string\n  placeholder?: string\n  clearLabel?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\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</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\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=\"placeholder ?? 'Search...'\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-1\"\n      :loader\n      size=\"lg\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"-my-1\"\n      :icon=\"ScalarIconX\"\n      :label=\"clearLabel ?? 'Clear Search'\"\n      size=\"sm\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAElC,MAAM,WAAW,IAA6B,IAAI;EAElD,SAAS,cAAc;GACrB,MAAM,QAAQ;GAEd,IAAI,SAAS,OACX,SAAS,MAAM,MAAM;EAEzB;EAGA,MAAM,EAAE,gBAAgB,eAAe,UAAU;;uBAG/C,mBAgCQ,SAAA,eAAA,mBA/BS,MAAA,cAAA,CAAc,CAAA,sEAAA,CAAA,CAAA,GAAA;IAK7B,YAAkE,MAAA,yBAAA,GAAA,EAAvC,OAAM,+BAA8B,CAAA;mBAC/D,mBAWkB,SAXlB,WAWkB;cAVZ;KAAJ,KAAI;OACI,MAAA,UAAA,GAAU;wEACJ,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACL,aAAa,QAAA,eAAW;KACzB,YAAW;KACX,MAAK;6CARI,MAAA,KAAK,CAAA,CAAA;IAUR,QAAA,UAAU,QAAA,OAAO,YAAA,UAAA,GADzB,YAIc,MAAA,qBAAA,GAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,UAAA,GADb,YAOsC,MAAA,wBAAA,GAAA;;KALpC,OAAM;KACL,MAAM,MAAA,WAAA;KACN,OAAO,QAAA,cAAU;KAClB,MAAK;KACL,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,SAAA,CAAA"}

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.script.js

@@ -18,7 +18,7 @@ var _hoisted_7 = {
 	key: 0,
 	class: "truncate zoomed:whitespace-normal! wrap-break-word text-c-2"
 };
-var ScalarSearchResultItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarSearchResultItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSearchResultItem",
 	props: {

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultItem.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result Item component\n *\n * A single search result entry with an optional icon, description, and addon slot.\n *\n * @example\n * <ScalarSearchResultItem :icon=\"ScalarIconFile\">\n *   Result Title\n *   <template #description>Result description</template>\n * </ScalarSearchResultItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\ndefineProps<{\n  icon?: Icon | ScalarIconComponent\n  selected?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <a\n    :aria-selected=\"selected\"\n    role=\"option\"\n    tabindex=\"-1\"\n    v-bind=\"\n      cx(\n        'group flex cursor-pointer gap-2 rounded px-2 py-1.5 no-underline hover:bg-b-2 text-base/5',\n        { 'bg-b-2': selected },\n      )\n    \">\n    <!-- Icon -->\n    <div\n      v-if=\"icon\"\n      class=\"flex h-fit items-center text-sm font-medium text-c-3 group-hover:text-c-1\">\n      <slot name=\"icon\">\n        <ScalarIconLegacyAdapter\n          v-if=\"icon\"\n          class=\"size-4\"\n          :icon=\"icon\" />\n      </slot>\n      <span>&hairsp;</span>\n    </div>\n    <!-- Content -->\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n      <div class=\"flex items-center gap-1\">\n        <div\n          class=\"flex-1 truncate zoomed:whitespace-normal! wrap-break-word font-medium\">\n          <slot />\n        </div>\n        <div\n          v-if=\"$slots.addon\"\n          class=\"text-base text-c-2\">\n          <slot name=\"addon\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.description\"\n        class=\"truncate zoomed:whitespace-normal! wrap-break-word text-c-2\">\n        <slot name=\"description\" />\n      </div>\n    </div>\n  </a>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAyCI,KAzCJ,WAyCI;IAxCD,iBAAe,QAAA;IAChB,MAAK;IACL,UAAS;MACM,MAAA,GAAE,CAAA,6FAAA,EAAA,UAA2H,QAAA,UAAQ,CAAA,CAAA,EAAA,CAQ5I,QAAA,QAAA,WAAA,EADR,mBAUM,OAVN,YAUM,CAPJ,WAKO,KAAA,QAAA,QAAA,EAAA,QAAA,CAHG,QAAA,QAAA,WAAA,EADR,YAGiB,MAAA,gCAAA,EAAA;;IADf,OAAM;IACL,MAAM,QAAA;sFAEX,mBAAqB,QAAA,MAAf,KAAQ,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,EAGhB,mBAiBM,OAjBN,YAiBM,CAhBJ,mBAUM,OAVN,YAUM,CATJ,mBAGM,OAHN,YAGM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,EAGFA,KAAAA,OAAO,SAAA,WAAA,EADf,mBAIM,OAJN,YAIM,CADJ,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,EAIjBA,KAAAA,OAAO,eAAA,WAAA,EADf,mBAIM,OAJN,YAIM,CADJ,WAA2B,KAAA,QAAA,cAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,EAAA,IAAA,WAAA"}
+{"version":3,"file":"ScalarSearchResultItem.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result Item component\n *\n * A single search result entry with an optional icon, description, and addon slot.\n *\n * @example\n * <ScalarSearchResultItem :icon=\"ScalarIconFile\">\n *   Result Title\n *   <template #description>Result description</template>\n * </ScalarSearchResultItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\ndefineProps<{\n  icon?: Icon | ScalarIconComponent\n  selected?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <a\n    :aria-selected=\"selected\"\n    role=\"option\"\n    tabindex=\"-1\"\n    v-bind=\"\n      cx(\n        'group flex cursor-pointer gap-2 rounded px-2 py-1.5 no-underline hover:bg-b-2 text-base/5',\n        { 'bg-b-2': selected },\n      )\n    \">\n    <!-- Icon -->\n    <div\n      v-if=\"icon\"\n      class=\"flex h-fit items-center text-sm font-medium text-c-3 group-hover:text-c-1\">\n      <slot name=\"icon\">\n        <ScalarIconLegacyAdapter\n          v-if=\"icon\"\n          class=\"size-4\"\n          :icon=\"icon\" />\n      </slot>\n      <span>&hairsp;</span>\n    </div>\n    <!-- Content -->\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n      <div class=\"flex items-center gap-1\">\n        <div\n          class=\"flex-1 truncate zoomed:whitespace-normal! wrap-break-word font-medium\">\n          <slot />\n        </div>\n        <div\n          v-if=\"$slots.addon\"\n          class=\"text-base text-c-2\">\n          <slot name=\"addon\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.description\"\n        class=\"truncate zoomed:whitespace-normal! wrap-break-word text-c-2\">\n        <slot name=\"description\" />\n      </div>\n    </div>\n  </a>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAyCI,KAzCJ,WAyCI;IAxCD,iBAAe,QAAA;IAChB,MAAK;IACL,UAAS;MACM,MAAA,EAAA,CAAE,CAAA,6FAAA,EAAA,UAA2H,QAAA,SAAQ,CAAA,CAAA,GAAA,CAQ5I,QAAA,QAAA,UAAA,GADR,mBAUM,OAVN,YAUM,CAPJ,WAKO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHG,QAAA,QAAA,UAAA,GADR,YAGiB,MAAA,+BAAA,GAAA;;IADf,OAAM;IACL,MAAM,QAAA;sFAEX,mBAAqB,QAAA,MAAf,KAAQ,EAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGhB,mBAiBM,OAjBN,YAiBM,CAhBJ,mBAUM,OAVN,YAUM,CATJ,mBAGM,OAHN,YAGM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,GAGFA,KAAAA,OAAO,SAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,GAIjBA,KAAAA,OAAO,eAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAA2B,KAAA,QAAA,aAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.script.js

@@ -1,16 +1,16 @@
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
-var ScalarSearchResultList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarSearchResultList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSearchResultList",
 	props: { noResults: { type: Boolean } },
 	setup(__props) {
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ role: "listbox" }, unref(cx)("flex flex-col")), [__props.noResults ? renderSlot(_ctx.$slots, "noResults", { key: 0 }, () => [_cache[0] || (_cache[0] = createElementVNode("div", { class: "flex flex-col items-center gap-2 px-3 py-4" }, [createElementVNode("div", {
+			return openBlock(), createElementBlock("div", mergeProps({ role: "listbox" }, unref(cx)("flex flex-col")), [__props.noResults ? renderSlot(_ctx.$slots, "noResults", {}, () => [_cache[0] || (_cache[0] = createElementVNode("div", { class: "flex flex-col items-center gap-2 px-3 py-4" }, [createElementVNode("div", {
 				class: "text-base font-medium text-c-2",
 				role: "alert"
-			}, " No results found ")], -1))]) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 16);
+			}, " No results found ")], -1))], void 0, 0) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 16);
 		};
 	}
 });

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultList.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result List component\n *\n * A container for search result items with a \"no results\" fallback.\n *\n * @example\n * <ScalarSearchResultList :noResults=\"results.length === 0\">\n *   <ScalarSearchResultItem v-for=\"r in results\" :key=\"r.id\">\n *     {{ r.label }}\n *   </ScalarSearchResultItem>\n * </ScalarSearchResultList>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  noResults?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"listbox\"\n    v-bind=\"cx('flex flex-col')\">\n    <slot\n      v-if=\"noResults\"\n      name=\"noResults\">\n      <div class=\"flex flex-col items-center gap-2 px-3 py-4\">\n        <div\n          class=\"text-base font-medium text-c-2\"\n          role=\"alert\">\n          No results found\n        </div>\n      </div>\n    </slot>\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;EAuBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAeM,OAfN,WAeM,EAdJ,MAAK,WAAS,EACN,MAAA,GAAE,CAAA,gBAAA,CAAA,EAAA,CAEF,QAAA,YADR,WAUO,KAAA,QAAA,aAAA,EAAA,KAAA,GAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAPL,mBAMM,OAAA,EAND,OAAM,8CAA4C,EAAA,CACrD,mBAIM,OAAA;IAHJ,OAAM;IACN,MAAK;MAAQ,qBAEf,CAAA,EAAA,GAAA,EAAA,CAAA,GAAA,mBAAA,IAAA,KAAA,EAGJ,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarSearchResultList.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result List component\n *\n * A container for search result items with a \"no results\" fallback.\n *\n * @example\n * <ScalarSearchResultList :noResults=\"results.length === 0\">\n *   <ScalarSearchResultItem v-for=\"r in results\" :key=\"r.id\">\n *     {{ r.label }}\n *   </ScalarSearchResultItem>\n * </ScalarSearchResultList>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  noResults?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"listbox\"\n    v-bind=\"cx('flex flex-col')\">\n    <slot\n      v-if=\"noResults\"\n      name=\"noResults\">\n      <div class=\"flex flex-col items-center gap-2 px-3 py-4\">\n        <div\n          class=\"text-base font-medium text-c-2\"\n          role=\"alert\">\n          No results found\n        </div>\n      </div>\n    </slot>\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;EAuBA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAeM,OAfN,WAeM,EAdJ,MAAK,UAAS,GACN,MAAA,EAAA,CAAE,CAAA,eAAA,CAAA,GAAA,CAEF,QAAA,YADR,WAUO,KAAA,QAAA,aAAA,CAAA,SAAA,CAAA,OAAA,OAAA,OAAA,KAPL,mBAMM,OAAA,EAND,OAAM,6CAA4C,GAAA,CACrD,mBAIM,OAAA;IAHJ,OAAM;IACN,MAAK;MAAQ,oBAEf,CAAA,GAAA,EAAA,EAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA,GAGJ,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

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

@@ -1,6 +1,6 @@
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
-var ScalarSidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarSidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSidebar",
 	setup(__props) {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebar.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar component\n *\n * A sidebar for navigation and other content.\n *\n * @example\n *   <ScalarSidebar>\n *     <!-- Sidebar content -->\n *   </ScalarSidebar>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <aside\n    v-bind=\"\n      cx('flex flex-col border-r bg-sidebar-b-1 border-sidebar-border w-72')\n    \">\n    <slot />\n  </aside>\n</template>\n"],"mappings":";;;;;;EAiBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAKQ,SAAA,eAAA,mBAJS,MAAA,GAAE,CAAA,mEAAA,CAAA,CAAA,EAAA,CAGjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarSidebar.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar component\n *\n * A sidebar for navigation and other content.\n *\n * @example\n *   <ScalarSidebar>\n *     <!-- Sidebar content -->\n *   </ScalarSidebar>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <aside\n    v-bind=\"\n      cx('flex flex-col border-r bg-sidebar-b-1 border-sidebar-border w-72')\n    \">\n    <slot />\n  </aside>\n</template>\n"],"mappings":";;;;;;EAiBA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAKQ,SAAA,eAAA,mBAJS,MAAA,EAAA,CAAE,CAAA,kEAAA,CAAA,CAAA,GAAA,CAGjB,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarButton.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Button component\n *\n * Provide a styled link for the ScalarSidebar or similar, supports\n * the same props and slots as ScalarSidebarItem\n *\n * This is used internally by the ScalarSidebarItem component\n *\n * If you're looking to create items in ScalarSidebarItems\n * you probably want the ScalarSidebarItem component\n *\n * @example\n *   <ScalarSidebarButton>\n *     <template #icon>\n *       <!-- Overrides the icon slot -->\n *     </template>\n *     <!-- Button text -->\n *     <template #aside>\n *       <!-- After the button text -->\n *     </template>\n *   </ScalarSidebarButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarIconLegacyAdapter } from '../ScalarIcon'\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { ScalarSidebarButtonSlots, ScalarSidebarItemProps } from './types'\n\nconst { is = 'a', indent = 0 } = defineProps<ScalarSidebarItemProps>()\n\ndefineSlots<ScalarSidebarButtonSlots>()\n\nconst variants = cva({\n  base: [\n    'group/button peer/button flex items-stretch rounded p-2',\n    'font-sidebar text-base/4  text-sidebar-c-2 no-underline wrap-break-word',\n  ],\n  variants: {\n    active: { true: 'text-sidebar-c-active font-sidebar-active' },\n    disabled: { true: 'cursor-auto' },\n    selected: {\n      true: 'cursor-auto bg-sidebar-b-active text-sidebar-c-active font-sidebar-active',\n    },\n  },\n  compoundVariants: [\n    {\n      selected: false,\n      disabled: false,\n      active: false,\n      class: 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover',\n    },\n    {\n      selected: false,\n      disabled: false,\n      active: true,\n      class: 'hover:bg-sidebar-b-hover',\n    },\n  ],\n  defaultVariants: { selected: false, disabled: false, active: false },\n})\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-selected=\"selected\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ selected, disabled, active }))\">\n    <slot name=\"indent\">\n      <ScalarSidebarIndent\n        class=\"-my-2\"\n        :disabled\n        :indent\n        :selected />\n    </slot>\n    <div\n      v-if=\"icon || $slots.icon\"\n      class=\"h-lh *:size-4 mr-1 flex items-center\">\n      <slot name=\"icon\">\n        <ScalarIconLegacyAdapter\n          v-if=\"icon\"\n          :icon=\"icon\" />\n      </slot>\n    </div>\n    <div class=\"group/button-label flex-1 min-w-0\">\n      <slot />\n    </div>\n    <slot name=\"aside\" />\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarButton.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Button component\n *\n * Provide a styled link for the ScalarSidebar or similar, supports\n * the same props and slots as ScalarSidebarItem\n *\n * This is used internally by the ScalarSidebarItem component\n *\n * If you're looking to create items in ScalarSidebarItems\n * you probably want the ScalarSidebarItem component\n *\n * @example\n *   <ScalarSidebarButton>\n *     <template #icon>\n *       <!-- Overrides the icon slot -->\n *     </template>\n *     <!-- Button text -->\n *     <template #aside>\n *       <!-- After the button text -->\n *     </template>\n *   </ScalarSidebarButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarIconLegacyAdapter } from '../ScalarIcon'\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { ScalarSidebarButtonSlots, ScalarSidebarItemProps } from './types'\n\nconst { is = 'a', indent = 0 } = defineProps<ScalarSidebarItemProps>()\n\ndefineSlots<ScalarSidebarButtonSlots>()\n\nconst variants = cva({\n  base: [\n    'group/button peer/button flex items-stretch rounded p-2',\n    'font-sidebar text-base/4  text-sidebar-c-2 no-underline wrap-break-word',\n  ],\n  variants: {\n    active: { true: 'text-sidebar-c-active font-sidebar-active' },\n    disabled: { true: 'cursor-auto' },\n    selected: {\n      true: 'cursor-auto bg-sidebar-b-active text-sidebar-c-active font-sidebar-active',\n    },\n  },\n  compoundVariants: [\n    {\n      selected: false,\n      disabled: false,\n      active: false,\n      class: 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover',\n    },\n    {\n      selected: false,\n      disabled: false,\n      active: true,\n      class: 'hover:bg-sidebar-b-hover',\n    },\n  ],\n  defaultVariants: { selected: false, disabled: false, active: false },\n})\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-current=\"selected ? 'page' : undefined\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ selected, disabled, active }))\">\n    <slot name=\"indent\">\n      <ScalarSidebarIndent\n        class=\"-my-2\"\n        :disabled\n        :indent\n        :selected />\n    </slot>\n    <div\n      v-if=\"icon || $slots.icon\"\n      class=\"h-lh *:size-4 mr-1 flex items-center\">\n      <slot name=\"icon\">\n        <ScalarIconLegacyAdapter\n          v-if=\"icon\"\n          :icon=\"icon\" />\n      </slot>\n    </div>\n    <div class=\"group/button-label flex-1 min-w-0\">\n      <slot />\n    </div>\n    <slot name=\"aside\" />\n  </component>\n</template>\n"],"mappings":""}

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

@@ -8,7 +8,7 @@ var _hoisted_1 = {
 	class: "h-lh *:size-4 mr-1 flex items-center"
 };
 var _hoisted_2 = { class: "group/button-label flex-1 min-w-0" };
-var ScalarSidebarButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarSidebarButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSidebarButton",
 	props: {
@@ -47,7 +47,7 @@ var ScalarSidebarButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.is), mergeProps({
-				"aria-selected": __props.selected,
+				"aria-current": __props.selected ? "page" : void 0,
 				type: __props.is === "button" ? "button" : void 0
 			}, unref(cx)(unref(variants)({
 				selected: __props.selected,
@@ -73,7 +73,7 @@ var ScalarSidebarButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 					renderSlot(_ctx.$slots, "aside")
 				]),
 				_: 3
-			}, 16, ["aria-selected", "type"]);
+			}, 16, ["aria-current", "type"]);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Button component\n *\n * Provide a styled link for the ScalarSidebar or similar, supports\n * the same props and slots as ScalarSidebarItem\n *\n * This is used internally by the ScalarSidebarItem component\n *\n * If you're looking to create items in ScalarSidebarItems\n * you probably want the ScalarSidebarItem component\n *\n * @example\n *   <ScalarSidebarButton>\n *     <template #icon>\n *       <!-- Overrides the icon slot -->\n *     </template>\n *     <!-- Button text -->\n *     <template #aside>\n *       <!-- After the button text -->\n *     </template>\n *   </ScalarSidebarButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarIconLegacyAdapter } from '../ScalarIcon'\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { ScalarSidebarButtonSlots, ScalarSidebarItemProps } from './types'\n\nconst { is = 'a', indent = 0 } = defineProps<ScalarSidebarItemProps>()\n\ndefineSlots<ScalarSidebarButtonSlots>()\n\nconst variants = cva({\n  base: [\n    'group/button peer/button flex items-stretch rounded p-2',\n    'font-sidebar text-base/4  text-sidebar-c-2 no-underline wrap-break-word',\n  ],\n  variants: {\n    active: { true: 'text-sidebar-c-active font-sidebar-active' },\n    disabled: { true: 'cursor-auto' },\n    selected: {\n      true: 'cursor-auto bg-sidebar-b-active text-sidebar-c-active font-sidebar-active',\n    },\n  },\n  compoundVariants: [\n    {\n      selected: false,\n      disabled: false,\n      active: false,\n      class: 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover',\n    },\n    {\n      selected: false,\n      disabled: false,\n      active: true,\n      class: 'hover:bg-sidebar-b-hover',\n    },\n  ],\n  defaultVariants: { selected: false, disabled: false, active: false },\n})\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-selected=\"selected\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ selected, disabled, active }))\">\n    <slot name=\"indent\">\n      <ScalarSidebarIndent\n        class=\"-my-2\"\n        :disabled\n        :indent\n        :selected />\n    </slot>\n    <div\n      v-if=\"icon || $slots.icon\"\n      class=\"h-lh *:size-4 mr-1 flex items-center\">\n      <slot name=\"icon\">\n        <ScalarIconLegacyAdapter\n          v-if=\"icon\"\n          :icon=\"icon\" />\n      </slot>\n    </div>\n    <div class=\"group/button-label flex-1 min-w-0\">\n      <slot />\n    </div>\n    <slot name=\"aside\" />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,WAAW,IAAI;GACnB,MAAM,CACJ,2DACA,0EACD;GACD,UAAU;IACR,QAAQ,EAAE,MAAM,6CAA6C;IAC7D,UAAU,EAAE,MAAM,eAAe;IACjC,UAAU,EACR,MAAM,6EACP;IACF;GACD,kBAAkB,CAChB;IACE,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;IACR,EACD;IACE,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;IACR,CACF;GACD,iBAAiB;IAAE,UAAU;IAAO,UAAU;IAAO,QAAQ;IAAO;GACrE,CAAA;EAED,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAyBY,wBAxBL,QAAA,GAAE,EADT,WAyBY;IAvBT,iBAAe,QAAA;IACf,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;MAC5B,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;IAAA,UAAG,QAAA;IAAQ,UAAE,QAAA;IAAQ,QAAE,QAAA;IAAM,CAAA,CAAA,CAAA,EAAA;2BAOzC;KANP,WAMO,KAAA,QAAA,UAAA,EAAA,QAAA,CALL,YAIc,6BAAA;MAHZ,OAAM;MACL,UAAA,QAAA;MACA,QAAA,QAAA;MACA,UAAA,QAAA;;;;;;KAGG,QAAA,QAAQA,KAAAA,OAAO,QAAA,WAAA,EADvB,mBAQM,OARN,YAQM,CALJ,WAIO,KAAA,QAAA,QAAA,EAAA,QAAA,CAFG,QAAA,QAAA,WAAA,EADR,YAEiB,MAAA,gCAAA,EAAA;;MAAd,MAAM,QAAA;;KAGb,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;KAEV,WAAqB,KAAA,QAAA,QAAA"}
+{"version":3,"file":"ScalarSidebarButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Button component\n *\n * Provide a styled link for the ScalarSidebar or similar, supports\n * the same props and slots as ScalarSidebarItem\n *\n * This is used internally by the ScalarSidebarItem component\n *\n * If you're looking to create items in ScalarSidebarItems\n * you probably want the ScalarSidebarItem component\n *\n * @example\n *   <ScalarSidebarButton>\n *     <template #icon>\n *       <!-- Overrides the icon slot -->\n *     </template>\n *     <!-- Button text -->\n *     <template #aside>\n *       <!-- After the button text -->\n *     </template>\n *   </ScalarSidebarButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarIconLegacyAdapter } from '../ScalarIcon'\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { ScalarSidebarButtonSlots, ScalarSidebarItemProps } from './types'\n\nconst { is = 'a', indent = 0 } = defineProps<ScalarSidebarItemProps>()\n\ndefineSlots<ScalarSidebarButtonSlots>()\n\nconst variants = cva({\n  base: [\n    'group/button peer/button flex items-stretch rounded p-2',\n    'font-sidebar text-base/4  text-sidebar-c-2 no-underline wrap-break-word',\n  ],\n  variants: {\n    active: { true: 'text-sidebar-c-active font-sidebar-active' },\n    disabled: { true: 'cursor-auto' },\n    selected: {\n      true: 'cursor-auto bg-sidebar-b-active text-sidebar-c-active font-sidebar-active',\n    },\n  },\n  compoundVariants: [\n    {\n      selected: false,\n      disabled: false,\n      active: false,\n      class: 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover',\n    },\n    {\n      selected: false,\n      disabled: false,\n      active: true,\n      class: 'hover:bg-sidebar-b-hover',\n    },\n  ],\n  defaultVariants: { selected: false, disabled: false, active: false },\n})\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-current=\"selected ? 'page' : undefined\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ selected, disabled, active }))\">\n    <slot name=\"indent\">\n      <ScalarSidebarIndent\n        class=\"-my-2\"\n        :disabled\n        :indent\n        :selected />\n    </slot>\n    <div\n      v-if=\"icon || $slots.icon\"\n      class=\"h-lh *:size-4 mr-1 flex items-center\">\n      <slot name=\"icon\">\n        <ScalarIconLegacyAdapter\n          v-if=\"icon\"\n          :icon=\"icon\" />\n      </slot>\n    </div>\n    <div class=\"group/button-label flex-1 min-w-0\">\n      <slot />\n    </div>\n    <slot name=\"aside\" />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,WAAW,IAAI;GACnB,MAAM,CACJ,2DACA,yEACF;GACA,UAAU;IACR,QAAQ,EAAE,MAAM,4CAA4C;IAC5D,UAAU,EAAE,MAAM,cAAc;IAChC,UAAU,EACR,MAAM,4EACR;GACF;GACA,kBAAkB,CAChB;IACE,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;GACT,GACA;IACE,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;GACT,CACF;GACA,iBAAiB;IAAE,UAAU;IAAO,UAAU;IAAO,QAAQ;GAAM;EACrE,CAAC;EAED,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YAyBY,wBAxBL,QAAA,EAAE,GADT,WAyBY;IAvBT,gBAAc,QAAA,WAAQ,SAAY,KAAA;IAClC,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;MAC5B,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ,CAAA;IAAA,UAAG,QAAA;IAAQ,UAAE,QAAA;IAAQ,QAAE,QAAA;GAAM,CAAA,CAAA,CAAA,GAAA;2BAOzC;KANP,WAMO,KAAA,QAAA,UAAA,CAAA,SAAA,CALL,YAIc,6BAAA;MAHZ,OAAM;MACL,UAAA,QAAA;MACA,QAAA,QAAA;MACA,UAAA,QAAA;;;;;;KAGG,QAAA,QAAQA,KAAAA,OAAO,QAAA,UAAA,GADvB,mBAQM,OARN,YAQM,CALJ,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAFG,QAAA,QAAA,UAAA,GADR,YAEiB,MAAA,+BAAA,GAAA;;MAAd,MAAM,QAAA;;KAGb,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;KAEV,WAAqB,KAAA,QAAA,OAAA"}

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

@@ -4,7 +4,7 @@ import { createElementBlock, createElementVNode, createVNode, defineComponent, g
 //#region src/components/ScalarSidebar/ScalarSidebarFooter.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex items-center" };
 var _hoisted_2 = { class: "flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2" };
-var ScalarSidebarFooter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarSidebarFooter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSidebarFooter",
 	setup(__props) {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarFooter.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n *   <ScalarSidebarFooter>\n *     <!-- Footer content at the top of the footer -->\n *     <template #description>\n *       <!-- Replaces the Powered by Scalar link -->\n *     </template>\n *     <template #toggle>\n *       <!-- Replaces the color mode toggle -->\n *     </template>\n *   </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n  /** Footer content at the top of the footer */\n  default?(): unknown\n  /** Replaces the Powered by Scalar link */\n  description?(): unknown\n  /** Replaces the color mode toggle */\n  toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex flex-col gap-3 px-3 pb-3 border-sidebar-border')\">\n    <slot />\n    <div class=\"flex items-center\">\n      <div class=\"flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2\">\n        <slot name=\"description\">\n          <a\n            class=\"no-underline hover:underline\"\n            href=\"https://www.scalar.com\"\n            target=\"_blank\">\n            Powered by Scalar\n          </a>\n        </slot>\n      </div>\n      <slot name=\"toggle\">\n        <ScalarColorModeToggle />\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAmCA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAiBM,OAAA,eAAA,mBAjBO,MAAA,GAAE,CAAA,sDAAA,CAAA,CAAA,EAAA,CACb,WAAQ,KAAA,QAAA,UAAA,EACR,mBAcM,OAdN,YAcM,CAbJ,mBASM,OATN,YASM,CARJ,WAOO,KAAA,QAAA,eAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KANL,mBAKI,KAAA;IAJF,OAAM;IACN,MAAK;IACL,QAAO;MAAS,uBAElB,GAAA,EAAA,CAAA,CAAA,CAAA,EAGJ,WAEO,KAAA,QAAA,UAAA,EAAA,QAAA,CADL,YAAyB,MAAA,8BAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarSidebarFooter.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n *   <ScalarSidebarFooter>\n *     <!-- Footer content at the top of the footer -->\n *     <template #description>\n *       <!-- Replaces the Powered by Scalar link -->\n *     </template>\n *     <template #toggle>\n *       <!-- Replaces the color mode toggle -->\n *     </template>\n *   </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n  /** Footer content at the top of the footer */\n  default?(): unknown\n  /** Replaces the Powered by Scalar link */\n  description?(): unknown\n  /** Replaces the color mode toggle */\n  toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex flex-col gap-3 px-3 pb-3 border-sidebar-border')\">\n    <slot />\n    <div class=\"flex items-center\">\n      <div class=\"flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2\">\n        <slot name=\"description\">\n          <a\n            class=\"no-underline hover:underline\"\n            href=\"https://www.scalar.com\"\n            target=\"_blank\">\n            Powered by Scalar\n          </a>\n        </slot>\n      </div>\n      <slot name=\"toggle\">\n        <ScalarColorModeToggle />\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAmCA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAiBM,OAAA,eAAA,mBAjBO,MAAA,EAAA,CAAE,CAAA,qDAAA,CAAA,CAAA,GAAA,CACb,WAAQ,KAAA,QAAA,SAAA,GACR,mBAcM,OAdN,YAcM,CAbJ,mBASM,OATN,YASM,CARJ,WAOO,KAAA,QAAA,eAAA,CAAA,SAAA,CAAA,OAAA,OAAA,OAAA,KANL,mBAKI,KAAA;IAJF,OAAM;IACN,MAAK;IACL,QAAO;MAAS,uBAElB,EAAA,EAAA,CAAA,CAAA,CAAA,GAGJ,WAEO,KAAA,QAAA,UAAA,CAAA,SAAA,CADL,YAAyB,MAAA,6BAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}

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":"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"}
+{"version":3,"file":"ScalarSidebarGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"names":[],"mappings":"AAgLA,OAAO,KAAK,EAA2B,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAI/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;WAwDT,OAAO;;;;;;;;;;;WAAP,OAAO;;;;;4GA0OZ,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 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":""}
+{"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 ScalarSidebarGroupToggleButton from './ScalarSidebarGroupToggleButton.vue'\nimport ScalarSidebarGroupToggleSpacer from './ScalarSidebarGroupToggleSpacer.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=\"discrete ? undefined : 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            <ScalarSidebarGroupToggleSpacer v-if=\"discrete\" />\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        <ScalarSidebarGroupToggleButton\n          v-if=\"discrete\"\n          :open\n          :selected\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        </ScalarSidebarGroupToggleButton>\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

@@ -1,25 +1,22 @@
 import ScalarSidebarIndent_default from "./ScalarSidebarIndent.vue.js";
 import ScalarSidebarButton_default from "./ScalarSidebarButton.vue.js";
 import ScalarSidebarGroupToggle_default from "./ScalarSidebarGroupToggle.vue.js";
+import ScalarSidebarGroupToggleButton_default from "./ScalarSidebarGroupToggleButton.vue.js";
+import ScalarSidebarGroupToggleSpacer_default from "./ScalarSidebarGroupToggleSpacer.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";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useModel, withCtx } from "vue";
 //#region src/components/ScalarSidebar/ScalarSidebarGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "group/group-button relative flex flex-col text-base" };
 var _hoisted_2 = {
-	key: 0,
-	class: "size-4"
-};
-var _hoisted_3 = ["aria-expanded"];
-var _hoisted_4 = {
 	key: 0,
 	class: "group/items flex flex-col gap-px"
 };
-var ScalarSidebarGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarSidebarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSidebarGroup",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		is: { default: "li" },
 		icon: { type: [Object, Function] },
 		active: { type: Boolean },
@@ -36,7 +33,7 @@ var ScalarSidebarGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		},
 		"openModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["click", "toggle"], ["update:open"]),
+	emits: /*@__PURE__*/ mergeModels(["click", "toggle"], ["update:open"]),
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const open = useModel(__props, "open");
@@ -62,7 +59,7 @@ var ScalarSidebarGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 					}, () => [createVNode(ScalarSidebarButton_default, {
 						is: "button",
 						active: __props.active,
-						"aria-expanded": open.value,
+						"aria-expanded": __props.discrete ? void 0 : open.value,
 						disabled: __props.disabled,
 						icon: __props.icon,
 						indent: unref(level),
@@ -74,13 +71,10 @@ var ScalarSidebarGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 							indent: unref(level),
 							selected: __props.selected
 						}, null, 8, ["indent", "selected"])]),
-						aside: withCtx(() => [renderSlot(_ctx.$slots, "aside", { open: open.value }), __props.discrete ? (openBlock(), createElementBlock("div", _hoisted_2)) : renderSlot(_ctx.$slots, "toggle", {
-							key: 1,
-							open: open.value
-						}, () => [createVNode(ScalarSidebarGroupToggle_default, {
+						aside: withCtx(() => [renderSlot(_ctx.$slots, "aside", { open: open.value }), __props.discrete ? (openBlock(), createBlock(ScalarSidebarGroupToggleSpacer_default, { key: 0 })) : renderSlot(_ctx.$slots, "toggle", { open: open.value }, () => [createVNode(ScalarSidebarGroupToggle_default, {
 							class: "text-sidebar-c-2",
 							open: open.value
-						}, null, 8, ["open"])])]),
+						}, null, 8, ["open"])], void 0, 1)]),
 						default: withCtx(() => [renderSlot(_ctx.$slots, "default", { open: open.value })]),
 						_: 2
 					}, [_ctx.$slots.icon ? {
@@ -94,21 +88,20 @@ var ScalarSidebarGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 						"icon",
 						"indent",
 						"selected"
-					]), __props.discrete ? (openBlock(), createElementBlock("button", {
+					]), __props.discrete ? (openBlock(), createBlock(ScalarSidebarGroupToggleButton_default, {
 						key: 0,
-						"aria-expanded": open.value,
-						class: normalizeClass(["absolute top-[1lh] -translate-y-1/2 p-0.75 rounded right-1.25 text-sidebar-c-2", __props.selected ? "hover:bg-sidebar-b-1 hover:text-sidebar-c-1" : "hover:bg-sidebar-b-hover hover:text-sidebar-c-hover"]),
-						type: "button",
+						open: open.value,
+						selected: __props.selected,
 						onClick: handleToggle
-					}, [renderSlot(_ctx.$slots, "toggle", { open: open.value }, () => [createVNode(ScalarSidebarGroupToggle_default, { open: open.value }, {
-						label: withCtx(() => [createTextVNode(toDisplayString(open.value ? "Close" : "Open") + " ", 1), renderSlot(_ctx.$slots, "default", { open: open.value })]),
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "toggle", { open: open.value }, () => [createVNode(ScalarSidebarGroupToggle_default, { open: open.value }, {
+							label: withCtx(() => [createTextVNode(toDisplayString(open.value ? "Close" : "Open") + " ", 1), renderSlot(_ctx.$slots, "default", { open: open.value })]),
+							_: 3
+						}, 8, ["open"])])]),
 						_: 3
-					}, 8, ["open"])])], 10, _hoisted_3)) : createCommentVNode("", true)]),
+					}, 8, ["open", "selected"])) : createCommentVNode("", true)]),
 					renderSlot(_ctx.$slots, "after", { open: open.value })
-				]), 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)]),
+				]), open.value ? (openBlock(), createElementBlock("ul", _hoisted_2, [__props.loading ? (openBlock(), createBlock(ScalarSidebarLoading_default, { key: 0 })) : renderSlot(_ctx.$slots, "items", { open: open.value }, void 0, void 0, 1)])) : 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 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"}
+{"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 ScalarSidebarGroupToggleButton from './ScalarSidebarGroupToggleButton.vue'\nimport ScalarSidebarGroupToggleSpacer from './ScalarSidebarGroupToggleSpacer.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=\"discrete ? undefined : 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            <ScalarSidebarGroupToggleSpacer v-if=\"discrete\" />\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        <ScalarSidebarGroupToggleButton\n          v-if=\"discrete\"\n          :open\n          :selected\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        </ScalarSidebarGroupToggleButton>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,OAAO;EAWb,MAAM,OAAO,SAAoB,SAAC,MAA0B;EAI5D,MAAM,EAAE,UAAU,iBAAiB,EAAE,WAAW,KAAK,CAAC;EAGtD,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,eAAe,UAAsB;GAEzC,KAAK,SAAS,KAAK;GACnB,IAAI,CAAC,QAAA,cAAc,CAAC,QAAA,UAElB,KAAK,QAAQ,CAAC,KAAK;EAEvB;;EAGA,MAAM,gBAAgB,UAAsB;GAE1C,KAAK,UAAU,KAAK;GACpB,IAAI,CAAC,QAAA,cAAc,QAAA,UAEjB,KAAK,QAAQ,CAAC,KAAK;EAEvB;;uBAGE,YA8EY,wBA5EL,QAAA,EAAE,GAAA,eAAA,mBADC,MAAA,EAAA,CAAE,CAAA,iCAAA,CAAA,CAAA,GAAA;2BAmEJ,CAjEN,mBAiEM,OAjEN,YAiEM;KAhEJ,WAEU,KAAA,QAAA,UAAA,EAAP,MAAA,KAAA,MAAI,CAAA;KACP,WAyDO,KAAA,QAAA,UAAA;MAxDJ,OAAO,MAAA,KAAA;MAEP,MAAA,KAAA;cAsDI,CArDL,YAqCsB,6BAAA;MApCpB,IAAG;MACF,QAAA,QAAA;MACA,iBAAe,QAAA,WAAW,KAAA,IAAY,KAAA;MACtC,UAAA,QAAA;MACA,MAAA,QAAA;MACA,QAAQ,MAAA,KAAA;MACR,UAAA,QAAA;MACA,SAAO;;MACG,QAAM,cAID,CAHd,YAGc,6BAAA;OAFZ,OAAM;OACL,QAAQ,MAAA,KAAA;OACR,UAAA,QAAA;;MASM,OAAK,cAGJ,CAFV,WAEU,KAAA,QAAA,SAAA,EAAP,MAAA,KAAA,MAAI,CAAA,GAC+B,QAAA,YAAA,UAAA,GAAtC,YAAkD,wCAAA,EAAA,KAAA,EAAA,CAAA,KAClD,WAOO,KAAA,QAAA,UAAA,EAJJ,MAAA,KAAA,MAAI,SAIA,CAHL,YAEU,kCAAA;OADR,OAAM;OACL,MAAA,KAAA;;6BAGO,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,MAAA,KAAA,MAAI,CAAA,CAAA,CAAA;;SApBHA,KAAAA,OAAO,OAAA;YACZ;wBAGS,CAFV,WAEU,KAAA,QAAA,QAAA,EAAP,MAAA,KAAA,MAAI,CAAA,CAAA,CAAA;;;;;;;;;SAmBH,QAAA,YAAA,UAAA,GADR,YAciC,wCAAA;;MAZ9B,MAAA,KAAA;MACA,UAAA,QAAA;MACA,SAAO;;6BASD,CARP,WAQO,KAAA,QAAA,UAAA,EANJ,MAAA,KAAA,MAAI,SAMA,CALL,YAI2B,kCAAA,EAJA,MAAA,KAAA,MAAI,GAAA;OAClB,OAAK,cACe,CAAA,gBAAA,gBAA1B,KAAA,QAAI,UAAA,MAAA,IAAsB,KAAC,CAAA,GAAA,WAAqB,KAAA,QAAA,WAAA,EAAd,MAAM,KAAA,MAAI,CAAA,CAAA,CAAA;;;;;KAMzD,WAEU,KAAA,QAAA,SAAA,EAAP,MAAA,KAAA,MAAI,CAAA;QAGD,KAAA,SAAA,UAAA,GADR,mBAQK,MARL,YAQK,CALyB,QAAA,WAAA,UAAA,GAA5B,YAAuC,8BAAA,EAAA,KAAA,EAAA,CAAA,KACvC,WAGU,KAAA,QAAA,SAAA,EAAP,MAAA,KAAA,MAAI,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

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

@@ -4,7 +4,7 @@ import { createBlock, createElementVNode, createTextVNode, defineComponent, merg
 import { ScalarIconCaretRight } from "@scalar/icons";
 //#region src/components/ScalarSidebar/ScalarSidebarGroupToggle.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "sr-only" };
-var ScalarSidebarGroupToggle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarSidebarGroupToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSidebarGroupToggle",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarGroupToggle.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroupToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Group toggle component\n *\n * Provides the toggle icon for a ScalarSidebarGroup\n *\n * @example\n * <ScalarSidebarGroupToggle :open=\"...\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCaretRight } from '@scalar/icons'\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is = 'div', open = false } = defineProps<{\n  /** Override the element tag */\n  is?: Component | string\n  /** Whether or not the toggle is open */\n  open?: boolean\n  /** Overrides the icon */\n  icon?: Icon | ScalarIconComponent\n}>()\n\ndefineSlots<{\n  /** Override the toggle icon */\n  default?(props: { open: boolean }): unknown\n  /** Override the screen reader label */\n  label?(props: { open: boolean }): unknown\n}>()\n\nconst variants = cva({\n  base: 'size-4 flex items-center justify-center transition-transform duration-100',\n  variants: { open: { true: 'rotate-90' } },\n  defaultVariants: { open: false },\n})\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ open }))\">\n    <slot :open=\"open\">\n      <ScalarIconLegacyAdapter\n        v-if=\"icon\"\n        :icon=\"icon\" />\n      <ScalarIconCaretRight\n        v-else\n        class=\"size-3\"\n        weight=\"bold\" />\n    </slot>\n    <span class=\"sr-only\">\n      <slot\n        name=\"label\"\n        :open=\"open\">\n        {{ open ? 'Close' : 'Open' }} Group\n      </slot>\n    </span>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAmCA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,EAAE;GACzC,iBAAiB,EAAE,MAAM,OAAO;GACjC,CAAA;EAED,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAoBY,wBAnBL,QAAA,GAAE,EADT,WAoBY,EAlBT,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA,GAAA,EAC5B,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA,EAAA,MAAG,QAAA,MAAI,CAAA,CAAA,CAAA,EAAA;2BASnB,CARP,WAQO,KAAA,QAAA,WAAA,EARA,MAAM,QAAA,MAAI,QAQV,CANG,QAAA,QAAA,WAAA,EADR,YAEiB,MAAA,gCAAA,EAAA;;KAAd,MAAM,QAAA;2CACT,YAGkB,MAAA,qBAAA,EAAA;;KADhB,OAAM;KACN,QAAO;WAEX,mBAMO,QANP,YAMO,CALL,WAIO,KAAA,QAAA,SAAA,EAFJ,MAAM,QAAA,MAAI,QAEN,CAAA,gBAAA,gBADF,QAAA,OAAI,UAAA,OAAA,GAAsB,WAC/B,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarSidebarGroupToggle.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroupToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Group toggle component\n *\n * Provides the toggle icon for a ScalarSidebarGroup\n *\n * @example\n * <ScalarSidebarGroupToggle :open=\"...\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCaretRight } from '@scalar/icons'\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is = 'div', open = false } = defineProps<{\n  /** Override the element tag */\n  is?: Component | string\n  /** Whether or not the toggle is open */\n  open?: boolean\n  /** Overrides the icon */\n  icon?: Icon | ScalarIconComponent\n}>()\n\ndefineSlots<{\n  /** Override the toggle icon */\n  default?(props: { open: boolean }): unknown\n  /** Override the screen reader label */\n  label?(props: { open: boolean }): unknown\n}>()\n\nconst variants = cva({\n  base: 'size-4 flex items-center justify-center transition-transform duration-100',\n  variants: { open: { true: 'rotate-90' } },\n  defaultVariants: { open: false },\n})\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ open }))\">\n    <slot :open=\"open\">\n      <ScalarIconLegacyAdapter\n        v-if=\"icon\"\n        :icon=\"icon\" />\n      <ScalarIconCaretRight\n        v-else\n        class=\"size-3\"\n        weight=\"bold\" />\n    </slot>\n    <span class=\"sr-only\">\n      <slot\n        name=\"label\"\n        :open=\"open\">\n        {{ open ? 'Close' : 'Open' }} Group\n      </slot>\n    </span>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAmCA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EAAE,MAAM,EAAE,MAAM,YAAY,EAAE;GACxC,iBAAiB,EAAE,MAAM,MAAM;EACjC,CAAC;EAED,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YAoBY,wBAnBL,QAAA,EAAE,GADT,WAoBY,EAlBT,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA,EAAA,GAC5B,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,CAAA,CAAA,GAAA;2BASnB,CARP,WAQO,KAAA,QAAA,WAAA,EARA,MAAM,QAAA,KAAI,SAQV,CANG,QAAA,QAAA,UAAA,GADR,YAEiB,MAAA,+BAAA,GAAA;;KAAd,MAAM,QAAA;2CACT,YAGkB,MAAA,oBAAA,GAAA;;KADhB,OAAM;KACN,QAAO;WAEX,mBAMO,QANP,YAMO,CALL,WAIO,KAAA,QAAA,SAAA,EAFJ,MAAM,QAAA,KAAI,SAEN,CAAA,gBAAA,gBADF,QAAA,OAAI,UAAA,MAAA,IAAsB,WAC/B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

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

@@ -0,0 +1,64 @@
+/**
+ * Scalar Sidebar Group Toggle Button component
+ *
+ * Provides the standalone expand and collapse control for a discrete
+ * ScalarSidebarGroup, where the group label is a control of its own
+ * (usually a link) and therefore cannot also own the open state.
+ *
+ * The button is positioned over the end of the group label, so it needs a
+ * positioned ancestor and a ScalarSidebarGroupToggleSpacer inside the label
+ * to reserve room for it.
+ *
+ * @example
+ * <ScalarSidebarGroupToggleButton
+ *   :open="open"
+ *   @click="open = !open">
+ *   <template #label>{{ open ? 'Close' : 'Open' }} Authentication</template>
+ * </ScalarSidebarGroupToggleButton>
+ *
+ * @see ScalarSidebarGroup
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Whether or not the group is open
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether or not the group label underneath the button is selected
+     *
+     * Matches the hover styles of the button to the label it sits on top of.
+     */
+    selected?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Whether or not the group is open
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether or not the group label underneath the button is selected
+     *
+     * Matches the hover styles of the button to the label it sits on top of.
+     */
+    selected?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /** Override the toggle icon */
+    default?(props: {
+        open: boolean;
+    }): unknown;
+    /** Override the screen reader label */
+    label?(props: {
+        open: boolean;
+    }): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarSidebarGroupToggleButton.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarGroupToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroupToggleButton.vue"],"names":[],"mappings":"AA+FA;;;;;;;;;;;;;;;;;;;GAmBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB;;;;OAIG;WACI,OAAO;IACd;;;;OAIG;eACQ,OAAO;;IAXlB;;;;OAIG;WACI,OAAO;IACd;;;;OAIG;eACQ,OAAO;;IAMlB,+BAA+B;oBACf;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO;IAC3C,uCAAuC;kBACzB;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO;EA+EvC,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/ScalarSidebarGroupToggleButton.vue.js

@@ -0,0 +1,7 @@
+import ScalarSidebarGroupToggleButton_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarGroupToggleButton.vue.script.js";
+//#region src/components/ScalarSidebar/ScalarSidebarGroupToggleButton.vue
+var ScalarSidebarGroupToggleButton_default = ScalarSidebarGroupToggleButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarSidebarGroupToggleButton_default as default };
+
+//# sourceMappingURL=ScalarSidebarGroupToggleButton.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarGroupToggleButton.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroupToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Group Toggle Button component\n *\n * Provides the standalone expand and collapse control for a discrete\n * ScalarSidebarGroup, where the group label is a control of its own\n * (usually a link) and therefore cannot also own the open state.\n *\n * The button is positioned over the end of the group label, so it needs a\n * positioned ancestor and a ScalarSidebarGroupToggleSpacer inside the label\n * to reserve room for it.\n *\n * @example\n * <ScalarSidebarGroupToggleButton\n *   :open=\"open\"\n *   @click=\"open = !open\">\n *   <template #label>{{ open ? 'Close' : 'Open' }} Authentication</template>\n * </ScalarSidebarGroupToggleButton>\n *\n * @see ScalarSidebarGroup\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarGroupToggle from './ScalarSidebarGroupToggle.vue'\n\nconst { open = false } = defineProps<{\n  /**\n   * Whether or not the group is open\n   *\n   * @default false\n   */\n  open?: boolean\n  /**\n   * Whether or not the group label underneath the button is selected\n   *\n   * Matches the hover styles of the button to the label it sits on top of.\n   */\n  selected?: boolean\n}>()\n\ndefineSlots<{\n  /** Override the toggle icon */\n  default?(props: { open: boolean }): unknown\n  /** Override the screen reader label */\n  label?(props: { open: boolean }): unknown\n}>()\n\nconst variants = cva({\n  base: [\n    // Position the button over the end of the group label\n    'absolute top-[1lh] right-1.25 -translate-y-1/2',\n    // Sizing and color\n    'rounded p-0.75 text-sidebar-c-2',\n  ],\n  variants: {\n    selected: {\n      true: 'hover:bg-sidebar-b-1 hover:text-sidebar-c-1',\n      false: 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover',\n    },\n  },\n  defaultVariants: { selected: false },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    :aria-expanded=\"open\"\n    type=\"button\"\n    v-bind=\"cx(variants({ selected }))\">\n    <slot :open>\n      <ScalarSidebarGroupToggle :open>\n        <template\n          v-if=\"$slots.label\"\n          #label>\n          <slot\n            name=\"label\"\n            :open />\n        </template>\n      </ScalarSidebarGroupToggle>\n    </slot>\n  </button>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,41 @@
+import ScalarSidebarGroupToggle_default from "./ScalarSidebarGroupToggle.vue.js";
+import { cva, useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, createSlots, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/ScalarSidebar/ScalarSidebarGroupToggleButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-expanded"];
+var ScalarSidebarGroupToggleButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarGroupToggleButton",
+	props: {
+		open: {
+			type: Boolean,
+			default: false
+		},
+		selected: { type: Boolean }
+	},
+	setup(__props) {
+		const variants = cva({
+			base: ["absolute top-[1lh] right-1.25 -translate-y-1/2", "rounded p-0.75 text-sidebar-c-2"],
+			variants: { selected: {
+				true: "hover:bg-sidebar-b-1 hover:text-sidebar-c-1",
+				false: "hover:bg-sidebar-b-hover hover:text-sidebar-c-hover"
+			} },
+			defaultVariants: { selected: false }
+		});
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", mergeProps({
+				"aria-expanded": __props.open,
+				type: "button"
+			}, unref(cx)(unref(variants)({ selected: __props.selected }))), [renderSlot(_ctx.$slots, "default", { open: __props.open }, () => [createVNode(ScalarSidebarGroupToggle_default, { open: __props.open }, createSlots({ _: 2 }, [_ctx.$slots.label ? {
+				name: "label",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "label", { open: __props.open })]),
+				key: "0"
+			} : void 0]), 1032, ["open"])])], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarGroupToggleButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarGroupToggleButton.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarGroupToggleButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroupToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Group Toggle Button component\n *\n * Provides the standalone expand and collapse control for a discrete\n * ScalarSidebarGroup, where the group label is a control of its own\n * (usually a link) and therefore cannot also own the open state.\n *\n * The button is positioned over the end of the group label, so it needs a\n * positioned ancestor and a ScalarSidebarGroupToggleSpacer inside the label\n * to reserve room for it.\n *\n * @example\n * <ScalarSidebarGroupToggleButton\n *   :open=\"open\"\n *   @click=\"open = !open\">\n *   <template #label>{{ open ? 'Close' : 'Open' }} Authentication</template>\n * </ScalarSidebarGroupToggleButton>\n *\n * @see ScalarSidebarGroup\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarGroupToggle from './ScalarSidebarGroupToggle.vue'\n\nconst { open = false } = defineProps<{\n  /**\n   * Whether or not the group is open\n   *\n   * @default false\n   */\n  open?: boolean\n  /**\n   * Whether or not the group label underneath the button is selected\n   *\n   * Matches the hover styles of the button to the label it sits on top of.\n   */\n  selected?: boolean\n}>()\n\ndefineSlots<{\n  /** Override the toggle icon */\n  default?(props: { open: boolean }): unknown\n  /** Override the screen reader label */\n  label?(props: { open: boolean }): unknown\n}>()\n\nconst variants = cva({\n  base: [\n    // Position the button over the end of the group label\n    'absolute top-[1lh] right-1.25 -translate-y-1/2',\n    // Sizing and color\n    'rounded p-0.75 text-sidebar-c-2',\n  ],\n  variants: {\n    selected: {\n      true: 'hover:bg-sidebar-b-1 hover:text-sidebar-c-1',\n      false: 'hover:bg-sidebar-b-hover hover:text-sidebar-c-hover',\n    },\n  },\n  defaultVariants: { selected: false },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    :aria-expanded=\"open\"\n    type=\"button\"\n    v-bind=\"cx(variants({ selected }))\">\n    <slot :open>\n      <ScalarSidebarGroupToggle :open>\n        <template\n          v-if=\"$slots.label\"\n          #label>\n          <slot\n            name=\"label\"\n            :open />\n        </template>\n      </ScalarSidebarGroupToggle>\n    </slot>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAkDA,MAAM,WAAW,IAAI;GACnB,MAAM,CAEJ,kDAEA,iCACF;GACA,UAAU,EACR,UAAU;IACR,MAAM;IACN,OAAO;GACT,EACF;GACA,iBAAiB,EAAE,UAAU,MAAM;EACrC,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAeS,UAfT,WAeS;IAdN,iBAAe,QAAA;IAChB,MAAK;MACG,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ,CAAA,EAAA,UAAG,QAAA,SAAQ,CAAA,CAAA,CAAA,GAAA,CAC9B,WAUO,KAAA,QAAA,WAAA,EAVA,MAAA,QAAA,KAAI,SAUJ,CATL,YAQ2B,kCAAA,EARA,MAAA,QAAA,KAAI,GAAA,YAAA,EAAA,GAAA,EAAA,GAAA,CAErBA,KAAAA,OAAO,QAAA;UACZ;sBAGS,CAFV,WAEU,KAAA,QAAA,SAAA,EAAP,MAAA,QAAA,KAAI,CAAA,CAAA,CAAA"}

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

@@ -0,0 +1,16 @@
+/**
+ * Scalar Sidebar Group Toggle Spacer component
+ *
+ * Reserves room at the end of a discrete group label for the
+ * ScalarSidebarGroupToggleButton, which is positioned on top of the label
+ * and therefore takes up no space of its own.
+ *
+ * Render it in the label's aside slot so long labels wrap before they run
+ * underneath the toggle button.
+ *
+ * @see ScalarSidebarGroupToggleButton
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=ScalarSidebarGroupToggleSpacer.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarGroupToggleSpacer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroupToggleSpacer.vue"],"names":[],"mappings":"AA8BA;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,+QA2Bd,CAAC"}

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

@@ -0,0 +1,7 @@
+import ScalarSidebarGroupToggleSpacer_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarGroupToggleSpacer.vue.script.js";
+//#region src/components/ScalarSidebar/ScalarSidebarGroupToggleSpacer.vue
+var ScalarSidebarGroupToggleSpacer_default = ScalarSidebarGroupToggleSpacer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarSidebarGroupToggleSpacer_default as default };
+
+//# sourceMappingURL=ScalarSidebarGroupToggleSpacer.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarGroupToggleSpacer.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroupToggleSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Group Toggle Spacer component\n *\n * Reserves room at the end of a discrete group label for the\n * ScalarSidebarGroupToggleButton, which is positioned on top of the label\n * and therefore takes up no space of its own.\n *\n * Render it in the label's aside slot so long labels wrap before they run\n * underneath the toggle button.\n *\n * @see ScalarSidebarGroupToggleButton\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('size-4')\" />\n</template>\n"],"mappings":""}