style: 🎨 Format code with Biome

app/components/ui/sidebar/Sidebar.vue

@@ -21,48 +21,55 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 </script>
 
 <template>
-  <div
-    v-if="collapsible === 'none'"
-    data-slot="sidebar"
-    :class="cn('bg-sidebar text-sidebar-foreground flex h-dvh w-(--sidebar-width) flex-col', props.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
+    <div
+        v-if="collapsible === 'none'"
+        data-slot="sidebar"
+        :class="cn('bg-sidebar text-sidebar-foreground flex h-dvh w-(--sidebar-width) flex-col', props.class)"
+        v-bind="$attrs"
+    >
+        <slot/>
+    </div>
 
-  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
-    <SheetContent
-      data-sidebar="sidebar"
-      data-slot="sidebar"
-      data-mobile="true"
-      :side="side"
-      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-      :style="{
+    <Sheet
+        v-else-if="isMobile"
+        :open="openMobile"
+        v-bind="$attrs"
+        @update:open="setOpenMobile"
+    >
+        <SheetContent
+            data-sidebar="sidebar"
+            data-slot="sidebar"
+            data-mobile="true"
+            :side="side"
+            class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+            :style="{
         '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
       }"
-    >
-      <SheetHeader class="sr-only">
-        <SheetTitle>Sidebar</SheetTitle>
-        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-      </SheetHeader>
-      <div class="flex h-full w-full flex-col">
-        <slot />
-      </div>
-    </SheetContent>
-  </Sheet>
+        >
+            <SheetHeader class="sr-only">
+                <SheetTitle>Sidebar</SheetTitle>
+                <SheetDescription>
+                    Displays the mobile sidebar.
+                </SheetDescription>
+            </SheetHeader>
+            <div class="flex h-full w-full flex-col">
+                <slot/>
+            </div>
+        </SheetContent>
+    </Sheet>
 
-  <div
-    v-else
-    class="group peer text-sidebar-foreground hidden md:block"
-    data-slot="sidebar"
-    :data-state="state"
-    :data-collapsible="state === 'collapsed' ? collapsible : ''"
-    :data-variant="variant"
-    :data-side="side"
-  >
-    <!-- This is what handles the sidebar gap on desktop  -->
     <div
-      :class="cn(
+        v-else
+        class="group peer text-sidebar-foreground hidden md:block"
+        data-slot="sidebar"
+        :data-state="state"
+        :data-collapsible="state === 'collapsed' ? collapsible : ''"
+        :data-variant="variant"
+        :data-side="side"
+    >
+        <!-- This is what handles the sidebar gap on desktop  -->
+        <div
+            :class="cn(
         'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
         'group-data-[collapsible=offcanvas]:w-0',
         'group-data-[side=right]:rotate-180',
@@ -70,9 +77,9 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
           ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
           : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
       )"
-    />
-    <div
-      :class="cn(
+        />
+        <div
+            :class="cn(
         'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
         side === 'left'
           ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
@@ -83,14 +90,14 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
           : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
         props.class,
       )"
-      v-bind="$attrs"
-    >
-      <div
-        data-sidebar="sidebar"
-        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-      >
-        <slot />
-      </div>
+            v-bind="$attrs"
+        >
+            <div
+                data-sidebar="sidebar"
+                class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+            >
+                <slot/>
+            </div>
+        </div>
     </div>
-  </div>
 </template>

app/components/ui/sidebar/SidebarContent.vue

@@ -8,11 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-content"
-    data-sidebar="content"
-    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
-  >
-    <slot />
-  </div>
+    <div
+        data-slot="sidebar-content"
+        data-sidebar="content"
+        :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+    >
+        <slot/>
+    </div>
 </template>

app/components/ui/sidebar/SidebarFooter.vue

@@ -8,11 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-footer"
-    data-sidebar="footer"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
-    <slot />
-  </div>
+    <div
+        data-slot="sidebar-footer"
+        data-sidebar="footer"
+        :class="cn('flex flex-col gap-2 p-2', props.class)"
+    >
+        <slot/>
+    </div>
 </template>

app/components/ui/sidebar/SidebarGroup.vue

@@ -8,11 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-group"
-    data-sidebar="group"
-    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
-  >
-    <slot />
-  </div>
+    <div
+        data-slot="sidebar-group"
+        data-sidebar="group"
+        :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+    >
+        <slot/>
+    </div>
 </template>

