pdm-ui-kit 1.2.1 → 1.4.0

package/fesm2020/pdm-ui-kit.mjs

@@ -12,12 +12,15 @@ import { createFlexiblePositionStrategy as createFlexiblePositionStrategy$1, mer
 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 * as i2$1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i2$2 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';
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
 
 class PdmAccordionComponent {
     constructor() {
@@ -58,7 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$K = [
+const COMPONENTS$D = [
     PdmAccordionComponent,
 ];
 class PdmAccordionModule {
@@ -70,8 +73,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$D,
+                    exports: COMPONENTS$D
                 }]
         }] });
 
@@ -91,10 +94,10 @@ class PdmAlertComponent {
     }
 }
 PdmAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertComponent, selector: "pdm-alert", inputs: { variant: "variant", title: "title", description: "description", details: "details", className: "className" }, ngImport: i0, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertComponent, selector: "pdm-alert", inputs: { variant: "variant", title: "title", description: "description", details: "details", className: "className" }, ngImport: i0, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" aria-label=\"Success\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" aria-label=\"Info\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" aria-label=\"Error\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pdm-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" aria-label=\"Success\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" aria-label=\"Info\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" aria-label=\"Error\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], title: [{
@@ -191,7 +194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
-const COMPONENTS$J = [
+const COMPONENTS$C = [
     PdmAlertComponent,
     PdmAlertDialogComponent,
 ];
@@ -206,8 +209,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$J,
-                    exports: COMPONENTS$J
+                    declarations: COMPONENTS$C,
+                    exports: COMPONENTS$C
                 }]
         }] });
 
@@ -225,10 +228,10 @@ class PdmAspectRatioComponent {
     }
 }
 PdmAspectRatioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAspectRatioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAspectRatioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAspectRatioComponent, selector: "pdm-aspect-ratio", inputs: { ratio: "ratio", imageSrc: "imageSrc", imageAlt: "imageAlt", className: "className" }, ngImport: i0, template: "<div class=\"relative w-full\" [ngClass]=\"className\" [style.paddingTop]=\"paddingTop\">\n  <div class=\"absolute inset-0 overflow-hidden rounded-lg\">\n    <img\n      *ngIf=\"imageSrc\"\n      [src]=\"imageSrc\"\n      [alt]=\"imageAlt\"\n      class=\"pointer-events-none h-full w-full rounded-lg object-cover\"\n    />\n    <ng-content></ng-content>\n  </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmAspectRatioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAspectRatioComponent, isStandalone: true, selector: "pdm-aspect-ratio", inputs: { ratio: "ratio", imageSrc: "imageSrc", imageAlt: "imageAlt", className: "className" }, ngImport: i0, template: "<div class=\"relative w-full\" [ngClass]=\"className\" [style.paddingTop]=\"paddingTop\">\n  <div class=\"absolute inset-0 overflow-hidden rounded-lg\">\n    <img\n      *ngIf=\"imageSrc\"\n      [src]=\"imageSrc\"\n      [alt]=\"imageAlt\"\n      class=\"pointer-events-none h-full w-full rounded-lg object-cover\"\n    />\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: PdmAspectRatioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-aspect-ratio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative w-full\" [ngClass]=\"className\" [style.paddingTop]=\"paddingTop\">\n  <div class=\"absolute inset-0 overflow-hidden rounded-lg\">\n    <img\n      *ngIf=\"imageSrc\"\n      [src]=\"imageSrc\"\n      [alt]=\"imageAlt\"\n      class=\"pointer-events-none h-full w-full rounded-lg object-cover\"\n    />\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pdm-aspect-ratio', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div class=\"relative w-full\" [ngClass]=\"className\" [style.paddingTop]=\"paddingTop\">\n  <div class=\"absolute inset-0 overflow-hidden rounded-lg\">\n    <img\n      *ngIf=\"imageSrc\"\n      [src]=\"imageSrc\"\n      [alt]=\"imageAlt\"\n      class=\"pointer-events-none h-full w-full rounded-lg object-cover\"\n    />\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { ratio: [{
                 type: Input
             }], imageSrc: [{
@@ -239,20 +242,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$I = [
-    PdmAspectRatioComponent,
-];
+/**
+ * @deprecated Import PdmAspectRatioComponent directly instead. This module is kept for backwards compatibility.
+ * For modern Angular (v14+), use: import { PdmAspectRatioComponent } from 'pdm-ui-kit/aspect-ratio'
+ */
 class PdmAspectRatioModule {
 }
 PdmAspectRatioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAspectRatioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmAspectRatioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmAspectRatioModule, declarations: [PdmAspectRatioComponent], imports: [CommonModule], exports: [PdmAspectRatioComponent] });
-PdmAspectRatioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAspectRatioModule, imports: [CommonModule] });
+PdmAspectRatioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmAspectRatioModule, imports: [PdmAspectRatioComponent], exports: [PdmAspectRatioComponent] });
+PdmAspectRatioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAspectRatioModule, imports: [PdmAspectRatioComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAspectRatioModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: COMPONENTS$I,
-                    exports: COMPONENTS$I
+                    imports: [PdmAspectRatioComponent],
+                    exports: [PdmAspectRatioComponent]
                 }]
         }] });
 
@@ -299,7 +302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$H = [
+const COMPONENTS$B = [
     PdmAvatarComponent,
 ];
 class PdmAvatarModule {
@@ -311,8 +314,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$H,
-                    exports: COMPONENTS$H
+                    declarations: COMPONENTS$B,
+                    exports: COMPONENTS$B
                 }]
         }] });
 
@@ -324,10 +327,10 @@ class PdmBadgeComponent {
     }
 }
 PdmBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmBadgeComponent, selector: "pdm-badge", inputs: { variant: "variant", text: "text", className: "className" }, ngImport: i0, template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle rounded-full px-2.5 py-0.5 text-xs font-semibold',\n    variant === 'default' ? 'bg-primary text-primary-foreground' : '',\n    variant === 'secondary' ? 'bg-secondary text-secondary-foreground' : '',\n    variant === 'destructive' ? 'bg-destructive text-destructive-foreground' : '',\n    variant === 'outline' ? 'border border-solid border-input text-foreground' : '',\n    variant === 'icon' ? 'gap-1 bg-primary text-primary-foreground' : '',\n    variant === 'number' ? 'min-w-5 rounded-full bg-primary px-1.5 text-primary-foreground' : '',\n    variant === 'destructive-number' ? 'min-w-5 rounded-full bg-destructive px-1.5 text-destructive-foreground' : '',\n    variant === 'secondary-number' ? 'min-w-5 rounded-full border border-solid border-input px-1.5 text-foreground' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n    <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </svg>\n  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\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 });
+PdmBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmBadgeComponent, isStandalone: true, selector: "pdm-badge", inputs: { variant: "variant", text: "text", className: "className" }, ngImport: i0, template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle rounded-full px-2.5 py-0.5 text-xs font-semibold',\n    variant === 'default' ? 'bg-primary text-primary-foreground' : '',\n    variant === 'secondary' ? 'bg-secondary text-secondary-foreground' : '',\n    variant === 'destructive' ? 'bg-destructive text-destructive-foreground' : '',\n    variant === 'outline' ? 'border border-solid border-input text-foreground' : '',\n    variant === 'icon' ? 'gap-1 bg-primary text-primary-foreground' : '',\n    variant === 'number' ? 'min-w-5 rounded-full bg-primary px-1.5 text-primary-foreground' : '',\n    variant === 'destructive-number' ? 'min-w-5 rounded-full bg-destructive px-1.5 text-destructive-foreground' : '',\n    variant === 'secondary-number' ? 'min-w-5 rounded-full border border-solid border-input px-1.5 text-foreground' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n    <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </svg>\n  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: PdmBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle rounded-full px-2.5 py-0.5 text-xs font-semibold',\n    variant === 'default' ? 'bg-primary text-primary-foreground' : '',\n    variant === 'secondary' ? 'bg-secondary text-secondary-foreground' : '',\n    variant === 'destructive' ? 'bg-destructive text-destructive-foreground' : '',\n    variant === 'outline' ? 'border border-solid border-input text-foreground' : '',\n    variant === 'icon' ? 'gap-1 bg-primary text-primary-foreground' : '',\n    variant === 'number' ? 'min-w-5 rounded-full bg-primary px-1.5 text-primary-foreground' : '',\n    variant === 'destructive-number' ? 'min-w-5 rounded-full bg-destructive px-1.5 text-destructive-foreground' : '',\n    variant === 'secondary-number' ? 'min-w-5 rounded-full border border-solid border-input px-1.5 text-foreground' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n    <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </svg>\n  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\n" }]
+            args: [{ selector: 'pdm-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle rounded-full px-2.5 py-0.5 text-xs font-semibold',\n    variant === 'default' ? 'bg-primary text-primary-foreground' : '',\n    variant === 'secondary' ? 'bg-secondary text-secondary-foreground' : '',\n    variant === 'destructive' ? 'bg-destructive text-destructive-foreground' : '',\n    variant === 'outline' ? 'border border-solid border-input text-foreground' : '',\n    variant === 'icon' ? 'gap-1 bg-primary text-primary-foreground' : '',\n    variant === 'number' ? 'min-w-5 rounded-full bg-primary px-1.5 text-primary-foreground' : '',\n    variant === 'destructive-number' ? 'min-w-5 rounded-full bg-destructive px-1.5 text-destructive-foreground' : '',\n    variant === 'secondary-number' ? 'min-w-5 rounded-full border border-solid border-input px-1.5 text-foreground' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n    <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </svg>\n  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\n" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], text: [{
@@ -336,20 +339,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$G = [
-    PdmBadgeComponent,
-];
+/**
+ * @deprecated Import PdmBadgeComponent directly instead. This module is kept for backwards compatibility.
+ * For modern Angular (v14+), use: import { PdmBadgeComponent } from 'pdm-ui-kit/badge'
+ */
 class PdmBadgeModule {
 }
 PdmBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmBadgeModule, declarations: [PdmBadgeComponent], imports: [CommonModule], exports: [PdmBadgeComponent] });
-PdmBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBadgeModule, imports: [CommonModule] });
+PdmBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmBadgeModule, imports: [PdmBadgeComponent], exports: [PdmBadgeComponent] });
+PdmBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBadgeModule, imports: [PdmBadgeComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBadgeModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: COMPONENTS$G,
-                    exports: COMPONENTS$G
+                    imports: [PdmBadgeComponent],
+                    exports: [PdmBadgeComponent]
                 }]
         }] });
 
@@ -412,7 +415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$F = [
+const COMPONENTS$A = [
     PdmBreadcrumbComponent,
 ];
 class PdmBreadcrumbModule {
@@ -424,11 +427,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$F,
-                    exports: COMPONENTS$F
+                    declarations: COMPONENTS$A,
+                    exports: COMPONENTS$A
                 }]
         }] });
 
+const BUTTON_TONE_MAP = {
+    default: {
+        default: 'border-primary bg-primary text-primary-foreground',
+        hover: 'border-primary bg-primary text-primary-foreground opacity-90',
+    },
+    primary: {
+        default: 'border-primary bg-primary text-primary-foreground',
+        hover: 'border-primary bg-primary text-primary-foreground opacity-90',
+    },
+    destructive: {
+        default: 'border-border bg-destructive text-destructive-foreground',
+        hover: 'border-border bg-destructive text-destructive-foreground opacity-90',
+    },
+    outline: {
+        default: 'border-border bg-background text-foreground',
+        hover: 'border-border bg-muted text-foreground',
+    },
+    subtle: {
+        default: 'border-secondary bg-secondary text-secondary-foreground',
+        hover: 'border-accent bg-accent text-accent-foreground',
+    },
+    secondary: {
+        default: 'border-secondary bg-secondary text-secondary-foreground',
+        hover: 'border-accent bg-accent text-accent-foreground',
+    },
+    ghost: {
+        default: 'border-border bg-transparent text-foreground',
+        hover: 'border-border bg-accent text-accent-foreground',
+    },
+    link: {
+        default: 'border-border bg-transparent text-primary',
+        hover: 'border-border bg-transparent text-primary underline underline-offset-4',
+    },
+    'with-icon': {
+        default: 'border-primary bg-primary text-primary-foreground',
+        hover: 'border-primary bg-primary text-primary-foreground opacity-90',
+    },
+    icon: {
+        default: 'border-border bg-background text-foreground',
+        hover: 'border-border bg-accent text-accent-foreground',
+    },
+    'icon-circle': {
+        default: 'border-border bg-background text-foreground',
+        hover: 'border-border bg-accent text-accent-foreground',
+    },
+    rounded: {
+        default: 'border-border bg-background text-foreground',
+        hover: 'border-border bg-accent text-accent-foreground',
+    },
+    loading: {
+        default: 'border-primary bg-primary text-primary-foreground opacity-70',
+        hover: 'border-primary bg-primary text-primary-foreground opacity-70',
+    },
+};
+
 class PdmButtonComponent {
     constructor() {
         this.type = 'button';
@@ -439,21 +497,7 @@ class PdmButtonComponent {
         this.loading = false;
         this.className = '';
         this.pressed = new EventEmitter();
-        this.toneClassMap = {
-            default: { default: 'border-primary bg-primary text-primary-foreground', hover: 'border-primary bg-primary text-primary-foreground opacity-90' },
-            primary: { default: 'border-primary bg-primary text-primary-foreground', hover: 'border-primary bg-primary text-primary-foreground opacity-90' },
-            destructive: { default: 'border-border bg-destructive text-destructive-foreground', hover: 'border-border bg-destructive text-destructive-foreground opacity-90' },
-            outline: { default: 'border-border bg-background text-foreground', hover: 'border-border bg-muted text-foreground' },
-            subtle: { default: 'border-secondary bg-secondary text-secondary-foreground', hover: 'border-accent bg-accent text-accent-foreground' },
-            secondary: { default: 'border-secondary bg-secondary text-secondary-foreground', hover: 'border-accent bg-accent text-accent-foreground' },
-            ghost: { default: 'border-border bg-transparent text-foreground', hover: 'border-border bg-accent text-accent-foreground' },
-            link: { default: 'border-border bg-transparent text-primary', hover: 'border-border bg-transparent text-primary underline underline-offset-4' },
-            'with-icon': { default: 'border-primary bg-primary text-primary-foreground', hover: 'border-primary bg-primary text-primary-foreground opacity-90' },
-            icon: { default: 'border-border bg-background text-foreground', hover: 'border-border bg-accent text-accent-foreground' },
-            'icon-circle': { default: 'border-border bg-background text-foreground', hover: 'border-border bg-accent text-accent-foreground' },
-            rounded: { default: 'border-border bg-background text-foreground', hover: 'border-border bg-accent text-accent-foreground' },
-            loading: { default: 'border-primary bg-primary text-primary-foreground opacity-70', hover: 'border-primary bg-primary text-primary-foreground opacity-70' }
-        };
+        this.toneClassMap = BUTTON_TONE_MAP;
     }
     get isDisabled() {
         return this.disabled || this.loading || this.variant === 'loading';
@@ -518,10 +562,10 @@ class PdmButtonComponent {
     }
 }
 PdmButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonComponent, selector: "pdm-button", inputs: { type: "type", variant: "variant", state: "state", size: "size", disabled: "disabled", loading: "loading", className: "className" }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"showsIconSlot\"></ng-content>\n  <ng-content></ng-content>\n</button>\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 });
+PdmButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonComponent, selector: "pdm-button", inputs: { type: "type", variant: "variant", state: "state", size: "size", disabled: "disabled", loading: "loading", className: "className" }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"isDisabled && loading ? true : null\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"showsIconSlot\"></ng-content>\n  <ng-content></ng-content>\n</button>\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: PdmButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"showsIconSlot\"></ng-content>\n  <ng-content></ng-content>\n</button>\n" }]
+            args: [{ selector: 'pdm-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"isDisabled && loading ? true : null\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"showsIconSlot\"></ng-content>\n  <ng-content></ng-content>\n</button>\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], variant: [{
@@ -773,7 +817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$E = [
+const COMPONENTS$z = [
     PdmButtonComponent,
     PdmButtonGroupComponent,
 ];
@@ -788,8 +832,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$E,
-                    exports: COMPONENTS$E
+                    declarations: COMPONENTS$z,
+                    exports: COMPONENTS$z
                 }]
         }] });
 
