wally-ui 1.5.2 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.5.2",
+  "version": "1.7.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/public/sitemap.xml

@@ -44,4 +44,12 @@
         <priority>0.8</priority>
     </url>
 
+    <!-- Carousel Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/components/carousel</loc>
+        <lastmod>2025-09-27</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
 </urlset>

package/playground/showcase/src/app/app.routes.server.ts

@@ -21,6 +21,10 @@ export const serverRoutes: ServerRoute[] = [
     path: 'documentation/components/breadcrumb',
     renderMode: RenderMode.Prerender,
   },
+  {
+    path: 'documentation/components/carousel',
+    renderMode: RenderMode.Prerender,
+  },
   {
     path: 'components',
     renderMode: RenderMode.Prerender,

package/playground/showcase/src/app/components/button/button.html

@@ -1,4 +1,12 @@
-<button [type]="type()" [disabled]="disabled() || loading()" (click)="handleClick()" class="
+<button
+    [type]="type()"
+    [disabled]="disabled() || loading()"
+    [attr.aria-label]="ariaLabel() || null"
+    [attr.aria-describedby]="ariaDescribedBy() || null"
+    [attr.aria-pressed]="ariaPressed()"
+    [attr.aria-busy]="loading()"
+    (click)="handleClick()"
+    class="
         group
         relative
         w-full

package/playground/showcase/src/app/components/button/button.ts

@@ -15,6 +15,11 @@ export class Button {
   loading: InputSignal<boolean> = input<boolean>(false);
   showNotification: InputSignal<boolean> = input<boolean>(false);
 
+  // Accessibility properties
+  ariaLabel: InputSignal<string> = input<string>('');
+  ariaDescribedBy: InputSignal<string> = input<string>('');
+  ariaPressed: InputSignal<boolean | undefined> = input<boolean | undefined>(undefined);
+
   click: OutputEmitterRef<void> = output<void>();
 
   handleClick(): void {

package/playground/showcase/src/app/components/carousel/carousel.html

@@ -0,0 +1,39 @@
+<div class="w-full flex flex-col items-center gap-4">
+    <div class="relative w-64 h-40 overflow-hidden rounded-lg shadow">
+        @for (item of items; track item; let i = $index) {
+            <div class="absolute inset-0 flex items-center justify-center bg-blue-500 text-white text-2xl
+                        transition-all duration-700 ease-in-out"
+                 [ngClass]="{
+                    'translate-x-0 opacity-100': i === itemVisible(),
+                    'translate-x-full opacity-0': i > itemVisible(),
+                    '-translate-x-full opacity-0': i < itemVisible()
+                 }">
+                {{ item }}
+            </div>
+        }
+    </div>
+
+    <div class="flex gap-2">
+        @for (item of items; track item; let i = $index) {
+            <button
+                class="w-2 h-2 rounded-full transition-all duration-300"
+                [ngClass]="{
+                    'bg-blue-500 scale-125': i === itemVisible(),
+                    'bg-gray-300 hover:bg-gray-400': i !== itemVisible()
+                }"
+                (click)="goToSlide(i)">
+            </button>
+        }
+    </div>
+
+    <div class="flex gap-4">
+        <button class="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors duration-200"
+                (click)="goPrevios()">
+            Previos
+        </button>
+        <button class="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors duration-200"
+                (click)="goNext()">
+            Next
+        </button>
+    </div>
+</div>

package/playground/showcase/src/app/components/carousel/carousel.ts

@@ -0,0 +1,37 @@
+import { Component, input, OnInit, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'wally-carousel',
+  imports: [CommonModule],
+  templateUrl: './carousel.html',
+})
+export class Carousel implements OnInit {
+  items = [1, 2, 3, 4];
+  itemVisible = signal<number>(0);
+
+  ngOnInit(): void {
+  }
+
+  // test - algorithm Circular Buffer:
+  nextIndex(currentIndex: number): number {
+    return (currentIndex + 1) % this.items.length;
+  }
+
+  previosIndex(currentIndex: number): number {
+    return (currentIndex - 1 + this.items.length) % this.items.length;
+  }
+
+  goNext(): void {
+    this.itemVisible.set(this.nextIndex(this.itemVisible()));
+  }
+
+  goPrevios(): void {
+    this.itemVisible.set(this.previosIndex(this.itemVisible()));
+  }
+
+  goToSlide(index: number): void {
+    this.itemVisible.set(index);
+  }
+  // end test Circular Buffer ---
+}

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts

