wally-ui 1.14.1 → 1.16.0

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

@@ -0,0 +1,124 @@
+import { Component, signal, WritableSignal } from '@angular/core';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { getFormattedCode } from '../../../../core/utils/prism';
+
+import { AudioWaveformCodeExamples } from './audio-waveform-docs.examples';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+import { AudioWaveform } from '../../../../components/audio-waveform/audio-waveform';
+import { Button } from '../../../../components/button/button';
+
+@Component({
+  selector: 'app-audio-waveform-docs',
+  imports: [
+    Breadcrumb,
+    AudioWaveform,
+    Button
+  ],
+  templateUrl: './audio-waveform-docs.html',
+  styleUrl: './audio-waveform-docs.css'
+})
+export class AudioWaveformDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Audio Waveform' }
+  ];
+
+  // Installation & Import
+  installationCode = getFormattedCode(AudioWaveformCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(AudioWaveformCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(AudioWaveformCodeExamples.componentImport, 'typescript');
+
+  // Basic Usage
+  basicUsageCode = getFormattedCode(AudioWaveformCodeExamples.basicUsage, 'html');
+  withTimerCode = getFormattedCode(AudioWaveformCodeExamples.withTimer, 'html');
+  completeExampleCode = getFormattedCode(AudioWaveformCodeExamples.completeExample, 'html');
+  completeExampleTsCode = getFormattedCode(AudioWaveformCodeExamples.completeExampleTs, 'typescript');
+
+  // Service Integration
+  serviceIntegrationCode = getFormattedCode(AudioWaveformCodeExamples.serviceIntegration, 'typescript');
+
+  // Configuration
+  responsiveConfigCode = getFormattedCode(AudioWaveformCodeExamples.responsiveConfig, 'typescript');
+  webAudioConceptsCode = getFormattedCode(AudioWaveformCodeExamples.webAudioConcepts, 'typescript');
+
+  // Future Features
+  futureTranscriptionCode = getFormattedCode(AudioWaveformCodeExamples.futureTranscription, 'html');
+
+  // Properties
+  propertyIsStartRecordingCode = getFormattedCode(AudioWaveformCodeExamples.propertyIsStartRecording, 'typescript');
+  propertyIsStopRecordingCode = getFormattedCode(AudioWaveformCodeExamples.propertyIsStopRecording, 'typescript');
+  propertyShowTimerCode = getFormattedCode(AudioWaveformCodeExamples.propertyShowTimer, 'typescript');
+
+  // Service Properties
+  servicePropertyIsRecordingCode = getFormattedCode(AudioWaveformCodeExamples.servicePropertyIsRecording, 'typescript');
+  servicePropertyAudioDataCode = getFormattedCode(AudioWaveformCodeExamples.servicePropertyAudioData, 'typescript');
+  servicePropertyRecordedAudioBlobCode = getFormattedCode(AudioWaveformCodeExamples.servicePropertyRecordedAudioBlob, 'typescript');
+  servicePropertyRecordedAudioUrlCode = getFormattedCode(AudioWaveformCodeExamples.servicePropertyRecordedAudioUrl, 'typescript');
+
+  // Methods
+  methodDownloadRecordingCode = getFormattedCode(AudioWaveformCodeExamples.methodDownloadRecording, 'typescript');
+  methodClearRecordingCode = getFormattedCode(AudioWaveformCodeExamples.methodClearRecording, 'typescript');
+
+  // Configuration
+  configFFTSizeCode = getFormattedCode(AudioWaveformCodeExamples.configFFTSize, 'typescript');
+  configBarCountCode = getFormattedCode(AudioWaveformCodeExamples.configBarCount, 'typescript');
+  configSmoothingCode = getFormattedCode(AudioWaveformCodeExamples.configSmoothing, 'typescript');
+
+  // Accessibility & Browser Support
+  accessibilityExampleCode = getFormattedCode(AudioWaveformCodeExamples.accessibilityExample, 'html');
+  browserSupportCode = getFormattedCode(AudioWaveformCodeExamples.browserSupport, 'typescript');
+
+  // Interactive demo state
+  isRecording: WritableSignal<boolean> = signal<boolean>(false);
+  isRecordingWithoutTimer: WritableSignal<boolean> = signal<boolean>(false);
+  isRecordingWithTimer: WritableSignal<boolean> = signal<boolean>(false);
+  isRecordingWithDownload: WritableSignal<boolean> = signal<boolean>(false);
+
+  constructor(
+    private aiPromptService: AiPromptService
+  ) { }
+
+  startRecording(): void {
+    this.isRecording.set(true);
+  }
+
+  stopRecording(): void {
+    this.isRecording.set(false);
+  }
+
+  startRecordingWithoutTimer(): void {
+    this.isRecordingWithoutTimer.set(true);
+  }
+
+  stopRecordingWithoutTimer(): void {
+    this.isRecordingWithoutTimer.set(false);
+  }
+
+  startRecordingWithTimer(): void {
+    this.isRecordingWithTimer.set(true);
+  }
+
+  stopRecordingWithTimer(): void {
+    this.isRecordingWithTimer.set(false);
+  }
+
+  startRecordingWithDownload(): void {
+    this.isRecordingWithDownload.set(true);
+  }
+
+  stopRecordingWithDownload(): void {
+    this.isRecordingWithDownload.set(false);
+  }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}

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

@@ -0,0 +1,383 @@
+<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] " role="main">
+  <div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
+
+    <!-- Breadcrumb Navigation -->
+    <nav class="mb-8" aria-label="Breadcrumb navigation">
+      <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
+    </nav>
+
+    <!-- Header -->
+    <header class="mb-12" role="banner">
+      <h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+        <span aria-hidden="true">&gt;_ </span>Combobox
+      </h1>
+      <p class="text-sm sm:text-base text-neutral-700 dark:text-neutral-300 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4 leading-relaxed">
+        A flexible combobox component with search, multi-select support, keyboard navigation, and intelligent viewport-aware positioning. Features input and custom trigger modes, item grouping, and zero external dependencies.
+      </p>
+    </header>
+
+    <!-- AI Assistant Links -->
+    <div class="flex flex-wrap gap-0 mt-6 mb-12 border-2 border-neutral-300 dark:border-neutral-700" role="list" aria-label="Open documentation in AI coding assistants">
+      <a [href]="claudeUrl" target="_blank"
+        class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] border-b-2 sm:border-b-0 sm:border-r-2 border-neutral-300 dark:border-neutral-700 hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
+        rel="noopener noreferrer" role="listitem" aria-label="Open Combobox component documentation in Claude AI assistant">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150" viewBox="0 0 24 24" aria-hidden="true">
+          <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>
+        <span class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
+          Open in Claude
+        </span>
+      </a>
+
+      <a [href]="chatGptUrl" target="_blank"
+        class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
+        rel="noopener noreferrer" role="listitem" aria-label="Open Combobox component documentation in ChatGPT AI assistant">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150" viewBox="0 0 48 48" aria-hidden="true">
+          <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>
+        <span class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
+          Open in ChatGPT
+        </span>
+      </a>
+    </div>
+
+    <!-- Installation -->
+    <section id="installation" class="mb-12" aria-labelledby="installation-heading">
+      <h2 id="installation-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Installation ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+        <pre><code [innerHTML]="installationCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+    </section>
+
+    <!-- Import -->
+    <section id="import" class="mb-12" aria-labelledby="import-heading">
+      <h2 id="import-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Import ]
+      </h2>
+      <div class="space-y-3">
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+          <pre><code [innerHTML]="importCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+          <pre><code [innerHTML]="componentImportCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+      </div>
+    </section>
+
+    <!-- Basic Usage -->
+    <section id="basic-usage" class="mb-12" aria-labelledby="basic-usage-heading">
+      <h2 id="basic-usage-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Basic Usage ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="basicUsageCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="componentSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="border-2 border-neutral-300 dark:border-neutral-700 p-6 bg-white dark:bg-[#0a0a0a]">
+        <wally-combobox
+          [data]="fruits"
+          placeholder="Select a fruit..."
+          (selectionChange)="onSingleSelectionChange($event)">
+          <wally-combobox-input></wally-combobox-input>
+          <wally-combobox-content></wally-combobox-content>
+        </wally-combobox>
+        @if (singleSelection.length > 0) {
+          <div class="mt-4 text-sm text-neutral-600 dark:text-neutral-400">
+            Selected: <strong>{{ singleSelection[0].label }}</strong>
+          </div>
+        }
+      </div>
+    </section>
+
+    <!-- Multi-Select -->
+    <section id="multi-select" class="mb-12" aria-labelledby="multi-select-heading">
+      <h2 id="multi-select-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Multi-Select ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="multiSelectCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="multiSelectSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="border-2 border-neutral-300 dark:border-neutral-700 p-6 bg-white dark:bg-[#0a0a0a]">
+        <wally-combobox
+          [data]="countries"
+          [multiSelect]="true"
+          [closeOnSelect]="false"
+          (selectionChange)="onMultiSelectionChange($event)">
+          <wally-combobox-input></wally-combobox-input>
+          <wally-combobox-content></wally-combobox-content>
+        </wally-combobox>
+        @if (multiSelection.length > 0) {
+          <div class="mt-4 text-sm text-neutral-600 dark:text-neutral-400">
+            {{ multiSelection.length }} countries selected
+          </div>
+        }
+      </div>
+    </section>
+
+    <!-- Grouped Items -->
+    <section id="grouped-items" class="mb-12" aria-labelledby="grouped-items-heading">
+      <h2 id="grouped-items-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Grouped Items ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="groupedItemsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="groupedItemsSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="border-2 border-neutral-300 dark:border-neutral-700 p-6 bg-white dark:bg-[#0a0a0a]">
+        <wally-combobox
+          [data]="programmingLanguages"
+          groupBy="group"
+          (selectionChange)="onGroupedSelectionChange($event)">
+          <wally-combobox-input></wally-combobox-input>
+          <wally-combobox-content></wally-combobox-content>
+        </wally-combobox>
+        @if (groupedSelection.length > 0) {
+          <div class="mt-4 text-sm text-neutral-600 dark:text-neutral-400">
+            Selected: <strong>{{ groupedSelection[0].label }}</strong>
+            @if (groupedSelection[0].group) {
+              <span class="text-xs ml-2 text-neutral-500 dark:text-neutral-500">({{ groupedSelection[0].group }})</span>
+            }
+          </div>
+        }
+      </div>
+    </section>
+
+    <!-- Custom Trigger -->
+    <section id="custom-trigger" class="mb-12" aria-labelledby="custom-trigger-heading">
+      <h2 id="custom-trigger-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Custom Trigger ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="customTriggerCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="customTriggerSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="border-2 border-neutral-300 dark:border-neutral-700 p-6 bg-white dark:bg-[#0a0a0a]">
+        <wally-combobox
+          [data]="programmingLanguages"
+          triggerMode="custom"
+          (selectionChange)="onCustomTriggerSelectionChange($event)">
+          <wally-combobox-trigger>
+            <wally-button variant="outline">
+              @if (customTriggerSelection.length > 0) {
+                {{ customTriggerSelection[0].label }}
+              } @else {
+                Select a language
+              }
+            </wally-button>
+          </wally-combobox-trigger>
+          <wally-combobox-content></wally-combobox-content>
+        </wally-combobox>
+      </div>
+    </section>
+
+    <!-- API Reference -->
+    <section id="api-reference" class="mb-12" aria-labelledby="api-heading">
+      <h2 id="api-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ API Reference ]
+      </h2>
+
+      <!-- Combobox Props -->
+      <article class="mb-8" aria-labelledby="combobox-props-heading">
+        <h3 id="combobox-props-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+          <span aria-hidden="true">&gt; </span>Combobox Props & Events
+        </h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">data</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">ComboboxInterface[]</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">[]</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Array of items to display in the dropdown</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">multiSelect</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Enable multi-select mode with chips</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">triggerMode</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">'input' | 'custom'</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">'input'</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">How the combobox is triggered - input field or custom trigger</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">groupBy</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string | null</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">null</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Property name to group items by (enables grouping with category headers)</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">placeholder</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">'Search...'</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Placeholder text for the input field</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">closeOnSelect</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">true</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Whether to close dropdown after item selection</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">disabled</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Disable the combobox</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">(selectionChange)</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">OutputEmitterRef&lt;ComboboxInterface[]&gt;</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">-</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Emitted when selection changes. Returns array of selected items</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </article>
+
+      <!-- ComboboxContent Props -->
+      <article class="mb-8" aria-labelledby="content-props-heading">
+        <h3 id="content-props-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+          <span aria-hidden="true">&gt; </span>ComboboxContent Props
+        </h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">position</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">'top' | 'bottom'</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">'bottom'</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Preferred dropdown position. Auto-adjusts based on available viewport space</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </article>
+
+      <!-- ComboboxInterface Type -->
+      <article class="mb-8" aria-labelledby="interface-heading">
+        <h3 id="interface-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+          <span aria-hidden="true">&gt; </span>ComboboxInterface
+        </h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Required</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">value</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">any</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">Yes</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Unique identifier for the item</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">label</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">Yes</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Display text for the item</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">description</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">No</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Optional description text shown below the label</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">group</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">No</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Group name for categorizing items (used with groupBy prop)</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">[key: string]</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">any</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">No</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Additional custom properties can be added</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <!-- Keyboard Navigation -->
+    <section id="keyboard-navigation" class="mb-12" aria-labelledby="keyboard-navigation-heading">
+      <h2 id="keyboard-navigation-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Keyboard Navigation ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+        <pre><code [innerHTML]="keyboardNavigationCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section id="features" class="mb-12" aria-labelledby="features-heading">
+      <h2 id="features-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Features ]
+      </h2>
+      <ul class="list-disc list-inside text-sm text-neutral-600 dark:text-neutral-400 space-y-2 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4">
+        <li>Intelligent viewport-aware positioning (auto-adjusts based on available space)</li>
+        <li>Real-time position recalculation on window resize</li>
+        <li>Multi-select with chips inside input</li>
+        <li>Integrated search/filter functionality</li>
+        <li>Complete keyboard navigation support</li>
+        <li>Item grouping with category headers</li>
+        <li>Virtual scrolling for large datasets (1000+ items)</li>
+        <li>Dark mode supported</li>
+        <li>Click outside to close</li>
+        <li>Zero external dependencies (Tailwind only)</li>
+      </ul>
+    </section>
+
+  </div>
+</main>

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

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