pdm-ui-kit 1.0.0 → 1.1.0

package/fesm2020/pdm-ui-kit.mjs

@@ -4,10 +4,20 @@ import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
+import * as i3 from 'pdm-ui-kit/src/label';
+import { PdmLabelModule as PdmLabelModule$1 } from 'pdm-ui-kit/src/label';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { format } from 'date-fns';
+import { createFlexiblePositionStrategy as createFlexiblePositionStrategy$1, mergeOverlayPanelClass as mergeOverlayPanelClass$1, OVERLAY_BASE_Z_INDEX as OVERLAY_BASE_Z_INDEX$1 } from 'pdm-ui-kit/src/overlay';
+import * as i2 from 'pdm-ui-kit/src/icon';
+import { PdmIconModule as PdmIconModule$1 } from 'pdm-ui-kit/src/icon';
+import { TABLE_RESPONSIVE as TABLE_RESPONSIVE$1, Z_INDEX as Z_INDEX$1, responsive as responsive$1 } from 'pdm-ui-kit/src/utils';
+import * as i2$1 from 'pdm-ui-kit/src/button';
+import { PdmButtonModule as PdmButtonModule$1 } from 'pdm-ui-kit/src/button';
 import { icons } from 'lucide';
 import * as i1$2 from '@angular/platform-browser';
+import * as i3$1 from 'pdm-ui-kit/src/select';
+import { PdmSelectModule as PdmSelectModule$1 } from 'pdm-ui-kit/src/select';
 
 class PdmAccordionComponent {
     constructor() {
@@ -783,43 +793,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-class PdmLabelComponent {
-    constructor() {
-        this.forId = '';
-        this.required = false;
-        this.className = '';
-    }
-}
-PdmLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmLabelComponent, selector: "pdm-label", inputs: { forId: "forId", required: "required", className: "className" }, ngImport: i0, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-destructive\">*</span>\n</label>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-destructive\">*</span>\n</label>\n" }]
-        }], propDecorators: { forId: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-const COMPONENTS$D = [
-    PdmLabelComponent,
-];
-class PdmLabelModule {
-}
-PdmLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelModule, declarations: [PdmLabelComponent], imports: [CommonModule], exports: [PdmLabelComponent] });
-PdmLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: COMPONENTS$D,
-                    exports: COMPONENTS$D
-                }]
-        }] });
-
 const DAY_MS = 24 * 60 * 60 * 1000;
 class PdmCalendarComponent {
     constructor() {
@@ -1346,129 +1319,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-/**
- * Creates a flexible position strategy that automatically adjusts
- * to keep the overlay within the viewport edges.
- *
- * The strategy tries positions in this order:
- * 1. Bottom-left (origin bottom edge, aligns to left)
- * 2. Top-left (origin top edge, aligns to left)
- * 3. Bottom-right (origin bottom edge, aligns to right)
- * 4. Top-right (origin top edge, aligns to right)
- *
- * CDK Overlay will use the first position that fits within the viewport.
- */
-function createFlexiblePositionStrategy(overlay, triggerElement, offset = 4) {
-    return overlay
-        .position()
-        .flexibleConnectedTo(triggerElement)
-        .withPositions([
-        // Bottom-left (default) - opens downward from left edge
-        {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetY: offset
-        },
-        // Top-left - opens upward from left edge
-        {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom',
-            offsetY: -offset
-        },
-        // Bottom-right - opens downward from right edge
-        {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'top',
-            offsetY: offset
-        },
-        // Top-right - opens upward from right edge
-        {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'bottom',
-            offsetY: -offset
-        }
-    ])
-        .withFlexibleDimensions(false)
-        .withPush(true);
-}
-
-/**
- * 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).
- */
-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
- */
-function mergeOverlayPanelClass(baseZIndex = OVERLAY_BASE_Z_INDEX, consumerClasses) {
-    const baseClasses = baseZIndex.split(" ");
-    if (!consumerClasses) {
-        return baseClasses;
-    }
-    const consumerClassArray = Array.isArray(consumerClasses)
-        ? consumerClasses
-        : consumerClasses.split(" ");
-    // Consumer classes are appended AFTER base classes
-    // This ensures z-index from baseClasses is preserved first
-    return [...baseClasses, ...consumerClassArray];
-}
-/**
- * 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
- */
-function createZIndexEnforcedOverlay(baseConfig, consumerPanelClass) {
-    const mergedClasses = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, consumerPanelClass);
-    const existingPanelClass = baseConfig.panelClass;
-    if (existingPanelClass) {
-        const existingArray = Array.isArray(existingPanelClass)
-            ? existingPanelClass
-            : existingPanelClass.split(" ");
-        return {
-            ...baseConfig,
-            panelClass: [...mergedClasses, ...existingArray],
-        };
-    }
-    return {
-        ...baseConfig,
-        panelClass: mergedClasses,
-    };
-}
-/**
- * Helper to extract z-index from a class string for debugging.
- */
-function extractZIndex(classes) {
-    const classArray = Array.isArray(classes) ? classes : classes.split(" ");
-    for (const cls of classArray) {
-        if (cls.startsWith("z-") || cls.startsWith("z-[")) {
-            return cls;
-        }
-    }
-    return null;
-}
-
 let nextDatePickerId = 0;
 class PdmDatePickerComponent {
     constructor(cdr, overlay, viewContainerRef) {
@@ -1681,13 +1531,13 @@ class PdmDatePickerComponent {
         this._open = true;
         this.openChange.emit(true);
         this.cdr.markForCheck();
-        const positionStrategy = createFlexiblePositionStrategy(this.overlay, triggerEl, 8);
+        const positionStrategy = createFlexiblePositionStrategy$1(this.overlay, triggerEl, 8);
         // CRITICAL: Use mergeOverlayPanelClass to ensure z-index is never lost.
         // Consumer classes are appended AFTER base z-index.
-        const zIndexEnforced = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        const zIndexEnforced = mergeOverlayPanelClass$1(OVERLAY_BASE_Z_INDEX$1, this.panelClassName);
         // Resolve panelClass: overlayOptions.panelClass wins; otherwise use z-index enforced.
         const resolvedPanelClass = this.overlayOptions?.panelClass
-            ? mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.overlayOptions.panelClass)
+            ? mergeOverlayPanelClass$1(OVERLAY_BASE_Z_INDEX$1, this.overlayOptions.panelClass)
             : zIndexEnforced;
         this.overlayRef = this.overlay.create({
             positionStrategy,
@@ -1746,7 +1596,7 @@ class PdmDatePickerComponent {
     }
 }
 PdmDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDatePickerComponent, selector: "pdm-date-picker", inputs: { id: "id", variant: "variant", label: "label", labelClassName: "labelClassName", className: "className", triggerClassName: "triggerClassName", panelClassName: "panelClassName", overlayOptions: "overlayOptions", placeholder: "placeholder", rangePlaceholder: "rangePlaceholder", format: "format", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", allowSameDayRange: "allowSameDayRange", closeOnSelect: "closeOnSelect", minDate: "minDate", maxDate: "maxDate", minYear: "minYear", maxYear: "maxYear", disabledDates: "disabledDates", isDateDisabled: "isDateDisabled", open: "open", value: "value", rangeValue: "rangeValue" }, outputs: { valueChange: "valueChange", rangeValueChange: "rangeValueChange", openChange: "openChange", monthChange: "monthChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"triggerId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"triggerClasses\"\n    [attr.title]=\"displayText\"\n    (click)=\"toggleOpen()\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n        <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n        <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n\n    <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n  </button>\n</div>\n\n<ng-template #panelTemplate>\n  <div [id]=\"panelId\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n    <pdm-calendar\n      [variant]=\"resolvedVariant\"\n      [value]=\"value\"\n      [rangeValue]=\"rangeValue\"\n      [readonly]=\"readonly\"\n      [allowSameDayRange]=\"allowSameDayRange\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [minYear]=\"minYear\"\n      [maxYear]=\"maxYear\"\n      [disabledDates]=\"disabledDates\"\n      [isDateDisabled]=\"isDateDisabled\"\n      (valueChange)=\"onCalendarValueChange($event)\"\n      (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n      (monthChange)=\"onCalendarMonthChange($event)\"\n    ></pdm-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmLabelComponent, selector: "pdm-label", inputs: ["forId", "required", "className"] }, { kind: "component", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: ["variant", "className", "disabledDates", "minDate", "maxDate", "minYear", "maxYear", "isDateDisabled", "allowSameDayRange", "readonly", "value", "rangeValue", "month"], outputs: ["valueChange", "rangeValueChange", "monthChange", "dateClick", "disabledDateClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDatePickerComponent, selector: "pdm-date-picker", inputs: { id: "id", variant: "variant", label: "label", labelClassName: "labelClassName", className: "className", triggerClassName: "triggerClassName", panelClassName: "panelClassName", overlayOptions: "overlayOptions", placeholder: "placeholder", rangePlaceholder: "rangePlaceholder", format: "format", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", allowSameDayRange: "allowSameDayRange", closeOnSelect: "closeOnSelect", minDate: "minDate", maxDate: "maxDate", minYear: "minYear", maxYear: "maxYear", disabledDates: "disabledDates", isDateDisabled: "isDateDisabled", open: "open", value: "value", rangeValue: "rangeValue" }, outputs: { valueChange: "valueChange", rangeValueChange: "rangeValueChange", openChange: "openChange", monthChange: "monthChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"triggerId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"triggerClasses\"\n    [attr.title]=\"displayText\"\n    (click)=\"toggleOpen()\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n        <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n        <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n\n    <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n  </button>\n</div>\n\n<ng-template #panelTemplate>\n  <div [id]=\"panelId\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n    <pdm-calendar\n      [variant]=\"resolvedVariant\"\n      [value]=\"value\"\n      [rangeValue]=\"rangeValue\"\n      [readonly]=\"readonly\"\n      [allowSameDayRange]=\"allowSameDayRange\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [minYear]=\"minYear\"\n      [maxYear]=\"maxYear\"\n      [disabledDates]=\"disabledDates\"\n      [isDateDisabled]=\"isDateDisabled\"\n      (valueChange)=\"onCalendarValueChange($event)\"\n      (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n      (monthChange)=\"onCalendarMonthChange($event)\"\n    ></pdm-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PdmLabelComponent, selector: "pdm-label", inputs: ["forId", "required", "className"] }, { kind: "component", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: ["variant", "className", "disabledDates", "minDate", "maxDate", "minYear", "maxYear", "isDateDisabled", "allowSameDayRange", "readonly", "value", "rangeValue", "month"], outputs: ["valueChange", "rangeValueChange", "monthChange", "dateClick", "disabledDateClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: "pdm-date-picker", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"triggerId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"triggerClasses\"\n    [attr.title]=\"displayText\"\n    (click)=\"toggleOpen()\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n        <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n        <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n\n    <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n  </button>\n</div>\n\n<ng-template #panelTemplate>\n  <div [id]=\"panelId\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n    <pdm-calendar\n      [variant]=\"resolvedVariant\"\n      [value]=\"value\"\n      [rangeValue]=\"rangeValue\"\n      [readonly]=\"readonly\"\n      [allowSameDayRange]=\"allowSameDayRange\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [minYear]=\"minYear\"\n      [maxYear]=\"maxYear\"\n      [disabledDates]=\"disabledDates\"\n      [isDateDisabled]=\"isDateDisabled\"\n      (valueChange)=\"onCalendarValueChange($event)\"\n      (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n      (monthChange)=\"onCalendarMonthChange($event)\"\n    ></pdm-calendar>\n  </div>\n</ng-template>\n" }]
@@ -1821,18 +1671,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$C = [PdmCalendarComponent, PdmDatePickerComponent];
+const COMPONENTS$D = [PdmCalendarComponent, PdmDatePickerComponent];
 class PdmCalendarModule {
 }
 PdmCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarModule, declarations: [PdmCalendarComponent, PdmDatePickerComponent], imports: [CommonModule, OverlayModule, PdmLabelModule], exports: [PdmCalendarComponent, PdmDatePickerComponent] });
-PdmCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarModule, imports: [CommonModule, OverlayModule, PdmLabelModule] });
+PdmCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarModule, declarations: [PdmCalendarComponent, PdmDatePickerComponent], imports: [CommonModule, OverlayModule, PdmLabelModule$1], exports: [PdmCalendarComponent, PdmDatePickerComponent] });
+PdmCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarModule, imports: [CommonModule, OverlayModule, PdmLabelModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, OverlayModule, PdmLabelModule],
-                    declarations: COMPONENTS$C,
-                    exports: COMPONENTS$C,
+                    imports: [CommonModule, OverlayModule, PdmLabelModule$1],
+                    declarations: COMPONENTS$D,
+                    exports: COMPONENTS$D,
                 }]
         }] });
 