@@ -1338,6 +1382,7 @@ class PdmDatePickerComponent {
         this.labelClassName = "";
         this.className = "";
         this.triggerClassName = "";
+        this.iconOnly = false;
         /**
          * Additional CSS classes applied to the overlay panel.
          * Backward-compatible: mapped to `overlayOptions.panelClass` when `overlayOptions` is not set.
@@ -1440,15 +1485,22 @@ class PdmDatePickerComponent {
     get rootClasses() {
         return [
             "grid gap-2",
-            this.resolvedVariant === "range" ? "w-[280px]" : "w-[197px]",
+            this.iconOnly
+                ? "inline-grid w-auto"
+                : this.resolvedVariant === "range"
+                    ? "w-[280px]"
+                    : "w-[197px]",
             this.className,
         ];
     }
     get triggerClasses() {
         const focusStyle = this._open || this.triggerFocused;
         return [
-            "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 relative flex w-full appearance-none box-border items-center gap-2 overflow-hidden rounded-lg border border-solid bg-background px-3 py-[7.5px] text-left text-sm shadow-sm outline-none transition-colors",
+            "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 relative flex appearance-none box-border items-center overflow-hidden rounded-lg border border-solid bg-background text-sm shadow-sm outline-none transition-colors",
             "min-h-[36px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+            this.iconOnly
+                ? "size-9 justify-center p-0"
+                : "w-full gap-2 px-3 py-[7.5px] text-left",
             focusStyle ? "border-ring ring-2 ring-ring/50" : "",
             this.invalid ? "border-destructive ring-destructive/20" : "",
             this.triggerClassName,
@@ -1596,10 +1648,10 @@ 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: 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 });
+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", iconOnly: "iconOnly", 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    [attr.aria-label]=\"iconOnly ? displayText : null\"\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 *ngIf=\"!iconOnly\" [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" }]
+            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    [attr.aria-label]=\"iconOnly ? displayText : null\"\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 *ngIf=\"!iconOnly\" [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" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { triggerRef: [{
                 type: ViewChild,
                 args: ["triggerEl"]
@@ -1618,6 +1670,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], triggerClassName: [{
                 type: Input
+            }], iconOnly: [{
+                type: Input
             }], panelClassName: [{
                 type: Input
             }], overlayOptions: [{
@@ -1671,7 +1725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$D = [PdmCalendarComponent, PdmDatePickerComponent];
+const COMPONENTS$y = [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 });
@@ -1681,8 +1735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, PdmLabelModule$1],
-                    declarations: COMPONENTS$D,
-                    exports: COMPONENTS$D,
+                    declarations: COMPONENTS$y,
+                    exports: COMPONENTS$y,
                 }]
         }] });
 
@@ -1731,7 +1785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$C = [
+const COMPONENTS$x = [
     PdmCardComponent,
 ];
 class PdmCardModule {
@@ -1743,8 +1797,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$x,
+                    exports: COMPONENTS$x
                 }]
         }] });
 
@@ -1847,7 +1901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$B = [
+const COMPONENTS$w = [
     PdmCarouselComponent,
 ];
 class PdmCarouselModule {
@@ -1859,8 +1913,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$w,
+                    exports: COMPONENTS$w
                 }]
         }] });
 
@@ -2038,7 +2092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$A = [
+const COMPONENTS$v = [
     PdmChartComponent,
 ];
 class PdmChartModule {
@@ -2050,8 +2104,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$v,
+                    exports: COMPONENTS$v
                 }]
         }] });
 
@@ -2099,7 +2153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$z = [
+const COMPONENTS$u = [
     PdmCheckboxComponent,
 ];
 class PdmCheckboxModule {
@@ -2111,8 +2165,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$u,
+                    exports: COMPONENTS$u
                 }]
         }] });
 
@@ -2156,7 +2210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$y = [
+const COMPONENTS$t = [
     PdmCollapsibleComponent,
 ];
 class PdmCollapsibleModule {
@@ -2168,8 +2222,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$t,
+                    exports: COMPONENTS$t
                 }]
         }] });
 
@@ -2340,7 +2394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$x = [
+const COMPONENTS$s = [
     PdmComboboxComponent,
 ];
 class PdmComboboxModule {
@@ -2352,8 +2406,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$x,
-                    exports: COMPONENTS$x
+                    declarations: COMPONENTS$s,
+                    exports: COMPONENTS$s
                 }]
         }] });
 
@@ -2428,7 +2482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$w = [PdmCommandComponent];
+const COMPONENTS$r = [PdmCommandComponent];
 class PdmCommandModule {
 }
 PdmCommandModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2438,8 +2492,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, PdmIconModule$1],
-                    declarations: COMPONENTS$w,
-                    exports: COMPONENTS$w,
+                    declarations: COMPONENTS$r,
+                    exports: COMPONENTS$r,
                 }]
         }] });
 
@@ -2602,7 +2656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:click"]
             }] } });
 
-const COMPONENTS$v = [
+const COMPONENTS$q = [
     PdmContextMenuComponent,
 ];
 class PdmContextMenuModule {
@@ -2614,8 +2668,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$v,
-                    exports: COMPONENTS$v
+                    declarations: COMPONENTS$q,
+                    exports: COMPONENTS$q
                 }]
         }] });
 
@@ -3389,7 +3443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['tableElement']
             }] } });
 
-const COMPONENTS$u = [
+const COMPONENTS$p = [
     PdmDataTableComponent,
     PdmDraggableTableComponent,
     PdmTableComponent,
@@ -3407,8 +3461,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$u,
-                    exports: COMPONENTS$u
+                    declarations: COMPONENTS$p,
+                    exports: COMPONENTS$p
                 }]
         }] });
 
@@ -3446,7 +3500,7 @@ class PdmDialogComponent {
          * - desktop/mobile/mobile-fullscreen: legacy, deprecado
          */
         this.size = "responsive";
-        this.title = "Edit profile";
+        this.title = "";
         this.description = "";
         this.closeOnBackdrop = true;
         this.closeOnEsc = true;
@@ -3623,10 +3677,10 @@ class PdmDialogComponent {
     }
 }
 PdmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground 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\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\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 });
+PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground 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\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\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: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-dialog", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground 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\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: "pdm-dialog", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground 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\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { open: [{
                 type: Input
             }], variant: [{
@@ -3672,20 +3726,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$t = [
+const COMPONENTS$o = [
     PdmDialogComponent,
 ];
 class PdmDialogModule {
 }
 PdmDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, declarations: [PdmDialogComponent], imports: [CommonModule], exports: [PdmDialogComponent] });
-PdmDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, imports: [CommonModule] });
+PdmDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, declarations: [PdmDialogComponent], imports: [CommonModule, A11yModule], exports: [PdmDialogComponent] });
+PdmDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, imports: [CommonModule, A11yModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: COMPONENTS$t,
-                    exports: COMPONENTS$t
+                    imports: [CommonModule, A11yModule],
+                    declarations: COMPONENTS$o,
+                    exports: COMPONENTS$o
                 }]
         }] });
 
@@ -4014,7 +4068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
-const COMPONENTS$s = [PdmDrawerComponent, PdmSheetComponent];
+const COMPONENTS$n = [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 });
@@ -4024,8 +4078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, PdmIconModule$1],
-                    declarations: COMPONENTS$s,
-                    exports: COMPONENTS$s,
+                    declarations: COMPONENTS$n,
+                    exports: COMPONENTS$n,
                 }]
         }] });
 
@@ -4214,7 +4268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
-const COMPONENTS$r = [
+const COMPONENTS$m = [
     PdmDropdownMenuComponent,
 ];
 class PdmDropdownMenuModule {
@@ -4226,8 +4280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$r,
-                    exports: COMPONENTS$r
+                    declarations: COMPONENTS$m,
+                    exports: COMPONENTS$m
                 }]
         }] });
 
@@ -4256,7 +4310,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: 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 });
+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$2.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" }]
@@ -4284,7 +4338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$q = [PdmEmptyComponent];
+const COMPONENTS$l = [PdmEmptyComponent];
 class PdmEmptyModule {
 }
 PdmEmptyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -4294,8 +4348,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, PdmButtonModule$1, PdmIconModule$1],
-                    declarations: COMPONENTS$q,
-                    exports: COMPONENTS$q,
+                    declarations: COMPONENTS$l,
+                    exports: COMPONENTS$l,
                 }]
         }] });
 
@@ -4360,7 +4414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$p = [
+const COMPONENTS$k = [
     PdmFieldComponent,
 ];
 class PdmFieldModule {
@@ -4372,8 +4426,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$p,
-                    exports: COMPONENTS$p
+                    declarations: COMPONENTS$k,
+                    exports: COMPONENTS$k
                 }]
         }] });
 
@@ -4576,7 +4630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["focusout"]
             }] } });
 
-const COMPONENTS$o = [
+const COMPONENTS$j = [
     PdmHoverCardComponent,
 ];
 class PdmHoverCardModule {
@@ -4588,8 +4642,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$o,
-                    exports: COMPONENTS$o
+                    declarations: COMPONENTS$j,
+                    exports: COMPONENTS$j
                 }]
         }] });
 
@@ -4710,10 +4764,10 @@ class PdmIconComponent {
     }
 }
 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 });
+PdmIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmIconComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { 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"] }]
+            args: [{ selector: 'pdm-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], 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: [{
@@ -4732,20 +4786,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$n = [
-    PdmIconComponent,
-];
+/**
+ * @deprecated Import PdmIconComponent directly instead. This module is kept for backwards compatibility.
+ * For modern Angular (v14+), use: import { PdmIconComponent } from 'pdm-ui-kit/icon'
+ */
 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] });
+PdmIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, imports: [PdmIconComponent], exports: [PdmIconComponent] });
+PdmIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconModule, imports: [PdmIconComponent] });
 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
+                    imports: [PdmIconComponent],
+                    exports: [PdmIconComponent]
                 }]
         }] });
 
@@ -4768,6 +4822,9 @@ class PdmInputComponent {
         this.errorText = "";
         this.valueChange = new EventEmitter();
         this.blurred = new EventEmitter();
+        if (this.required && this.disabled) {
+            console.warn('PdmInputComponent: required + disabled is invalid — a required field cannot be disabled');
+        }
     }
     onInput(event) {
         this.valueChange.emit(event.target.value);
@@ -4775,13 +4832,22 @@ class PdmInputComponent {
     onBlur(event) {
         this.blurred.emit(event);
     }
+    get helperAttrId() {
+        return this.id ? `${this.id}-helper` : null;
+    }
+    get errorAttrId() {
+        return this.id ? `${this.id}-error` : null;
+    }
+    get descriptionAttrId() {
+        return this.invalid && this.errorText ? this.errorAttrId : this.helperAttrId;
+    }
 }
 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 });
+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    [attr.aria-describedby]=\"descriptionAttrId\"\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\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" 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: [{
+            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    [attr.aria-describedby]=\"descriptionAttrId\"\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\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -5148,7 +5214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$m = [
+const COMPONENTS$i = [
     PdmInputComponent,
     PdmInputGroupComponent,
     PdmInputOtpComponent,
@@ -5172,8 +5238,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, PdmIconModule$1],
-                    declarations: COMPONENTS$m,
-                    exports: COMPONENTS$m,
+                    declarations: COMPONENTS$i,
+                    exports: COMPONENTS$i,
                 }]
         }] });
 
@@ -5197,7 +5263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$l = [
+const COMPONENTS$h = [
     PdmItemComponent,
 ];
 class PdmItemModule {
@@ -5209,8 +5275,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$l,
-                    exports: COMPONENTS$l
+                    declarations: COMPONENTS$h,
+                    exports: COMPONENTS$h
                 }]
         }] });
 
@@ -5220,28 +5286,28 @@ class PdmKbdComponent {
     }
 }
 PdmKbdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmKbdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmKbdComponent, selector: "pdm-kbd", inputs: { className: "className" }, ngImport: i0, template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-solid border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground', className]\">\n  <ng-content></ng-content>\n</kbd>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmKbdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmKbdComponent, isStandalone: true, selector: "pdm-kbd", inputs: { className: "className" }, ngImport: i0, template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-solid border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground', className]\">\n  <ng-content></ng-content>\n</kbd>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: PdmKbdComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-kbd', changeDetection: ChangeDetectionStrategy.OnPush, template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-solid border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground', className]\">\n  <ng-content></ng-content>\n</kbd>\n" }]
+            args: [{ selector: 'pdm-kbd', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-solid border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground', className]\">\n  <ng-content></ng-content>\n</kbd>\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }] } });
 
-const COMPONENTS$k = [
-    PdmKbdComponent,
-];
+/**
+ * @deprecated Import PdmKbdComponent directly instead. This module is kept for backwards compatibility.
+ * For modern Angular (v14+), use: import { PdmKbdComponent } from 'pdm-ui-kit/kbd'
+ */
 class PdmKbdModule {
 }
 PdmKbdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmKbdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-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] });
+PdmKbdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmKbdModule, imports: [PdmKbdComponent], exports: [PdmKbdComponent] });
+PdmKbdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmKbdModule, imports: [PdmKbdComponent] });
 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
+                    imports: [PdmKbdComponent],
+                    exports: [PdmKbdComponent]
                 }]
         }] });
 
@@ -5265,7 +5331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$j = [
+const COMPONENTS$g = [
     PdmLabelComponent,
 ];
 class PdmLabelModule {
@@ -5277,8 +5343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$j,
-                    exports: COMPONENTS$j
+                    declarations: COMPONENTS$g,
+                    exports: COMPONENTS$g
                 }]
         }] });
 
@@ -5420,7 +5486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$i = [
+const COMPONENTS$f = [
     PdmMenubarComponent,
 ];
 class PdmMenubarModule {
@@ -5432,8 +5498,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$i,
-                    exports: COMPONENTS$i
+                    declarations: COMPONENTS$f,
+                    exports: COMPONENTS$f
                 }]
         }] });
 
@@ -5475,7 +5541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$h = [PdmNativeSelectComponent];
+const COMPONENTS$e = [PdmNativeSelectComponent];
 class PdmNativeSelectModule {
 }
 PdmNativeSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -5485,8 +5551,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, PdmIconModule$1],
-                    declarations: COMPONENTS$h,
-                    exports: COMPONENTS$h,
+                    declarations: COMPONENTS$e,
+                    exports: COMPONENTS$e,
                 }]
         }] });
 
@@ -5529,7 +5595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$g = [
+const COMPONENTS$d = [
     PdmNavigationMenuComponent,
 ];
 class PdmNavigationMenuModule {
@@ -5541,8 +5607,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$g,
-                    exports: COMPONENTS$g
+                    declarations: COMPONENTS$d,
+                    exports: COMPONENTS$d
                 }]
         }] });
 
@@ -5619,10 +5685,10 @@ 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: 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 });
+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        [attr.aria-label]=\"'Go to previous page'\"\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          [attr.aria-label]=\"'Go to page ' + pageNumber\"\n          [attr.aria-current]=\"pageNumber === page ? 'page' : null\"\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        [attr.aria-label]=\"'Go to next page'\"\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" }]
+            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        [attr.aria-label]=\"'Go to previous page'\"\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          [attr.aria-label]=\"'Go to page ' + pageNumber\"\n          [attr.aria-current]=\"pageNumber === page ? 'page' : null\"\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        [attr.aria-label]=\"'Go to next page'\"\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" }]
         }], propDecorators: { page: [{
                 type: Input
             }], pageCount: [{
@@ -5643,7 +5709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$f = [PdmPaginationComponent];
+const COMPONENTS$c = [PdmPaginationComponent];
 class PdmPaginationModule {
 }
 PdmPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -5653,8 +5719,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, PdmIconModule$1, PdmSelectModule$1],
-                    declarations: COMPONENTS$f,
-                    exports: COMPONENTS$f,
+                    declarations: COMPONENTS$c,
+                    exports: COMPONENTS$c,
                 }]
         }] });
 
@@ -5814,7 +5880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$e = [
+const COMPONENTS$b = [
     PdmPopoverComponent,
 ];
 class PdmPopoverModule {
@@ -5826,8 +5892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
-                    declarations: COMPONENTS$e,
-                    exports: COMPONENTS$e
+                    declarations: COMPONENTS$b,
+                    exports: COMPONENTS$b
                 }]
         }] });
 
@@ -5861,7 +5927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$d = [
+const COMPONENTS$a = [
     PdmProgressComponent,
 ];
 class PdmProgressModule {
@@ -5873,8 +5939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$d,
-                    exports: COMPONENTS$d
+                    declarations: COMPONENTS$a,
+                    exports: COMPONENTS$a
                 }]
         }] });
 
@@ -5913,7 +5979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$c = [
+const COMPONENTS$9 = [
     PdmRadioGroupComponent,
 ];
 class PdmRadioGroupModule {
@@ -5925,8 +5991,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$9,
+                    exports: COMPONENTS$9
                 }]
         }] });
 
@@ -5947,7 +6013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$b = [
+const COMPONENTS$8 = [
     PdmScrollAreaComponent,
 ];
 class PdmScrollAreaModule {
@@ -5959,8 +6025,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$8,
+                    exports: COMPONENTS$8
                 }]
         }] });
 
@@ -6172,7 +6238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
-const COMPONENTS$a = [PdmSelectComponent, PdmSelectOptionDirective];
+const COMPONENTS$7 = [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 });
@@ -6182,8 +6248,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, PdmIconModule$1],
-                    declarations: COMPONENTS$a,
-                    exports: COMPONENTS$a,
+                    declarations: COMPONENTS$7,
+                    exports: COMPONENTS$7,
                 }]
         }] });
 
@@ -6198,10 +6264,10 @@ class PdmSeparatorComponent {
     }
 }
 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 });
+PdmSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSeparatorComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { 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" }]
+            args: [{ selector: 'pdm-separator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], 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: [{
@@ -6210,20 +6276,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$9 = [
-    PdmSeparatorComponent,
-];
+/**
+ * @deprecated Import PdmSeparatorComponent directly instead. This module is kept for backwards compatibility.
+ * For modern Angular (v14+), use: import { PdmSeparatorComponent } from 'pdm-ui-kit/separator'
+ */
 class PdmSeparatorModule {
 }
 PdmSeparatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmSeparatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorModule, declarations: [PdmSeparatorComponent], imports: [CommonModule], exports: [PdmSeparatorComponent] });
-PdmSeparatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorModule, imports: [CommonModule] });
+PdmSeparatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorModule, imports: [PdmSeparatorComponent], exports: [PdmSeparatorComponent] });
+PdmSeparatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorModule, imports: [PdmSeparatorComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSeparatorModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: COMPONENTS$9,
-                    exports: COMPONENTS$9
+                    imports: [PdmSeparatorComponent],
+                    exports: [PdmSeparatorComponent]
                 }]
         }] });
 
@@ -6291,7 +6357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$8 = [
+const COMPONENTS$6 = [
     PdmSidebarComponent,
 ];
 class PdmSidebarModule {
@@ -6303,8 +6369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$8,
-                    exports: COMPONENTS$8
+                    declarations: COMPONENTS$6,
+                    exports: COMPONENTS$6
                 }]
         }] });
 
@@ -6314,28 +6380,28 @@ class PdmSkeletonComponent {
     }
 }
 PdmSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSkeletonComponent, selector: "pdm-skeleton", inputs: { className: "className" }, ngImport: i0, template: "<div [ngClass]=\"['animate-pulse rounded-md bg-muted', className]\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSkeletonComponent, isStandalone: true, selector: "pdm-skeleton", inputs: { className: "className" }, ngImport: i0, template: "<div [ngClass]=\"['animate-pulse rounded-md bg-muted', className]\"></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: PdmSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['animate-pulse rounded-md bg-muted', className]\"></div>\n" }]
+            args: [{ selector: 'pdm-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"['animate-pulse rounded-md bg-muted', className]\"></div>\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }] } });
 
-const COMPONENTS$7 = [
-    PdmSkeletonComponent,
-];
+/**
+ * @deprecated Import PdmSkeletonComponent directly instead. This module is kept for backwards compatibility.
+ * For modern Angular (v14+), use: import { PdmSkeletonComponent } from 'pdm-ui-kit/skeleton'
+ */
 class PdmSkeletonModule {
 }
 PdmSkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSkeletonModule, declarations: [PdmSkeletonComponent], imports: [CommonModule], exports: [PdmSkeletonComponent] });
-PdmSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSkeletonModule, imports: [CommonModule] });
+PdmSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSkeletonModule, imports: [PdmSkeletonComponent], exports: [PdmSkeletonComponent] });
+PdmSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSkeletonModule, imports: [PdmSkeletonComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: COMPONENTS$7,
-                    exports: COMPONENTS$7
+                    imports: [PdmSkeletonComponent],
+                    exports: [PdmSkeletonComponent]
                 }]
         }] });
 
@@ -6382,7 +6448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$6 = [
+const COMPONENTS$5 = [
     PdmSliderComponent,
 ];
 class PdmSliderModule {
@@ -6394,8 +6460,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: COMPONENTS$6,
-                    exports: COMPONENTS$6
+                    declarations: COMPONENTS$5,
+                    exports: COMPONENTS$5
                 }]
         }] });
 
@@ -6434,7 +6500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$5 = [PdmSonnerComponent];
+const COMPONENTS$4 = [PdmSonnerComponent];
 class PdmSonnerModule {
 }
 PdmSonnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -6444,8 +6510,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, PdmIconModule$1],
-                    declarations: COMPONENTS$5,
-                    exports: COMPONENTS$5,
+                    declarations: COMPONENTS$4,
+                    exports: COMPONENTS$4,
                 }]
         }] });
 
@@ -6456,30 +6522,30 @@ class PdmSpinnerComponent {
     }
 }
 PdmSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSpinnerComponent, selector: "pdm-spinner", inputs: { size: "size", className: "className" }, ngImport: i0, template: "<span\n  [style.width.px]=\"size\"\n  [style.height.px]=\"size\"\n  [ngClass]=\"['inline-block animate-spin rounded-full border-2 border-current border-r-transparent', className]\"\n  aria-hidden=\"true\"\n></span>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSpinnerComponent, isStandalone: true, selector: "pdm-spinner", inputs: { size: "size", className: "className" }, ngImport: i0, template: "<span\n  [style.width.px]=\"size\"\n  [style.height.px]=\"size\"\n  [ngClass]=\"['inline-block animate-spin rounded-full border-2 border-current border-r-transparent', className]\"\n  aria-hidden=\"true\"\n></span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: PdmSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [style.width.px]=\"size\"\n  [style.height.px]=\"size\"\n  [ngClass]=\"['inline-block animate-spin rounded-full border-2 border-current border-r-transparent', className]\"\n  aria-hidden=\"true\"\n></span>\n" }]
+            args: [{ selector: 'pdm-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<span\n  [style.width.px]=\"size\"\n  [style.height.px]=\"size\"\n  [ngClass]=\"['inline-block animate-spin rounded-full border-2 border-current border-r-transparent', className]\"\n  aria-hidden=\"true\"\n></span>\n" }]
         }], propDecorators: { size: [{
                 type: Input
             }], className: [{
                 type: Input
             }] } });
 
-const COMPONENTS$4 = [
-    PdmSpinnerComponent,
-];
+/**
+ * @deprecated Import PdmSpinnerComponent directly instead. This module is kept for backwards compatibility.
+ * For modern Angular (v14+), use: import { PdmSpinnerComponent } from 'pdm-ui-kit/spinner'
+ */
 class PdmSpinnerModule {
 }
 PdmSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSpinnerModule, declarations: [PdmSpinnerComponent], imports: [CommonModule], exports: [PdmSpinnerComponent] });
-PdmSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSpinnerModule, imports: [CommonModule] });
+PdmSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmSpinnerModule, imports: [PdmSpinnerComponent], exports: [PdmSpinnerComponent] });
+PdmSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSpinnerModule, imports: [PdmSpinnerComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSpinnerModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: COMPONENTS$4,
-                    exports: COMPONENTS$4
+                    imports: [PdmSpinnerComponent],
+                    exports: [PdmSpinnerComponent]
                 }]
         }] });
 
@@ -7538,9 +7604,415 @@ function logZIndexStack(element) {
     console.table(stack);
 }
 