@@ -47,9 +47,29 @@ export const ButtonCodeExamples = {
   </svg>
 </wally-button>`,
 
+  // Accessibility
+  ariaLabel: `<wally-button ariaLabel="Save document">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="1.5" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+  </svg>
+</wally-button>`,
+
+  ariaPressed: `<wally-button [ariaPressed]="isToggled">
+  Toggle Setting
+</wally-button>`,
+
+  ariaBusy: `<wally-button [loading]="true">
+  Processing...
+</wally-button>`,
+
   // Properties
   propertyType: `type: string = 'button';`,
   propertyDisabled: `disabled: boolean = false;`,
   propertyLoading: `loading: boolean = false;`,
   propertyShowNotification: `showNotification: boolean = false;`,
+  propertyAriaLabel: `ariaLabel: string = '';`,
+  propertyAriaPressed: `ariaPressed: boolean | undefined = undefined;`,
+  propertyAriaDescribedBy: `ariaDescribedBy: string = '';`,
 };

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html

@@ -274,6 +274,57 @@
       </div>
     </section>
 
+    <!-- Accessibility -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Accessibility</h2>
+
+      <div class="space-y-8">
+        <!-- ARIA Label -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">ARIA Label for Icon-Only Buttons</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="ariaLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-button ariaLabel="Save document">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+              </svg>
+            </wally-button>
+          </div>
+        </div>
+
+        <!-- Toggle Button -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Toggle Button with ARIA Pressed</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="ariaPressedCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-button [ariaPressed]="toggleState()">
+              Toggle Setting
+            </wally-button>
+          </div>
+        </div>
+
+        <!-- Loading State -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Loading State with ARIA Busy</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="ariaBusyCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-button [loading]="true">
+              Processing...
+            </wally-button>
+          </div>
+          <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
+            Automatically sets <code class="bg-gray-200 dark:bg-[#121212] px-1 py-0.5 rounded text-xs">aria-busy="true"</code> when loading
+          </p>
+        </div>
+      </div>
+    </section>
+
     <!-- Properties -->
     <section class="mb-8">
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
@@ -306,6 +357,27 @@
           </div>
           <p class="text-sm text-gray-700 dark:text-gray-400">Shows notification badge when true</p>
         </div>
+
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyAriaLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Accessible label for screen readers (essential for icon-only buttons)</p>
+        </div>
+
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyAriaPressedCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Indicates pressed state for toggle buttons</p>
+        </div>
+
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyAriaDescribedByCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">References element(s) that describe the button</p>
+        </div>
       </div>
     </section>
 
@@ -324,16 +396,6 @@
           </p>
         </div>
 
-        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Accessibility</h3>
-            <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">
-            ARIA labels, keyboard navigation, and screen reader support for better accessibility.
-          </p>
-        </div>
-
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
           <div class="flex items-center gap-2 mb-2">
             <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Ripple Effect</h3>

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts

@@ -38,13 +38,22 @@ export class ButtonDocs {
   iconCode = getFormattedCode(ButtonCodeExamples.iconWithText, 'html');
   iconNotificationCode = getFormattedCode(ButtonCodeExamples.iconOnly, 'html');
 
+  // Accessibility
+  ariaLabelCode = getFormattedCode(ButtonCodeExamples.ariaLabel, 'html');
+  ariaPressedCode = getFormattedCode(ButtonCodeExamples.ariaPressed, 'html');
+  ariaBusyCode = getFormattedCode(ButtonCodeExamples.ariaBusy, 'html');
+
   // Properties
   propertyTypeCode = getFormattedCode(ButtonCodeExamples.propertyType, 'typescript');
   propertyDisabledCode = getFormattedCode(ButtonCodeExamples.propertyDisabled, 'typescript');
   propertyLoadingCode = getFormattedCode(ButtonCodeExamples.propertyLoading, 'typescript');
   propertyShowNotificationCode = getFormattedCode(ButtonCodeExamples.propertyShowNotification, 'typescript');
+  propertyAriaLabelCode = getFormattedCode(ButtonCodeExamples.propertyAriaLabel, 'typescript');
+  propertyAriaPressedCode = getFormattedCode(ButtonCodeExamples.propertyAriaPressed, 'typescript');
+  propertyAriaDescribedByCode = getFormattedCode(ButtonCodeExamples.propertyAriaDescribedBy, 'typescript');
 
   clickMessage: WritableSignal<string> = signal<string>('');
+  toggleState: WritableSignal<boolean> = signal<boolean>(false);
 
   constructor(
     private aiPromptService: AiPromptService

package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.examples.ts

@@ -0,0 +1,17 @@
+// Carousel documentation code examples
+export const CarouselCodeExamples = {
+  // Installation
+  installation: `npx wally-ui add carousel`,
+
+  // Import examples
+  import: `import { Carousel } from './components/wally-ui/carousel/carousel';`,
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [Carousel],
+  templateUrl: './example.html',
+  styleUrl: './example.css'
+})`,
+
+  // Basic usage
+  basicUsage: `<wally-carousel></wally-carousel>`,
+};