@@ -1881,7 +1731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$B = [
+const COMPONENTS$C = [
     PdmCardComponent,
 ];
 class PdmCardModule {
@@ -1893,8 +1743,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$B,
-                    exports: COMPONENTS$B
+                    declarations: COMPONENTS$C,
+                    exports: COMPONENTS$C
                 }]
         }] });
 
@@ -1997,7 +1847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$A = [
+const COMPONENTS$B = [
     PdmCarouselComponent,
 ];
 class PdmCarouselModule {
@@ -2009,8 +1859,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$A,
-                    exports: COMPONENTS$A
+                    declarations: COMPONENTS$B,
+                    exports: COMPONENTS$B
                 }]
         }] });
 
@@ -2188,7 +2038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$z = [
+const COMPONENTS$A = [
     PdmChartComponent,
 ];
 class PdmChartModule {
@@ -2200,8 +2050,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$z,
-                    exports: COMPONENTS$z
+                    declarations: COMPONENTS$A,
+                    exports: COMPONENTS$A
                 }]
         }] });
 
@@ -2249,7 +2099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$y = [
+const COMPONENTS$z = [
     PdmCheckboxComponent,
 ];
 class PdmCheckboxModule {
@@ -2261,8 +2111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$y,
-                    exports: COMPONENTS$y
+                    declarations: COMPONENTS$z,
+                    exports: COMPONENTS$z
                 }]
         }] });
 
@@ -2306,7 +2156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$x = [
+const COMPONENTS$y = [
     PdmCollapsibleComponent,
 ];
 class PdmCollapsibleModule {
@@ -2318,8 +2168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$x,
-                    exports: COMPONENTS$x
+                    declarations: COMPONENTS$y,
+                    exports: COMPONENTS$y
                 }]
         }] });
 
@@ -2387,7 +2237,7 @@ class PdmComboboxComponent {
             .withPositions(this.getPositionConfigs())
             .withFlexibleDimensions(false)
             .withPush(true);
-        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        const panelClass = mergeOverlayPanelClass$1(OVERLAY_BASE_Z_INDEX$1, this.panelClassName);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             panelClass,
@@ -2490,7 +2340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$w = [
+const COMPONENTS$x = [
     PdmComboboxComponent,
 ];
 class PdmComboboxModule {
@@ -2502,182 +2352,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$w,
-                    exports: COMPONENTS$w
+                    declarations: COMPONENTS$x,
+                    exports: COMPONENTS$x
                 }]
         }] });
 
-const FALLBACK_NODE = [['circle', { cx: '12', cy: '12', r: '9' }]];
-class PdmIconComponent {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-        this.name = 'check';
-        this.library = 'lucide';
-        this.assetUrl = null;
-        this.size = 16;
-        this.strokeWidth = 1.5;
-        this.className = '';
-        this.ariaLabel = null;
-        this.decorative = false;
-        this.lucideIndex = this.buildLucideIndex();
-        this.aliasMapByLibrary = {
-            lucide: {
-                'check-circle': 'circle-check',
-                'alert-circle': 'circle-alert',
-                info: 'circle-info',
-                'sort-asc': 'arrow-up-a-z',
-                'sort-desc': 'arrow-down-z-a'
-            },
-            tabler: {
-                'alert-triangle': 'triangle-alert',
-                'user-circle': 'circle-user',
-                'settings-2': 'settings-2',
-                'external-link': 'external-link'
-            },
-            hugeicons: {
-                'alert-02': 'circle-alert',
-                'user-circle': 'circle-user',
-                'search-01': 'search',
-                'settings-01': 'settings',
-                'arrow-right-01': 'chevron-right',
-                'arrow-down-01': 'chevron-down'
-            },
-            phosphor: {
-                'warning-circle': 'circle-alert',
-                'caret-down': 'chevron-down',
-                'caret-right': 'chevron-right',
-                'user-circle': 'circle-user',
-                gear: 'settings',
-                'arrow-square-out': 'external-link'
-            },
-            remix: {
-                'alert-line': 'circle-alert',
-                'arrow-right-line': 'chevron-right',
-                'arrow-down-s-line': 'chevron-down',
-                'external-link-line': 'external-link',
-                'user-line': 'user',
-                'settings-3-line': 'settings'
-            }
-        };
-    }
-    get resolvedStrokeWidth() {
-        const value = Number(this.strokeWidth);
-        if (Number.isFinite(value) && value > 0) {
-            return value;
-        }
-        if (this.library === 'phosphor') {
-            return 1.6;
-        }
-        if (this.library === 'tabler') {
-            return 1.8;
-        }
-        return 1.5;
-    }
-    get resolvedSize() {
-        const value = Number(this.size);
-        return Number.isFinite(value) && value > 0 ? value : 16;
-    }
-    get iconKey() {
-        const raw = `${this.name || ''}`.trim();
-        if (!raw) {
-            return 'circle';
-        }
-        const trimmed = raw.replace(/^(lucide|tabler|hugeicons|phosphor|remix)\//, '');
-        const aliases = this.aliasMapByLibrary[this.library] ?? {};
-        return aliases[trimmed] ?? trimmed;
-    }
-    get svgMarkup() {
-        const node = this.resolveIconNode(this.iconKey) ?? FALLBACK_NODE;
-        const strokeWidth = this.escapeAttr(this.resolvedStrokeWidth);
-        const size = this.escapeAttr(this.resolvedSize);
-        const body = node
-            .map(([tag, attrs]) => {
-            const serializedAttrs = Object.entries(attrs)
-                .map(([key, value]) => `${key}="${this.escapeAttr(value)}"`)
-                .join(' ');
-            return serializedAttrs ? `<${tag} ${serializedAttrs}></${tag}>` : `<${tag}></${tag}>`;
-        })
-            .join('');
-        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
-        return this.sanitizer.bypassSecurityTrustHtml(svg);
-    }
-    resolveIconNode(iconName) {
-        const normalized = this.normalizeIconName(iconName);
-        return this.lucideIndex.get(normalized) ?? null;
-    }
-    normalizeIconName(name) {
-        return `${name || ''}`.toLowerCase().replace(/[^a-z0-9]/g, '');
-    }
-    buildLucideIndex() {
-        const map = new Map();
-        Object.entries(icons).forEach(([iconName, iconNode]) => {
-            map.set(this.normalizeIconName(iconName), iconNode);
-        });
-        return map;
-    }
-    escapeAttr(value) {
-        return `${value ?? ''}`
-            .replace(/&/g, '&amp;')
-            .replace(/"/g, '&quot;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;');
-    }
-}
-PdmIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-PdmIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmIconComponent, selector: "pdm-icon", inputs: { name: "name", library: "library", assetUrl: "assetUrl", size: "size", strokeWidth: "strokeWidth", className: "className", ariaLabel: "ariaLabel", decorative: "decorative" }, ngImport: i0, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { name: [{
-                type: Input
-            }], library: [{
-                type: Input
-            }], assetUrl: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], decorative: [{
-                type: Input
-            }] } });
-
-const COMPONENTS$v = [
-    PdmIconComponent,
-];
-class PdmIconModule {
-}
-PdmIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, declarations: [PdmIconComponent], imports: [CommonModule], exports: [PdmIconComponent] });
-PdmIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: COMPONENTS$v,
-                    exports: COMPONENTS$v
-                }]
-        }] });
-
-class PdmCommandComponent {
-    constructor() {
-        this.open = true;
-        this.hintLabel = 'Press';
-        this.hintKey = 'J';
-        this.placeholder = 'Type a command or search...';
-        this.emptyMessage = 'No results found.';
-        this.items = [
-            { label: 'Calendar', value: 'calendar', group: 'Suggestions', icon: 'calendar' },
-            { label: 'Search emoji', value: 'emoji', group: 'Suggestions', icon: 'smile' },
-            { label: 'Calculator', value: 'calculator', group: 'Suggestions', icon: 'calculator', disabled: true },
-            { label: 'Profile', value: 'profile', group: 'Settings', icon: 'user', shortcut: '⌘P' },
-            { label: 'Billing', value: 'billing', group: 'Settings', icon: 'credit-card', shortcut: '⌘B' },
-            { label: 'Settings', value: 'settings', group: 'Settings', icon: 'settings', shortcut: '⌘S' }
-        ];
+class PdmCommandComponent {
+    constructor() {
+        this.open = true;
+        this.hintLabel = 'Press';
+        this.hintKey = 'J';
+        this.placeholder = 'Type a command or search...';
+        this.emptyMessage = 'No results found.';
+        this.items = [
+            { label: 'Calendar', value: 'calendar', group: 'Suggestions', icon: 'calendar' },
+            { label: 'Search emoji', value: 'emoji', group: 'Suggestions', icon: 'smile' },
+            { label: 'Calculator', value: 'calculator', group: 'Suggestions', icon: 'calculator', disabled: true },
+            { label: 'Profile', value: 'profile', group: 'Settings', icon: 'user', shortcut: '⌘P' },
+            { label: 'Billing', value: 'billing', group: 'Settings', icon: 'credit-card', shortcut: '⌘B' },
+            { label: 'Settings', value: 'settings', group: 'Settings', icon: 'settings', shortcut: '⌘S' }
+        ];
         this.className = '';
         this.itemSelect = new EventEmitter();
         this.openChange = new EventEmitter();
@@ -2710,7 +2404,7 @@ class PdmCommandComponent {
     }
 }
 PdmCommandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCommandComponent, selector: "pdm-command", inputs: { open: "open", hintLabel: "hintLabel", hintKey: "hintKey", placeholder: "placeholder", emptyMessage: "emptyMessage", items: "items", className: "className" }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngIf=\"!open\" class=\"flex items-center gap-1\">\n    <span class=\"text-sm font-medium text-muted-foreground\">{{\n      hintLabel\n    }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none box-border items-center gap-0.5 rounded-sm border border-solid border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon\n        name=\"command\"\n        [size]=\"12\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <span class=\"text-xs text-muted-foreground\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-lg border border-solid border-border bg-popover text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <pdm-icon\n        name=\"search\"\n        [size]=\"16\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full appearance-none box-border bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n      />\n    </div>\n\n    <div class=\"max-h-[50vh] overflow-y-auto p-1 md:max-h-72\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div\n          *ngIf=\"group.name\"\n          class=\"px-2 py-1.5 text-xs text-muted-foreground\"\n        >\n          {{ group.name }}\n        </div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none box-border items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : '',\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span\n            class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\"\n          >\n            <pdm-icon\n              *ngIf=\"item.icon\"\n              [name]=\"item.icon\"\n              [size]=\"16\"\n              [decorative]=\"true\"\n            ></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n            item.shortcut\n          }}</span>\n        </button>\n        <div\n          *ngIf=\"groupIndex === 0 && groupedItems.length > 1\"\n          class=\"my-1 border-t border-border\"\n        ></div>\n      </ng-container>\n\n      <p\n        *ngIf=\"filteredItems.length === 0\"\n        class=\"m-0 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ emptyMessage }}\n      </p>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmCommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCommandComponent, selector: "pdm-command", inputs: { open: "open", hintLabel: "hintLabel", hintKey: "hintKey", placeholder: "placeholder", emptyMessage: "emptyMessage", items: "items", className: "className" }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngIf=\"!open\" class=\"flex items-center gap-1\">\n    <span class=\"text-sm font-medium text-muted-foreground\">{{\n      hintLabel\n    }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none box-border items-center gap-0.5 rounded-sm border border-solid border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon\n        name=\"command\"\n        [size]=\"12\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <span class=\"text-xs text-muted-foreground\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-lg border border-solid border-border bg-popover text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <pdm-icon\n        name=\"search\"\n        [size]=\"16\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full appearance-none box-border bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n      />\n    </div>\n\n    <div class=\"max-h-[50vh] overflow-y-auto p-1 md:max-h-72\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div\n          *ngIf=\"group.name\"\n          class=\"px-2 py-1.5 text-xs text-muted-foreground\"\n        >\n          {{ group.name }}\n        </div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none box-border items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : '',\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span\n            class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\"\n          >\n            <pdm-icon\n              *ngIf=\"item.icon\"\n              [name]=\"item.icon\"\n              [size]=\"16\"\n              [decorative]=\"true\"\n            ></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n            item.shortcut\n          }}</span>\n        </button>\n        <div\n          *ngIf=\"groupIndex === 0 && groupedItems.length > 1\"\n          class=\"my-1 border-t border-border\"\n        ></div>\n      </ng-container>\n\n      <p\n        *ngIf=\"filteredItems.length === 0\"\n        class=\"m-0 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ emptyMessage }}\n      </p>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-command', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngIf=\"!open\" class=\"flex items-center gap-1\">\n    <span class=\"text-sm font-medium text-muted-foreground\">{{\n      hintLabel\n    }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none box-border items-center gap-0.5 rounded-sm border border-solid border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon\n        name=\"command\"\n        [size]=\"12\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <span class=\"text-xs text-muted-foreground\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-lg border border-solid border-border bg-popover text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <pdm-icon\n        name=\"search\"\n        [size]=\"16\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full appearance-none box-border bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n      />\n    </div>\n\n    <div class=\"max-h-[50vh] overflow-y-auto p-1 md:max-h-72\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div\n          *ngIf=\"group.name\"\n          class=\"px-2 py-1.5 text-xs text-muted-foreground\"\n        >\n          {{ group.name }}\n        </div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none box-border items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : '',\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span\n            class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\"\n          >\n            <pdm-icon\n              *ngIf=\"item.icon\"\n              [name]=\"item.icon\"\n              [size]=\"16\"\n              [decorative]=\"true\"\n            ></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n            item.shortcut\n          }}</span>\n        </button>\n        <div\n          *ngIf=\"groupIndex === 0 && groupedItems.length > 1\"\n          class=\"my-1 border-t border-border\"\n        ></div>\n      </ng-container>\n\n      <p\n        *ngIf=\"filteredItems.length === 0\"\n        class=\"m-0 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ emptyMessage }}\n      </p>\n    </div>\n  </section>\n</div>\n" }]
@@ -2734,18 +2428,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$u = [PdmCommandComponent];
+const COMPONENTS$w = [PdmCommandComponent];
 class PdmCommandModule {
 }
 PdmCommandModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmCommandModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, declarations: [PdmCommandComponent], imports: [CommonModule, PdmIconModule], exports: [PdmCommandComponent] });
-PdmCommandModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, imports: [CommonModule, PdmIconModule] });
+PdmCommandModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, declarations: [PdmCommandComponent], imports: [CommonModule, PdmIconModule$1], exports: [PdmCommandComponent] });
+PdmCommandModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, imports: [CommonModule, PdmIconModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PdmIconModule],
-                    declarations: COMPONENTS$u,
-                    exports: COMPONENTS$u,
+                    imports: [CommonModule, PdmIconModule$1],
+                    declarations: COMPONENTS$w,
+                    exports: COMPONENTS$w,
                 }]
         }] });
 
@@ -2847,7 +2541,7 @@ class PdmContextMenuComponent {
             .global()
             .left(`${this.x}px`)
             .top(`${this.y}px`);
-        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        const panelClass = mergeOverlayPanelClass$1(OVERLAY_BASE_Z_INDEX$1, this.panelClassName);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             panelClass,
@@ -2908,7 +2602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:click"]
             }] } });
 
-const COMPONENTS$t = [
+const COMPONENTS$v = [
     PdmContextMenuComponent,
 ];
 class PdmContextMenuModule {
@@ -2920,198 +2614,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$t,
-                    exports: COMPONENTS$t
+                    declarations: COMPONENTS$v,
+                    exports: COMPONENTS$v
                 }]
         }] });
 
 /**
- * Sistema de responsive utilities para PDM UI Kit
+ * Componente base de tabla con soporte responsive
  *
- * Proporciona constantes, tipos y helpers para manejar responsive design
- * de forma consistente en todos los componentes.
- */
-/**
- * Breakpoints estándar de Tailwind CSS
- * Mobile-first approach: los estilos base son para mobile, los breakpoints son MIN-WIDTH
- */
-const BREAKPOINTS = {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px' // extra large desktop
-};
-/**
- * Helper para generar clases responsive de forma programática
+ * SIMPLIFICADO: Ya no incluye drag & drop (usar pdm-draggable-table para eso)
  *
  * @example
- * responsive({ default: 'block', sm: 'flex', lg: 'grid' })
- * // Returns: 'block sm:flex lg:grid'
- */
-function responsive(config) {
-    const classes = [];
-    if (config.default) {
-        classes.push(config.default);
-    }
-    ['sm', 'md', 'lg', 'xl', '2xl'].forEach(bp => {
-        if (config[bp]) {
-            classes.push(`${bp}:${config[bp]}`);
-        }
-    });
-    return classes.join(' ');
-}
-/**
- * Helper para overflow responsive
- * Maneja el caso común de scroll en mobile, auto en desktop
+ * // Tabla simple con scroll horizontal
+ * <pdm-table variant="default">
+ *   <thead><tr><th>Name</th><th>Email</th></tr></thead>
+ *   <tbody><tr><td>John</td><td>john@example.com</td></tr></tbody>
+ * </pdm-table>
  *
  * @example
- * overflowResponsive('x', 'scroll', 'auto')
- * // Returns: 'overflow-x-scroll sm:overflow-x-auto'
+ * // Tabla interactiva con wrap en mobile
+ * <pdm-table variant="interactive" responsiveStrategy="wrap">
+ *   ...
+ * </pdm-table>
  */
-function overflowResponsive(axis, mobile, desktop) {
-    const axisClass = axis === 'both' ? 'overflow' : `overflow-${axis}`;
-    const mobileClass = `${axisClass}-${mobile}`;
-    if (!desktop || desktop === mobile) {
-        return mobileClass;
-    }
-    return `${mobileClass} sm:${axisClass}-${desktop}`;
-}
-/**
- * Helper para spacing responsive
- * Útil para padding/margin que necesita ajustarse por breakpoint
- *
- * @example
- * spacingResponsive('px', { default: '4', sm: '6', lg: '8' })
- * // Returns: 'px-4 sm:px-6 lg:px-8'
- */
-function spacingResponsive(property, values) {
-    return responsive(Object.entries(values).reduce((acc, [key, value]) => {
-        acc[key] = `${property}-${value}`;
-        return acc;
-    }, {}));
-}
-/**
- * Helper para width responsive
- *
- * @example
- * widthResponsive({ default: 'full', sm: 'auto', lg: '1/2' })
- * // Returns: 'w-full sm:w-auto lg:w-1/2'
- */
-function widthResponsive(values) {
-    return responsive(Object.entries(values).reduce((acc, [key, value]) => {
-        acc[key] = `w-${value}`;
-        return acc;
-    }, {}));
-}
-/**
- * Clases comunes para containers responsive
- * Pensadas para wrappers que contienen contenido que puede desbordar
- */
-const RESPONSIVE_CONTAINER = {
-    // Container con scroll horizontal en mobile, contenido visible en desktop
-    tableWrapper: 'relative w-full overflow-x-auto sm:overflow-x-visible',
-    // Container con padding negativo en mobile para scroll edge-to-edge
-    tableWrapperFullBleed: 'relative w-full -mx-4 px-4 overflow-x-auto sm:mx-0 sm:px-0 sm:overflow-x-visible',
-    // Container con max-width responsive
-    contentWrapper: 'w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-screen-2xl',
-    // Container para modals/dialogs
-    modalWrapper: 'w-full max-w-lg mx-auto px-4 sm:px-0',
-    // Container para forms
-    formWrapper: 'w-full max-w-md mx-auto space-y-4'
-};
-/**
- * Clases comunes para display responsive
- */
-const RESPONSIVE_DISPLAY = {
-    // Ocultar en mobile, mostrar en desktop
-    hideOnMobile: 'hidden sm:block',
-    // Mostrar solo en mobile
-    showOnMobile: 'block sm:hidden',
-    // Stack en mobile, flex en desktop
-    stackToFlex: 'flex flex-col sm:flex-row',
-    // Stack en mobile, grid en desktop
-    stackToGrid: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
-};
-/**
- * Clases para table responsive strategies
- */
-const TABLE_RESPONSIVE = {
-    // Scroll horizontal (default, más simple)
-    scroll: {
-        wrapper: 'relative w-full overflow-x-auto',
-        table: 'w-full min-w-full',
-        cell: 'whitespace-nowrap'
-    },
-    // Permitir wrap del contenido
-    wrap: {
-        wrapper: 'relative w-full overflow-x-auto',
-        table: 'w-full',
-        cell: 'whitespace-normal break-words'
-    },
-    // Stack en mobile (cada fila se convierte en card)
-    // Requiere lógica adicional en el componente
-    stack: {
-        wrapper: 'relative w-full',
-        table: 'w-full',
-        row: 'block sm:table-row border-b sm:border-b-0',
-        cell: 'block sm:table-cell py-2 sm:py-0 before:content-[attr(data-label)] before:font-medium before:inline-block before:w-32 sm:before:content-none'
-    },
-    // Collapse: ocultar columnas menos importantes en mobile
-    // Se usa con clases de visibility en las columnas específicas
-    collapse: {
-        wrapper: 'relative w-full overflow-x-auto',
-        table: 'w-full',
-        cell: 'whitespace-nowrap',
-        // Estas clases se aplican a columnas opcionales
-        optionalColumn: 'hidden md:table-cell'
-    }
-};
-
-/**
- * Componente base de tabla con soporte responsive
- *
- * SIMPLIFICADO: Ya no incluye drag & drop (usar pdm-draggable-table para eso)
- *
- * @example
- * // Tabla simple con scroll horizontal
- * <pdm-table variant="default">
- *   <thead><tr><th>Name</th><th>Email</th></tr></thead>
- *   <tbody><tr><td>John</td><td>john@example.com</td></tr></tbody>
- * </pdm-table>
- *
- * @example
- * // Tabla interactiva con wrap en mobile
- * <pdm-table variant="interactive" responsiveStrategy="wrap">
- *   ...
- * </pdm-table>
- */
-class PdmTableComponent {
-    constructor() {
-        /**
-         * Variante visual de la tabla
-         * - default: tabla básica sin estilos extra
-         * - data: tabla con bordes y espaciado para data
-         * - interactive: tabla con hover, sticky header y estilos interactivos
-         */
-        this.variant = "default";
-        /**
-         * Estrategia responsive para la tabla
-         * - scroll: scroll horizontal en mobile (default, más simple)
-         * - wrap: permite que el contenido haga wrap
-         * - stack: convierte filas en cards en mobile (requiere data-label en celdas)
-         * - collapse: oculta columnas menos importantes en mobile
-         */
-        this.responsiveStrategy = "scroll";
-        /**
-         * Clases CSS adicionales para el wrapper
-         */
-        this.className = "";
-        /**
-         * Si es true, aplica padding negativo en mobile para scroll edge-to-edge
-         * Útil cuando la tabla está dentro de un container con padding
-         */
-        this.fullBleed = false;
+class PdmTableComponent {
+    constructor() {
+        /**
+         * Variante visual de la tabla
+         * - default: tabla básica sin estilos extra
+         * - data: tabla con bordes y espaciado para data
+         * - interactive: tabla con hover, sticky header y estilos interactivos
+         */
+        this.variant = "default";
+        /**
+         * Estrategia responsive para la tabla
+         * - scroll: scroll horizontal en mobile (default, más simple)
+         * - wrap: permite que el contenido haga wrap
+         * - stack: convierte filas en cards en mobile (requiere data-label en celdas)
+         * - collapse: oculta columnas menos importantes en mobile
+         */
+        this.responsiveStrategy = "scroll";
+        /**
+         * Clases CSS adicionales para el wrapper
+         */
+        this.className = "";
+        /**
+         * Si es true, aplica padding negativo en mobile para scroll edge-to-edge
+         * Útil cuando la tabla está dentro de un container con padding
+         */
+        this.fullBleed = false;
     }
     get wrapperClasses() {
         const baseClasses = ["relative", "w-full"];
@@ -3135,7 +2686,7 @@ class PdmTableComponent {
         return [...baseClasses, ...variantClasses, ...cellClasses].filter(Boolean);
     }
     getResponsiveStrategyClasses() {
-        const strategy = TABLE_RESPONSIVE[this.responsiveStrategy];
+        const strategy = TABLE_RESPONSIVE$1[this.responsiveStrategy];
         if (this.responsiveStrategy === "scroll") {
             return ["overflow-x-auto"];
         }
@@ -3838,7 +3389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['tableElement']
             }] } });
 