app/components/ui/sidebar/SidebarGroupAction.vue

@@ -12,18 +12,18 @@ const props = defineProps<
 </script>
 
 <template>
-  <Primitive
-    data-slot="sidebar-group-action"
-    data-sidebar="group-action"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(
+    <Primitive
+        data-slot="sidebar-group-action"
+        data-sidebar="group-action"
+        :as="as"
+        :as-child="asChild"
+        :class="cn(
       'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
       'after:absolute after:-inset-2 md:after:hidden',
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
-  >
-    <slot />
-  </Primitive>
+    >
+        <slot/>
+    </Primitive>
 </template>

app/components/ui/sidebar/SidebarGroupContent.vue

@@ -8,11 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-group-content"
-    data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
-  >
-    <slot />
-  </div>
+    <div
+        data-slot="sidebar-group-content"
+        data-sidebar="group-content"
+        :class="cn('w-full text-sm', props.class)"
+    >
+        <slot/>
+    </div>
 </template>

app/components/ui/sidebar/SidebarGroupLabel.vue

@@ -12,16 +12,16 @@ const props = defineProps<
 </script>
 
 <template>
-  <Primitive
-    data-slot="sidebar-group-label"
-    data-sidebar="group-label"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(
+    <Primitive
+        data-slot="sidebar-group-label"
+        data-sidebar="group-label"
+        :as="as"
+        :as-child="asChild"
+        :class="cn(
       'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
       'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
       props.class)"
-  >
-    <slot />
-  </Primitive>
+    >
+        <slot/>
+    </Primitive>
 </template>

app/components/ui/sidebar/SidebarHeader.vue

@@ -8,11 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-header"
-    data-sidebar="header"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
-    <slot />
-  </div>
+    <div
+        data-slot="sidebar-header"
+        data-sidebar="header"
+        :class="cn('flex flex-col gap-2 p-2', props.class)"
+    >
+        <slot/>
+    </div>
 </template>

app/components/ui/sidebar/SidebarInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue";
-import { Input } from "@/components/ui/input";
+import { Input as InputVue } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 
 const props = defineProps<{
@@ -9,14 +9,14 @@ const props = defineProps<{
 </script>
 
 <template>
-  <Input
-    data-slot="sidebar-input"
-    data-sidebar="input"
-    :class="cn(
+    <InputVue
+        data-slot="sidebar-input"
+        data-sidebar="input"
+        :class="cn(
       'bg-background h-8 w-full shadow-none',
       props.class,
     )"
-  >
-    <slot />
-  </Input>
+    >
+        <slot/>
+    </InputVue>
 </template>

app/components/ui/sidebar/SidebarInset.vue

@@ -8,14 +8,14 @@ const props = defineProps<{
 </script>
 
 <template>
-  <main
-    data-slot="sidebar-inset"
-    :class="cn(
+    <main
+        data-slot="sidebar-inset"
+        :class="cn(
       'bg-background relative flex w-full flex-1 flex-col',
       'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
       props.class,
     )"
-  >
-    <slot />
-  </main>
+    >
+        <slot/>
+    </main>
 </template>

app/components/ui/sidebar/SidebarMenu.vue

@@ -8,11 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <ul
-    data-slot="sidebar-menu"
-    data-sidebar="menu"
-    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
-  >
-    <slot />
-  </ul>
+    <ul
+        data-slot="sidebar-menu"
+        data-sidebar="menu"
+        :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+    >
+        <slot/>
+    </ul>
 </template>

app/components/ui/sidebar/SidebarMenuAction.vue

@@ -17,10 +17,10 @@ const props = withDefaults(
 </script>
 
 <template>
-  <Primitive
-    data-slot="sidebar-menu-action"
-    data-sidebar="menu-action"
-    :class="cn(
+    <Primitive
+        data-slot="sidebar-menu-action"
+        data-sidebar="menu-action"
+        :class="cn(
       'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
       'after:absolute after:-inset-2 md:after:hidden',
       'peer-data-[size=sm]/menu-button:top-1',
@@ -31,9 +31,9 @@ const props = withDefaults(
         && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
       props.class,
     )"
-    :as="as"
-    :as-child="asChild"
-  >
-    <slot />
-  </Primitive>
+        :as="as"
+        :as-child="asChild"
+    >
+        <slot/>
+    </Primitive>
 </template>

app/components/ui/sidebar/SidebarMenuBadge.vue

@@ -8,10 +8,10 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-menu-badge"
-    data-sidebar="menu-badge"
-    :class="cn(
+    <div
+        data-slot="sidebar-menu-badge"
+        data-sidebar="menu-badge"
+        :class="cn(
       'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
       'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
       'peer-data-[size=sm]/menu-button:top-1',
@@ -20,7 +20,7 @@ const props = defineProps<{
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
-  >
-    <slot />
-  </div>
+    >
+        <slot/>
+    </div>
 </template>

app/components/ui/sidebar/SidebarMenuButton.vue

@@ -36,25 +36,28 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
-    <slot />
-  </SidebarMenuButtonChild>
-
-  <Tooltip v-else>
-    <TooltipTrigger as-child>
-      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
-        <slot />
-      </SidebarMenuButtonChild>
-    </TooltipTrigger>
-    <TooltipContent
-      side="right"
-      align="center"
-      :hidden="state !== 'collapsed' || isMobile"
+    <SidebarMenuButtonChild
+        v-if="!tooltip"
+        v-bind="{ ...delegatedProps, ...$attrs }"
     >
-      <template v-if="typeof tooltip === 'string'">
-        {{ tooltip }}
-      </template>
-      <component :is="tooltip" v-else />
-    </TooltipContent>
-  </Tooltip>
+        <slot/>
+    </SidebarMenuButtonChild>
+
+    <Tooltip v-else>
+        <TooltipTrigger as-child>
+            <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+                <slot/>
+            </SidebarMenuButtonChild>
+        </TooltipTrigger>
+        <TooltipContent
+            side="right"
+            align="center"
+            :hidden="state !== 'collapsed' || isMobile"
+        >
+            <template v-if="typeof tooltip === 'string'">
+                {{ tooltip }}
+            </template>
+            <component :is="tooltip" v-else/>
+        </TooltipContent>
+    </Tooltip>
 </template>

app/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -19,16 +19,16 @@ const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
 </script>
 
 <template>
-  <Primitive
-    data-slot="sidebar-menu-button"
-    data-sidebar="menu-button"
-    :data-size="size"
-    :data-active="isActive"
-    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
-    :as="as"
-    :as-child="asChild"
-    v-bind="$attrs"
-  >
-    <slot />
-  </Primitive>
+    <Primitive
+        data-slot="sidebar-menu-button"
+        data-sidebar="menu-button"
+        :data-size="size"
+        :data-active="isActive"
+        :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+        :as="as"
+        :as-child="asChild"
+        v-bind="$attrs"
+    >
+        <slot/>
+    </Primitive>
 </template>

app/components/ui/sidebar/SidebarMenuItem.vue

@@ -8,11 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <li
-    data-slot="sidebar-menu-item"
-    data-sidebar="menu-item"
-    :class="cn('group/menu-item relative', props.class)"
-  >
-    <slot />
-  </li>
+    <li
+        data-slot="sidebar-menu-item"
+        data-sidebar="menu-item"
+        :class="cn('group/menu-item relative', props.class)"
+    >
+        <slot/>
+    </li>
 </template>

app/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -14,21 +14,21 @@ const width = computed(() => {
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-menu-skeleton"
-    data-sidebar="menu-skeleton"
-    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
-  >
-    <Skeleton
-      v-if="showIcon"
-      class="size-4 rounded-md"
-      data-sidebar="menu-skeleton-icon"
-    />
+    <div
+        data-slot="sidebar-menu-skeleton"
+        data-sidebar="menu-skeleton"
+        :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+    >
+        <Skeleton
+            v-if="showIcon"
+            class="size-4 rounded-md"
+            data-sidebar="menu-skeleton-icon"
+        />
 
-    <Skeleton
-      class="h-4 max-w-(--skeleton-width) flex-1"
-      data-sidebar="menu-skeleton-text"
-      :style="{ '--skeleton-width': width }"
-    />
-  </div>
+        <Skeleton
+            class="h-4 max-w-(--skeleton-width) flex-1"
+            data-sidebar="menu-skeleton-text"
+            :style="{ '--skeleton-width': width }"
+        />
+    </div>
 </template>

app/components/ui/sidebar/SidebarMenuSub.vue

@@ -8,15 +8,15 @@ const props = defineProps<{
 </script>
 
 <template>
-  <ul
-    data-slot="sidebar-menu-sub"
-    data-sidebar="menu-badge"
-    :class="cn(
+    <ul
+        data-slot="sidebar-menu-sub"
+        data-sidebar="menu-badge"
+        :class="cn(
       'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
-  >
-    <slot />
-  </ul>
+    >
+        <slot/>
+    </ul>
 </template>

app/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -20,14 +20,14 @@ const props = withDefaults(
 </script>
 
 <template>
-  <Primitive
-    data-slot="sidebar-menu-sub-button"
-    data-sidebar="menu-sub-button"
-    :as="as"
-    :as-child="asChild"
-    :data-size="size"
-    :data-active="isActive"
-    :class="cn(
+    <Primitive
+        data-slot="sidebar-menu-sub-button"
+        data-sidebar="menu-sub-button"
+        :as="as"
+        :as-child="asChild"
+        :data-size="size"
+        :data-active="isActive"
+        :class="cn(
       'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
       'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
       size === 'sm' && 'text-xs',
@@ -35,7 +35,7 @@ const props = withDefaults(
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
-  >
-    <slot />
-  </Primitive>
+    >
+        <slot/>
+    </Primitive>
 </template>

app/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -8,11 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <li
-    data-slot="sidebar-menu-sub-item"
-    data-sidebar="menu-sub-item"
-    :class="cn('group/menu-sub-item relative', props.class)"
-  >
-    <slot />
-  </li>
+    <li
+        data-slot="sidebar-menu-sub-item"
+        data-sidebar="menu-sub-item"
+        :class="cn('group/menu-sub-item relative', props.class)"
+    >
+        <slot/>
+    </li>
 </template>

app/components/ui/sidebar/SidebarProvider.vue

@@ -80,17 +80,17 @@ provideSidebarContext({
 </script>
 
 <template>
-  <TooltipProvider :delay-duration="0">
-    <div
-      data-slot="sidebar-wrapper"
-      :style="{
+    <TooltipProvider :delay-duration="0">
+        <div
+            data-slot="sidebar-wrapper"
+            :style="{
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </div>
-  </TooltipProvider>
+            :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+            v-bind="$attrs"
+        >
+            <slot/>
+        </div>
+    </TooltipProvider>
 </template>

app/components/ui/sidebar/SidebarRail.vue

@@ -11,13 +11,13 @@ const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-  <button
-    data-sidebar="rail"
-    data-slot="sidebar-rail"
-    aria-label="Toggle Sidebar"
-    :tabindex="-1"
-    title="Toggle Sidebar"
-    :class="cn(
+    <button
+        data-sidebar="rail"
+        data-slot="sidebar-rail"
+        aria-label="Toggle Sidebar"
+        :tabindex="-1"
+        title="Toggle Sidebar"
+        :class="cn(
       'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
       'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
       '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
@@ -26,8 +26,8 @@ const { toggleSidebar } = useSidebar();
       '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
       props.class,
     )"
-    @click="toggleSidebar"
-  >
-    <slot />
-  </button>
+        @click="toggleSidebar"
+    >
+        <slot/>
+    </button>
 </template>

app/components/ui/sidebar/SidebarSeparator.vue

@@ -9,11 +9,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <Separator
-    data-slot="sidebar-separator"
-    data-sidebar="separator"
-    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
-  >
-    <slot />
-  </Separator>
+    <Separator
+        data-slot="sidebar-separator"
+        data-sidebar="separator"
+        :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
+    >
+        <slot/>
+    </Separator>
 </template>

app/components/ui/sidebar/SidebarTrigger.vue

@@ -13,15 +13,15 @@ const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-  <Button
-    data-sidebar="trigger"
-    data-slot="sidebar-trigger"
-    variant="ghost"
-    size="icon"
-    :class="cn('h-7 w-7', props.class)"
-    @click="toggleSidebar"
-  >
-    <PanelLeft />
-    <span class="sr-only">Toggle Sidebar</span>
-  </Button>
+    <Button
+        data-sidebar="trigger"
+        data-slot="sidebar-trigger"
+        variant="ghost"
+        size="icon"
+        :class="cn('h-7 w-7', props.class)"
+        @click="toggleSidebar"
+    >
+        <PanelLeft/>
+        <span class="sr-only">Toggle Sidebar</span>
+    </Button>
 </template>