diff --git a/libs/ui/src/lib/carousel/carousel-item.directive.ts b/libs/ui/src/lib/carousel/carousel-item.directive.ts
new file mode 100644
index 000000000..2384cf566
--- /dev/null
+++ b/libs/ui/src/lib/carousel/carousel-item.directive.ts
@@ -0,0 +1,17 @@
+import { FocusableOption } from "@angular/cdk/a11y";
+import { Directive, ElementRef, HostBinding } from "@angular/core";
+
+@Directive({
+    selector: '[carousel-item]',
+    standalone: true,
+  })
+  export class CarouselItem implements FocusableOption {
+    @HostBinding('attr.role') readonly role = 'listitem';
+    @HostBinding('tabindex') tabindex = '-1';
+  
+    constructor(readonly element: ElementRef<HTMLElement>) {}
+  
+    focus(): void {
+      this.element.nativeElement.focus({preventScroll: true});
+    }
+  }
\ No newline at end of file
diff --git a/libs/ui/src/lib/carousel/carousel.ts b/libs/ui/src/lib/carousel/carousel.ts
index a50975fd5..ac6da9067 100644
--- a/libs/ui/src/lib/carousel/carousel.ts
+++ b/libs/ui/src/lib/carousel/carousel.ts
@@ -18,21 +18,7 @@ import {
   import {MatIconModule} from '@angular/material/icon';
   import {MatButtonModule} from '@angular/material/button';
   import {NgIf} from '@angular/common';
-  
-  @Directive({
-    selector: '[carousel-item]',
-    standalone: true,
-  })
-  export class CarouselItem implements FocusableOption {
-    @HostBinding('attr.role') readonly role = 'listitem';
-    @HostBinding('tabindex') tabindex = '-1';
-  
-    constructor(readonly element: ElementRef<HTMLElement>) {}
-  
-    focus(): void {
-      this.element.nativeElement.focus({preventScroll: true});
-    }
-  }
+import { CarouselItem } from './carousel-item.directive';
   
   @Component({
     selector: 'gf-carousel',