-const COMPONENTS$s = [
+const COMPONENTS$u = [
     PdmDataTableComponent,
     PdmDraggableTableComponent,
     PdmTableComponent,
@@ -3856,101 +3407,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$s,
-                    exports: COMPONENTS$s
+                    declarations: COMPONENTS$u,
+                    exports: COMPONENTS$u
                 }]
         }] });
 
-/**
- * Z-Index Scale - Sistema centralizado de z-index
- *
- * JERARQUÍA (de menor a mayor):
- * 1. base (z-0) - Elementos normales del DOM
- * 2. dropdown (z-10) - Selects, combobox, date-pickers
- * 3. sticky (z-20) - Headers, navigation bars
- * 4. drawerBackdrop (z-30) - Backdrop de drawers
- * 5. drawer (z-40) - Sidebar drawer, sheets laterales
- * 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-[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)
- */
-const Z_INDEX = {
-    /**
-     * Base - contenido normal del DOM
-     */
-    base: "z-0",
-    /**
-     * Dropdown - Selects, combobox, date-pickers
-     * Debe estar SOBRE contenido normal pero BAJO overlays
-     */
-    dropdown: "z-10",
-    /**
-     * Sticky - Headers, navigation fija
-     */
-    sticky: "z-20",
-    /**
-     * Drawer backdrop - Backdrop de sidebar drawer
-     * Debe estar DEBAJO del drawer panel y DEBAJO de modals
-     */
-    drawerBackdrop: "z-30",
-    /**
-     * Drawer - Sidebar drawer, sheets laterales
-     * Debe estar SOBRE su backdrop pero BAJO modals
-     */
-    drawer: "z-40",
-    /**
-     * Modal backdrop - Backdrop de dialogs
-     * Mismo nivel que drawer backdrop (z-40)
-     */
-    modalBackdrop: "z-40",
-    /**
-     * Modal - Dialogs, alert-dialogs
-     * Debe estar SOBRE su backdrop
-     */
-    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
-     */
-    popover: "z-[70]",
-    /**
-     * Toast - Notificaciones globales
-     * Debe estar sobre TODO
-     */
-    toast: "z-[100]",
-};
-/**
- * Helper para debugging z-index issues
- */
-function logZIndexStack(element) {
-    if (typeof window === "undefined")
-        return;
-    let current = element;
-    const stack = [];
-    while (current && current !== document.body) {
-        const computed = window.getComputedStyle(current);
-        const zIndex = computed.zIndex;
-        const position = computed.position;
-        if (zIndex !== "auto") {
-            stack.push({
-                element: current.tagName +
-                    (current.className ? `.${current.className.split(" ")[0]}` : ""),
-                zIndex,
-                position,
-            });
-        }
-        current = current.parentElement;
-    }
-    console.table(stack);
-}
-
 /**
  * Modal/Dialog component con soporte responsive
  *
@@ -4087,7 +3548,7 @@ class PdmDialogComponent {
     buildPanelClasses(sizeClasses) {
         const base = [
             "relative",
-            Z_INDEX.modal,
+            Z_INDEX$1.modal,
             "flex",
             "flex-col",
             "border border-solid",
@@ -4155,9 +3616,9 @@ class PdmDialogComponent {
         // Container con backdrop z-40
         // Mobile: fullscreen desde el bottom
         // Desktop: centrado
-        return responsive({
-            default: `fixed inset-x-0 bottom-0 ${Z_INDEX.modalBackdrop} flex items-end justify-center`,
-            sm: `fixed inset-0 ${Z_INDEX.modalBackdrop} flex items-center justify-center p-4`,
+        return responsive$1({
+            default: `fixed inset-x-0 bottom-0 ${Z_INDEX$1.modalBackdrop} flex items-end justify-center`,
+            sm: `fixed inset-0 ${Z_INDEX$1.modalBackdrop} flex items-center justify-center p-4`,
         });
     }
 }
@@ -4211,7 +3672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$r = [
+const COMPONENTS$t = [
     PdmDialogComponent,
 ];
 class PdmDialogModule {
@@ -4223,8 +3684,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$r,
-                    exports: COMPONENTS$r
+                    declarations: COMPONENTS$t,
+                    exports: COMPONENTS$t
                 }]
         }] });
 
@@ -4326,7 +3787,7 @@ class PdmDrawerComponent {
         this.secondaryAction.emit();
     }
     get containerClassName() {
-        return `fixed inset-0 ${Z_INDEX.drawer} ${this.className}`;
+        return `fixed inset-0 ${Z_INDEX$1.drawer} ${this.className}`;
     }
     get panelClassName() {
         const base = [
@@ -4530,7 +3991,7 @@ class PdmSheetComponent {
     }
 }
 PdmSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSheetComponent, selector: "pdm-sheet", inputs: { open: "open", side: "side", size: "size", className: "className", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none box-border border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-solid border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none box-border rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSheetComponent, selector: "pdm-sheet", inputs: { open: "open", side: "side", size: "size", className: "className", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none box-border border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-solid border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none box-border rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none box-border border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-solid border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none box-border rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n" }]
@@ -4553,18 +4014,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
-const COMPONENTS$q = [PdmDrawerComponent, PdmSheetComponent];
+const COMPONENTS$s = [PdmDrawerComponent, PdmSheetComponent];
 class PdmDrawerModule {
 }
 PdmDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, declarations: [PdmDrawerComponent, PdmSheetComponent], imports: [CommonModule, PdmIconModule], exports: [PdmDrawerComponent, PdmSheetComponent] });
-PdmDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, imports: [CommonModule, PdmIconModule] });
+PdmDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, declarations: [PdmDrawerComponent, PdmSheetComponent], imports: [CommonModule, PdmIconModule$1], exports: [PdmDrawerComponent, PdmSheetComponent] });
+PdmDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, imports: [CommonModule, PdmIconModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PdmIconModule],
-                    declarations: COMPONENTS$q,
-                    exports: COMPONENTS$q,
+                    imports: [CommonModule, PdmIconModule$1],
+                    declarations: COMPONENTS$s,
+                    exports: COMPONENTS$s,
                 }]
         }] });
 
@@ -4679,10 +4140,10 @@ class PdmDropdownMenuComponent {
             return;
         this.open = true;
         this.cdr.markForCheck();
-        const positionStrategy = createFlexiblePositionStrategy(this.overlay, triggerEl, 8);
+        const positionStrategy = createFlexiblePositionStrategy$1(this.overlay, triggerEl, 8);
         // Resolve panelClass: overlayOptions.panelClass wins; otherwise map panelClassName.
         const resolvedPanelClass = this.overlayOptions?.panelClass
-            ?? (this.panelClassName ? [Z_INDEX.popover, this.panelClassName] : [Z_INDEX.popover]);
+            ?? (this.panelClassName ? [Z_INDEX$1.popover, this.panelClassName] : [Z_INDEX$1.popover]);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
@@ -4753,7 +4214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
-const COMPONENTS$p = [
+const COMPONENTS$r = [
     PdmDropdownMenuComponent,
 ];
 class PdmDropdownMenuModule {
@@ -4765,8 +4226,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$p,
-                    exports: COMPONENTS$p
+                    declarations: COMPONENTS$r,
+                    exports: COMPONENTS$r
                 }]
         }] });
 
@@ -4795,7 +4256,7 @@ class PdmEmptyComponent {
     }
 }
 PdmEmptyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmEmptyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmEmptyComponent, selector: "pdm-empty", inputs: { variant: "variant", title: "title", description: "description", iconName: "iconName", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", linkLabel: "linkLabel", className: "className" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", linkAction: "linkAction" }, ngImport: i0, template: "<section [ngClass]=\"['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-foreground', containerClass, className]\">\n  <div class=\"flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground\">\n    <pdm-icon [name]=\"iconName\" [size]=\"20\"></pdm-icon>\n  </div>\n\n  <div class=\"space-y-2\">\n    <h3 class=\"m-0 text-2xl font-semibold leading-none tracking-tight\">{{ title }}</h3>\n    <p class=\"m-0 mx-auto max-w-md text-sm leading-relaxed text-muted-foreground\">\n      {{ description }}\n    </p>\n  </div>\n\n  <div *ngIf=\"primaryActionLabel || secondaryActionLabel\" class=\"mt-1 flex flex-wrap items-center justify-center gap-3\">\n    <pdm-button *ngIf=\"primaryActionLabel\" variant=\"default\" (pressed)=\"primaryAction.emit()\">{{ primaryActionLabel }}</pdm-button>\n    <pdm-button *ngIf=\"secondaryActionLabel\" variant=\"outline\" (pressed)=\"secondaryAction.emit()\">{{ secondaryActionLabel }}</pdm-button>\n  </div>\n\n  <button\n    *ngIf=\"linkLabel\"\n    type=\"button\"\n    class=\"mt-1 inline-flex appearance-none box-border items-center gap-2 border-0 bg-transparent p-0 text-sm font-medium text-muted-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    (click)=\"linkAction.emit()\"\n  >\n    <span>{{ linkLabel }}</span>\n    <pdm-icon name=\"arrow-up-right\" [size]=\"16\"></pdm-icon>\n  </button>\n\n  <ng-content></ng-content>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmButtonComponent, selector: "pdm-button", inputs: ["type", "variant", "state", "size", "disabled", "loading", "className"], outputs: ["pressed"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmEmptyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmEmptyComponent, selector: "pdm-empty", inputs: { variant: "variant", title: "title", description: "description", iconName: "iconName", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", linkLabel: "linkLabel", className: "className" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", linkAction: "linkAction" }, ngImport: i0, template: "<section [ngClass]=\"['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-foreground', containerClass, className]\">\n  <div class=\"flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground\">\n    <pdm-icon [name]=\"iconName\" [size]=\"20\"></pdm-icon>\n  </div>\n\n  <div class=\"space-y-2\">\n    <h3 class=\"m-0 text-2xl font-semibold leading-none tracking-tight\">{{ title }}</h3>\n    <p class=\"m-0 mx-auto max-w-md text-sm leading-relaxed text-muted-foreground\">\n      {{ description }}\n    </p>\n  </div>\n\n  <div *ngIf=\"primaryActionLabel || secondaryActionLabel\" class=\"mt-1 flex flex-wrap items-center justify-center gap-3\">\n    <pdm-button *ngIf=\"primaryActionLabel\" variant=\"default\" (pressed)=\"primaryAction.emit()\">{{ primaryActionLabel }}</pdm-button>\n    <pdm-button *ngIf=\"secondaryActionLabel\" variant=\"outline\" (pressed)=\"secondaryAction.emit()\">{{ secondaryActionLabel }}</pdm-button>\n  </div>\n\n  <button\n    *ngIf=\"linkLabel\"\n    type=\"button\"\n    class=\"mt-1 inline-flex appearance-none box-border items-center gap-2 border-0 bg-transparent p-0 text-sm font-medium text-muted-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    (click)=\"linkAction.emit()\"\n  >\n    <span>{{ linkLabel }}</span>\n    <pdm-icon name=\"arrow-up-right\" [size]=\"16\"></pdm-icon>\n  </button>\n\n  <ng-content></ng-content>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PdmButtonComponent, selector: "pdm-button", inputs: ["type", "variant", "state", "size", "disabled", "loading", "className"], outputs: ["pressed"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-empty', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-foreground', containerClass, className]\">\n  <div class=\"flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground\">\n    <pdm-icon [name]=\"iconName\" [size]=\"20\"></pdm-icon>\n  </div>\n\n  <div class=\"space-y-2\">\n    <h3 class=\"m-0 text-2xl font-semibold leading-none tracking-tight\">{{ title }}</h3>\n    <p class=\"m-0 mx-auto max-w-md text-sm leading-relaxed text-muted-foreground\">\n      {{ description }}\n    </p>\n  </div>\n\n  <div *ngIf=\"primaryActionLabel || secondaryActionLabel\" class=\"mt-1 flex flex-wrap items-center justify-center gap-3\">\n    <pdm-button *ngIf=\"primaryActionLabel\" variant=\"default\" (pressed)=\"primaryAction.emit()\">{{ primaryActionLabel }}</pdm-button>\n    <pdm-button *ngIf=\"secondaryActionLabel\" variant=\"outline\" (pressed)=\"secondaryAction.emit()\">{{ secondaryActionLabel }}</pdm-button>\n  </div>\n\n  <button\n    *ngIf=\"linkLabel\"\n    type=\"button\"\n    class=\"mt-1 inline-flex appearance-none box-border items-center gap-2 border-0 bg-transparent p-0 text-sm font-medium text-muted-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    (click)=\"linkAction.emit()\"\n  >\n    <span>{{ linkLabel }}</span>\n    <pdm-icon name=\"arrow-up-right\" [size]=\"16\"></pdm-icon>\n  </button>\n\n  <ng-content></ng-content>\n</section>\n" }]
@@ -4823,18 +4284,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$o = [PdmEmptyComponent];
+const COMPONENTS$q = [PdmEmptyComponent];
 class PdmEmptyModule {
 }
 PdmEmptyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmEmptyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyModule, declarations: [PdmEmptyComponent], imports: [CommonModule, PdmButtonModule, PdmIconModule], exports: [PdmEmptyComponent] });
-PdmEmptyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyModule, imports: [CommonModule, PdmButtonModule, PdmIconModule] });
+PdmEmptyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyModule, declarations: [PdmEmptyComponent], imports: [CommonModule, PdmButtonModule$1, PdmIconModule$1], exports: [PdmEmptyComponent] });
+PdmEmptyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyModule, imports: [CommonModule, PdmButtonModule$1, PdmIconModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PdmButtonModule, PdmIconModule],
-                    declarations: COMPONENTS$o,
-                    exports: COMPONENTS$o,
+                    imports: [CommonModule, PdmButtonModule$1, PdmIconModule$1],
+                    declarations: COMPONENTS$q,
+                    exports: COMPONENTS$q,
                 }]
         }] });
 
@@ -4899,7 +4360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$n = [
+const COMPONENTS$p = [
     PdmFieldComponent,
 ];
 class PdmFieldModule {
@@ -4911,8 +4372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$n,
-                    exports: COMPONENTS$n
+                    declarations: COMPONENTS$p,
+                    exports: COMPONENTS$p
                 }]
         }] });
 
@@ -4987,7 +4448,7 @@ class PdmHoverCardComponent {
             .withPositions(this.getPositionConfigs())
             .withFlexibleDimensions(false)
             .withPush(true);
-        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        const panelClass = mergeOverlayPanelClass$1(OVERLAY_BASE_Z_INDEX$1, this.panelClassName);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             panelClass,
@@ -5115,7 +4576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["focusout"]
             }] } });
 
-const COMPONENTS$m = [
+const COMPONENTS$o = [
     PdmHoverCardComponent,
 ];
 class PdmHoverCardModule {
@@ -5127,57 +4588,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$m,
-                    exports: COMPONENTS$m
+                    declarations: COMPONENTS$o,
+                    exports: COMPONENTS$o
                 }]
         }] });
 
-class PdmInputComponent {
-    constructor() {
-        this.id = "";
-        this.type = "text";
-        this.value = "";
-        this.placeholder = "";
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.invalid = false;
-        this.size = "regular";
-        this.roundness = "default";
-        this.className = "";
-        this.inputClassName = "";
-        this.label = "";
-        this.helperText = "";
-        this.errorText = "";
-        this.valueChange = new EventEmitter();
-        this.blurred = new EventEmitter();
-    }
-    onInput(event) {
-        this.valueChange.emit(event.target.value);
-    }
-    onBlur(event) {
-        this.blurred.emit(event);
-    }
-}
-PdmInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", size: "size", roundness: "roundness", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground',\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "pdm-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground',\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], required: [{
-                type: Input
+const FALLBACK_NODE = [['circle', { cx: '12', cy: '12', r: '9' }]];
+class PdmIconComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.name = 'check';
+        this.library = 'lucide';
+        this.assetUrl = null;
+        this.size = 16;
+        this.strokeWidth = 1.5;
+        this.className = '';
+        this.ariaLabel = null;
+        this.decorative = false;
+        this.lucideIndex = this.buildLucideIndex();
+        this.aliasMapByLibrary = {
+            lucide: {
+                'check-circle': 'circle-check',
+                'alert-circle': 'circle-alert',
+                info: 'circle-info',
+                'sort-asc': 'arrow-up-a-z',
+                'sort-desc': 'arrow-down-z-a'
+            },
+            tabler: {
+                'alert-triangle': 'triangle-alert',
+                'user-circle': 'circle-user',
+                'settings-2': 'settings-2',
+                'external-link': 'external-link'
+            },
+            hugeicons: {
+                'alert-02': 'circle-alert',
+                'user-circle': 'circle-user',
+                'search-01': 'search',
+                'settings-01': 'settings',
+                'arrow-right-01': 'chevron-right',
+                'arrow-down-01': 'chevron-down'
+            },
+            phosphor: {
+                'warning-circle': 'circle-alert',
+                'caret-down': 'chevron-down',
+                'caret-right': 'chevron-right',
+                'user-circle': 'circle-user',
+                gear: 'settings',
+                'arrow-square-out': 'external-link'
+            },
+            remix: {
+                'alert-line': 'circle-alert',
+                'arrow-right-line': 'chevron-right',
+                'arrow-down-s-line': 'chevron-down',
+                'external-link-line': 'external-link',
+                'user-line': 'user',
+                'settings-3-line': 'settings'
+            }
+        };
+    }
+    get resolvedStrokeWidth() {
+        const value = Number(this.strokeWidth);
+        if (Number.isFinite(value) && value > 0) {
+            return value;
+        }
+        if (this.library === 'phosphor') {
+            return 1.6;
+        }
+        if (this.library === 'tabler') {
+            return 1.8;
+        }
+        return 1.5;
+    }
+    get resolvedSize() {
+        const value = Number(this.size);
+        return Number.isFinite(value) && value > 0 ? value : 16;
+    }
+    get iconKey() {
+        const raw = `${this.name || ''}`.trim();
+        if (!raw) {
+            return 'circle';
+        }
+        const trimmed = raw.replace(/^(lucide|tabler|hugeicons|phosphor|remix)\//, '');
+        const aliases = this.aliasMapByLibrary[this.library] ?? {};
+        return aliases[trimmed] ?? trimmed;
+    }
+    get svgMarkup() {
+        const node = this.resolveIconNode(this.iconKey) ?? FALLBACK_NODE;
+        const strokeWidth = this.escapeAttr(this.resolvedStrokeWidth);
+        const size = this.escapeAttr(this.resolvedSize);
+        const body = node
+            .map(([tag, attrs]) => {
+            const serializedAttrs = Object.entries(attrs)
+                .map(([key, value]) => `${key}="${this.escapeAttr(value)}"`)
+                .join(' ');
+            return serializedAttrs ? `<${tag} ${serializedAttrs}></${tag}>` : `<${tag}></${tag}>`;
+        })
+            .join('');
+        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+        return this.sanitizer.bypassSecurityTrustHtml(svg);
+    }
+    resolveIconNode(iconName) {
+        const normalized = this.normalizeIconName(iconName);
+        return this.lucideIndex.get(normalized) ?? null;
+    }
+    normalizeIconName(name) {
+        return `${name || ''}`.toLowerCase().replace(/[^a-z0-9]/g, '');
+    }
+    buildLucideIndex() {
+        const map = new Map();
+        Object.entries(icons).forEach(([iconName, iconNode]) => {
+            map.set(this.normalizeIconName(iconName), iconNode);
+        });
+        return map;
+    }
+    escapeAttr(value) {
+        return `${value ?? ''}`
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+}
+PdmIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+PdmIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmIconComponent, selector: "pdm-icon", inputs: { name: "name", library: "library", assetUrl: "assetUrl", size: "size", strokeWidth: "strokeWidth", className: "className", ariaLabel: "ariaLabel", decorative: "decorative" }, ngImport: i0, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { name: [{
+                type: Input
+            }], library: [{
+                type: Input
+            }], assetUrl: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], decorative: [{
+                type: Input
+            }] } });
+
+const COMPONENTS$n = [
+    PdmIconComponent,
+];
+class PdmIconModule {
+}
+PdmIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, declarations: [PdmIconComponent], imports: [CommonModule], exports: [PdmIconComponent] });
+PdmIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: COMPONENTS$n,
+                    exports: COMPONENTS$n
+                }]
+        }] });
+
+class PdmInputComponent {
+    constructor() {
+        this.id = "";
+        this.type = "text";
+        this.value = "";
+        this.placeholder = "";
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.invalid = false;
+        this.size = "regular";
+        this.roundness = "default";
+        this.className = "";
+        this.inputClassName = "";
+        this.label = "";
+        this.helperText = "";
+        this.errorText = "";
+        this.valueChange = new EventEmitter();
+        this.blurred = new EventEmitter();
+    }
+    onInput(event) {
+        this.valueChange.emit(event.target.value);
+    }
+    onBlur(event) {
+        this.blurred.emit(event);
+    }
+}
+PdmInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", size: "size", roundness: "roundness", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground',\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "pdm-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground',\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
             }], invalid: [{
                 type: Input
             }], size: [{
@@ -5225,7 +4842,7 @@ class PdmInputGroupComponent {
     }
 }
 PdmInputGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputGroupComponent, selector: "pdm-input-group", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", invalid: "invalid", prefixText: "prefixText", suffixText: "suffixText", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", buttonText: "buttonText", className: "className" }, outputs: { valueChange: "valueChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'flex w-full flex-col items-stretch gap-2 sm:flex-row sm:items-center',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 box-border items-center overflow-hidden rounded-md border border-solid border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50',\n      invalid ? 'border-destructive focus-within:ring-destructive' : '',\n      disabled ? 'cursor-not-allowed' : '',\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'h-full min-w-0 flex-1 appearance-none box-border border-0 bg-transparent p-0 text-sm text-foreground outline-none placeholder:text-muted-foreground aria-invalid:placeholder:text-destructive/70',\n        type === 'file'\n          ? 'text-sm file:mr-2 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground'\n          : '',\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 w-full shrink-0 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed sm:w-auto\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmInputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputGroupComponent, selector: "pdm-input-group", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", invalid: "invalid", prefixText: "prefixText", suffixText: "suffixText", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", buttonText: "buttonText", className: "className" }, outputs: { valueChange: "valueChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'flex w-full flex-col items-stretch gap-2 sm:flex-row sm:items-center',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 box-border items-center overflow-hidden rounded-md border border-solid border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50',\n      invalid ? 'border-destructive focus-within:ring-destructive' : '',\n      disabled ? 'cursor-not-allowed' : '',\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'h-full min-w-0 flex-1 appearance-none box-border border-0 bg-transparent p-0 text-sm text-foreground outline-none placeholder:text-muted-foreground aria-invalid:placeholder:text-destructive/70',\n        type === 'file'\n          ? 'text-sm file:mr-2 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground'\n          : '',\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 w-full shrink-0 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed sm:w-auto\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: "pdm-input-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"[\n    'flex w-full flex-col items-stretch gap-2 sm:flex-row sm:items-center',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 box-border items-center overflow-hidden rounded-md border border-solid border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50',\n      invalid ? 'border-destructive focus-within:ring-destructive' : '',\n      disabled ? 'cursor-not-allowed' : '',\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'h-full min-w-0 flex-1 appearance-none box-border border-0 bg-transparent p-0 text-sm text-foreground outline-none placeholder:text-muted-foreground aria-invalid:placeholder:text-destructive/70',\n        type === 'file'\n          ? 'text-sm file:mr-2 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground'\n          : '',\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 w-full shrink-0 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed sm:w-auto\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"] }]
@@ -5531,7 +5148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$l = [
+const COMPONENTS$m = [
     PdmInputComponent,
     PdmInputGroupComponent,
     PdmInputOtpComponent,
@@ -5545,18 +5162,18 @@ PdmInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         PdmInputGroupComponent,
         PdmInputOtpComponent,
         PdmInputPasswordComponent,
-        PdmTextareaComponent], imports: [CommonModule, PdmIconModule], exports: [PdmInputComponent,
+        PdmTextareaComponent], imports: [CommonModule, PdmIconModule$1], exports: [PdmInputComponent,
         PdmInputGroupComponent,
         PdmInputOtpComponent,
         PdmInputPasswordComponent,
         PdmTextareaComponent] });
-PdmInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputModule, imports: [CommonModule, PdmIconModule] });
+PdmInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputModule, imports: [CommonModule, PdmIconModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PdmIconModule],
-                    declarations: COMPONENTS$l,
-                    exports: COMPONENTS$l,
+                    imports: [CommonModule, PdmIconModule$1],
+                    declarations: COMPONENTS$m,
+                    exports: COMPONENTS$m,
                 }]
         }] });
 
@@ -5580,7 +5197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$k = [
+const COMPONENTS$l = [
     PdmItemComponent,
 ];
 class PdmItemModule {
@@ -5592,8 +5209,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$k,
-                    exports: COMPONENTS$k
+                    declarations: COMPONENTS$l,
+                    exports: COMPONENTS$l
                 }]
         }] });
 
@@ -5611,7 +5228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$j = [
+const COMPONENTS$k = [
     PdmKbdComponent,
 ];
 class PdmKbdModule {
@@ -5620,6 +5237,43 @@ PdmKbdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 PdmKbdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmKbdModule, declarations: [PdmKbdComponent], imports: [CommonModule], exports: [PdmKbdComponent] });
 PdmKbdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmKbdModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmKbdModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: COMPONENTS$k,
+                    exports: COMPONENTS$k
+                }]
+        }] });
+
+class PdmLabelComponent {
+    constructor() {
+        this.forId = '';
+        this.required = false;
+        this.className = '';
+    }
+}
+PdmLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmLabelComponent, selector: "pdm-label", inputs: { forId: "forId", required: "required", className: "className" }, ngImport: i0, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-destructive\">*</span>\n</label>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  [attr.for]=\"forId\"\n  [ngClass]=\"['text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className]\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"ml-1 text-destructive\">*</span>\n</label>\n" }]
+        }], propDecorators: { forId: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+const COMPONENTS$j = [
+    PdmLabelComponent,
+];
+class PdmLabelModule {
+}
+PdmLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelModule, declarations: [PdmLabelComponent], imports: [CommonModule], exports: [PdmLabelComponent] });
+PdmLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -5696,7 +5350,7 @@ class PdmMenubarComponent {
             .withPositions(this.getPositionConfigs())
             .withFlexibleDimensions(false)
             .withPush(true);
-        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        const panelClass = mergeOverlayPanelClass$1(OVERLAY_BASE_Z_INDEX$1, this.panelClassName);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             panelClass,
@@ -5799,7 +5453,7 @@ class PdmNativeSelectComponent {
     }
 }
 PdmNativeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmNativeSelectComponent, selector: "pdm-native-select", inputs: { id: "id", value: "value", disabled: "disabled", invalid: "invalid", options: "options", placeholder: "placeholder", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative\" [ngClass]=\"className\">\n  <select\n    [id]=\"id\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    (change)=\"onChange($event)\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 flex h-9 w-full appearance-none box-border rounded-md border border-solid bg-transparent px-3 py-2 pr-9 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50'\n    ]\"\n  >\n    <option value=\"\" disabled>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n  </select>\n  <pdm-icon className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground\" name=\"chevron-down\" [size]=\"16\"></pdm-icon>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmNativeSelectComponent, selector: "pdm-native-select", inputs: { id: "id", value: "value", disabled: "disabled", invalid: "invalid", options: "options", placeholder: "placeholder", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative\" [ngClass]=\"className\">\n  <select\n    [id]=\"id\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    (change)=\"onChange($event)\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 flex h-9 w-full appearance-none box-border rounded-md border border-solid bg-transparent px-3 py-2 pr-9 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50'\n    ]\"\n  >\n    <option value=\"\" disabled>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n  </select>\n  <pdm-icon className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground\" name=\"chevron-down\" [size]=\"16\"></pdm-icon>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-native-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\" [ngClass]=\"className\">\n  <select\n    [id]=\"id\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    (change)=\"onChange($event)\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 flex h-9 w-full appearance-none box-border rounded-md border border-solid bg-transparent px-3 py-2 pr-9 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50'\n    ]\"\n  >\n    <option value=\"\" disabled>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n  </select>\n  <pdm-icon className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground\" name=\"chevron-down\" [size]=\"16\"></pdm-icon>\n</div>\n" }]
@@ -5825,12 +5479,12 @@ const COMPONENTS$h = [PdmNativeSelectComponent];
 class PdmNativeSelectModule {
 }
 PdmNativeSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmNativeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectModule, declarations: [PdmNativeSelectComponent], imports: [CommonModule, PdmIconModule], exports: [PdmNativeSelectComponent] });
-PdmNativeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectModule, imports: [CommonModule, PdmIconModule] });
+PdmNativeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectModule, declarations: [PdmNativeSelectComponent], imports: [CommonModule, PdmIconModule$1], exports: [PdmNativeSelectComponent] });
+PdmNativeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectModule, imports: [CommonModule, PdmIconModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PdmIconModule],
+                    imports: [CommonModule, PdmIconModule$1],
                     declarations: COMPONENTS$h,
                     exports: COMPONENTS$h,
                 }]
@@ -5892,229 +5546,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-/**
- * Directive used to declare an option inside `<pdm-select>` via content projection.
- *
- * Usage:
- * ```html
- * <pdm-select [(value)]="val">
- *   <pdm-select-option value="a">Option A</pdm-select-option>
- *   <pdm-select-option value="b" [disabled]="true">Option B</pdm-select-option>
- *   <pdm-select-option value="c" label="Option C"></pdm-select-option>
- * </pdm-select>
- * ```
- *
- * When `label` is not provided, the text content of the projected node is used.
- */
-class PdmSelectOptionDirective {
-    constructor(el) {
-        this.el = el;
-        /** The option value that will be emitted on selection. */
-        this.value = '';
-        /** When true, the option is rendered but cannot be selected. */
-        this.disabled = false;
-        /**
-         * Explicit label for the option.
-         * When omitted, the directive reads the element's `textContent` after content init.
-         */
-        this.label = '';
-    }
-    ngAfterContentInit() {
-        // If no explicit label, harvest text from the projected node.
-        if (!this.label) {
-            this.label = (this.el.nativeElement.textContent ?? '').trim();
-        }
-    }
-    /** Resolved label string — always non-empty after ngAfterContentInit. */
-    get resolvedLabel() {
-        return this.label || this.value;
-    }
-}
-PdmSelectOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PdmSelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectOptionDirective, selector: "pdm-select-option", inputs: { value: "value", disabled: "disabled", label: "label" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectOptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'pdm-select-option'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }] } });
-
-class PdmSelectComponent {
-    constructor(cdr, overlay, viewContainerRef) {
-        this.cdr = cdr;
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.id = "";
-        this.value = "";
-        this.options = [];
-        this.disabled = false;
-        this.invalid = false;
-        this.className = "";
-        this.placeholder = "Select an option";
-        this.open = false;
-        this.valueChange = new EventEmitter();
-        this.overlayRef = null;
-        this.backdropSub = null;
-    }
-    ngAfterContentInit() {
-        // Re-render when projected options change (e.g. *ngFor on pdm-select-option).
-        this.projectedOptions.changes.subscribe(() => this.cdr.markForCheck());
-    }
-    ngOnDestroy() {
-        this.destroyOverlay();
-    }
-    /**
-     * Returns the effective list of options.
-     * Projected `<pdm-select-option>` children take priority over the `[options]` input.
-     * Falls back to `[options]` when no children are projected.
-     */
-    get resolvedOptions() {
-        if (this.projectedOptions && this.projectedOptions.length > 0) {
-            return this.projectedOptions.map((d) => ({
-                label: d.resolvedLabel,
-                value: d.value,
-                disabled: d.disabled,
-            }));
-        }
-        return this.options;
-    }
-    get selectedOption() {
-        return this.resolvedOptions.find((option) => option.value === this.value);
-    }
-    get selectedLabel() {
-        return this.selectedOption?.label || this.placeholder;
-    }
-    toggle() {
-        if (this.disabled)
-            return;
-        if (this.open) {
-            this.closePanel();
-        }
-        else {
-            this.openPanel();
-        }
-    }
-    onChange(event) {
-        this.valueChange.emit(event.target.value);
-    }
-    selectOption(option) {
-        if (option.disabled)
-            return;
-        this.valueChange.emit(option.value);
-        this.closePanel();
-    }
-    onEscape() {
-        if (this.open) {
-            this.closePanel();
-        }
-    }
-    openPanel() {
-        if (this.overlayRef)
-            return;
-        const triggerEl = this.triggerRef?.nativeElement;
-        if (!triggerEl)
-            return;
-        this.open = true;
-        this.cdr.markForCheck();
-        const positionStrategy = createFlexiblePositionStrategy(this.overlay, triggerEl, 4);
-        this.overlayRef = this.overlay.create({
-            // CRÍTICO: z-[70] para aparecer SOBRE modals (z-[60])
-            // panelClass se aplica al cdk-overlay-pane wrapper
-            panelClass: [Z_INDEX.popover],
-            positionStrategy,
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            width: triggerEl.offsetWidth,
-            // Consumer overrides are spread last — they win over every default above.
-            ...this.overlayOptions,
-        });
-        const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
-        this.overlayRef.attach(portal);
-        this.backdropSub = this.overlayRef
-            .outsidePointerEvents()
-            .subscribe((event) => {
-            const target = event.target;
-            if (!triggerEl.contains(target)) {
-                this.closePanel();
-            }
-        });
-        this.cdr.markForCheck();
-    }
-    closePanel() {
-        if (!this.overlayRef)
-            return;
-        this.open = false;
-        this.destroyOverlay();
-        this.cdr.markForCheck();
-    }
-    destroyOverlay() {
-        if (this.backdropSub) {
-            this.backdropSub.unsubscribe();
-            this.backdropSub = null;
-        }
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-    }
-}
-PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className", placeholder: "placeholder", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none box-border items-center justify-between rounded-md border border-solid bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "pdm-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none box-border items-center justify-between rounded-md border border-solid bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { id: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], overlayOptions: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], triggerRef: [{
-                type: ViewChild,
-                args: ["triggerEl"]
-            }], panelTemplateRef: [{
-                type: ViewChild,
-                args: ["panelTemplate"]
-            }], projectedOptions: [{
-                type: ContentChildren,
-                args: [PdmSelectOptionDirective]
-            }], onEscape: [{
-                type: HostListener,
-                args: ["document:keydown.escape"]
-            }] } });
-
-const COMPONENTS$f = [PdmSelectComponent, PdmSelectOptionDirective];
-class PdmSelectModule {
-}
-PdmSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectModule, declarations: [PdmSelectComponent, PdmSelectOptionDirective], imports: [CommonModule, OverlayModule, PdmIconModule], exports: [PdmSelectComponent, PdmSelectOptionDirective] });
-PdmSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectModule, imports: [CommonModule, OverlayModule, PdmIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, OverlayModule, PdmIconModule],
-                    declarations: COMPONENTS$f,
-                    exports: COMPONENTS$f,
-                }]
-        }] });
-
 class PdmPaginationComponent {
     constructor() {
         this.page = 1;
@@ -6158,7 +5589,7 @@ class PdmPaginationComponent {
     }
 }
 PdmPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPaginationComponent, selector: "pdm-pagination", inputs: { page: "page", pageCount: "pageCount", maxVisible: "maxVisible", className: "className", rowsPerPageLabel: "rowsPerPageLabel", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions" }, outputs: { pageChange: "pageChange", rowsPerPageChange: "rowsPerPageChange" }, ngImport: i0, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[100px] sm:w-[120px]\"\n      (valueChange)=\"onRowsPerPageChangeValue($event)\"\n    ></pdm-select>\n  </div>\n\n  <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none box-border border border-solid border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none box-border border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder", "overlayOptions"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPaginationComponent, selector: "pdm-pagination", inputs: { page: "page", pageCount: "pageCount", maxVisible: "maxVisible", className: "className", rowsPerPageLabel: "rowsPerPageLabel", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions" }, outputs: { pageChange: "pageChange", rowsPerPageChange: "rowsPerPageChange" }, ngImport: i0, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[100px] sm:w-[120px]\"\n      (valueChange)=\"onRowsPerPageChangeValue($event)\"\n    ></pdm-select>\n  </div>\n\n  <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none box-border border border-solid border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none box-border border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: i3$1.PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder", "overlayOptions"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[100px] sm:w-[120px]\"\n      (valueChange)=\"onRowsPerPageChangeValue($event)\"\n    ></pdm-select>\n  </div>\n\n  <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none box-border border border-solid border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none box-border border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
@@ -6182,18 +5613,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$e = [PdmPaginationComponent];
+const COMPONENTS$f = [PdmPaginationComponent];
 class PdmPaginationModule {
 }
 PdmPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationModule, declarations: [PdmPaginationComponent], imports: [CommonModule, PdmIconModule, PdmSelectModule], exports: [PdmPaginationComponent] });
-PdmPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationModule, imports: [CommonModule, PdmIconModule, PdmSelectModule] });
+PdmPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationModule, declarations: [PdmPaginationComponent], imports: [CommonModule, PdmIconModule$1, PdmSelectModule$1], exports: [PdmPaginationComponent] });
+PdmPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationModule, imports: [CommonModule, PdmIconModule$1, PdmSelectModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PdmIconModule, PdmSelectModule],
-                    declarations: COMPONENTS$e,
-                    exports: COMPONENTS$e,
+                    imports: [CommonModule, PdmIconModule$1, PdmSelectModule$1],
+                    declarations: COMPONENTS$f,
+                    exports: COMPONENTS$f,
                 }]
         }] });
 