package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html

@@ -0,0 +1,180 @@
+<div class="font-mono">
+  <div class="max-w-4xl mx-auto p-6">
+    <div class="mb-4">
+      <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
+    </div>
+
+    <h1 class="text-2xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
+      Carousel
+    </h1>
+    <p class="text-gray-700 dark:text-gray-400 mb-4">
+      A smooth carousel component with navigation controls, dot indicators, and elegant transitions.
+    </p>
+
+    <!-- Under Construction Badge -->
+    <div class="mb-6">
+      <span class="text-xs bg-yellow-500 text-black px-3 py-1 rounded-full font-medium">Under Construction</span>
+      <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
+        This component is actively being developed. Features like auto-play, touch gestures, and customization options are coming soon!
+      </p>
+    </div>
+
+    <!-- AI Prompts -->
+    <div class="flex flex-wrap gap-2 mb-6">
+      <a [href]="claudeUrl" target="_blank"
+        class="inline-flex items-center gap-2 px-3 py-1.5 text-xs bg-gray-200 dark:bg-[#121212] text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-[#1a1a1a] hover:text-[#0a0a0a] dark:hover:text-white transition-colors">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24">
+          <path fill="currentColor"
+            d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z" />
+        </svg>
+        Open in Claude
+      </a>
+
+      <a [href]="chatGptUrl" target="_blank"
+        class="inline-flex items-center gap-2 px-3 py-1.5 text-xs bg-gray-200 dark:bg-[#121212] text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-[#1a1a1a] hover:text-[#0a0a0a] dark:hover:text-white transition-colors">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 48 48">
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m18.38 20.94l12.47-7.2l11.19 6.46c6.2 3.58 4.1 17.61-5.23 17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 17.44l12.47 7.2v12.93c0 7.16-13.2 12.36-17.86 4.28" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M30.5 21.2v14.14L19.31 41.8c-6.2 3.58-17.3-5.25-12.64-13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m30.5 27.94l-12.47 7.2l-11.19-6.46c-6.21-3.59-4.11-17.61 5.22-17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
+        </svg>
+        Open in ChatGPT
+      </a>
+    </div>
+
+    <!-- Installation -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Installation</h2>
+      <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+        <pre><code [innerHTML]="installationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+    </section>
+
+    <!-- Preview -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Preview</h2>
+      <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+        <div class="flex justify-center">
+          <wally-carousel></wally-carousel>
+        </div>
+      </div>
+    </section>
+
+    <!-- Import -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Import</h2>
+      <div class="space-y-4">
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <pre><code [innerHTML]="importCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+      </div>
+    </section>
+
+    <!-- Basic Usage -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Basic Usage</h2>
+      <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+        <pre><code [innerHTML]="basicUsageCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+        <div class="flex justify-center">
+          <wally-carousel></wally-carousel>
+        </div>
+      </div>
+    </section>
+
+    <!-- Current Features -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Current Features</h2>
+
+      <div class="space-y-4">
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <div class="flex items-center gap-2 mb-2">
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Circular Buffer Algorithm</h3>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">
+            Infinite navigation using circular buffer data structure for seamless looping.
+          </p>
+        </div>
+
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <div class="flex items-center gap-2 mb-2">
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Smooth Transitions</h3>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">
+            Tailwind CSS v4 powered transitions with transform and opacity animations.
+          </p>
+        </div>
+
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <div class="flex items-center gap-2 mb-2">
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Navigation Controls</h3>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">
+            Previous/Next buttons and dot indicators for direct slide navigation.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Future Features -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Future Features</h2>
+
+      <div class="space-y-4">
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <div class="flex items-center gap-2 mb-2">
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Auto-play</h3>
+            <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">
+            Automatic slide progression with configurable intervals and pause on hover.
+          </p>
+        </div>
+
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <div class="flex items-center gap-2 mb-2">
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Touch Gestures</h3>
+            <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">
+            Swipe support for mobile devices with momentum scrolling and gesture recognition.
+          </p>
+        </div>
+
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <div class="flex items-center gap-2 mb-2">
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Accessibility</h3>
+            <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">
+            ARIA labels, keyboard navigation, and screen reader support for better accessibility.
+          </p>
+        </div>
+
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <div class="flex items-center gap-2 mb-2">
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Custom Content</h3>
+            <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">
+            Support for custom slide content through content projection and templates.
+          </p>
+        </div>
+      </div>
+    </section>
+
+  </div>
+</div>

