diff --git a/docs/app/components/content/examples/sidebar/SidebarExample.vue b/docs/app/components/content/examples/sidebar/SidebarExample.vue
index 22cde75c6a..f5baa20aa8 100644
--- a/docs/app/components/content/examples/sidebar/SidebarExample.vue
+++ b/docs/app/components/content/examples/sidebar/SidebarExample.vue
@@ -136,6 +136,7 @@ defineShortcuts(extractShortcuts(teamsItems.value))
       v-model:open="open"
       collapsible="icon"
       rail
+      resizable
       :ui="{
         container: 'h-full',
         inner: 'bg-elevated/25 divide-transparent',
diff --git a/docs/content/docs/2.components/dashboard-sidebar.md b/docs/content/docs/2.components/dashboard-sidebar.md
index 3b61bd6094..7e1798e115 100644
--- a/docs/content/docs/2.components/dashboard-sidebar.md
+++ b/docs/content/docs/2.components/dashboard-sidebar.md
@@ -13,7 +13,7 @@ links:
 The DashboardSidebar component is used to display a sidebar in a dashboard layout. It supports drag-to-resize, state persistence and integrates with [DashboardGroup](/docs/components/dashboard-group), [DashboardPanel](/docs/components/dashboard-panel) and [DashboardNavbar](/docs/components/dashboard-navbar).
 
 ::tip{to="/docs/components/sidebar"}