@@ -6253,7 +5684,7 @@ class PdmPopoverComponent {
             .withPositions(this.getPositionConfigs())
             .withFlexibleDimensions(false)
             .withPush(true);
-        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        const panelClass = mergeOverlayPanelClass$1(OVERLAY_BASE_Z_INDEX$1, this.panelClassName);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             panelClass,
@@ -6353,7 +5784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$d = [
+const COMPONENTS$e = [
     PdmPopoverComponent,
 ];
 class PdmPopoverModule {
@@ -6365,8 +5796,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$d,
-                    exports: COMPONENTS$d
+                    declarations: COMPONENTS$e,
+                    exports: COMPONENTS$e
                 }]
         }] });
 
@@ -6400,7 +5831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$c = [
+const COMPONENTS$d = [
     PdmProgressComponent,
 ];
 class PdmProgressModule {
@@ -6412,8 +5843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$c,
-                    exports: COMPONENTS$c
+                    declarations: COMPONENTS$d,
+                    exports: COMPONENTS$d
                 }]
         }] });
 
@@ -6452,7 +5883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$b = [
+const COMPONENTS$c = [
     PdmRadioGroupComponent,
 ];
 class PdmRadioGroupModule {
@@ -6464,8 +5895,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$b,
-                    exports: COMPONENTS$b
+                    declarations: COMPONENTS$c,
+                    exports: COMPONENTS$c
                 }]
         }] });
 
