pdm-ui-kit 0.1.49 → 0.2.0

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

@@ -9,13 +9,21 @@ export declare class PdmAlertDialogComponent {
     confirmText: string;
     cancelText: string;
     className: string;
+    /** Close when the ESC key is pressed. Default: `true`. */
+    closeOnEsc: boolean;
     openChange: EventEmitter<boolean>;
     confirm: EventEmitter<void>;
     cancel: EventEmitter<void>;
+    /**
+     * Returns `true` when at least one consumer listens to `openChange`.
+     * - **Controlled** (has observers): parent manages `open` via two-way binding → only emit.
+     * - **Uncontrolled** (no observers): we own the `open` state → mutate it locally.
+     */
+    private get isControlled();
     onTriggerClick(): void;
     onCancel(): void;
     onConfirm(): void;
     onEsc(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmAlertDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmAlertDialogComponent, "pdm-alert-dialog", never, { "open": "open"; "showTrigger": "showTrigger"; "triggerText": "triggerText"; "title": "title"; "description": "description"; "confirmText": "confirmText"; "cancelText": "cancelText"; "className": "className"; }, { "openChange": "openChange"; "confirm": "confirm"; "cancel": "cancel"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmAlertDialogComponent, "pdm-alert-dialog", never, { "open": "open"; "showTrigger": "showTrigger"; "triggerText": "triggerText"; "title": "title"; "description": "description"; "confirmText": "confirmText"; "cancelText": "cancelText"; "className": "className"; "closeOnEsc": "closeOnEsc"; }, { "openChange": "openChange"; "confirm": "confirm"; "cancel": "cancel"; }, never, never, false>;
 }

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

@@ -1,10 +1,32 @@
 import * as i0 from "@angular/core";
 export declare type PdmBreadcrumbMode = 'custom-separator' | 'dropdown' | 'collapsed' | 'link-component' | 'responsive';
+/**
+ * Breadcrumb component con soporte responsive
+ *
+ * MEJORADO en v0.2.0:
+ * - Modo responsive real con overflow-x-auto
+ * - Collapse inteligente en mobile
+ *
+ * @example
+ * <pdm-breadcrumb
+ *   mode="responsive"
+ *   [items]="['Home', 'Products', 'Electronics', 'Laptops']">
+ * </pdm-breadcrumb>
+ */
 export declare class PdmBreadcrumbComponent {
     mode: PdmBreadcrumbMode;
     items: string[];
     className: string;
+    /**
+     * Cantidad mínima de items para mostrar en mobile cuando mode="responsive"
+     * Default: 2 (primer y último item)
+     */
+    minItemsMobile: number;
     get renderedItems(): string[];
+    /**
+     * Determina si un item debe estar visible en mobile (modo responsive)
+     */
+    shouldShowInMobile(index: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmBreadcrumbComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmBreadcrumbComponent, "pdm-breadcrumb", never, { "mode": "mode"; "items": "items"; "className": "className"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmBreadcrumbComponent, "pdm-breadcrumb", never, { "mode": "mode"; "items": "items"; "className": "className"; "minItemsMobile": "minItemsMobile"; }, {}, never, never, false>;
 }

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

@@ -1,24 +1,37 @@
-import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare type PdmCardVariant = 'default' | 'login';
+/**
+ * Card component - Visual container primitivo
+ *
+ * BREAKING CHANGE en v0.2.0: variant="login" eliminado.
+ * Card es ahora un componente UI puro sin lógica de negocio.
+ *
+ * Para crear un login form, componer con primitivos:
+ *
+ * @example
+ * <pdm-card>
+ *   <div pdmCardHeader>
+ *     <h3 class="text-lg font-semibold">Login</h3>
+ *     <p class="text-sm text-muted-foreground">Enter your credentials</p>
+ *   </div>
+ *   <div pdmCardContent>
+ *     <form [formGroup]="form">
+ *       <pdm-field>
+ *         <pdm-label>Email</pdm-label>
+ *         <pdm-input type="email" formControlName="email" />
+ *       </pdm-field>
+ *       <pdm-field>
+ *         <pdm-label>Password</pdm-label>
+ *         <pdm-input-password formControlName="password" />
+ *       </pdm-field>
+ *     </form>
+ *   </div>
+ *   <div pdmCardFooter>
+ *     <pdm-button (click)="onLogin()">Login</pdm-button>
+ *   </div>
+ * </pdm-card>
+ */
 export declare class PdmCardComponent {
-    variant: PdmCardVariant;
     className: string;
-    title: string;
-    description: string;
-    actionText: string;
-    emailLabel: string;
-    emailPlaceholder: string;
-    passwordLabel: string;
-    passwordHint: string;
-    primaryActionText: string;
-    secondaryActionText: string;
-    primaryAction: EventEmitter<void>;
-    secondaryAction: EventEmitter<void>;
-    actionPressed: EventEmitter<void>;
-    onPrimaryAction(): void;
-    onSecondaryAction(): void;
-    onActionPressed(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmCardComponent, "pdm-card", never, { "variant": "variant"; "className": "className"; "title": "title"; "description": "description"; "actionText": "actionText"; "emailLabel": "emailLabel"; "emailPlaceholder": "emailPlaceholder"; "passwordLabel": "passwordLabel"; "passwordHint": "passwordHint"; "primaryActionText": "primaryActionText"; "secondaryActionText": "secondaryActionText"; }, { "primaryAction": "primaryAction"; "secondaryAction": "secondaryAction"; "actionPressed": "actionPressed"; }, never, ["[pdmCardHeader]", "[pdmCardContent]", "[pdmCardFooter]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmCardComponent, "pdm-card", never, { "className": "className"; }, {}, never, ["[pdmCardHeader]", "[pdmCardContent]", "[pdmCardFooter]"], false>;
 }

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

@@ -1,11 +1,11 @@
-import { ElementRef, EventEmitter } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 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 {
+export declare class PdmContextMenuComponent implements OnInit, OnDestroy {
     private readonly elementRef;
     items: PdmContextMenuItem[];
     className: string;
@@ -16,11 +16,14 @@ export declare class PdmContextMenuComponent {
     open: boolean;
     x: number;
     y: number;
+    private boundPointerDown;
     constructor(elementRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     onContextMenu(event: MouseEvent): void;
     select(item: PdmContextMenuItem): void;
     onEsc(): void;
-    onDocumentClick(event: MouseEvent): void;
+    private onDocumentPointerDown;
     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>;
 }

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

@@ -1,5 +1,10 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { TableResponsiveStrategy } from '../../utils/responsive';
 import * as i0 from "@angular/core";
+/**
+ * DEPRECATED: Esta interfaz es para backward compatibility
+ * Usar PdmDataTableColumn<T> con tipo genérico en su lugar
+ */
 export interface PdmDataTableRow {
     id: string;
     status: string;
@@ -7,36 +12,189 @@ export interface PdmDataTableRow {
     amount: string;
     selected?: boolean;
 }
-export declare class PdmDataTableComponent {
+/**
+ * Definición de columna para data-table genérico
+ */
+export interface PdmDataTableColumn<T = any> {
+    /**
+     * Key del campo en el objeto de datos
+     * Usado para acceder al valor: row[key]
+     */
+    key: keyof T;
+    /**
+     * Label a mostrar en el header
+     */
+    label: string;
+    /**
+     * Ancho de la columna (CSS width)
+     * Ej: '100px', '20%', 'auto'
+     */
+    width?: string;
+    /**
+     * Si la columna es sortable
+     */
+    sortable?: boolean;
+    /**
+     * Alineación del contenido
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Función custom para renderizar el valor
+     * Si no se provee, se usa toString() del valor
+     */
+    render?: (value: any, row: T) => string;
+    /**
+     * Template personalizado para la celda
+     * Tiene prioridad sobre render()
+     */
+    cellTemplate?: TemplateRef<{
+        $implicit: T;
+        value: any;
+    }>;
+    /**
+     * Si es true, la columna se oculta en mobile
+     * Solo se muestra en breakpoint md+ (768px)
+     */
+    hideOnMobile?: boolean;
+    /**
+     * CSS classes adicionales para las celdas de esta columna
+     */
+    cellClass?: string;
+    /**
+     * CSS classes adicionales para el header de esta columna
+     */
+    headerClass?: string;
+}
+/**
+ * Data-table genérico con paginación, filtrado y selección
+ *
+ * NUEVO: Ahora es genérico y configurable via columnas
+ *
+ * @example
+ * // Definir columnas
+ * columns: PdmDataTableColumn<User>[] = [
+ *   { key: 'name', label: 'Name', sortable: true },
+ *   { key: 'email', label: 'Email', sortable: true },
+ *   { key: 'role', label: 'Role', hideOnMobile: true },
+ *   { key: 'createdAt', label: 'Created', render: (val) => formatDate(val) }
+ * ];
+ *
+ * // En el template
+ * <pdm-data-table
+ *   [columns]="columns"
+ *   [rows]="users"
+ *   [selectable]="true"
+ *   (selectionChange)="onSelect($event)">
+ * </pdm-data-table>
+ */
+export declare class PdmDataTableComponent<T = any> {
     className: string;
+    /**
+     * Columnas a mostrar
+     * Si no se provee, intenta inferir del primer row (legacy mode)
+     */
+    columns: PdmDataTableColumn<T>[];
+    /**
+     * Estrategia responsive de la tabla
+     */
+    responsiveStrategy: TableResponsiveStrategy;
+    /**
+     * Si es true, muestra checkbox de selección en cada fila
+     */
+    selectable: boolean;
+    /**
+     * Si es true, muestra botón de acciones (tres puntos) en cada fila
+     */
+    showActions: boolean;
+    /**
+     * Si es true, muestra filtro de búsqueda
+     */
+    showFilter: boolean;
+    /**
+     * Si es true, muestra controles de paginación
+     */
+    showPagination: boolean;
+    /**
+     * Si es true, muestra selector de columnas
+     */
+    showColumnSelector: boolean;
     filterPlaceholder: string;
     columnsLabel: string;
-    statusLabel: string;
-    emailLabel: string;
-    amountLabel: string;
     previousLabel: string;
     nextLabel: string;
     emptyLabel: string;
-    rows: PdmDataTableRow[];
+    rowsSelectedLabel: string;
+    /**
+     * @deprecated Use columns configuration instead
+     */
+    statusLabel: string;
+    /**
+     * @deprecated Use columns configuration instead
+     */
+    emailLabel: string;
+    /**
+     * @deprecated Use columns configuration instead
+     */
+    amountLabel: string;
+    /**
+     * Datos a mostrar
+     */
+    rows: T[];
+    /**
+     * Página actual (1-indexed)
+     */
     page: number;
+    /**
+     * Cantidad de filas por página
+     */
     pageSize: number;
+    /**
+     * Query de filtrado
+     */
     query: string;
+    /**
+     * Función custom de filtrado
+     * Si no se provee, busca en todos los campos string
+     */
+    filterFn?: (row: T, query: string) => boolean;
     queryChange: EventEmitter<string>;
-    rowAction: EventEmitter<string>;
+    rowAction: EventEmitter<T>;
     pageChange: EventEmitter<number>;
     selectionChange: EventEmitter<{
-        id: string;
+        row: T;
         selected: boolean;
     }>;
-    get filteredRows(): PdmDataTableRow[];
-    get pagedRows(): PdmDataTableRow[];
+    columnSort: EventEmitter<{
+        column: PdmDataTableColumn<T>;
+        direction: 'asc' | 'desc';
+    }>;
+    selectedRows: Set<T>;
+    sortColumn?: PdmDataTableColumn<T>;
+    sortDirection: 'asc' | 'desc';
+    /**
+     * Backward compatibility: si no hay columnas definidas, inferir del primer row
+     */
+    get effectiveColumns(): PdmDataTableColumn<T>[];
+    /**
+     * LEGACY: mapeo de keys a labels hardcodeados
+     */
+    private getLegacyLabel;
+    get filteredRows(): T[];
+    get pagedRows(): T[];
     get totalPages(): number;
     get selectedCount(): number;
     onQueryInput(event: Event): void;
-    onToggleRow(row: PdmDataTableRow, event: Event): void;
+    onToggleRow(row: T, event: Event): void;
+    onToggleAll(event: Event): void;
+    isSelected(row: T): boolean;
     previous(): void;
     next(): void;
-    onAction(row: PdmDataTableRow): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDataTableComponent, "pdm-data-table", never, { "className": "className"; "filterPlaceholder": "filterPlaceholder"; "columnsLabel": "columnsLabel"; "statusLabel": "statusLabel"; "emailLabel": "emailLabel"; "amountLabel": "amountLabel"; "previousLabel": "previousLabel"; "nextLabel": "nextLabel"; "emptyLabel": "emptyLabel"; "rows": "rows"; "page": "page"; "pageSize": "pageSize"; "query": "query"; }, { "queryChange": "queryChange"; "rowAction": "rowAction"; "pageChange": "pageChange"; "selectionChange": "selectionChange"; }, never, never, false>;
+    onAction(row: T): void;
+    onSort(column: PdmDataTableColumn<T>): void;
+    getCellValue(row: T, column: PdmDataTableColumn<T>): any;
+    getCellClass(column: PdmDataTableColumn<T>): string;
+    getHeaderClass(column: PdmDataTableColumn<T>): string;
+    getColumnStyle(column: PdmDataTableColumn<T>): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDataTableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDataTableComponent<any>, "pdm-data-table", never, { "className": "className"; "columns": "columns"; "responsiveStrategy": "responsiveStrategy"; "selectable": "selectable"; "showActions": "showActions"; "showFilter": "showFilter"; "showPagination": "showPagination"; "showColumnSelector": "showColumnSelector"; "filterPlaceholder": "filterPlaceholder"; "columnsLabel": "columnsLabel"; "previousLabel": "previousLabel"; "nextLabel": "nextLabel"; "emptyLabel": "emptyLabel"; "rowsSelectedLabel": "rowsSelectedLabel"; "statusLabel": "statusLabel"; "emailLabel": "emailLabel"; "amountLabel": "amountLabel"; "rows": "rows"; "page": "page"; "pageSize": "pageSize"; "query": "query"; "filterFn": "filterFn"; }, { "queryChange": "queryChange"; "rowAction": "rowAction"; "pageChange": "pageChange"; "selectionChange": "selectionChange"; "columnSort": "columnSort"; }, never, never, false>;
 }

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

@@ -1,11 +1,43 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare type PdmDialogVariant = 'default' | 'custom-close';
-export declare type PdmDialogSize = 'desktop' | 'mobile' | 'mobile-fullscreen';
+/**
+ * @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';
+/**
+ * Modal/Dialog component con soporte responsive
+ *
+ * MEJORADO en v0.2.0:
+ * - Modo 'responsive' (default): fullscreen en mobile, modal en desktop
+ * - Tamaños predefinidos: sm, md, lg, xl
+ * - Mejor manejo de scroll en mobile
+ *
+ * @example
+ * // Responsive (recomendado)
+ * <pdm-dialog [open]="isOpen" size="responsive">
+ *   <p>Content</p>
+ * </pdm-dialog>
+ *
+ * @example
+ * // Tamaño fijo
+ * <pdm-dialog [open]="isOpen" size="lg">
+ *   <p>Content</p>
+ * </pdm-dialog>
+ */
 export declare class PdmDialogComponent {
     open: boolean;
     variant: PdmDialogVariant;
+    /**
+     * Tamaño del dialog
+     * - responsive: fullscreen mobile, modal desktop (recomendado)
+     * - sm: 400px max
+     * - md: 500px max
+     * - lg: 640px max (default)
+     * - xl: 800px max
+     * - desktop/mobile/mobile-fullscreen: legacy, deprecado
+     */
     size: PdmDialogSize;
     title: string;
     description: string;
@@ -30,9 +62,11 @@ export declare class PdmDialogComponent {
     onSecondaryAction(): void;
     onBackdropClick(): void;
     get panelClassName(): string;
+    private buildClasses;
     get bodyWrapperClassName(): string;
     get headerWrapperClassName(): string;
     get footerWrapperClassName(): string;
+    get containerClassName(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmDialogComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PdmDialogComponent, "pdm-dialog", never, { "open": "open"; "variant": "variant"; "size": "size"; "title": "title"; "description": "description"; "closeOnBackdrop": "closeOnBackdrop"; "closeOnEsc": "closeOnEsc"; "showCloseButton": "showCloseButton"; "showHeader": "showHeader"; "showFooter": "showFooter"; "primaryActionText": "primaryActionText"; "secondaryActionText": "secondaryActionText"; "alignFooter": "alignFooter"; "headerClassName": "headerClassName"; "bodyClassName": "bodyClassName"; "footerClassName": "footerClassName"; "className": "className"; }, { "openChange": "openChange"; "primaryAction": "primaryAction"; "secondaryAction": "secondaryAction"; }, never, ["*"], false>;
 }

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

@@ -0,0 +1,74 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
+import { PdmTableVariant } from '../table/table.component';
+import { TableResponsiveStrategy } from '../../utils/responsive';
+import * as i0 from "@angular/core";
+/**
+ * Tabla con funcionalidad de reordenamiento de filas mediante drag & drop
+ *
+ * Extiende pdm-table agregando la capacidad de reordenar filas.
+ * Si no necesitás drag & drop, usá pdm-table directamente (más simple y liviano).
+ *
+ * @example
+ * <pdm-draggable-table
+ *   variant="interactive"
+ *   [reorderRows]="true"
+ *   (rowOrderChange)="onOrderChange($event)">
+ *   <tbody>
+ *     <tr data-row-id="1"><td>Row 1</td></tr>
+ *     <tr data-row-id="2"><td>Row 2</td></tr>
+ *   </tbody>
+ * </pdm-draggable-table>
+ *
+ * IMPORTANTE: Cada <tr> debe tener un atributo data-row-id único
+ */
+export declare class PdmDraggableTableComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private readonly renderer;
+    variant: PdmTableVariant;
+    responsiveStrategy: TableResponsiveStrategy;
+    className: string;
+    fullBleed: boolean;
+    /**
+     * Habilita el reordenamiento de filas mediante drag & drop
+     */
+    reorderRows: boolean;
+    /**
+     * Selector CSS para identificar los handles de drag
+     * Por defecto busca: [data-drag-handle], [data-slot=row-drag-handle], .row-drag-handle
+     * Si no encuentra ninguno, inserta un handle automático
+     */
+    dragHandleSelector: string;
+    /**
+     * Emite el nuevo orden de las filas cuando el usuario termina de arrastrar
+     * Array de data-row-id en el nuevo orden
+     */
+    rowOrderChange: EventEmitter<string[]>;
+    tableElement?: ElementRef<HTMLTableElement>;
+    private cleanupListeners;
+    private observer?;
+    private draggedRow;
+    constructor(renderer: Renderer2);
+    ngAfterViewInit(): void;
+    get wrapperClasses(): string[];
+    get tableClasses(): string[];
+    private getResponsiveStrategyClasses;
+    private getVariantWrapperClasses;
+    private getVariantTableClasses;
+    private getCellClasses;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private syncReorderBehavior;
+    private cleanupReorderBehavior;
+    private getTbody;
+    private setRowsDraggable;
+    /**
+     * Inserta un handle de drag automático si no existe uno custom
+     */
+    private syncAutoDragHandle;
+    private onDragStart;
+    private onDragOver;
+    private onDrop;
+    private onDragEnd;
+    private armDragFromHandle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDraggableTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDraggableTableComponent, "pdm-draggable-table", never, { "variant": "variant"; "responsiveStrategy": "responsiveStrategy"; "className": "className"; "fullBleed": "fullBleed"; "reorderRows": "reorderRows"; "dragHandleSelector": "dragHandleSelector"; }, { "rowOrderChange": "rowOrderChange"; }, never, ["*"], false>;
+}

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

@@ -1,12 +1,70 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
+export declare type PdmDrawerPosition = 'bottom' | 'left' | 'right' | 'top';
+export declare type PdmDrawerSize = 'sm' | 'md' | 'lg' | 'full';
+/**
+ * @deprecated Use specific drawer types. Will be removed in v0.3.0
+ */
 export declare type PdmDrawerVariant = 'drawer' | 'responsive-dialog';
+/**
+ * Drawer/Sheet component con soporte responsive
+ *
+ * MEJORADO en v0.2.0:
+ * - Posicionamiento configurable (bottom, left, right, top)
+ * - Tamaños predefinidos
+ * - Responsive: bottom sheet en mobile, side panel en desktop
+ * - Contenido genérico via ng-content
+ *
+ * @example
+ * // Drawer simple desde el bottom
+ * <pdm-drawer [open]="isOpen" position="bottom">
+ *   <h3>Title</h3>
+ *   <p>Content</p>
+ * </pdm-drawer>
+ *
+ * @example
+ * // Side panel desde la right
+ * <pdm-drawer [open]="isOpen" position="right" size="md">
+ *   <p>Content</p>
+ * </pdm-drawer>
+ */
 export declare class PdmDrawerComponent {
     open: boolean;
+    /**
+     * Posición del drawer
+     * - bottom: desde abajo (default, mejor para mobile)
+     * - left: side panel desde izquierda
+     * - right: side panel desde derecha
+     * - top: desde arriba (poco común)
+     */
+    position: PdmDrawerPosition;
+    /**
+     * Tamaño del drawer
+     * - sm: 400px (side) / 50vh (bottom/top)
+     * - md: 500px (side) / 66vh (bottom/top) (default)
+     * - lg: 640px (side) / 80vh (bottom/top)
+     * - full: 100% ancho/alto
+     */
+    size: PdmDrawerSize;
+    /**
+     * @deprecated Use position="bottom" instead
+     */
     variant: PdmDrawerVariant;
     className: string;
     title: string;
     description: string;
+    /**
+     * Mostrar handle visual (línea para arrastrar)
+     * Solo tiene sentido en position="bottom"
+     */
+    showHandle: boolean;
+    /**
+     * Mostrar botón de cerrar
+     */
+    showCloseButton: boolean;
+    closeOnEsc: boolean;
+    closeOnBackdropClick: boolean;
+    openChange: EventEmitter<boolean>;
     value: number | string;
     unit: string;
     decrementLabel: string;
@@ -20,13 +78,19 @@ export declare class PdmDrawerComponent {
     usernameLabel: string;
     usernameValue: string;
     responsivePrimaryLabel: string;
-    openChange: EventEmitter<boolean>;
+    bars: number[];
     primaryAction: EventEmitter<void>;
     secondaryAction: EventEmitter<void>;
-    bars: number[];
+    onEsc(): void;
+    onBackdropClick(): void;
     close(): void;
     onPrimaryAction(): void;
     onSecondaryAction(): void;
+    get containerClassName(): string;
+    get panelClassName(): string;
+    private getPositionClasses;
+    private getSizeClasses;
+    get showLegacyContent(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmDrawerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDrawerComponent, "pdm-drawer", never, { "open": "open"; "variant": "variant"; "className": "className"; "title": "title"; "description": "description"; "value": "value"; "unit": "unit"; "decrementLabel": "decrementLabel"; "incrementLabel": "incrementLabel"; "primaryLabel": "primaryLabel"; "secondaryLabel": "secondaryLabel"; "profileTitle": "profileTitle"; "profileDescription": "profileDescription"; "nameLabel": "nameLabel"; "nameValue": "nameValue"; "usernameLabel": "usernameLabel"; "usernameValue": "usernameValue"; "responsivePrimaryLabel": "responsivePrimaryLabel"; "bars": "bars"; }, { "openChange": "openChange"; "primaryAction": "primaryAction"; "secondaryAction": "secondaryAction"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDrawerComponent, "pdm-drawer", never, { "open": "open"; "position": "position"; "size": "size"; "variant": "variant"; "className": "className"; "title": "title"; "description": "description"; "showHandle": "showHandle"; "showCloseButton": "showCloseButton"; "closeOnEsc": "closeOnEsc"; "closeOnBackdropClick": "closeOnBackdropClick"; "value": "value"; "unit": "unit"; "decrementLabel": "decrementLabel"; "incrementLabel": "incrementLabel"; "primaryLabel": "primaryLabel"; "secondaryLabel": "secondaryLabel"; "profileTitle": "profileTitle"; "profileDescription": "profileDescription"; "nameLabel": "nameLabel"; "nameValue": "nameValue"; "usernameLabel": "usernameLabel"; "usernameValue": "usernameValue"; "responsivePrimaryLabel": "responsivePrimaryLabel"; "bars": "bars"; }, { "openChange": "openChange"; "primaryAction": "primaryAction"; "secondaryAction": "secondaryAction"; }, never, ["*"], false>;
 }

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

@@ -1,18 +1,26 @@
-import { EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 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 {
+export declare class PdmMenubarComponent implements OnInit, OnDestroy {
+    private readonly elementRef;
+    private readonly cdr;
     menus: PdmMenubarItem[];
     className: string;
     itemSelect: EventEmitter<string>;
     openIndex: number;
+    private boundPointerDown;
+    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onEsc(): void;
     toggle(index: number): void;
     select(value: string): void;
     selectItem(item: PdmMenuItem): void;
+    private onDocumentPointerDown;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmMenubarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PdmMenubarComponent, "pdm-menubar", never, { "menus": "menus"; "className": "className"; }, { "itemSelect": "itemSelect"; }, never, never, false>;
 }

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

@@ -4,9 +4,30 @@ export interface PdmNavigationItem {
     href?: string;
     active?: boolean;
 }
+export declare type PdmNavigationMobileMode = 'scroll' | 'compact';
+/**
+ * Navigation Menu component - Navegación horizontal responsive
+ *
+ * MEJORAS en v0.2.0:
+ * - Modo scroll: overflow-x-auto con scroll indicators en mobile
+ * - Modo compact: items abreviados en mobile, completos en desktop
+ * - Scroll smooth automático al item activo
+ *
+ * @example
+ * <!-- Scroll horizontal (default) -->
+ * <pdm-navigation-menu [items]="navItems"></pdm-navigation-menu>
+ *
+ * <!-- Compact mode -->
+ * <pdm-navigation-menu [items]="navItems" mobileMode="compact"></pdm-navigation-menu>
+ */
 export declare class PdmNavigationMenuComponent {
     items: PdmNavigationItem[];
     className: string;
+    /**
+     * Mobile behavior: 'scroll' (horizontal scroll) o 'compact' (items reducidos)
+     * @default 'scroll'
+     */
+    mobileMode: PdmNavigationMobileMode;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmNavigationMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmNavigationMenuComponent, "pdm-navigation-menu", never, { "items": "items"; "className": "className"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmNavigationMenuComponent, "pdm-navigation-menu", never, { "items": "items"; "className": "className"; "mobileMode": "mobileMode"; }, {}, never, never, false>;
 }