package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CarouselDocs } from './carousel-docs';
+
+describe('CarouselDocs', () => {
+  let component: CarouselDocs;
+  let fixture: ComponentFixture<CarouselDocs>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CarouselDocs]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CarouselDocs);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+import { Carousel } from '../../../../components/carousel/carousel';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { CarouselCodeExamples } from './carousel-docs.examples';
+import { getFormattedCode } from '../../../../core/utils/prism';
+
+@Component({
+  selector: 'wally-carousel-docs',
+  imports: [
+    Carousel,
+    Breadcrumb
+  ],
+  templateUrl: './carousel-docs.html',
+  styleUrl: './carousel-docs.css'
+})
+export class CarouselDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Carousel' }
+  ];
+
+  // Code examples with highlighting
+  installationCode = getFormattedCode(CarouselCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(CarouselCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(CarouselCodeExamples.componentImport, 'typescript');
+  basicUsageCode = getFormattedCode(CarouselCodeExamples.basicUsage, 'html');
+
+  constructor(
+    private aiPromptService: AiPromptService
+  ) { }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}

package/playground/showcase/src/app/pages/documentation/components/components.html

@@ -60,6 +60,19 @@
       </a>
     </div>
 
+    <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+      <div class="flex items-center gap-2 mb-2">
+        <h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white">Carousel</h4>
+        <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
+      </div>
+      <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
+        A smooth carousel component with navigation controls, dot indicators, and elegant transitions using circular buffer algorithm.
+      </p>
+      <a href="/documentation/components/carousel" class="text-blue-500 underline hover:text-blue-700 text-sm">
+        View Documentation
+      </a>
+    </div>
+
     <div class="w-auto h-auto">
       <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4944285767597175"
         crossorigin="anonymous"></script>

package/playground/showcase/src/app/pages/documentation/components/components.routes.ts

@@ -16,5 +16,9 @@ export const componentsRoutes: Routes = [
     {
         path: 'input',
         loadComponent: () => import('./input-docs/input-docs').then(m => m.InputDocs)
+    },
+    {
+        path: 'carousel',
+        loadComponent: () => import('./carousel-docs/carousel-docs').then(m => m.CarouselDocs)
     }
 ];

package/playground/showcase/src/app/pages/home/home.html

@@ -1,4 +1,5 @@
 <div class="h-dvh antialiased font-mono">
+    <wally-carousel></wally-carousel>
     <div class="w-full h-full flex flex-col items-center justify-center p-4">
         <div class="max-w-md">
             <h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white">

package/playground/showcase/src/app/pages/home/home.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
+import { Carousel } from '../../components/carousel/carousel';
 
 @Component({
   selector: 'wally-home',
-  imports: [],
+  imports: [Carousel],
   templateUrl: './home.html',
   styleUrl: './home.css'
 })