-**DashboardSidebar vs Sidebar**: This component is designed for dashboard layouts with drag-to-resize, state persistence and `DashboardGroup` integration. For a simple, standalone sidebar (chat panel, settings, navigation), use [Sidebar](/docs/components/sidebar) instead.
+**DashboardSidebar vs Sidebar**: This component is designed for dashboard layouts with `DashboardGroup` integration. For a standalone sidebar (chat panel, settings, navigation), use [Sidebar](/docs/components/sidebar) instead — it also supports drag-to-resize and state persistence.
 ::
 
 Its state (size, collapsed, etc.) will be saved based on the `storage` and `storage-key` props you provide to the [DashboardGroup](/docs/components/dashboard-group#props) component.
diff --git a/docs/content/docs/2.components/sidebar.md b/docs/content/docs/2.components/sidebar.md
index 1388190c27..70cb8ca83e 100644
--- a/docs/content/docs/2.components/sidebar.md
+++ b/docs/content/docs/2.components/sidebar.md
@@ -14,7 +14,7 @@ navigation.badge: New
 The Sidebar component is a standalone, fixed sidebar that pushes the page content. On desktop, it renders inline and can be collapsed; on mobile, it opens a [Modal](/docs/components/modal), [Slideover](/docs/components/slideover) or [Drawer](/docs/components/drawer) component.
 
 ::tip{to="/docs/components/dashboard-sidebar"}
-**Sidebar vs DashboardSidebar**: This component is a simple, standalone sidebar you can drop anywhere (chat panel, settings, navigation). If you need drag-to-resize, state persistence and integration with [DashboardGroup](/docs/components/dashboard-group), use [DashboardSidebar](/docs/components/dashboard-sidebar) instead.
+**Sidebar vs DashboardSidebar**: This component is a standalone sidebar you can drop anywhere (chat panel, settings, navigation) with optional drag-to-resize and state persistence. If you need integration with [DashboardGroup](/docs/components/dashboard-group) use [DashboardSidebar](/docs/components/dashboard-sidebar) instead.
 ::
 
 Use the `header`, `default` and `footer` slots to customize the sidebar content. The `v-model:open` directive is viewport-aware: on desktop it controls the expanded/collapsed state, on mobile it controls the menu.
@@ -191,6 +191,84 @@ class: '!p-0 !justify-start h-[500px] contain-[paint]'
 :placeholder{class="h-full"}
 ::
 
+### Resizable
+
+Use the `resizable` prop to make the sidebar resizable by dragging the rail. Requires `rail` to be enabled.
+
+::component-code
+---
+prettier: true
+ignore:
+  - rail
+  - collapsible
+  - title
+  - ui.container
+hide:
+  - minSize
+  - defaultSize
+  - maxSize
+  - ui
+  - class
+props:
+  rail: true
+  resizable: true
+  collapsible: icon
+  minSize: 12
+  defaultSize: 16
+  maxSize: 24
+  title: Navigation
+  ui.container: h-full
+items:
+  resizable:
+    - true
+    - false
+slots:
+  default: |
+
+    <Placeholder class="h-full" />
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+
+:placeholder{class="h-full"}
+::
+
+When `collapsible` is not `none`, dragging below `min-size` snaps the sidebar to its collapsed state. Click the rail to toggle collapsed, or double-click to reset to `default-size`.
+
+### Size
+
+Use the `min-size`, `max-size`, `default-size` and `collapsed-size` props to customize the size of the sidebar in `rem`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - rail
+  - resizable
+  - title
+  - ui.container
+hide:
+  - ui
+  - class
+props:
+  rail: true
+  resizable: true
+  collapsible: icon
+  minSize: 14
+  defaultSize: 18
+  maxSize: 28
+  collapsedSize: 10
+  title: Navigation
+  ui.container: h-full
+slots:
+  default: |
+
+    <Placeholder class="h-full" />
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+
+:placeholder{class="h-full"}
+::
+
 ### Close
 
 Use the `close` prop to display a close button in the sidebar header. The close button is only rendered when `collapsible` is not `none`.
@@ -348,9 +426,9 @@ The only difference with the previous example is replacing `ref(true)` with `use
 
 ### With custom width
 
-The sidebar width is controlled by the `--sidebar-width` CSS variable (defaults to `16rem`). The collapsed icon width is controlled by `--sidebar-width-icon` (defaults to `4rem`).
+When using the `resizable` prop, the sidebar width is controlled by the `default-size`, `min-size` and `max-size` props. Without `resizable`, the width is controlled by the `--sidebar-width` CSS variable (defaults to `16rem`). The collapsed icon width is controlled by `--sidebar-width-icon` (defaults to `4rem`).
 
-Override them globally in your CSS or per-instance with the `style` attribute.
+Override the CSS variables globally in your CSS or per-instance with the `style` attribute.
 
 ::component-example
 ---
diff --git a/playgrounds/nuxt/app/pages/components/sidebar.vue b/playgrounds/nuxt/app/pages/components/sidebar.vue
index 25b264a3da..a4e9439a59 100644
--- a/playgrounds/nuxt/app/pages/components/sidebar.vue
+++ b/playgrounds/nuxt/app/pages/components/sidebar.vue
@@ -46,6 +46,7 @@ function onSubmit() {
       collapsible="icon"
       close
       rail
+      resizable
       :ui="{ container: 'relative', body: 'py-2' }"
     >
       <template #title="{ state }">
diff --git a/src/runtime/components/Sidebar.vue b/src/runtime/components/Sidebar.vue
index 4f6641da07..0ab9ecd160 100644
--- a/src/runtime/components/Sidebar.vue
+++ b/src/runtime/components/Sidebar.vue
@@ -2,6 +2,7 @@
 import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/sidebar'
+import type { UseResizableProps } from '../composables/useResizable'
 import type { ButtonProps, DrawerProps, IconProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
@@ -11,7 +12,7 @@ type SidebarState = 'expanded' | 'collapsed'
 type SidebarMode = 'modal' | 'slideover' | 'drawer'
 type SidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never
 
-export interface SidebarProps<T extends SidebarMode = SidebarMode> {
+export interface SidebarProps<T extends SidebarMode = SidebarMode> extends Pick<UseResizableProps, 'id' | 'minSize' | 'maxSize' | 'defaultSize' | 'collapsedSize'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'aside'
@@ -58,10 +59,18 @@ export interface SidebarProps<T extends SidebarMode = SidebarMode> {
   closeIcon?: IconProps['name']
   /**
    * Display a rail on the sidebar edge to toggle collapse.
-   * Only renders when `collapsible` is not `none`.
+   * When `resizable` is also enabled, the rail acts as a drag-to-resize handle.
    * @defaultValue false
    */
   rail?: boolean
+  /**
+   * Whether to allow the user to resize the sidebar by dragging the rail.
+   * Requires `rail` to be enabled. Drag to resize between `minSize` and `maxSize`.
+   * When `collapsible` is not `none`, dragging near `collapsedSize` snaps to collapsed.
+   * Double-click the rail to reset to `defaultSize`.
+   * @defaultValue false
+   */
+  resizable?: boolean
   /**
    * The mode of the sidebar menu on mobile.
    * @defaultValue 'slideover'
@@ -83,19 +92,20 @@ export interface SidebarSlots {
   close?(props: { ui: Sidebar['ui'], state: SidebarState }): VNode[]
   default?(props: { state: SidebarState, open: boolean, close: () => void }): VNode[]
   footer?(props: { state: SidebarState, open: boolean, close: () => void }): VNode[]
-  rail?(props: { ui: Sidebar['ui'], state: SidebarState }): VNode[]
+  rail?(props: { ui: Sidebar['ui'], state: SidebarState, onMouseDown: (e: MouseEvent) => void, onTouchStart: (e: TouchEvent) => void, onDoubleClick: (e: MouseEvent) => void }): VNode[]
   content?(props: { close: () => void }): VNode[]
 }
 </script>
 
 <script setup lang="ts" generic="T extends SidebarMode">
-import { computed, onMounted, ref, toRef, watch } from 'vue'
+import { computed, onMounted, ref, toRef, useId, watch } from 'vue'
 import { Primitive } from 'reka-ui'
 import { defu } from 'defu'
 import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useComponentUI } from '../composables/useComponentUI'
 import { useLocale } from '../composables/useLocale'
+import { useResizable } from '../composables/useResizable'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 import USlideover from './Slideover.vue'
@@ -111,6 +121,11 @@ const props = withDefaults(defineProps<SidebarProps<T>>(), {
   side: 'left',
   close: false,
   rail: false,
+  resizable: false,
+  minSize: 12,
+  maxSize: 24,
+  defaultSize: 16,
+  collapsedSize: 4,
   mode: 'slideover' as never
 })
 const slots = defineSlots<SidebarSlots>()
@@ -173,6 +188,56 @@ const { t } = useLocale()
 const appConfig = useAppConfig() as Sidebar['AppConfig']
 const uiProp = useComponentUI('sidebar', props)
 
+// Resizable rail integration
+const isResizable = computed(() => props.rail && props.resizable)
+const canCollapse = computed(() => isResizable.value && props.collapsible !== 'none')
+const sidebarId = `sidebar-${props.id || useId()}`
+
+const { el: containerEl, size: sidebarSize, isDragging, isCollapsed, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleDoubleClick, collapse } = useResizable(sidebarId, computed(() => ({
+  side: props.side as 'left' | 'right',
+  minSize: props.minSize,
+  maxSize: props.maxSize,
+  defaultSize: props.defaultSize,
+  resizable: isResizable.value,
+  collapsible: canCollapse.value,
+  collapsedSize: props.collapsedSize,
+  unit: 'rem' as const,
+  persistent: true,
+  storage: 'cookie' as const
+})))
+
+// Sync initial persisted collapsed state to open model
+if (canCollapse.value && isCollapsed.value) {
+  modelOpen.value = false
+}
+
+function onRailClick() {
+  if (!isResizable.value) open.value = !open.value
+}
+
+// Dynamic cursor: ew-resize (bidirectional) by default, directional at bounds
+const railCursor = computed(() => {
+  if (!isResizable.value) return undefined
+  if (isCollapsed.value) return props.side === 'left' ? 'e-resize' : 'w-resize'
+  if (expandedWidth.value >= props.maxSize) return props.side === 'left' ? 'w-resize' : 'e-resize'
+  return 'ew-resize'
+})
+
+// Track expanded width for --sidebar-width (so offcanvas slide-out uses the correct value when collapsed)
+const expandedWidth = ref(props.defaultSize)
+watch(sidebarSize, (v) => {
+  if (!isCollapsed.value) expandedWidth.value = v
+}, { immediate: true })
+
+// Sync useResizable collapse ↔ open model
+watch(isCollapsed, (collapsed) => {
+  if (!isMobile.value && canCollapse.value) modelOpen.value = !collapsed
+})
+// modelOpen and isCollapsed have inverted semantics — equal values means they're out of sync
+watch(modelOpen, (v) => {
+  if (!isMobile.value && canCollapse.value && isCollapsed.value === v) collapse(!v)
+})
+
 const state = computed<SidebarState>(() => open.value ? 'expanded' : 'collapsed')
 
 // Close button only works when collapsible is not 'none'
@@ -279,7 +344,12 @@ const menuProps = toRef(() => defu(props.menu, {
       :data-collapsible="state === 'collapsed' ? collapsible : undefined"
       :data-variant="variant"
       :data-side="side"
+      :data-dragging="isDragging || undefined"
       :class="ui.root({ class: [uiProp?.root, props.class] })"
+      :style="isResizable ? {
+        '--sidebar-width': `${expandedWidth}rem`,
+        ...(props.collapsible === 'icon' ? { '--sidebar-width-icon': `${collapsedSize}rem` } : {})
+      } : undefined"
     >
       <!-- Gap spacer: reserves layout space for the fixed sidebar -->
       <div
@@ -290,20 +360,36 @@ const menuProps = toRef(() => defu(props.menu, {
 
       <!-- Fixed container: the actual visible sidebar -->
       <div
+        ref="containerEl"
         data-slot="container"
         :data-state="state"
         :class="ui.container({ class: uiProp?.container })"
       >
         <ReuseInnerTemplate />
 
-        <slot v-if="rail" name="rail" :state="state" :ui="ui">
-          <button
+        <slot
+          v-if="rail"
+          name="rail"
+          :state="state"
+          :ui="ui"
+          :on-mouse-down="handleMouseDown"
+          :on-touch-start="handleTouchStart"
+          :on-double-click="handleDoubleClick"
+        >
+          <component
+            :is="isResizable ? 'div' : 'button'"
             data-slot="rail"
             :data-state="state"
-            :aria-label="t('sidebar.toggle')"
+            :role="isResizable ? 'separator' : undefined"
+            :aria-orientation="isResizable ? 'vertical' : undefined"
+            :aria-label="isResizable ? undefined : t('sidebar.toggle')"
             :tabindex="-1"
             :class="ui.rail({ class: uiProp?.rail })"
-            @click="open = !open"
+            :style="railCursor ? { cursor: railCursor } : undefined"
+            @mousedown="handleMouseDown"
+            @touchstart="handleTouchStart"
+            @dblclick="handleDoubleClick"
+            @click="onRailClick"
           />
         </slot>
       </div>
diff --git a/src/theme/sidebar.ts b/src/theme/sidebar.ts
index 581ff77dd3..2f4ebcc6fa 100644
--- a/src/theme/sidebar.ts
+++ b/src/theme/sidebar.ts
@@ -2,9 +2,9 @@ import type { ModuleOptions } from '../module'
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
-    root: 'peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem]',
-    gap: 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-    container: 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex',
+    root: 'peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none',
+    gap: 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0',
+    container: 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0',
     inner: 'flex size-full flex-col overflow-hidden divide-y divide-default',
     header: 'flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)',
     wrapper: 'min-w-0 flex-1',
@@ -14,7 +14,7 @@ export default (options: Required<ModuleOptions>) => ({
     close: '',
     body: 'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4',
     footer: 'flex items-center gap-1.5 overflow-hidden p-4',
-    rail: ['absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented)', options.theme.transitions && 'after:transition-colors']
+    rail: ['absolute inset-y-0 z-20 hidden w-4 transition-all ease-out after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented)', options.theme.transitions && 'after:transition-colors']
   },
   variants: {
     side: {
diff --git a/test/components/Sidebar.spec.ts b/test/components/Sidebar.spec.ts
index b5577c92c4..d11dba7aaf 100644
--- a/test/components/Sidebar.spec.ts
+++ b/test/components/Sidebar.spec.ts
@@ -23,6 +23,7 @@ describe('Sidebar', () => {
     ['with mode drawer', { props: { mode: 'drawer' as const, menu: { portal: false } } }],
     ...collapsibles.filter((c: string) => c !== 'none').map((collapsible: string) => [`with collapsed ${collapsible}`, { props: { open: false, collapsible } }]),
     ['with rail', { props: { rail: true, collapsible: 'icon' as const } }],
+    ['with resizable', { props: { rail: true, resizable: true, collapsible: 'icon' as const } }],
     ['with class', { props: { class: 'bg-elevated/50' } }],
     ['with ui', { props: { ui: { body: 'py-0' } } }],
     // Slots
diff --git a/test/components/__snapshots__/Sidebar-vue.spec.ts.snap b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
index 4b38b8c3fb..c285089359 100644
--- a/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
@@ -3,10 +3,10 @@
 exports[`Sidebar > renders with actions slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
         <!--v-if-->
@@ -27,10 +27,10 @@ exports[`Sidebar > renders with actions slot correctly 1`] = `
 exports[`Sidebar > renders with class correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block bg-elevated/50">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block bg-elevated/50">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -46,10 +46,10 @@ exports[`Sidebar > renders with class correctly 1`] = `
 exports[`Sidebar > renders with close correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
         <div data-slot="wrapper" class="min-w-0 flex-1">
@@ -74,10 +74,10 @@ exports[`Sidebar > renders with close correctly 1`] = `
 exports[`Sidebar > renders with collapsed icon correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="collapsed" data-collapsible="icon" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="collapsed" data-collapsible="icon" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
@@ -93,10 +93,10 @@ exports[`Sidebar > renders with collapsed icon correctly 1`] = `
 exports[`Sidebar > renders with collapsed offcanvas correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="collapsed" data-collapsible="offcanvas" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="collapsed" data-collapsible="offcanvas" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -112,10 +112,10 @@ exports[`Sidebar > renders with collapsed offcanvas correctly 1`] = `
 exports[`Sidebar > renders with collapsible icon correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
@@ -130,7 +130,7 @@ exports[`Sidebar > renders with collapsible icon correctly 1`] = `
 
 exports[`Sidebar > renders with collapsible none correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
-<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none h-full w-(--sidebar-width) border-e border-default">
   <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
     <!--v-if-->
     <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -142,10 +142,10 @@ exports[`Sidebar > renders with collapsible none correctly 1`] = `
 exports[`Sidebar > renders with collapsible offcanvas correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -161,10 +161,10 @@ exports[`Sidebar > renders with collapsible offcanvas correctly 1`] = `
 exports[`Sidebar > renders with content slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -180,10 +180,10 @@ exports[`Sidebar > renders with content slot correctly 1`] = `
 exports[`Sidebar > renders with default slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">Default slot</div>
@@ -199,10 +199,10 @@ exports[`Sidebar > renders with default slot correctly 1`] = `
 exports[`Sidebar > renders with description correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
         <div data-slot="wrapper" class="min-w-0 flex-1">
@@ -224,10 +224,10 @@ exports[`Sidebar > renders with description correctly 1`] = `
 exports[`Sidebar > renders with footer slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -243,10 +243,10 @@ exports[`Sidebar > renders with footer slot correctly 1`] = `
 exports[`Sidebar > renders with header slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">Header slot</div>
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -262,10 +262,10 @@ exports[`Sidebar > renders with header slot correctly 1`] = `
 exports[`Sidebar > renders with mode drawer correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -281,10 +281,10 @@ exports[`Sidebar > renders with mode drawer correctly 1`] = `
 exports[`Sidebar > renders with mode modal correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -300,10 +300,10 @@ exports[`Sidebar > renders with mode modal correctly 1`] = `
 exports[`Sidebar > renders with mode slideover correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -319,15 +319,34 @@ exports[`Sidebar > renders with mode slideover correctly 1`] = `
 exports[`Sidebar > renders with rail correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
       <!--v-if-->
-    </div><button data-slot="rail" data-state="expanded" aria-label="Toggle" tabindex="-1" class="absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented) after:transition-colors end-0 translate-x-1/2 cursor-w-resize data-[state=collapsed]:cursor-e-resize"></button>
+    </div><button data-slot="rail" data-state="expanded" aria-label="Toggle" tabindex="-1" class="absolute inset-y-0 z-20 hidden w-4 transition-all ease-out after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented) after:transition-colors end-0 translate-x-1/2 cursor-w-resize data-[state=collapsed]:cursor-e-resize"></button>
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with resizable correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block" style="--sidebar-width: 16rem; --sidebar-width-icon: 4rem;">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div>
+    <div data-slot="rail" data-state="expanded" role="separator" aria-orientation="vertical" tabindex="-1" class="absolute inset-y-0 z-20 hidden w-4 transition-all ease-out after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented) after:transition-colors end-0 translate-x-1/2 cursor-w-resize data-[state=collapsed]:cursor-e-resize" style="cursor: ew-resize;"></div>
   </div>
 </aside>
 <!-- Mobile menu -->
@@ -337,10 +356,10 @@ exports[`Sidebar > renders with rail correctly 1`] = `
 exports[`Sidebar > renders with side left correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -356,10 +375,10 @@ exports[`Sidebar > renders with side left correctly 1`] = `
 exports[`Sidebar > renders with side right correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="right" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="right" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex right-0 border-s border-default data-[state=collapsed]:-right-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 right-0 border-s border-default data-[state=collapsed]:-right-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -375,10 +394,10 @@ exports[`Sidebar > renders with side right correctly 1`] = `
 exports[`Sidebar > renders with title correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
         <div data-slot="wrapper" class="min-w-0 flex-1">
@@ -400,10 +419,10 @@ exports[`Sidebar > renders with title correctly 1`] = `
 exports[`Sidebar > renders with ui correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 py-0"></div>
@@ -419,10 +438,10 @@ exports[`Sidebar > renders with ui correctly 1`] = `
 exports[`Sidebar > renders with variant floating correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="floating" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="floating" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e p-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e p-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default rounded-lg ring ring-default shadow-lg">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -438,10 +457,10 @@ exports[`Sidebar > renders with variant floating correctly 1`] = `
 exports[`Sidebar > renders with variant inset correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="inset" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="inset" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e py-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e py-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-transparent">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -457,10 +476,10 @@ exports[`Sidebar > renders with variant inset correctly 1`] = `
 exports[`Sidebar > renders with variant sidebar correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
diff --git a/test/components/__snapshots__/Sidebar.spec.ts.snap b/test/components/__snapshots__/Sidebar.spec.ts.snap
index 1e0e8dda50..66ccc708af 100644
--- a/test/components/__snapshots__/Sidebar.spec.ts.snap
+++ b/test/components/__snapshots__/Sidebar.spec.ts.snap
@@ -3,10 +3,10 @@
 exports[`Sidebar > renders with actions slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
         <!--v-if-->
@@ -27,10 +27,10 @@ exports[`Sidebar > renders with actions slot correctly 1`] = `
 exports[`Sidebar > renders with class correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block bg-elevated/50">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block bg-elevated/50">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -46,10 +46,10 @@ exports[`Sidebar > renders with class correctly 1`] = `
 exports[`Sidebar > renders with close correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
         <div data-slot="wrapper" class="min-w-0 flex-1">
@@ -74,10 +74,10 @@ exports[`Sidebar > renders with close correctly 1`] = `
 exports[`Sidebar > renders with collapsed icon correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="collapsed" data-collapsible="icon" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="collapsed" data-collapsible="icon" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
@@ -93,10 +93,10 @@ exports[`Sidebar > renders with collapsed icon correctly 1`] = `
 exports[`Sidebar > renders with collapsed offcanvas correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="collapsed" data-collapsible="offcanvas" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="collapsed" data-collapsible="offcanvas" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -112,10 +112,10 @@ exports[`Sidebar > renders with collapsed offcanvas correctly 1`] = `
 exports[`Sidebar > renders with collapsible icon correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
@@ -130,7 +130,7 @@ exports[`Sidebar > renders with collapsible icon correctly 1`] = `
 
 exports[`Sidebar > renders with collapsible none correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
-<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none h-full w-(--sidebar-width) border-e border-default">
   <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
     <!--v-if-->
     <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -142,10 +142,10 @@ exports[`Sidebar > renders with collapsible none correctly 1`] = `
 exports[`Sidebar > renders with collapsible offcanvas correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -161,10 +161,10 @@ exports[`Sidebar > renders with collapsible offcanvas correctly 1`] = `
 exports[`Sidebar > renders with content slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -180,10 +180,10 @@ exports[`Sidebar > renders with content slot correctly 1`] = `
 exports[`Sidebar > renders with default slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">Default slot</div>
@@ -199,10 +199,10 @@ exports[`Sidebar > renders with default slot correctly 1`] = `
 exports[`Sidebar > renders with description correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
         <div data-slot="wrapper" class="min-w-0 flex-1">
@@ -224,10 +224,10 @@ exports[`Sidebar > renders with description correctly 1`] = `
 exports[`Sidebar > renders with footer slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -243,10 +243,10 @@ exports[`Sidebar > renders with footer slot correctly 1`] = `
 exports[`Sidebar > renders with header slot correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">Header slot</div>
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -262,10 +262,10 @@ exports[`Sidebar > renders with header slot correctly 1`] = `
 exports[`Sidebar > renders with mode drawer correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -281,10 +281,10 @@ exports[`Sidebar > renders with mode drawer correctly 1`] = `
 exports[`Sidebar > renders with mode modal correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -300,10 +300,10 @@ exports[`Sidebar > renders with mode modal correctly 1`] = `
 exports[`Sidebar > renders with mode slideover correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -319,15 +319,34 @@ exports[`Sidebar > renders with mode slideover correctly 1`] = `
 exports[`Sidebar > renders with rail correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
       <!--v-if-->
-    </div><button data-slot="rail" data-state="expanded" aria-label="Toggle" tabindex="-1" class="absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented) after:transition-colors end-0 translate-x-1/2 cursor-w-resize data-[state=collapsed]:cursor-e-resize"></button>
+    </div><button data-slot="rail" data-state="expanded" aria-label="Toggle" tabindex="-1" class="absolute inset-y-0 z-20 hidden w-4 transition-all ease-out after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented) after:transition-colors end-0 translate-x-1/2 cursor-w-resize data-[state=collapsed]:cursor-e-resize"></button>
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with resizable correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block" style="--sidebar-width: 16rem; --sidebar-width-icon: 4rem;">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div>
+    <div data-slot="rail" data-state="expanded" role="separator" aria-orientation="vertical" tabindex="-1" class="absolute inset-y-0 z-20 hidden w-4 transition-all ease-out after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented) after:transition-colors end-0 translate-x-1/2 cursor-w-resize data-[state=collapsed]:cursor-e-resize" style="cursor: ew-resize;"></div>
   </div>
 </aside>
 <!-- Mobile menu -->
@@ -337,10 +356,10 @@ exports[`Sidebar > renders with rail correctly 1`] = `
 exports[`Sidebar > renders with side left correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -356,10 +375,10 @@ exports[`Sidebar > renders with side left correctly 1`] = `
 exports[`Sidebar > renders with side right correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="right" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="right" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex right-0 border-s border-default data-[state=collapsed]:-right-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 right-0 border-s border-default data-[state=collapsed]:-right-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -375,10 +394,10 @@ exports[`Sidebar > renders with side right correctly 1`] = `
 exports[`Sidebar > renders with title correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
         <div data-slot="wrapper" class="min-w-0 flex-1">
@@ -400,10 +419,10 @@ exports[`Sidebar > renders with title correctly 1`] = `
 exports[`Sidebar > renders with ui correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 py-0"></div>
@@ -419,10 +438,10 @@ exports[`Sidebar > renders with ui correctly 1`] = `
 exports[`Sidebar > renders with variant floating correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="floating" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="floating" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e p-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e p-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default rounded-lg ring ring-default shadow-lg">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -438,10 +457,10 @@ exports[`Sidebar > renders with variant floating correctly 1`] = `
 exports[`Sidebar > renders with variant inset correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="inset" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="inset" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e py-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e py-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-transparent">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
@@ -457,10 +476,10 @@ exports[`Sidebar > renders with variant inset correctly 1`] = `
 exports[`Sidebar > renders with variant sidebar correctly 1`] = `
 "<!-- Non-collapsible: simple inline sidebar -->
 <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
-<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none group/sidebar hidden lg:block">
   <!-- Gap spacer: reserves layout space for the fixed sidebar -->
-  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
-  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0 data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0 left-0 border-e border-default data-[state=collapsed]:-left-(--sidebar-width)">
     <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
       <!--v-if-->
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>