ngx-com 0.0.3 → 0.0.5

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.d.ts

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, OnInit, Signal, InputSignal, OutputEmitterRef, WritableSignal } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { TemplateRef, Signal, InputSignal, OutputEmitterRef, WritableSignal, OnInit } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { FormFieldControl, ErrorStateMatcher, FormFieldAppearance } from 'ngx-com/components/form-field';
 import { VariantProps } from 'class-variance-authority';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
@@ -111,18 +112,6 @@ interface ComDropdownPosition {
  * Panel width configuration.
  */
 type ComDropdownPanelWidth = 'trigger' | 'auto' | string;
-/**
- * Variant types for the dropdown trigger.
- */
-type ComDropdownVariant = 'default' | 'outline' | 'ghost' | 'filled';
-/**
- * Size types for the dropdown.
- */
-type ComDropdownSize = 'sm' | 'default' | 'lg';
-/**
- * State types for the dropdown (validation states).
- */
-type ComDropdownState = 'default' | 'error' | 'success';
 /**
  * Default compare function for primitive values.
  * @param a First value.
@@ -298,7 +287,7 @@ declare class ComDropdownTagTpl<T> {
 /**
  * Variant type for dropdown trigger appearance.
  */
-type DropdownVariant = 'default' | 'outline' | 'ghost' | 'filled';
+type DropdownVariant = 'default' | 'outline' | 'ghost' | 'filled' | 'naked';
 /**
  * Size type for dropdown components.
  */
@@ -450,15 +439,17 @@ type DropdownChevronVariants = VariantProps<typeof dropdownChevronVariants>;
  * </com-dropdown>
  * ```
  */
-declare class ComDropdown<T> implements ControlValueAccessor, OnInit {
+declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T | T[] | null> {
     private readonly elementRef;
     private readonly destroyRef;
     private readonly overlay;
     private readonly viewContainerRef;
     private readonly liveAnnouncer;
-    private readonly document;
-    /** Optional NgControl for form integration. */
-    private readonly ngControl;
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    /** NgControl bound to this dropdown (if using reactive forms). */
+    readonly ngControl: NgControl | null;
     /** Reference to the trigger button element. */
     private readonly triggerRef;
     /** Reference to the panel template. */
@@ -523,6 +514,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, OnInit {
     readonly virtualScrollThreshold: InputSignal<number>;
     /** Maximum number of tags to display in multi-select mode. Set to null for no limit. */
     readonly maxVisibleTags: InputSignal<number | null>;
+    /** Custom error state matcher for determining when to show errors. */
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
     /** Emitted when the value changes. */
     readonly valueChange: OutputEmitterRef<T | T[] | null>;
     /** Emitted when search query changes. */
@@ -533,6 +526,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, OnInit {
     readonly closed: OutputEmitterRef<void>;
     /** Whether the panel is open. */
     readonly isOpen: WritableSignal<boolean>;
+    /** Whether the trigger button is focused. */
+    private readonly _triggerFocused;
     /** Current search query. */
     readonly searchQuery: WritableSignal<string>;
     /** Currently active (keyboard focused) option ID. */
@@ -541,6 +536,10 @@ declare class ComDropdown<T> implements ControlValueAccessor, OnInit {
     readonly internalValue: WritableSignal<T | T[] | null>;
     /** Live announcements for screen readers. */
     readonly liveAnnouncement: WritableSignal<string>;
+    /** IDs for aria-describedby (set by form-field). */
+    private readonly _describedByIds;
+    /** Form field appearance (set by form-field). */
+    private readonly _appearance;
     /** Trigger element ID. */
     readonly triggerId: Signal<string>;
     /** Panel element ID. */
@@ -549,6 +548,21 @@ declare class ComDropdown<T> implements ControlValueAccessor, OnInit {
     readonly activeDescendant: Signal<string | null>;
     /** Whether the dropdown has a value. */
     readonly hasValue: Signal<boolean>;
+    /** Whether the dropdown is focused (trigger focused or panel open). Implements FormFieldControl. */
+    readonly focused: Signal<boolean>;
+    /** Whether the label should float. Label floats when focused or has a value. */
+    readonly shouldLabelFloat: Signal<boolean>;
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    readonly errorState: Signal<boolean>;
+    /** Unique ID for the control. Implements FormFieldControl. */
+    readonly id: Signal<string>;
+    /**
+     * Effective state combining manual state with automatic error detection.
+     * Manual state takes precedence over auto-detected error state.
+     */
+    readonly effectiveState: Signal<DropdownState>;
+    /** Combined aria-describedby from form-field. */
+    readonly ariaDescribedBy: Signal<string | null>;
     /** Selected value (single mode). */
     readonly selectedValue: Signal<T | null>;
     /** Selected values (multiple mode). */
@@ -582,11 +596,25 @@ declare class ComDropdown<T> implements ControlValueAccessor, OnInit {
     private onChange;
     private onTouched;
     constructor();
-    ngOnInit(): void;
     writeValue(value: T | T[] | null): void;
     registerOnChange(fn: (value: T | T[] | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event: MouseEvent): void;
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids: string): void;
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance: FormFieldAppearance): void;
     /** Opens the dropdown panel. */
     open(): void;
     /** Closes the dropdown panel. */
@@ -603,6 +631,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, OnInit {
     protected onPanelKeydown(event: KeyboardEvent): void;
     protected onSearchChange(query: string): void;
     protected onSearchKeyNav(event: KeyboardEvent): void;
+    protected onTriggerFocus(): void;
+    protected onTriggerBlur(): void;
     protected onOptionHover(optionId: string): void;
     protected selectOption(value: T): void;
     protected removeValue(value: T): void;
@@ -627,7 +657,7 @@ declare class ComDropdown<T> implements ControlValueAccessor, OnInit {
     private typeAhead;
     private announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDropdown<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDropdown<any>, "com-dropdown", ["comDropdown"], { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "filterWith": { "alias": "filterWith"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchDebounceMs": { "alias": "searchDebounceMs"; "required": false; "isSignal": true; }; "virtualScrollThreshold": { "alias": "virtualScrollThreshold"; "required": false; "isSignal": true; }; "maxVisibleTags": { "alias": "maxVisibleTags"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; }, ["optionTemplate", "selectedTemplate", "emptyTemplate", "groupTemplate", "tagTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDropdown<any>, "com-dropdown", ["comDropdown"], { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "filterWith": { "alias": "filterWith"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchDebounceMs": { "alias": "searchDebounceMs"; "required": false; "isSignal": true; }; "virtualScrollThreshold": { "alias": "virtualScrollThreshold"; "required": false; "isSignal": true; }; "maxVisibleTags": { "alias": "maxVisibleTags"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; }, ["optionTemplate", "selectedTemplate", "emptyTemplate", "groupTemplate", "tagTemplate"], never, true, never>;
 }
 
 /**
@@ -648,7 +678,6 @@ declare class ComDropdown<T> implements ControlValueAccessor, OnInit {
  *         `--color-primary-subtle-foreground`, `--color-disabled-foreground`
  */
 declare class ComDropdownOption<T> {
-    private readonly elementRef;
     /** Reference to the option element for focus management. */
     private readonly optionRef;
     /** The value this option represents. */
@@ -683,8 +712,6 @@ declare class ComDropdownOption<T> {
     protected readonly templateContext: Signal<ComDropdownOptionContext<T>>;
     protected onOptionClick(event: MouseEvent): void;
     protected onMouseEnter(): void;
-    /** Gets the host element. */
-    getHostElement(): HTMLElement;
     /** Scrolls this option into view. */
     scrollIntoView(): void;
     /** Focuses this option element. */
@@ -712,7 +739,6 @@ declare class ComDropdownOption<T> {
  *         `--color-muted-foreground`, `--radius-overlay`
  */
 declare class ComDropdownPanel<T> {
-    private readonly elementRef;
     /** Reference to the panel element. */
     private readonly panelRef;
     /** Reference to the virtual scroll viewport (when enabled). */
@@ -756,8 +782,6 @@ declare class ComDropdownPanel<T> {
     protected readonly emptyContext: Signal<ComDropdownEmptyContext>;
     /** Track function for options. */
     protected trackByFn(_index: number, option: ComDropdownProcessedOption<T>): string;
-    /** Gets the host element. */
-    getHostElement(): HTMLElement;
     /** Scrolls to a specific index. */
     scrollToIndex(index: number): void;
     /** Scrolls an option into view. */
@@ -911,4 +935,4 @@ declare class ComDropdownGroup {
 }
 
 export { ComDropdown, ComDropdownEmptyTpl, ComDropdownGroup, ComDropdownGroupTpl, ComDropdownOption, ComDropdownOptionTpl, ComDropdownPanel, ComDropdownSearch, ComDropdownSelectedTpl, ComDropdownTag, ComDropdownTagTpl, defaultCompareWith, defaultDisplayWith, defaultFilterWith, dropdownChevronVariants, dropdownClearVariants, dropdownEmptyVariants, dropdownGroupVariants, dropdownOptionVariants, dropdownOverflowBadgeVariants, dropdownPanelVariants, dropdownSearchVariants, dropdownTagRemoveVariants, dropdownTagVariants, dropdownTriggerVariants, generateDropdownId };
-export type { ComDropdownEmptyContext, ComDropdownGroupContext, ComDropdownGroup$1 as ComDropdownGroupData, ComDropdownOptionContext, ComDropdownPanelWidth, ComDropdownPosition, ComDropdownProcessedOption, ComDropdownSelectedContext, ComDropdownSize, ComDropdownState, ComDropdownTagContext, ComDropdownVariant, DropdownChevronVariants, DropdownClearVariants, DropdownEmptyVariants, DropdownGroupVariants, DropdownOptionVariants, DropdownOverflowBadgeVariants, DropdownPanelVariants, DropdownSearchVariants, DropdownSize, DropdownState, DropdownTagRemoveVariants, DropdownTagVariants, DropdownTriggerVariants, DropdownVariant };
+export type { ComDropdownEmptyContext, ComDropdownGroupContext, ComDropdownGroup$1 as ComDropdownGroupData, ComDropdownOptionContext, ComDropdownPanelWidth, ComDropdownPosition, ComDropdownProcessedOption, ComDropdownSelectedContext, ComDropdownTagContext, DropdownChevronVariants, DropdownClearVariants, DropdownEmptyVariants, DropdownGroupVariants, DropdownOptionVariants, DropdownOverflowBadgeVariants, DropdownPanelVariants, DropdownSearchVariants, DropdownSize, DropdownState, DropdownTagRemoveVariants, DropdownTagVariants, DropdownTriggerVariants, DropdownVariant };

package/types/ngx-com-components-empty-state.d.ts

@@ -0,0 +1,269 @@
+import * as i0 from '@angular/core';
+import { InputSignal, Signal } from '@angular/core';
+
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+type EmptyStateAlign = 'start' | 'center';
+type EmptyStateOrientation = 'vertical' | 'horizontal';
+/**
+ * CVA variants for the empty state container.
+ *
+ * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`
+ */
+declare const emptyStateVariants: (props?: {
+    size?: EmptyStateSize;
+    align?: EmptyStateAlign;
+    orientation?: EmptyStateOrientation;
+}) => string;
+/**
+ * CVA variants for the empty state icon container.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`
+ */
+declare const emptyStateIconVariants: (props?: {
+    size?: EmptyStateSize;
+}) => string;
+/**
+ * CVA variants for the empty state title.
+ *
+ * @tokens `--color-foreground`
+ */
+declare const emptyStateTitleVariants: (props?: {
+    size?: EmptyStateSize;
+}) => string;
+/**
+ * CVA variants for the empty state description.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const emptyStateDescriptionVariants: (props?: {
+    size?: EmptyStateSize;
+}) => string;
+/**
+ * CVA variants for the empty state actions container.
+ */
+declare const emptyStateActionsVariants: (props?: {
+    size?: EmptyStateSize;
+}) => string;
+
+/**
+ * Empty state component - a placeholder surface for when there is no data to display.
+ *
+ * Common use cases include:
+ * - Empty lists or tables ("No results found")
+ * - Initial states before user action ("Create your first project")
+ * - Search results with no matches ("No items match your search")
+ * - Error recovery states ("Something went wrong. Try again.")
+ *
+ * The component is a pure layout container that accepts projected content through attribute directives.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-foreground`
+ *
+ * @example Minimal empty state
+ * ```html
+ * <com-empty-state>
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="inbox" size="xl" />
+ *   </div>
+ *   <h3 comEmptyStateTitle>No messages</h3>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Full empty state with description and action
+ * ```html
+ * <com-empty-state>
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="folder-open" size="xl" />
+ *   </div>
+ *   <h3 comEmptyStateTitle>No projects yet</h3>
+ *   <p comEmptyStateDescription>
+ *     Create your first project to get started organizing your work.
+ *   </p>
+ *   <div comEmptyStateActions>
+ *     <button comButton>Create Project</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Search empty state with secondary action
+ * ```html
+ * <com-empty-state>
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="search-x" size="xl" />
+ *   </div>
+ *   <h3 comEmptyStateTitle>No results found</h3>
+ *   <p comEmptyStateDescription>
+ *     Try adjusting your search terms or filters.
+ *   </p>
+ *   <div comEmptyStateActions>
+ *     <button comButton variant="outline">Clear Filters</button>
+ *     <button comButton>New Search</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Small size for inline contexts
+ * ```html
+ * <com-empty-state size="sm">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="list" size="lg" />
+ *   </div>
+ *   <h4 comEmptyStateTitle>No items</h4>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Large size for full-page empty states
+ * ```html
+ * <com-empty-state size="lg">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="rocket" size="2xl" />
+ *   </div>
+ *   <h2 comEmptyStateTitle>Welcome to Acme</h2>
+ *   <p comEmptyStateDescription>
+ *     Your dashboard is ready. Start by creating your first resource.
+ *   </p>
+ *   <div comEmptyStateActions>
+ *     <button comButton size="lg">Get Started</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Horizontal orientation
+ * ```html
+ * <com-empty-state orientation="horizontal" align="start">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="alert-circle" size="lg" />
+ *   </div>
+ *   <h4 comEmptyStateTitle>No notifications</h4>
+ *   <p comEmptyStateDescription>You're all caught up!</p>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Left-aligned for sidebar contexts
+ * ```html
+ * <com-empty-state align="start">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="users" size="lg" />
+ *   </div>
+ *   <h4 comEmptyStateTitle>No team members</h4>
+ *   <p comEmptyStateDescription>Invite people to collaborate.</p>
+ *   <div comEmptyStateActions>
+ *     <button comButton size="sm">Invite</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ */
+declare class ComEmptyState {
+    /** Controls overall scale: icon container size, text sizes, spacing. */
+    readonly size: InputSignal<EmptyStateSize>;
+    /** Horizontal alignment of content. */
+    readonly align: InputSignal<EmptyStateAlign>;
+    /** Layout direction: vertical stacks content, horizontal places icon beside text. */
+    readonly orientation: InputSignal<EmptyStateOrientation>;
+    /** Consumer CSS classes - merged with variant classes. */
+    readonly userClass: InputSignal<string>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyState, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComEmptyState, "com-empty-state", ["comEmptyState"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Empty state icon container directive - styled circular background for icon/illustration.
+ *
+ * Apply to a container element. Place any content inside (typically `com-icon`).
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example
+ * ```html
+ * <div comEmptyStateIcon>
+ *   <com-icon name="inbox" size="xl" />
+ * </div>
+ * ```
+ *
+ * @example With custom illustration
+ * ```html
+ * <div comEmptyStateIcon>
+ *   <img src="/assets/empty-mailbox.svg" alt="" class="size-8" />
+ * </div>
+ * ```
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`
+ */
+declare class ComEmptyStateIcon {
+    private readonly emptyState;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyStateIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComEmptyStateIcon, "[comEmptyStateIcon]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Empty state title directive - styled heading text.
+ *
+ * Apply to any heading element. Consumer picks the semantic level (h2, h3, etc.).
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example
+ * ```html
+ * <h3 comEmptyStateTitle>No projects yet</h3>
+ * ```
+ *
+ * @tokens `--color-foreground`
+ */
+declare class ComEmptyStateTitle {
+    private readonly emptyState;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyStateTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComEmptyStateTitle, "[comEmptyStateTitle]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Empty state description directive - supporting text.
+ *
+ * Apply to a paragraph or text element.
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example
+ * ```html
+ * <p comEmptyStateDescription>
+ *   Create your first project to get started organizing your work.
+ * </p>
+ * ```
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare class ComEmptyStateDescription {
+    private readonly emptyState;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyStateDescription, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComEmptyStateDescription, "[comEmptyStateDescription]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Empty state actions directive - container for action buttons.
+ *
+ * Apply to a container element. Place buttons inside.
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example Single action
+ * ```html
+ * <div comEmptyStateActions>
+ *   <button comButton>Create Project</button>
+ * </div>
+ * ```
+ *
+ * @example Multiple actions
+ * ```html
+ * <div comEmptyStateActions>
+ *   <button comButton variant="outline">Clear Filters</button>
+ *   <button comButton>New Search</button>
+ * </div>
+ * ```
+ */
+declare class ComEmptyStateActions {
+    private readonly emptyState;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyStateActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComEmptyStateActions, "[comEmptyStateActions]", never, {}, {}, never, never, true, never>;
+}
+
+export { ComEmptyState, ComEmptyStateActions, ComEmptyStateDescription, ComEmptyStateIcon, ComEmptyStateTitle, emptyStateActionsVariants, emptyStateDescriptionVariants, emptyStateIconVariants, emptyStateTitleVariants, emptyStateVariants };
+export type { EmptyStateAlign, EmptyStateOrientation, EmptyStateSize };