pdm-ui-kit 0.2.0 → 0.3.1

package/lib/components/button-group/button-group.component.d.ts

@@ -1,13 +1,19 @@
 import * as i0 from "@angular/core";
-export declare type PdmButtonGroupVariant = 'default' | 'group' | 'orientation' | 'separator';
-export declare type PdmButtonGroupOrientation = 'horizontal' | 'vertical';
+export declare type PdmButtonGroupVariant = "default" | "group" | "orientation" | "separator";
+export declare type PdmButtonGroupOrientation = "horizontal" | "vertical";
+declare type Axis = "horizontal" | "vertical";
 export declare class PdmButtonGroupComponent {
     variant: PdmButtonGroupVariant;
     orientation?: PdmButtonGroupOrientation;
     direction?: PdmButtonGroupOrientation;
     separated: boolean;
     className: string;
+    get axis(): Axis;
+    get isVertical(): boolean;
+    get shouldAttach(): boolean;
+    get ariaOrientation(): PdmButtonGroupOrientation;
     get rootClasses(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmButtonGroupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PdmButtonGroupComponent, "pdm-button-group", never, { "variant": "variant"; "orientation": "orientation"; "direction": "direction"; "separated": "separated"; "className": "className"; }, {}, never, ["*"], false>;
 }
+export {};

package/lib/components/combobox/combobox.component.d.ts

@@ -1,6 +1,11 @@
-import { EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, ViewContainerRef } from "@angular/core";
+import { Overlay } from "@angular/cdk/overlay";
 import * as i0 from "@angular/core";
-export declare class PdmComboboxComponent {
+export declare class PdmComboboxComponent implements OnDestroy {
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly elementRef;
+    private readonly cdr;
     open: boolean;
     placeholder: string;
     searchPlaceholder: string;
@@ -8,11 +13,23 @@ export declare class PdmComboboxComponent {
     options: string[];
     value: string;
     width: number;
+    panelClassName: string;
     openChange: EventEmitter<boolean>;
     valueChange: EventEmitter<string>;
+    triggerRef?: ElementRef<HTMLElement>;
+    panelTemplateRef: any;
+    private overlayRef;
+    private outsideClickSub;
+    constructor(overlay: Overlay, viewContainerRef: ViewContainerRef, elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
+    ngOnDestroy(): void;
     get selectedLabel(): string;
     toggle(): void;
     select(option: string): void;
+    onEscape(): void;
+    private openPanel;
+    private close;
+    private destroyOverlay;
+    private getPositionConfigs;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmComboboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmComboboxComponent, "pdm-combobox", never, { "open": "open"; "placeholder": "placeholder"; "searchPlaceholder": "searchPlaceholder"; "className": "className"; "options": "options"; "value": "value"; "width": "width"; }, { "openChange": "openChange"; "valueChange": "valueChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmComboboxComponent, "pdm-combobox", never, { "open": "open"; "placeholder": "placeholder"; "searchPlaceholder": "searchPlaceholder"; "className": "className"; "options": "options"; "value": "value"; "width": "width"; "panelClassName": "panelClassName"; }, { "openChange": "openChange"; "valueChange": "valueChange"; }, never, never, false>;
 }

package/lib/components/context-menu/context-menu.component.d.ts

@@ -1,29 +1,38 @@
-import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { PdmMenuItem } from '../dropdown-menu/dropdown-menu.component';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, ViewContainerRef } from "@angular/core";
+import { Overlay } from "@angular/cdk/overlay";
+import { PdmMenuItem } from "../dropdown-menu/dropdown-menu.component";
 import * as i0 from "@angular/core";
 export interface PdmContextMenuItem extends PdmMenuItem {
     checked?: boolean;
     selectedDot?: boolean;
 }
 export declare class PdmContextMenuComponent implements OnInit, OnDestroy {
-    private readonly elementRef;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly _elementRef;
+    private readonly cdr;
     items: PdmContextMenuItem[];
     className: string;
     triggerLabel: string;
     width: number;
     height: number;
+    panelClassName: string;
     itemSelect: EventEmitter<string>;
     open: boolean;
     x: number;
     y: number;
-    private boundPointerDown;
-    constructor(elementRef: ElementRef<HTMLElement>);
+    menuTemplateRef: any;
+    private overlayRef;
+    private outsideClickSub;
+    constructor(overlay: Overlay, viewContainerRef: ViewContainerRef, _elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     onContextMenu(event: MouseEvent): void;
     select(item: PdmContextMenuItem): void;
-    onEsc(): void;
-    private onDocumentPointerDown;
+    onDocumentClick(event: MouseEvent): void;
+    private createOverlay;
+    private close;
+    private destroyOverlay;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmContextMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmContextMenuComponent, "pdm-context-menu", never, { "items": "items"; "className": "className"; "triggerLabel": "triggerLabel"; "width": "width"; "height": "height"; }, { "itemSelect": "itemSelect"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmContextMenuComponent, "pdm-context-menu", never, { "items": "items"; "className": "className"; "triggerLabel": "triggerLabel"; "width": "width"; "height": "height"; "panelClassName": "panelClassName"; }, { "itemSelect": "itemSelect"; }, never, never, false>;
 }

package/lib/components/date-picker/date-picker.component.d.ts

@@ -1,10 +1,9 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, ViewContainerRef } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
-import { PdmCalendarRange, PdmCalendarVariant } from '../calendar/calendar.component';
-import { PdmOverlayOptions } from '../../overlay/pdm-overlay-options';
+import { ChangeDetectorRef, EventEmitter, OnDestroy, ViewContainerRef } from "@angular/core";
+import { Overlay } from "@angular/cdk/overlay";
+import { PdmCalendarRange, PdmCalendarVariant } from "../calendar/calendar.component";
+import { PdmOverlayOptions } from "../../overlay/pdm-overlay-options";
 import * as i0 from "@angular/core";
 export declare class PdmDatePickerComponent implements OnDestroy {
-    private readonly elementRef;
     private readonly cdr;
     private readonly overlay;
     private readonly viewContainerRef;
@@ -17,7 +16,7 @@ export declare class PdmDatePickerComponent implements OnDestroy {
     private backdropSub;
     private triggerRef?;
     private panelTemplateRef;
-    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, overlay: Overlay, viewContainerRef: ViewContainerRef);
+    constructor(cdr: ChangeDetectorRef, overlay: Overlay, viewContainerRef: ViewContainerRef);
     id: string;
     variant: PdmCalendarVariant | string;
     label: string;

package/lib/components/dialog/dialog.component.d.ts

@@ -1,11 +1,11 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter } from "@angular/core";
 import * as i0 from "@angular/core";
-export declare type PdmDialogVariant = 'default' | 'custom-close';
+export declare type PdmDialogVariant = "default" | "custom-close";
 /**
  * @deprecated Use 'responsive' mode instead. Will be removed in v0.3.0
  */
-export declare type PdmDialogSize = 'desktop' | 'mobile' | 'mobile-fullscreen' | 'sm' | 'md' | 'lg' | 'xl' | 'responsive';
-export declare type PdmDialogFooterAlign = 'right' | 'full-width' | 'left';
+export declare type PdmDialogSize = "desktop" | "mobile" | "mobile-fullscreen" | "sm" | "md" | "lg" | "xl" | "responsive";
+export declare type PdmDialogFooterAlign = "right" | "full-width" | "left";
 /**
  * Modal/Dialog component con soporte responsive
  *
@@ -62,7 +62,7 @@ export declare class PdmDialogComponent {
     onSecondaryAction(): void;
     onBackdropClick(): void;
     get panelClassName(): string;
-    private buildClasses;
+    private buildPanelClasses;
     get bodyWrapperClassName(): string;
     get headerWrapperClassName(): string;
     get footerWrapperClassName(): string;

package/lib/components/hover-card/hover-card.component.d.ts

@@ -1,14 +1,37 @@
+import { ChangeDetectorRef, ElementRef, OnDestroy, ViewContainerRef } from "@angular/core";
+import { Overlay } from "@angular/cdk/overlay";
 import * as i0 from "@angular/core";
-export declare type PdmHoverCardSide = 'top' | 'right' | 'bottom' | 'left';
-export declare type PdmHoverCardAlign = 'start' | 'center' | 'end';
-export declare class PdmHoverCardComponent {
+export declare type PdmHoverCardSide = "top" | "right" | "bottom" | "left";
+export declare type PdmHoverCardAlign = "start" | "center" | "end";
+export declare class PdmHoverCardComponent implements OnDestroy {
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly elementRef;
+    private readonly cdr;
     className: string;
     panelClassName: string;
     side: PdmHoverCardSide;
     align: PdmHoverCardAlign;
     panelWidth: number;
     open: boolean;
-    get positionClass(): string;
+    private overlayRef;
+    private showTimeout;
+    private hideTimeout;
+    panelTemplateRef: any;
+    constructor(overlay: Overlay, viewContainerRef: ViewContainerRef, elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
+    ngOnDestroy(): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onFocusIn(): void;
+    onFocusOut(): void;
+    private clearTimeouts;
+    private show;
+    private hide;
+    private createOverlay;
+    private destroyOverlay;
+    private getPositionConfigs;
+    private getAlignX;
+    private getAlignY;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmHoverCardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PdmHoverCardComponent, "pdm-hover-card", never, { "className": "className"; "panelClassName": "panelClassName"; "side": "side"; "align": "align"; "panelWidth": "panelWidth"; }, {}, never, ["[pdmHoverTrigger]", "[pdmHoverContent]"], false>;
 }

package/lib/components/input/input.component.d.ts

@@ -1,7 +1,7 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter } from "@angular/core";
 import * as i0 from "@angular/core";
-export declare type PdmInputSize = 'mini' | 'small' | 'regular' | 'large';
-export declare type PdmInputRoundness = 'default' | 'round';
+export declare type PdmInputSize = "mini" | "small" | "regular" | "large";
+export declare type PdmInputRoundness = "default" | "round";
 export declare class PdmInputComponent {
     id: string;
     type: string;

package/lib/components/input-group/input-group.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter } from "@angular/core";
 import * as i0 from "@angular/core";
 export declare class PdmInputGroupComponent {
     id: string;

package/lib/components/menubar/menubar.component.d.ts

@@ -1,26 +1,34 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { PdmMenuItem } from '../dropdown-menu/dropdown-menu.component';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, ViewContainerRef } from "@angular/core";
+import { Overlay } from "@angular/cdk/overlay";
+import { PdmMenuItem } from "../dropdown-menu/dropdown-menu.component";
 import * as i0 from "@angular/core";
 export interface PdmMenubarItem {
     label: string;
     items: PdmMenuItem[];
 }
 export declare class PdmMenubarComponent implements OnInit, OnDestroy {
+    private readonly overlay;
+    private readonly viewContainerRef;
     private readonly elementRef;
     private readonly cdr;
     menus: PdmMenubarItem[];
     className: string;
+    panelClassName: string;
     itemSelect: EventEmitter<string>;
     openIndex: number;
-    private boundPointerDown;
-    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
+    menuTemplateRef: any;
+    private overlayRef;
+    private outsideClickSub;
+    constructor(overlay: Overlay, viewContainerRef: ViewContainerRef, elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    onEsc(): void;
-    toggle(index: number): void;
+    onDocumentClickOrEsc(event: MouseEvent | KeyboardEvent): void;
+    toggle(index: number, event: MouseEvent): void;
     select(value: string): void;
     selectItem(item: PdmMenuItem): void;
-    private onDocumentPointerDown;
+    private createOverlay;
+    private destroyOverlay;
+    private getPositionConfigs;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmMenubarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmMenubarComponent, "pdm-menubar", never, { "menus": "menus"; "className": "className"; }, { "itemSelect": "itemSelect"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmMenubarComponent, "pdm-menubar", never, { "menus": "menus"; "className": "className"; "panelClassName": "panelClassName"; }, { "itemSelect": "itemSelect"; }, never, never, false>;
 }

package/lib/components/popover/popover.component.d.ts

@@ -1,6 +1,9 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, ViewContainerRef } from "@angular/core";
+import { Overlay } from "@angular/cdk/overlay";
 import * as i0 from "@angular/core";
 export declare class PdmPopoverComponent implements OnInit, OnDestroy {
+    private readonly overlay;
+    private readonly viewContainerRef;
     private readonly elementRef;
     private readonly cdr;
     private _open;
@@ -9,23 +12,21 @@ export declare class PdmPopoverComponent implements OnInit, OnDestroy {
     panelClassName: string;
     showTrigger: boolean;
     openChange: EventEmitter<boolean>;
-    panelPlacement: 'top' | 'bottom';
-    private anchorRef?;
     private triggerRef?;
-    private panelRef?;
-    private boundPointerDown;
-    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
+    private panelTemplateRef;
+    private overlayRef;
+    private outsideClickSub;
+    constructor(overlay: Overlay, viewContainerRef: ViewContainerRef, elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     set open(value: boolean);
     get open(): boolean;
-    get panelClasses(): string[];
     toggle(): void;
     onEsc(): void;
-    onViewportChange(): void;
-    private onDocumentPointerDown;
-    private schedulePanelPlacementUpdate;
-    private updatePanelPlacement;
+    private openPanel;
+    private closePanel;
+    private destroyOverlay;
+    private getPositionConfigs;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmPopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmPopoverComponent, "pdm-popover", never, { "triggerText": "triggerText"; "className": "className"; "panelClassName": "panelClassName"; "showTrigger": "showTrigger"; "open": "open"; }, { "openChange": "openChange"; }, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmPopoverComponent, "pdm-popover", never, { "triggerText": "triggerText"; "className": "className"; "panelClassName": "panelClassName"; "showTrigger": "showTrigger"; "open": "open"; }, { "openChange": "openChange"; }, never, ["[pdmPopoverTrigger]", "*"], false>;
 }

package/lib/components/select/select.component.d.ts

@@ -1,6 +1,6 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, ViewContainerRef } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
-import { PdmOverlayOptions } from '../../overlay/pdm-overlay-options';
+import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnDestroy, ViewContainerRef } from "@angular/core";
+import { Overlay } from "@angular/cdk/overlay";
+import { PdmOverlayOptions } from "../../overlay/pdm-overlay-options";
 import * as i0 from "@angular/core";
 export interface PdmSelectOption {
     label: string;
@@ -8,7 +8,6 @@ export interface PdmSelectOption {
     disabled?: boolean;
 }
 export declare class PdmSelectComponent implements AfterContentInit, OnDestroy {
-    private readonly elementRef;
     private readonly cdr;
     private readonly overlay;
     private readonly viewContainerRef;
@@ -33,7 +32,7 @@ export declare class PdmSelectComponent implements AfterContentInit, OnDestroy {
     private projectedOptions;
     private overlayRef;
     private backdropSub;
-    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, overlay: Overlay, viewContainerRef: ViewContainerRef);
+    constructor(cdr: ChangeDetectorRef, overlay: Overlay, viewContainerRef: ViewContainerRef);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     /**

package/lib/components/table/table.component.d.ts

@@ -1,6 +1,6 @@
-import { TableResponsiveStrategy } from '../../utils/responsive';
+import { type TableResponsiveStrategy } from "../../utils/responsive";
 import * as i0 from "@angular/core";
-export declare type PdmTableVariant = 'default' | 'data' | 'interactive';
+export declare type PdmTableVariant = "default" | "data" | "interactive";
 /**
  * Componente base de tabla con soporte responsive
  *

package/lib/components/tabs/tabs.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter } from "@angular/core";
 import * as i0 from "@angular/core";
 export interface PdmTabItem {
     label: string;

package/lib/components/toggle-group/toggle-group.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter } from "@angular/core";
 import * as i0 from "@angular/core";
 export interface PdmToggleGroupItem {
     label: string;

package/lib/components/tooltip/tooltip.component.d.ts

@@ -1,10 +1,28 @@
+import { ChangeDetectorRef, ElementRef, OnDestroy, ViewContainerRef } from "@angular/core";
+import { Overlay } from "@angular/cdk/overlay";
 import * as i0 from "@angular/core";
-export declare class PdmTooltipComponent {
+export declare class PdmTooltipComponent implements OnDestroy {
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly elementRef;
+    private readonly cdr;
     text: string;
-    side: 'top' | 'right' | 'bottom' | 'left';
+    side: "top" | "right" | "bottom" | "left";
     className: string;
+    tooltipTemplate: any;
     open: boolean;
-    get positionClass(): string;
+    private overlayRef;
+    constructor(overlay: Overlay, viewContainerRef: ViewContainerRef, elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
+    ngOnDestroy(): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onFocusIn(): void;
+    onFocusOut(): void;
+    private show;
+    private hide;
+    private createOverlay;
+    private destroyOverlay;
+    private getPositionConfigs;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmTooltipComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PdmTooltipComponent, "pdm-tooltip", never, { "text": "text"; "side": "side"; "className": "className"; }, {}, never, ["*"], false>;
 }

package/lib/overlay/z-index-helper.d.ts

@@ -0,0 +1,36 @@
+export interface OverlayConfig {
+    panelClass?: string | string[];
+}
+/**
+ * Z-Index helper for overlay components.
+ *
+ * CRITICAL: Consumer custom panelClass MUST NOT replace the base z-index.
+ * This helper ensures z-index is preserved when merging custom classes.
+ */
+/**
+ * Base z-index class for overlays - MUST be included in any overlay panel.
+ * This ensures overlays appear above modals (z-50) and drawers (z-40).
+ */
+export declare const OVERLAY_BASE_Z_INDEX = "z-[70]";
+/**
+ * Merge consumer's panelClass with our base z-index.
+ * Consumer classes are APPENDED, not replacing our z-index guarantee.
+ *
+ * @param baseZIndex - Base z-index class to enforce (default: OVERLAY_BASE_Z_INDEX)
+ * @param consumerClasses - Optional additional classes from consumer
+ * @returns Array of classes safe for CDK Overlay panelClass
+ */
+export declare function mergeOverlayPanelClass(baseZIndex?: string, consumerClasses?: string | string[]): string[];
+/**
+ * Create OverlayConfig with guaranteed z-index.
+ * Use this instead of direct OverlayConfig to ensure z-index enforcement.
+ *
+ * @param baseConfig - Base overlay configuration
+ * @param consumerPanelClass - Optional consumer panelClass to merge
+ * @returns OverlayConfig with z-index guarantee
+ */
+export declare function createZIndexEnforcedOverlay(baseConfig: OverlayConfig, consumerPanelClass?: string | string[]): OverlayConfig;
+/**
+ * Helper to extract z-index from a class string for debugging.
+ */
+export declare function extractZIndex(classes: string | string[]): string | null;

package/lib/utils/z-index.d.ts

@@ -5,15 +5,15 @@
  * 1. base (z-0) - Elementos normales del DOM
  * 2. dropdown (z-10) - Selects, combobox, date-pickers
  * 3. sticky (z-20) - Headers, navigation bars
- * 4. overlay (z-30) - Popovers, hover cards, context menus
+ * 4. drawerBackdrop (z-30) - Backdrop de drawers
  * 5. drawer (z-40) - Sidebar drawer, sheets laterales
- * 6. modal (z-50) - Dialogs, alert-dialogs
- * 7. modal-backdrop (z-40) - Backdrop de modals
- * 8. popover (z-60) - Tooltips, dropdowns DENTRO de modals
+ * 6. modalBackdrop (z-40) - Backdrop de modals ( mismo nivel que drawer)
+ * 7. modal (z-50) - Dialogs, alert-dialogs
+ * 8. popover (z-[70]) - Tooltips, dropdowns DENTRO de modals
  * 9. toast (z-[100]) - Notificaciones que deben estar sobre TODO
  *
  * REGLA CRÍTICA:
- * - Componentes overlay (select options, dropdown menu, tooltip) SIEMPRE z-60 o mayor
+ * - Componentes overlay (select options, dropdown menu, tooltip) SIEMPRE z-[70] o mayor
  * - Esto permite que funcionen DENTRO de modals (z-50)
  * - Backdrop de modal debe ser z-40 para estar DEBAJO del contenido del modal (z-50)
  */
@@ -24,41 +24,37 @@ export declare const Z_INDEX: {
     readonly base: "z-0";
     /**
      * Dropdown - Selects, combobox, date-pickers
-     * Debe estar SOBRE contenido normal pero BAJO modals
+     * Debe estar SOBRE contenido normal pero BAJO overlays
      */
     readonly dropdown: "z-10";
     /**
      * Sticky - Headers, navigation fija
      */
     readonly sticky: "z-20";
-    /**
-     * Overlay - Popovers, hover cards, context menus
-     * Debe estar SOBRE sticky pero BAJO modals
-     */
-    readonly overlay: "z-30";
     /**
      * Drawer backdrop - Backdrop de sidebar drawer
-     * Debe estar DEBAJO del drawer panel
+     * Debe estar DEBAJO del drawer panel y DEBAJO de modals
      */
-    readonly drawerBackdrop: "z-40";
+    readonly drawerBackdrop: "z-30";
     /**
      * Drawer - Sidebar drawer, sheets laterales
      * Debe estar SOBRE su backdrop pero BAJO modals
      */
-    readonly drawer: "z-50";
+    readonly drawer: "z-40";
     /**
      * Modal backdrop - Backdrop de dialogs
-     * Debe estar SOBRE drawers pero DEBAJO del contenido del modal
+     * Mismo nivel que drawer backdrop (z-40)
      */
-    readonly modalBackdrop: "z-50";
+    readonly modalBackdrop: "z-40";
     /**
-     * Modal - Dialogs, alert-dialogs, sheets
+     * Modal - Dialogs, alert-dialogs
      * Debe estar SOBRE su backdrop
      */
-    readonly modal: "z-[60]";
+    readonly modal: "z-50";
     /**
      * Popover - Tooltips, dropdowns, selects options DENTRO de modals
      * CRÍTICO: Debe ser MAYOR que modal (z-50) para aparecer sobre modals
+     * USAR SIEMPRE mergeOverlayPanelClass() para asegurar este valor
      */
     readonly popover: "z-[70]";
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdm-ui-kit",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "PDM UI Kit Angular components - Responsive by default",
   "author": "Corelusa",
   "license": "MIT",
@@ -18,11 +18,11 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@angular/common": ">=14.0.0 <16.0.0",
-    "@angular/core": ">=14.0.0 <16.0.0",
-    "@angular/platform-browser": ">=14.0.0 <16.0.0",
-    "lucide": ">=0.575.0",
-    "@angular/cdk": ">=14.2.7 <16.0.0"
+    "@angular/cdk": ">=15.0.0",
+    "@angular/common": ">=15.0.0",
+    "@angular/core": ">=15.0.0",
+    "@angular/platform-browser": ">=15.0.0",
+    "lucide": ">=0.575.0"
   },
   "dependencies": {
     "date-fns": "^2.30.0",