ngx-com 0.0.21 → 0.1.0

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

@@ -11,7 +11,7 @@ interface RootMenuTrigger {
     close(): void;
     /** Whether to close the menu when an item is selected. */
     menuCloseOnSelect(): boolean;
-    /** Called by MenuComponent to register itself when attached. */
+    /** Called by ComMenuComponent to register itself when attached. */
     registerMenu?(menu: MenuRef): void;
 }
 /**
@@ -47,7 +47,7 @@ type MenuAlignment = 'start' | 'center' | 'end';
 /**
  * Menu panel styling variants.
  *
- * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-overlay`, `--radius-popover`
  */
 declare const menuPanelVariants: ReturnType<typeof cva<{
     size: Record<MenuSize, string>;
@@ -101,7 +101,7 @@ type MenuSide = 'left' | 'right';
  * **Root context** (outside a menu): Opens on click, has backdrop.
  * **Submenu context** (inside a menu): Opens on hover/ArrowRight, no backdrop.
  *
- * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-overlay`
  *
  * @example Root trigger
  * ```html
@@ -122,7 +122,7 @@ type MenuSide = 'left' | 'right';
  * </button>
  * ```
  */
-declare class MenuTriggerDirective implements RootMenuTrigger {
+declare class ComMenuTrigger implements RootMenuTrigger {
     private readonly overlay;
     private readonly elementRef;
     private readonly viewContainerRef;
@@ -178,7 +178,7 @@ declare class MenuTriggerDirective implements RootMenuTrigger {
     close(): void;
     /** Toggle the menu open/close state. */
     toggle(): void;
-    /** Called by MenuComponent to register itself when attached. */
+    /** Called by ComMenuComponent to register itself when attached. */
     registerMenu(menu: MenuRef): void;
     protected onClick(event: Event): void;
     protected onArrowDown(event: Event): void;
@@ -205,15 +205,15 @@ declare class MenuTriggerDirective implements RootMenuTrigger {
     private cancelCloseTimer;
     private disposeOverlay;
     private cleanupSubmenuListeners;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuTriggerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuTriggerDirective, "[comMenuTrigger]", ["comMenuTrigger"], { "comMenuTrigger": { "alias": "comMenuTrigger"; "required": true; "isSignal": true; }; "menuPosition": { "alias": "menuPosition"; "required": false; "isSignal": true; }; "menuAlignment": { "alias": "menuAlignment"; "required": false; "isSignal": true; }; "menuOffset": { "alias": "menuOffset"; "required": false; "isSignal": true; }; "menuDisabled": { "alias": "menuDisabled"; "required": false; "isSignal": true; }; "menuOpen": { "alias": "menuOpen"; "required": false; "isSignal": true; }; "menuPanelClass": { "alias": "menuPanelClass"; "required": false; "isSignal": true; }; "menuCloseOnSelect": { "alias": "menuCloseOnSelect"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "subMenuOpenDelay": { "alias": "subMenuOpenDelay"; "required": false; "isSignal": true; }; "subMenuCloseDelay": { "alias": "subMenuCloseDelay"; "required": false; "isSignal": true; }; }, { "menuOpen": "menuOpenChange"; "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComMenuTrigger, "[comMenuTrigger]", ["comMenuTrigger"], { "comMenuTrigger": { "alias": "comMenuTrigger"; "required": true; "isSignal": true; }; "menuPosition": { "alias": "menuPosition"; "required": false; "isSignal": true; }; "menuAlignment": { "alias": "menuAlignment"; "required": false; "isSignal": true; }; "menuOffset": { "alias": "menuOffset"; "required": false; "isSignal": true; }; "menuDisabled": { "alias": "menuDisabled"; "required": false; "isSignal": true; }; "menuOpen": { "alias": "menuOpen"; "required": false; "isSignal": true; }; "menuPanelClass": { "alias": "menuPanelClass"; "required": false; "isSignal": true; }; "menuCloseOnSelect": { "alias": "menuCloseOnSelect"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "subMenuOpenDelay": { "alias": "subMenuOpenDelay"; "required": false; "isSignal": true; }; "subMenuCloseDelay": { "alias": "subMenuCloseDelay"; "required": false; "isSignal": true; }; }, { "menuOpen": "menuOpenChange"; "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, never, true, never>;
 }
 
 /**
  * Base class for focusable menu items.
  * All item directives must implement this interface for FocusKeyManager.
  */
-declare abstract class MenuItemBase implements FocusableOption {
+declare abstract class ComMenuItemBase implements FocusableOption {
     abstract focus(): void;
     abstract getLabel(): string;
     /** Whether the item is disabled. */
@@ -223,7 +223,7 @@ declare abstract class MenuItemBase implements FocusableOption {
  * Menu panel component that renders inside an overlay.
  * Manages keyboard navigation across its items using CDK FocusKeyManager.
  *
- * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-overlay`
  *
  * @example
  * ```html
@@ -233,7 +233,7 @@ declare abstract class MenuItemBase implements FocusableOption {
  * </com-menu>
  * ```
  */
-declare class MenuComponent implements MenuRef {
+declare class ComMenuComponent implements MenuRef {
     private readonly rootTrigger;
     private keyManager;
     /** Size variant for the menu panel. */
@@ -257,8 +257,8 @@ declare class MenuComponent implements MenuRef {
     /** Close this menu level. */
     close(): void;
     protected onKeydown(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuComponent, "com-menu", never, { "menuSize": { "alias": "menuSize"; "required": false; "isSignal": true; }; "menuVariant": { "alias": "menuVariant"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComMenuComponent, "com-menu", never, { "menuSize": { "alias": "menuSize"; "required": false; "isSignal": true; }; "menuVariant": { "alias": "menuVariant"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
 }
 
 /**
@@ -274,7 +274,7 @@ declare class MenuComponent implements MenuRef {
  * <button comMenuItem destructive>Delete</button>
  * ```
  */
-declare class MenuItemDirective extends MenuItemBase {
+declare class ComMenuItem extends ComMenuItemBase {
     private readonly elementRef;
     private readonly menu;
     private readonly rootTrigger;
@@ -293,8 +293,8 @@ declare class MenuItemDirective extends MenuItemBase {
     protected onAction(event: Event): void;
     protected onMouseEnter(): void;
     protected onMouseLeave(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuItemDirective, "[comMenuItem]", ["comMenuItem"], { "menuItemDisabled": { "alias": "menuItemDisabled"; "required": false; "isSignal": true; }; "destructive": { "alias": "destructive"; "required": false; "isSignal": true; }; }, { "menuItemSelect": "menuItemSelect"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComMenuItem, "[comMenuItem]", ["comMenuItem"], { "menuItemDisabled": { "alias": "menuItemDisabled"; "required": false; "isSignal": true; }; "destructive": { "alias": "destructive"; "required": false; "isSignal": true; }; }, { "menuItemSelect": "menuItemSelect"; }, never, never, true, never>;
 }
 
 /**
@@ -307,7 +307,7 @@ declare class MenuItemDirective extends MenuItemBase {
  * <button comMenuItemCheckbox [(checked)]="showSidebar">Sidebar</button>
  * ```
  */
-declare class MenuItemCheckboxComponent extends MenuItemBase {
+declare class ComMenuItemCheckbox extends ComMenuItemBase {
     private readonly elementRef;
     private readonly menu;
     /** Disables the item. */
@@ -324,8 +324,8 @@ declare class MenuItemCheckboxComponent extends MenuItemBase {
     protected toggle(event: Event): void;
     protected onMouseEnter(): void;
     protected onMouseLeave(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemCheckboxComponent, "[comMenuItemCheckbox]", ["comMenuItemCheckbox"], { "menuItemDisabled": { "alias": "menuItemDisabled"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuItemCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComMenuItemCheckbox, "[comMenuItemCheckbox]", ["comMenuItemCheckbox"], { "menuItemDisabled": { "alias": "menuItemDisabled"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -341,7 +341,7 @@ declare class MenuItemCheckboxComponent extends MenuItemBase {
  * </div>
  * ```
  */
-declare class MenuItemRadioComponent extends MenuItemBase {
+declare class ComMenuItemRadio extends ComMenuItemBase {
     private readonly elementRef;
     private readonly menu;
     private readonly rootTrigger;
@@ -362,14 +362,14 @@ declare class MenuItemRadioComponent extends MenuItemBase {
     protected select(event: Event): void;
     protected onMouseEnter(): void;
     protected onMouseLeave(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemRadioComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemRadioComponent, "[comMenuItemRadio]", ["comMenuItemRadio"], { "menuItemDisabled": { "alias": "menuItemDisabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuItemRadio, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComMenuItemRadio, "[comMenuItemRadio]", ["comMenuItemRadio"], { "menuItemDisabled": { "alias": "menuItemDisabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
  * Token for menu group to allow radio items to coordinate.
  */
-declare abstract class MenuGroupRef {
+declare abstract class ComMenuGroupRef {
     abstract readonly groupValue: () => unknown;
     abstract setGroupValue(value: unknown): void;
 }
@@ -387,14 +387,14 @@ declare abstract class MenuGroupRef {
  *
  * @tokens None - uses only ARIA attributes
  */
-declare class MenuGroupDirective extends MenuGroupRef {
+declare class ComMenuGroup extends ComMenuGroupRef {
     /** Optional accessible label for the group. */
     readonly ariaLabel: InputSignal<string | null>;
     /** Two-way bindable value for radio groups. */
     readonly groupValue: ModelSignal<unknown>;
     setGroupValue(value: unknown): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuGroupDirective, "[comMenuGroup]", ["comMenuGroup"], { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "groupValue": { "alias": "groupValue"; "required": false; "isSignal": true; }; }, { "groupValue": "groupValueChange"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComMenuGroup, "[comMenuGroup]", ["comMenuGroup"], { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "groupValue": { "alias": "groupValue"; "required": false; "isSignal": true; }; }, { "groupValue": "groupValueChange"; }, never, never, true, never>;
 }
 
 /**
@@ -408,14 +408,14 @@ declare class MenuGroupDirective extends MenuGroupRef {
  * <button comMenuItem>View Members</button>
  * ```
  */
-declare class MenuLabelDirective {
+declare class ComMenuLabel {
     private readonly menu;
     /** Unique ID that can be referenced by aria-labelledby. */
     readonly labelId: string;
     private readonly size;
     protected readonly labelClasses: Signal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuLabelDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuLabelDirective, "[comMenuLabel]", ["comMenuLabel"], {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComMenuLabel, "[comMenuLabel]", ["comMenuLabel"], {}, {}, never, never, true, never>;
 }
 
 /**
@@ -430,9 +430,9 @@ declare class MenuLabelDirective {
  * <button comMenuItem>Delete</button>
  * ```
  */
-declare class MenuDividerDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuDividerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuDividerDirective, "[comMenuDivider]", ["comMenuDivider"], {}, {}, never, never, true, never>;
+declare class ComMenuDivider {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuDivider, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComMenuDivider, "[comMenuDivider]", ["comMenuDivider"], {}, {}, never, never, true, never>;
 }
 
 /**
@@ -449,9 +449,9 @@ declare class MenuDividerDirective {
  * </button>
  * ```
  */
-declare class MenuSubIndicatorComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuSubIndicatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuSubIndicatorComponent, "com-menu-sub-indicator", never, {}, {}, never, never, true, never>;
+declare class ComMenuSubIndicator {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuSubIndicator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComMenuSubIndicator, "com-menu-sub-indicator", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -467,13 +467,13 @@ declare class MenuSubIndicatorComponent {
  * </button>
  * ```
  */
-declare class MenuShortcutDirective {
+declare class ComMenuShortcut {
     private readonly menu;
     private readonly size;
     protected readonly shortcutClasses: Signal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuShortcutDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuShortcutDirective, "[comMenuShortcut]", ["comMenuShortcut"], {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComMenuShortcut, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComMenuShortcut, "[comMenuShortcut]", ["comMenuShortcut"], {}, {}, never, never, true, never>;
 }
 
-export { MENU_REF, MenuComponent, MenuDividerDirective, MenuGroupDirective, MenuGroupRef, MenuItemBase, MenuItemCheckboxComponent, MenuItemDirective, MenuItemRadioComponent, MenuLabelDirective, MenuShortcutDirective, MenuSubIndicatorComponent, MenuTriggerDirective, ROOT_MENU_TRIGGER, menuCheckIndicatorVariants, menuItemVariants, menuLabelVariants, menuPanelVariants, menuShortcutVariants };
+export { ComMenuComponent, ComMenuDivider, ComMenuGroup, ComMenuGroupRef, ComMenuItem, ComMenuItemBase, ComMenuItemCheckbox, ComMenuItemRadio, ComMenuLabel, ComMenuShortcut, ComMenuSubIndicator, ComMenuTrigger, MENU_REF, ROOT_MENU_TRIGGER, menuCheckIndicatorVariants, menuItemVariants, menuLabelVariants, menuPanelVariants, menuShortcutVariants };
 export type { MenuAlignment, MenuCheckIndicatorVariants, MenuItemVariants, MenuLabelVariants, MenuPanelVariants, MenuPosition, MenuRef, MenuShortcutVariants, MenuSide, MenuSize, MenuVariant, RootMenuTrigger };

package/types/ngx-com-components-native-control.d.ts

@@ -0,0 +1,99 @@
+import * as i0 from '@angular/core';
+import { DoCheck, InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { ErrorStateMatcher } from 'ngx-com/components/form-field';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Size type for native control.
+ */
+type NativeControlSize = 'sm' | 'default' | 'lg';
+/**
+ * Visual variant for native control.
+ */
+type NativeControlVariant = 'outline' | 'filled' | 'ghost';
+/**
+ * CVA variants for the native control directive.
+ *
+ * @tokens `--color-input-border`, `--color-input-background`, `--color-input-foreground`,
+ *         `--color-input-placeholder`, `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-ring`, `--color-warn`, `--color-muted`, `--color-border`,
+ *         `--radius-input`
+ */
+declare const nativeControlVariants: (props?: {
+    variant?: NativeControlVariant;
+    size?: NativeControlSize;
+    error?: boolean;
+}) => string;
+type NativeControlVariants = VariantProps<typeof nativeControlVariants>;
+
+/**
+ * Standalone styling directive for native `<input>`, `<select>`, and `<textarea>` elements.
+ *
+ * Applies consistent borders, background, text color, focus outline, disabled state,
+ * error state, and size scaling via CVA. Integrates with both Reactive Forms (via NgControl)
+ * and Signal Forms (via `invalid`/`touched` inputs set by `[formField]`).
+ *
+ * For full form integration (label, hint, error), use `com-form-field` + `comInput`.
+ *
+ * @tokens `--color-input-border`, `--color-input-background`, `--color-input-foreground`,
+ *         `--color-input-placeholder`, `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-ring`, `--color-warn`, `--color-muted`, `--color-border`,
+ *         `--radius-input`
+ *
+ * @example Basic usage
+ * ```html
+ * <input comNativeControl placeholder="Enter your name" />
+ * ```
+ *
+ * @example Variants
+ * ```html
+ * <input comNativeControl variant="outline" placeholder="Outline (default)" />
+ * <input comNativeControl variant="filled" placeholder="Filled" />
+ * <input comNativeControl variant="ghost" placeholder="Ghost" />
+ * ```
+ *
+ * @example Reactive Forms
+ * ```html
+ * <input comNativeControl [formControl]="nameCtrl" />
+ * ```
+ *
+ * @example Signal Forms
+ * ```html
+ * <input comNativeControl [formField]="myForm.name" />
+ * ```
+ */
+declare class ComNativeControl implements DoCheck {
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    /** NgControl bound to this element (if using reactive forms). */
+    readonly ngControl: NgControl | null;
+    /** Whether the form system is Signal Forms (no NgControl present). */
+    private readonly isSignalForms;
+    /** Visual variant — outline (bordered), filled (bg fill), or ghost (transparent) */
+    readonly variant: InputSignal<NativeControlVariant>;
+    /** Control size — affects height, padding, and font size */
+    readonly size: InputSignal<NativeControlSize>;
+    /** Consumer CSS classes — merged with variant classes via mergeClasses() */
+    readonly userClass: InputSignal<string>;
+    /** Custom error state matcher (overrides the default). */
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    readonly sfInvalid: InputSignalWithTransform<boolean, unknown>;
+    readonly sfTouched: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Reactive Forms error state — imperatively updated in DoCheck because
+     * NgControl properties (touched, invalid) are not signals.
+     */
+    private readonly _reactiveErrorState;
+    /** Whether the control is in an error state. */
+    readonly errorState: Signal<boolean>;
+    /** @internal Computed host class from CVA + consumer overrides */
+    protected readonly computedClass: Signal<string>;
+    ngDoCheck(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComNativeControl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComNativeControl, "input[comNativeControl], select[comNativeControl], textarea[comNativeControl]", ["comNativeControl"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "sfInvalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfTouched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ComNativeControl, nativeControlVariants };
+export type { NativeControlSize, NativeControlVariant, NativeControlVariants };

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

@@ -219,6 +219,8 @@ declare class ComPaginator {
     protected readonly iconSize: Signal<'xs' | 'sm'>;
     /** Unique ID for page size label. */
     protected readonly pageSizeLabelId: Signal<string>;
+    /** Unique ID for page size select element. */
+    protected readonly pageSizeSelectId: Signal<string>;
     /** Classes for the container. */
     protected readonly containerClasses: Signal<string>;
     /** Classes for navigation buttons. */

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

@@ -12,7 +12,7 @@ type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
 /**
  * Popover panel styling variants.
  *
- * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`, `--radius-overlay`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-overlay`, `--radius-popover`, `--radius-overlay`
  */
 declare const popoverPanelVariants: ReturnType<typeof cva<{
     variant: Record<PopoverVariant, string>;
@@ -34,7 +34,7 @@ type PopoverArrowVariants = VariantProps<typeof popoverArrowVariants>;
  * Applied to the trigger element, it handles opening, closing, positioning,
  * and accessibility for floating popover content.
  *
- * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--color-ring`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-overlay`, `--color-ring`
  *
  * @example Basic usage with template
  * ```html
@@ -80,7 +80,7 @@ type PopoverArrowVariants = VariantProps<typeof popoverArrowVariants>;
  * </button>
  * ```
  */
-declare class PopoverTriggerDirective {
+declare class ComPopoverTrigger {
     private readonly overlay;
     private readonly elementRef;
     private readonly viewContainerRef;
@@ -91,6 +91,8 @@ declare class PopoverTriggerDirective {
     private overlayRef;
     private focusTrap;
     private scrollCleanup;
+    private closeTimeoutId;
+    private destroyed;
     private readonly popoverId;
     /** Content to render: TemplateRef or Component class. */
     readonly comPopoverTrigger: InputSignal<TemplateRef<unknown> | Type<unknown>>;
@@ -153,6 +155,7 @@ declare class PopoverTriggerDirective {
     protected onEscapeKey(event: Event): void;
     private openPopover;
     private closePopover;
+    private cancelPendingClose;
     private subscribeToScrollEvents;
     private unsubscribeFromScrollEvents;
     private createOverlay;
@@ -163,14 +166,16 @@ declare class PopoverTriggerDirective {
     private setupFocusTrap;
     private destroyFocusTrap;
     private disposeOverlay;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[comPopoverTrigger]", ["comPopoverTrigger"], { "comPopoverTrigger": { "alias": "comPopoverTrigger"; "required": true; "isSignal": true; }; "popoverPosition": { "alias": "popoverPosition"; "required": false; "isSignal": true; }; "popoverAlignment": { "alias": "popoverAlignment"; "required": false; "isSignal": true; }; "popoverTriggerOn": { "alias": "popoverTriggerOn"; "required": false; "isSignal": true; }; "popoverOffset": { "alias": "popoverOffset"; "required": false; "isSignal": true; }; "popoverShowArrow": { "alias": "popoverShowArrow"; "required": false; "isSignal": true; }; "popoverVariant": { "alias": "popoverVariant"; "required": false; "isSignal": true; }; "popoverBackdrop": { "alias": "popoverBackdrop"; "required": false; "isSignal": true; }; "popoverCloseOnOutside": { "alias": "popoverCloseOnOutside"; "required": false; "isSignal": true; }; "popoverCloseOnEscape": { "alias": "popoverCloseOnEscape"; "required": false; "isSignal": true; }; "popoverCloseOnScroll": { "alias": "popoverCloseOnScroll"; "required": false; "isSignal": true; }; "popoverDisabled": { "alias": "popoverDisabled"; "required": false; "isSignal": true; }; "popoverOpen": { "alias": "popoverOpen"; "required": false; "isSignal": true; }; "popoverData": { "alias": "popoverData"; "required": false; "isSignal": true; }; "popoverPanelClass": { "alias": "popoverPanelClass"; "required": false; "isSignal": true; }; "popoverTrapFocus": { "alias": "popoverTrapFocus"; "required": false; "isSignal": true; }; "popoverAriaLabel": { "alias": "popoverAriaLabel"; "required": false; "isSignal": true; }; }, { "popoverOpen": "popoverOpenChange"; "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComPopoverTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComPopoverTrigger, "[comPopoverTrigger]", ["comPopoverTrigger"], { "comPopoverTrigger": { "alias": "comPopoverTrigger"; "required": true; "isSignal": true; }; "popoverPosition": { "alias": "popoverPosition"; "required": false; "isSignal": true; }; "popoverAlignment": { "alias": "popoverAlignment"; "required": false; "isSignal": true; }; "popoverTriggerOn": { "alias": "popoverTriggerOn"; "required": false; "isSignal": true; }; "popoverOffset": { "alias": "popoverOffset"; "required": false; "isSignal": true; }; "popoverShowArrow": { "alias": "popoverShowArrow"; "required": false; "isSignal": true; }; "popoverVariant": { "alias": "popoverVariant"; "required": false; "isSignal": true; }; "popoverBackdrop": { "alias": "popoverBackdrop"; "required": false; "isSignal": true; }; "popoverCloseOnOutside": { "alias": "popoverCloseOnOutside"; "required": false; "isSignal": true; }; "popoverCloseOnEscape": { "alias": "popoverCloseOnEscape"; "required": false; "isSignal": true; }; "popoverCloseOnScroll": { "alias": "popoverCloseOnScroll"; "required": false; "isSignal": true; }; "popoverDisabled": { "alias": "popoverDisabled"; "required": false; "isSignal": true; }; "popoverOpen": { "alias": "popoverOpen"; "required": false; "isSignal": true; }; "popoverData": { "alias": "popoverData"; "required": false; "isSignal": true; }; "popoverPanelClass": { "alias": "popoverPanelClass"; "required": false; "isSignal": true; }; "popoverTrapFocus": { "alias": "popoverTrapFocus"; "required": false; "isSignal": true; }; "popoverAriaLabel": { "alias": "popoverAriaLabel"; "required": false; "isSignal": true; }; }, { "popoverOpen": "popoverOpenChange"; "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; }, never, never, true, never>;
 }
 
 /**
  * Convenience directive that closes the parent popover when clicked.
  * Applied to elements inside the popover that should dismiss it.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <ng-template #confirmPop>
@@ -190,7 +195,7 @@ declare class PopoverTriggerDirective {
  * <button [comPopoverClose]="'cancelled'">No</button>
  * ```
  */
-declare class PopoverCloseDirective {
+declare class ComPopoverClose {
     private readonly popoverRef;
     /**
      * Optional result value to pass when closing.
@@ -198,8 +203,8 @@ declare class PopoverCloseDirective {
      */
     readonly comPopoverClose: InputSignal<unknown>;
     protected closePopover(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverCloseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverCloseDirective, "[comPopoverClose]", ["comPopoverClose"], { "comPopoverClose": { "alias": "comPopoverClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComPopoverClose, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComPopoverClose, "[comPopoverClose]", ["comPopoverClose"], { "comPopoverClose": { "alias": "comPopoverClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -210,6 +215,8 @@ declare class PopoverCloseDirective {
  * This directive is primarily semantic — it marks the template as popover content
  * and provides access to the TemplateRef for potential content queries.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <button [comPopoverTrigger]="helpContent">Help</button>
@@ -226,11 +233,11 @@ declare class PopoverCloseDirective {
  * </ng-template>
  * ```
  */
-declare class PopoverTemplateDirective {
+declare class ComPopoverTemplate {
     /** Reference to the template for rendering. */
     readonly templateRef: TemplateRef<unknown>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverTemplateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverTemplateDirective, "[comPopoverTemplate]", ["comPopoverTemplate"], {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComPopoverTemplate, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComPopoverTemplate, "[comPopoverTemplate]", ["comPopoverTemplate"], {}, {}, never, never, true, never>;
 }
 
 /**
@@ -305,5 +312,5 @@ declare function deriveSideFromPosition(pair: ConnectionPositionPair): PopoverSi
  */
 declare function deriveAlignmentFromPosition(pair: ConnectionPositionPair): PopoverAlignment;
 
-export { POPOVER_DATA, POPOVER_REF, PopoverCloseDirective, PopoverTemplateDirective, PopoverTriggerDirective, buildPopoverPositions, deriveAlignmentFromPosition, deriveSideFromPosition, popoverArrowVariants, popoverPanelVariants };
+export { ComPopoverClose, ComPopoverTemplate, ComPopoverTrigger, POPOVER_DATA, POPOVER_REF, buildPopoverPositions, deriveAlignmentFromPosition, deriveSideFromPosition, popoverArrowVariants, popoverPanelVariants };
 export type { PopoverAlignment, PopoverArrowVariants, PopoverBackdrop, PopoverPanelVariants, PopoverPosition, PopoverRef, PopoverSide, PopoverTriggerOn, PopoverVariant };

package/types/ngx-com-components-segmented-control.d.ts

@@ -31,6 +31,8 @@ interface SegmentTemplateContext<T = unknown> {
  * inner content of each segment while the component manages the button,
  * styling, and ARIA attributes.
  *
+ * @tokens none
+ *
  * @example Icon + text
  * ```html
  * <com-segmented-control [options]="viewOptions" [(value)]="currentView">
@@ -150,7 +152,7 @@ interface SegmentOption<T = unknown> {
  *     <span>{{ option.label }}</span>
  *     <span
  *       class="ml-1.5 rounded-pill px-1.5 text-xs"
- *       [class]="active ? 'bg-accent-foreground/20 text-accent-foreground' : 'bg-muted text-muted-foreground'"
+ *       [class]="active ? 'bg-accent-subtle text-accent-subtle-foreground' : 'bg-muted text-muted-foreground'"
  *     >
  *       {{ option.value === 'open' ? openCount : closedCount }}
  *     </span>

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

@@ -29,7 +29,7 @@ declare const sortIconVariants: (props?: {
 }) => string;
 
 /**
- * Sortable header component — child of [uiSort] directive.
+ * Sortable header component — child of [comSort] directive.
  *
  * Apply to table headers, div columns, or any clickable element that should trigger sorting.
  *
@@ -48,9 +48,10 @@ declare const sortIconVariants: (props?: {
  * <th comSortHeader="name" comSortHeaderArrowPosition="before">Name</th>
  * ```
  */
-declare class SortHeaderComponent implements OnInit {
+declare class ComSortHeader implements OnInit {
     private readonly sort;
     private readonly destroyRef;
+    private readonly elementRef;
     /** The column id — aliased from the selector */
     readonly id: InputSignal<string>;
     /** Disable sorting for this specific header */
@@ -69,6 +70,8 @@ declare class SortHeaderComponent implements OnInit {
     readonly showUnsortedIndicator: Signal<boolean>;
     /** Whether sorting is disabled for this header */
     readonly isDisabled: Signal<boolean>;
+    /** Role — only set on non-<th> elements (th has implicit columnheader role) */
+    readonly hostRole: Signal<'columnheader' | null>;
     /** aria-sort attribute value */
     readonly ariaSort: Signal<'ascending' | 'descending' | 'none'>;
     /** CVA-generated host classes */
@@ -76,14 +79,14 @@ declare class SortHeaderComponent implements OnInit {
     constructor();
     ngOnInit(): void;
     protected onClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SortHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SortHeaderComponent, "[comSortHeader]", never, { "id": { "alias": "comSortHeader"; "required": true; "isSignal": true; }; "sortHeaderDisabled": { "alias": "sortHeaderDisabled"; "required": false; "isSignal": true; }; "sortHeaderShowIndicator": { "alias": "sortHeaderShowIndicator"; "required": false; "isSignal": true; }; "sortHeaderArrowPosition": { "alias": "comSortHeaderArrowPosition"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSortHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComSortHeader, "[comSortHeader]", never, { "id": { "alias": "comSortHeader"; "required": true; "isSignal": true; }; "sortHeaderDisabled": { "alias": "sortHeaderDisabled"; "required": false; "isSignal": true; }; "sortHeaderShowIndicator": { "alias": "sortHeaderShowIndicator"; "required": false; "isSignal": true; }; "sortHeaderArrowPosition": { "alias": "comSortHeaderArrowPosition"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
  * Parent directive that manages sort state for a group of sortable headers.
  *
- * Apply to a container element (e.g., `<tr>`, `<div>`) that contains `[uiSortHeader]` children.
+ * Apply to a container element (e.g., `<tr>`, `<div>`) that contains `[comSortHeader]` children.
  * Children inject this directive via DI and read its signals directly.
  *
  * @tokens `--color-foreground`, `--color-muted-foreground`
@@ -103,7 +106,7 @@ declare class SortHeaderComponent implements OnInit {
  * </tr>
  * ```
  */
-declare class SortDirective {
+declare class ComSort {
     /** Currently active sort column id — two-way via model() */
     readonly sortActive: ModelSignal<string | undefined>;
     /** Current sort direction — two-way via model() */
@@ -118,16 +121,16 @@ declare class SortDirective {
     readonly sortChange: OutputEmitterRef<SortEvent>;
     private readonly headers;
     /** Register a sort header with this parent */
-    register(header: SortHeaderComponent): void;
+    register(header: ComSortHeader): void;
     /** Deregister a sort header */
     deregister(id: string): void;
     /** Programmatically sort by a column */
     sort(id: string): void;
     /** Returns the next direction in the cycle for a given column */
     getNextDirection(id: string): SortDirection;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SortDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SortDirective, "[comSort]", ["comSort"], { "sortActive": { "alias": "sortActive"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "sortDisabled": { "alias": "sortDisabled"; "required": false; "isSignal": true; }; "sortCycle": { "alias": "sortCycle"; "required": false; "isSignal": true; }; "sortShowIndicator": { "alias": "sortShowIndicator"; "required": false; "isSignal": true; }; }, { "sortActive": "sortActiveChange"; "sortDirection": "sortDirectionChange"; "sortChange": "sortChange"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSort, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComSort, "[comSort]", ["comSort"], { "sortActive": { "alias": "sortActive"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "sortDisabled": { "alias": "sortDisabled"; "required": false; "isSignal": true; }; "sortCycle": { "alias": "sortCycle"; "required": false; "isSignal": true; }; "sortShowIndicator": { "alias": "sortShowIndicator"; "required": false; "isSignal": true; }; }, { "sortActive": "sortActiveChange"; "sortDirection": "sortDirectionChange"; "sortChange": "sortChange"; }, never, never, true, never>;
 }
 
-export { SortDirective, SortHeaderComponent, sortHeaderVariants, sortIconVariants };
+export { ComSort, ComSortHeader, sortHeaderVariants, sortIconVariants };
 export type { SortCycle, SortDirection, SortEvent };

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

@@ -79,12 +79,16 @@ declare class ComSwitch implements ControlValueAccessor {
     readonly variant: InputSignal<SwitchVariant>;
     readonly checked: ModelSignal<boolean>;
     readonly disabled: ModelSignal<boolean>;
-    readonly value: InputSignal<string | undefined>;
+    readonly htmlValue: InputSignal<string | undefined>;
     readonly name: InputSignal<string | undefined>;
     readonly id: InputSignal<string | undefined>;
     readonly ariaLabel: InputSignal<string | null>;
     readonly ariaLabelledby: InputSignal<string | null>;
     readonly ariaDescribedby: InputSignal<string | null>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
+    readonly sfRequired: InputSignal<boolean>;
     readonly changed: OutputEmitterRef<SwitchChange>;
     readonly inputId: Signal<string>;
     protected readonly trackClasses: Signal<string>;
@@ -97,13 +101,14 @@ declare class ComSwitch implements ControlValueAccessor {
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    protected onBlur(): void;
     protected onInputChange(event: Event): void;
     /** Focuses this switch's input element. */
     focus(): void;
     /** Toggles the switch state programmatically. */
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComSwitch, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComSwitch, "com-switch", ["comSwitch"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "changed": "changed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComSwitch, "com-switch", ["comSwitch"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "htmlValue": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "sfRequired": { "alias": "required"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "changed": "changed"; }, never, ["*"], true, never>;
 }
 
 export { ComSwitch, SWITCH_LABEL_SIZES, SWITCH_THUMB_SIZES, SWITCH_THUMB_TRANSLATE, switchTrackVariants };