Feature/styles debug

.gitignore

@@ -59,3 +59,4 @@ src/assets/components/themes
 .playwright-mcp/*
 
 .claude/*
+.qwen

package.json

@@ -46,6 +46,7 @@
     "@angular/router": "20.3.15",
     "@compodoc/compodoc": "1.1.32",
     "@primeng/themes": "20.4.0",
+    "@primeuix/themes": "1.2.5",
     "@storybook/addon-a11y": "10.1.8",
     "@storybook/addon-docs": "10.1.8",
     "@storybook/addon-themes": "^10.1.8",
@@ -65,9 +66,8 @@
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
-    "ng-packagr": "20.3.2",
-    "@primeuix/themes": "1.2.5",
     "karma-jasmine-html-reporter": "2.1.0",
+    "ng-packagr": "20.3.2",
     "prettier": "3.7.4",
     "primeng": "20.4.0",
     "rxjs": "7.8.2",
@@ -78,6 +78,7 @@
     "zone.js": "0.15.1"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.3.1",
     "cpx": "1.5.0"
   },
   "eslintConfig": {

src/lib/components/avatar/avatar.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular
 import { Avatar } from 'primeng/avatar';
 import { AvatarGroup } from 'primeng/avatargroup';
 
-export type ExtraAvatarSize = 'normal' | 'large' | 'xlarge';
+export type ExtraAvatarSize = 'base' | 'large' | 'xlarge';
 export type ExtraAvatarShape = 'square' | 'circle';
 
 @Component({
@@ -24,7 +24,7 @@ export class ExtraAvatarComponent {
   @Input() label = '';
   @Input() icon = '';
   @Input() image = '';
-  @Input() size: ExtraAvatarSize = 'normal';
+  @Input() size: ExtraAvatarSize = 'base';
   @Input() shape: ExtraAvatarShape = 'square';
 
   @HostBinding('class') get hostClass(): string {
@@ -34,8 +34,8 @@ export class ExtraAvatarComponent {
     return classes.join(' ');
   }
 
-  get primeSize(): 'normal' | 'large' | 'xlarge' | undefined {
-    return this.size === 'normal' ? undefined : this.size;
+  get primeSize(): 'large' | 'xlarge' | undefined {
+    return this.size === 'base' ? undefined : this.size;
   }
 }
 

src/lib/components/button/button.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Button, ButtonSeverity as PrimeButtonSeverity } from 'primeng/button';
 
-export type ExtraButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text' | 'link';
+export type ExtraButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'link';
 export type ExtraButtonSeverity = 'success' | 'warning' | 'danger' | 'info' | null;
 export type ExtraButtonSize = 'small' | 'base' | 'large' | 'xlarge';
-export type ExtraButtonIconPos = 'prefix' | 'postfix' | null;
+export type ExtraButtonIconPosition = 'prefix' | 'postfix' | null;
 export type ExtraBadgeSeverity = 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null;
 type PrimeBadgeSeverity = Extract<Button['badgeSeverity'], string | null>;
 type ExtraButtonSeverityValue = PrimeButtonSeverity;
@@ -23,11 +23,11 @@ type ExtraBadgeSeverityValue = PrimeBadgeSeverity;
       [size]="primeSize"
       [styleClass]="size === 'xlarge' ? 'p-button-xlg' : ''"
       [rounded]="rounded"
-      [outlined]="variant === 'outlined'"
+      [outlined]="variant === 'tertiary'"
       [text]="variant === 'text' || text"
       [link]="variant === 'link'"
       [icon]="icon"
-      [iconPos]="primeIconPos"
+      [iconPos]="primeIconPosition"
       [severity]="primeSeverity"
       [badge]="showBadge ? badge || ' ' : undefined"
       [badgeSeverity]="primeBadgeSeverity"
@@ -44,7 +44,7 @@ export class ExtraButtonComponent {
   @Input() severity: ExtraButtonSeverity = null;
   @Input() size: ExtraButtonSize = 'base';
   @Input() rounded = false;
-  @Input() iconPos: ExtraButtonIconPos = null;
+  @Input() iconPosition: ExtraButtonIconPosition = null;
   @Input() iconOnly = false;
   @Input() icon = '';
   @Input() disabled = false;
@@ -64,8 +64,8 @@ export class ExtraButtonComponent {
     return undefined;
   }
 
-  get primeIconPos(): 'left' | 'right' {
-    return this.iconPos === 'postfix' ? 'right' : 'left';
+  get primeIconPosition(): 'left' | 'right' {
+    return this.iconPosition === 'postfix' ? 'right' : 'left';
   }
 
   get primeSeverity(): ExtraButtonSeverityValue | null {

src/lib/components/confirm-dialog/confirm-dialog.component.ts

@@ -5,7 +5,7 @@ import { PrimeTemplate } from 'primeng/api';
 import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit/components/button';
 
 export type ExtraConfirmDialogSize = 'sm' | 'default' | 'lg' | 'xlg';
-export type ExtraConfirmDialogSeverity = 'success' | 'info' | 'warn' | 'help' | 'danger' | 'default';
+export type ExtraConfirmDialogSeverity = 'success' | 'info' | 'warning' | 'help' | 'danger' | 'default';
 
 @Directive({ selector: '[extraConfirmDialogHeader]', standalone: true })
 export class ExtraConfirmDialogHeaderDirective {}
@@ -84,7 +84,7 @@ export class ExtraConfirmDialogComponent {
     const severityMap: Record<ExtraConfirmDialogSeverity, string> = {
       success: 'p-confirm-dialog-accept',
       info: 'p-confirm-dialog-info',
-      warn: 'p-confirm-dialog-warn',
+      warning: 'p-confirm-dialog-warn',
       help: 'p-confirm-dialog-help',
       danger: 'p-confirm-dialog-error',
       default: ''