+class PdmInputHarness extends ComponentHarness {
+    constructor() {
+        super(...arguments);
+        this.input = this.locatorFor('input');
+    }
+    static with(options) {
+        return new HarnessPredicate(PdmInputHarness, options)
+            .addOption('id', options.id, (harness, id) => HarnessPredicate.stringMatches(harness.getId(), id))
+            .addOption('placeholder', options.placeholder, (harness, placeholder) => HarnessPredicate.stringMatches(harness.getPlaceholder(), placeholder));
+    }
+    async getId() {
+        return (await this.input()).getAttribute('id') || '';
+    }
+    async getValue() {
+        return (await this.input()).getProperty('value') || '';
+    }
+    async setValue(value) {
+        const input = await this.input();
+        await input.clear();
+        await input.sendKeys(value);
+    }
+    async getPlaceholder() {
+        return (await this.input()).getAttribute('placeholder') || '';
+    }
+    async isDisabled() {
+        return (await this.input()).matchesSelector(':disabled');
+    }
+    async isReadonly() {
+        return (await this.input()).matchesSelector('[readonly]');
+    }
+    async isRequired() {
+        return (await this.input()).matchesSelector('[required]');
+    }
+    async isInvalid() {
+        return (await this.input()).matchesSelector('[aria-invalid="true"]');
+    }
+    async getLabel() {
+        const label = await this.locatorForOptional('label')();
+        return label ? label.text() : null;
+    }
+    async getHelperText() {
+        const helper = await this.locatorForOptional('[class*="text-muted-foreground"]')();
+        return helper ? helper.text() : null;
+    }
+    async getErrorText() {
+        const error = await this.locatorForOptional('[class*="text-destructive"]')();
+        return error ? error.text() : null;
+    }
+    async focus() {
+        return (await this.input()).focus();
+    }
+    async blur() {
+        return (await this.input()).blur();
+    }
+    async getType() {
+        return (await this.input()).getAttribute('type') || 'text';
+    }
+    async clear() {
+        return (await this.input()).clear();
+    }
+    getComponentInstance() {
+        return this.locatorFor(PdmInputComponent)();
+    }
+}
+PdmInputHarness.hostSelector = 'pdm-input';
+
+class PdmButtonHarness extends ComponentHarness {
+    constructor() {
+        super(...arguments);
+        this.button = this.locatorFor('button');
+    }
+    static with(options) {
+        return new HarnessPredicate(PdmButtonHarness, options)
+            .addOption('variant', options.variant, (harness, variant) => HarnessPredicate.stringMatches(harness.getVariant(), variant))
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+    }
+    async click() {
+        return (await this.button()).click();
+    }
+    async getText() {
+        return (await this.button()).text();
+    }
+    async isDisabled() {
+        return (await this.button()).matchesSelector(':disabled');
+    }
+    async isLoading() {
+        return (await this.button()).matchesSelector('[aria-busy="true"]');
+    }
+    async getVariant() {
+        const component = await this.getComponentInstance();
+        return component.resolvedVariant;
+    }
+    async getSize() {
+        const component = await this.getComponentInstance();
+        return component.resolvedSize;
+    }
+    async getType() {
+        return (await this.button()).getAttribute('type');
+    }
+    async hasIcon() {
+        const icon = await this.locatorForOptional('[pdmButtonIcon]')();
+        return !!icon;
+    }
+    async focus() {
+        return (await this.button()).focus();
+    }
+    async blur() {
+        return (await this.button()).blur();
+    }
+    getComponentInstance() {
+        return this.locatorFor(PdmButtonComponent)();
+    }
+}
+PdmButtonHarness.hostSelector = 'pdm-button';
+
+class PdmDialogHarness extends ComponentHarness {
+    constructor() {
+        super(...arguments);
+        this.dialog = this.locatorFor('[role="dialog"]');
+        this.closeButton = this.locatorForOptional('button[aria-label="Close dialog"]');
+        this.primaryButton = this.locatorForOptional('[role="dialog"] button:last-child');
+    }
+    static with(options) {
+        return new HarnessPredicate(PdmDialogHarness, options)
+            .addOption('title', options.title, (harness, title) => HarnessPredicate.stringMatches(harness.getTitle(), title));
+    }
+    async isOpen() {
+        try {
+            await this.dialog();
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    async getTitle() {
+        try {
+            const heading = await this.locatorForOptional('[role="dialog"] h2')();
+            return heading ? heading.text() : '';
+        }
+        catch {
+            return '';
+        }
+    }
+    async getDescription() {
+        try {
+            const description = await this.locatorForOptional('[role="dialog"] p')();
+            return description ? description.text() : '';
+        }
+        catch {
+            return '';
+        }
+    }
+    async close() {
+        const closeBtn = await this.closeButton();
+        if (closeBtn) {
+            return closeBtn.click();
+        }
+    }
+    async clickPrimaryAction() {
+        const btn = await this.primaryButton();
+        if (btn) {
+            return btn.click();
+        }
+    }
+    async clickSecondaryAction() {
+        const buttons = await this.locatorForAll('button')();
+        if (buttons.length >= 2) {
+            return buttons[buttons.length - 2].click();
+        }
+    }
+    async getVariant() {
+        const component = await this.getComponentInstance();
+        return component.variant;
+    }
+    async getSize() {
+        const component = await this.getComponentInstance();
+        return component.size;
+    }
+    async getPrimaryActionText() {
+        const component = await this.getComponentInstance();
+        return component.primaryActionText;
+    }
+    async getSecondaryActionText() {
+        const component = await this.getComponentInstance();
+        return component.secondaryActionText;
+    }
+    async hasCloseButton() {
+        return !!(await this.closeButton());
+    }
+    async getContent() {
+        const dialog = await this.dialog();
+        return dialog.text();
+    }
+    getComponentInstance() {
+        return this.locatorFor(PdmDialogComponent)();
+    }
+}
+PdmDialogHarness.hostSelector = 'pdm-dialog';
+
+class PdmSelectHarness extends ComponentHarness {
+    constructor() {
+        super(...arguments);
+        this.trigger = this.locatorFor('button');
+        this.panel = this.locatorForOptional('.cdk-overlay-pane');
+    }
+    static with(options) {
+        return new HarnessPredicate(PdmSelectHarness, options)
+            .addOption('placeholder', options.placeholder, (harness, placeholder) => HarnessPredicate.stringMatches(harness.getPlaceholder(), placeholder));
+    }
+    async open() {
+        return (await this.trigger()).click();
+    }
+    async close() {
+        // Close by pressing Escape
+        return (await this.trigger()).sendKeys('Escape');
+    }
+    async isOpen() {
+        try {
+            const component = await this.getComponentInstance();
+            return component.open;
+        }
+        catch {
+            return false;
+        }
+    }
+    async getSelectedOption() {
+        const component = await this.getComponentInstance();
+        return component.selectedOption;
+    }
+    async getSelectedLabel() {
+        const component = await this.getComponentInstance();
+        return component.selectedLabel;
+    }
+    async getPlaceholder() {
+        const component = await this.getComponentInstance();
+        return component.placeholder;
+    }
+    async selectOption(value) {
+        await this.open();
+        const options = await this.locatorForAll('.cdk-overlay-pane button')();
+        for (const option of options) {
+            const text = await option.text();
+            if (text.includes(value)) {
+                return option.click();
+            }
+        }
+        throw new Error(`Option with value "${value}" not found`);
+    }
+    async getOptions() {
+        const component = await this.getComponentInstance();
+        return component.resolvedOptions;
+    }
+    async isDisabled() {
+        const component = await this.getComponentInstance();
+        return component.disabled;
+    }
+    async isInvalid() {
+        const component = await this.getComponentInstance();
+        return component.invalid;
+    }
+    async focus() {
+        return (await this.trigger()).focus();
+    }
+    async blur() {
+        return (await this.trigger()).blur();
+    }
+    getComponentInstance() {
+        return this.locatorFor(PdmSelectComponent)();
+    }
+}
+PdmSelectHarness.hostSelector = 'pdm-select';
+
+class PdmCheckboxHarness extends ComponentHarness {
+    constructor() {
+        super(...arguments);
+        this.input = this.locatorFor('input[type="checkbox"]');
+    }
+    static with(options) {
+        return new HarnessPredicate(PdmCheckboxHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
+    }
+    async isChecked() {
+        return (await this.input()).matchesSelector(':checked');
+    }
+    async toggle() {
+        return (await this.input()).click();
+    }
+    async check() {
+        if (!(await this.isChecked())) {
+            await this.toggle();
+        }
+    }
+    async uncheck() {
+        if (await this.isChecked()) {
+            await this.toggle();
+        }
+    }
+    async isDisabled() {
+        return (await this.input()).matchesSelector(':disabled');
+    }
+    async getLabel() {
+        const label = await this.locatorForOptional('label')();
+        return label ? label.text() : '';
+    }
+    async getDescription() {
+        const component = await this.getComponentInstance();
+        return component.description;
+    }
+    async getVariant() {
+        const component = await this.getComponentInstance();
+        return component.variant;
+    }
+    async focus() {
+        return (await this.input()).focus();
+    }
+    async blur() {
+        return (await this.input()).blur();
+    }
+    getComponentInstance() {
+        return this.locatorFor(PdmCheckboxComponent)();
+    }
+}
+PdmCheckboxHarness.hostSelector = 'pdm-checkbox';
+
+class PdmPaginationHarness extends ComponentHarness {
+    constructor() {
+        super(...arguments);
+        this.nav = this.locatorFor('nav');
+    }
+    static with(options) {
+        return new HarnessPredicate(PdmPaginationHarness, options);
+    }
+    async goToPage(page) {
+        const buttons = await this.locatorForAll('button')();
+        for (const button of buttons) {
+            const text = await button.text();
+            if (text.trim() === String(page)) {
+                return button.click();
+            }
+        }
+        throw new Error(`Page ${page} not found in pagination`);
+    }
+    async goToNextPage() {
+        const buttons = await this.locatorForAll('button')();
+        if (buttons.length > 0) {
+            return buttons[buttons.length - 1].click();
+        }
+    }
+    async goToPreviousPage() {
+        const buttons = await this.locatorForAll('button')();
+        if (buttons.length > 0) {
+            return buttons[0].click();
+        }
+    }
+    async getCurrentPage() {
+        const component = await this.getComponentInstance();
+        return component.page;
+    }
+    async getPageCount() {
+        const component = await this.getComponentInstance();
+        return component.pageCount;
+    }
+    async getRowsPerPage() {
+        const component = await this.getComponentInstance();
+        return component.rowsPerPage;
+    }
+    async setRowsPerPage(rows) {
+        // This would require interacting with the select component
+        const component = await this.getComponentInstance();
+        component.rowsPerPageChange.emit(rows);
+    }
+    async getVisiblePages() {
+        const component = await this.getComponentInstance();
+        return component.visiblePages;
+    }
+    async isNextPageDisabled() {
+        const buttons = await this.locatorForAll('button')();
+        if (buttons.length > 0) {
+            return buttons[buttons.length - 1].matchesSelector(':disabled');
+        }
+        return true;
+    }
+    async isPreviousPageDisabled() {
+        const buttons = await this.locatorForAll('button')();
+        if (buttons.length > 0) {
+            return buttons[0].matchesSelector(':disabled');
+        }
+        return true;
+    }
+    async getPageButtons() {
+        return this.locatorForAll('button')();
+    }
+    getComponentInstance() {
+        return this.locatorFor(PdmPaginationComponent)();
+    }
+}
+PdmPaginationHarness.hostSelector = 'pdm-pagination';
+
+/**
+ * Public API for CDK test harnesses
+ *
+ * Usage:
+ * import { PdmInputHarness, PdmButtonHarness } from 'pdm-ui-kit/testing';
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BREAKPOINTS, OVERLAY_BASE_Z_INDEX, PdmAccordionComponent, PdmAccordionModule, PdmAlertComponent, PdmAlertDialogComponent, PdmAlertModule, PdmAspectRatioComponent, PdmAspectRatioModule, PdmAvatarComponent, PdmAvatarModule, PdmBadgeComponent, PdmBadgeModule, PdmBreadcrumbComponent, PdmBreadcrumbModule, PdmButtonComponent, PdmButtonGroupComponent, PdmButtonModule, PdmCalendarComponent, PdmCalendarModule, PdmCardComponent, PdmCardModule, PdmCarouselComponent, PdmCarouselModule, PdmChartComponent, PdmChartModule, PdmCheckboxComponent, PdmCheckboxModule, PdmCollapsibleComponent, PdmCollapsibleModule, PdmComboboxComponent, PdmComboboxModule, PdmCommandComponent, PdmCommandModule, PdmContextMenuComponent, PdmContextMenuModule, PdmDataTableComponent, PdmDataTableModule, PdmDatePickerComponent, PdmDialogComponent, PdmDialogModule, PdmDraggableTableComponent, PdmDrawerComponent, PdmDrawerModule, PdmDropdownMenuComponent, PdmDropdownMenuModule, PdmEmptyComponent, PdmEmptyModule, PdmFieldComponent, PdmFieldModule, PdmHoverCardComponent, PdmHoverCardModule, PdmIconComponent, PdmIconModule, PdmInputComponent, PdmInputGroupComponent, PdmInputModule, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmItemModule, PdmKbdComponent, PdmKbdModule, PdmLabelComponent, PdmLabelModule, PdmMenubarComponent, PdmMenubarModule, PdmNativeSelectComponent, PdmNativeSelectModule, PdmNavigationMenuComponent, PdmNavigationMenuModule, PdmOutsideClickDirective, PdmOutsideClickModule, PdmPaginationComponent, PdmPaginationModule, PdmPopoverComponent, PdmPopoverModule, PdmProgressComponent, PdmProgressModule, PdmRadioGroupComponent, PdmRadioGroupModule, PdmScrollAreaComponent, PdmScrollAreaModule, PdmSelectComponent, PdmSelectModule, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSeparatorModule, PdmSheetComponent, PdmSidebarComponent, PdmSidebarModule, PdmSkeletonComponent, PdmSkeletonModule, PdmSliderComponent, PdmSliderModule, PdmSonnerComponent, PdmSonnerModule, PdmSpinnerComponent, PdmSpinnerModule, PdmSwitchComponent, PdmSwitchModule, PdmTableComponent, PdmTabsComponent, PdmTabsModule, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmToggleModule, PdmTooltipComponent, PdmTooltipModule, PdmUiKitModule, RESPONSIVE_CONTAINER, RESPONSIVE_DISPLAY, TABLE_RESPONSIVE, Z_INDEX, createFlexiblePositionStrategy, createZIndexEnforcedOverlay, extractZIndex, logZIndexStack, mergeOverlayPanelClass, overflowResponsive, responsive, spacingResponsive, widthResponsive };
+export { BREAKPOINTS, OVERLAY_BASE_Z_INDEX, PdmAccordionComponent, PdmAccordionModule, PdmAlertComponent, PdmAlertDialogComponent, PdmAlertModule, PdmAspectRatioComponent, PdmAspectRatioModule, PdmAvatarComponent, PdmAvatarModule, PdmBadgeComponent, PdmBadgeModule, PdmBreadcrumbComponent, PdmBreadcrumbModule, PdmButtonComponent, PdmButtonGroupComponent, PdmButtonHarness, PdmButtonModule, PdmCalendarComponent, PdmCalendarModule, PdmCardComponent, PdmCardModule, PdmCarouselComponent, PdmCarouselModule, PdmChartComponent, PdmChartModule, PdmCheckboxComponent, PdmCheckboxHarness, PdmCheckboxModule, PdmCollapsibleComponent, PdmCollapsibleModule, PdmComboboxComponent, PdmComboboxModule, PdmCommandComponent, PdmCommandModule, PdmContextMenuComponent, PdmContextMenuModule, PdmDataTableComponent, PdmDataTableModule, PdmDatePickerComponent, PdmDialogComponent, PdmDialogHarness, PdmDialogModule, PdmDraggableTableComponent, PdmDrawerComponent, PdmDrawerModule, PdmDropdownMenuComponent, PdmDropdownMenuModule, PdmEmptyComponent, PdmEmptyModule, PdmFieldComponent, PdmFieldModule, PdmHoverCardComponent, PdmHoverCardModule, PdmIconComponent, PdmIconModule, PdmInputComponent, PdmInputGroupComponent, PdmInputHarness, PdmInputModule, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmItemModule, PdmKbdComponent, PdmKbdModule, PdmLabelComponent, PdmLabelModule, PdmMenubarComponent, PdmMenubarModule, PdmNativeSelectComponent, PdmNativeSelectModule, PdmNavigationMenuComponent, PdmNavigationMenuModule, PdmOutsideClickDirective, PdmOutsideClickModule, PdmPaginationComponent, PdmPaginationHarness, PdmPaginationModule, PdmPopoverComponent, PdmPopoverModule, PdmProgressComponent, PdmProgressModule, PdmRadioGroupComponent, PdmRadioGroupModule, PdmScrollAreaComponent, PdmScrollAreaModule, PdmSelectComponent, PdmSelectHarness, PdmSelectModule, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSeparatorModule, PdmSheetComponent, PdmSidebarComponent, PdmSidebarModule, PdmSkeletonComponent, PdmSkeletonModule, PdmSliderComponent, PdmSliderModule, PdmSonnerComponent, PdmSonnerModule, PdmSpinnerComponent, PdmSpinnerModule, PdmSwitchComponent, PdmSwitchModule, PdmTableComponent, PdmTabsComponent, PdmTabsModule, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmToggleModule, PdmTooltipComponent, PdmTooltipModule, PdmUiKitModule, RESPONSIVE_CONTAINER, RESPONSIVE_DISPLAY, TABLE_RESPONSIVE, Z_INDEX, createFlexiblePositionStrategy, createZIndexEnforcedOverlay, extractZIndex, logZIndexStack, mergeOverlayPanelClass, overflowResponsive, responsive, spacingResponsive, widthResponsive };
 //# sourceMappingURL=pdm-ui-kit.mjs.map