@tolle_/tolle-ui 0.0.19-beta → 0.0.21-beta

package/fesm2022/tolle-ui.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { Component, Input, forwardRef, Injectable, Optional, HostListener, ViewChild, ContentChildren, EventEmitter, Output, Directive, inject, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector, HostBinding } from '@angular/core';
+import { Component, Input, forwardRef, ViewChild, Injectable, Optional, HostListener, ContentChildren, EventEmitter, Output, Directive, inject, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT, NgIf, NgTemplateOutlet } from '@angular/common';
 import { cva } from 'class-variance-authority';
@@ -18,15 +18,15 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
-const buttonVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background active:scale-[0.98]", {
+const buttonVariants = cva("tolle-button-base inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background active:scale-[0.98]", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/90",
             destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+            outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "underline-offset-4 hover:underline text-primary",
+            link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
             default: "h-10 px-4 py-2",
@@ -38,7 +38,7 @@ const buttonVariants = cva("inline-flex items-center justify-center rounded-md t
             icon: "h-10 w-10",
             "icon-lg": "h-11 w-11",
         },
-        busy: { true: "relative !cursor-wait !pointer-events-none" }
+        busy: { true: "tolle-button--busy relative !cursor-wait !pointer-events-none" }
     },
     defaultVariants: {
         variant: "default",
@@ -51,16 +51,15 @@ class ButtonComponent {
     size = 'default';
     disabled = false;
     busy = false;
-    readonly = false;
     get computedClass() {
         return cn(buttonVariants({
             variant: this.variant,
             size: this.size,
             busy: this.busy
-        }), 'size-' + this.size, this.class);
+        }), this.class);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "tolle-button", inputs: { class: "class", variant: "variant", size: "size", disabled: "disabled", busy: "busy", readonly: "readonly" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "tolle-button", inputs: { class: "class", variant: "variant", size: "size", disabled: "disabled", busy: "busy" }, host: { classAttribute: "tolle-button-wrapper inline-block align-middle" }, ngImport: i0, template: `
     <button
       [class]="computedClass"
       [disabled]="disabled || busy"
@@ -77,11 +76,15 @@ class ButtonComponent {
         <ng-content></ng-content>
       </span>
     </button>
-  `, isInline: true, styles: [":host{display:inline-block;vertical-align:middle}:host ::ng-deep i{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host-context(.size-xs) ::ng-deep i,:host-context(.size-icon-xs) ::ng-deep i,:host-context(.size-sm) ::ng-deep i,:host-context(.size-icon-sm) ::ng-deep i{font-size:1rem}:host-context(.size-default) ::ng-deep i,:host-context(.size-icon) ::ng-deep i,:host-context(.size-lg) ::ng-deep i,:host-context(.size-icon-lg) ::ng-deep i{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tolle-button', standalone: true, imports: [CommonModule], template: `
+            args: [{
+                    selector: 'tolle-button',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
     <button
       [class]="computedClass"
       [disabled]="disabled || busy"
@@ -98,7 +101,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ng-content></ng-content>
       </span>
     </button>
-  `, styles: [":host{display:inline-block;vertical-align:middle}:host ::ng-deep i{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host-context(.size-xs) ::ng-deep i,:host-context(.size-icon-xs) ::ng-deep i,:host-context(.size-sm) ::ng-deep i,:host-context(.size-icon-sm) ::ng-deep i{font-size:1rem}:host-context(.size-default) ::ng-deep i,:host-context(.size-icon) ::ng-deep i,:host-context(.size-lg) ::ng-deep i,:host-context(.size-icon-lg) ::ng-deep i{font-size:1.2rem}\n"] }]
+  `,
+                    host: {
+                        'class': 'tolle-button-wrapper inline-block align-middle'
+                    }
+                }]
         }], propDecorators: { class: [{
                 type: Input
             }], variant: [{
@@ -109,12 +116,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], busy: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }] } });
 
 class InputComponent {
     cdr;
+    inputElement;
     id = `input-${Math.random().toString(36).substr(2, 9)}`;
     label = '';
     hint = '';
@@ -128,12 +134,20 @@ class InputComponent {
     disabled = false;
     readonly = false;
     error = false;
+    // Focus behavior
+    hideHintOnFocus = true;
     value = '';
     onChange = () => { };
     onTouched = () => { };
+    isFocused = false;
     constructor(cdr) {
         this.cdr = cdr;
     }
+    ngAfterViewInit() {
+        if (this.inputElement?.nativeElement.hasAttribute('autofocus')) {
+            setTimeout(() => this.inputElement.nativeElement.focus());
+        }
+    }
     writeValue(value) {
         this.value = value;
         this.cdr.markForCheck();
@@ -151,66 +165,132 @@ class InputComponent {
         this.value = val;
         this.onChange(val);
     }
+    onFocus() {
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
+    }
+    focusInput() {
+        if (!this.disabled && this.inputElement) {
+            this.inputElement.nativeElement.focus();
+        }
+    }
     cn = cn;
+    get computedLabelClass() {
+        return cn("text-sm font-medium text-foreground leading-none transition-opacity duration-200", this.disabled && "opacity-50");
+    }
     get computedContainerClass() {
-        return cn("group relative flex items-center w-full rounded-md border transition-all shadow-sm", "bg-background ring-offset-background", 
+        return cn(
+        // Base styles
+        "group relative flex items-center w-full rounded-md border transition-all duration-200", "bg-background", 
+        // Border and shadow
+        "border-input shadow-sm", 
         // Sizing
-        this.size === 'xs' && "h-8 px-2 gap-1.5", this.size === 'sm' && "h-9 px-3 gap-2", this.size === 'default' && "h-10 px-3 gap-2", this.size === 'lg' && "h-11 px-4 gap-3", 
-        // Interaction States (Focus ring disabled for Readonly/Disabled)
-        !(this.readonly || this.disabled) && "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1", 
-        // Colors & Borders
-        this.error ? "border-destructive focus-within:ring-destructive" : "border-input", 
-        // Disabled vs Readonly styling
-        this.disabled && "cursor-not-allowed opacity-50", this.readonly && "cursor-default border-dashed focus-within:ring-0", this.containerClass);
+        this.size === 'xs' && "h-8 px-2 gap-1.5 text-xs", this.size === 'sm' && "h-9 px-3 gap-2 text-sm", this.size === 'default' && "h-10 px-3 gap-2 text-sm", this.size === 'lg' && "h-11 px-4 gap-3 text-base", 
+        // Focus state - SIMPLE AND ELEGANT LIKE ZARDUI
+        // The magic happens in CSS: border darkens automatically on focus
+        !(this.readonly || this.disabled) && [
+            "focus-within:border-primary/80",
+            "focus-within:ring-4",
+            "focus-within:ring-ring/30",
+            "focus-within:ring-offset-0",
+            "focus-within:shadow-none",
+        ], 
+        // Error state
+        this.error && [
+            "border-destructive",
+            !(this.readonly || this.disabled) && [
+                "focus-within:border-destructive/80",
+                "focus-within:ring-destructive/30"
+            ]
+        ], 
+        // Disabled state
+        this.disabled && [
+            "cursor-not-allowed opacity-50",
+            "border-opacity-50"
+        ], 
+        // Readonly state
+        this.readonly && [
+            "cursor-default",
+            "border-dashed",
+            !this.disabled && "focus-within:ring-0 focus-within:border-opacity-100"
+        ], this.containerClass);
     }
     get computedInputClass() {
-        return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", this.class);
+        return cn(
+        // Base styles
+        "flex-1 bg-transparent border-none p-0", "placeholder:text-muted-foreground", 
+        // Remove all default focus styles
+        "focus:outline-none focus:ring-0 focus:shadow-none", 
+        // Text sizing
+        this.size === 'xs' && "text-xs", this.size === 'sm' && "text-sm", this.size === 'default' && "text-sm", this.size === 'lg' && "text-base", 
+        // Cursor states
+        this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", 
+        // Text color
+        "text-foreground", 
+        // Selection color
+        "selection:bg-primary/20 selection:text-foreground", this.class);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "tolle-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", type: "type", placeholder: "placeholder", size: "size", containerClass: "containerClass", class: "class", disabled: "disabled", readonly: "readonly", error: "error" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "tolle-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", type: "type", placeholder: "placeholder", size: "size", containerClass: "containerClass", class: "class", disabled: "disabled", readonly: "readonly", error: "error", hideHintOnFocus: "hideHintOnFocus" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: `
     <div class="flex flex-col gap-1.5 w-full">
       <label
         *ngIf="label"
         [for]="id"
-        [class.opacity-50]="disabled"
-        class="text-sm font-medium text-foreground leading-none transition-opacity"
-      >
+        [class]="computedLabelClass">
         {{ label }}
       </label>
 
-      <div [class]="computedContainerClass">
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[prefix]"></ng-content>
         </div>
 
         <input
+          #inputElement
           [id]="id"
           [type]="type"
           [placeholder]="placeholder"
           [disabled]="disabled"
           [readOnly]="readonly"
           [(ngModel)]="value"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           (input)="onInputChange($event)"
           [class]="computedInputClass"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
         />
 
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[suffix]"></ng-content>
         </div>
       </div>
 
       <ng-container *ngIf="!disabled">
-        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
           {{ hint }}
         </p>
-        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive px-1"
+        >
           {{ errorMessage }}
         </p>
       </ng-container>
@@ -235,46 +315,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <label
         *ngIf="label"
         [for]="id"
-        [class.opacity-50]="disabled"
-        class="text-sm font-medium text-foreground leading-none transition-opacity"
-      >
+        [class]="computedLabelClass">
         {{ label }}
       </label>
 
-      <div [class]="computedContainerClass">
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[prefix]"></ng-content>
         </div>
 
         <input
+          #inputElement
           [id]="id"
           [type]="type"
           [placeholder]="placeholder"
           [disabled]="disabled"
           [readOnly]="readonly"
           [(ngModel)]="value"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           (input)="onInputChange($event)"
           [class]="computedInputClass"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
         />
 
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[suffix]"></ng-content>
         </div>
       </div>
 
       <ng-container *ngIf="!disabled">
-        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
           {{ hint }}
         </p>
-        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive px-1"
+        >
           {{ errorMessage }}
         </p>
       </ng-container>
     </div>
   `,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }], id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -298,6 +394,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], error: [{
                 type: Input
+            }], hideHintOnFocus: [{
+                type: Input
             }] } });
 
 class CardComponent {
@@ -305,7 +403,7 @@ class CardComponent {
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "tolle-card", inputs: { class: "class" }, ngImport: i0, template: `
-    <div [class]="cn('rounded-xl border border-border bg-card text-card-foreground shadow', class)">
+    <div [class]="cn('rounded-md border border-border bg-card text-card-foreground shadow', class)">
       <ng-content></ng-content>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
@@ -317,7 +415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     standalone: true,
                     imports: [CommonModule],
                     template: `
-    <div [class]="cn('rounded-xl border border-border bg-card text-card-foreground shadow', class)">
+    <div [class]="cn('rounded-md border border-border bg-card text-card-foreground shadow', class)">
       <ng-content></ng-content>
     </div>
   `,
@@ -496,6 +594,7 @@ class SelectComponent {
     readonly = false;
     trigger;
     popover;
+    container;
     items;
     sub = new Subscription();
     searchQuery = '';
@@ -519,15 +618,38 @@ class SelectComponent {
             this.close();
         }));
     }
-    // UPDATED: Centralized sizing logic for the trigger
+    // SIMPLIFIED: Zardui-inspired trigger styling
     get computedTriggerClass() {
-        return cn('flex w-full items-center justify-between rounded-md border transition-all shadow-sm', 'bg-background ring-offset-background placeholder:text-muted-foreground', 
+        return cn(
+        // Base styles
+        'flex w-full items-center justify-between rounded-md border transition-all duration-200', 'bg-background text-foreground', 
+        // Border and shadow
+        'border-input shadow-sm', 
         // Sizing
         this.size === 'xs' && 'h-8 px-2 text-xs', this.size === 'sm' && 'h-9 px-3 text-sm', this.size === 'default' && 'h-10 px-3 text-sm', this.size === 'lg' && 'h-11 px-4 text-base', 
-        // Interaction States (Focus ring disabled for Readonly/Disabled)
-        !(this.readonly || this.disabled) && 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1', 
-        // Colors & Borders (Matching your Hex-based theme logic)
-        this.disabled && 'cursor-not-allowed opacity-50 bg-muted/30 border-input', this.readonly && 'cursor-default bg-muted/10 border-dashed border-input focus:ring-0', !this.disabled && !this.readonly && 'border-input hover:border-accent cursor-pointer', this.class);
+        // Focus state - SIMPLE LIKE ZARDUI
+        !(this.readonly || this.disabled) && [
+            'focus:outline-none',
+            'focus:ring-4',
+            'focus:ring-ring/30',
+            'focus:ring-offset-0',
+            'focus:shadow-none',
+            // Border darkens on focus automatically
+            'focus:border-primary/80'
+        ], 
+        // Hover state
+        !(this.readonly || this.disabled) && 'hover:border-accent', 
+        // Disabled state
+        this.disabled && [
+            'cursor-not-allowed opacity-50',
+            'border-opacity-50'
+        ], 
+        // Readonly state
+        this.readonly && [
+            'cursor-default',
+            'border-dashed',
+            !this.disabled && 'focus:ring-0 focus:border-opacity-100'
+        ], this.class);
     }
     // UPDATED: Dynamic icon sizing relative to the trigger size
     get iconClass() {
@@ -553,6 +675,8 @@ class SelectComponent {
     }
     open() {
         this.isOpen = true;
+        // Trigger focus on the button for focus styling
+        this.trigger.nativeElement.focus();
         // Tick to ensure DOM is rendered before positioning
         setTimeout(() => this.updatePosition());
     }
@@ -621,7 +745,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "items", predicate: SelectItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "items", predicate: SelectItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
     <div [class]="cn('w-full', 'size-' + size)" #container>
       <button
         type="button"
@@ -661,7 +785,7 @@ class SelectComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error", "hideHintOnFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -737,6 +861,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], popover: [{
                 type: ViewChild,
                 args: ['popover']
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
             }], items: [{
                 type: ContentChildren,
                 args: [SelectItemComponent, { descendants: true }]
@@ -929,7 +1056,7 @@ class BadgeComponent {
     get computedClass() {
         return cn(
         // Base styles - Pills are always rounded-full
-        'inline-flex items-center justify-center rounded-full border px-2 py-0.5 font-medium transition-colors gap-1', 
+        'inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium transition-colors gap-1', 
         // Variants (Google Dark Mode theme)
         this.variant === 'default' && 'border-transparent bg-primary text-primary-foreground', this.variant === 'secondary' && 'border-transparent bg-secondary text-secondary-foreground', this.variant === 'outline' && 'text-foreground border-border bg-transparent', this.variant === 'destructive' && 'border-transparent bg-destructive text-destructive-foreground', 
         // Sizing
@@ -947,7 +1074,7 @@ class BadgeComponent {
       <button
         *ngIf="removable"
         (click)="onRemove.emit($event)"
-        class="ml-1 -mr-1 rounded-full p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
+        class="ml-1 -mr-1 rounded-md p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
       >
         <i class="ri-close-line text-[1.1em]"></i>
       </button>
@@ -971,7 +1098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <button
         *ngIf="removable"
         (click)="onRemove.emit($event)"
-        class="ml-1 -mr-1 rounded-full p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
+        class="ml-1 -mr-1 rounded-md p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
       >
         <i class="ri-close-line text-[1.1em]"></i>
       </button>
@@ -1363,96 +1490,205 @@ class ThemeService {
         else if (this.config?.primaryColor) {
             this.setPrimaryColor(this.config.primaryColor, false);
         }
+        // Set radius from config
         if (this.config?.radius) {
-            this.renderer.setStyle(this.document.documentElement, '--radius', this.config.radius);
-        }
-        // 2. Apply Brand Config - This will generate full palette
-        if (this.config) {
-            this.applyBrandConfig(this.config);
+            this.setRadius(this.config.radius, false);
         }
     }
     /**
-     * Applies the brand identity variables with full shade palette
+     * Sets the border radius for all components
      */
-    applyBrandConfig(config) {
+    setRadius(radius, persist = true) {
         if (!isPlatformBrowser(this.platformId))
             return;
         const root = this.document.documentElement;
-        // Set primary color if provided
-        if (config.primaryColor) {
-            this.renderer.setStyle(root, '--primary', config.primaryColor);
-            this.generatePrimaryShades(config.primaryColor);
+        // Set the CSS variable
+        this.renderer.setStyle(root, '--radius', radius);
+        // Also update the dynamic styles to include radius calculations
+        this.updateRadiusInDynamicStyles(radius);
+        // Persist if needed
+        if (persist) {
+            localStorage.setItem('tolle-radius', radius);
         }
-        // Set border radius if provided
-        if (config.radius) {
-            this.renderer.setStyle(root, '--radius', config.radius);
+    }
+    /**
+     * Updates the radius calculations in dynamic styles
+     */
+    updateRadiusInDynamicStyles(radius) {
+        const existingStyle = this.document.getElementById(this.styleId);
+        if (existingStyle) {
+            let css = existingStyle.textContent || '';
+            // Update or add radius calculations
+            if (css.includes('--radius:')) {
+                // Replace existing radius declarations
+                css = css.replace(/--radius:[^;]+;/g, `--radius: ${radius};`);
+            }
+            else {
+                // Add radius to the beginning of :root
+                css = css.replace(/:root\s*{/, `:root {\n      --radius: ${radius};`);
+            }
+            // Update the calculated radius values in the CSS
+            const radiusCalcRegex = /calc\(var\(--radius[^)]+\)/g;
+            css = css.replace(radiusCalcRegex, (match) => {
+                if (match.includes('- 2px')) {
+                    return `calc(${radius} - 2px)`;
+                }
+                else if (match.includes('- 4px')) {
+                    return `calc(${radius} - 4px)`;
+                }
+                return match;
+            });
+            existingStyle.textContent = css;
         }
     }
     /**
      * Generates full primary color palette (50-900) based on base color
-     * Uses color-mix() for consistency with your existing approach
      */
     generatePrimaryShades(baseColor) {
+        // Convert hex to RGB
+        const rgb = this.hexToRgb(baseColor);
+        const rgbString = rgb ? `${rgb.r} ${rgb.g} ${rgb.b}` : '37 99 235';
+        // Create lighter ring colors in RGB
+        const ringLight = this.lightenColor(baseColor, 40);
+        const ringLightRgb = this.hexToRgb(ringLight);
+        const ringLightRgbString = ringLightRgb ? `${ringLightRgb.r} ${ringLightRgb.g} ${ringLightRgb.b}` : '96 165 250';
+        const ringDark = this.lightenColor(baseColor, 20);
+        const ringDarkRgb = this.hexToRgb(ringDark);
+        const ringDarkRgbString = ringDarkRgb ? `${ringDarkRgb.r} ${ringDarkRgb.g} ${ringDarkRgb.b}` : '147 197 253';
+        // Get current radius or use default
+        const root = this.document.documentElement;
+        const currentRadius = getComputedStyle(root).getPropertyValue('--radius').trim() || '0.5rem';
         const css = `
+      /* Override primary colors - this needs to come AFTER your main CSS */
       :root {
-        /* Primary Shades */
-        --primary-50: color-mix(in srgb, ${baseColor}, white 90%);
-        --primary-100: color-mix(in srgb, ${baseColor}, white 80%);
-        --primary-200: color-mix(in srgb, ${baseColor}, white 60%);
-        --primary-300: color-mix(in srgb, ${baseColor}, white 40%);
-        --primary-400: color-mix(in srgb, ${baseColor}, white 20%);
-        --primary-500: ${baseColor};
-        --primary-600: color-mix(in srgb, ${baseColor}, black 20%);
-        --primary-700: color-mix(in srgb, ${baseColor}, black 40%);
-        --primary-800: color-mix(in srgb, ${baseColor}, black 60%);
-        --primary-900: color-mix(in srgb, ${baseColor}, black 80%);
-
-        /* Your existing derived colors - updated to use new shades */
-        --primary-foreground: white;
-        --secondary: color-mix(in srgb, var(--primary-200), transparent 40%);
-        --secondary-foreground: var(--primary-900);
-        --muted: color-mix(in srgb, var(--primary-50), #f3f4f6 50%);
-        --muted-foreground: color-mix(in srgb, var(--primary-400), #4b5563 60%);
-        --accent: color-mix(in srgb, var(--primary-100), transparent 70%);
-        --accent-foreground: var(--primary-700);
-        --ring: color-mix(in srgb, var(--primary-300), transparent 50%);
+        /* Primary in RGB format for Tailwind opacity support */
+        --primary: ${rgbString};
+        --primary-foreground: ${this.getContrastColorRgb(baseColor)};
+
+        /* Radius */
+        --radius: ${currentRadius};
+
+        /* Primary shades for light mode */
+        --primary-50: ${this.hexToRgbString(this.lightenColor(baseColor, 90))};
+        --primary-100: ${this.hexToRgbString(this.lightenColor(baseColor, 80))};
+        --primary-200: ${this.hexToRgbString(this.lightenColor(baseColor, 60))};
+        --primary-300: ${this.hexToRgbString(this.lightenColor(baseColor, 40))};
+        --primary-400: ${this.hexToRgbString(this.lightenColor(baseColor, 20))};
+        --primary-500: ${rgbString};
+        --primary-600: ${this.hexToRgbString(this.darkenColor(baseColor, 20))};
+        --primary-700: ${this.hexToRgbString(this.darkenColor(baseColor, 40))};
+        --primary-800: ${this.hexToRgbString(this.darkenColor(baseColor, 60))};
+        --primary-900: ${this.hexToRgbString(this.darkenColor(baseColor, 80))};
+
+        /* Update ring color to be lighter */
+        --ring: ${ringLightRgbString};
       }
 
       .dark {
-        /* Dark mode variants */
-        --primary-50: color-mix(in srgb, ${baseColor}, black 85%);
-        --primary-100: color-mix(in srgb, ${baseColor}, black 75%);
-        --primary-200: color-mix(in srgb, ${baseColor}, black 65%);
-        --primary-300: color-mix(in srgb, ${baseColor}, black 55%);
-        --primary-400: color-mix(in srgb, ${baseColor}, black 45%);
-        --primary-500: ${baseColor};
-        --primary-600: color-mix(in srgb, ${baseColor}, white 20%);
-        --primary-700: color-mix(in srgb, ${baseColor}, white 35%);
-        --primary-800: color-mix(in srgb, ${baseColor}, white 50%);
-        --primary-900: color-mix(in srgb, ${baseColor}, white 65%);
-
-        /* Dark mode derived colors */
-        --primary-foreground: color-mix(in srgb, ${baseColor}, white 90%);
-        --secondary: color-mix(in srgb, var(--primary-900), transparent 70%);
-        --secondary-foreground: var(--primary-100);
-        --muted: color-mix(in srgb, var(--primary-950), #1f2937 50%);
-        --muted-foreground: color-mix(in srgb, var(--primary-300), #9ca3af 40%);
-        --accent: color-mix(in srgb, var(--primary-800), transparent 80%);
-        --accent-foreground: var(--primary-200);
-        --ring: color-mix(in srgb, var(--primary-600), transparent 60%);
+        /* For dark mode, we keep the primary color but adjust shades */
+        --primary: ${rgbString};
+        --primary-foreground: ${this.getContrastColorRgb(baseColor)};
+
+        /* Dark mode shades */
+        --primary-50: ${this.hexToRgbString(this.darkenColor(baseColor, 85))};
+        --primary-100: ${this.hexToRgbString(this.darkenColor(baseColor, 75))};
+        --primary-200: ${this.hexToRgbString(this.darkenColor(baseColor, 65))};
+        --primary-300: ${this.hexToRgbString(this.darkenColor(baseColor, 55))};
+        --primary-400: ${this.hexToRgbString(this.darkenColor(baseColor, 45))};
+        --primary-500: ${rgbString};
+        --primary-600: ${this.hexToRgbString(this.lightenColor(baseColor, 20))};
+        --primary-700: ${this.hexToRgbString(this.lightenColor(baseColor, 35))};
+        --primary-800: ${this.hexToRgbString(this.lightenColor(baseColor, 50))};
+        --primary-900: ${this.hexToRgbString(this.lightenColor(baseColor, 65))};
+
+        /* Update ring color for dark mode - lighter variant */
+        --ring: ${ringDarkRgbString};
       }
     `;
         this.injectDynamicStyles(css);
     }
+    /**
+     * Convert hex color to RGB object
+     */
+    hexToRgb(hex) {
+        // Remove # if present
+        const cleanedHex = hex.replace('#', '');
+        let r = 0, g = 0, b = 0;
+        if (cleanedHex.length === 3) {
+            r = parseInt(cleanedHex[0] + cleanedHex[0], 16);
+            g = parseInt(cleanedHex[1] + cleanedHex[1], 16);
+            b = parseInt(cleanedHex[2] + cleanedHex[2], 16);
+            return { r, g, b };
+        }
+        if (cleanedHex.length === 6) {
+            r = parseInt(cleanedHex.substring(0, 2), 16);
+            g = parseInt(cleanedHex.substring(2, 4), 16);
+            b = parseInt(cleanedHex.substring(4, 6), 16);
+            return { r, g, b };
+        }
+        return null;
+    }
+    /**
+     * Convert hex to RGB string format for CSS (space-separated)
+     */
+    hexToRgbString(hexColor) {
+        const rgb = this.hexToRgb(hexColor);
+        return rgb ? `${rgb.r} ${rgb.g} ${rgb.b}` : '37 99 235';
+    }
+    /**
+     * Get contrast color in RGB format
+     */
+    getContrastColorRgb(hexColor) {
+        const contrast = this.getContrastColor(hexColor);
+        const rgb = this.hexToRgb(contrast);
+        return rgb ? `${rgb.r} ${rgb.g} ${rgb.b}` : '255 255 255';
+    }
+    /**
+     * Lighten a hex color by a percentage
+     */
+    lightenColor(color, percent) {
+        const rgb = this.hexToRgb(color);
+        if (!rgb)
+            return color;
+        // Lighten by percentage
+        const r = Math.min(255, Math.floor(rgb.r + (255 - rgb.r) * (percent / 100)));
+        const g = Math.min(255, Math.floor(rgb.g + (255 - rgb.g) * (percent / 100)));
+        const b = Math.min(255, Math.floor(rgb.b + (255 - rgb.b) * (percent / 100)));
+        // Convert back to hex
+        return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+    }
+    /**
+     * Darken a hex color by a percentage
+     */
+    darkenColor(color, percent) {
+        const rgb = this.hexToRgb(color);
+        if (!rgb)
+            return color;
+        const factor = 1 - (percent / 100);
+        const r = Math.max(0, Math.floor(rgb.r * factor));
+        const g = Math.max(0, Math.floor(rgb.g * factor));
+        const b = Math.max(0, Math.floor(rgb.b * factor));
+        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    /**
+     * Calculate contrast color (black or white) based on background color
+     */
+    getContrastColor(hexColor) {
+        const rgb = this.hexToRgb(hexColor);
+        if (!rgb)
+            return '#ffffff';
+        // Calculate relative luminance
+        const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+        // Return black for light colors, white for dark colors
+        return luminance > 0.5 ? '#000000' : '#ffffff';
+    }
     injectDynamicStyles(css) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        // Remove existing dynamic styles
         const existingStyle = this.document.getElementById(this.styleId);
         if (existingStyle) {
             existingStyle.remove();
         }
-        // Create and inject new styles
         const styleElement = this.document.createElement('style');
         styleElement.id = this.styleId;
         styleElement.textContent = css;
@@ -1475,10 +1711,12 @@ class ThemeService {
     setPrimaryColor(color, persist = true) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        // Update CSS variables + palette
-        this.renderer.setStyle(this.document.documentElement, '--primary', color);
         this.generatePrimaryShades(color);
-        // Persist user preference
+        // Also set inline for immediate update
+        const rgb = this.hexToRgb(color);
+        if (rgb) {
+            this.renderer.setStyle(this.document.documentElement, '--primary', `${rgb.r} ${rgb.g} ${rgb.b}`);
+        }
         if (persist) {
             localStorage.setItem('tolle-primary-color', color);
         }
@@ -1487,8 +1725,44 @@ class ThemeService {
         return this.isDarkSubject.value ? 'dark' : 'light';
     }
     get primaryColor() {
+        if (!isPlatformBrowser(this.platformId))
+            return null;
+        const root = this.document.documentElement;
+        const cssValue = getComputedStyle(root).getPropertyValue('--primary').trim();
+        if (cssValue && cssValue !== '') {
+            // Convert RGB string back to hex for external use
+            const rgbParts = cssValue.split(' ').map(Number);
+            if (rgbParts.length === 3) {
+                return `#${rgbParts[0].toString(16).padStart(2, '0')}${rgbParts[1].toString(16).padStart(2, '0')}${rgbParts[2].toString(16).padStart(2, '0')}`;
+            }
+        }
         return localStorage.getItem('tolle-primary-color');
     }
+    get radius() {
+        if (!isPlatformBrowser(this.platformId))
+            return null;
+        const root = this.document.documentElement;
+        const cssValue = getComputedStyle(root).getPropertyValue('--radius').trim();
+        if (cssValue && cssValue !== '') {
+            return cssValue;
+        }
+        return localStorage.getItem('tolle-radius') || '0.5rem';
+    }
+    /**
+     * Applies the brand identity variables with full shade palette
+     */
+    applyBrandConfig(config) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Set primary color if provided
+        if (config.primaryColor) {
+            this.setPrimaryColor(config.primaryColor, false);
+        }
+        // Set border radius if provided
+        if (config.radius) {
+            this.setRadius(config.radius, false);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThemeService, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: TOLLE_CONFIG, optional: true }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
@@ -1670,7 +1944,7 @@ class MultiSelectComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BadgeComponent, selector: "tolle-badge", inputs: ["variant", "size", "removable", "class"], outputs: ["onRemove"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BadgeComponent, selector: "tolle-badge", inputs: ["variant", "size", "removable", "class"], outputs: ["onRemove"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error", "hideHintOnFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -2067,10 +2341,12 @@ class MaskedInputComponent {
     error = false;
     size = 'default';
     returnRaw = false;
+    hideHintOnFocus = true;
     inputEl;
     hasPrefix = false;
     hasSuffix = false;
     displayValue = '';
+    isFocused = false;
     tokens = {
         '0': /\d/, '9': /\d/, 'a': /[a-z]/i, 'A': /[a-z]/i, '*': /[a-z0-9]/i
     };
@@ -2089,19 +2365,71 @@ class MaskedInputComponent {
             this.cdr.detectChanges();
         }
     }
+    get computedLabelClass() {
+        return cn("text-sm font-medium text-foreground leading-none transition-opacity duration-200", this.disabled && "opacity-50");
+    }
     get computedContainerClass() {
-        return cn("group relative flex items-center w-full rounded-md border transition-all shadow-sm", "bg-background ring-offset-background", 
+        return cn(
+        // Base styles
+        "group relative flex items-center w-full rounded-md border transition-all duration-200", "bg-background", 
+        // Border and shadow
+        "border-input shadow-sm", 
         // Sizing
-        this.size === 'xs' && "h-8 px-2 gap-1.5", this.size === 'sm' && "h-9 px-3 gap-2", this.size === 'default' && "h-10 px-3 gap-2", this.size === 'lg' && "h-11 px-4 gap-3", 
-        // Interaction States (Inherited from Input focus style)
-        !(this.readonly || this.disabled) && "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1", 
-        // Colors & Borders
-        this.error ? "border-destructive focus-within:ring-destructive" : "border-input", 
-        // Disabled vs Readonly styling
-        this.disabled && "cursor-not-allowed opacity-50", this.readonly && "cursor-default border-dashed focus-within:ring-0", this.containerClass);
+        this.size === 'xs' && "h-8 px-2 gap-1.5 text-xs", this.size === 'sm' && "h-9 px-3 gap-2 text-sm", this.size === 'default' && "h-10 px-3 gap-2 text-sm", this.size === 'lg' && "h-11 px-4 gap-3 text-base", 
+        // Focus state - SIMPLE LIKE ZARDUI
+        !(this.readonly || this.disabled) && [
+            "focus-within:border-primary/80",
+            "focus-within:ring-4",
+            "focus-within:ring-ring/30",
+            "focus-within:ring-offset-0",
+            "focus-within:shadow-none",
+        ], 
+        // Error state
+        this.error && [
+            "border-destructive",
+            !(this.readonly || this.disabled) && [
+                "focus-within:border-destructive/80",
+                "focus-within:ring-destructive/30"
+            ]
+        ], 
+        // Disabled state
+        this.disabled && [
+            "cursor-not-allowed opacity-50",
+            "border-opacity-50"
+        ], 
+        // Readonly state
+        this.readonly && [
+            "cursor-default",
+            "border-dashed",
+            !this.disabled && "focus-within:ring-0 focus-within:border-opacity-100"
+        ], this.containerClass);
     }
     get computedInputClass() {
-        return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", this.class);
+        return cn(
+        // Base styles
+        "flex-1 bg-transparent border-none p-0", "placeholder:text-muted-foreground", 
+        // Remove all default focus styles
+        "focus:outline-none focus:ring-0 focus:shadow-none", 
+        // Text sizing
+        this.size === 'xs' && "text-xs", this.size === 'sm' && "text-sm", this.size === 'default' && "text-sm", this.size === 'lg' && "text-base", 
+        // Cursor states
+        this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", 
+        // Text color
+        "text-foreground", 
+        // Selection color
+        "selection:bg-primary/20 selection:text-foreground", this.class);
+    }
+    focusInput() {
+        if (!this.disabled && this.inputEl) {
+            this.inputEl.nativeElement.focus();
+        }
+    }
+    onFocus() {
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
     }
     // --- Masking Logic ---
     onInput(event) {
@@ -2140,20 +2468,26 @@ class MaskedInputComponent {
         }
         return formatted;
     }
-    unmask(val) { return val.replace(/[^a-zA-Z0-9]/g, ''); }
+    unmask(val) {
+        return val.replace(/[^a-zA-Z0-9]/g, '');
+    }
     writeValue(value) {
         this.displayValue = value ? this.applyMask(this.unmask(value.toString())) : '';
         this.cdr.markForCheck();
     }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouched = fn; }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
     }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaskedInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MaskedInputComponent, isStandalone: true, selector: "tolle-masked-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", mask: "mask", placeholder: "placeholder", type: "type", disabled: "disabled", readonly: "readonly", class: "class", containerClass: "containerClass", error: "error", size: "size", returnRaw: "returnRaw" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MaskedInputComponent, isStandalone: true, selector: "tolle-masked-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", mask: "mask", placeholder: "placeholder", type: "type", disabled: "disabled", readonly: "readonly", class: "class", containerClass: "containerClass", error: "error", size: "size", returnRaw: "returnRaw", hideHintOnFocus: "hideHintOnFocus" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MaskedInputComponent),
@@ -2164,15 +2498,17 @@ class MaskedInputComponent {
       <label
         *ngIf="label"
         [for]="id"
-        [class.opacity-50]="disabled"
-        class="text-sm font-medium text-foreground leading-none transition-opacity"
+        [class]="computedLabelClass"
       >
         {{ label }}
       </label>
 
-      <div [class]="computedContainerClass">
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
         <!-- Prefix Icon -->
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[prefix]"></ng-content>
         </div>
 
@@ -2185,21 +2521,32 @@ class MaskedInputComponent {
           [readOnly]="readonly"
           [value]="displayValue"
           (input)="onInput($event)"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           [class]="computedInputClass"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
         />
 
         <!-- Suffix Icon -->
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[suffix]"></ng-content>
         </div>
       </div>
 
       <ng-container *ngIf="!disabled">
-        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
           {{ hint }}
         </p>
-        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive px-1"
+        >
           {{ errorMessage }}
         </p>
       </ng-container>
@@ -2224,15 +2571,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <label
         *ngIf="label"
         [for]="id"
-        [class.opacity-50]="disabled"
-        class="text-sm font-medium text-foreground leading-none transition-opacity"
+        [class]="computedLabelClass"
       >
         {{ label }}
       </label>
 
-      <div [class]="computedContainerClass">
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
         <!-- Prefix Icon -->
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[prefix]"></ng-content>
         </div>
 
@@ -2245,21 +2594,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [readOnly]="readonly"
           [value]="displayValue"
           (input)="onInput($event)"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           [class]="computedInputClass"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
         />
 
         <!-- Suffix Icon -->
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[suffix]"></ng-content>
         </div>
       </div>
 
       <ng-container *ngIf="!disabled">
-        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
           {{ hint }}
         </p>
-        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive px-1"
+        >
           {{ errorMessage }}
         </p>
       </ng-container>
@@ -2294,6 +2654,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], returnRaw: [{
                 type: Input
+            }], hideHintOnFocus: [{
+                type: Input
             }], inputEl: [{
                 type: ViewChild,
                 args: ['inputEl', { static: true }]
@@ -2446,7 +2808,7 @@ class DatePickerComponent {
         ></tolle-calendar>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MaskedInputComponent, selector: "tolle-masked-input", inputs: ["id", "label", "hint", "errorMessage", "mask", "placeholder", "type", "disabled", "readonly", "class", "containerClass", "error", "size", "returnRaw"] }, { kind: "component", type: CalendarComponent, selector: "tolle-calendar", inputs: ["class", "disablePastDates"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MaskedInputComponent, selector: "tolle-masked-input", inputs: ["id", "label", "hint", "errorMessage", "mask", "placeholder", "type", "disabled", "readonly", "class", "containerClass", "error", "size", "returnRaw", "hideHintOnFocus"] }, { kind: "component", type: CalendarComponent, selector: "tolle-calendar", inputs: ["class", "disablePastDates"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -3038,7 +3400,7 @@ class DataTableComponent {
         (onPageSizeChange)="updatePage()"
       ></tolle-pagination>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "tolle-pagination", inputs: ["class", "showPageLinks", "showPageOptions", "showCurrentPageInfo", "currentPageInfoTemplate", "totalRecords", "currentPageSize", "currentPage", "pageSizeOptions"], outputs: ["onPageNumberChange", "onPageSizeChange"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "tolle-pagination", inputs: ["class", "showPageLinks", "showPageOptions", "showCurrentPageInfo", "currentPageInfoTemplate", "totalRecords", "currentPageSize", "currentPage", "pageSizeOptions"], outputs: ["onPageNumberChange", "onPageSizeChange"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error", "hideHintOnFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -3948,7 +4310,7 @@ class DateRangePickerComponent {
         ></tolle-range-calendar>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RangeCalendarComponent, selector: "tolle-range-calendar", inputs: ["class", "disablePastDates"], outputs: ["rangeSelect"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RangeCalendarComponent, selector: "tolle-range-calendar", inputs: ["class", "disablePastDates"], outputs: ["rangeSelect"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error", "hideHintOnFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -4166,30 +4528,69 @@ class TextareaComponent {
     label = '';
     placeholder = '';
     hint = '';
+    errorMessage = '';
     rows = 3;
     maxLength;
     showCharacterCount = false;
     autoGrow = false;
     error = false;
     className = '';
+    // Focus behavior
+    hideHintOnFocus = true;
+    hideCharacterCountOnFocus = false;
     // New States
     disabled = false;
     readonly = false;
     value = '';
+    isFocused = false;
     onChange = () => { };
     onTouched = () => { };
     ngAfterViewInit() {
         if (this.autoGrow)
             this.resize();
     }
+    get computedLabelClass() {
+        return cn("text-sm font-medium text-foreground leading-none transition-opacity duration-200", this.disabled && "opacity-50");
+    }
     get textareaClasses() {
-        return cn('flex w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200 shadow-sm', 'placeholder:text-muted-foreground focus-visible:outline-none', 
-        // Focus States (Disabled only when readonly or disabled is true)
-        !(this.readonly || this.disabled) && 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', 
-        // Border colors
-        this.error ? 'border-destructive' : 'border-input', 
-        // Disabled vs Readonly styles
-        this.disabled && 'cursor-not-allowed opacity-50', this.readonly && 'cursor-default border-dashed focus-visible:ring-0', 'scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent', 'min-h-[80px]', this.className);
+        return cn(
+        // Base styles
+        'flex w-full rounded-md border bg-background px-3 py-2 text-sm', 'ring-offset-background transition-all duration-200', 'placeholder:text-muted-foreground', 
+        // Border and shadow
+        'border-input shadow-sm', 
+        // Minimum height
+        'min-h-[80px]', 
+        // Focus state - SIMPLE LIKE ZARDUI
+        !(this.readonly || this.disabled) && [
+            'focus:outline-none',
+            'focus:ring-4',
+            'focus:ring-ring/30',
+            'focus:ring-offset-0',
+            'focus:shadow-none',
+            // Border darkens on focus automatically
+            'focus:border-primary/80'
+        ], 
+        // Error state
+        this.error && [
+            'border-destructive',
+            !(this.readonly || this.disabled) && [
+                'focus:border-destructive/80',
+                'focus:ring-destructive/30'
+            ]
+        ], 
+        // Disabled state
+        this.disabled && [
+            'cursor-not-allowed opacity-50',
+            'border-opacity-50'
+        ], 
+        // Readonly state
+        this.readonly && [
+            'cursor-default',
+            'border-dashed',
+            !this.disabled && 'focus:ring-0 focus:border-opacity-100'
+        ], 
+        // Scrollbar styling
+        'scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent', this.className);
     }
     handleInput(event) {
         if (this.readonly || this.disabled)
@@ -4200,6 +4601,13 @@ class TextareaComponent {
         if (this.autoGrow)
             this.resize();
     }
+    onFocus() {
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
+    }
     resize() {
         const textarea = this.textareaElement.nativeElement;
         textarea.style.height = 'auto';
@@ -4210,11 +4618,17 @@ class TextareaComponent {
         if (this.autoGrow)
             setTimeout(() => this.resize());
     }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextareaComponent, isStandalone: true, selector: "tolle-textarea", inputs: { id: "id", label: "label", placeholder: "placeholder", hint: "hint", rows: "rows", maxLength: "maxLength", showCharacterCount: "showCharacterCount", autoGrow: "autoGrow", error: "error", className: "className", disabled: "disabled", readonly: "readonly" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextareaComponent, isStandalone: true, selector: "tolle-textarea", inputs: { id: "id", label: "label", placeholder: "placeholder", hint: "hint", errorMessage: "errorMessage", rows: "rows", maxLength: "maxLength", showCharacterCount: "showCharacterCount", autoGrow: "autoGrow", error: "error", className: "className", hideHintOnFocus: "hideHintOnFocus", hideCharacterCountOnFocus: "hideCharacterCountOnFocus", disabled: "disabled", readonly: "readonly" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextareaComponent),
@@ -4222,9 +4636,11 @@ class TextareaComponent {
             }
         ], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: `
     <div class="flex flex-col gap-1.5 w-full">
-      <label *ngIf="label" [for]="id"
-             [class.opacity-50]="disabled"
-             class="text-sm font-medium text-foreground leading-none transition-opacity">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class]="computedLabelClass"
+      >
         {{ label }}
       </label>
 
@@ -4238,16 +4654,37 @@ class TextareaComponent {
           [rows]="rows"
           [(ngModel)]="value"
           (input)="handleInput($event)"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           [class]="textareaClasses"
           [style.resize]="(autoGrow || readonly || disabled) ? 'none' : 'vertical'"
           [style.overflow]="autoGrow ? 'hidden' : 'auto'"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
+          [attr.maxlength]="maxLength"
         ></textarea>
       </div>
 
-      <div *ngIf="(showCharacterCount || hint) && !disabled" class="flex justify-between items-center px-1">
-        <p *ngIf="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
-        <p *ngIf="showCharacterCount" class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium">
+      <div *ngIf="(showCharacterCount || hint || errorMessage) && !disabled" class="flex justify-between items-center px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive"
+        >
+          {{ errorMessage }}
+        </p>
+        <p
+          *ngIf="showCharacterCount"
+          class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideCharacterCountOnFocus"
+        >
           {{ value.length || 0 }}{{ maxLength ? ' / ' + maxLength : '' }}
         </p>
       </div>
@@ -4269,9 +4706,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
     <div class="flex flex-col gap-1.5 w-full">
-      <label *ngIf="label" [for]="id"
-             [class.opacity-50]="disabled"
-             class="text-sm font-medium text-foreground leading-none transition-opacity">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class]="computedLabelClass"
+      >
         {{ label }}
       </label>
 
@@ -4285,16 +4724,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [rows]="rows"
           [(ngModel)]="value"
           (input)="handleInput($event)"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           [class]="textareaClasses"
           [style.resize]="(autoGrow || readonly || disabled) ? 'none' : 'vertical'"
           [style.overflow]="autoGrow ? 'hidden' : 'auto'"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
+          [attr.maxlength]="maxLength"
         ></textarea>
       </div>
 
-      <div *ngIf="(showCharacterCount || hint) && !disabled" class="flex justify-between items-center px-1">
-        <p *ngIf="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
-        <p *ngIf="showCharacterCount" class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium">
+      <div *ngIf="(showCharacterCount || hint || errorMessage) && !disabled" class="flex justify-between items-center px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive"
+        >
+          {{ errorMessage }}
+        </p>
+        <p
+          *ngIf="showCharacterCount"
+          class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideCharacterCountOnFocus"
+        >
           {{ value.length || 0 }}{{ maxLength ? ' / ' + maxLength : '' }}
         </p>
       </div>
@@ -4312,6 +4772,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], hint: [{
                 type: Input
+            }], errorMessage: [{
+                type: Input
             }], rows: [{
                 type: Input
             }], maxLength: [{
@@ -4324,6 +4786,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], className: [{
                 type: Input
+            }], hideHintOnFocus: [{
+                type: Input
+            }], hideCharacterCountOnFocus: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -4887,23 +5353,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class OtpSlotComponent {
     char = '';
     isActive = false;
-    isFirst = false; // New Input
-    isLast = false; // New Input
+    isFirst = false;
+    isLast = false;
     class = '';
     cn = cn;
+    get computedClass() {
+        return cn(
+        // Base styles (matching input container)
+        'relative flex h-10 w-10 items-center justify-center', 'transition-all duration-200', 'text-center font-medium select-none', 
+        // Border styling - exactly like input
+        'border border-input shadow-sm bg-background', 
+        // FOCUS STYLING - EXACTLY LIKE INPUT COMPONENT
+        this.isActive && [
+            // Darker border on focus
+            'border-primary/80',
+            // Remove shadow on focus
+            'shadow-none',
+            // Focus ring with same styling as input
+            'ring-4',
+            'ring-ring/30',
+            'ring-offset-0',
+            // Ensure it's above other slots
+            'z-10'
+        ], 
+        // Filled state
+        this.char && !this.isActive && 'border-primary/60', 
+        // Border radius
+        this.isFirst && 'rounded-l-md', this.isLast && 'rounded-r-md', 
+        // Remove left border for all but first slot
+        !this.isFirst && '-ml-px', this.class);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OtpSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: OtpSlotComponent, isStandalone: true, selector: "tolle-otp-slot", inputs: { char: "char", isActive: "isActive", isFirst: "isFirst", isLast: "isLast", class: "class" }, ngImport: i0, template: `
-    <div [class]="cn(
-      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all',
-      'bg-background',
-      isFirst ? 'rounded-l-md border-l' : '',
-      isLast ? 'rounded-r-md' : '',
-      isActive ? 'z-10 ring-2 ring-ring ring-offset-background' : '',
-      class
-    )">
-      {{ char || '' }}
+    <div [class]="computedClass">
+      <span class="text-lg font-medium">{{ char || '' }}</span>
       <div *ngIf="isActive && !char" class="pointer-events-none absolute inset-0 flex items-center justify-center">
-        <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+        <div class="h-6 w-0.5 animate-caret-blink bg-foreground"></div>
       </div>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -4915,17 +5400,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     standalone: true,
                     imports: [NgIf],
                     template: `
-    <div [class]="cn(
-      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all',
-      'bg-background',
-      isFirst ? 'rounded-l-md border-l' : '',
-      isLast ? 'rounded-r-md' : '',
-      isActive ? 'z-10 ring-2 ring-ring ring-offset-background' : '',
-      class
-    )">
-      {{ char || '' }}
+    <div [class]="computedClass">
+      <span class="text-lg font-medium">{{ char || '' }}</span>
       <div *ngIf="isActive && !char" class="pointer-events-none absolute inset-0 flex items-center justify-center">
-        <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+        <div class="h-6 w-0.5 animate-caret-blink bg-foreground"></div>
       </div>
     </div>
   `