ngx-com 0.0.1 → 0.0.4

package/types/ngx-com-components-collapsible.d.ts

@@ -0,0 +1,379 @@
+import { VariantProps } from 'class-variance-authority';
+import * as i0 from '@angular/core';
+import { TemplateRef, ModelSignal, InputSignalWithTransform, InputSignal, Signal, WritableSignal } from '@angular/core';
+
+/**
+ * Context provided to the trigger template.
+ */
+interface ComCollapsibleTriggerContext {
+    /** Current open state (alias for $implicit). */
+    $implicit: boolean;
+    /** Current open state. */
+    open: boolean;
+    /** Whether the collapsible is disabled. */
+    disabled: boolean;
+    /** Function to toggle the collapsible. */
+    toggle: () => void;
+}
+/**
+ * Context provided to the content template.
+ */
+interface ComCollapsibleContentContext {
+    /** Current open state (alias for $implicit). */
+    $implicit: boolean;
+    /** Current open state. */
+    open: boolean;
+}
+/**
+ * Context provided to the icon template.
+ */
+interface ComCollapsibleIconContext {
+    /** Current open state (alias for $implicit). */
+    $implicit: boolean;
+    /** Current open state. */
+    open: boolean;
+}
+
+/**
+ * Shell variant type for the collapsible container.
+ */
+type CollapsibleVariant = 'card' | 'bordered' | 'flush' | 'ghost' | 'unstyled';
+/**
+ * CVA variants for the collapsible shell (root directive).
+ *
+ * @tokens `--color-border`, `--color-background`, `--color-foreground`, `--shadow-xs`, `--radius-collapsible`
+ */
+declare const collapsibleVariants: (props?: {
+    variant?: CollapsibleVariant;
+}) => string;
+type CollapsibleVariants = VariantProps<typeof collapsibleVariants>;
+
+/**
+ * Trigger variant type for the collapsible trigger.
+ */
+type CollapsibleTriggerVariant = 'ghost' | 'filled' | 'header' | 'unstyled';
+/**
+ * Trigger size type.
+ */
+type CollapsibleTriggerSize = 'sm' | 'default' | 'lg';
+/**
+ * CVA variants for the collapsible trigger directive.
+ *
+ * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-ring`, `--color-disabled-foreground`, `--radius-collapsible`
+ */
+declare const collapsibleTriggerVariants: (props?: {
+    variant?: CollapsibleTriggerVariant;
+    size?: CollapsibleTriggerSize;
+}) => string;
+type CollapsibleTriggerVariants = VariantProps<typeof collapsibleTriggerVariants>;
+
+/**
+ * Directive to mark a template as the custom trigger layout template.
+ * Replaces the inner content of the trigger while preserving ARIA and keyboard handling.
+ *
+ * @example
+ * ```html
+ * <button comCollapsibleTrigger>
+ *   <ng-template comCollapsibleTriggerTpl let-open let-toggle="toggle" let-disabled="disabled">
+ *     <div class="flex items-center gap-3 w-full">
+ *       <span class="h-2 w-2 rounded-full" [class]="open ? 'bg-success' : 'bg-muted'"></span>
+ *       <span class="font-medium">Notifications</span>
+ *       <svg class="com-collapsible-icon h-4 w-4" [attr.data-state]="open ? 'open' : 'closed'">
+ *         <!-- chevron icon -->
+ *       </svg>
+ *     </div>
+ *   </ng-template>
+ * </button>
+ * ```
+ */
+declare class ComCollapsibleTriggerTpl {
+    /** Reference to the template. */
+    readonly templateRef: TemplateRef<ComCollapsibleTriggerContext>;
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir: ComCollapsibleTriggerTpl, ctx: unknown): ctx is ComCollapsibleTriggerContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleTriggerTpl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsibleTriggerTpl, "ng-template[comCollapsibleTriggerTpl]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to mark a template as the custom content chrome template.
+ * Wraps the content with custom chrome (headers, footers, padding).
+ * The grid animation still applies on the host.
+ *
+ * @example
+ * ```html
+ * <com-collapsible-content>
+ *   <ng-template comCollapsibleContentTpl let-open="open">
+ *     <div class="border-t border-border">
+ *       <div class="p-4 space-y-3">
+ *         <!-- Content here -->
+ *       </div>
+ *       <div class="flex justify-end gap-2 px-4 py-3 border-t border-border-subtle bg-muted">
+ *         <button>Reset</button>
+ *         <button>Apply</button>
+ *       </div>
+ *     </div>
+ *   </ng-template>
+ * </com-collapsible-content>
+ * ```
+ */
+declare class ComCollapsibleContentTpl {
+    /** Reference to the template. */
+    readonly templateRef: TemplateRef<ComCollapsibleContentContext>;
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir: ComCollapsibleContentTpl, ctx: unknown): ctx is ComCollapsibleContentContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleContentTpl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsibleContentTpl, "ng-template[comCollapsibleContentTpl]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to mark a template as the custom icon template.
+ * Replaces only the chevron icon inside the default trigger layout.
+ *
+ * @example
+ * ```html
+ * <button comCollapsibleTrigger>
+ *   Settings
+ *   <ng-template comCollapsibleIcon let-open="open">
+ *     <span class="text-muted-foreground text-xs">{{ open ? '▲' : '▼' }}</span>
+ *   </ng-template>
+ * </button>
+ * ```
+ */
+declare class ComCollapsibleIconTpl {
+    /** Reference to the template. */
+    readonly templateRef: TemplateRef<ComCollapsibleIconContext>;
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir: ComCollapsibleIconTpl, ctx: unknown): ctx is ComCollapsibleIconContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleIconTpl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsibleIconTpl, "ng-template[comCollapsibleIcon]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Structural directive for lazy content rendering.
+ * Content is only instantiated on first expand, preserving state on subsequent toggles.
+ *
+ * @example
+ * ```html
+ * <com-collapsible-content>
+ *   <ng-template comCollapsibleLazy>
+ *     <app-heavy-chart [data]="chartData()" />
+ *   </ng-template>
+ * </com-collapsible-content>
+ * ```
+ */
+declare class ComCollapsibleLazy {
+    /** Reference to the template. */
+    readonly templateRef: TemplateRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleLazy, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsibleLazy, "ng-template[comCollapsibleLazy]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Root collapsible directive — manages state and provides shell styling.
+ *
+ * Works as a DI anchor for child directives (trigger, content).
+ * Exposes programmatic control via template reference.
+ *
+ * @tokens `--color-border`, `--color-background`, `--color-foreground`, `--shadow-xs`
+ *
+ * @example Basic usage
+ * ```html
+ * <div comCollapsible variant="card">
+ *   <button comCollapsibleTrigger>Section Title</button>
+ *   <com-collapsible-content>
+ *     <div class="p-4">Content here.</div>
+ *   </com-collapsible-content>
+ * </div>
+ * ```
+ *
+ * @example Two-way binding with external control
+ * ```html
+ * <div comCollapsible [(open)]="sectionOpen" #section="comCollapsible">
+ *   <button comCollapsibleTrigger>Advanced</button>
+ *   <com-collapsible-content>...</com-collapsible-content>
+ * </div>
+ * <button (click)="section.toggle()">Toggle externally</button>
+ * ```
+ */
+declare class ComCollapsible {
+    /** Unique ID for the collapsible instance. */
+    private readonly id;
+    /** ID for the trigger element (used for aria-labelledby). */
+    readonly triggerId: string;
+    /** ID for the content panel (used for aria-controls). */
+    readonly contentId: string;
+    /** Two-way bound open state. */
+    readonly open: ModelSignal<boolean>;
+    /** Disables the collapsible, preventing state changes. */
+    readonly disabled: InputSignalWithTransform<boolean, unknown>;
+    /** Shell preset variant. */
+    readonly variant: InputSignal<CollapsibleVariant>;
+    /** Consumer CSS classes — merged with variant classes. */
+    readonly userClass: InputSignal<string>;
+    /** @internal Computed host class from CVA + consumer overrides. */
+    protected readonly computedClass: Signal<string>;
+    /** Returns the current open state. */
+    isOpen(): boolean;
+    /** Returns the current disabled state. */
+    isDisabled(): boolean;
+    /** Toggles the open state (if not disabled). */
+    toggle(): void;
+    /** Expands the collapsible (if not disabled). */
+    expand(): void;
+    /** Collapses the collapsible (if not disabled). */
+    collapse(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsible, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsible, "[comCollapsible]", ["comCollapsible"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, never, true, never>;
+}
+
+/**
+ * Collapsible trigger component — handles toggle interaction, ARIA, keyboard, and template rendering.
+ *
+ * Uses attribute selector so it can be applied to `<button>` or any focusable element.
+ * Injects the parent `ComCollapsible` directive to access state.
+ * Supports custom trigger layout via `comCollapsibleTriggerTpl` and custom icon via `comCollapsibleIcon`.
+ *
+ * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-ring`, `--color-disabled-foreground`
+ *
+ * @example Default trigger with auto icon
+ * ```html
+ * <button comCollapsibleTrigger>Section Title</button>
+ * ```
+ *
+ * @example Without icon
+ * ```html
+ * <button comCollapsibleTrigger [showIcon]="false">Section Title</button>
+ * ```
+ *
+ * @example With custom icon
+ * ```html
+ * <button comCollapsibleTrigger>
+ *   Settings
+ *   <ng-template comCollapsibleIcon let-open="open">
+ *     <span class="text-xs text-muted-foreground">{{ open ? '▲' : '▼' }}</span>
+ *   </ng-template>
+ * </button>
+ * ```
+ *
+ * @example Full trigger layout override
+ * ```html
+ * <button comCollapsibleTrigger>
+ *   <ng-template comCollapsibleTriggerTpl let-open let-toggle="toggle">
+ *     <div class="flex items-center gap-3 w-full">
+ *       <span class="h-2 w-2 rounded-full" [class]="open ? 'bg-success' : 'bg-muted'"></span>
+ *       <span class="font-medium">Notifications</span>
+ *       <svg class="com-collapsible-icon h-4 w-4" [attr.data-state]="open ? 'open' : 'closed'">
+ *         <!-- chevron -->
+ *       </svg>
+ *     </div>
+ *   </ng-template>
+ * </button>
+ * ```
+ */
+declare class ComCollapsibleTrigger {
+    /** Parent collapsible directive (provides state). */
+    protected readonly collapsible: ComCollapsible;
+    /** Custom trigger layout template (replaces inner content). */
+    protected readonly triggerTpl: Signal<ComCollapsibleTriggerTpl | undefined>;
+    /** Custom icon template (replaces default chevron). */
+    protected readonly iconTpl: Signal<ComCollapsibleIconTpl | undefined>;
+    /** Trigger preset variant. */
+    readonly variant: InputSignal<CollapsibleTriggerVariant>;
+    /** Trigger size. */
+    readonly size: InputSignal<CollapsibleTriggerSize>;
+    /** Show/hide the toggle icon. */
+    readonly showIcon: InputSignalWithTransform<boolean, unknown>;
+    /** Consumer CSS classes — merged with variant classes. */
+    readonly userClass: InputSignal<string>;
+    /** @internal Computed host class from CVA + consumer overrides. */
+    protected readonly computedClass: Signal<string>;
+    /** Context for trigger template. */
+    readonly triggerContext: Signal<ComCollapsibleTriggerContext>;
+    /** Context for icon template. */
+    readonly iconContext: Signal<ComCollapsibleIconContext>;
+    /** @internal */
+    protected onClick(event: Event): void;
+    /** @internal */
+    protected onKeydown(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleTrigger, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComCollapsibleTrigger, "[comCollapsibleTrigger]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["triggerTpl", "iconTpl"], ["*"], true, never>;
+}
+
+/**
+ * Collapsible content component — animated panel with region role.
+ *
+ * Uses CSS grid technique for smooth height animation without JS measurement.
+ * Supports lazy rendering via `comCollapsibleLazy` directive.
+ *
+ * @tokens None (structural only — styling is applied via templates or consumer classes)
+ *
+ * @example Basic usage
+ * ```html
+ * <com-collapsible-content>
+ *   <div class="p-4">Content here.</div>
+ * </com-collapsible-content>
+ * ```
+ *
+ * @example With custom duration
+ * ```html
+ * <com-collapsible-content [duration]="300">
+ *   <div class="p-4">Slower animation.</div>
+ * </com-collapsible-content>
+ * ```
+ *
+ * @example With content chrome template
+ * ```html
+ * <com-collapsible-content>
+ *   <ng-template comCollapsibleContentTpl let-open="open">
+ *     <div class="border-t border-border p-4">
+ *       <!-- Content with custom chrome -->
+ *     </div>
+ *   </ng-template>
+ * </com-collapsible-content>
+ * ```
+ *
+ * @example Lazy content
+ * ```html
+ * <com-collapsible-content>
+ *   <ng-template comCollapsibleLazy>
+ *     <app-heavy-component />
+ *   </ng-template>
+ * </com-collapsible-content>
+ * ```
+ */
+declare class ComCollapsibleContent {
+    /** Parent collapsible directive (provides state). */
+    protected readonly collapsible: ComCollapsible;
+    /** Custom content chrome template. */
+    protected readonly contentTpl: Signal<ComCollapsibleContentTpl | undefined>;
+    /** Lazy content template. */
+    protected readonly lazyTpl: Signal<ComCollapsibleLazy | undefined>;
+    /** Track if collapsible has ever been opened (for lazy rendering). */
+    protected readonly hasBeenOpened: WritableSignal<boolean>;
+    /** Transition duration in milliseconds. */
+    readonly duration: InputSignal<number>;
+    /** Consumer CSS classes for the inner wrapper. */
+    readonly userClass: InputSignal<string>;
+    /** @internal Computed inner wrapper class. */
+    protected readonly innerClass: Signal<string>;
+    /** Context for content template. */
+    readonly templateContext: Signal<ComCollapsibleContentContext>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComCollapsibleContent, "com-collapsible-content", never, { "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["contentTpl", "lazyTpl"], ["*"], true, never>;
+}
+
+export { ComCollapsible, ComCollapsibleContent, ComCollapsibleContentTpl, ComCollapsibleIconTpl, ComCollapsibleLazy, ComCollapsibleTrigger, ComCollapsibleTriggerTpl, collapsibleTriggerVariants, collapsibleVariants };
+export type { CollapsibleTriggerSize, CollapsibleTriggerVariant, CollapsibleTriggerVariants, CollapsibleVariant, CollapsibleVariants, ComCollapsibleContentContext, ComCollapsibleIconContext, ComCollapsibleTriggerContext };

package/types/ngx-com-components-confirm.d.ts

@@ -0,0 +1,160 @@
+import * as i0 from '@angular/core';
+import { WritableSignal, InputSignal, InputSignalWithTransform, TemplateRef, OutputEmitterRef } from '@angular/core';
+
+/**
+ * Color variant for the confirm button styling.
+ */
+type ConfirmColor = 'primary' | 'warn';
+/**
+ * Context provided to custom confirmation templates.
+ */
+interface ConfirmTemplateContext {
+    /** The confirmation message. */
+    $implicit: string;
+    /** The dialog title, if provided. */
+    title: string | undefined;
+    /** Function to confirm the action. */
+    confirm: () => void;
+    /** Function to cancel the action. */
+    cancel: () => void;
+    /** Whether an async operation is in progress. */
+    loading: boolean;
+    /** Function to set the loading state. */
+    setLoading: (value: boolean) => void;
+}
+
+/**
+ * Confirmation directive — intercepts clicks and displays a confirmation panel
+ * before allowing the action to proceed.
+ *
+ * The directive acts as an output gate: it captures clicks, shows confirmation UI,
+ * and emits `true` (confirmed) or `false` (cancelled) through its output.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
+ *         `--color-foreground`, `--color-muted-foreground`, `--color-background`,
+ *         `--shadow-lg`, `--radius-popover`
+ *
+ * @example Basic confirmation
+ * ```html
+ * <button comButton (comConfirm)="onDelete($event)" confirmMessage="Delete this item?">
+ *   Delete
+ * </button>
+ * ```
+ *
+ * @example Destructive action with warn styling
+ * ```html
+ * <button comButton color="warn"
+ *   (comConfirm)="onPermanentDelete($event)"
+ *   confirmTitle="Permanent Deletion"
+ *   confirmMessage="This action cannot be undone."
+ *   confirmLabel="Delete Forever"
+ *   confirmColor="warn">
+ *   Delete Permanently
+ * </button>
+ * ```
+ *
+ * @example Custom template
+ * ```html
+ * <button comButton (comConfirm)="onAction($event)" [confirmTpl]="customTpl">
+ *   Action
+ * </button>
+ *
+ * <ng-template #customTpl let-message let-confirm="confirm" let-cancel="cancel">
+ *   <div class="flex flex-col gap-4">
+ *     <p>{{ message }}</p>
+ *     <div class="flex justify-end gap-2">
+ *       <button comButton variant="ghost" (click)="cancel()">Cancel</button>
+ *       <button comButton (click)="confirm()">Confirm</button>
+ *     </div>
+ *   </div>
+ * </ng-template>
+ * ```
+ */
+declare class ComConfirm {
+    private readonly overlay;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly platformId;
+    private overlayRef;
+    private panelInstance;
+    private readonly titleId;
+    private readonly descriptionId;
+    /** Whether the confirmation panel is currently open. */
+    protected readonly isOpen: WritableSignal<boolean>;
+    /** The confirmation message to display. */
+    readonly confirmMessage: InputSignal<string>;
+    /** Optional title for the confirmation dialog. */
+    readonly confirmTitle: InputSignal<string | undefined>;
+    /** Label for the confirm button. */
+    readonly confirmLabel: InputSignal<string>;
+    /** Label for the cancel button. */
+    readonly cancelLabel: InputSignal<string>;
+    /** Color variant for the confirm button. */
+    readonly confirmColor: InputSignal<ConfirmColor>;
+    /** When true, clicks pass through without showing confirmation. */
+    readonly confirmDisabled: InputSignalWithTransform<boolean, unknown>;
+    /** Whether to show a backdrop behind the panel. */
+    readonly confirmBackdrop: InputSignalWithTransform<boolean, unknown>;
+    /** Custom template for the panel content. */
+    readonly confirmTpl: InputSignal<TemplateRef<ConfirmTemplateContext> | undefined>;
+    /**
+     * Emits `true` when confirmed, `false` when cancelled or navigated away.
+     * This is the main directive output — acts as an output gate for the action.
+     */
+    readonly comConfirm: OutputEmitterRef<boolean>;
+    private readonly panelConfig;
+    constructor();
+    /** Programmatically open the confirmation dialog. */
+    open(): void;
+    /** Programmatically close the confirmation dialog (emits false). */
+    close(): void;
+    protected onTriggerClick(event: Event): void;
+    private createOverlay;
+    private attachPanel;
+    private handleConfirm;
+    private handleCancel;
+    private closePanel;
+    private handleDetachment;
+    private disposeOverlay;
+    private returnFocusToTrigger;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComConfirm, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComConfirm, "[comConfirm]", ["comConfirm"], { "confirmMessage": { "alias": "confirmMessage"; "required": false; "isSignal": true; }; "confirmTitle": { "alias": "confirmTitle"; "required": false; "isSignal": true; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "confirmColor": { "alias": "confirmColor"; "required": false; "isSignal": true; }; "confirmDisabled": { "alias": "confirmDisabled"; "required": false; "isSignal": true; }; "confirmBackdrop": { "alias": "confirmBackdrop"; "required": false; "isSignal": true; }; "confirmTpl": { "alias": "confirmTpl"; "required": false; "isSignal": true; }; }, { "comConfirm": "comConfirm"; }, never, never, true, never>;
+}
+
+/**
+ * CVA variants for the confirmation panel backdrop.
+ *
+ * @tokens `--color-background`
+ */
+declare const confirmBackdropVariants: (props?: {
+    visible?: boolean;
+}) => string;
+/**
+ * CVA variants for the confirmation panel container.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`
+ */
+declare const confirmPanelVariants: (props?: {
+    visible?: boolean;
+}) => string;
+/**
+ * CVA variants for the confirmation panel title.
+ *
+ * @tokens `--color-foreground`
+ */
+declare const confirmTitleVariants: () => string;
+/**
+ * CVA variants for the confirmation panel message.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const confirmMessageVariants: () => string;
+/**
+ * CVA variants for the confirmation panel footer.
+ */
+declare const confirmFooterVariants: () => string;
+
+export { ComConfirm, confirmBackdropVariants, confirmFooterVariants, confirmMessageVariants, confirmPanelVariants, confirmTitleVariants };
+export type { ConfirmColor, ConfirmTemplateContext };

package/types/ngx-com-components-dropdown-testing.d.ts

@@ -0,0 +1,116 @@
+import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+
+/** Harness filters for ComDropdownHarness. */
+interface ComDropdownHarnessFilters extends BaseHarnessFilters {
+    /** Filter by the dropdown's placeholder text. */
+    placeholder?: string | RegExp;
+    /** Filter by whether the dropdown is disabled. */
+    disabled?: boolean;
+    /** Filter by whether the dropdown is open. */
+    open?: boolean;
+}
+/** Harness filters for ComDropdownOptionHarness. */
+interface ComDropdownOptionHarnessFilters extends BaseHarnessFilters {
+    /** Filter by the option's text. */
+    text?: string | RegExp;
+    /** Filter by whether the option is selected. */
+    selected?: boolean;
+    /** Filter by whether the option is disabled. */
+    disabled?: boolean;
+}
+/**
+ * Harness for interacting with a dropdown option in tests.
+ */
+declare class ComDropdownOptionHarness extends ComponentHarness {
+    static hostSelector: string;
+    private readonly optionElement;
+    /**
+     * Gets a HarnessPredicate for matching dropdown options.
+     * @param options Filter options.
+     */
+    static with(options?: ComDropdownOptionHarnessFilters): HarnessPredicate<ComDropdownOptionHarness>;
+    /** Gets the option's text content. */
+    getText(): Promise<string>;
+    /** Whether the option is currently selected. */
+    isSelected(): Promise<boolean>;
+    /** Whether the option is disabled. */
+    isDisabled(): Promise<boolean>;
+    /** Whether the option is active (keyboard focused). */
+    isActive(): Promise<boolean>;
+    /** Clicks the option to select it. */
+    click(): Promise<void>;
+    /** Hovers over the option. */
+    hover(): Promise<void>;
+}
+/**
+ * Harness for interacting with a ComDropdown in tests.
+ */
+declare class ComDropdownHarness extends ComponentHarness {
+    static hostSelector: string;
+    private readonly trigger;
+    private readonly panel;
+    private readonly searchInput;
+    private readonly clearButton;
+    /**
+     * Gets a HarnessPredicate for matching dropdowns.
+     * @param options Filter options.
+     */
+    static with(options?: ComDropdownHarnessFilters): HarnessPredicate<ComDropdownHarness>;
+    /** Gets the dropdown's trigger button text. */
+    getTriggerText(): Promise<string>;
+    /** Whether the dropdown is currently open. */
+    isOpen(): Promise<boolean>;
+    /** Whether the dropdown is disabled. */
+    isDisabled(): Promise<boolean>;
+    /** Whether the dropdown has a value selected. */
+    hasValue(): Promise<boolean>;
+    /** Opens the dropdown if it's closed. */
+    open(): Promise<void>;
+    /** Closes the dropdown if it's open. */
+    close(): Promise<void>;
+    /** Clicks the dropdown trigger. */
+    click(): Promise<void>;
+    /** Clears the current selection. */
+    clear(): Promise<void>;
+    /** Sends keyboard input to the dropdown. */
+    sendKeys(...keys: (string | TestKey)[]): Promise<void>;
+    /** Gets all options in the dropdown. */
+    getOptions(filters?: ComDropdownOptionHarnessFilters): Promise<ComDropdownOptionHarness[]>;
+    /** Gets an option by its text. */
+    getOption(text: string | RegExp): Promise<ComDropdownOptionHarness | null>;
+    /** Selects an option by its text. */
+    selectOption(text: string | RegExp): Promise<void>;
+    /** Gets the currently selected option(s). */
+    getSelectedOptions(): Promise<ComDropdownOptionHarness[]>;
+    /** Whether the dropdown has a search input. */
+    isSearchable(): Promise<boolean>;
+    /** Gets the current search query. */
+    getSearchQuery(): Promise<string>;
+    /** Types in the search input. */
+    search(query: string): Promise<void>;
+    /** Clears the search input. */
+    clearSearch(): Promise<void>;
+    /** Gets the number of visible options. */
+    getOptionsCount(): Promise<number>;
+    /** Gets all option texts. */
+    getOptionTexts(): Promise<string[]>;
+    /** Navigates to an option using keyboard. */
+    navigateToOption(direction: 'up' | 'down', times?: number): Promise<void>;
+    /** Selects the currently active option. */
+    selectActiveOption(): Promise<void>;
+    /** Gets the ID of the active descendant. */
+    getActiveDescendantId(): Promise<string | null>;
+    /** Gets the panel ID. */
+    getPanelId(): Promise<string | null>;
+    /** Gets the aria-controls value from the trigger. */
+    getAriaControls(): Promise<string | null>;
+    /** Focuses the dropdown trigger. */
+    focus(): Promise<void>;
+    /** Blurs the dropdown trigger. */
+    blur(): Promise<void>;
+    /** Whether the dropdown trigger is focused. */
+    isFocused(): Promise<boolean>;
+}
+
+export { ComDropdownHarness, ComDropdownOptionHarness };
+export type { ComDropdownHarnessFilters, ComDropdownOptionHarnessFilters };