@@ -6486,7 +5917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$a = [
+const COMPONENTS$b = [
     PdmScrollAreaComponent,
 ];
 class PdmScrollAreaModule {
@@ -6498,34 +5929,257 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$a,
-                    exports: COMPONENTS$a
+                    declarations: COMPONENTS$b,
+                    exports: COMPONENTS$b
                 }]
         }] });
 
-class PdmSeparatorComponent {
-    constructor() {
-        this.orientation = 'horizontal';
-        this.decorative = true;
-        this.className = '';
-    }
-    get orientationClass() {
-        return this.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full';
-    }
-}
-PdmSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSeparatorComponent, selector: "pdm-separator", inputs: { orientation: "orientation", decorative: "decorative", className: "className" }, ngImport: i0, template: "<div\n  [attr.role]=\"decorative ? 'none' : 'separator'\"\n  [attr.aria-orientation]=\"orientation\"\n  [ngClass]=\"['shrink-0 bg-border', orientationClass, className]\"\n></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-separator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [attr.role]=\"decorative ? 'none' : 'separator'\"\n  [attr.aria-orientation]=\"orientation\"\n  [ngClass]=\"['shrink-0 bg-border', orientationClass, className]\"\n></div>\n" }]
-        }], propDecorators: { orientation: [{
-                type: Input
-            }], decorative: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
+/**
+ * Directive used to declare an option inside `<pdm-select>` via content projection.
+ *
+ * Usage:
+ * ```html
+ * <pdm-select [(value)]="val">
+ *   <pdm-select-option value="a">Option A</pdm-select-option>
+ *   <pdm-select-option value="b" [disabled]="true">Option B</pdm-select-option>
+ *   <pdm-select-option value="c" label="Option C"></pdm-select-option>
+ * </pdm-select>
+ * ```
+ *
+ * When `label` is not provided, the text content of the projected node is used.
+ */
+class PdmSelectOptionDirective {
+    constructor(el) {
+        this.el = el;
+        /** The option value that will be emitted on selection. */
+        this.value = '';
+        /** When true, the option is rendered but cannot be selected. */
+        this.disabled = false;
+        /**
+         * Explicit label for the option.
+         * When omitted, the directive reads the element's `textContent` after content init.
+         */
+        this.label = '';
+    }
+    ngAfterContentInit() {
+        // If no explicit label, harvest text from the projected node.
+        if (!this.label) {
+            this.label = (this.el.nativeElement.textContent ?? '').trim();
+        }
+    }
+    /** Resolved label string — always non-empty after ngAfterContentInit. */
+    get resolvedLabel() {
+        return this.label || this.value;
+    }
+}
+PdmSelectOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PdmSelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectOptionDirective, selector: "pdm-select-option", inputs: { value: "value", disabled: "disabled", label: "label" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'pdm-select-option'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+class PdmSelectComponent {
+    constructor(cdr, overlay, viewContainerRef) {
+        this.cdr = cdr;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.id = "";
+        this.value = "";
+        this.options = [];
+        this.disabled = false;
+        this.invalid = false;
+        this.className = "";
+        this.placeholder = "Select an option";
+        this.open = false;
+        this.valueChange = new EventEmitter();
+        this.overlayRef = null;
+        this.backdropSub = null;
+    }
+    ngAfterContentInit() {
+        // Re-render when projected options change (e.g. *ngFor on pdm-select-option).
+        this.projectedOptions.changes.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.destroyOverlay();
+    }
+    /**
+     * Returns the effective list of options.
+     * Projected `<pdm-select-option>` children take priority over the `[options]` input.
+     * Falls back to `[options]` when no children are projected.
+     */
+    get resolvedOptions() {
+        if (this.projectedOptions && this.projectedOptions.length > 0) {
+            return this.projectedOptions.map((d) => ({
+                label: d.resolvedLabel,
+                value: d.value,
+                disabled: d.disabled,
+            }));
+        }
+        return this.options;
+    }
+    get selectedOption() {
+        return this.resolvedOptions.find((option) => option.value === this.value);
+    }
+    get selectedLabel() {
+        return this.selectedOption?.label || this.placeholder;
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        if (this.open) {
+            this.closePanel();
+        }
+        else {
+            this.openPanel();
+        }
+    }
+    onChange(event) {
+        this.valueChange.emit(event.target.value);
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.valueChange.emit(option.value);
+        this.closePanel();
+    }
+    onEscape() {
+        if (this.open) {
+            this.closePanel();
+        }
+    }
+    openPanel() {
+        if (this.overlayRef)
+            return;
+        const triggerEl = this.triggerRef?.nativeElement;
+        if (!triggerEl)
+            return;
+        this.open = true;
+        this.cdr.markForCheck();
+        const positionStrategy = createFlexiblePositionStrategy$1(this.overlay, triggerEl, 4);
+        this.overlayRef = this.overlay.create({
+            // CRÍTICO: z-[70] para aparecer SOBRE modals (z-[60])
+            // panelClass se aplica al cdk-overlay-pane wrapper
+            panelClass: [Z_INDEX$1.popover],
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            width: triggerEl.offsetWidth,
+            // Consumer overrides are spread last — they win over every default above.
+            ...this.overlayOptions,
+        });
+        const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.backdropSub = this.overlayRef
+            .outsidePointerEvents()
+            .subscribe((event) => {
+            const target = event.target;
+            if (!triggerEl.contains(target)) {
+                this.closePanel();
+            }
+        });
+        this.cdr.markForCheck();
+    }
+    closePanel() {
+        if (!this.overlayRef)
+            return;
+        this.open = false;
+        this.destroyOverlay();
+        this.cdr.markForCheck();
+    }
+    destroyOverlay() {
+        if (this.backdropSub) {
+            this.backdropSub.unsubscribe();
+            this.backdropSub = null;
+        }
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+}
+PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className", placeholder: "placeholder", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none box-border items-center justify-between rounded-md border border-solid bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "pdm-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none box-border items-center justify-between rounded-md border border-solid bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], overlayOptions: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ["triggerEl"]
+            }], panelTemplateRef: [{
+                type: ViewChild,
+                args: ["panelTemplate"]
+            }], projectedOptions: [{
+                type: ContentChildren,
+                args: [PdmSelectOptionDirective]
+            }], onEscape: [{
+                type: HostListener,
+                args: ["document:keydown.escape"]
+            }] } });
+
+const COMPONENTS$a = [PdmSelectComponent, PdmSelectOptionDirective];
+class PdmSelectModule {
+}
+PdmSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectModule, declarations: [PdmSelectComponent, PdmSelectOptionDirective], imports: [CommonModule, OverlayModule, PdmIconModule$1], exports: [PdmSelectComponent, PdmSelectOptionDirective] });
+PdmSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectModule, imports: [CommonModule, OverlayModule, PdmIconModule$1] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, OverlayModule, PdmIconModule$1],
+                    declarations: COMPONENTS$a,
+                    exports: COMPONENTS$a,
+                }]
+        }] });
+
+class PdmSeparatorComponent {
+    constructor() {
+        this.orientation = 'horizontal';
+        this.decorative = true;
+        this.className = '';
+    }
+    get orientationClass() {
+        return this.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full';
+    }
+}
+PdmSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSeparatorComponent, selector: "pdm-separator", inputs: { orientation: "orientation", decorative: "decorative", className: "className" }, ngImport: i0, template: "<div\n  [attr.role]=\"decorative ? 'none' : 'separator'\"\n  [attr.aria-orientation]=\"orientation\"\n  [ngClass]=\"['shrink-0 bg-border', orientationClass, className]\"\n></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-separator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [attr.role]=\"decorative ? 'none' : 'separator'\"\n  [attr.aria-orientation]=\"orientation\"\n  [ngClass]=\"['shrink-0 bg-border', orientationClass, className]\"\n></div>\n" }]
+        }], propDecorators: { orientation: [{
+                type: Input
+            }], decorative: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
 const COMPONENTS$9 = [
     PdmSeparatorComponent,
 ];
@@ -6734,7 +6388,7 @@ class PdmSonnerComponent {
     }
 }
 PdmSonnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSonnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSonnerComponent, selector: "pdm-sonner", inputs: { title: "title", description: "description", tone: "tone", className: "className" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div [ngClass]=\"['flex w-full max-w-sm items-start gap-3 rounded-lg border border-solid p-4 shadow-lg', toneClass, className]\" role=\"status\" aria-live=\"polite\">\n  <div class=\"grid gap-0.5\">\n    <p *ngIf=\"title\" class=\"m-0 text-sm font-semibold\">{{ title }}</p>\n    <p *ngIf=\"description\" class=\"m-0 text-sm opacity-90\">{{ description }}</p>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"ml-auto appearance-none box-border rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"dismissed.emit()\" aria-label=\"Dismiss\">\n    <pdm-icon name=\"x\" [size]=\"14\"></pdm-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSonnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSonnerComponent, selector: "pdm-sonner", inputs: { title: "title", description: "description", tone: "tone", className: "className" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div [ngClass]=\"['flex w-full max-w-sm items-start gap-3 rounded-lg border border-solid p-4 shadow-lg', toneClass, className]\" role=\"status\" aria-live=\"polite\">\n  <div class=\"grid gap-0.5\">\n    <p *ngIf=\"title\" class=\"m-0 text-sm font-semibold\">{{ title }}</p>\n    <p *ngIf=\"description\" class=\"m-0 text-sm opacity-90\">{{ description }}</p>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"ml-auto appearance-none box-border rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"dismissed.emit()\" aria-label=\"Dismiss\">\n    <pdm-icon name=\"x\" [size]=\"14\"></pdm-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-sonner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex w-full max-w-sm items-start gap-3 rounded-lg border border-solid p-4 shadow-lg', toneClass, className]\" role=\"status\" aria-live=\"polite\">\n  <div class=\"grid gap-0.5\">\n    <p *ngIf=\"title\" class=\"m-0 text-sm font-semibold\">{{ title }}</p>\n    <p *ngIf=\"description\" class=\"m-0 text-sm opacity-90\">{{ description }}</p>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"ml-auto appearance-none box-border rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"dismissed.emit()\" aria-label=\"Dismiss\">\n    <pdm-icon name=\"x\" [size]=\"14\"></pdm-icon>\n  </button>\n</div>\n" }]
