cps-ui-kit 21.10.0 → 21.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cps-ui-kit",
-  "version": "21.10.0",
+  "version": "21.12.0",
   "peerDependencies": {
     "@angular/common": "^21.2.6",
     "@angular/core": "^21.2.6",
@@ -12,7 +12,7 @@
     "lodash-es": "^4.17.21",
     "primeng": "^21.1.3",
     "rxjs": "^7.8.2",
-    "zone.js": "^0.15.1"
+    "zone.js": "^0.15.1 || ^0.16.0"
   },
   "repository": {
     "type": "git",

package/styles/_mixins.scss

@@ -22,12 +22,17 @@
   }
 
   &::before {
-    inset: -#{$inner-offset}; /* inner offset */
+    inset: #{-$inner-offset};
     border: $inner-width solid var(--cps-color-calm);
   }
 
   &::after {
-    inset: -#{$outer-offset}; /* outer offset */
+    inset: #{-$outer-offset};
     border: $outer-width solid var(--cps-color-calm-highlighten);
   }
+
+  &.suppress-focus-visible::before,
+  &.suppress-focus-visible::after {
+    display: none;
+  }
 }

package/types/cps-ui-kit.d.ts

@@ -145,11 +145,11 @@ declare class CpsTooltipDirective implements OnInit, OnDestroy {
     private _showTimeout?;
     private _hideTimeout?;
     private _ariaTarget?;
-    private readonly _tooltipId;
     private _rootFontSizePx;
     private window;
     private _elementRef;
     private _document;
+    private _platformId;
     private _domSanitizer;
     constructor();
     ngOnInit(): void;
@@ -174,7 +174,6 @@ declare class CpsTooltipDirective implements OnInit, OnDestroy {
     private _getCoords;
     private _getCoordsForPosition;
     private _focusableIn;
-    private _getNextFocusableAfterTrigger;
     private _resolveAriaTarget;
     private _announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsTooltipDirective, never>;
@@ -189,6 +188,7 @@ type VoidListener$1 = () => void | null | undefined;
  */
 type CpsMenuItem = {
     title?: string;
+    ariaLabel?: string;
     action?: (event?: any) => void;
     icon?: string;
     desc?: string;
@@ -207,6 +207,7 @@ declare enum CpsMenuHideReason {
     CLICK_ITEM = "click-item",
     CLICK_OUTSIDE = "click-outside",
     KEYDOWN_ESCAPE = "keydown-escape",
+    KEYDOWN_TAB = "keydown-tab",
     SCROLL = "scroll",
     RESIZE = "resize",
     TARGET_NOT_CONNECTED = "target-not-connected"
@@ -231,9 +232,16 @@ declare class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
     overlayService: OverlayService;
     /**
      * Header title of the menu.
+     * Only applies when items are provided.
      * @group Props
      */
     header: string;
+    /**
+     * Aria label for the menu component, used for accessibility, it takes precedence over header.
+     * Only applies when items are provided.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * An array of menu items.
      * @group Props
@@ -250,7 +258,7 @@ declare class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
      */
     compressed: boolean;
     /**
-     * Determines whether the menu should show on target element focus.
+     * Determines whether the menu should move focus to its first item (or first focusable element) when opened.
      * @group Props
      */
     focusOnShow: boolean;
@@ -296,6 +304,11 @@ declare class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
      * @group Emits
      */
     contentClicked: EventEmitter<any>;
+    /**
+     * Callback to invoke when the mouse leaves the menu container.
+     * @group Emits
+     */
+    containerMouseLeave: EventEmitter<MouseEvent>;
     withIcons: boolean;
     autoZIndex: boolean;
     baseZIndex: number;
@@ -317,6 +330,9 @@ declare class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
     resizeObserver: ResizeObserver;
     itemsClasses: string[];
     hideReason: CpsMenuHideReason | undefined;
+    private _openedByKeyboard;
+    private readonly _cpsFocusService;
+    private _menuArrow?;
     private window;
     constructor(document: Document, platformId: any, el: ElementRef, renderer: Renderer2, cd: ChangeDetectorRef, zone: NgZone, primeNG: PrimeNG, overlayService: OverlayService);
     ngOnChanges(changes: SimpleChanges): void;
@@ -327,6 +343,7 @@ declare class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
     hide(reason?: CpsMenuHideReason): void;
     isVisible(): boolean;
     onItemClick(event: any, item: CpsMenuItem): void;
+    onItemKeydown(event: KeyboardEvent, item: CpsMenuItem): void;
     bindDocumentKeydownListener(): void;
     unbindDocumentKeydownListener(): void;
     bindDocumentClickListener(): void;
@@ -341,6 +358,12 @@ declare class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
     onAnimationStart(event: AnimationEvent): void;
     onAnimationEnd(event: AnimationEvent): void;
     focus(): void;
+    private _focusTarget;
+    private _getMenuItems;
+    private _navigateItems;
+    private _focusFirstItem;
+    private _focusLastItem;
+    private _focusableIn;
     onWindowResize(): void;
     bindDocumentResizeListener(): void;
     unbindDocumentResizeListener(): void;
@@ -350,7 +373,7 @@ declare class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
     private _destroy;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsMenuComponent, "cps-menu", never, { "header": { "alias": "header"; "required": false; }; "items": { "alias": "items"; "required": false; }; "withArrow": { "alias": "withArrow"; "required": false; }; "compressed": { "alias": "compressed"; "required": false; }; "focusOnShow": { "alias": "focusOnShow"; "required": false; }; "persistent": { "alias": "persistent"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; }, { "menuShown": "menuShown"; "menuHidden": "menuHidden"; "beforeMenuHidden": "beforeMenuHidden"; "contentClicked": "contentClicked"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsMenuComponent, "cps-menu", never, { "header": { "alias": "header"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "items": { "alias": "items"; "required": false; }; "withArrow": { "alias": "withArrow"; "required": false; }; "compressed": { "alias": "compressed"; "required": false; }; "focusOnShow": { "alias": "focusOnShow"; "required": false; }; "persistent": { "alias": "persistent"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; }, { "menuShown": "menuShown"; "menuHidden": "menuHidden"; "beforeMenuHidden": "beforeMenuHidden"; "contentClicked": "contentClicked"; "containerMouseLeave": "containerMouseLeave"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -365,6 +388,7 @@ type CpsAutocompleteAppearanceType = 'outlined' | 'underlined' | 'borderless';
 declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit, OnChanges, AfterViewInit, OnDestroy {
     private _control;
     private document;
+    private platformId;
     private cdRef;
     private _labelByValue;
     /**
@@ -643,7 +667,7 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     private _destroy$;
     private _options;
     private _optionIds;
-    constructor(_control: NgControl, document: Document, cdRef: ChangeDetectorRef, _labelByValue: LabelByValuePipe);
+    constructor(_control: NgControl, document: Document, platformId: object, cdRef: ChangeDetectorRef, _labelByValue: LabelByValuePipe);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
@@ -697,7 +721,7 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     private _confirmInput;
     private _removeLastValue;
     private _pxToRem;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CpsAutocompleteComponent, [{ optional: true; self: true; }, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CpsAutocompleteComponent, [{ optional: true; self: true; }, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CpsAutocompleteComponent, "cps-autocomplete", never, { "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "returnObject": { "alias": "returnObject"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "width": { "alias": "width"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "showChevron": { "alias": "showChevron"; "required": false; }; "withOptionsAliases": { "alias": "withOptionsAliases"; "required": false; }; "useOptionsAliasesWhenNoMatch": { "alias": "useOptionsAliasesWhenNoMatch"; "required": false; }; "optionAlias": { "alias": "optionAlias"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; "closableChips": { "alias": "closableChips"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "openOnClear": { "alias": "openOnClear"; "required": false; }; "keepInitialOrder": { "alias": "keepInitialOrder"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionInfo": { "alias": "optionInfo"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "persistentClear": { "alias": "persistentClear"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "prefixIconSize": { "alias": "prefixIconSize"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "showLoadingMessage": { "alias": "showLoadingMessage"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "showEmptyMessage": { "alias": "showEmptyMessage"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "numToleratedItems": { "alias": "numToleratedItems"; "required": false; }; "externalError": { "alias": "externalError"; "required": false; }; "infoTooltip": { "alias": "infoTooltip"; "required": false; }; "infoTooltipClass": { "alias": "infoTooltipClass"; "required": false; }; "infoTooltipMaxWidth": { "alias": "infoTooltipMaxWidth"; "required": false; }; "infoTooltipPersistent": { "alias": "infoTooltipPersistent"; "required": false; }; "infoTooltipPosition": { "alias": "infoTooltipPosition"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "emptyOptionIndex": { "alias": "emptyOptionIndex"; "required": false; }; "inputChangeDebounceTime": { "alias": "inputChangeDebounceTime"; "required": false; }; "validating": { "alias": "validating"; "required": false; }; "_value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "valueChanged": "valueChanged"; "inputChanged": "inputChanged"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
@@ -720,6 +744,7 @@ type CpsButtonToggleOption = {
 declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit, OnChanges {
     private _control;
     private document;
+    private platformId;
     private renderer;
     private cdr;
     /**
@@ -802,7 +827,7 @@ declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit,
     valueChanged: EventEmitter<any>;
     largestButtonWidthRem: number;
     private _rootFontSizePx;
-    constructor(_control: NgControl, document: Document, renderer: Renderer2, cdr: ChangeDetectorRef);
+    constructor(_control: NgControl, document: Document, platformId: object, renderer: Renderer2, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(): void;
     onChange: (event: any) => void;
@@ -815,7 +840,7 @@ declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit,
     private _updateValue;
     private _setEqualWidths;
     private _pxToRem;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CpsButtonToggleComponent, [{ optional: true; self: true; }, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CpsButtonToggleComponent, [{ optional: true; self: true; }, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CpsButtonToggleComponent, "cps-button-toggle", never, { "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "mandatory": { "alias": "mandatory"; "required": false; }; "equalWidths": { "alias": "equalWidths"; "required": false; }; "optionTooltipPosition": { "alias": "optionTooltipPosition"; "required": false; }; "infoTooltip": { "alias": "infoTooltip"; "required": false; }; "infoTooltipClass": { "alias": "infoTooltipClass"; "required": false; }; "infoTooltipMaxWidth": { "alias": "infoTooltipMaxWidth"; "required": false; }; "infoTooltipPersistent": { "alias": "infoTooltipPersistent"; "required": false; }; "infoTooltipPosition": { "alias": "infoTooltipPosition"; "required": false; }; "_value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; }, never, never, true, never>;
 }
 
@@ -2620,7 +2645,7 @@ type CpsSidebarMenuItem = {
  * CpsSidebarMenuComponent is a vertical menu panel component displayed at the edge of the screen.
  * @group Components
  */
-declare class CpsSidebarMenuComponent implements OnInit {
+declare class CpsSidebarMenuComponent {
     private _router;
     /**
      * An array of menu items.
@@ -2637,19 +2662,28 @@ declare class CpsSidebarMenuComponent implements OnInit {
      * @group Props
      */
     exactRoutes: boolean;
+    /**
+     * Aria label for the sidebar, used for accessibility.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Height of the sidebar, of type number denoting pixels or string.
      * @group Props
+     * @default 100%
      */
-    height: number | string;
+    height: i0.InputSignal<string | number>;
     allMenus?: QueryList<CpsMenuComponent>;
+    focusedItemWithMenu: CpsSidebarMenuItem | null;
     constructor(_router: Router);
-    ngOnInit(): void;
-    toggleMenu(event: any, menu: CpsMenuComponent): void;
+    cvtHeight: i0.Signal<string>;
+    showMenu(event: MouseEvent | FocusEvent, menu: CpsMenuComponent, item?: CpsSidebarMenuItem): void;
+    toggleMenu(event: MouseEvent, menu: CpsMenuComponent, item: CpsSidebarMenuItem): void;
+    leaveMenu(event: MouseEvent | FocusEvent, menu: CpsMenuComponent): void;
     isActive(item: CpsSidebarMenuItem): boolean;
     toggleSidebar(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsSidebarMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsSidebarMenuComponent, "cps-sidebar-menu", never, { "items": { "alias": "items"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "exactRoutes": { "alias": "exactRoutes"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsSidebarMenuComponent, "cps-sidebar-menu", never, { "items": { "alias": "items"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "exactRoutes": { "alias": "exactRoutes"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -5216,6 +5250,13 @@ declare class CpsDialogContentDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<CpsDialogContentDirective, "[cpsDialogContent]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Defines the auto-focus target when the dialog opens.
+ * - 'dialog' - focuses the dialog container itself
+ * - 'first-tabbable' - focuses the first tabbable element inside the dialog
+ * @group Types
+ */
+type CpsDialogAutoFocusTarget = 'dialog' | 'first-tabbable';
 /**
  * Configuration for the dialog service.
  * @group Interface
@@ -5258,33 +5299,50 @@ declare class CpsDialogConfig<T = any> {
      */
     showHeaderBottomBorder?: boolean;
     /**
-     * Identifies the element (or elements) that labels the element it is applied to.
+     * Identifies the element that labels the element it is applied to. Takes precedence over ariaLabel.
      */
     ariaLabelledBy?: string;
     /**
-     * Width of the dialog.
+     * Defines a string value that labels the dialog for assistive technologies when no visible title or ariaLabelledBy is present.
      */
-    width?: string;
+    ariaLabel?: string;
     /**
-     * Height of the dialog.
+     * Identifies the element that describes the dialog content for assistive technologies.
      */
-    height?: string;
+    ariaDescribedBy?: string;
     /**
-     * Min-width of the dialog.
+     * Defines which element receives focus when the dialog opens.
+     * - 'dialog' - focuses the dialog container
+     * - 'first-tabbable' / true - focuses the first tabbable element
+     * - string (a CSS selector) - focuses the first matching element
+     * - false - disables auto-focus
+     * @default true
      */
-    minWidth?: string;
+    autoFocus?: CpsDialogAutoFocusTarget | string | boolean;
     /**
-     * Min-height of the dialog.
+     * Width of the dialog, a number denoting pixels or a string.
      */
-    minHeight?: string;
+    width?: number | string;
     /**
-     * Max-width of the dialog.
+     * Height of the dialog, a number denoting pixels or a string.
      */
-    maxWidth?: string;
+    height?: number | string;
+    /**
+     * Min-width of the dialog, a number denoting pixels or a string.
+     */
+    minWidth?: number | string;
+    /**
+     * Min-height of the dialog, a number denoting pixels or a string.
+     */
+    minHeight?: number | string;
+    /**
+     * Max-width of the dialog, a number denoting pixels or a string.
+     */
+    maxWidth?: number | string;
     /**
-     * Max-height of the dialog.
+     * Max-height of the dialog, a number denoting pixels or a string.
      */
-    maxHeight?: string;
+    maxHeight?: number | string;
     /**
      * Specifies if pressing escape key should hide the dialog.
      */
@@ -5355,12 +5413,14 @@ declare class CpsDialogConfig<T = any> {
     keepInViewport?: boolean;
     /**
      * Minimum value for the left coordinate of dialog in dragging.
+     * A number is treated as pixels, a string must use 'px' or 'rem' units (e.g. '2rem', '32px').
      */
-    minX?: number;
+    minX?: number | string;
     /**
      * Minimum value for the top coordinate of dialog in dragging.
+     * A number is treated as pixels, a string must use 'px' or 'rem' units (e.g. '2rem', '32px').
      */
-    minY?: number;
+    minY?: number | string;
     /**
      * Determines whether the dialog can be displayed full screen.
      */
@@ -5377,7 +5437,7 @@ declare class CpsDialogConfig<T = any> {
 
 type Nullable<T = void> = T | null | undefined;
 type VoidListener = () => void | null | undefined;
-declare class CpsDialogComponent implements AfterViewInit, OnDestroy {
+declare class CpsDialogComponent implements OnInit, AfterViewInit, OnDestroy {
     private document;
     private platformId;
     private _dialogRef;
@@ -5399,6 +5459,7 @@ declare class CpsDialogComponent implements AfterViewInit, OnDestroy {
     maskViewChild: Nullable<ElementRef>;
     contentViewChild: Nullable<ElementRef>;
     headerViewChild: Nullable<ElementRef>;
+    dragHandleViewChild: Nullable<ElementRef>;
     childComponentType: Nullable<Type<any>>;
     container: Nullable<HTMLDivElement>;
     wrapper: Nullable<HTMLElement>;
@@ -5409,12 +5470,27 @@ declare class CpsDialogComponent implements AfterViewInit, OnDestroy {
     documentResizeEndListener: VoidListener | null;
     documentDragListener: VoidListener | null;
     documentDragEndListener: VoidListener | null;
+    private _focusTrapTeardown;
+    private _keyboardDragging;
+    private _keyboardResizing;
+    private _previouslyFocusedElement;
+    private _shouldRestoreFocus;
     _openStateChanged: EventEmitter<void>;
-    _dragStarted: EventEmitter<MouseEvent>;
-    _dragEnded: EventEmitter<MouseEvent>;
-    _resizeStarted: EventEmitter<MouseEvent>;
-    _resizeEnded: EventEmitter<MouseEvent>;
+    _dragStarted: EventEmitter<KeyboardEvent | MouseEvent>;
+    _dragEnded: EventEmitter<KeyboardEvent | MouseEvent>;
+    _resizeStarted: EventEmitter<KeyboardEvent | MouseEvent>;
+    _resizeEnded: EventEmitter<KeyboardEvent | MouseEvent>;
     _maximizedStateChanged: EventEmitter<boolean>;
+    private _rootFontSizePx;
+    private _openedByKeyboard;
+    private readonly _cpsFocusService;
+    get ariaLabel(): string | null;
+    get cvtWidth(): string;
+    get cvtHeight(): string;
+    get cvtMinWidth(): string;
+    get cvtMinHeight(): string;
+    get cvtMaxWidth(): string;
+    get cvtMaxHeight(): string;
     get minX(): number;
     get minY(): number;
     get keepInViewport(): boolean;
@@ -5425,18 +5501,25 @@ declare class CpsDialogComponent implements AfterViewInit, OnDestroy {
     set style(value: any);
     get position(): string;
     get parent(): Element | undefined;
-    constructor(document: Document, platformId: any, _dialogRef: CpsDialogRef, _cdRef: ChangeDetectorRef, renderer: Renderer2, config: CpsDialogConfig, zone: NgZone, primeNG: PrimeNG);
+    constructor(document: Document, platformId: object, _dialogRef: CpsDialogRef, _cdRef: ChangeDetectorRef, renderer: Renderer2, config: CpsDialogConfig, zone: NgZone, primeNG: PrimeNG);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     loadChildComponent(componentType: Type<any>): void;
     moveOnTop(): void;
     onAnimationStart(event: AnimationEvent): void;
     onAnimationEnd(event: AnimationEvent): void;
     onContainerDestroy(): void;
+    isCloseDisabled(): boolean;
     close(): void;
     hide(): void;
     enableModality(): void;
     disableModality(): void;
-    focus(): void;
+    focus(afterFocus?: () => void): void;
+    onResizeHandleKeydown(event: KeyboardEvent): void;
+    onResizeHandleKeyup(event: KeyboardEvent): void;
+    onHeaderKeyup(event: KeyboardEvent): void;
+    onHeaderKeydown(event: KeyboardEvent): void;
     toggleMaximized(value?: boolean): void;
     initResize(event: MouseEvent): void;
     onResize(event: MouseEvent): void;
@@ -5455,8 +5538,12 @@ declare class CpsDialogComponent implements AfterViewInit, OnDestroy {
     unbindGlobalListeners(): void;
     bindDocumentEscapeListener(): void;
     unbindDocumentEscapeListener(): void;
+    bindFocusTrapListener(): void;
+    unbindFocusTrapListener(): void;
     unbindMaskClickListener(): void;
-    ngOnDestroy(): void;
+    private _pxToRem;
+    private _toPx;
+    private _clampDragPos;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsDialogComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CpsDialogComponent, "cps-dialog", never, {}, {}, never, never, true, never>;
 }
@@ -5526,31 +5613,31 @@ declare class CpsDialogRef<T = any> {
     private readonly _onDragStart;
     /**
      * Event triggered on drag start.
-     * @param {MouseEvent} event - Mouse event.
+     * @param {MouseEvent | KeyboardEvent} event - Mouse or keyboard event.
      * @group Events
      */
-    onDragStart: Observable<MouseEvent>;
+    onDragStart: Observable<MouseEvent | KeyboardEvent>;
     private readonly _onDragEnd;
     /**
      * Event triggered on drag end.
-     * @param {MouseEvent} event - Mouse event.
+     * @param {MouseEvent | KeyboardEvent} event - Mouse or keyboard event.
      * @group Events
      */
-    onDragEnd: Observable<MouseEvent>;
+    onDragEnd: Observable<MouseEvent | KeyboardEvent>;
     private readonly _onResizeStart;
     /**
      * Event triggered on resize start.
-     * @param {MouseEvent} event - Mouse event.
+     * @param {MouseEvent | KeyboardEvent} event - Mouse or keyboard event.
      * @group Events
      */
-    onResizeStart: Observable<MouseEvent>;
+    onResizeStart: Observable<MouseEvent | KeyboardEvent>;
     private readonly _onResizeEnd;
     /**
      * Event triggered on resize end.
-     * @param {MouseEvent} event - Mouse event.
+     * @param {MouseEvent | KeyboardEvent} event - Mouse or keyboard event.
      * @group Events
      */
-    onResizeEnd: Observable<MouseEvent>;
+    onResizeEnd: Observable<MouseEvent | KeyboardEvent>;
     private readonly _onMaximize;
     /**
      * Event triggered on dialog maximized state changed.
@@ -5723,6 +5810,78 @@ declare class CpsNotificationService {
     static ɵprov: i0.ɵɵInjectableDeclaration<CpsNotificationService>;
 }
 
+/**
+ * CpsFocusService manages focus-related concerns:
+ * - Tracks the most recent user input modality (keyboard vs. pointer)
+ * - Focuses elements with conditional focus-ring suppression
+ * - Traps focus within a container (e.g. a modal dialog)
+ *
+ * Only active in browser environments; no-ops under SSR.
+ *
+ * @example
+ * ```ts
+ * readonly focusService = inject(CpsFocusService);
+ * readonly showFocusRing = computed(() => this.focusService.isKeyboard());
+ * ```
+ */
+declare class CpsFocusService {
+    private readonly _platformId;
+    private readonly _document;
+    /**
+     * A signal reflecting the most recently detected input modality.
+     * - `'keyboard'` — set when a navigation key (Tab, Enter, Space, Arrow keys,
+     *   Home, End, PageUp, PageDown) is pressed.
+     * - `'pointer'` — set on every `pointerdown` event (mouse, touch, stylus).
+     *
+     * Defaults to `'pointer'`.
+     */
+    readonly lastInput: i0.WritableSignal<"keyboard" | "pointer">;
+    /**
+     * Returns `true` when the most recently detected input was keyboard.
+     * Shorthand for `lastInput() === 'keyboard'`.
+     */
+    isKeyboard(): boolean;
+    /**
+     * Focuses `el`, conditionally suppressing the focus-visible ring.
+     *
+     * When `showFocusRing` is `false`, adds the `suppress-focus-visible` CSS
+     * class to the element before focusing and removes it on the next `blur`
+     * event. This keeps the UI clean for pointer-initiated closes.
+     */
+    focusElement(el: HTMLElement, showFocusRing: boolean): void;
+    /**
+     * Installs a Tab key focus trap on `container`.
+     *
+     * @param container - The element to trap focus within.
+     * @param getFocusableElements - Returns the ordered list of tabbable
+     *   elements inside `container`. Defaults to a native CSS-selector-based
+     *   implementation. Pass `DomHandler.getFocusableElements` (PrimeNG) or any
+     *   custom function when richer querying is needed.
+     * @returns A teardown function — call it to remove the trap listener.
+     */
+    trapFocus(container: HTMLElement, getFocusableElements?: (el: HTMLElement) => HTMLElement[]): () => void;
+    private readonly _navigationKeys;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CpsFocusService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CpsFocusService>;
+}
+/**
+ * Injection token for the focus managing service.
+ *
+ * By default it resolves to the singleton {@link CpsFocusService}.
+ * Consumer applications can override it to:
+ * - Supply a custom subclass
+ * - Provide `null` to disable dynamic tracking entirely
+ *
+ * @example Disable dynamic tracking:
+ * ```typescript
+ * providers: [
+ *   { provide: CPS_FOCUS_SERVICE, useValue: null }
+ * ]
+ * ```
+ */
+declare const CPS_FOCUS_SERVICE: InjectionToken<CpsFocusService | null>;
+
 /**
  * Available theme options
  * @group Types
@@ -5850,5 +6009,5 @@ declare const getCpsColors: (_document: Document) => [string, string][];
 declare const getCSSColor: (val: string, _document: Document) => string;
 declare const getTextColor: (backgroundColor: string) => string;
 
-export { CPS_RADIO_GROUP, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsDatepickerComponent, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnResizableDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableDetectFilterTypePipe, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsThemeService, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnResizableDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableDetectFilterTypePipe, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, ICONS_PATH, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
-export type { CpsAutocompleteAppearanceType, CpsBaseTheme, CpsButtonToggleOption, CpsColorTheme, CpsColumnFilterCategoryOption, CpsColumnFilterType, CpsDatepickerAppearanceType, CpsDividerType, CpsInputAppearanceType, CpsMenuAttachPosition, CpsMenuItem, CpsNotificationConfig, CpsRadioOption, CpsRadiusTheme, CpsSelectAppearanceType, CpsSidebarMenuItem, CpsTabChangeEvent, CpsTableExportFormat, CpsTableSize, CpsTableSortMode, CpsTableToolbarSize, CpsTabsAlignmentType, CpsTabsAnimationType, CpsTheme, CpsTime, CpsTooltipOpenOn, CpsTooltipPosition, CpsTreeAutocompleteAppearanceType, CpsTreeSelectAppearanceType, CpsTreeTableSize, CpsTreeTableSortMode, CpsTreeTableToolbarSize, IconType, iconSizeType };
+export { CPS_FOCUS_SERVICE, CPS_RADIO_GROUP, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsDatepickerComponent, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsFocusService, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnResizableDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableDetectFilterTypePipe, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsThemeService, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnResizableDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableDetectFilterTypePipe, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, ICONS_PATH, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
+export type { CpsAutocompleteAppearanceType, CpsBaseTheme, CpsButtonToggleOption, CpsColorTheme, CpsColumnFilterCategoryOption, CpsColumnFilterType, CpsDatepickerAppearanceType, CpsDialogAutoFocusTarget, CpsDividerType, CpsInputAppearanceType, CpsMenuAttachPosition, CpsMenuItem, CpsNotificationConfig, CpsRadioOption, CpsRadiusTheme, CpsSelectAppearanceType, CpsSidebarMenuItem, CpsTabChangeEvent, CpsTableExportFormat, CpsTableSize, CpsTableSortMode, CpsTableToolbarSize, CpsTabsAlignmentType, CpsTabsAnimationType, CpsTheme, CpsTime, CpsTooltipOpenOn, CpsTooltipPosition, CpsTreeAutocompleteAppearanceType, CpsTreeSelectAppearanceType, CpsTreeTableSize, CpsTreeTableSortMode, CpsTreeTableToolbarSize, IconType, iconSizeType };