ngx-com 0.0.21 → 0.1.0

package/fesm2022/ngx-com-components-dropdown.mjs

@@ -4,12 +4,13 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet } from '@angular/common';
 import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import { ErrorStateMatcher, FormFieldControl } from 'ngx-com/components/form-field';
+import * as i1 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { cva } from 'class-variance-authority';
 import { mergeClasses } from 'ngx-com/utils';
-import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
@@ -31,7 +32,7 @@ const dropdownTriggerVariants = cva([
     'bg-input-background',
     'text-input-foreground',
     'transition-colors',
-    'duration-150',
+    'duration-normal',
     'placeholder:text-input-placeholder',
     'focus-visible:outline-[1px]',
     'focus-visible:outline-offset-2',
@@ -130,7 +131,7 @@ const dropdownTriggerVariants = cva([
 /**
  * CVA variants for the dropdown panel (overlay).
  *
- * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`, `--radius-overlay`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`, `--shadow-overlay`, `--radius-overlay`
  */
 const dropdownPanelVariants = cva([
     'z-50',
@@ -140,7 +141,7 @@ const dropdownPanelVariants = cva([
     'border-border-subtle',
     'bg-popover',
     'text-popover-foreground',
-    'shadow-lg',
+    'shadow-overlay',
     'outline-none',
 ], {
     variants: {
@@ -169,7 +170,7 @@ const dropdownOptionVariants = cva([
     'items-center',
     'outline-none',
     'transition-colors',
-    'duration-100',
+    'duration-fast',
 ], {
     variants: {
         size: {
@@ -251,7 +252,7 @@ const dropdownTagVariants = cva([
     'rounded-tag',
     'font-medium',
     'transition-colors',
-    'duration-100',
+    'duration-fast',
 ], {
     variants: {
         size: {
@@ -418,7 +419,7 @@ const dropdownChevronVariants = cva([
     'shrink-0',
     'text-muted-foreground',
     'transition-transform',
-    'duration-200',
+    'duration-slow',
 ], {
     variants: {
         size: {
@@ -478,6 +479,7 @@ class ComDropdownOption {
     /** Additional CSS classes to apply. */
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
     /** Emitted when the option is selected. */
+    // eslint-disable-next-line @angular-eslint/no-output-native -- intentional: matches listbox/combobox select pattern
     select = output();
     /** Emitted when the mouse enters the option. */
     hover = output();
@@ -545,7 +547,10 @@ class ComDropdownOption {
       [attr.data-active]="active() || null"
       [attr.data-selected]="selected() || null"
       [attr.data-disabled]="disabled() || null"
+      tabindex="-1"
       (click)="onOptionClick($event)"
+      (keydown.enter)="onOptionClick($event)"
+      (keydown.space)="onOptionClick($event)"
       (mouseenter)="onMouseEnter()"
     >
       @if (optionTemplate()) {
@@ -588,7 +593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       [attr.data-active]="active() || null"
       [attr.data-selected]="selected() || null"
       [attr.data-disabled]="disabled() || null"
+      tabindex="-1"
       (click)="onOptionClick($event)"
+      (keydown.enter)="onOptionClick($event)"
+      (keydown.space)="onOptionClick($event)"
       (mouseenter)="onMouseEnter()"
     >
       @if (optionTemplate()) {
@@ -622,228 +630,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], propDecorators: { optionRef: [{ type: i0.ViewChild, args: ['optionElement', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], displayText: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], hover: [{ type: i0.Output, args: ["hover"] }] } });
 
-/**
- * The overlay panel containing the dropdown options.
- * Supports virtual scrolling for large lists.
- *
- * @example
- * ```html
- * <com-dropdown-panel
- *   [options]="filteredOptions()"
- *   [maxHeight]="'300px'"
- *   [virtualScrollEnabled]="true"
- * >
- *   <ng-content />
- * </com-dropdown-panel>
- * ```
- *
- * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`,
- *         `--color-muted-foreground`, `--radius-overlay`
- */
-class ComDropdownPanel {
-    /** Reference to the panel element. */
-    panelRef = viewChild('panelElement', ...(ngDevMode ? [{ debugName: "panelRef" }] : []));
-    /** Reference to the virtual scroll viewport (when enabled). */
-    viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
-    /** Unique identifier for the panel. */
-    panelId = input('', ...(ngDevMode ? [{ debugName: "panelId" }] : []));
-    /** The processed options to display. */
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /** Maximum height of the panel. */
-    maxHeight = input('256px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
-    /** Whether multiple selection is enabled. */
-    multiselectable = input(false, ...(ngDevMode ? [{ debugName: "multiselectable" }] : []));
-    /** Size variant for styling. */
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    /** Additional CSS classes to apply to the panel. */
-    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
-    /** Whether virtual scrolling is enabled. */
-    virtualScrollEnabled = input(false, ...(ngDevMode ? [{ debugName: "virtualScrollEnabled" }] : []));
-    /** Item size for virtual scrolling (in pixels). */
-    itemSize = input(40, ...(ngDevMode ? [{ debugName: "itemSize" }] : []));
-    /** The current search query (for empty state context). */
-    searchQuery = input('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
-    /** Custom empty state text. */
-    emptyText = input('No options available', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
-    /** Template for rendering each option. */
-    optionTemplate = input.required(...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
-    /** Custom template for the empty state. */
-    emptyTemplate = input(null, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
-    /** Emitted when the panel is scrolled. */
-    scrolled = output();
-    /** Whether to show the empty state. */
-    showEmpty = computed(() => this.options().length === 0, ...(ngDevMode ? [{ debugName: "showEmpty" }] : []));
-    /** Computed CSS classes for the panel. */
-    panelClasses = computed(() => {
-        const baseClasses = dropdownPanelVariants({ size: this.size() });
-        return mergeClasses(baseClasses, this.panelClass());
-    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
-    /** Computed CSS classes for the empty state. */
-    emptyClasses = computed(() => {
-        return dropdownEmptyVariants({ size: this.size() });
-    }, ...(ngDevMode ? [{ debugName: "emptyClasses" }] : []));
-    /** Template context for the empty state. */
-    emptyContext = computed(() => ({
-        $implicit: this.searchQuery(),
-    }), ...(ngDevMode ? [{ debugName: "emptyContext" }] : []));
-    /** Track function for options. */
-    trackByFn(_index, option) {
-        return option.id;
-    }
-    /** Scrolls to a specific index. */
-    scrollToIndex(index) {
-        const vp = this.viewport();
-        if (this.virtualScrollEnabled() && vp) {
-            vp.scrollToIndex(index);
-        }
-        else {
-            const panelEl = this.panelRef()?.nativeElement;
-            const optionEl = panelEl?.querySelector(`[data-index="${index}"]`);
-            optionEl?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-        }
-    }
-    /** Scrolls an option into view. */
-    scrollOptionIntoView(optionElement) {
-        optionElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdownPanel, isStandalone: true, selector: "com-dropdown-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollEnabled: { classPropertyName: "virtualScrollEnabled", publicName: "virtualScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: true, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolled: "scrolled" }, host: { classAttribute: "com-dropdown-panel-host block" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelElement"], descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], exportAs: ["comDropdownPanel"], ngImport: i0, template: `
-    <div
-      #panelElement
-      [class]="panelClasses()"
-      [attr.role]="'listbox'"
-      [attr.aria-multiselectable]="multiselectable() || null"
-      [attr.id]="panelId()"
-    >
-      <!-- Search slot -->
-      <ng-content select="[comDropdownSearch]" />
-
-      <!-- Options container -->
-      @if (virtualScrollEnabled()) {
-        <cdk-virtual-scroll-viewport
-          [itemSize]="itemSize()"
-          [maxBufferPx]="400"
-          [minBufferPx]="200"
-          [style.height]="maxHeight()"
-          class="overflow-auto"
-        >
-          <div
-            *cdkVirtualFor="let option of options(); trackBy: trackByFn; let i = index"
-            [attr.data-index]="i"
-          >
-            <ng-container
-              [ngTemplateOutlet]="optionTemplate()"
-              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-            />
-          </div>
-        </cdk-virtual-scroll-viewport>
-      } @else {
-        <div
-          class="overflow-auto"
-          [style.maxHeight]="maxHeight()"
-        >
-          @for (option of options(); track option.id; let i = $index) {
-            <ng-container
-              [ngTemplateOutlet]="optionTemplate()"
-              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-            />
-          }
-        </div>
-      }
-
-      <!-- Empty state -->
-      @if (showEmpty()) {
-        @if (emptyTemplate()) {
-          <ng-container
-            [ngTemplateOutlet]="emptyTemplate()!"
-            [ngTemplateOutletContext]="emptyContext()"
-          />
-        } @else {
-          <div [class]="emptyClasses()">
-            {{ emptyText() }}
-          </div>
-        }
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownPanel, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'com-dropdown-panel',
-                    exportAs: 'comDropdownPanel',
-                    template: `
-    <div
-      #panelElement
-      [class]="panelClasses()"
-      [attr.role]="'listbox'"
-      [attr.aria-multiselectable]="multiselectable() || null"
-      [attr.id]="panelId()"
-    >
-      <!-- Search slot -->
-      <ng-content select="[comDropdownSearch]" />
-
-      <!-- Options container -->
-      @if (virtualScrollEnabled()) {
-        <cdk-virtual-scroll-viewport
-          [itemSize]="itemSize()"
-          [maxBufferPx]="400"
-          [minBufferPx]="200"
-          [style.height]="maxHeight()"
-          class="overflow-auto"
-        >
-          <div
-            *cdkVirtualFor="let option of options(); trackBy: trackByFn; let i = index"
-            [attr.data-index]="i"
-          >
-            <ng-container
-              [ngTemplateOutlet]="optionTemplate()"
-              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-            />
-          </div>
-        </cdk-virtual-scroll-viewport>
-      } @else {
-        <div
-          class="overflow-auto"
-          [style.maxHeight]="maxHeight()"
-        >
-          @for (option of options(); track option.id; let i = $index) {
-            <ng-container
-              [ngTemplateOutlet]="optionTemplate()"
-              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-            />
-          }
-        </div>
-      }
-
-      <!-- Empty state -->
-      @if (showEmpty()) {
-        @if (emptyTemplate()) {
-          <ng-container
-            [ngTemplateOutlet]="emptyTemplate()!"
-            [ngTemplateOutletContext]="emptyContext()"
-          />
-        } @else {
-          <div [class]="emptyClasses()">
-            {{ emptyText() }}
-          </div>
-        }
-      }
-    </div>
-  `,
-                    imports: [
-                        NgTemplateOutlet,
-                        CdkVirtualScrollViewport,
-                        CdkFixedSizeVirtualScroll,
-                        CdkVirtualForOf,
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'com-dropdown-panel-host block',
-                    },
-                }]
-        }], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panelElement', { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], multiselectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselectable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], virtualScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollEnabled", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: true }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], scrolled: [{ type: i0.Output, args: ["scrolled"] }] } });
-
 /**
  * Search input component for filtering dropdown options.
  * Includes debouncing for better performance.
@@ -1305,6 +1091,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * Directive to mark a template as the custom option template.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()">
@@ -1342,6 +1130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * Directive to mark a template as the custom selected value template.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()">
@@ -1381,6 +1171,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * Directive to mark a template as the custom empty state template.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()" [searchable]="true">
@@ -1416,6 +1208,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * Directive to mark a template as the custom group header template.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()" [groupBy]="groupByDepartment">
@@ -1451,6 +1245,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * Directive to mark a template as the custom tag template (multi-select mode).
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()" [multiple]="true">
@@ -1584,16 +1380,18 @@ class ComDropdown {
     triggerRef = viewChild.required('triggerElement');
     /** Reference to the panel template. */
     panelTemplateRef = viewChild.required('panelTemplate');
+    /** Reference to the virtual scroll viewport (when enabled). */
+    virtualViewport = viewChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "virtualViewport" }] : []));
     /** Content query for custom option template. */
-    optionTemplate = contentChild((ComDropdownOptionTpl), ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+    optionTemplate = contentChild(ComDropdownOptionTpl, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
     /** Content query for custom selected template. */
-    selectedTemplate = contentChild((ComDropdownSelectedTpl), ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : []));
+    selectedTemplate = contentChild(ComDropdownSelectedTpl, ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : []));
     /** Content query for custom empty template. */
     emptyTemplate = contentChild(ComDropdownEmptyTpl, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
     /** Content query for custom group template. */
     groupTemplate = contentChild(ComDropdownGroupTpl, ...(ngDevMode ? [{ debugName: "groupTemplate" }] : []));
     /** Content query for custom tag template. */
-    tagTemplate = contentChild((ComDropdownTagTpl), ...(ngDevMode ? [{ debugName: "tagTemplate" }] : []));
+    tagTemplate = contentChild(ComDropdownTagTpl, ...(ngDevMode ? [{ debugName: "tagTemplate" }] : []));
     /** Overlay reference. */
     overlayRef = null;
     /** Unique ID for the dropdown. */
@@ -1612,7 +1410,7 @@ class ComDropdown {
     /** Search input placeholder. */
     searchPlaceholder = input('Search...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
     /** Disable the dropdown. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /** Mark as required. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     /** Show clear button. */
@@ -1643,6 +1441,8 @@ class ComDropdown {
     searchDebounceMs = input(300, ...(ngDevMode ? [{ debugName: "searchDebounceMs" }] : []));
     /** Virtual scroll threshold. */
     virtualScrollThreshold = input(VIRTUAL_SCROLL_THRESHOLD, ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : []));
+    /** Item size in pixels for virtual scrolling. */
+    virtualScrollItemSize = input(40, ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : []));
     /** Maximum number of tags to display in multi-select mode. Set to null for no limit. */
     maxVisibleTags = input(2, ...(ngDevMode ? [{ debugName: "maxVisibleTags" }] : []));
     /** Custom error state matcher for determining when to show errors. */
@@ -1838,7 +1638,7 @@ class ComDropdown {
     }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
     /** Computed panel classes. */
     panelClasses = computed(() => {
-        return mergeClasses('w-full z-50 overflow-hidden rounded-overlay border border-border-subtle bg-popover text-popover-foreground shadow-lg outline-none', this.panelClass());
+        return mergeClasses('w-full z-50 overflow-hidden rounded-overlay border border-border-subtle bg-popover text-popover-foreground shadow-overlay outline-none', this.panelClass());
     }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
     /** Computed chevron classes. */
     chevronClasses = computed(() => {
@@ -1874,8 +1674,7 @@ class ComDropdown {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        // Disabled state is handled via the disabled input
-        // When using forms, the form control's disabled state takes precedence
+        this.disabled.set(isDisabled);
     }
     // ============ FormFieldControl IMPLEMENTATION ============
     /**
@@ -2042,6 +1841,9 @@ class ComDropdown {
                 break;
             case 'Enter':
             case ' ':
+                if (event.key === ' ' && this.searchable() && event.target instanceof HTMLInputElement) {
+                    return;
+                }
                 event.preventDefault();
                 this.selectActiveOption();
                 break;
@@ -2109,6 +1911,10 @@ class ComDropdown {
     trackByValue(item, _index) {
         return item;
     }
+    /** Track function for virtual scroll options. */
+    trackByOption(_index, option) {
+        return option.id;
+    }
     getGlobalIndex(groupKey, localIndex) {
         const groups = this.groupedOptions();
         let globalIndex = 0;
@@ -2132,7 +1938,7 @@ class ComDropdown {
             .withPositions(DEFAULT_POSITIONS)
             .withFlexibleDimensions(false)
             .withPush(true);
-        const hostWidth = hostEl.getBoundingClientRect().width;
+        const hostWidth = hostEl.getBoundingClientRect?.()?.width ?? 0;
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
@@ -2233,20 +2039,37 @@ class ComDropdown {
         const targetOption = options[nextIndex];
         if (targetOption) {
             this.activeOptionId.set(targetOption.id);
+            this.scrollActiveOptionIntoView(nextIndex, targetOption.id);
         }
     }
     navigateToFirst() {
         const options = this.groupBy() ? this.flattenGroupedOptions() : this.filteredOptions();
         const firstEnabled = options.find((opt) => !opt.disabled);
         if (firstEnabled) {
+            const index = options.indexOf(firstEnabled);
             this.activeOptionId.set(firstEnabled.id);
+            this.scrollActiveOptionIntoView(index, firstEnabled.id);
         }
     }
     navigateToLast() {
         const options = this.groupBy() ? this.flattenGroupedOptions() : this.filteredOptions();
         const lastEnabled = [...options].reverse().find((opt) => !opt.disabled);
         if (lastEnabled) {
+            const index = options.indexOf(lastEnabled);
             this.activeOptionId.set(lastEnabled.id);
+            this.scrollActiveOptionIntoView(index, lastEnabled.id);
+        }
+    }
+    /** Scrolls the active option into view, using virtual viewport or native scroll. */
+    scrollActiveOptionIntoView(index, optionId) {
+        const viewport = this.virtualViewport();
+        if (viewport) {
+            viewport.scrollToIndex(index);
+        }
+        else {
+            const panelEl = this.overlayRef?.overlayElement;
+            const optionEl = panelEl?.querySelector(`[id="${optionId}"]`);
+            optionEl?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
         }
     }
     selectActiveOption() {
@@ -2280,7 +2103,7 @@ class ComDropdown {
         this.liveAnnouncer.announce(message, 'polite');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdown, isStandalone: true, selector: "com-dropdown", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceMs: { classPropertyName: "searchDebounceMs", publicName: "searchDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleTags: { classPropertyName: "maxVisibleTags", publicName: "maxVisibleTags", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", searchChange: "searchChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-dropdown-disabled": "disabled()", "class.com-dropdown-open": "isOpen()" }, classAttribute: "com-dropdown-host inline-block" }, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComDropdown) }], queries: [{ propertyName: "optionTemplate", first: true, predicate: (ComDropdownOptionTpl), descendants: true, isSignal: true }, { propertyName: "selectedTemplate", first: true, predicate: (ComDropdownSelectedTpl), descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ComDropdownEmptyTpl, descendants: true, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ComDropdownGroupTpl, descendants: true, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: (ComDropdownTagTpl), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], exportAs: ["comDropdown"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdown, isStandalone: true, selector: "com-dropdown", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceMs: { classPropertyName: "searchDebounceMs", publicName: "searchDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleTags: { classPropertyName: "maxVisibleTags", publicName: "maxVisibleTags", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange", searchChange: "searchChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-dropdown-disabled": "disabled()", "class.com-dropdown-open": "isOpen()" }, classAttribute: "com-dropdown-host inline-block" }, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComDropdown) }], queries: [{ propertyName: "optionTemplate", first: true, predicate: ComDropdownOptionTpl, descendants: true, isSignal: true }, { propertyName: "selectedTemplate", first: true, predicate: ComDropdownSelectedTpl, descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ComDropdownEmptyTpl, descendants: true, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ComDropdownGroupTpl, descendants: true, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: ComDropdownTagTpl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "virtualViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], exportAs: ["comDropdown"], ngImport: i0, template: `
     <!-- Trigger button -->
     <button
       #triggerElement
@@ -2295,6 +2118,7 @@ class ComDropdown {
       [attr.aria-required]="required() || null"
       [attr.aria-invalid]="effectiveState() === 'error' || null"
       [attr.aria-describedby]="ariaDescribedBy()"
+      [attr.aria-label]="hasValue() ? null : placeholder()"
       [attr.aria-disabled]="disabled() || null"
       [attr.tabindex]="disabled() ? -1 : 0"
       [disabled]="disabled()"
@@ -2386,6 +2210,7 @@ class ComDropdown {
         [class]="panelClasses()"
         [attr.id]="panelId()"
         [attr.role]="'listbox'"
+        tabindex="-1"
         [attr.aria-multiselectable]="multiple() || null"
         [attr.aria-label]="placeholder()"
         (keydown)="onPanelKeydown($event)"
@@ -2402,28 +2227,71 @@ class ComDropdown {
         }
 
         <!-- Options list -->
-        <div
-          class="overflow-auto"
-          [style.maxHeight]="maxHeight()"
-        >
-          @if (groupedOptions().length > 0) {
-            @for (group of groupedOptions(); track group.key) {
-              <!-- Group header -->
-              <com-dropdown-group
-                [label]="group.key"
-                [count]="group.options.length"
-                [expanded]="group.expanded"
-                [size]="size()"
-                [groupTemplate]="groupTemplate()?.templateRef ?? null"
-              />
+        @if (virtualScrollEnabled() && groupedOptions().length === 0 && filteredOptions().length > 0) {
+          <!-- Virtual scrolling for large ungrouped lists -->
+          <cdk-virtual-scroll-viewport
+            [itemSize]="virtualScrollItemSize()"
+            [maxBufferPx]="400"
+            [minBufferPx]="200"
+            [style.height]="maxHeight()"
+            class="overflow-auto"
+          >
+            <com-dropdown-option
+              *cdkVirtualFor="let option of filteredOptions(); trackBy: trackByOption; let i = index"
+              [value]="option.value"
+              [displayText]="option.displayText"
+              [id]="option.id"
+              [index]="i"
+              [selected]="isSelected(option.value)"
+              [active]="isActive(option.id)"
+              [disabled]="option.disabled"
+              [size]="size()"
+              [optionTemplate]="optionTemplate()?.templateRef ?? null"
+              (select)="selectOption($event)"
+              (hover)="onOptionHover(option.id)"
+            />
+          </cdk-virtual-scroll-viewport>
+        } @else {
+          <!-- Standard rendering for small lists and grouped options -->
+          <div
+            class="overflow-auto"
+            [style.maxHeight]="maxHeight()"
+          >
+            @if (groupedOptions().length > 0) {
+              @for (group of groupedOptions(); track group.key) {
+                <!-- Group header -->
+                <com-dropdown-group
+                  [label]="group.key"
+                  [count]="group.options.length"
+                  [expanded]="group.expanded"
+                  [size]="size()"
+                  [groupTemplate]="groupTemplate()?.templateRef ?? null"
+                />
 
-              <!-- Group options -->
-              @for (option of group.options; track option.id; let i = $index) {
+                <!-- Group options -->
+                @for (option of group.options; track option.id; let i = $index) {
+                  <com-dropdown-option
+                    [value]="option.value"
+                    [displayText]="option.displayText"
+                    [id]="option.id"
+                    [index]="getGlobalIndex(group.key, i)"
+                    [selected]="isSelected(option.value)"
+                    [active]="isActive(option.id)"
+                    [disabled]="option.disabled"
+                    [size]="size()"
+                    [optionTemplate]="optionTemplate()?.templateRef ?? null"
+                    (select)="selectOption($event)"
+                    (hover)="onOptionHover(option.id)"
+                  />
+                }
+              }
+            } @else if (filteredOptions().length > 0) {
+              @for (option of filteredOptions(); track option.id; let i = $index) {
                 <com-dropdown-option
                   [value]="option.value"
                   [displayText]="option.displayText"
                   [id]="option.id"
-                  [index]="getGlobalIndex(group.key, i)"
+                  [index]="i"
                   [selected]="isSelected(option.value)"
                   [active]="isActive(option.id)"
                   [disabled]="option.disabled"
@@ -2433,41 +2301,25 @@ class ComDropdown {
                   (hover)="onOptionHover(option.id)"
                 />
               }
-            }
-          } @else if (filteredOptions().length > 0) {
-            @for (option of filteredOptions(); track option.id; let i = $index) {
-              <com-dropdown-option
-                [value]="option.value"
-                [displayText]="option.displayText"
-                [id]="option.id"
-                [index]="i"
-                [selected]="isSelected(option.value)"
-                [active]="isActive(option.id)"
-                [disabled]="option.disabled"
-                [size]="size()"
-                [optionTemplate]="optionTemplate()?.templateRef ?? null"
-                (select)="selectOption($event)"
-                (hover)="onOptionHover(option.id)"
-              />
-            }
-          } @else {
-            <!-- Empty state -->
-            @if (emptyTemplate()) {
-              <ng-container
-                [ngTemplateOutlet]="emptyTemplate()!.templateRef"
-                [ngTemplateOutletContext]="emptyContext()"
-              />
             } @else {
-              <div class="flex items-center justify-center px-3 py-6 text-muted-foreground">
-                @if (searchQuery()) {
-                  No results for "{{ searchQuery() }}"
-                } @else {
-                  No options available
-                }
-              </div>
+              <!-- Empty state -->
+              @if (emptyTemplate()) {
+                <ng-container
+                  [ngTemplateOutlet]="emptyTemplate()!.templateRef"
+                  [ngTemplateOutletContext]="emptyContext()"
+                />
+              } @else {
+                <div class="flex items-center justify-center px-3 py-6 text-muted-foreground">
+                  @if (searchQuery()) {
+                    No results for "{{ searchQuery() }}"
+                  } @else {
+                    No options available
+                  }
+                </div>
+              }
             }
-          }
-        </div>
+          </div>
+        }
       </div>
     </ng-template>
 
@@ -2475,7 +2327,7 @@ class ComDropdown {
     <div class="sr-only" aria-live="polite" aria-atomic="true">
       {{ liveAnnouncement() }}
     </div>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: ComDropdownOption, selector: "com-dropdown-option", inputs: ["value", "displayText", "id", "index", "selected", "active", "disabled", "size", "optionTemplate", "class"], outputs: ["select", "hover"], exportAs: ["comDropdownOption"] }, { kind: "component", type: ComDropdownSearch, selector: "com-dropdown-search", inputs: ["placeholder", "ariaLabel", "disabled", "debounceMs", "size", "class"], outputs: ["searchChange", "keyNav"], exportAs: ["comDropdownSearch"] }, { kind: "component", type: ComDropdownTag, selector: "com-dropdown-tag", inputs: ["value", "displayText", "index", "disabled", "size", "variant", "class", "tagTemplate"], outputs: ["remove"], exportAs: ["comDropdownTag"] }, { kind: "component", type: ComDropdownGroup, selector: "com-dropdown-group", inputs: ["label", "count", "expanded", "showCount", "size", "class", "groupTemplate"], exportAs: ["comDropdownGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ComDropdownOption, selector: "com-dropdown-option", inputs: ["value", "displayText", "id", "index", "selected", "active", "disabled", "size", "optionTemplate", "class"], outputs: ["select", "hover"], exportAs: ["comDropdownOption"] }, { kind: "component", type: ComDropdownSearch, selector: "com-dropdown-search", inputs: ["placeholder", "ariaLabel", "disabled", "debounceMs", "size", "class"], outputs: ["searchChange", "keyNav"], exportAs: ["comDropdownSearch"] }, { kind: "component", type: ComDropdownTag, selector: "com-dropdown-tag", inputs: ["value", "displayText", "index", "disabled", "size", "variant", "class", "tagTemplate"], outputs: ["remove"], exportAs: ["comDropdownTag"] }, { kind: "component", type: ComDropdownGroup, selector: "com-dropdown-group", inputs: ["label", "count", "expanded", "showCount", "size", "class", "groupTemplate"], exportAs: ["comDropdownGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdown, decorators: [{
             type: Component,
@@ -2494,6 +2346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       [attr.aria-required]="required() || null"
       [attr.aria-invalid]="effectiveState() === 'error' || null"
       [attr.aria-describedby]="ariaDescribedBy()"
+      [attr.aria-label]="hasValue() ? null : placeholder()"
       [attr.aria-disabled]="disabled() || null"
       [attr.tabindex]="disabled() ? -1 : 0"
       [disabled]="disabled()"
@@ -2585,6 +2438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [class]="panelClasses()"
         [attr.id]="panelId()"
         [attr.role]="'listbox'"
+        tabindex="-1"
         [attr.aria-multiselectable]="multiple() || null"
         [attr.aria-label]="placeholder()"
         (keydown)="onPanelKeydown($event)"
@@ -2601,28 +2455,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }
 
         <!-- Options list -->
-        <div
-          class="overflow-auto"
-          [style.maxHeight]="maxHeight()"
-        >
-          @if (groupedOptions().length > 0) {
-            @for (group of groupedOptions(); track group.key) {
-              <!-- Group header -->
-              <com-dropdown-group
-                [label]="group.key"
-                [count]="group.options.length"
-                [expanded]="group.expanded"
-                [size]="size()"
-                [groupTemplate]="groupTemplate()?.templateRef ?? null"
-              />
+        @if (virtualScrollEnabled() && groupedOptions().length === 0 && filteredOptions().length > 0) {
+          <!-- Virtual scrolling for large ungrouped lists -->
+          <cdk-virtual-scroll-viewport
+            [itemSize]="virtualScrollItemSize()"
+            [maxBufferPx]="400"
+            [minBufferPx]="200"
+            [style.height]="maxHeight()"
+            class="overflow-auto"
+          >
+            <com-dropdown-option
+              *cdkVirtualFor="let option of filteredOptions(); trackBy: trackByOption; let i = index"
+              [value]="option.value"
+              [displayText]="option.displayText"
+              [id]="option.id"
+              [index]="i"
+              [selected]="isSelected(option.value)"
+              [active]="isActive(option.id)"
+              [disabled]="option.disabled"
+              [size]="size()"
+              [optionTemplate]="optionTemplate()?.templateRef ?? null"
+              (select)="selectOption($event)"
+              (hover)="onOptionHover(option.id)"
+            />
+          </cdk-virtual-scroll-viewport>
+        } @else {
+          <!-- Standard rendering for small lists and grouped options -->
+          <div
+            class="overflow-auto"
+            [style.maxHeight]="maxHeight()"
+          >
+            @if (groupedOptions().length > 0) {
+              @for (group of groupedOptions(); track group.key) {
+                <!-- Group header -->
+                <com-dropdown-group
+                  [label]="group.key"
+                  [count]="group.options.length"
+                  [expanded]="group.expanded"
+                  [size]="size()"
+                  [groupTemplate]="groupTemplate()?.templateRef ?? null"
+                />
 
-              <!-- Group options -->
-              @for (option of group.options; track option.id; let i = $index) {
+                <!-- Group options -->
+                @for (option of group.options; track option.id; let i = $index) {
+                  <com-dropdown-option
+                    [value]="option.value"
+                    [displayText]="option.displayText"
+                    [id]="option.id"
+                    [index]="getGlobalIndex(group.key, i)"
+                    [selected]="isSelected(option.value)"
+                    [active]="isActive(option.id)"
+                    [disabled]="option.disabled"
+                    [size]="size()"
+                    [optionTemplate]="optionTemplate()?.templateRef ?? null"
+                    (select)="selectOption($event)"
+                    (hover)="onOptionHover(option.id)"
+                  />
+                }
+              }
+            } @else if (filteredOptions().length > 0) {
+              @for (option of filteredOptions(); track option.id; let i = $index) {
                 <com-dropdown-option
                   [value]="option.value"
                   [displayText]="option.displayText"
                   [id]="option.id"
-                  [index]="getGlobalIndex(group.key, i)"
+                  [index]="i"
                   [selected]="isSelected(option.value)"
                   [active]="isActive(option.id)"
                   [disabled]="option.disabled"
@@ -2632,41 +2529,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                   (hover)="onOptionHover(option.id)"
                 />
               }
-            }
-          } @else if (filteredOptions().length > 0) {
-            @for (option of filteredOptions(); track option.id; let i = $index) {
-              <com-dropdown-option
-                [value]="option.value"
-                [displayText]="option.displayText"
-                [id]="option.id"
-                [index]="i"
-                [selected]="isSelected(option.value)"
-                [active]="isActive(option.id)"
-                [disabled]="option.disabled"
-                [size]="size()"
-                [optionTemplate]="optionTemplate()?.templateRef ?? null"
-                (select)="selectOption($event)"
-                (hover)="onOptionHover(option.id)"
-              />
-            }
-          } @else {
-            <!-- Empty state -->
-            @if (emptyTemplate()) {
-              <ng-container
-                [ngTemplateOutlet]="emptyTemplate()!.templateRef"
-                [ngTemplateOutletContext]="emptyContext()"
-              />
             } @else {
-              <div class="flex items-center justify-center px-3 py-6 text-muted-foreground">
-                @if (searchQuery()) {
-                  No results for "{{ searchQuery() }}"
-                } @else {
-                  No options available
-                }
-              </div>
+              <!-- Empty state -->
+              @if (emptyTemplate()) {
+                <ng-container
+                  [ngTemplateOutlet]="emptyTemplate()!.templateRef"
+                  [ngTemplateOutletContext]="emptyContext()"
+                />
+              } @else {
+                <div class="flex items-center justify-center px-3 py-6 text-muted-foreground">
+                  @if (searchQuery()) {
+                    No results for "{{ searchQuery() }}"
+                  } @else {
+                    No options available
+                  }
+                </div>
+              }
             }
-          }
-        </div>
+          </div>
+        }
       </div>
     </ng-template>
 
@@ -2677,6 +2558,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
   `, imports: [
                         NgTemplateOutlet,
                         OverlayModule,
+                        CdkVirtualScrollViewport,
+                        CdkFixedSizeVirtualScroll,
+                        CdkVirtualForOf,
                         ComDropdownOption,
                         ComDropdownSearch,
                         ComDropdownTag,
@@ -2686,7 +2570,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[class.com-dropdown-disabled]': 'disabled()',
                         '[class.com-dropdown-open]': 'isOpen()',
                     }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownOptionTpl), { isSignal: true }] }], selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownSelectedTpl), { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownEmptyTpl), { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownGroupTpl), { isSignal: true }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownTagTpl), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], filterWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterWith", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], searchDebounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceMs", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], maxVisibleTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleTags", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], virtualViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownOptionTpl), { isSignal: true }] }], selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownSelectedTpl), { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownEmptyTpl), { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownGroupTpl), { isSignal: true }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownTagTpl), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], filterWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterWith", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], searchDebounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceMs", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], maxVisibleTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleTags", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * The overlay panel containing the dropdown options.
+ * Supports virtual scrolling for large lists.
+ *
+ * @example
+ * ```html
+ * <com-dropdown-panel
+ *   [options]="filteredOptions()"
+ *   [maxHeight]="'300px'"
+ *   [virtualScrollEnabled]="true"
+ * >
+ *   <ng-content />
+ * </com-dropdown-panel>
+ * ```
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`,
+ *         `--color-muted-foreground`, `--radius-overlay`
+ */
+class ComDropdownPanel {
+    /** Reference to the panel element. */
+    panelRef = viewChild('panelElement', ...(ngDevMode ? [{ debugName: "panelRef" }] : []));
+    /** Reference to the virtual scroll viewport (when enabled). */
+    viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
+    /** Unique identifier for the panel. */
+    panelId = input('', ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    /** The processed options to display. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Maximum height of the panel. */
+    maxHeight = input('256px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
+    /** Whether multiple selection is enabled. */
+    multiselectable = input(false, ...(ngDevMode ? [{ debugName: "multiselectable" }] : []));
+    /** Size variant for styling. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Additional CSS classes to apply to the panel. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    /** Whether virtual scrolling is enabled. */
+    virtualScrollEnabled = input(false, ...(ngDevMode ? [{ debugName: "virtualScrollEnabled" }] : []));
+    /** Item size for virtual scrolling (in pixels). */
+    itemSize = input(40, ...(ngDevMode ? [{ debugName: "itemSize" }] : []));
+    /** The current search query (for empty state context). */
+    searchQuery = input('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    /** Custom empty state text. */
+    emptyText = input('No options available', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Template for rendering each option. */
+    optionTemplate = input.required(...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+    /** Custom template for the empty state. */
+    emptyTemplate = input(null, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
+    /** Emitted when the panel is scrolled. */
+    scrolled = output();
+    /** Whether to show the empty state. */
+    showEmpty = computed(() => this.options().length === 0, ...(ngDevMode ? [{ debugName: "showEmpty" }] : []));
+    /** Computed CSS classes for the panel. */
+    panelClasses = computed(() => {
+        const baseClasses = dropdownPanelVariants({ size: this.size() });
+        return mergeClasses(baseClasses, this.panelClass());
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    /** Computed CSS classes for the empty state. */
+    emptyClasses = computed(() => {
+        return dropdownEmptyVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "emptyClasses" }] : []));
+    /** Template context for the empty state. */
+    emptyContext = computed(() => ({
+        $implicit: this.searchQuery(),
+    }), ...(ngDevMode ? [{ debugName: "emptyContext" }] : []));
+    /** Track function for options. */
+    trackByFn(_index, option) {
+        return option.id;
+    }
+    /** Scrolls to a specific index. */
+    scrollToIndex(index) {
+        const vp = this.viewport();
+        if (this.virtualScrollEnabled() && vp) {
+            vp.scrollToIndex(index);
+        }
+        else {
+            const panelEl = this.panelRef()?.nativeElement;
+            const optionEl = panelEl?.querySelector(`[data-index="${index}"]`);
+            optionEl?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        }
+    }
+    /** Scrolls an option into view. */
+    scrollOptionIntoView(optionElement) {
+        optionElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdownPanel, isStandalone: true, selector: "com-dropdown-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollEnabled: { classPropertyName: "virtualScrollEnabled", publicName: "virtualScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: true, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolled: "scrolled" }, host: { classAttribute: "com-dropdown-panel-host block" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelElement"], descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], exportAs: ["comDropdownPanel"], ngImport: i0, template: `
+    <div
+      #panelElement
+      [class]="panelClasses()"
+      [attr.role]="'listbox'"
+      [attr.aria-multiselectable]="multiselectable() || null"
+      [attr.id]="panelId()"
+    >
+      <!-- Search slot -->
+      <ng-content select="[comDropdownSearch]" />
+
+      <!-- Options container -->
+      @if (virtualScrollEnabled()) {
+        <cdk-virtual-scroll-viewport
+          [itemSize]="itemSize()"
+          [maxBufferPx]="400"
+          [minBufferPx]="200"
+          [style.height]="maxHeight()"
+          class="overflow-auto"
+        >
+          <div
+            *cdkVirtualFor="let option of options(); trackBy: trackByFn; let i = index"
+            [attr.data-index]="i"
+          >
+            <ng-container
+              [ngTemplateOutlet]="optionTemplate()"
+              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+            />
+          </div>
+        </cdk-virtual-scroll-viewport>
+      } @else {
+        <div
+          class="overflow-auto"
+          [style.maxHeight]="maxHeight()"
+        >
+          @for (option of options(); track option.id; let i = $index) {
+            <ng-container
+              [ngTemplateOutlet]="optionTemplate()"
+              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+            />
+          }
+        </div>
+      }
+
+      <!-- Empty state -->
+      @if (showEmpty()) {
+        @if (emptyTemplate()) {
+          <ng-container
+            [ngTemplateOutlet]="emptyTemplate()!"
+            [ngTemplateOutletContext]="emptyContext()"
+          />
+        } @else {
+          <div [class]="emptyClasses()">
+            {{ emptyText() }}
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-dropdown-panel',
+                    exportAs: 'comDropdownPanel',
+                    template: `
+    <div
+      #panelElement
+      [class]="panelClasses()"
+      [attr.role]="'listbox'"
+      [attr.aria-multiselectable]="multiselectable() || null"
+      [attr.id]="panelId()"
+    >
+      <!-- Search slot -->
+      <ng-content select="[comDropdownSearch]" />
+
+      <!-- Options container -->
+      @if (virtualScrollEnabled()) {
+        <cdk-virtual-scroll-viewport
+          [itemSize]="itemSize()"
+          [maxBufferPx]="400"
+          [minBufferPx]="200"
+          [style.height]="maxHeight()"
+          class="overflow-auto"
+        >
+          <div
+            *cdkVirtualFor="let option of options(); trackBy: trackByFn; let i = index"
+            [attr.data-index]="i"
+          >
+            <ng-container
+              [ngTemplateOutlet]="optionTemplate()"
+              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+            />
+          </div>
+        </cdk-virtual-scroll-viewport>
+      } @else {
+        <div
+          class="overflow-auto"
+          [style.maxHeight]="maxHeight()"
+        >
+          @for (option of options(); track option.id; let i = $index) {
+            <ng-container
+              [ngTemplateOutlet]="optionTemplate()"
+              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+            />
+          }
+        </div>
+      }
+
+      <!-- Empty state -->
+      @if (showEmpty()) {
+        @if (emptyTemplate()) {
+          <ng-container
+            [ngTemplateOutlet]="emptyTemplate()!"
+            [ngTemplateOutletContext]="emptyContext()"
+          />
+        } @else {
+          <div [class]="emptyClasses()">
+            {{ emptyText() }}
+          </div>
+        }
+      }
+    </div>
+  `,
+                    imports: [
+                        NgTemplateOutlet,
+                        CdkVirtualScrollViewport,
+                        CdkFixedSizeVirtualScroll,
+                        CdkVirtualForOf,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'com-dropdown-panel-host block',
+                    },
+                }]
+        }], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panelElement', { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], multiselectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselectable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], virtualScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollEnabled", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: true }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], scrolled: [{ type: i0.Output, args: ["scrolled"] }] } });
 
 // Public API for the dropdown component
 // Main component