@@ -6754,12 +6408,12 @@ const COMPONENTS$5 = [PdmSonnerComponent];
 class PdmSonnerModule {
 }
 PdmSonnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmSonnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerModule, declarations: [PdmSonnerComponent], imports: [CommonModule, PdmIconModule], exports: [PdmSonnerComponent] });
-PdmSonnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerModule, imports: [CommonModule, PdmIconModule] });
+PdmSonnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerModule, declarations: [PdmSonnerComponent], imports: [CommonModule, PdmIconModule$1], exports: [PdmSonnerComponent] });
+PdmSonnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerModule, imports: [CommonModule, PdmIconModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PdmIconModule],
+                    imports: [CommonModule, PdmIconModule$1],
                     declarations: COMPONENTS$5,
                     exports: COMPONENTS$5,
                 }]
@@ -7057,7 +6711,7 @@ class PdmTooltipComponent {
             .withPositions(this.getPositionConfigs())
             .withFlexibleDimensions(false)
             .withPush(true);
-        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX);
+        const panelClass = mergeOverlayPanelClass$1(OVERLAY_BASE_Z_INDEX$1);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             panelClass,
@@ -7498,6 +7152,362 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+/**
+ * Creates a flexible position strategy that automatically adjusts
+ * to keep the overlay within the viewport edges.
+ *
+ * The strategy tries positions in this order:
+ * 1. Bottom-left (origin bottom edge, aligns to left)
+ * 2. Top-left (origin top edge, aligns to left)
+ * 3. Bottom-right (origin bottom edge, aligns to right)
+ * 4. Top-right (origin top edge, aligns to right)
+ *
+ * CDK Overlay will use the first position that fits within the viewport.
+ */
+function createFlexiblePositionStrategy(overlay, triggerElement, offset = 4) {
+    return overlay
+        .position()
+        .flexibleConnectedTo(triggerElement)
+        .withPositions([
+        // Bottom-left (default) - opens downward from left edge
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: offset
+        },
+        // Top-left - opens upward from left edge
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -offset
+        },
+        // Bottom-right - opens downward from right edge
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: offset
+        },
+        // Top-right - opens upward from right edge
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -offset
+        }
+    ])
+        .withFlexibleDimensions(false)
+        .withPush(true);
+}
+
+/**
+ * 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).
+ */
+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
+ */
+function mergeOverlayPanelClass(baseZIndex = OVERLAY_BASE_Z_INDEX, consumerClasses) {
+    const baseClasses = baseZIndex.split(" ");
+    if (!consumerClasses) {
+        return baseClasses;
+    }
+    const consumerClassArray = Array.isArray(consumerClasses)
+        ? consumerClasses
+        : consumerClasses.split(" ");
+    // Consumer classes are appended AFTER base classes
+    // This ensures z-index from baseClasses is preserved first
+    return [...baseClasses, ...consumerClassArray];
+}
+/**
+ * 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
+ */
+function createZIndexEnforcedOverlay(baseConfig, consumerPanelClass) {
+    const mergedClasses = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, consumerPanelClass);
+    const existingPanelClass = baseConfig.panelClass;
+    if (existingPanelClass) {
+        const existingArray = Array.isArray(existingPanelClass)
+            ? existingPanelClass
+            : existingPanelClass.split(" ");
+        return {
+            ...baseConfig,
+            panelClass: [...mergedClasses, ...existingArray],
+        };
+    }
+    return {
+        ...baseConfig,
+        panelClass: mergedClasses,
+    };
+}
+/**
+ * Helper to extract z-index from a class string for debugging.
+ */
+function extractZIndex(classes) {
+    const classArray = Array.isArray(classes) ? classes : classes.split(" ");
+    for (const cls of classArray) {
+        if (cls.startsWith("z-") || cls.startsWith("z-[")) {
+            return cls;
+        }
+    }
+    return null;
+}
+
+/**
+ * Sistema de responsive utilities para PDM UI Kit
+ *
+ * Proporciona constantes, tipos y helpers para manejar responsive design
+ * de forma consistente en todos los componentes.
+ */
+/**
+ * Breakpoints estándar de Tailwind CSS
+ * Mobile-first approach: los estilos base son para mobile, los breakpoints son MIN-WIDTH
+ */
+const BREAKPOINTS = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px' // extra large desktop
+};
+/**
+ * Helper para generar clases responsive de forma programática
+ *
+ * @example
+ * responsive({ default: 'block', sm: 'flex', lg: 'grid' })
+ * // Returns: 'block sm:flex lg:grid'
+ */
+function responsive(config) {
+    const classes = [];
+    if (config.default) {
+        classes.push(config.default);
+    }
+    ['sm', 'md', 'lg', 'xl', '2xl'].forEach(bp => {
+        if (config[bp]) {
+            classes.push(`${bp}:${config[bp]}`);
+        }
+    });
+    return classes.join(' ');
+}
+/**
+ * Helper para overflow responsive
+ * Maneja el caso común de scroll en mobile, auto en desktop
+ *
+ * @example
+ * overflowResponsive('x', 'scroll', 'auto')
+ * // Returns: 'overflow-x-scroll sm:overflow-x-auto'
+ */
+function overflowResponsive(axis, mobile, desktop) {
+    const axisClass = axis === 'both' ? 'overflow' : `overflow-${axis}`;
+    const mobileClass = `${axisClass}-${mobile}`;
+    if (!desktop || desktop === mobile) {
+        return mobileClass;
+    }
+    return `${mobileClass} sm:${axisClass}-${desktop}`;
+}
+/**
+ * Helper para spacing responsive
+ * Útil para padding/margin que necesita ajustarse por breakpoint
+ *
+ * @example
+ * spacingResponsive('px', { default: '4', sm: '6', lg: '8' })
+ * // Returns: 'px-4 sm:px-6 lg:px-8'
+ */
+function spacingResponsive(property, values) {
+    return responsive(Object.entries(values).reduce((acc, [key, value]) => {
+        acc[key] = `${property}-${value}`;
+        return acc;
+    }, {}));
+}
+/**
+ * Helper para width responsive
+ *
+ * @example
+ * widthResponsive({ default: 'full', sm: 'auto', lg: '1/2' })
+ * // Returns: 'w-full sm:w-auto lg:w-1/2'
+ */
+function widthResponsive(values) {
+    return responsive(Object.entries(values).reduce((acc, [key, value]) => {
+        acc[key] = `w-${value}`;
+        return acc;
+    }, {}));
+}
+/**
+ * Clases comunes para containers responsive
+ * Pensadas para wrappers que contienen contenido que puede desbordar
+ */
+const RESPONSIVE_CONTAINER = {
+    // Container con scroll horizontal en mobile, contenido visible en desktop
+    tableWrapper: 'relative w-full overflow-x-auto sm:overflow-x-visible',
+    // Container con padding negativo en mobile para scroll edge-to-edge
+    tableWrapperFullBleed: 'relative w-full -mx-4 px-4 overflow-x-auto sm:mx-0 sm:px-0 sm:overflow-x-visible',
+    // Container con max-width responsive
+    contentWrapper: 'w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-screen-2xl',
+    // Container para modals/dialogs
+    modalWrapper: 'w-full max-w-lg mx-auto px-4 sm:px-0',
+    // Container para forms
+    formWrapper: 'w-full max-w-md mx-auto space-y-4'
+};
+/**
+ * Clases comunes para display responsive
+ */
+const RESPONSIVE_DISPLAY = {
+    // Ocultar en mobile, mostrar en desktop
+    hideOnMobile: 'hidden sm:block',
+    // Mostrar solo en mobile
+    showOnMobile: 'block sm:hidden',
+    // Stack en mobile, flex en desktop
+    stackToFlex: 'flex flex-col sm:flex-row',
+    // Stack en mobile, grid en desktop
+    stackToGrid: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
+};
+/**
+ * Clases para table responsive strategies
+ */
+const TABLE_RESPONSIVE = {
+    // Scroll horizontal (default, más simple)
+    scroll: {
+        wrapper: 'relative w-full overflow-x-auto',
+        table: 'w-full min-w-full',
+        cell: 'whitespace-nowrap'
+    },
+    // Permitir wrap del contenido
+    wrap: {
+        wrapper: 'relative w-full overflow-x-auto',
+        table: 'w-full',
+        cell: 'whitespace-normal break-words'
+    },
+    // Stack en mobile (cada fila se convierte en card)
+    // Requiere lógica adicional en el componente
+    stack: {
+        wrapper: 'relative w-full',
+        table: 'w-full',
+        row: 'block sm:table-row border-b sm:border-b-0',
+        cell: 'block sm:table-cell py-2 sm:py-0 before:content-[attr(data-label)] before:font-medium before:inline-block before:w-32 sm:before:content-none'
+    },
+    // Collapse: ocultar columnas menos importantes en mobile
+    // Se usa con clases de visibility en las columnas específicas
+    collapse: {
+        wrapper: 'relative w-full overflow-x-auto',
+        table: 'w-full',
+        cell: 'whitespace-nowrap',
+        // Estas clases se aplican a columnas opcionales
+        optionalColumn: 'hidden md:table-cell'
+    }
+};
+
+/**
+ * Z-Index Scale - Sistema centralizado de z-index
+ *
+ * JERARQUÍA (de menor a mayor):
+ * 1. base (z-0) - Elementos normales del DOM
+ * 2. dropdown (z-10) - Selects, combobox, date-pickers
+ * 3. sticky (z-20) - Headers, navigation bars
+ * 4. drawerBackdrop (z-30) - Backdrop de drawers
+ * 5. drawer (z-40) - Sidebar drawer, sheets laterales
+ * 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-[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)
+ */
+const Z_INDEX = {
+    /**
+     * Base - contenido normal del DOM
+     */
+    base: "z-0",
+    /**
+     * Dropdown - Selects, combobox, date-pickers
+     * Debe estar SOBRE contenido normal pero BAJO overlays
+     */
+    dropdown: "z-10",
+    /**
+     * Sticky - Headers, navigation fija
+     */
+    sticky: "z-20",
+    /**
+     * Drawer backdrop - Backdrop de sidebar drawer
+     * Debe estar DEBAJO del drawer panel y DEBAJO de modals
+     */
+    drawerBackdrop: "z-30",
+    /**
+     * Drawer - Sidebar drawer, sheets laterales
+     * Debe estar SOBRE su backdrop pero BAJO modals
+     */
+    drawer: "z-40",
+    /**
+     * Modal backdrop - Backdrop de dialogs
+     * Mismo nivel que drawer backdrop (z-40)
+     */
+    modalBackdrop: "z-40",
+    /**
+     * Modal - Dialogs, alert-dialogs
+     * Debe estar SOBRE su backdrop
+     */
+    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
+     */
+    popover: "z-[70]",
+    /**
+     * Toast - Notificaciones globales
+     * Debe estar sobre TODO
+     */
+    toast: "z-[100]",
+};
+/**
+ * Helper para debugging z-index issues
+ */
+function logZIndexStack(element) {
+    if (typeof window === "undefined")
+        return;
+    let current = element;
+    const stack = [];
+    while (current && current !== document.body) {
+        const computed = window.getComputedStyle(current);
+        const zIndex = computed.zIndex;
+        const position = computed.position;
+        if (zIndex !== "auto") {
+            stack.push({
+                element: current.tagName +
+                    (current.className ? `.${current.className.split(" ")[0]}` : ""),
+                zIndex,
+                position,
+            });
+        }
+        current = current.parentElement;
+    }
+    console.table(stack);
+}
+
 /**
  * Generated bundle index. Do not edit.
  */